@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');


/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {
    /* Brand colors */
    --indigo: #3D52A0;
    --indigo-dark: #2d3f7a;
    --indigo-light: #EEF2FF;
    --violet: #7091E6;
    --violet-light: #EDE9FE;
    --amber: #F59E0B;
    --amber-light: #FEF3C7;
    --emerald: #10B981;
    --emerald-light: #D1FAE5;
    --rose: #F43F5E;
    --rose-light: #FFE4E6;
    --sky-light: #E0F2FE;
    /* Neutrals */
    --bg: #F4F6FF;
    --surface: #fff;
    --border: #E2E8F0;
    --text: #0F172A;
    --text-2: #475569;
    --text-3: #94A3B8;
}
.wave-light-to-dark,
.wave-dark-to-light-2 {
    background: linear-gradient( 5deg, #0D1117 0%, #131B2E 40%, #1a2550 110% );
}


/* ============================================================
   RESET & BASE
   ============================================================ */

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

html {
    scroll-behavior: auto;
}

body {
    font-family: 'Outfit', sans-serif;
    background: #fff;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 11px;
    font-weight: 700;
    font-size: 15px;
    transition: all .2s;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, #3D52A0, #5B73C7);
    color: #fff;
    box-shadow: 0 4px 16px rgba(61, 82, 160, .35);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(61, 82, 160, .45);
    }

.btn-ghost {
    background: transparent;
    color: #475569;
    border: 1.5px solid #E2E8F0;
}

    .btn-ghost:hover {
        background: #EEF2FF;
        color: #3D52A0;
        border-color: #3D52A0;
    }

.btn-white {
    background: #fff;
    color: #3D52A0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

    .btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    }

.btn-outline-white {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
}

    .btn-outline-white:hover {
        background: rgba(255, 255, 255, .25);
        border-color: #fff;
    }

.btn-lg {
    padding: 15px 34px;
    font-size: 16px;
    border-radius: 13px;
}

.btn-sm {
    padding: 8px 18px;
    font-size: 13px;
    border-radius: 9px;
}


/* ============================================================
   CHIP
   ============================================================ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}


/* ============================================================
   AVATARS
   ============================================================ */

.av {
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

    .av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.av-sm {
    width: 38px;
    height: 38px;
}

.av-md {
    width: 46px;
    height: 46px;
}


/* ============================================================
   NAVBAR
   ============================================================ */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 68px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 22px;
    color: #3D52A0;
}

.nav-logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3D52A0, #7091E6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 14px rgba(61, 82, 160, .3);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-link {
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    transition: all .15s;
}

    .nav-link:hover {
        background: #F4F6FF;
        color: #0F172A;
    }

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

@media (max-width: 768px) {
    .nav {
        padding: 0 20px;
    }

    .nav-links {
        display: none;
    }
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
    background: linear-gradient(150deg, #EEF2FF 0%, #F4F6FF 45%, #EDE9FE 100%);
    padding: 100px 48px 70px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .hero::before {
        content: '';
        position: absolute;
        top: -160px;
        left: 50%;
        transform: translateX(-50%);
        width: 900px;
        height: 600px;
        background: radial-gradient(ellipse, rgba(112, 145, 230, .18), transparent 70%);
        pointer-events: none;
    }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #C7D7FF;
    border-radius: 99px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #3D52A0;
    margin-bottom: 28px;
    box-shadow: 0 2px 12px rgba(61, 82, 160, .1);
}

.hero-title {
    font-size: clamp(38px, 6vw, 76px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -2px;
    color: #0F172A;
    margin-bottom: 22px;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Space Grotesk', sans-serif;
}

    .hero-title .grad {
        background: linear-gradient(135deg, #3D52A0, #7091E6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.hero-sub {
    font-size: clamp(16px, 2vw, 20px);
    color: #475569;
    line-height: 1.75;
    max-width: 660px;
    margin: 0 auto 42px;
}

.hero-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 64px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 52px;
    padding-top: 44px;
    border-top: 1px solid #E2E8F0;
    flex-wrap: wrap;
}

.stat-num {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
    background: linear-gradient(135deg, #3D52A0, #7091E6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-lbl {
    font-size: 14px;
    color: #475569;
    margin-top: 6px;
    font-weight: 600;
}

/* Hero mockup cards */
.hero-mockup {
    max-width: 880px;
    margin: 52px auto -24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mock {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 8px 28px rgba(61, 82, 160, .1);
    text-align: left;
}

    .mock:nth-child(1) {
        animation: floatUp .5s ease .10s both;
    }

    .mock:nth-child(2) {
        animation: floatUp .5s ease .22s both;
    }

    .mock:nth-child(3) {
        animation: floatUp .5s ease .34s both;
    }

    .mock:nth-child(4) {
        animation: floatUp .5s ease .46s both;
    }

@keyframes floatUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 70px 20px 60px;
    }
    .hero-split {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .hero-copy {
        max-width: 100%;
        justify-self: center;
    }
    .hero-mockup-wrap {
        display: none !important; /* hide browser mockup on mobile — saves space */
    }
    .hero-dark .hero-btns {
        justify-content: center !important;
    }
    .hero-trust-row {
        justify-content: center;
    }
    /* stat pills: center them */
    .hero-stats-row { justify-content: center; }
}

@media (max-width: 600px) {
    .hero-mockup {
        grid-template-columns: 1fr;
    }
    .hero-badge {
        font-size: 10px;
        padding: 5px 12px;
    }
}


/* ============================================================
   SECTIONS (shared)
   ============================================================ */

.section {
<<<<<<< HEAD
    padding: 60px 48px;
=======
    padding: 96px 48px;
>>>>>>> 71ee2e5bea89dc860abe7029520086067f2b1b71
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(61,82,160,.07);
    color: #3D52A0;
    border: 1px solid rgba(61,82,160,.15);
    border-radius: 99px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 18px;
}

.section-title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 14px;
}

.section-sub {
    font-size: 16px;
    color: #475569;
    line-height: 1.7;
    max-width: 580px;
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
<<<<<<< HEAD
    margin-bottom: 36px;
=======
    margin-bottom: 52px;
    gap: 14px;
>>>>>>> 71ee2e5bea89dc860abe7029520086067f2b1b71
}

    .center .section-tag { margin-bottom: 0; }  /* gap handles spacing now */

    .center .section-title { margin-bottom: 0; }

    .center .section-sub {
        margin: 0 auto;
    }

@media (max-width: 768px) {
    .section {
        padding: 60px 20px;
    }
}


/* ============================================================
   HOW IT WORKS — STEPS GRID
   ============================================================ */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Double-Bezel step card */
.step {
    background: rgba(61,82,160,.04);
    border: 1px solid rgba(61,82,160,.1);
    border-radius: 24px;
    padding: 6px;
    transition: transform .5s cubic-bezier(0.34,1.56,0.64,1), box-shadow .4s cubic-bezier(0.32,0.72,0,1);
}

.step-inner {
    background: #fff;
    border-radius: 19px;
    padding: 28px 24px 26px;
    height: 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

    .step:hover {
        box-shadow: 0 16px 48px rgba(61, 82, 160, .13);
        transform: translateY(-6px);
    }

.step-num {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3D52A0, #7091E6);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(61, 82, 160, .28);
}

.step-ico {
    font-size: 30px;
    margin-bottom: 10px;
    display: block;
}

.step-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 7px;
    letter-spacing: -0.02em;
}

.step-desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.75;
}

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

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


/* ============================================================
   FEATURES
   ============================================================ */

.features-bg {
    background: linear-gradient(150deg, #F4F6FF, #EEF2FF);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Double-Bezel feature card */
.feat {
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(61,82,160,.08);
    border-radius: 24px;
    padding: 5px;
    transition: transform .5s cubic-bezier(0.34,1.56,0.64,1), box-shadow .4s cubic-bezier(0.32,0.72,0,1);
}

.feat-inner {
    background: #fff;
    border-radius: 20px;
    padding: 26px 24px;
    height: 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}

    .feat:hover {
        box-shadow: 0 20px 56px rgba(61, 82, 160, .12);
        transform: translateY(-6px);
    }

.feat-ico {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.feat-title {
    font-size: 15.5px;
    font-weight: 800;
    margin-bottom: 7px;
    letter-spacing: -0.02em;
}

.feat-desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.72;
}

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

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


/* ============================================================
   POINTS SYSTEM
   ============================================================ */

.pts-bg {
    background: linear-gradient(150deg, #0D1117 0%, #131B2E 50%, #1a2550 100%);
    color: #fff;
    padding: 60px 48px;
}

.pts-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.pts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.pts-item {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: transform .4s cubic-bezier(0.34,1.56,0.64,1), background .3s;
}

.pts-item:hover {
    background: rgba(255,255,255,.18);
    transform: translateY(-2px);
}

.pts-ico {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pts-val {
    font-size: 19px;
    font-weight: 900;
    margin-left: auto;
    white-space: nowrap;
}

.earn {
    color: #86EFAC;
}

.cost {
    color: #FCA5A5;
}

@media (max-width: 768px) {
    .pts-bg {
        padding: 60px 20px;
    }

    .pts-2col {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

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


/* ============================================================
   CAMPUS VENUES
   ============================================================ */

.venues-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1100px;
    margin: 28px auto 0
}

.venue {
    background: rgba(61,82,160,.03);
    border: 1px solid rgba(61,82,160,.09);
    border-radius: 24px;
    overflow: hidden;
    transition: transform .5s cubic-bezier(0.34,1.56,0.64,1), box-shadow .4s cubic-bezier(0.32,0.72,0,1);
    padding: 5px;
}

.venue > .venue-img,
.venue > .venue-body {
    /* children rendered directly inside outer shell */
}

    .venue:hover {
        box-shadow: 0 20px 52px rgba(61, 82, 160, .15);
        transform: translateY(-7px);
    }

.venue-img {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    position: relative;
}

.venue-off {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #F43F5E;
    color: #fff;
    border-radius: 99px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
}

.venue-body {
    padding: 15px 16px;
}

.venue-name {
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 4px;
}

.venue-pts {
    font-size: 12px;
    font-weight: 700;
    color: #F59E0B;
}

.venue-loc {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 3px;
}

@media (max-width: 900px) {
    .venues-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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


/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
<<<<<<< HEAD
    margin: 28px auto 0;
=======
    margin: 0 auto;
>>>>>>> 71ee2e5bea89dc860abe7029520086067f2b1b71
}

.testi {
    background: rgba(61,82,160,.03);
    border: 1px solid rgba(61,82,160,.08);
    border-radius: 24px;
    padding: 5px;
    transition: transform .5s cubic-bezier(0.34,1.56,0.64,1), box-shadow .4s cubic-bezier(0.32,0.72,0,1);
}

.testi-inner {
    background: #fff;
    border-radius: 20px;
    padding: 26px 24px;
    height: 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}

    .testi:hover {
        box-shadow: 0 16px 44px rgba(61, 82, 160, .1);
        transform: translateY(-5px);
    }

.testi-q {
    font-size: 48px;
    color: var(--indigo-light);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
    font-family: Georgia, serif;
}

.testi-txt {
    font-size: 14px;
    line-height: 1.82;
    color: #0F172A;
    margin-bottom: 20px;
    font-style: italic;
}

@media (max-width: 900px) {
    .testi-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 600px) and (max-width: 900px) {
    .testi-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   CTA SECTION
   ============================================================ */

.cta {
    background: linear-gradient(145deg, #3D52A0, #5B73C7 50%, #7091E6);
    color: #fff;
    text-align: center;
    padding: 60px 48px;
}

.cta-checks {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
    font-size: 13px;
    opacity: .72;
    font-weight: 600;
}

@media (max-width: 768px) {
    .cta {
        padding: 70px 20px;
    }
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    background: #0F172A;
    color: #64748B;
    padding: 48px;
    text-align: center;
}

.ftr-lnk {
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    transition: color .15s;
}

    .ftr-lnk:hover {
        color: #CBD5E1;
    }

@media (max-width: 768px) {
    .footer {
        padding: 32px 20px;
    }
}


/* ============================================================
   BRAND LAYER — logo wordmark, glass nav, hero polish
   ============================================================ */

/* Logo wordmark: "Uni" indigo → "Connect" violet */
.nav-logo {
    background: linear-gradient(90deg, #3D52A0 0%, #7091E6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* Nav glass upgrade */
.nav {
    background: rgba(255,255,255,0.88) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(226,232,240,0.65) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 20px rgba(15,23,42,0.04);
}

/* Nav icon box — match icon.svg bg gradient */
.nav-logo-icon {
    background: linear-gradient(135deg, #4A63BE 0%, #2d3f7a 100%) !important;
    box-shadow: 0 4px 16px rgba(61,82,160,0.28) !important;
}

/* Hero: richer background */
.hero {
    background: linear-gradient(150deg, #EEF2FF 0%, #F4F6FF 45%, #EDE9FE 100%) !important;
    position: relative;
}
.hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(112,145,230,0.10) 0%, transparent 70%);
    pointer-events: none;
}

/* Hero badge polish */
.hero-badge {
    background: rgba(61,82,160,0.10) !important;
    border: 1px solid rgba(61,82,160,0.18) !important;
    color: #3D52A0 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

/* Hero title — tighter tracking */
.hero-title { letter-spacing: -0.04em !important; }

/* Gradient text helper */
.grad {
    background: linear-gradient(90deg, #3D52A0 0%, #7091E6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Hero stats — larger number */
.stat-num {
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(90deg, #3D52A0, #7091E6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mock cards — softer shadows */
.mock {
    box-shadow: 0 4px 24px rgba(61,82,160,0.10), 0 1px 4px rgba(15,23,42,0.05) !important;
    border-color: rgba(226,232,240,0.7) !important;
    border-radius: 16px !important;
    transition: transform .22s, box-shadow .22s !important;
}
.mock:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(61,82,160,0.16) !important;
}

/* Features section */
.feat {
    border-radius: 16px !important;
    border-color: rgba(226,232,240,0.7) !important;
    box-shadow: 0 2px 12px rgba(61,82,160,0.06) !important;
    transition: transform .22s, box-shadow .22s, border-color .22s !important;
}
.feat:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(61,82,160,0.14) !important;
    border-color: rgba(61,82,160,0.18) !important;
}

/* Rewards CTA section */
.rewards-section {
    background: linear-gradient(150deg, #0F172A 0%, #1E2A5E 100%) !important;
    position: relative;
    overflow: hidden;
}
.rewards-section::before {
    content: '';
    position: absolute; top: -80px; right: -80px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(112,145,230,0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(61,82,160,0.2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(61,82,160,0.4); }

/* Selection */
::selection { background: rgba(61,82,160,0.16); color: #2d3f7a; }


/* ============================================================
   PARTICLE CANVAS
   ============================================================ */

#hero-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* Keep hero content above canvas */
.hero > *:not(#hero-canvas) {
    position: relative;
    z-index: 1;
}

/* Features section canvas container */
.features-bg {
    position: relative;
    overflow: hidden;
}

#features-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

#features-canvas.visible {
    opacity: 1;
}

.features-bg > * {
    position: relative;
    z-index: 1;
}


/* ============================================================
   CTA AURORA PULSE
   ============================================================ */

.cta {
    position: relative;
    overflow: hidden;
}

.cta::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(245,158,11,.22) 0%, rgba(61,82,160,.18) 40%, transparent 70%);
    border-radius: 50%;
    animation: aurora-pulse 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.cta > * {
    position: relative;
    z-index: 1;
}

@keyframes aurora-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; }
    50%       { transform: translate(-50%, -50%) scale(1.22); opacity: 1; }
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.step,
.feat,
.venue,
.testi {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .5s ease, transform .5s ease;
}

.step.revealed,
.feat.revealed,
.venue.revealed,
.testi.revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .step, .feat, .venue, .testi {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    #hero-canvas, #features-canvas, #ambient-canvas { display: none; }
    .cta::after { animation: none; }
}

/* ============================================================
   EFFECT 3: Ambient floating geometry canvas
   ============================================================ */
#ambient-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.45;
}

/* Keep hero content above both canvases */
.hero > *:not(#hero-canvas):not(#ambient-canvas) {
    position: relative;
    z-index: 1;
}

/* ============================================================
   HERO FADE-UP ENTRANCE (CSS — no JS dependency)
   ============================================================ */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-badge { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.hero-title { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.08s both; }
.hero-sub   { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.18s both; }
.hero-btns  { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.hero-stats { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.38s both; }
.hero-mockup { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.46s both; }

@media (prefers-reduced-motion: reduce) {
    .hero-badge, .hero-title, .hero-sub, .hero-btns, .hero-stats, .hero-mockup {
        animation: none;
    }
}


/* ============================================================
   SECTION HEADING GRADIENT UNDERLINE REVEAL
   ============================================================ */
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--indigo), var(--violet));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.65s cubic-bezier(0.22,1,0.36,1);
    border-radius: 2px;
}

.section-title.in-view::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .section-title::after { transition: none; transform: scaleX(1); }
}


/* ============================================================
   DARK HERO
   ============================================================ */

.hero-dark {
    background: linear-gradient(150deg, #0B1220 0%, #0f1a35 40%, #1a2550 70%, #0B1220 100%) !important;
    padding: 120px 40px 90px !important;
    text-align: left;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Animated CSS orbs */
.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}
.orb-1 {
    width: 500px; height: 500px;
    top: -120px; left: -80px;
    background: radial-gradient(circle, rgba(67,97,238,0.22) 0%, transparent 70%);
    animation: orbFloat1 12s ease-in-out infinite;
}
.orb-2 {
    width: 380px; height: 380px;
    top: 40%; right: -60px;
    background: radial-gradient(circle, rgba(112,145,230,0.18) 0%, transparent 70%);
    animation: orbFloat2 16s ease-in-out infinite;
}
.orb-3 {
    width: 300px; height: 300px;
    bottom: -60px; left: 40%;
    background: radial-gradient(circle, rgba(245,158,11,0.12) 0%, transparent 70%);
    animation: orbFloat3 10s ease-in-out infinite;
}
@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(40px, 30px); }
}
@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(-30px, 20px); }
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(20px, -25px); }
}

/* Dot-grid */
.hero-dotgrid {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(67,97,238,0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Hero split layout */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px,5vw,80px);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-copy {
    max-width: 560px;
    justify-self: start;
}

/* Override hero-dark text colors */
.hero-dark .hero-badge {
    background: rgba(67,97,238,0.18) !important;
    border-color: rgba(67,97,238,0.35) !important;
    color: #A5B4FC !important;
}
.hero-dark .hero-title {
    color: #fff !important;
}
.hero-dark .hero-sub {
    color: rgba(255,255,255,0.65) !important;
}
.hero-dark .hero-stats {
    border-top-color: rgba(255,255,255,0.1) !important;
    padding-top: 32px;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
}
.hero-stat {
    text-align: center;
    padding: 0 28px 0 0;
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat-div {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.12);
    margin-right: 28px;
    align-self: center;
}
.hero-dark .stat-num {
    background: linear-gradient(135deg, #ffffff, #A5B4FC) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 36px !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
}
.hero-dark .stat-lbl {
    color: rgba(255,255,255,0.55) !important;
    font-size: 12px !important;
    margin-top: 2px !important;
}
.hero-dark .grad {
    background: linear-gradient(135deg, #818CF8, #7091E6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── CRITICAL LAYOUT FIX ──────────────────────────────────────────
   The rule `.hero > *:not(#hero-canvas)` at line ~1067 has specificity
   1,1,0 (ID inside :not) which beats `.orb { position:absolute }` (0,1,0).
   That turns orbs/dotgrid into flex items, crowding out the left column.
   These !important overrides restore the correct absolute positioning.
   ─────────────────────────────────────────────────────────────── */
.hero-dark .orb,
.hero-dark .hero-dotgrid {
    position: absolute !important;
}
/* Fix centring rules inherited from the base .hero class */
.hero-dark .hero-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
.hero-dark .hero-sub {
    margin: 0 0 32px 0 !important;
}
.hero-dark .hero-btns {
    margin-bottom: 0 !important;
}
@media (min-width: 901px) {
    .hero-dark .hero-btns { justify-content: flex-start; }
}
/* hero-split is the sole flex child once orbs are absolute */
.hero-dark > .hero-split {
    flex: 1;
}

/* Hero trust row (avatar stack) */
.hero-trust-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}
.hero-avatar-stack {
    display: flex;
    align-items: center;
}
.hero-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(67,97,238,0.25);
    margin-left: -10px;
    object-fit: cover;
    flex-shrink: 0;
}
.hero-avatar-stack .hero-av:first-child { margin-left: 0; }
.hero-av-more {
    background: rgba(67,97,238,0.4);
    color: rgba(255,255,255,0.8);
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: -0.02em;
}
.hero-trust-txt {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
}

/* Hero dark CTA buttons */
.btn-hero-primary {
    background: linear-gradient(135deg, #4361EE, #7091E6);
    color: #fff;
    box-shadow: 0 4px 20px rgba(67,97,238,.45);
    display: inline-flex; align-items: center;
    padding: 15px 28px; border-radius: 13px;
    font-weight: 700; font-size: 16px;
    transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s;
}
.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(67,97,238,.55);
}
.btn-hero-ghost {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    border: 1.5px solid rgba(255,255,255,0.2);
    display: inline-flex; align-items: center;
    padding: 15px 28px; border-radius: 13px;
    font-weight: 700; font-size: 16px;
    transition: background .2s, color .2s, border-color .2s;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.btn-hero-ghost:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
}

/* Hero browser mockup */
.hero-mockup-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 24px 32px 32px;
}
.hero-browser {
    background: rgba(15,20,40,0.85);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 22px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 32px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.1);
}
.browser-bar {
    background: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.browser-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.browser-url {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 4px 12px;
    margin: 0 8px;
}
.browser-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mock-feed-item {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s;
}
.mock-feed-item:hover { background: rgba(255,255,255,0.11); }
.mock-feed-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(67,97,238,0.3);
}
.mock-feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mock-feed-body { flex: 1; min-width: 0; }
.mock-feed-title {
    font-size: 13px; font-weight: 700;
    color: rgba(255,255,255,0.92);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-feed-meta { margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.mock-tag {
    font-size: 10px; font-weight: 700;
    background: rgba(67,97,238,0.3);
    color: #A5B4FC;
    border-radius: 99px;
    padding: 2px 8px;
}
.mock-solved {
    font-size: 10px; font-weight: 800;
    background: rgba(16,185,129,0.25);
    color: #6EE7B7;
    border-radius: 99px;
    padding: 3px 10px;
    flex-shrink: 0;
}
.mock-badge-cnt {
    font-size: 10px; font-weight: 800;
    background: rgba(245,158,11,0.2);
    color: #FCD34D;
    border-radius: 99px;
    padding: 3px 10px;
    flex-shrink: 0;
}

/* Floating notification cards */
.float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(20,28,58,0.92);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 14px 18px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
    white-space: nowrap;
    z-index: 10;
}
.float-pts  {
    bottom: 8px; left: -8px;
    animation: floatCard1 4s ease-in-out infinite;
}
.float-badge {
    top: 8px; right: -8px;
    animation: floatCard2 5s ease-in-out infinite;
}
.float-rank {
    bottom: 70px; right: -8px;
    animation: floatCard1 6s ease-in-out infinite 1s;
}
@keyframes floatCard1 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes floatCard2 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(8px); }
}

@media (max-width: 900px) {
    .hero-dark { padding: 80px 24px 60px !important; min-height: 0; }
    .hero-split { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero-dark .hero-stats { justify-content: center; }
    .hero-copy { max-width: 100%; justify-self: center; }
    .hero-btns,
    .hero-dark .hero-btns { justify-content: center !important; }
    .hero-trust-row { justify-content: center !important; }
    .hero-stats-row { justify-content: center !important; }
    .float-pts, .float-badge { display: none; }
}


/* ============================================================
   WAVE DIVIDERS
   ============================================================ */
.wave-divider {
    display: block;
    line-height: 0;
    margin: 0; padding: 0;
    overflow: hidden;
}
.wave-divider svg {
    display: block;
    width: 100%;
    height: 56px;
}
.wave-dark-to-light {
    background: linear-gradient(150deg, #0D1117 0%, #111827 30%, #1a2550 65%, #0D1117 100%);
}
.wave-light-to-dark {
    background: linear-gradient(150deg, #F4F6FF, #EEF2FF);
}



/* ============================================================
   WHO IS THIS FOR
   ============================================================ */
.who-section {
    background: #F6F8FA;
}
.who-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
/* equal-height cards: push tag to bottom */
.who-card .step-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.who-card .who-desc {
    flex: 1; /* grows to fill space so tags align at bottom */
}
.who-ico {
    width: 64px; height: 64px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.who-label {
    font-size: 16px; font-weight: 800;
    margin-bottom: 8px; letter-spacing: -0.02em;
}
.who-desc {
    font-size: 13.5px; color: var(--text-2);
    line-height: 1.72; margin-bottom: 16px;
}
.who-tag {
    display: inline-block;
    background: var(--indigo-light);
    color: var(--indigo);
    border-radius: 99px;
    padding: 5px 14px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.03em;
    align-self: flex-start; /* don't stretch full width */
    margin-top: auto;
}
@media (max-width: 900px) {
    .who-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .who-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   HOW IT WORKS — BOLD NUMBERED TIMELINE (no JS dependency)
   ============================================================ */
.how-section { background: var(--bg); }

.how-new-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 56px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* Left: persistent preview panel */
.how-preview-panel { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.how-preview-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(61,82,160,0.1);
}
.how-preview-header {
    background: #F4F6FF;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 6px;
}
.how-preview-header span.how-preview-dots ~ span.how-preview-dots { display: none; }
.how-preview-dots { display: flex; gap: 5px; }
.how-preview-dots span { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.how-preview-url {
    flex: 1; text-align: center;
    font-size: 11px; color: var(--text-2);
    background: #fff; border-radius: 5px;
    padding: 3px 10px; border: 1px solid var(--border);
}
.how-preview-pts-block { padding: 16px 16px 0; }
.how-activity-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #F1F5F9;
}
.how-activity-ico {
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.how-pts-badge {
    font-size: 12px; font-weight: 900; border-radius: 99px;
    padding: 2px 9px; flex-shrink: 0;
}
.how-earn { background: rgba(16,185,129,.12); color: #10B981; }
.how-redeem-row {
    margin: 12px 0 0;
    padding: 12px 16px;
    background: #FFFBEB;
    border-top: 1px solid #FDE68A;
    display: flex; align-items: center; gap: 8px;
}
/* Float leaderboard card */
.how-float-leaderboard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 4px 20px rgba(61,82,160,0.08);
}
.how-lb-row {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid #F8FAFC;
}
.how-lb-row:last-child { border-bottom: none; padding-bottom: 0; }
.how-lb-rank { font-size: 12px; font-weight: 900; width: 14px; flex-shrink: 0; }
.how-lb-av {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--indigo-light); object-fit: cover;
    flex-shrink: 0;
}
.how-lb-name { flex: 1; font-size: 12.5px; font-weight: 700; }
.how-lb-pts { font-size: 12px; font-weight: 900; color: var(--amber); }

/* Right: numbered step timeline */
.how-timeline { display: flex; flex-direction: column; gap: 0; }
.how-tl-step {
    display: flex; gap: 20px;
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s ease, transform .5s cubic-bezier(0.22,1,0.36,1);
}
.how-tl-step.revealed { opacity: 1; transform: translateY(0); }
.how-tl-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.how-tl-num {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--border);
    color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 900;
    flex-shrink: 0; z-index: 1;
    box-shadow: 0 0 0 4px var(--bg);
}
.how-tl-line {
    width: 2px; flex: 1; min-height: 24px;
    background: linear-gradient(to bottom, var(--indigo-light), transparent);
    margin: 4px 0;
}
.how-tl-body {
    display: flex; gap: 14px; align-items: flex-start;
    padding-bottom: 32px; flex: 1;
}
.how-tl-last .how-tl-body { padding-bottom: 0; }
.how-tl-icon-wrap {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}
.how-tl-title {
    font-size: 15.5px; font-weight: 800;
    color: var(--text); margin-bottom: 6px;
    line-height: 1.35;
}
.how-tl-desc {
    font-size: 13.5px; color: var(--text-2);
    line-height: 1.75;
}
.how-tl-cta {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 12px;
    font-size: 13px; font-weight: 800;
    color: var(--indigo); text-decoration: none;
    padding: 7px 16px;
    background: var(--indigo-light);
    border-radius: 99px;
    transition: background .2s, transform .25s cubic-bezier(0.34,1.56,0.64,1);
}
.how-tl-cta:hover { background: #D6E0FF; transform: translateX(3px); }

@media (max-width: 860px) {
    .how-new-layout { grid-template-columns: 1fr; }
    .how-preview-panel { position: static; display: none; }
}


/* ============================================================
   POINTS SECTION — orbs
   ============================================================ */
.pts-bg { position: relative; overflow: hidden; }
.orb-pts-1 {
    width: 400px; height: 400px;
    top: -100px; right: -80px;
    background: radial-gradient(circle, rgba(112,145,230,0.18) 0%, transparent 70%);
    animation: orbFloat1 14s ease-in-out infinite;
}
.orb-pts-2 {
    width: 320px; height: 320px;
    bottom: -80px; left: -60px;
    background: radial-gradient(circle, rgba(245,158,11,0.12) 0%, transparent 70%);
    animation: orbFloat2 11s ease-in-out infinite;
}


/* ============================================================
   VENUES CAROUSEL
   ============================================================ */
.venues-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
}
.venues-carousel {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    padding: 8px 4px 16px;
}
.venues-carousel::-webkit-scrollbar { display: none; }
.venues-carousel .venue {
    flex: 0 0 220px;
    scroll-snap-align: start;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(61,82,160,0.1);
    overflow: hidden;
    transition: transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .4s;
    padding: 0;
}
.venues-carousel .venue:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(61,82,160,0.15);
}
.venue-more {
    flex: 0 0 200px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 180px !important;
    text-align: center !important;
    background: var(--indigo-light) !important;
}
.venue-arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--indigo);
    cursor: pointer; flex-shrink: 0;
    transition: background .2s, box-shadow .2s, transform .2s;
    box-shadow: 0 2px 12px rgba(61,82,160,0.08);
}
.venue-arrow:hover {
    background: var(--indigo-light);
    box-shadow: 0 4px 20px rgba(61,82,160,0.15);
    transform: scale(1.06);
}
@media (max-width: 600px) {
    .venue-arrow {
        width: 36px; height: 36px;
        font-size: 13px;
        flex-shrink: 0;
    }
    .venues-carousel { padding-bottom: 8px; }
}


/* ============================================================
   TESTIMONIALS SHOWCASE — single auto-cycle card
   ============================================================ */

@keyframes fadeScale {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.testi-slide { animation: fadeScale 0.5s ease; }

/* ── Testimonials infinite marquee ── */
@keyframes marqueeLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes marqueeRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.marquee-left  { animation: marqueeLeft  44s linear infinite; }
.marquee-right { animation: marqueeRight 44s linear infinite; }
.marquee-row:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .marquee-left, .marquee-right { animation: none; }
    .marquee-track { flex-wrap: wrap !important; width: 100% !important; }
}

.testi-card {
    background: #fff;
    border: 1px solid rgba(61,82,160,0.1);
    border-radius: 20px;
    padding: 28px 26px 24px;
    box-shadow: 0 4px 20px rgba(61,82,160,0.07);
    transition: box-shadow 0.4s cubic-bezier(0.32,0.72,0,1), transform 0.4s cubic-bezier(0.32,0.72,0,1);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.testi-card:hover {
    box-shadow: 0 14px 44px rgba(61,82,160,0.14);
    transform: translateY(-4px);
}
.testi-featured {
    border-color: rgba(61,82,160,0.22);
    background: linear-gradient(145deg, #f0f3ff 0%, #fff 60%);
}
.testi-quote-icon {
    margin-bottom: 10px;
}
.testi-stars {
    color: #F59E0B;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.testi-txt {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
    margin-bottom: 18px;
    font-style: italic;
    flex: 1;
}
.testi-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.testi-av {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--indigo-light);
    flex-shrink: 0;
}
.testi-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}
.testi-meta {
    font-size: 12px;
    color: var(--text-3);
}


/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-section { background: #fff; }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    padding-left: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .45s ease, border-color .25s ease;
}
.faq-item.faq-open {
    border-left-color: var(--indigo);
    padding-left: 4px;
}
.faq-item.revealed {
    opacity: 1;
    transform: translateY(0);
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 8px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: color .2s;
}
.faq-q:hover { color: var(--indigo); }
.faq-item.faq-open .faq-q { color: var(--indigo); }
.faq-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--text-2);
    transition: transform .35s cubic-bezier(0.22,1,0.36,1);
}
.faq-item.faq-open .faq-icon { transform: rotate(180deg); color: var(--indigo); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    font-size: 14.5px;
    color: var(--text-2);
    line-height: 1.78;
    padding: 0 8px;
    transition: max-height .4s cubic-bezier(0.22,1,0.36,1);
}
.faq-item.faq-open .faq-a { padding-bottom: 22px; }


/* ============================================================
   HERO FADE-UP ENTRANCE (CSS — no JS dependency)
   ============================================================ */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-badge { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.hero-title { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.08s both; }
.hero-sub   { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.18s both; }
.hero-btns  { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.hero-stats { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.38s both; }
.hero-mockup-wrap { animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.46s both; }

@media (prefers-reduced-motion: reduce) {
    .hero-badge, .hero-title, .hero-sub, .hero-btns, .hero-stats, .hero-mockup-wrap,
    .orb, .float-pts, .float-badge { animation: none !important; }
}


/* ============================================================
   SCROLL REVEAL — covers all revealable items
   ============================================================ */
.step, .feat, .venue, .testi, .who-card, .faq-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s ease, transform .5s cubic-bezier(0.22,1,0.36,1);
}
.step.revealed, .feat.revealed, .venue.revealed,
.testi.revealed, .who-card.revealed, .faq-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .step, .feat, .venue, .testi, .who-card, .faq-item {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    #features-canvas { display: none; }
    .cta::after { animation: none; }
}


/* ============================================================
   SECTION HEADING GRADIENT UNDERLINE REVEAL
   ============================================================ */
.section-title { position: relative; display: inline-block; }
.section-title::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--indigo), var(--violet));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.65s cubic-bezier(0.22,1,0.36,1);
    border-radius: 2px;
}
.section-title.in-view::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .section-title::after { transition: none; transform: scaleX(1); }
}

/* ============================================================
   360px MICRO-BREAKPOINT
   ============================================================ */
@media (max-width: 360px) {
    .hero-headline { font-size: clamp(1.7rem, 9vw, 2.2rem) !important; }
    .hero-sub { font-size: 14px !important; }
    .hero-btns { flex-direction: column; align-items: stretch; gap: 10px !important; }
    .hero-btns .btn { width: 100%; text-align: center; justify-content: center; min-height: 48px; }
    .who-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .feat-grid { grid-template-columns: 1fr !important; }
    .venues-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .pts-grid { grid-template-columns: 1fr !important; }
    .section-title { font-size: clamp(1.4rem, 7vw, 2rem) !important; }
    .step { padding: 16px !important; }
    .faq-q { font-size: 14px !important; padding: 14px 16px !important; }
}