/* ============================================================
   LANDING PAGE — Ivan Bokhan Webinar
   ============================================================
   Z-LAYER ARCHITECTURE (bottom → top):
     z:0    .parallax-bg, body::before      — backgrounds
     z:1    #cursor-canvas, .noise          — canvas effects
     z:2    section (isolation:isolate)     — content (above canvas)
     z:25   .speaker-badge-card             — card overlay
     z:400  .side-nav                       — side navigation
     z:490  .mobile-nav-drawer              — mobile menu
     z:500  .top-nav                        — header
     z:999  .scroll-progress               — progress bar
   ============================================================ */


/* ============================================================
   1. BASE & RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; } /* lenis handles smooth scroll */

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: #FDFCF8;
    color: #1A1033;
    overflow-x: hidden;
    overscroll-behavior: none;
}
.font-display { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; }


/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-weight: 800; line-height: 1.15; letter-spacing: -0.03em;
}
h2 { font-size: clamp(26px, 3vw, 42px); margin-bottom: 16px; letter-spacing: -0.03em; }
h3 { font-size: clamp(18px, 2vw, 24px); margin-bottom: 10px; letter-spacing: -0.02em; }
p  { font-size: 15px; line-height: 1.7; }
.text-sm   { font-size: 13px; }
.text-muted { color: #7A7080; }

/* Cursor: default arrow over text — do not hide system cursor */
p, h1, h2, h3, h4, h5, h6, span:not(a span), li,
.hero-title, .hero-subtitle, .own-ai-text,
.speaker-bio, .expertise-tag, .ai-feature-text,
.section-header { cursor: default !important; user-select: none; }


/* ============================================================
   3. Z-LAYER SYSTEM
   All z-index declarations in one place.
   ============================================================ */

/* Layer 0 — ambient background */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 700px 500px at 10% 20%, rgba(124,58,237,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 500px 400px at 90% 80%, rgba(249,115,22,0.10) 0%, transparent 65%);
}

/* Layer 0 — section parallax backgrounds */
.parallax-bg {
    position: absolute; inset: 0;
    overflow: hidden; pointer-events: none;
    z-index: 0;
}
.parallax-layer {
    position: absolute; will-change: transform;
    pointer-events: none;
}

/* Layer 1 — canvas particle effect */
#cursor-canvas {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Layer 1 — noise texture */
.noise {
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none; opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Z-LAYER SYSTEM (ROOT stacking context, bottom → top):
   z:0  section::before  — section backgrounds (opaque gradients)
   z:1  #cursor-canvas   — particle effect (fixed, above backgrounds)
   z:1  .noise           — noise texture (fixed)
   z:3  .section-wrap    — content (cards, text) — above canvas
   z:400+ nav overlays

   section has NO isolation, NO z-index — does NOT create stacking context.
   This allows ::before(z:0) and .section-wrap(z:3) to participate in ROOT directly.
   Canvas(z:1) sits between section bg and content → visible on backgrounds, hidden under cards.
*/
section {
    position: relative;
    background: transparent;
}

/* Layer 0 — section background */
section::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Layer 3 — section content (above canvas z:1) */
.section-wrap {
    position: relative;
    z-index: 3;
}

/* Layer 25 — speaker badge overlay */
.speaker-badge-card { z-index: 25; }

/* Layer 400 — side dot navigation */
.side-nav { z-index: 400; }

/* Layer 490 — mobile nav drawer */
.mobile-nav-drawer { z-index: 490; }

/* Layer 500 — top navigation header */
.top-nav { z-index: 500; }

/* Layer 999 — scroll progress bar */
.scroll-progress { z-index: 999; }


/* ============================================================
   4. LAYOUT — containers, section structure
   ============================================================ */

.section-wrap {
    max-width: 1180px; margin: 0 auto; padding: 0 24px;
}

.section-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase; color: #7C3AED;
    margin-bottom: 16px;
}
.section-label::before {
    content: ''; display: block;
    width: 20px; height: 1px; background: currentColor;
}
.section-label-action { color: #F97316; }
.section-label-action::before { background: #F97316; }


/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* ----- Buttons ----- */

@keyframes btn-breathe-violet {
    0%, 100% {
        box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
                    0 4px 14px rgba(124,58,237,0.28),
                    0 1px 3px rgba(45,27,105,0.15);
    }
    50% {
        box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
                    0 6px 28px rgba(124,58,237,0.52),
                    0 2px 8px rgba(45,27,105,0.22);
    }
}
@keyframes btn-breathe {
    0%, 100% {
        box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset,
                    0 4px 14px rgba(249,115,22,0.30),
                    0 1px 3px rgba(234,106,8,0.15);
    }
    50% {
        box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset,
                    0 6px 28px rgba(249,115,22,0.55),
                    0 2px 8px rgba(234,106,8,0.25);
    }
}

.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; font-size: 15px; font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #9333EA 0%, #5B21B6 100%);
    border: none; border-radius: 12px;
    cursor: pointer; text-decoration: none;
    transition: transform 0.22s ease;
    animation: btn-breathe-violet 3s ease-in-out infinite;
}
.btn-primary:hover {
    background: linear-gradient(180deg, #A855F7 0%, #7C3AED 100%);
    transform: translateY(-2px); animation: none;
    box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset,
                0 10px 32px rgba(124,58,237,0.55),
                0 2px 6px rgba(45,27,105,0.20);
}
.btn-orange {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; font-size: 15px; font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #7C3AED 0%, #2D1B69 100%);
    border: none; border-radius: 12px;
    cursor: pointer; text-decoration: none;
    transition: all 0.22s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset,
                0 4px 16px rgba(45,27,105,0.35),
                0 1px 4px rgba(45,27,105,0.20);
}
.btn-orange:hover {
    background: linear-gradient(180deg, #9333EA 0%, #5B21B6 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset,
                0 8px 28px rgba(45,27,105,0.40),
                0 2px 6px rgba(45,27,105,0.18);
    transform: translateY(-2px);
}
.btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 24px; font-size: 14px; font-weight: 600;
    color: #3D3D3D;
    background: linear-gradient(180deg, #FAFAF8 0%, #F0ECE5 100%);
    border: 1px solid #CCC5BA; border-radius: 12px;
    cursor: pointer; text-decoration: none;
    transition: all 0.22s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
                0 2px 5px rgba(45,27,105,0.07);
}
.btn-outline:hover {
    border-color: #7C3AED; color: #7C3AED;
    background: linear-gradient(180deg, #F5F0FF 0%, #EDE8FF 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset,
                0 4px 10px rgba(124,58,237,0.10);
}
.btn-action {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; font-size: 15px; font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #FB923C 0%, #EA6A08 100%);
    border: none; border-radius: 12px;
    cursor: pointer; text-decoration: none;
    transition: transform 0.22s ease;
    animation: btn-breathe 3s ease-in-out infinite;
}
.btn-action:hover {
    background: linear-gradient(180deg, #FDBA74 0%, #F97316 100%);
    transform: translateY(-2px); animation: none;
    box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset,
                0 10px 32px rgba(249,115,22,0.55),
                0 2px 6px rgba(234,106,8,0.20);
}

/* ----- Top Navigation ----- */

.top-nav {
    position: fixed; top: 0; left: 0; right: 0;
    padding: 0 24px;
    background: rgba(253,252,248,0.85) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border-bottom: 1px solid #DDD8F0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset,
                0 1px 8px rgba(45,27,105,0.06);
    transition: background 0.35s ease, box-shadow 0.35s ease;
}
.top-nav.scrolled {
    background: rgba(248,246,253,0.94) !important;
    border-bottom-color: #C8C3E8;
    box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset,
                0 2px 24px rgba(45,27,105,0.09);
}
.nav-inner {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; transition: height 0.3s ease;
}
.top-nav.scrolled .nav-inner { height: 56px; }
.nav-logo {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px; font-weight: 700;
    color: #2D1B69; letter-spacing: -0.03em;
    display: flex; align-items: center; gap: 10px;
}
.nav-logo-badge {
    width: 32px; height: 32px;
    background: linear-gradient(145deg, #7C3AED 0%, #2D1B69 100%);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 2px 6px rgba(45,27,105,0.25);
}
.nav-sections { display: flex; align-items: center; gap: 2px; }
.nav-link {
    padding: 6px 14px; font-size: 13px; font-weight: 500;
    color: #3D2B6E; border-radius: 100px;
    transition: all 0.2s ease; cursor: pointer;
    white-space: nowrap; text-decoration: none;
}
.nav-link:hover { color: #1A0550; background: rgba(124,58,237,0.08); }
.nav-link.active { color: #7C3AED; background: rgba(124,58,237,0.10); font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.btn-nav {
    padding: 9px 20px; font-size: 13px; font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #7C3AED 0%, #2D1B69 100%);
    border-radius: 12px; border: none;
    cursor: pointer; text-decoration: none;
    transition: transform 0.2s ease;
    animation: btn-breathe-violet 3s ease-in-out infinite;
    white-space: nowrap;
}
.btn-nav:hover {
    background: linear-gradient(180deg, #9333EA 0%, #7C3AED 100%);
    transform: translateY(-1px); animation: none;
    box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset,
                0 8px 24px rgba(124,58,237,0.52);
}
.btn-nav-outline {
    background: transparent;
    border: 1.5px solid #7C3AED;
    color: #7C3AED;
    animation: none;
    margin-left: 8px;
}
.btn-nav-outline:hover {
    background: rgba(124,58,237,0.1);
    color: #9333EA;
    border-color: #9333EA;
    box-shadow: 0 4px 16px rgba(124,58,237,0.25);
}
.nav-user-badge {
    display: flex; align-items: center; gap: 8px;
    margin-left: 10px; text-decoration: none; color: #2D1B69;
    transition: opacity 0.2s;
}
.nav-user-badge:hover { opacity: 0.8; }
.nav-user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED, #F97316);
    color: #fff; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.nav-user-name {
    font-size: 13px; font-weight: 600; white-space: nowrap;
}
.mobile-menu-btn {
    display: none; flex-direction: column; gap: 5px;
    width: 40px; height: 40px; align-items: center;
    justify-content: center; cursor: pointer;
    border-radius: 10px; border: 1px solid #E5E0F0;
    background: transparent; transition: background 0.2s;
}
.mobile-menu-btn:hover { background: #EDE8F8; }
.mobile-menu-btn .bar {
    display: block; width: 18px; height: 1.5px;
    background: #2D1B69; border-radius: 2px;
}
.mobile-nav-drawer {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(248,246,255,0.97);
    backdrop-filter: blur(16px);
    display: flex; flex-direction: column;
    padding: 80px 24px 32px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.mobile-nav-drawer.open { transform: translateX(0); }
.mobile-nav-link {
    padding: 16px 0; font-size: 22px; font-weight: 600;
    color: #2D1B69; border-bottom: 1px solid #E5E0F0;
    cursor: pointer; text-decoration: none;
    transition: color 0.2s;
}
.mobile-nav-link:hover { color: #7C3AED; }

@media (max-width: 960px) {
    .nav-sections { display: none; }
    .mobile-menu-btn { display: flex; }
    .nav-user-badge { display: none; }
}
@media (max-width: 768px) {
    .top-nav { display: none !important; }
    .mobile-nav-drawer { display: none !important; }
    html, body { overflow-x: hidden !important; }
    body { padding-bottom: 64px; }
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: #0a0e27 !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .mobile-bottom-nav-item {
        color: rgba(255,255,255,0.6) !important;
    }
    .mobile-bottom-nav-item.active {
        color: #a78bfa !important;
    }
    .mobile-bottom-nav-item svg {
        stroke: currentColor !important;
    }
    .mobile-bottom-nav-sheet {
        background: #0a0e27 !important;
        color: rgba(255,255,255,0.8) !important;
    }
    .mobile-bottom-nav-sheet-item {
        color: rgba(255,255,255,0.7) !important;
    }
    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .footer-links {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
}
@media (max-width: 640px) {
    .nav-cta .btn-nav-label { display: none; }
}

/* ----- Side Dot Navigation ----- */

.side-nav {
    position: fixed; right: 28px; top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 14px;
}
.side-dot {
    width: 8px; height: 8px; border-radius: 50%;
    border: 1.5px solid #B0A898;
    background: transparent; cursor: pointer;
    transition: all 0.3s ease; position: relative;
}
.side-dot:hover { border-color: #7C3AED; background: rgba(124,58,237,0.15); }
.side-dot.active {
    border-color: #7C3AED; background: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.side-dot .dot-label {
    position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%);
    font-size: 11px; font-weight: 500;
    color: #7A7060; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s; background: #fff;
    padding: 3px 8px; border-radius: 6px;
    box-shadow: 0 2px 8px rgba(45,27,105,0.10);
}
.side-dot:hover .dot-label,
.side-dot.active .dot-label { opacity: 1; }

@media (max-width: 1100px) { .side-nav { display: none; } }

/* ----- Scroll Progress ----- */

.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 2.5px; background: transparent; overflow: hidden;
}
.scroll-progress-bar, #scroll-bar {
    height: 2px; width: 0%;
    background: linear-gradient(90deg, #7C3AED, #F97316);
    transform-origin: left;
}


/* ============================================================
   6. SECTIONS
   ============================================================ */

/* ----- Hero ----- */

#hero {
    padding-top: 108px; padding-bottom: 72px;
    overflow: hidden;
}
#hero::before {
    background:
        radial-gradient(ellipse 900px 600px at 80% 50%, rgba(124,58,237,0.10) 0%, transparent 65%),
        #FDFCF8;
}
.hero-grid {
    display: grid; grid-template-columns: 1fr 380px;
    gap: 48px; align-items: start;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 100px;
    background: rgba(249,115,22,0.08);
    border: 1px solid rgba(249,115,22,0.22);
    font-size: 12px; font-weight: 600; color: #C2570A;
    margin-bottom: 24px;
}
.hero-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #F97316;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}
@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hero-title {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-size: clamp(28px, 3.8vw, 50px); font-weight: 800;
    line-height: 1.1; letter-spacing: -0.035em;
    background: linear-gradient(135deg, #1A0550 0%, #7C3AED 35%, #C084FC 60%, #3B82F6 80%, #7C3AED 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 5s ease infinite;
    margin-bottom: 20px;
}
.hero-title .accent-blue { background: inherit; -webkit-background-clip: text; background-clip: text; }
@keyframes gold-breathe {
    0%, 100% { filter: brightness(1) saturate(1); }
    50%       { filter: brightness(1.14) saturate(1.1); }
}
.hero-title .accent-orange {
    font-style: italic; display: inline;
    -webkit-text-fill-color: #F97316;
    animation: gold-breathe 4s ease-in-out infinite;
}
.hero-subtitle {
    font-size: 16px; line-height: 1.65;
    color: #4B5563; max-width: 560px; margin-bottom: 24px;
}
.hero-checklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.hero-check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #374151; }
.hero-check-icon {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(249,115,22,0.10);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-check-icon svg { width: 12px; height: 12px; color: #F97316; }
.hero-buttons { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-note {
    font-size: 12px; color: #9CA3AF;
    display: flex; align-items: center; gap: 6px; margin-top: 16px;
}
.hero-card {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-radius: 24px;
    border: 1px solid rgba(124,58,237,0.15) !important;
    padding: 28px; overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.98) inset,
        0 8px 32px rgba(45,27,105,0.12),
        0 32px 80px rgba(45,27,105,0.08),
        0 2px 6px rgba(45,27,105,0.06) !important;
}
.hero-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #F97316 0%, #7C3AED 50%, #C4B5FD 100%);
}
.hero-card-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: #9CA3AF; margin-bottom: 20px;
}
.webinar-date-block {
    background: #FDFCF8; border-radius: 14px;
    padding: 16px 20px; margin-bottom: 20px;
    border: 1px solid #E5E0F0;
}
.webinar-date-block .date { font-size: 24px; font-weight: 800; color: #2D1B69; font-family: 'Bricolage Grotesque', sans-serif; }
.webinar-date-block .time { font-size: 13px; color: #7A7060; margin-top: 2px; }
.price-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.price-badge { border-radius: 10px; padding: 10px 14px; text-align: center; flex: 1; min-width: 90px; }
.price-badge .tier { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.price-badge .amount {
    font-size: 18px; font-weight: 800; font-family: 'Bricolage Grotesque', sans-serif;
    display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.price-badge .amount .num { white-space: nowrap; }
.price-badge .amount .cur { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-top: 2px; }
.price-badge.early { background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.25); }
.price-badge.early .tier { color: #F97316; }
.price-badge.early .amount { color: #7C2E00; }
.price-badge.main { background: #FDFCF8; border: 1px solid #E5E0F0; }
.price-badge.main .tier { color: #7A7060; }
.price-badge.main .amount { color: #2D1B69; }
.price-badge.vip { background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.25); }
.price-badge.vip .tier { color: #7C3AED; }
.price-badge.vip .amount { color: #2D1B69; }
.seats-bar {
    background: #FDFCF8; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
}
.seats-bar .dot-red { width: 7px; height: 7px; border-radius: 50%; background: #F97316; flex-shrink: 0; }
.seats-bar .text { font-size: 12px; color: #787878; }
.seats-bar .text strong { color: #EA6A08; }

@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; max-width: 680px; } }
@media (max-width: 768px)  {
    #hero { padding-top: 24px; text-align: center; }
    #hero .hero-badge { margin-left: auto; margin-right: auto; }
    #hero .hero-title { text-align: center; }
    #hero .hero-subtitle { text-align: center; }
    #hero .hero-checklist { text-align: left; display: inline-block; }
    #hero .hero-buttons { display: flex; flex-direction: column; align-items: center; }
    #hero .hero-note { text-align: center; }
}
@media (max-width: 640px)  { #hero { padding-bottom: 48px; } }

/* ----- For Whom ----- */

#for-whom {
    padding: 96px 0;
}
#for-whom::before {
    background: linear-gradient(180deg, #F0EDF8 0%, #E8E3F5 100%);
}
.audience-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px; margin-top: 48px;
}
.audience-card {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-radius: 16px; padding: 24px;
    border: 1px solid rgba(255,255,255,0.9) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 4px 16px rgba(45,27,105,0.08),
        0 1px 3px rgba(45,27,105,0.04) !important;
    transition: all 0.25s ease;
}
.audience-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.92) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.98) inset,
        0 12px 40px rgba(45,27,105,0.14),
        0 2px 8px rgba(45,27,105,0.07),
        0 0 0 1px rgba(124,58,237,0.12) !important;
}
.audience-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(249,115,22,0.06) 100%) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 14px;
}
.audience-card h3 { font-size: 15px; font-weight: 700; color: #2D1B69; margin-bottom: 6px; }
.audience-card p  { font-size: 13px; color: #7A7060; line-height: 1.5; }

/* ----- Problems ----- */

#problems {
    padding: 96px 0;
}
#problems::before {
    background: #FDFCF8;
}
.problems-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 48px; align-items: center; margin-top: 48px;
}
.problem-list { display: flex; flex-direction: column; gap: 16px; }
.problem-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px; border-radius: 14px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #E0D9CF;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset,
                0 2px 6px rgba(45,27,105,0.06);
    transition: all 0.2s ease;
}
.problem-item:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset,
                0 6px 20px rgba(45,27,105,0.10);
    transform: translateX(4px);
}
.problem-num {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(124,58,237,0.1); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #7C3AED;
}
.problem-item p { font-size: 14px; color: #374151; line-height: 1.5; margin: 0; padding-top: 4px; }
.solution-card {
    background: linear-gradient(150deg, #2D1B69 0%, #3B2080 60%, #2D1B69 100%);
    border-radius: 24px; padding: 36px;
    color: #fff; position: relative; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset,
                0 8px 32px rgba(45,27,105,0.25),
                0 2px 8px rgba(45,27,105,0.15);
}
.solution-card::after {
    content: '';
    position: absolute; bottom: -40px; right: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,255,255,0.05);
}
.solution-card h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 26px; font-weight: 800; color: #fff;
    margin-bottom: 20px; line-height: 1.2;
}
.solution-point { display: flex; gap: 10px; margin-bottom: 14px; }
.solution-check {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}
.solution-point p { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; }

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

/* ----- Program ----- */

#program {
    padding: 96px 0;
}
#program::before {
    background: linear-gradient(180deg, #F0EDF8 0%, #E8E3F5 100%);
}
.program-header {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 48px; margin-bottom: 64px;
}
.program-header p { font-size: 16px; color: #4B5563; line-height: 1.7; }
.modules-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.module-card {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-radius: 20px; padding: 24px 24px 24px 28px;
    border: 1px solid rgba(255,255,255,0.9) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 4px 16px rgba(45,27,105,0.08),
        0 1px 3px rgba(45,27,105,0.04) !important;
    transition: all 0.25s ease;
    position: relative; overflow: hidden;
}
.module-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, #C8BFAD 0%, #B0A898 100%);
    transition: background 0.3s;
}
.module-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.92) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.98) inset,
        0 12px 40px rgba(45,27,105,0.14),
        0 2px 8px rgba(45,27,105,0.07),
        0 0 0 1px rgba(124,58,237,0.12) !important;
}
.module-card:hover::before { background: linear-gradient(180deg, #A78BFA 0%, #7C3AED 100%); }
.module-card.module-card-featured {
    background: linear-gradient(145deg, #2D1B69, #7C3AED) !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 32px rgba(124,58,237,0.35) !important;
}
.module-card.module-card-featured:hover {
    background: linear-gradient(145deg, #3D2B79, #8C4AFF) !important;
}
.module-card.module-card-featured::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: shimmer 4s linear infinite;
    pointer-events: none;
}
.module-time {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    color: #7C3AED; margin-bottom: 10px; text-transform: uppercase;
}
.module-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 17px; font-weight: 700; color: #2D1B69; margin-bottom: 12px;
}
.module-points { list-style: none; padding: 0; margin: 0; }
.module-points li {
    font-size: 13px; color: #7A7060; line-height: 1.6;
    padding-left: 14px; position: relative; margin-bottom: 4px;
}
.module-points li::before { content: '·'; position: absolute; left: 0; color: #7C3AED; font-weight: 700; }

/* ----- What You Get ----- */

#get {
    padding: 96px 0;
}
#get::before {
    background: #FDFCF8;
}
.get-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px; margin-top: 48px;
}
.get-card {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-radius: 20px; padding: 28px;
    border: 1px solid rgba(255,255,255,0.9) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 4px 16px rgba(45,27,105,0.08),
        0 1px 3px rgba(45,27,105,0.04) !important;
    transition: all 0.25s ease;
}
.get-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.92) !important;
    border-color: rgba(249,115,22,0.20) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.98) inset,
        0 12px 40px rgba(45,27,105,0.14),
        0 2px 8px rgba(45,27,105,0.07),
        0 0 0 1px rgba(124,58,237,0.12) !important;
}
.get-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: rgba(124,58,237,0.07);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin-bottom: 20px;
}
.get-card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; color: #2D1B69; margin-bottom: 10px; }
.get-card p  { font-size: 14px; color: #7A7060; line-height: 1.6; }

/* ----- Own AI (dark section) ----- */

#own-ai {
    padding: 80px 0;
}
#own-ai::before {
    background: linear-gradient(160deg, #1E0A4E 0%, #2D1B69 40%, #3B2080 100%);
}
.own-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.own-ai-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(255,255,255,0.4);
    display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.own-ai-label::before { content: ''; width: 24px; height: 1px; background: rgba(255,255,255,0.3); }
.own-ai-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(28px, 3.5vw, 44px); font-weight: 800;
    color: #fff; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 24px;
}
.own-ai-title span { color: #C4B5FD; }
.own-ai-text { font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 36px; }
.ai-features { display: flex; flex-direction: column; gap: 14px; }
.ai-feature {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px; border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s;
}
.ai-feature:hover { background: rgba(255,255,255,0.08); }
.ai-feature-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(167,139,250,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.ai-feature-text h4 { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.ai-feature-text p  { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; }
.ai-terminal {
    background: #0A0720; border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1); overflow: hidden;
}
.terminal-bar {
    padding: 12px 16px; background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; gap: 8px;
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-body { padding: 24px; font-family: 'SF Mono', 'Fira Code', monospace; }
.terminal-line { font-size: 13px; line-height: 1.8; }
.t-prompt  { color: #A78BFA; }
.t-cmd     { color: #E2E8F0; }
.t-out     { color: rgba(255,255,255,0.4); }
.t-success { color: #86EFAC; }
.t-cursor  {
    display: inline-block; width: 8px; height: 14px;
    background: #A78BFA; vertical-align: middle;
    animation: blink 1.2s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 768px) { .own-ai-grid { grid-template-columns: 1fr; } }

/* ----- Results ----- */

#results {
    padding: 96px 0;
}
#results::before {
    background: #FDFCF8;
}
.results-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px; margin-top: 48px;
}
.result-card {
    background: linear-gradient(180deg, #fff 0%, #f9f7f4 100%);
    border-radius: 20px; padding: 28px 24px;
    border: 1px solid #DDD6CA;
    box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
                0 2px 8px rgba(45,27,105,0.07);
    text-align: center; transition: all 0.25s ease;
}
.result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
                0 12px 36px rgba(45,27,105,0.12);
}
.result-icon { font-size: 32px; margin-bottom: 16px; }
.result-card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; color: #2D1B69; margin-bottom: 8px; }
.result-card p  { font-size: 13px; color: #7A7060; line-height: 1.5; }

/* ----- Speaker ----- */

#speaker {
    padding: 96px 0;
}
#speaker::before {
    background: linear-gradient(180deg, #F0EDF8 0%, #E8E3F5 100%);
}
.speaker-grid { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
.speaker-photo-wrap { position: relative; overflow: visible; padding-bottom: 30px; }
.speaker-photo-placeholder {
    width: 100%; aspect-ratio: 3/4; border-radius: 24px;
    background: linear-gradient(145deg, #7C3AED 0%, #2D1B69 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; letter-spacing: -0.05em;
    color: rgba(255,255,255,0.5); font-size: 100px;
}
.speaker-badge-card {
    position: absolute; bottom: 10px; right: -16px;
    background: #fff; border-radius: 16px;
    padding: 16px 20px; border: 1px solid #E5E0D8;
    box-shadow: 0 8px 32px rgba(45,27,105,0.12);
}
.speaker-badge-card .num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; color: #2D1B69; }
.speaker-badge-card .label { font-size: 12px; color: #7A7060; }
.speaker-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; color: #2D1B69; letter-spacing: -0.03em; margin-bottom: 8px; }
.speaker-role { font-size: 16px; color: #7C3AED; font-weight: 600; margin-bottom: 24px; }
.speaker-bio { font-size: 16px; color: #4B5563; line-height: 1.7; margin-bottom: 32px; }
.speaker-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.speaker-stat {
    background: linear-gradient(180deg, #fff 0%, #f9f7f4 100%);
    border-radius: 14px; padding: 18px;
    border: 1px solid #DDD6CA;
    box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
                0 2px 8px rgba(45,27,105,0.07);
    text-align: center;
}
.speaker-stat .n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 800; color: #2D1B69; }
.speaker-stat .l { font-size: 12px; color: #7A7060; margin-top: 2px; }
.expertise-list { display: flex; flex-wrap: wrap; gap: 8px; }
.expertise-tag {
    padding: 6px 14px; background: rgba(124,58,237,0.07);
    border: 1px solid rgba(124,58,237,0.18);
    border-radius: 100px; font-size: 13px; color: #7C3AED; font-weight: 500;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 900px) {
    .speaker-grid { grid-template-columns: 1fr; }
    .speaker-photo-placeholder { max-width: 280px; }
}

/* ----- Bonuses ----- */

#bonuses {
    padding: 96px 0;
}
#bonuses::before {
    background: #FDFCF8;
}
.bonuses-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px; margin-top: 48px;
}
.bonus-card {
    background: linear-gradient(180deg, #fff 0%, #f9f7f4 100%);
    border-radius: 20px; padding: 28px;
    border: 1px solid #DDD6CA;
    box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
                0 2px 8px rgba(45,27,105,0.07);
    transition: all 0.25s ease; position: relative;
}
.bonus-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
                0 12px 36px rgba(45,27,105,0.12);
}
.bonus-num {
    position: absolute; top: -12px; left: 24px;
    background: #7C3AED; color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    padding: 4px 10px; border-radius: 100px;
}
.bonus-icon { font-size: 28px; margin-bottom: 14px; }
.bonus-card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; color: #2D1B69; margin-bottom: 8px; }
.bonus-card p  { font-size: 13px; color: #7A7060; line-height: 1.5; }

/* ----- Pricing ----- */

#pricing {
    padding: 96px 0;
}
#pricing::before {
    background: linear-gradient(180deg, #F0EDF8 0%, #E8E3F5 100%);
}
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.price-card {
    background: linear-gradient(180deg, #ffffff 0%, #f9f7f4 100%);
    border-radius: 24px; padding: 36px;
    border: 1px solid #DDD6CA;
    box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
                0 2px 8px rgba(45,27,105,0.07),
                0 1px 3px rgba(45,27,105,0.04);
    position: relative; transition: all 0.3s ease;
    display: flex; flex-direction: column;
}
.price-features { flex-grow: 1; }
.price-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
                0 16px 48px rgba(45,27,105,0.14),
                0 4px 8px rgba(45,27,105,0.06);
}
.price-card.featured {
    background: linear-gradient(160deg, #2D1B69 0%, #3B2080 50%, #7C3AED 100%);
    border-color: transparent; border-top: 3px solid #F97316;
    overflow: visible; padding-top: 50px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset,
                0 8px 32px rgba(45,27,105,0.30),
                0 2px 8px rgba(45,27,105,0.20);
}
.price-card.featured:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset,
                0 20px 60px rgba(45,27,105,0.35),
                0 4px 12px rgba(45,27,105,0.20);
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
.price-card.featured::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: shimmer 4s linear infinite;
    pointer-events: none;
}
.featured-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: fit-content; white-space: nowrap;
    background: linear-gradient(90deg, #F97316, #FB923C);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    padding: 5px 18px; border-radius: 100px;
    box-shadow: 0 2px 8px rgba(249,115,22,0.35);
}
.price-tier { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.price-card:not(.featured) .price-tier { color: #7A7060; }
.price-card.featured .price-tier          { color: rgba(255,255,255,0.5); }
.price-amount { font-family: 'Bricolage Grotesque', sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 4px; }
.price-card:not(.featured) .price-amount { color: #2D1B69; }
.price-card.featured .price-amount        { color: #fff; }
.price-old { font-size: 14px; color: #9CA3AF; text-decoration: line-through; margin-bottom: 20px; }
.price-divider { height: 1px; margin: 20px 0; }
.price-card:not(.featured) .price-divider { background: #E5E0D8; }
.price-card.featured .price-divider       { background: rgba(255,255,255,0.1); }
.price-features { list-style: none; padding: 0; margin: 0 0 28px; }
.price-features li { font-size: 14px; padding: 8px 0; display: flex; align-items: flex-start; gap: 10px; }
.price-card:not(.featured) .price-features li { color: #374151; }
.price-card.featured .price-features li       { color: rgba(255,255,255,0.8); }
.price-check { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; }
.price-card:not(.featured) .price-check { background: rgba(124,58,237,0.1); color: #7C3AED; }
.price-card.featured .price-check        { background: rgba(255,255,255,0.15); color: #fff; }
.btn-price-outline {
    display: block; text-align: center; padding: 13px 24px;
    border: 1.5px solid #C8BFAD; border-radius: 12px;
    font-size: 14px; font-weight: 600; color: #2D1B69;
    text-decoration: none; transition: all 0.25s ease;
}
.btn-price-outline:hover { border-color: #7C3AED; color: #7C3AED; background: rgba(124,58,237,0.04); }
.btn-price-featured {
    display: block; text-align: center; padding: 13px 24px;
    background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff;
    text-decoration: none; transition: all 0.25s ease;
}
.btn-price-featured:hover { background: rgba(255,255,255,0.25); }

@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
}

/* ----- Final CTA ----- */

#cta { padding: 80px 0; text-align: center; }
#cta::before { background: #FDFCF8; }
.cta-card {
    max-width: 760px; margin: 0 auto;
    background: linear-gradient(145deg, #2D1B69 0%, #7C3AED 100%);
    border-radius: 32px; padding: 72px 64px;
    position: relative; overflow: hidden;
}
.cta-card::before {
    content: '';
    position: absolute; top: -80px; right: -80px;
    width: 300px; height: 300px; border-radius: 50%;
    background: rgba(255,255,255,0.05);
}
.cta-card::after {
    content: '';
    position: absolute; bottom: -60px; left: -60px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.cta-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(28px, 4vw, 44px); font-weight: 800;
    color: #fff; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 20px;
}
.cta-subtitle { font-size: 16px; color: rgba(255,255,255,0.7); margin-bottom: 40px; line-height: 1.6; }
.cta-buttons  { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-cta-main {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 16px 36px; font-size: 16px; font-weight: 700;
    color: #2D1B69; background: #fff; border: none;
    border-radius: 14px; cursor: pointer; text-decoration: none;
    transition: all 0.25s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.20);
}
.btn-cta-main:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
.cta-note { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 20px; }

@media (max-width: 640px) { .cta-card { padding: 48px 28px; } }

/* ----- Footer ----- */

footer {
    background: #2D1B69; padding: 48px 0;
    color: rgba(255,255,255,0.4);
}
.footer-inner {
    max-width: 1180px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
}
.footer-logo { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.7); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,0.35); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: rgba(255,255,255,0.7); }

/* Mobile: hide glows, canvas, fix footer cascade */
@media (max-width: 768px) {
    body::before { display: none !important; }
    #hero::before { background: #FDFCF8 !important; }
    #cursor-canvas { display: none !important; }
    .footer-inner { flex-direction: column; text-align: center; gap: 12px; }
    .footer-links { flex-direction: column; gap: 8px; align-items: center; }
}

/* ============================================================
   7. ANIMATIONS & SCROLL REVEAL
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.reveal-left  { transform: translateX(-40px); }
.reveal.reveal-right { transform: translateX(40px); }
.reveal.reveal-scale { transform: scale(0.92) translateY(20px); }
.reveal.visible      { opacity: 1; transform: none; }

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.reveal-left, .reveal.reveal-right {
        opacity: 1; transform: none;
    }
}


/* ============================================================
   8. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; max-width: 680px; }
    .program-header { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 960px) {
    .nav-sections { display: none; }
    .mobile-menu-btn { display: flex; }
}
@media (max-width: 900px) {
    .speaker-grid { grid-template-columns: 1fr; }
    .speaker-photo-placeholder { max-width: 280px; }
    .speaker-photo-wrap { overflow: hidden; }
    .speaker-badge-card { right: 10px; }
    .speaker-name { font-size: 28px; }
    .speaker-stats { gap: 10px; }
    .speaker-stat { padding: 12px 8px; }
    .speaker-stat .n { font-size: 22px; }
}
@media (max-width: 768px) {
    .problems-grid { grid-template-columns: 1fr; }
    .own-ai-grid   { grid-template-columns: 1fr; }
    .pricing-grid  { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
    #hero { padding-bottom: 48px; }
    .cta-card { padding: 48px 20px; }
    .cta-title { font-size: 26px; }
    .nav-cta .btn-nav-label { display: none; }
}
@media (max-width: 1100px) { .side-nav { display: none; } }

/* Prevent parallax layers from causing horizontal overflow */
section { overflow: hidden; position: relative; }