:root {
    --navy: #070b1f;
    --navy2: #0d1433;
    --violet: #7c3aed;
    --violet2: #a78bfa;
    --gold: #f5b942;
    --gold2: #ffdc8a;
    --cyan: #22d3ee;
    --text: #e8ebff;
    --muted: #a3abd1;
    --card: rgba(255,255,255,.06);
    --line: rgba(255,255,255,.12);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Plus Jakarta Sans',system-ui,sans-serif;
    background: var(--navy);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden
}

img {
    max-width: 100%;
    display: block
}

a {
    text-decoration: none;
    color: inherit
}

.wrap {
    width: min(1180px,92%);
    margin: 0 auto
}

.narrow {
    width: min(820px,92%)
}

/* animated background */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(1200px 700px at 80% -10%,#1b1450 0,transparent 60%),radial-gradient(900px 600px at -10% 30%,#0c2a52 0,transparent 55%),var(--navy)
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .45;
    animation: float 14s ease-in-out infinite
}

.o1 {
    width: 420px;
    height: 420px;
    background: var(--violet);
    top: 5%;
    left: -8%
}

.o2 {
    width: 360px;
    height: 360px;
    background: var(--cyan);
    top: 40%;
    right: -6%;
    animation-delay: -5s;
    opacity: .28
}

.o3 {
    width: 320px;
    height: 320px;
    background: var(--gold);
    bottom: -5%;
    left: 35%;
    animation-delay: -9s;
    opacity: .2
}

@keyframes float {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(40px,-50px) scale(1.12)
    }
}

/* top bar + nav */
.topbar {
    background: linear-gradient(90deg,var(--violet),#4f46e5,var(--violet));
    background-size: 200% 100%;
    animation: slide 6s linear infinite;
    text-align: center;
    font-size: .85rem;
    padding: .55rem 1rem;
    color: #fff
}

@keyframes slide {
    to {
        background-position: 200% 0
    }
}

.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    margin-right: .5rem;
    box-shadow: 0 0 0 0 rgba(74,222,128,.7);
    animation: pulse 1.6s infinite
}

@keyframes pulse {
    70% {
        box-shadow: 0 0 0 10px rgba(74,222,128,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74,222,128,0)
    }
}

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px);
    background: rgba(7,11,31,.65);
    border-bottom: 1px solid var(--line)
}

.nav-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 0
}

.brand {
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,var(--gold),#ff9d2e);
    color: #1a1200;
    font-weight: 800
}

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1.6rem;
    border-radius: 14px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    transition: .25s;
    position: relative;
    overflow: hidden
}

.btn-gold {
    background: linear-gradient(135deg,var(--gold2),var(--gold) 50%,#ff9d2e);
    color: #1a1200;
    box-shadow: 0 10px 30px -8px rgba(245,185,66,.6)
}

    .btn-gold::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
        transform: skewX(-20deg);
        animation: shine 3.2s infinite
    }

@keyframes shine {
    to {
        left: 160%
    }
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -8px rgba(245,185,66,.75)
}

.btn-sm {
    padding: .55rem 1.1rem;
    font-size: .9rem;
    border-radius: 10px
}

.btn-lg {
    padding: 1.1rem 2.2rem;
    font-size: 1.1rem
}

.btn-block {
    width: 100%
}

/* typography */
h1 {
    font-family: 'Playfair Display',serif;
    font-size: clamp(2.4rem,5.4vw,4.2rem);
    line-height: 1.08;
    margin: 1rem 0
}

h2 {
    font-family: 'Playfair Display',serif;
    font-size: clamp(1.8rem,3.6vw,2.7rem);
    line-height: 1.15;
    margin: .7rem 0 1rem
}

h3 {
    font-size: 1.15rem;
    margin-bottom: .4rem
}

.grad-text {
    background: linear-gradient(100deg,var(--gold2),var(--gold),#ff8a5b,var(--violet2));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradmove 5s linear infinite
}

@keyframes gradmove {
    to {
        background-position: 200% center
    }
}

.year {
    color: var(--cyan);
    text-shadow: 0 0 30px rgba(34,211,238,.5)
}

.lead {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 560px
}

    .lead b {
        color: var(--gold2)
    }

    .lead.sm {
        font-size: 1.02rem
    }

.chip {
    display: inline-block;
    padding: .4rem .95rem;
    border-radius: 999px;
    background: rgba(124,58,237,.18);
    border: 1px solid rgba(167,139,250,.4);
    color: var(--violet2);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em
}

/* hero */
.hero {
    padding: 3rem 0 4rem
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: start
}

.ticks {
    list-style: none;
    margin: 1.5rem 0
}

    .ticks li {
        padding: .35rem 0 .35rem 2rem;
        position: relative;
        color: #d6dbff
    }

        .ticks li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: .35rem;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg,var(--cyan),var(--violet));
            display: grid;
            place-items: center;
            font-size: .75rem;
            font-weight: 800;
            color: #fff
        }

.countdown {
    display: flex;
    gap: .8rem;
    margin: 1.6rem 0
}

    .countdown div {
        min-width: 74px;
        text-align: center;
        padding: .8rem .4rem;
        border-radius: 16px;
        background: var(--card);
        border: 1px solid var(--line);
        backdrop-filter: blur(10px)
    }

    .countdown b {
        display: block;
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--gold2);
        font-variant-numeric: tabular-nums
    }

    .countdown small {
        color: var(--muted);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .08em
    }

.host-mini {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 1rem
}

    .host-mini img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--navy);
        margin-left: -10px
    }

        .host-mini img:first-child {
            margin-left: 0
        }

    .host-mini span {
        margin-left: .9rem;
        font-size: .88rem;
        color: var(--muted)
    }

/* form card */
.card-form {
    position: relative;
    padding: 2rem;
    border-radius: 26px;
    background: linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px -20px rgba(124,58,237,.55),inset 0 1px 0 rgba(255,255,255,.2)
}

    .card-form::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 28px;
        z-index: -1;
        background: conic-gradient(from 0deg,var(--violet),var(--cyan),var(--gold),var(--violet));
        filter: blur(14px);
        opacity: .45;
        animation: spin 8s linear infinite
    }

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.card-form h2 {
    font-size: 1.9rem;
    margin: .2rem 0
}

.card-form .sub {
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 1.2rem
}

.ribbon {
    position: absolute;
    top: -14px;
    right: 22px;
    background: linear-gradient(135deg,#34d399,#10b981);
    color: #04261c;
    font-weight: 800;
    font-size: .8rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px -6px rgba(16,185,129,.7)
}

.fld {
    display: block;
    margin-bottom: .9rem
}

    .fld span {
        display: block;
        font-size: .8rem;
        font-weight: 600;
        color: #cfd5ff;
        margin-bottom: .3rem
    }

    .fld input, .fld select {
        width: 100%;
        padding: .8rem 1rem;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: rgba(7,11,31,.6);
        color: #fff;
        font-family: inherit;
        font-size: .95rem;
        transition: .2s
    }

        .fld select option {
            background: #0d1433;
            color: #fff
        }

        .fld input::placeholder {
            color: #6f78a8
        }

        .fld input:focus, .fld select:focus {
            outline: 0;
            border-color: var(--gold);
            box-shadow: 0 0 0 4px rgba(245,185,66,.18)
        }

        .fld input.err, .fld select.err {
            border-color: #f87171;
            box-shadow: 0 0 0 4px rgba(248,113,113,.15)
        }

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem
}

.hp {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0
}

.msg {
    margin-top: .8rem;
    font-size: .88rem;
    text-align: center;
    min-height: 1.2rem;
    color: #fca5a5
}

.privacy {
    text-align: center;
    font-size: .78rem;
    color: var(--muted);
    margin-top: .4rem
}

.spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(26,18,0,.3);
    border-top-color: #1a1200;
    border-radius: 50%;
    animation: spin 0.8s linear infinite
}

.loading .spinner {
    display: inline-block
}

.loading .btn-text {
    display: none
}

.success {
    display: none;
    text-align: center;
    padding: 2rem 0
}

    .success.show {
        display: block;
        animation: pop .6s cubic-bezier(.2,1.4,.4,1)
    }

    .success .check {
        width: 84px;
        height: 84px;
        margin: 0 auto 1rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 2.6rem;
        font-weight: 800;
        color: #04261c;
        background: linear-gradient(135deg,#6ee7b7,#10b981);
        box-shadow: 0 0 0 12px rgba(16,185,129,.15)
    }

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(.7)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

/* ticker */
.ticker {
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    padding: 1rem 0
}

.ticker-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: marquee 32s linear infinite
}

    .ticker-track span {
        font-weight: 700;
        color: var(--muted);
        white-space: nowrap;
        font-size: 1.05rem
    }

        .ticker-track span::before {
            content: "◆";
            color: var(--gold);
            margin-right: 1rem;
            font-size: .7rem
        }

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

/* stats */
.stats {
    padding: 3.5rem 0 1rem
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem
}

.stat {
    text-align: center;
    padding: 1.6rem 1rem;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--line)
}

    .stat b {
        font-family: 'Playfair Display',serif;
        font-size: 2.6rem;
        color: var(--gold2);
        display: block
    }

    .stat small {
        color: var(--muted);
        font-size: .85rem
    }

/* sections */
.sec {
    padding: 5rem 0
}

.sec-alt {
    background: linear-gradient(180deg,transparent,rgba(124,58,237,.07),transparent)
}

.sec-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem
}

    .sec-head p {
        color: var(--muted)
    }

.grid3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.2rem
}

.grid4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.2rem
}

.feat {
    padding: 1.8rem;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    transition: .3s;
    position: relative;
    overflow: hidden
}

    .feat::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(400px 120px at 0 0,rgba(124,58,237,.3),transparent);
        opacity: 0;
        transition: .3s
    }

    .feat:hover {
        transform: translateY(-8px);
        border-color: rgba(245,185,66,.5)
    }

        .feat:hover::before {
            opacity: 1
        }

    .feat p {
        color: var(--muted);
        font-size: .93rem;
        position: relative
    }

    .feat h3, .feat .ico {
        position: relative
    }

.ico {
    font-size: 1.8rem;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg,rgba(124,58,237,.35),rgba(34,211,238,.2));
    margin-bottom: 1rem
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center
}

    .split.rev > :first-child {
        order: 1
    }

.split-img {
    position: relative;
    border-radius: 26px;
    aspect-ratio: 4/3.4;
    background: linear-gradient(135deg,var(--violet),var(--navy2) 60%,var(--cyan));
    box-shadow: 0 30px 70px -25px rgba(124,58,237,.6)
}

    .split-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 26px
    }

    .split-img.noimg img {
        display: none
    }

.float-card {
    position: absolute;
    padding: .7rem 1.1rem;
    border-radius: 14px;
    background: rgba(13,20,51,.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    font-weight: 700;
    font-size: .9rem;
    animation: bob 4s ease-in-out infinite
}

.fc1 {
    left: -18px;
    bottom: 28px
}

.fc2 {
    right: -14px;
    top: 30px;
    animation-delay: -2s
}

@keyframes bob {
    50% {
        transform: translateY(-12px)
    }
}

.timeline {
    list-style: none;
    margin: 1.5rem 0 2rem;
    border-left: 2px dashed rgba(167,139,250,.4);
    padding-left: 1.6rem;
    counter-reset: s
}

    .timeline li {
        position: relative;
        margin-bottom: 1.2rem;
        counter-increment: s
    }

        .timeline li::before {
            content: counter(s);
            position: absolute;
            left: calc(-1.6rem - 15px);
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg,var(--gold2),var(--gold));
            color: #1a1200;
            font-weight: 800;
            font-size: .8rem;
            display: grid;
            place-items: center
        }

    .timeline b {
        display: block;
        font-size: 1.05rem
    }

    .timeline span {
        color: var(--muted);
        font-size: .92rem
    }

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.4rem
}

    .badges span {
        padding: .5rem 1rem;
        border-radius: 999px;
        background: var(--card);
        border: 1px solid var(--line);
        font-size: .85rem;
        font-weight: 600
    }

.who {
    padding: 1.6rem;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    text-align: center;
    transition: .3s
}

    .who:hover {
        background: rgba(245,185,66,.08);
        border-color: rgba(245,185,66,.4);
        transform: translateY(-6px)
    }

    .who b {
        display: block;
        font-size: 1.05rem;
        margin-bottom: .3rem;
        color: var(--gold2)
    }

    .who span {
        color: var(--muted);
        font-size: .9rem
    }

.faq {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.1rem 1.4rem;
    margin-bottom: .8rem
}

    .faq summary {
        cursor: pointer;
        font-weight: 700;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 1rem
    }

        .faq summary::after {
            content: "+";
            color: var(--gold);
            font-size: 1.4rem;
            line-height: 1
        }

    .faq[open] summary::after {
        content: "–"
    }

    .faq p {
        color: var(--muted);
        margin-top: .7rem
    }

.final {
    padding: 5.5rem 0;
    text-align: center;
    background: radial-gradient(700px 300px at 50% 0,rgba(124,58,237,.35),transparent)
}

    .final p {
        color: var(--muted);
        margin-bottom: 1.8rem
    }

.foot {
    padding: 1.6rem 0;
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
    border-top: 1px solid var(--line)
}

.sticky-cta {
    display: none
}

/* reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s ease,transform .8s ease
}

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

@media(max-width:980px) {
    .hero-grid, .split {
        grid-template-columns: 1fr;
        gap: 2.2rem
    }

        .split.rev > :first-child {
            order: 0
        }

    .grid3 {
        grid-template-columns: 1fr 1fr
    }

    .grid4, .stats-grid {
        grid-template-columns: 1fr 1fr
    }

    .fc1 {
        left: 8px
    }

    .fc2 {
        right: 8px
    }
}

@media(max-width:600px) {
    .grid3, .grid4 {
        grid-template-columns: 1fr
    }

    .two {
        grid-template-columns: 1fr
    }

    .countdown div {
        min-width: 0;
        flex: 1
    }

    .card-form {
        padding: 1.5rem
    }

    .sec {
        padding: 3.5rem 0
    }

    .sticky-cta {
        display: block;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 60;
        text-align: center;
        padding: 1rem;
        border-radius: 14px;
        font-weight: 800;
        color: #1a1200;
        background: linear-gradient(135deg,var(--gold2),var(--gold),#ff9d2e);
        box-shadow: 0 12px 30px rgba(0,0,0,.5);
        transition: .3s
    }

        .sticky-cta.hide {
            opacity: 0;
            pointer-events: none;
            transform: translateY(20px)
        }

    body {
        padding-bottom: 80px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

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