nav ul li a {
    position: relative;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    transition: color 0.3s;
}

nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: #b054d8;
    transition: width 0.3s ease;
}

nav ul li a:hover {
    color: #b054d8;
}

nav ul li a:hover::after {
    width: 100%;
}

::selection {
    background: #b054d850;
    color: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background: #130D18;
    color: #e0e0e0;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

header .container {
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 1200px;
}

header h1 {
    font-family: 'Oddval', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #d78bff;
    text-shadow: 0 0 10px rgba(215, 139, 255, 0.3);
    letter-spacing: 0.5px;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 1100;
    margin-right: 20px;
    margin-left: -15px;
    position: relative;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background: #e0e0e0;
    transition: all 0.2s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    opacity: 1;
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
    opacity: 1;
}

.hamburger:not(.active) span {
    opacity: 1;
}

.hamburger.active {
    opacity: 1;
}

nav.mobile-nav {
    position: fixed;
    top: 0;
    width: 300px;
    left: -300px;
    height: 100%;
    background: #1A1321;
    border-right: 1px solid #2a1e33;
    transition: left 0.3s ease;
    z-index: 999;
}

nav.mobile-nav.active {
    left: 0;
}

nav.mobile-nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 80px 20px;
}

nav.mobile-nav ul li {
    margin: 15px 0;
}

nav.mobile-nav ul li a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    font-family: sans-serif;
    transition: color 0.3s, text-shadow 0.3s;
}

nav.mobile-nav ul li a:hover {
    color: #b054d8;
    text-shadow: 0 0 8px rgba(176, 84, 216, 0.5);
}

nav:not(.mobile-nav) {
    margin-left: auto;
}

nav:not(.mobile-nav) ul {
    display: flex;
    list-style: none;
    justify-content: flex-end;
}

nav:not(.mobile-nav) ul li {
    margin-left: 40px;
}

nav:not(.mobile-nav) ul li a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    transition: color 0.3s, text-shadow 0.3s;
}

nav:not(.mobile-nav) ul li a:hover {
    color: #b054d8;
    text-shadow: 0 0 8px rgba(176, 84, 216, 0.5);
}

h1, h2, h3 {
    font-family: 'Oddval', sans-serif;
}

section {
    padding: 80px 0;
}

h2 {
    font-size: 42px;
    color: #e0e0e0;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
}

h2 .highlight {
    color: #b054d8;
}

#about {
    background: url('background.png') no-repeat center center/cover;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

#about .overlay {
    background: rgba(28, 18, 38, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#about .container {
    text-align: center;
}

#about h2 {
    font-size: 56px;
    margin-bottom: 25px;
}

#about p {
    font-size: 22px;
    max-width: 900px;
    margin: 0 auto 35px;
    line-height: 1.6;
}

#home {
    text-align: center;
    background: #130D18;
}

#home h2 {
    font-size: 48px;
}

#home p {
    font-size: 20px;
    margin-bottom: 40px;
    line-height: 1.5;
}

.btn {
    display: inline-block;
    padding: 16px 40px;
    background: linear-gradient(90deg, #8a3a9c, #b054d8);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 0 15px rgba(176, 84, 216, 0.3);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(176, 84, 216, 0.6);
}

#advantages {
    background: #130D18;
    padding-bottom: 20px;
}

#advantages .advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.advantage-card {
    background: #1A1321;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.advantage-card:hover {
    transform: translateY(-5px);
}

.advantage-card .icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    background-size: contain;
    background-repeat: no-repeat;
}

.advantage-card h3,
.plan-card h3 {
    margin-bottom: 15px;
}

.plan-card h3 {
    margin-bottom: 25px;
}

.advantage-card .support {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23e0e0e0" d="M12 2C6.486 2 2 6.486 2 12v4.143C2 17.167 2.897 18 4 18h1a1 1 0 0 0 1-1v-5.143a1 1 0 0 0-1-1h-.908C4.648 6.987 7.978 4 12 4s7.352 2.987 7.908 6.857H19a1 1 0 0 0-1 1V18c0 1.103-.897 2-2 2h-2v-1h-4v3h6c2.206 0 4-1.794 4-4c1.103 0 2-.833 2-1.857V12c0-5.514-4.486-10-10-10z"/></svg>');
}

.advantage-card .shield {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23e0e0e0" fill-rule="evenodd" d="m3.003 4.702l4.22-2.025a1.796 1.796 0 0 1 1.554 0l4.22 2.025a.886.886 0 0 1 .503.8V6a8.55 8.55 0 0 1-3.941 7.201l-.986.631a1.063 1.063 0 0 1-1.146 0l-.986-.63A8.55 8.55 0 0 1 2.5 6v-.498c0-.341.196-.652.503-.8m3.57-3.377L2.354 3.35A2.387 2.387 0 0 0 1 5.502V6a10.05 10.05 0 0 0 4.632 8.465l.986.63a2.563 2.563 0 0 0 2.764 0l.986-.63A10.05 10.05 0 0 0 15 6v-.498c0-.918-.526-1.755-1.354-2.152l-4.22-2.025a3.296 3.296 0 0 0-2.852 0ZM8.47 9.97a.75.75 0 1 0 1.06 1.06c.575-.574 1.118-1.398 1.516-2.195c.386-.772.704-1.653.704-2.335a.75.75 0 0 0-1.5 0c0 .318-.182.937-.546 1.665c-.352.703-.809 1.379-1.234 1.805" clip-rule="evenodd"/></svg>');
}

.advantage-card .speed {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="%23e0e0e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.748 3.572c.059-.503-.532-.777-.835-.388L4.11 13.197c-.258.33-.038.832.364.832h6.988c.285 0 .506.267.47.57l-.68 5.83c-.06.502.53.776.834.387l7.802-10.013c.258-.33.038-.832-.364-.832h-6.988c-.285 0-.506-.267-.47-.57l.68-5.83Z"/></svg>');
}

.advantage-card .price {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><g fill="%23e0e0e0" fill-rule="evenodd" clip-rule="evenodd"><path d="M10.897 8.7c-.551.413-.8.908-.8 1.37c0 .463.249.958.8 1.372c.552.414 1.36.7 2.295.7a1 1 0 1 1 0 2c-1.326 0-2.565-.402-3.495-1.1c-.93-.698-1.6-1.738-1.6-2.971c0-1.234.67-2.274 1.6-2.972c.93-.697 2.17-1.099 3.495-1.099c2.053 0 3.994.983 4.766 2.62a1 1 0 0 1-1.81.853C15.798 8.726 14.706 8 13.193 8c-.935 0-1.743.286-2.295.7Z"/><path d="M15.157 17.583c.551-.413.799-.908.799-1.37c0-.464-.248-.959-.8-1.372c-.551-.414-1.36-.7-2.294-.7a1 1 0 1 1 0-2c1.326 0 2.565.402 3.495 1.1c.93.698 1.599 1.738 1.599 2.971s-.669 2.274-1.6 2.971c-.93.698-2.168 1.1-3.494 1.1c-2.053 0-3.995-.983-4.766-2.621a1 1 0 0 1 1.809-.853c.352.748 1.444 1.474 2.957 1.474c.935 0 1.743-.286 2.295-.7ZM13 4a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1Z"/><path d="M13 19a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Z"/><path d="M13 24c6.075 0 11-4.925 11-11S19.075 2 13 2S2 6.925 2 13s4.925 11 11 11Zm0 2c7.18 0 13-5.82 13-13S20.18 0 13 0S0 5.82 0 13s5.82 13 13 13Z"/></g></svg>');
}

#plans {
    background: #130D18;
}

#plans .plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.plan-card {
    background: #1A1321;
    padding: 35px;
    border-radius: 14px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.plan-card:hover {
    transform: translateY(-5px);
}

.plan-card h3 {
    font-size: 28px;
    color: #e0e0e0;
    margin-bottom: 15px;
}

.plan-card .new-price {
    font-size: 30px;
    color: #b054d8;
    margin-bottom: 20px;
    font-weight: 700;
}

.plan-card ul {
    list-style: none;
    margin-bottom: 30px;
}

.plan-card ul li {
    font-size: 17px;
    margin: 12px 0;
    line-height: 1.5;
}

footer {
    background: #130D18;
    padding: 25px 0;
    text-align: center;
    font-size: 16px;
    color: #aaa;
}

@media (max-width: 768px) {
    header {
        display: flex;
    }

    .hamburger {
        display: flex;
    }

    nav:not(.mobile-nav) {
        display: none;
    }

    h2 {
        font-size: 34px;
    }

    #about {
        height: 100vh;
    }

    #about h2 {
        font-size: 44px;
    }

    #about p {
        font-size: 18px;
    }

    #home h2 {
        font-size: 40px;
    }

    #home p {
        font-size: 18px;
    }

    .plans-grid, .advantages-grid {
        grid-template-columns: 1fr;
    }

    .plan-card, .advantage-card {
        padding: 25px;
    }

    .plan-card h3, .advantage-card h3 {
        font-size: 24px;
    }

    .plan-card .new-price {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    header .logo {
        font-size: 28px;
    }

    nav.mobile-nav ul li a {
        font-size: 18px;
    }

    #home {
        padding: 60px 0;
    }

    #home h2 {
        font-size: 32px;
    }

    #about h2 {
        font-size: 36px;
    }

    #about p {
        font-size: 16px;
    }

    .btn {
        padding: 12px 30px;
        font-size: 16px;
    }

    h2 {
        font-size: 28px;
    }

    .advantage-card .icon {
        width: 40px;
        height: 40px;
    }
}

@font-face {
    font-family: 'Oddval';
    src: url('fonts/Oddval-SemiBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    font-family: 'Oddval', sans-serif;
}

body::-webkit-scrollbar {
    display: none;
}