:root {
    --bg: #0b0f14;
    --card: #0f141b;
    --text: #e8eef6;
    --muted: #93a4b8;
    --brand: hsla(194, 100%, 69%, 1);
    --brand-2: hsla(217, 100%, 56%, 1);
    --accent: hsla(194, 100%, 69%, 1);
    --glass: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.12);
    --shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
    --radius-2xl: 24px;
    --header-h-sm: 64px;
    --header-h-lg: 72px;
    --header-h: var(--header-h-lg);
}

@media (max-width: 980px) {
    :root {
        --header-h: var(--header-h-sm);
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

.btn-cta {
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hsla(194 100% 69% / 1);
    --btn-bg-2: hsla(217 100% 56% / 1);
    --btn-bg-color: hsla(360 100% 100% / 1);
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 14px;
    min-width: 120px;
    min-height: 44px;
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 600;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    border: none;
    color: var(--btn-bg-color);
    box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);
    text-decoration: none;
}

.btn-cta:hover {
    background-position: right top;
}

.btn-cta:is(:focus, :focus-visible, :active) {
    outline: none;
    box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);
}

.bg-wrap {
    position: fixed;
    inset: 0;
    z-index: -2;
}

.bg {
    position: absolute;
    inset: -30% -30% -30% -30%;
    filter: blur(80px) saturate(140%);
    background: radial-gradient(45% 45% at 70% 20%, rgba(121, 231, 255, 0.25), transparent 60%), radial-gradient(35% 35% at 20% 75%, rgba(157, 123, 255, 0.18), transparent 60%), radial-gradient(25% 25% at 85% 80%, rgba(25, 247, 208, 0.22), transparent 60%), radial-gradient(30% 30% at 10% 20%, rgba(255, 255, 255, 0.05), transparent 60%);
    animation: floatbg 18s ease-in-out infinite alternate;
}

@keyframes floatbg {
    from {
        transform: translateY(-2%) scale(1);
    }

    to {
        transform: translateY(2%) scale(1.02);
    }
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-h);
    backdrop-filter: saturate(140%) blur(10px);
    background: linear-gradient(180deg, rgba(8, 12, 18, .85), rgba(8, 12, 18, 0));
    border-bottom: 1px solid var(--border);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 22px;
}

.nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-decoration: none;
    color: var(--text);
    font-size: clamp(18px, 2vw, 20px);
}

.brand .logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .09);
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.nav-links a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(18px, 2vw, 20px) !important;
}

.nav-links a:hover {
    color: var(--text);
}

.nav-toggle {
    appearance: none;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .03);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: none;
    place-items: center;
    cursor: pointer;
    transition: transform .15s ease;
    color: var(--text);
}

.nav-toggle:hover {
    transform: translateY(-1px);
}

.nav-toggle svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 980px) {
    .nav {
        grid-template-columns: auto auto 1fr;
    }

    .nav-toggle {
        display: grid;
    }

    .nav-links {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        background: rgba(8, 12, 18, .9);
        backdrop-filter: blur(8px) saturate(140%);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
        display: flex;
        flex-direction: column;
        padding: 14px 18px;
        transform: translateY(-120%);
        transition: transform 500ms ease-in-out;
    }

    body.menu-open .nav-links {
        transform: translateY(0);
    }

    .nav-links a {
        margin: 0;
        font-size: 15px;
        width: 100%;
        padding: 8px 0;
        text-align: center;
    }

    body.menu-open {
        overflow: hidden;
    }
}

[id] {
    scroll-margin-top: calc(var(--header-h) + 12px);
}

.hero {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 36px;
    align-items: center;
    padding: 84px 0 42px;
}

.hero h1 {
    font-size: clamp(48px, 5vw, 64px);
    line-height: 1.04;
    margin: 20px 0 14px;
    letter-spacing: -0.02em;
}

.hero p {
    font-size: clamp(20px, 2vw, 26px);
    color: var(--muted);
    margin: 0 0 26px;
}

.hero .q-list {
    display: grid;
    gap: 8px;
    color: var(--muted);
    margin: 10px 0 26px;
    font-size: clamp(16px, 2vw, 20px);
}

.hero .q-list span::before {
    content: "• ";
    color: var(--accent);
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 18px var(--accent);
}

.cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    --br: linear-gradient(90deg, var(--brand), var(--brand-2));
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--border);
    color: var(--text);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    transition: transform .2s ease, filter .2s ease;
    font-size: clamp(18px, 2vw, 20px);
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.btn.primary {
    border: 1px solid transparent;
    background: var(--br);
    box-shadow: 0 10px 30px rgba(121, 231, 255, .18);
}

.btn.ghost {
    background: rgba(255, 255, 255, .02);
}

.section {
    padding: 70px 0;
}

.section h2 {
    font-size: clamp(32px, 3.5vw, 48px);
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.section p.lead {
    color: var(--muted);
    margin: 0 0 28px;
    font-size: clamp(18px, 2vw, 20px);
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}

.col-6 {
    grid-column: span 6;
}

.col-8 {
    grid-column: span 8;
}

.col-12 {
    grid-column: span 12;
}

@media (max-width: 1200px) {
    .container {
        padding: 0 18px;
    }
}

@media (max-width: 980px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 56px;
    }

    .col-3,
    .col-4,
    .col-6,
    .col-8 {
        grid-column: span 12;
    }

    .cta .btn {
        flex: 1 1 auto;
    }
}

@media (hover: none),
(pointer: coarse) {

    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }
}

@media (max-width: 680px) {
    .nav {
        height: var(--header-h);
        display: flex;
        justify-content: space-between;
    }

    .hero {
        gap: 20px;
    }

    .btn,
    .btn-cta {
        width: 100%;
        text-align: center;
    }
}

.card {
    position: relative;
    border-radius: var(--radius-2xl);
    padding: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    isolation: isolate;
}

.card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 30%), conic-gradient(from var(--angle), var(--brand), var(--brand-2), var(--accent), var(--brand));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 6s linear infinite;
    z-index: -1;
}

@keyframes spin {
    to {
        --angle: 360deg;
    }
}

.card h3 {
    margin: 20px 0 8px;
    letter-spacing: -.01em;
    font-size: clamp(20px, 2vw, 26px);
}

.card p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(18px, 2vw, 20px);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    font-size: 14px;
    color: var(--muted);
}

.icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, .2), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid var(--border);
}

.icon svg {
    width: 20px;
    height: 20px;
}

.pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.price .amount {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ul {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
}

.ul li {
    margin: 10px 0;
    display: flex;
    gap: 10px;
    font-size: clamp(16px, 2vw, 20px);
}

.ul li::before {
    content: "✓";
    color: var(--accent);
    opacity: .9;
}

@media (max-width: 980px) {
    .pricing {
        grid-template-columns: 1fr;
    }
}

footer {
    padding: 36px 0 60px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, .02);
    text-align: center;
    font-size: clamp(16px, 2vw, 18px);
}

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%);
}

.cursor-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 18px var(--accent);
    mix-blend-mode: screen;
}

.cursor-ring {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(120, 231, 255, .6);
    filter: drop-shadow(0 0 10px rgba(120, 231, 255, .25));
    transition: width .2s ease, height .2s ease, border-color .2s ease;
}

a:hover~.cursor-ring,
button:hover~.cursor-ring {
    width: 46px;
    height: 46px;
    border-color: var(--accent);
}

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: .6s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .bg {
        animation: none;
    }

    .reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .cursor-ring,
    .cursor-dot {
        display: none;
    }
}

.sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 28px 0;
}

.flex {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.right {
    text-align: right;
}

footer div span {
    width: 100%;
}

.grad-text {
    background: linear-gradient(90deg, var(--brand), var(--accent), var(--brand-2), var(--brand));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 300% 100%;
    animation: shine 6s ease-in-out infinite;
}

.grad-text.alt {
    animation-direction: reverse;
}

@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .grad-text {
        animation: none;
        background-size: 100% 100%;
    }
}