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

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

:root {
    /* — Vibrant palette — */
    --violet:       #7C3AED;
    --violet-d:     #5B21B6;
    --violet-l:     #C4B5FD;
    --cyan:         #00D4FF;
    --cyan-d:       #0891B2;
    --pink:         #F472B6;
    --pink-d:       #DB2777;
    --blue:         #60A5FA;
    --green:        #34D399;
    --gold:         #FBBF24;
    /* — Base — */
    --dark:         #06010F;
    --dark-2:       #0D0520;
    --dark-3:       #130830;
    --text:         #F1F0FF;
    --muted:        #C2BEDD;
    --font:         'Manrope', 'Plus Jakarta Sans', sans-serif;
    --radius:       14px;
    --radius-lg:    22px;
    --radius-xl:    34px;
    --transition:   all .28s cubic-bezier(.4,0,.2,1);
    /* — Glows — */
    --gv:  0 0 50px rgba(124,58,237,.55);
    --gc:  0 0 50px rgba(0,212,255,.45);
    --gp:  0 0 50px rgba(244,114,182,.50);
    --gb:  0 0 50px rgba(96,165,250,.45);
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--dark);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ══════════════════════════════════════════
   CANVAS
══════════════════════════════════════════ */
#bg-canvas {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}

/* ══════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════ */
#preloader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--dark);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    transition: opacity .8s ease, transform .8s ease;
}
#preloader.pl-out { opacity: 0; transform: scale(1.04); pointer-events: none; }

/* rings */
.pl-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pl-ring  { position: absolute; border-radius: 50%; }
.pl-r1 { width: 260px; height: 260px; border: 1px solid rgba(124,58,237,.35); animation: ringSpin 3s linear infinite; }
.pl-r2 { width: 350px; height: 350px; border: 1px solid rgba(0,212,255,.20); animation: ringSpin 5s linear infinite reverse; }
.pl-r3 { width: 440px; height: 440px; border: 1px solid rgba(244,114,182,.14); animation: ringSpin 9s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.pl-r1::before { content:''; position:absolute; width:9px; height:9px; border-radius:50%; top:-4px; left:50%; transform:translateX(-50%); background:var(--violet); box-shadow: 0 0 14px 4px rgba(124,58,237,.9); }
.pl-r2::before { content:''; position:absolute; width:8px; height:8px; border-radius:50%; top:-4px; left:50%; transform:translateX(-50%); background:var(--cyan); box-shadow: 0 0 14px 4px rgba(0,212,255,.9); }
.pl-r3::before { content:''; position:absolute; width:7px; height:7px; border-radius:50%; top:-3px; left:50%; transform:translateX(-50%); background:var(--pink); box-shadow: 0 0 14px 3px rgba(244,114,182,.9); }

.pl-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pl-icon-wrap {
    width: 84px; height: 84px;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px rgba(124,58,237,.4), var(--gv);
    animation: plFloat 2.4s ease-in-out infinite;
}
.pl-icon-wrap i { font-size: 34px; color: #fff; }
@keyframes plFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.pl-title {
    font-size: 15px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
    background: linear-gradient(90deg, var(--violet-l), var(--cyan), var(--pink), var(--violet-l));
    background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: shimmer 2.5s linear infinite;
}
.pl-sub { font-size: 14px; color: rgba(255,255,255,.60); letter-spacing: 1.5px; margin-top: -10px; }
.pl-bar-wrap { width: 220px; height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
#pl-fill {
    height: 100%; width: 0%; border-radius: 2px; transition: width .2s ease;
    background: linear-gradient(90deg, var(--violet), var(--cyan), var(--pink));
    box-shadow: 0 0 12px rgba(124,58,237,.7);
}
#pl-pct { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.65); letter-spacing: 1px; }

/* ══════════════════════════════════════════
   NAV  — navbar.css dan ham override qilinadi
══════════════════════════════════════════ */
.landing-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    /* 100% solid — no transparency, no backdrop-filter artifacts */
    background: #070214;
    border-bottom: 2px solid rgba(124,58,237,.50);
    /* shadow goes only DOWNWARD, not onto nav itself */
    box-shadow: 0 4px 32px rgba(0,0,0,.70), 0 2px 0 rgba(124,58,237,.20);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.landing-nav.nav-scrolled {
    border-bottom-color: rgba(0,212,255,.45);
    box-shadow: 0 6px 48px rgba(0,0,0,.80), 0 2px 0 rgba(0,212,255,.18);
}

.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; /* generous top/bottom */
}

/* Logo */
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-logo-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 24px rgba(124,58,237,.65);
    transition: var(--transition);
}
.nav-logo:hover .nav-logo-icon { transform: rotate(-10deg) scale(1.08); }
.nav-logo-icon i { font-size: 18px; color: #ffffff; }
.nav-logo-text strong {
    display: block; font-size: 16px; font-weight: 800;
    color: #ffffff;    /* pure white — always readable */
    letter-spacing: -.2px;
}
.nav-logo-text span {
    font-size: 13px; font-weight: 500;
    color: #C4B5FD;   /* bright violet-light — visible */
}

/* CTA button */
.nav-cta {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--violet), var(--pink-d));
    color: #ffffff; border-radius: 50px; font-size: 16px; font-weight: 800;
    letter-spacing: .2px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: 0 4px 24px rgba(124,58,237,.60), 0 0 0 1px rgba(196,181,253,.15);
    transition: var(--transition); position: relative; overflow: hidden;
}
.nav-cta::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
    transition: left .5s ease;
}
.nav-cta:hover::before  { left: 100%; }
.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 36px rgba(124,58,237,.75), 0 0 20px rgba(0,212,255,.30);
    color: #ffffff;
}

/* ── Nav links (desktop centered) ── */
.nav-links {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 4px;
    list-style: none;
    margin: 0; padding: 0;
}

.nav-link-item {
    position: relative;
    display: inline-flex; align-items: center;
    padding: 10px 18px;
    font-size: 16px; font-weight: 600;
    color: rgba(226, 220, 255, .92);
    text-decoration: none;
    border-radius: 10px;
    letter-spacing: .15px;
    white-space: nowrap;
    transition: color .25s ease, background .25s ease;
}
.nav-link-item::after {
    content: '';
    position: absolute;
    bottom: 5px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    border-radius: 2px;
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.nav-link-item:hover             { color: #fff; background: rgba(124, 58, 237, .18); }
.nav-link-item:hover::after,
.nav-link-item.active::after     { width: calc(100% - 30px); }
.nav-link-item.active            { color: #ffffff; }

/* ── Nav right wrapper ── */
.nav-right {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}

/* ── Hamburger button ── */
.nav-burger {
    display: none;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: rgba(124, 58, 237, .14);
    border: 1px solid rgba(124, 58, 237, .38);
    border-radius: 10px;
    cursor: pointer; padding: 0; flex-shrink: 0;
    transition: var(--transition);
}
.nav-burger span {
    display: block;
    width: 18px; height: 2px;
    background: rgba(255, 255, 255, .82);
    border-radius: 2px;
    transform-origin: center;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.nav-burger:hover                        { background: rgba(124,58,237,.28); border-color: rgba(196,181,253,.55); }
.nav-burger.open span:nth-child(1)       { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2)       { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3)       { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile overlay ── */
.nav-mobile-overlay {
    position: fixed; inset: 0;
    background: rgba(3, 0, 14, .68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 998;
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
}
.nav-mobile-overlay.open { opacity: 1; pointer-events: all; }

/* ── Mobile drawer (≤860px) ── */
@media (max-width: 860px) {
    .nav-links {
        position: fixed;
        top: 0; right: -290px; bottom: 0; left: auto;
        width: 272px;
        flex: none;
        background: linear-gradient(160deg, #0f0522 0%, #090119 100%);
        border-left: 1px solid rgba(124, 58, 237, .28);
        box-shadow: -18px 0 70px rgba(0, 0, 0, .65);
        flex-direction: column; align-items: flex-start; justify-content: flex-start;
        padding: 90px 14px 40px;
        gap: 3px;
        z-index: 999;
        transition: right .38s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
    }
    .nav-links.open { right: 0; }
    .nav-links::before {
        content: 'NAVIGATSIYA';
        display: block;
        font-size: 10px; font-weight: 800; letter-spacing: 2.5px;
        color: rgba(196, 181, 253, .32);
        padding: 0 10px 10px;
        border-bottom: 1px solid rgba(124, 58, 237, .14);
        margin-bottom: 6px;
        width: 100%;
    }
    .nav-link-item {
        width: 100%;
        font-size: 17px; padding: 14px 16px;
        border-radius: 12px;
        color: rgba(226, 220, 255, .92);
    }
    .nav-link-item::after        { display: none; }
    .nav-link-item.active        { background: rgba(124, 58, 237, .22); color: #ffffff; }
    .nav-link-item:hover         { background: rgba(124, 58, 237, .16); color: #ffffff; }

    .nav-burger { display: flex; }
}

/* ══════════════════════════════════════════
   HERO  (aurora mesh bg)
══════════════════════════════════════════ */
.hero-section {
    min-height: 100vh; display: flex; align-items: center;
    padding-top: 90px; /* nav: 18px*2 padding + 42px icon + 2px border = ~82px */
    position: relative; overflow: hidden; z-index: 1;
    background:
        radial-gradient(ellipse at 15% 30%,  rgba(124,58,237,.28)  0%, transparent 50%),
        radial-gradient(ellipse at 85% 70%,  rgba(0,212,255,.18)   0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(244,114,182,.14)  0%, transparent 50%),
        linear-gradient(170deg, #09010F 0%, #0E0422 50%, #060B18 100%);
}

.hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 18px;
    background: rgba(124,58,237,.15);
    border: 1px solid rgba(196,181,253,.30);
    border-radius: 50px; font-size: 14px; font-weight: 700;
    color: var(--violet-l); margin-bottom: 28px; letter-spacing: .4px;
    box-shadow: 0 0 24px rgba(124,58,237,.20);
    backdrop-filter: blur(10px);
}
.pulse-dot { width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; animation: pulseDot 2s infinite; box-shadow: 0 0 8px var(--cyan); }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.6)} }

.hero-title {
    font-size: clamp(36px, 5.5vw, 72px);
    font-weight: 800; line-height: 1.08; letter-spacing: -2px;
    color: #fff; margin-bottom: 22px;
    text-shadow: 0 0 80px rgba(124,58,237,.25);
}
.gradient-text {
    background: linear-gradient(90deg, var(--violet-l), var(--cyan), var(--pink), var(--violet-l));
    background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: shimmer 3.5s linear infinite;
    filter: drop-shadow(0 0 20px rgba(0,212,255,.3));
}
@keyframes shimmer { 0%{background-position:0% center} 100%{background-position:300% center} }

.hero-desc { font-size: clamp(15px, 1.9vw, 18px); color: #D4D1ED; line-height: 1.78; max-width: 510px; margin-bottom: 38px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-hero-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 36px;
    background: linear-gradient(135deg, var(--violet), var(--pink-d));
    color: #fff; border-radius: 50px; font-size: 15px; font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: var(--gv), var(--gp);
    transition: var(--transition); position: relative; overflow: hidden;
}
.btn-hero-primary::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: translateX(-100%); transition: transform .55s ease;
}
.btn-hero-primary:hover::after { transform: translateX(100%); }
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: var(--gv), var(--gp), 0 20px 50px rgba(124,58,237,.4); color: #fff; }

.btn-hero-secondary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px;
    background: rgba(255,255,255,.055);
    border: 1.5px solid rgba(196,181,253,.20);
    color: #D4D0F0; border-radius: 50px; font-size: 14px; font-weight: 600;
    text-decoration: none; transition: var(--transition); backdrop-filter: blur(10px);
}
.btn-hero-secondary:hover { background: rgba(124,58,237,.12); color: #fff; border-color: rgba(196,181,253,.4); }

/* Hero card */
.hero-card {
    background: rgba(15,5,35,.70);
    border: 1px solid rgba(124,58,237,.30);
    border-radius: var(--radius-xl); padding: 32px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--gv), inset 0 1px 0 rgba(255,255,255,.06);
    transition: var(--transition);
}
.hero-card:hover { box-shadow: var(--gv), var(--gc), inset 0 1px 0 rgba(255,255,255,.08); transform: translateY(-4px); }

.hero-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(124,58,237,.18); }
.hero-card-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--violet), var(--cyan)); border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: var(--gv); }
.hero-card-icon i { font-size: 21px; color: #fff; }
.hero-card-title { font-size: 17px; font-weight: 800; color: #fff; }
.hero-card-sub { font-size: 14px; color: var(--muted); margin-top: 3px; }

.hero-stage {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: rgba(124,58,237,.07);
    border-radius: var(--radius); border: 1px solid rgba(124,58,237,.18);
    margin-bottom: 10px; transition: var(--transition); cursor: default;
}
.hero-stage:hover { background: rgba(124,58,237,.14); border-color: rgba(124,58,237,.40); transform: translateX(5px); box-shadow: var(--gv); }
.hero-stage-num { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0; }
.stage-1 { background: rgba(124,58,237,.28); color: var(--violet-l); box-shadow: 0 0 16px rgba(124,58,237,.4); }
.stage-2 { background: rgba(0,212,255,.22); color: var(--cyan); box-shadow: 0 0 16px rgba(0,212,255,.3); }
.stage-3 { background: rgba(244,114,182,.22); color: var(--pink); box-shadow: 0 0 16px rgba(244,114,182,.3); }
.hero-stage-info strong { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.hero-stage-info span  { font-size: 14px; color: var(--muted); }
.hero-stage-badge { margin-left: auto; font-size: 14px; font-weight: 700; padding: 5px 14px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; }
.badge-blue   { background: rgba(124,58,237,.22); color: var(--violet-l); border: 1px solid rgba(124,58,237,.35); }
.badge-cyan   { background: rgba(0,212,255,.18);  color: var(--cyan);     border: 1px solid rgba(0,212,255,.30); }
.badge-purple { background: rgba(244,114,182,.18);color: var(--pink);     border: 1px solid rgba(244,114,182,.30); }

.hero-card-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(124,58,237,.15); display: flex; align-items: center; justify-content: space-between; }
.hero-card-footer span   { font-size: 14px; color: var(--muted); }
.hero-card-footer strong { font-size: 15px; font-weight: 700; }

/* ── Hero meta chips (yosh, joy) ── */
.hero-meta-chips {
    display: flex; align-items: center; gap: 10px;
    margin-top: 22px; flex-wrap: wrap;
}
.hero-age-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px;
    background: rgba(251,191,36,.10);
    border: 1px solid rgba(251,191,36,.30);
    border-radius: 50px;
    font-size: 13px; font-weight: 700; color: #FDE68A;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 18px rgba(251,191,36,.12);
    transition: var(--transition);
}
.hero-age-chip i { font-size: 13px; color: var(--gold); }
.hero-age-chip:hover { background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.50); }
.hero-age-chip--muted {
    background: rgba(255,255,255,.055);
    border-color: rgba(196,181,253,.18);
    color: var(--muted); box-shadow: none;
}
.hero-age-chip--muted i { color: var(--violet-l); }
.hero-age-chip--muted:hover { background: rgba(124,58,237,.10); border-color: rgba(196,181,253,.35); color: #fff; }

/* ── Hero countdown ── */
.hero-countdown {
    margin-top: 14px;
    background: rgba(8,2,20,.70);
    border: 1px solid rgba(251,191,36,.22);
    border-radius: var(--radius-lg);
    padding: 16px 20px 18px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 0 48px rgba(251,191,36,.07), inset 0 1px 0 rgba(255,255,255,.05);
    position: relative; overflow: hidden;
}
.hero-countdown::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,.6), #FDE68A, rgba(251,191,36,.6), transparent);
    box-shadow: 0 0 10px rgba(251,191,36,.5);
}
.hcd-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.hcd-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 8px var(--gold);
    animation: pulseDot 2s infinite; flex-shrink: 0;
}
.hcd-label {
    font-size: 12px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .8px; flex: 1;
}
.hcd-date {
    font-size: 12px; font-weight: 700; color: #FDE68A;
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.22);
    border-radius: 50px; padding: 3px 11px;
    display: inline-flex; align-items: center; gap: 5px;
}
.hcd-timer {
    display: flex; align-items: center; gap: 8px;
}
.hcd-unit {
    flex: 1; text-align: center;
    background: rgba(251,191,36,.06);
    border: 1px solid rgba(251,191,36,.14);
    border-radius: var(--radius); padding: 10px 6px 8px;
    transition: var(--transition);
}
.hcd-unit:hover { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.28); }
.hcd-num {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800; color: #fff; line-height: 1;
    letter-spacing: -1px; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 22px rgba(251,191,36,.45);
}
.hcd-lbl {
    font-size: 10px; font-weight: 700; color: var(--gold);
    text-transform: uppercase; letter-spacing: .6px; margin-top: 5px;
}
.hcd-sep {
    font-size: 20px; font-weight: 800; color: rgba(251,191,36,.45);
    line-height: 1; padding-bottom: 14px; flex-shrink: 0;
}

/* ══════════════════════════════════════════
   STATS
══════════════════════════════════════════ */
.stats-section { padding: 0; position: relative; z-index: 1; }
.stats-inner {
    background: rgba(12,5,30,.85);
    border: 1px solid rgba(124,58,237,.28);
    border-radius: var(--radius-xl); padding: 44px 52px;
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    margin-top: -44px; position: relative; z-index: 2;
    box-shadow: var(--gv), inset 0 1px 0 rgba(124,58,237,.12);
}
.stat-item { text-align: center; }
.stat-item + .stat-item { border-left: 1px solid rgba(124,58,237,.18); }
.stat-num {
    font-size: clamp(38px, 5vw, 60px); font-weight: 800; line-height: 1;
    color: #fff; text-shadow: 0 0 40px rgba(255,255,255,.2);
}
.stat-num.primary {
    background: linear-gradient(135deg, var(--violet-l), var(--cyan));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 12px rgba(0,212,255,.4));
}
.stat-label { font-size: 15px; color: #C4C0DC; font-weight: 500; margin-top: 8px; line-height: 1.45; }

/* ══════════════════════════════════════════
   SHARED SECTION
══════════════════════════════════════════ */
.section { padding: 100px 0; position: relative; z-index: 1; }

/* Each section has its own aurora tint */
.section-bg {
    background:
        radial-gradient(ellipse at 80% 50%, rgba(124,58,237,.12) 0%, transparent 55%),
        rgba(10,4,24,.88);
    border-top: 1px solid rgba(124,58,237,.12);
}
.section-bg2 {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0,212,255,.10) 0%, transparent 55%),
        rgba(4,10,25,.90);
    border-top: 1px solid rgba(0,212,255,.10);
}
.section-bg3 {
    background:
        radial-gradient(ellipse at 60% 30%, rgba(244,114,182,.10) 0%, transparent 55%),
        rgba(12,4,26,.92);
    border-top: 1px solid rgba(244,114,182,.10);
}

.section-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 16px;
    background: rgba(124,58,237,.18);
    border: 1px solid rgba(196,181,253,.30);
    border-radius: 50px; font-size: 14px; font-weight: 700;
    color: var(--violet-l); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 18px;
    box-shadow: 0 0 24px rgba(124,58,237,.2);
}
.section-title {
    font-size: clamp(28px, 4vw, 48px); font-weight: 800;
    line-height: 1.1; letter-spacing: -1.3px; color: #fff; margin-bottom: 14px;
    text-shadow: 0 0 60px rgba(124,58,237,.18);
}
.section-title .accent {
    background: linear-gradient(90deg, var(--violet-l), var(--cyan), var(--pink));
    background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: shimmer 4s linear infinite;
    filter: drop-shadow(0 0 14px rgba(0,212,255,.25));
}
.section-desc { font-size: clamp(15px, 2vw, 17px); color: #CEC9E8; line-height: 1.78; max-width: 560px; }

/* fade-in */
.fade-up { opacity: 0; transform: translateY(32px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: .10s; }
.fade-up.delay-2 { transition-delay: .22s; }
.fade-up.delay-3 { transition-delay: .34s; }
.fade-up.delay-4 { transition-delay: .46s; }

/* ══════════════════════════════════════════
   DIRECTION CARDS (Bosqichlar)
══════════════════════════════════════════ */
.direction-card {
    background: rgba(12,5,28,.75);
    border: 1px solid rgba(124,58,237,.22);
    border-radius: var(--radius-xl); padding: 38px 32px;
    transition: var(--transition); position: relative; overflow: hidden; height: 100%;
    backdrop-filter: blur(16px);
}
/* top glow bar */
.direction-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.direction-card.idea::before     { background: linear-gradient(90deg, var(--violet), var(--violet-l)); box-shadow: 0 0 16px rgba(124,58,237,.8); }
.direction-card.project::before  { background: linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow: 0 0 16px rgba(0,212,255,.8); }
.direction-card.invention::before{ background: linear-gradient(90deg, var(--pink), var(--gold)); box-shadow: 0 0 16px rgba(244,114,182,.8); }

/* inner glow spot */
.direction-card::after {
    content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px;
    border-radius: 50%; opacity: 0; transition: var(--transition); pointer-events: none;
}
.direction-card.idea::after     { background: radial-gradient(circle, rgba(124,58,237,.18), transparent 70%); }
.direction-card.project::after  { background: radial-gradient(circle, rgba(0,212,255,.15), transparent 70%); }
.direction-card.invention::after{ background: radial-gradient(circle, rgba(244,114,182,.15), transparent 70%); }

.direction-card:hover { transform: translateY(-10px); }
.direction-card.idea:hover     { border-color: rgba(124,58,237,.55); box-shadow: var(--gv); }
.direction-card.project:hover  { border-color: rgba(0,212,255,.50);  box-shadow: var(--gc); }
.direction-card.invention:hover{ border-color: rgba(244,114,182,.50);box-shadow: var(--gp); }
.direction-card:hover::after   { opacity: 1; }

.direction-icon { width: 68px; height: 68px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.icon-idea      { background: rgba(124,58,237,.22); box-shadow: var(--gv); }
.icon-project   { background: rgba(0,212,255,.18);  box-shadow: var(--gc); }
.icon-invention { background: rgba(244,114,182,.18);box-shadow: var(--gp); }
.direction-icon i { font-size: 28px; }
.icon-idea i      { color: var(--violet-l); }
.icon-project i   { color: var(--cyan); }
.icon-invention i { color: var(--pink); }

.direction-title    { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.direction-subtitle { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.direction-desc  { font-size: 15px; color: #CEC9E8; line-height: 1.72; margin-bottom: 22px; }
.direction-count { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; padding: 7px 16px; border-radius: 50px; }
.count-idea      { background: rgba(124,58,237,.18); color: var(--violet-l); border: 1px solid rgba(124,58,237,.35); }
.count-project   { background: rgba(0,212,255,.14);  color: var(--cyan);     border: 1px solid rgba(0,212,255,.28); }
.count-invention { background: rgba(244,114,182,.14);color: var(--pink);     border: 1px solid rgba(244,114,182,.28); }

/* ══════════════════════════════════════════
   PROCESS
══════════════════════════════════════════ */
.process-step { text-align: center; position: relative; }
.process-step:not(:last-child)::after {
    content: ''; position: absolute; top: 37px; left: 58%; width: 84%; height: 2px;
    background: linear-gradient(90deg, rgba(124,58,237,.5), rgba(0,212,255,.3), transparent);
    z-index: 0;
}
.process-circle {
    width: 76px; height: 76px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 22px; position: relative; z-index: 1; transition: var(--transition);
}
.process-circle:hover { transform: scale(1.12); }
.p-circle-1 { background: linear-gradient(135deg, var(--violet), var(--violet-d)); box-shadow: var(--gv), 0 0 0 4px rgba(124,58,237,.15); color: #fff; }
.p-circle-2 { background: linear-gradient(135deg, var(--cyan), var(--cyan-d)); box-shadow: var(--gc), 0 0 0 4px rgba(0,212,255,.12); color: #fff; }
.p-circle-3 { background: linear-gradient(135deg, var(--pink), var(--pink-d)); box-shadow: var(--gp), 0 0 0 4px rgba(244,114,182,.12); color: #fff; }
.process-num-label { display: inline-block; font-size: 14px; font-weight: 700; padding: 6px 16px; border-radius: 50px; margin-bottom: 18px; }
.pn-1 { background: rgba(124,58,237,.18); color: var(--violet-l); border: 1px solid rgba(124,58,237,.35); }
.pn-2 { background: rgba(0,212,255,.15);  color: var(--cyan);     border: 1px solid rgba(0,212,255,.30); }
.pn-3 { background: rgba(244,114,182,.15);color: var(--pink);     border: 1px solid rgba(244,114,182,.30); }
.process-title { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.process-desc  { font-size: 15px; color: #CEC9E8; line-height: 1.68; }

/* ══════════════════════════════════════════
   MENTOR / INFRA CARDS
══════════════════════════════════════════ */
.mentor-card {
    background: rgba(10,4,24,.75); border: 1px solid rgba(124,58,237,.20);
    border-radius: var(--radius-lg); padding: 30px 26px;
    transition: var(--transition); height: 100%; backdrop-filter: blur(14px);
}
.mentor-card:hover { border-color: rgba(124,58,237,.50); box-shadow: var(--gv); transform: translateY(-5px); background: rgba(16,7,35,.80); }

.mentor-icon { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.mentor-icon        { background: rgba(124,58,237,.20); box-shadow: var(--gv); }
.mentor-icon.cyan   { background: rgba(0,212,255,.18);  box-shadow: var(--gc); }
.mentor-icon.purple { background: rgba(244,114,182,.18);box-shadow: var(--gp); }
.mentor-icon.green  { background: rgba(52,211,153,.18); box-shadow: 0 0 30px rgba(52,211,153,.35); }
.mentor-icon   i { font-size: 22px; color: var(--violet-l); }
.mentor-icon.cyan   i { color: var(--cyan); }
.mentor-icon.purple i { color: var(--pink); }
.mentor-icon.green  i { color: var(--green); }
.mentor-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.mentor-desc  { font-size: 15px; color: #CEC9E8; line-height: 1.65; }

.deliverables-bar { background: rgba(124,58,237,.10); border: 1px solid rgba(124,58,237,.25); border-radius: 20px; padding: 22px 28px; }
.deliverables-label { font-size: 14px; font-weight: 700; color: var(--violet-l); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.deliverable-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.28);
    border-radius: 50px; font-size: 14px; font-weight: 600; color: var(--green);
}

/* ══════════════════════════════════════════
   SCORE RINGS (Jamoa)
══════════════════════════════════════════ */
.score-card { text-align: center; }
.score-ring-wrap { position: relative; display: inline-block; margin-bottom: 16px; }
.score-ring-wrap svg { transform: rotate(-90deg); }
.score-ring-bg   { stroke: rgba(255,255,255,.05); }
.score-ring-fill { stroke-linecap: round; }
.ring-primary { stroke: url(#grad-primary); filter: drop-shadow(0 0 8px rgba(124,58,237,.8)); }
.ring-cyan    { stroke: url(#grad-cyan);    filter: drop-shadow(0 0 8px rgba(0,212,255,.7)); }
.ring-purple  { stroke: url(#grad-purple);  filter: drop-shadow(0 0 8px rgba(244,114,182,.7)); }
.ring-green   { stroke: url(#grad-green);   filter: drop-shadow(0 0 8px rgba(52,211,153,.7)); }
.score-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-num  { font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.score-pts  { font-size: 14px; color: var(--muted); font-weight: 600; }
.score-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.score-desc  { font-size: 14px; color: #CEC9E8; line-height: 1.55; }

/* ══════════════════════════════════════════
   TIMELINE  — Card redesign
══════════════════════════════════════════ */

/* Connector row: numbered circles + horizontal line */
.tl-connector {
    display: flex; align-items: center; margin-bottom: 28px;
    position: relative;
}
.tl-connector::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--violet), var(--blue), var(--cyan), var(--pink), var(--green));
    opacity: .35; z-index: 0;
    box-shadow: 0 0 10px rgba(0,212,255,.3);
    transform: translateY(-50%);
}
.tl-num {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; color: #fff;
    flex-shrink: 0; position: relative; z-index: 1;
    transition: var(--transition);
    cursor: default;
}
.tl-num:hover { transform: scale(1.12); }
.tl-spacer { flex: 1; }   /* fills gap between circles */

.tl-n1 { background: linear-gradient(135deg, var(--violet), var(--violet-d)); box-shadow: var(--gv), 0 0 0 3px rgba(124,58,237,.18); }
.tl-n2 { background: linear-gradient(135deg, var(--blue),  #2563EB);          box-shadow: var(--gb), 0 0 0 3px rgba(96,165,250,.15); }
.tl-n3 { background: linear-gradient(135deg, var(--cyan),  var(--cyan-d));     box-shadow: var(--gc), 0 0 0 3px rgba(0,212,255,.15); }
.tl-n4 { background: linear-gradient(135deg, var(--pink),  var(--pink-d));     box-shadow: var(--gp), 0 0 0 3px rgba(244,114,182,.15); }
.tl-n5 { background: linear-gradient(135deg, var(--green), #059669);           box-shadow: 0 0 40px rgba(52,211,153,.50), 0 0 0 3px rgba(52,211,153,.18); }

/* Cards row */
.tl-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

.tl-card {
    background: rgba(12,5,28,.80);
    border: 1px solid rgba(124,58,237,.18);
    border-radius: var(--radius-lg);
    padding: 20px 18px 18px;
    transition: var(--transition);
    backdrop-filter: blur(14px);
    display: flex; flex-direction: column; gap: 10px;
    position: relative; overflow: hidden;
}
/* Coloured left border accent per step */
.tl-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.tl-c1::before { background: var(--violet); box-shadow: 2px 0 12px rgba(124,58,237,.6); }
.tl-c2::before { background: var(--blue);   box-shadow: 2px 0 12px rgba(96,165,250,.5); }
.tl-c3::before { background: var(--cyan);   box-shadow: 2px 0 12px rgba(0,212,255,.5); }
.tl-c4::before { background: var(--pink);   box-shadow: 2px 0 12px rgba(244,114,182,.5); }
.tl-c5::before { background: var(--green);  box-shadow: 2px 0 12px rgba(52,211,153,.5); }

.tl-card:hover { transform: translateY(-5px); }
.tl-c1:hover { border-color: rgba(124,58,237,.45); box-shadow: var(--gv); }
.tl-c2:hover { border-color: rgba(96,165,250,.40); box-shadow: var(--gb); }
.tl-c3:hover { border-color: rgba(0,212,255,.40);  box-shadow: var(--gc); }
.tl-c4:hover { border-color: rgba(244,114,182,.40);box-shadow: var(--gp); }
.tl-c5:hover { border-color: rgba(52,211,153,.40); box-shadow: 0 0 40px rgba(52,211,153,.4); }

/* Card content */
.tl-date {
    font-size: 15px; font-weight: 800; color: #fff; line-height: 1.2;
}
.tl-event {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; padding: 4px 10px; border-radius: 50px;
    align-self: flex-start;
}
.tl-ev1 { background: rgba(124,58,237,.20); color: var(--violet-l); border: 1px solid rgba(124,58,237,.35); }
.tl-ev2 { background: rgba(96,165,250,.18);  color: var(--blue);     border: 1px solid rgba(96,165,250,.32); }
.tl-ev3 { background: rgba(0,212,255,.16);   color: var(--cyan);     border: 1px solid rgba(0,212,255,.30); }
.tl-ev4 { background: rgba(244,114,182,.16); color: var(--pink);     border: 1px solid rgba(244,114,182,.30); }
.tl-ev5 { background: rgba(52,211,153,.16);  color: var(--green);    border: 1px solid rgba(52,211,153,.30); }

.tl-desc {
    font-size: 14px; color: #CEC9E8; line-height: 1.60; flex: 1;
}

/* Location + time pills — clearly distinct */
.tl-meta {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.tl-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 50px;
    font-size: 14px; font-weight: 600;
}
.tl-pill i { font-size: 12px; }
.tl-pill-loc {
    background: rgba(0,212,255,.12);
    border: 1px solid rgba(0,212,255,.32);
    color: var(--cyan);
}
.tl-pill-time {
    background: rgba(124,58,237,.12);
    border: 1px solid rgba(124,58,237,.32);
    color: var(--violet-l);
}
.tl-pill-online {
    background: rgba(52,211,153,.12);
    border: 1px solid rgba(52,211,153,.30);
    color: var(--green);
}

/* Responsive */
@media (max-width: 991.98px) {
    .tl-cards { grid-template-columns: 1fr 1fr; }
    .tl-connector { display: none; }
}
@media (max-width: 575.98px) {
    .tl-cards { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   CATEGORY CARDS (Format)
══════════════════════════════════════════ */
.category-card {
    background: rgba(10,4,24,.78); border: 1px solid rgba(124,58,237,.22);
    border-radius: var(--radius-xl); padding: 42px 32px; text-align: center;
    transition: var(--transition); height: 100%; backdrop-filter: blur(16px);
}
.category-card:hover { transform: translateY(-8px); }
.category-card:hover .cat-student { box-shadow: var(--gv); border-color: rgba(124,58,237,.55); }
.category-card:hover .cat-teacher { box-shadow: var(--gc); border-color: rgba(0,212,255,.5); }
.category-card:hover .cat-engineer{ box-shadow: var(--gp); border-color: rgba(244,114,182,.5); }

.category-icon-wrap { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 26px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: var(--transition); }
.cat-student  { background: rgba(124,58,237,.20); border-color: rgba(124,58,237,.35); box-shadow: 0 0 30px rgba(124,58,237,.2); }
.cat-teacher  { background: rgba(0,212,255,.18);  border-color: rgba(0,212,255,.30);  box-shadow: 0 0 30px rgba(0,212,255,.18); }
.cat-engineer { background: rgba(244,114,182,.18);border-color: rgba(244,114,182,.30);box-shadow: 0 0 30px rgba(244,114,182,.18); }
.category-icon-wrap i { font-size: 34px; }
.cat-student i  { color: var(--violet-l); }
.cat-teacher i  { color: var(--cyan); }
.cat-engineer i { color: var(--pink); }
.category-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.category-desc  { font-size: 15px; color: #CEC9E8; line-height: 1.7; margin-bottom: 22px; }
.category-count { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 50px; font-size: 15px; font-weight: 700; }
.cc-student  { background: rgba(124,58,237,.18); color: var(--violet-l); border: 1px solid rgba(124,58,237,.35); }
.cc-teacher  { background: rgba(0,212,255,.14);  color: var(--cyan);     border: 1px solid rgba(0,212,255,.28); }
.cc-engineer { background: rgba(244,114,182,.14);color: var(--pink);     border: 1px solid rgba(244,114,182,.28); }

/* ══════════════════════════════════════════
   DEMO DAY / REWARD SECTION
══════════════════════════════════════════ */
.reward-section {
    padding: 100px 0; position: relative; overflow: hidden; z-index: 1;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(124,58,237,.30) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 60%, rgba(0,212,255,.20) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(244,114,182,.18) 0%, transparent 50%),
        linear-gradient(160deg, #0A0220 0%, #140A35 50%, #06101E 100%);
}
.reward-section::after {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), var(--pink), transparent);
    box-shadow: 0 0 20px rgba(0,212,255,.4);
}
.reward-inner { position: relative; z-index: 1; text-align: center; }
.reward-badge {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px;
    background: rgba(124,58,237,.18); border: 1px solid rgba(196,181,253,.28); border-radius: 50px;
    font-size: 15px; font-weight: 700; color: var(--violet-l); margin-bottom: 28px;
    box-shadow: var(--gv);
}
.reward-badge i { color: var(--gold); font-size: 15px; filter: drop-shadow(0 0 8px var(--gold)); }
.reward-title {
    font-size: clamp(32px, 5vw, 60px); font-weight: 800;
    color: #fff; margin-bottom: 20px; line-height: 1.12; letter-spacing: -1.2px;
    text-shadow: 0 0 60px rgba(124,58,237,.3);
}
.reward-amount {
    font-size: clamp(54px, 9vw, 100px); font-weight: 800;
    background: linear-gradient(90deg, var(--gold), #FDE68A, var(--pink), var(--gold));
    background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1; display: block; margin: 20px 0;
    animation: shimmer 3s linear infinite;
    filter: drop-shadow(0 0 24px rgba(251,191,36,.5));
}
.reward-desc {
    font-size: clamp(15px, 2vw, 18px); color: #D4D1ED;
    max-width: 560px; margin: 0 auto 48px; line-height: 1.78;
}
.reward-stats { display: flex; justify-content: center; gap: 56px; margin-bottom: 52px; flex-wrap: wrap; }
.reward-stat-num   { font-size: clamp(30px, 4vw, 46px); font-weight: 800; color: #fff; display: block; line-height: 1; text-shadow: 0 0 30px rgba(255,255,255,.25); }
.reward-stat-label { font-size: 15px; color: rgba(255,255,255,.75); font-weight: 500; margin-top: 8px; }

.btn-reward {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 48px; background: #fff; color: var(--violet-d);
    border-radius: 50px; font-size: 16px; font-weight: 800;
    text-decoration: none; transition: var(--transition);
    box-shadow: var(--gv), 0 12px 40px rgba(0,0,0,.4);
    position: relative; overflow: hidden;
}
.btn-reward::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,.08), transparent);
    transform: translateX(-100%); transition: transform .5s ease;
}
.btn-reward:hover::after { transform: translateX(100%); }
.btn-reward:hover { transform: translateY(-3px); box-shadow: var(--gv), var(--gc), 0 20px 60px rgba(0,0,0,.5); color: var(--violet-d); }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer {
    background: rgba(4,1,12,.98); border-top: 1px solid rgba(124,58,237,.20);
    padding: 40px 0; position: relative; z-index: 1;
    box-shadow: 0 -4px 40px rgba(124,58,237,.08);
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.footer-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.footer-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--violet), var(--cyan)); border-radius: 9px; display: flex; align-items: center; justify-content: center; box-shadow: var(--gv); }
.footer-logo-icon i { font-size: 15px; color: #fff; }
.footer-logo-text  { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.80); }
.footer-copy  { font-size: 14px; color: rgba(255,255,255,.65); }
.footer-links { display: flex; align-items: center; gap: 28px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,.78); text-decoration: none; transition: var(--transition); }
.footer-links a:hover { color: var(--violet-l); text-shadow: 0 0 12px rgba(124,58,237,.6); }

/* ══════════════════════════════════════════
   TILT CARD (3D hover)
══════════════════════════════════════════ */
.tilt-card { transform-style: preserve-3d; will-change: transform; }

/* ══════════════════════════════════════════
   MENTOR PREVIEW (landing page)
══════════════════════════════════════════ */
.ekspert-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* ── Ekspert strip card — full photo ── */
.ekspert-card {
    background: rgba(251,191,36,.06);
    border: 1px solid rgba(251,191,36,.25);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition); cursor: default;
    position: relative;
    min-width: 0;
}
.ekspert-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--gold), #FDE68A, var(--gold));
    box-shadow: 0 0 16px rgba(251,191,36,.8);
}
.ekspert-card:hover { transform: translateY(-6px); border-color: rgba(251,191,36,.55); box-shadow: 0 0 48px rgba(251,191,36,.22); }

/* Photo area — fills full width */
.ekspert-photo {
    position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
    background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(251,191,36,.06));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ekspert-photo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block;
}
.ekspert-photo::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(8,2,20,.85));
    pointer-events: none;
}
/* Text body */
.ekspert-body { padding: 16px 18px 20px; }
.ekspert-name { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 7px; }
.ekspert-role { font-size: 15px; color: #FDE68A; line-height: 1.5; }

/* ── Featured mentor cards — full photo ── */
.mentor-preview-card {
    background: rgba(12,5,28,.80);
    border: 1px solid rgba(124,58,237,.25);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    backdrop-filter: blur(14px);
    display: flex; flex-direction: column;
}
.mentor-preview-card:hover { transform: translateY(-7px); border-color: rgba(124,58,237,.55); box-shadow: var(--gv); }

/* Photo fills full card width */
.mp-photo {
    position: relative; width: 100%; padding-top: 90%; overflow: hidden;
    background: rgba(124,58,237,.10);
    flex-shrink: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.mp-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
}
.mp-photo::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(8,2,20,.70));
    pointer-events: none;
}
.mp-photo.cyan-bg   { background: rgba(0,212,255,.10); }
.mp-photo.pink-bg   { background: rgba(244,114,182,.10); }
.mp-photo.green-bg  { background: rgba(52,211,153,.10); }
.mp-photo.blue-bg   { background: rgba(96,165,250,.10); }

/* Body text */
.mp-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.mp-name  { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 6px; line-height: 1.3; }
.mp-title { font-size: 15px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; flex: 1; }
.mp-cat   { display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; padding: 5px 14px; border-radius: 50px; align-self: flex-start; }
.mp-cat.violet { background: rgba(124,58,237,.18); color: var(--violet-l); border: 1px solid rgba(124,58,237,.30); }
.mp-cat.cyan   { background: rgba(0,212,255,.14);  color: var(--cyan);     border: 1px solid rgba(0,212,255,.25); }
.mp-cat.pink   { background: rgba(244,114,182,.14);color: var(--pink);     border: 1px solid rgba(244,114,182,.25); }
.mp-cat.green  { background: rgba(52,211,153,.14); color: var(--green);    border: 1px solid rgba(52,211,153,.25); }
.mp-cat.blue   { background: rgba(96,165,250,.14); color: var(--blue);     border: 1px solid rgba(96,165,250,.25); }
.mp-cat.gold   { background: rgba(251,191,36,.14); color: var(--gold);     border: 1px solid rgba(251,191,36,.25); }

.btn-see-all {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 36px;
    background: rgba(124,58,237,.14);
    border: 1.5px solid rgba(124,58,237,.40);
    color: var(--violet-l); border-radius: 50px; font-size: 15px; font-weight: 700;
    text-decoration: none; transition: var(--transition);
}
.btn-see-all:hover { background: rgba(124,58,237,.25); color: #fff; box-shadow: var(--gv); transform: translateY(-2px); }

/* ══════════════════════════════════════════
   MENTORS FULL PAGE
══════════════════════════════════════════ */
.mentors-hero {
    padding: 110px 0 60px; position: relative; z-index: 1;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(124,58,237,.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 30%, rgba(0,212,255,.14) 0%, transparent 55%),
        linear-gradient(170deg, #08010F 0%, #0E0422 60%, #060B18 100%);
}

/* Category filter tabs */
.mentor-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.filter-btn {
    padding: 10px 22px; border-radius: 50px; font-size: 14px; font-weight: 700;
    border: 1.5px solid rgba(124,58,237,.25); background: rgba(124,58,237,.08);
    color: var(--muted); cursor: pointer; transition: var(--transition);
    font-family: var(--font);
}
.filter-btn:hover { border-color: rgba(124,58,237,.50); color: var(--violet-l); background: rgba(124,58,237,.15); }
.filter-btn.active { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: var(--gv); }

/* Category section header */
.cat-header {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 0; margin-bottom: 28px;
    border-bottom: 1px solid rgba(124,58,237,.18);
}
.cat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cat-title-text { font-size: 19px; font-weight: 800; color: #fff; }
.cat-count { font-size: 14px; color: var(--muted); margin-left: auto; }

/* Full mentor card */
.mentor-full-card {
    background: rgba(12,5,28,.78); border: 1px solid rgba(124,58,237,.20);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: var(--transition); position: relative;
    backdrop-filter: blur(14px); display: flex; flex-direction: column;
}
.mentor-full-card:hover { transform: translateY(-6px); border-color: rgba(124,58,237,.45); box-shadow: var(--gv); }

.mfc-photo-wrap { position: relative; padding-top: 100%; overflow: hidden; background: rgba(124,58,237,.10); flex-shrink: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.mfc-photo-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mfc-photo-wrap .mfc-no-photo {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(0,212,255,.15));
}
.mfc-photo-wrap .mfc-no-photo i { font-size: 40px; color: rgba(196,181,253,.5); }
.mfc-cat-badge {
    position: absolute; top: 12px; right: 12px;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 50px;
    backdrop-filter: blur(8px);
    max-width: calc(100% - 16px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mfc-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.mfc-name  { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 5px; line-height: 1.3; }
.mfc-title { font-size: 14px; color: var(--muted); margin-bottom: 12px; line-height: 1.45; }
.mfc-desc  { font-size: 14px; color: #CEC9E8; line-height: 1.62; flex: 1; margin-bottom: 16px; }
.mfc-link  {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600; color: var(--violet-l);
    text-decoration: none; transition: var(--transition); margin-top: auto;
}
.mfc-link:hover { color: var(--cyan); }
.mfc-link i { font-size: 13px; }

/* Ekspert big card */
.mfc-ekspert { border-color: rgba(251,191,36,.28); }
.mfc-ekspert:hover { border-color: rgba(251,191,36,.55); box-shadow: 0 0 50px rgba(251,191,36,.18); }
.mfc-ekspert .mfc-photo-wrap { background: rgba(251,191,36,.08); }

/* zahira section – slightly dimmed */
.zahira-section .mentor-full-card { border-color: rgba(255,255,255,.10); opacity: .85; }
.zahira-section .mentor-full-card:hover { opacity: 1; border-color: rgba(124,58,237,.35); }

/* back link */
.back-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: var(--muted);
    text-decoration: none; transition: var(--transition); margin-bottom: 32px;
}
.back-link:hover { color: var(--violet-l); }
.back-link i { font-size: 13px; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .stats-inner { padding: 28px 24px; }
    .stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(124,58,237,.15); padding-top: 22px; margin-top: 22px; }
    .process-step:not(:last-child)::after { display: none; }
    .section { padding: 76px 0; }
    .hero-visual { margin-top: 50px; }

    /* Ekspert strip: 3 per row → 3+2 */
    .ekspert-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767.98px) {
    .hero-section { padding-bottom: 56px; }
    .stats-inner  { margin-top: -20px; }
    .reward-stats { gap: 28px; }
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn-hero-primary, .btn-hero-secondary { justify-content: center; }
}

/* ══════════════════════════════════════════
   NAVBAR — mobile responsive fix
══════════════════════════════════════════ */

/* 640px: subtitle hidden, icon smaller, button compact */
@media (max-width: 640px) {
    .nav-inner              { padding: 12px 0; }
    .nav-logo               { gap: 10px; }
    .nav-logo-icon          { width: 36px; height: 36px; border-radius: 10px; }
    .nav-logo-icon i        { font-size: 16px; }
    .nav-logo-text span     { display: none; }              /* hide subtitle */
    .nav-logo-text strong   { font-size: 14px; letter-spacing: -.1px; }

    /* Button: always single line, minimum 15px */
    .nav-cta {
        padding: 10px 18px;
        font-size: 15px;
        gap: 6px;
        white-space: nowrap;
        letter-spacing: 0;
    }
    .nav-cta i { font-size: 14px; }

    /* Hero section: compensate for shorter nav */
    .hero-section { padding-top: 72px; }
}

/* 480px: logo text fully hidden — icon only stays */
@media (max-width: 480px) {
    .nav-logo-text { display: none; }
    /* Button stays at 14px, just tighter padding */
    .nav-cta { padding: 9px 14px; }
}

/* 400px: icon + button fits comfortably */
@media (max-width: 400px) {
    .nav-inner { padding: 10px 0; }
    .nav-cta   { padding: 9px 14px; font-size: 15px; }
}

/* ═══ 400px: mentor preview cards extra compact ═══ */
@media (max-width: 400px) {
    .mp-name  { font-size: 13px; }
    .mp-title { font-size: 11px; }
    .mp-cat   { font-size: 10px; padding: 2px 8px; }
    .mp-body  { padding: 10px; }
}

/* ══════════════════════════════════════════
   SECTIONS — small screen adjustments
   (all font sizes ≥ 14px)
══════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .section              { padding: 56px 0; }
    .hero-card            { padding: 22px; }
    .direction-card,
    .category-card        { padding: 28px 20px; }

    /* Stats box compact */
    .stat-item + .stat-item { border-top: none; margin-top: 0; padding-top: 0; }
    .stats-inner          { padding: 20px 16px; }
    .stat-label           { font-size: 14px; }

    /* Reward section */
    .reward-section       { padding: 72px 0; }
    .reward-title         { letter-spacing: -.8px; }
    .reward-stats         { gap: 20px; }
    .reward-stat-label    { font-size: 14px; }
    .btn-reward           { padding: 14px 28px; font-size: 15px; }

    /* Footer */
    .footer-links         { flex-wrap: wrap; gap: 14px 20px; }
    .footer-copy          { font-size: 14px; }
    .footer-logo-text     { font-size: 14px; }

    /* Timeline cards */
    .tl-date              { font-size: 14px; }
    .tl-desc              { font-size: 14px; }
    .tl-pill              { font-size: 14px; padding: 4px 10px; }

    /* Ekspert strip: 2 per row → 2+2+1 */
    .ekspert-strip      { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .ekspert-name       { font-size: 15px; }
    .ekspert-role       { font-size: 14px; }

    /* Landing page – mentor preview cards (col-6 → compact) */
    .mp-photo           { padding-top: 100%; }
    .mp-body            { padding: 12px; }
    .mp-name            { font-size: 14px; margin-bottom: 4px; }
    .mp-title           { font-size: 12px; margin-bottom: 8px; line-height: 1.4; }
    .mp-cat             { font-size: 11px; padding: 3px 10px; }

    /* Mentors page – full cards: 1 column on xs */
    .mentor-card-wrap   { width: 100% !important; }
    .mfc-photo-wrap     { padding-top: 55%; }
    .mfc-body           { padding: 16px 18px 18px; }
    .mfc-cat-badge      { font-size: 10px; padding: 3px 8px; }
    .mfc-name           { font-size: 15px; }
    .mfc-title          { font-size: 13px; }
    .mfc-desc           { font-size: 13px; }

    /* Mentors page filter tabs */
    .filter-btn         { padding: 8px 16px; font-size: 13px; }
    .cat-title-text     { font-size: 16px; }

    /* Section tags stay readable */
    .section-tag          { font-size: 14px; padding: 5px 14px; }
    .section-title        { letter-spacing: -.8px; }

    /* Hero stage items */
    .hero-stage-info strong { font-size: 14px; }
    .hero-stage-info span   { font-size: 14px; }
    .hero-stage-badge       { font-size: 14px; padding: 4px 10px; }

    /* Direction / mentor / category card text */
    .direction-desc       { font-size: 14px; }
    .direction-count      { font-size: 14px; }
    .mentor-desc          { font-size: 14px; }
    .category-desc        { font-size: 14px; }
    .score-desc           { font-size: 14px; }
    .process-desc         { font-size: 14px; }
}

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ══════════════════════════════════════════
   THEMED FLOATING ICONS (Robot, Drone, etc.)
   Fix: no CSS vars in filter/keyframes —
   browsers don't resolve them reliably there.
══════════════════════════════════════════ */
.themed-icons {
    position: fixed; inset: 0;
    z-index: 2;              /* above canvas (z:0) but below nav (z:1000) */
    pointer-events: none;
}
.ti {
    position: absolute;
    animation-name: tiFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-duration: var(--dur, 14s);
    animation-delay:    var(--del, 0s);
}
.ti svg {
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
}

/* ── 4 float variants — X+Y translate + lean (organic movement) ── */
@keyframes tiFloat {
    0%,100% { transform: translate(0px,0px)    rotate(-1.5deg); }
    30%     { transform: translate(5px,-13px)  rotate(2.5deg);  }
    70%     { transform: translate(-4px,-21px) rotate(-1deg);   }
}
@keyframes tiFloat2 {
    0%,100% { transform: translate(0px,0px)    rotate(4deg);  }
    25%     { transform: translate(-6px,-17px) rotate(-2deg); }
    65%     { transform: translate(4px,-24px)  rotate(5deg);  }
}
@keyframes tiFloat3 {
    0%,100% { transform: translate(0px,0px)    rotate(-5deg); }
    40%     { transform: translate(6px,-11px)  rotate(3deg);  }
    80%     { transform: translate(-5px,-20px) rotate(-3deg); }
}
@keyframes tiFloat4 {
    0%,100% { transform: translate(0px,0px)    rotate(2deg);  }
    35%     { transform: translate(-5px,-22px) rotate(-5deg); }
    65%     { transform: translate(6px,-14px)  rotate(4deg);  }
}
/* Drone: body tilts into direction of movement */
@keyframes droneHover {
    0%,100% { transform: translate(0px,0px)    rotate(0deg)  skewX(0deg); }
    20%     { transform: translate(5px,-10px)  rotate(4deg)  skewX(1.5deg); }
    50%     { transform: translate(-3px,-22px) rotate(-3deg) skewX(-1deg); }
    80%     { transform: translate(4px,-12px)  rotate(2deg)  skewX(.8deg); }
}
/* Robot arm: slight jitter like real servo hold */
@keyframes armJitter {
    0%,100% { transform: translate(0px,0px) rotate(-2deg); }
    33%     { transform: translate(2px,-12px) rotate(1.5deg); }
    55%     { transform: translate(-1px,-18px) rotate(-1deg); }
    80%     { transform: translate(3px,-10px) rotate(2deg); }
}
/* Rocket: gyroscopic drift */
@keyframes rocketDrift {
    0%,100% { transform: translate(0px,0px)   rotate(0deg); }
    25%     { transform: translate(-4px,-16px) rotate(-3deg); }
    60%     { transform: translate(3px,-24px)  rotate(2deg); }
    85%     { transform: translate(-2px,-14px) rotate(-1deg); }
}
/* Satellite: slow tumble */
@keyframes satTumble {
    0%,100% { transform: translate(0px,0px)   rotate(-6deg); }
    30%     { transform: translate(4px,-10px)  rotate(5deg); }
    70%     { transform: translate(-3px,-16px) rotate(-4deg); }
}

/* ── Per-type: opacity + glow (plain values, no var()) ── */
.ti-drone  { opacity:.40; filter: drop-shadow(0 0 14px rgba(0,212,255,.80)); }
.ti-robot  { opacity:.36; filter: drop-shadow(0 0 14px rgba(124,58,237,.80)); }
.ti-sat    { opacity:.34; filter: drop-shadow(0 0 12px rgba(244,114,182,.75)); }
.ti-rocket { opacity:.42; filter: drop-shadow(0 0 14px rgba(251,191,36,.85)); }
.ti-pcb    { opacity:.36; filter: drop-shadow(0 0 12px rgba(52,211,153,.75)); }
.ti-gear   { opacity:.32; filter: drop-shadow(0 0 12px rgba(196,181,253,.75)); }
.ti-3dp    { opacity:.32; filter: drop-shadow(0 0 12px rgba(196,181,253,.70)); }

/* ── PCB LEDs ── */
.ti-pcb .led-g { animation: ledBlink 2s ease-in-out infinite; }
.ti-pcb .led-b { animation: ledBlink 2.8s ease-in-out .4s infinite; }
@keyframes ledBlink { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── Robot eyes ── */
.ti-robot .eye { animation: eyeScan 3.5s ease-in-out infinite; }
@keyframes eyeScan { 0%,85%,100%{opacity:1} 42%{opacity:.1} }

/* ── Rocket flame ── */
.ti-rocket .flame { animation: flameFlic .9s ease-in-out infinite alternate; }
@keyframes flameFlic { from{opacity:.55; transform:scaleY(.9)} to{opacity:1; transform:scaleY(1.15)} }

/* ── 3D printer hot tip ── */
.ti-3dp .hot { animation: hotGlow 1.8s ease-in-out infinite alternate; }
@keyframes hotGlow { from{opacity:.5} to{opacity:1} }

/* ── Satellite dish pulse ── */
.ti-sat .dish-dot { animation: dishPulse 3s ease-in-out infinite; }
@keyframes dishPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ── Hide on mobile ── */
@media (max-width: 767.98px) { .themed-icons { display: none; } }

/* ══════════════════════════════════════════
   SVG PREMIUM DECORATIONS
══════════════════════════════════════════ */

/* ─── Global floating tech particles ─── */
.tech-particles {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.tp {
    position: absolute;
    animation: tpFloat var(--d, 22s) ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes tpFloat {
    0%   { opacity: 0;          transform: translateY(0)    rotate(0deg)          scale(1); }
    12%  { opacity: var(--op, .3); }
    88%  { opacity: var(--op, .3); }
    100% { opacity: 0; transform: translateY(var(--ty,-60px)) rotate(var(--rt,20deg)) scale(var(--sc,.9)); }
}

/* ─── Hero circuit board art ─── */
.hero-circuit-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    opacity: .28;
}

/* ─── Hero orbit rings ─── */
.hero-visual { position: relative; }
.hero-visual .hero-card { position: relative; z-index: 2; }
.hero-orbit-deco {
    position: absolute; inset: -80px -100px;
    z-index: 1; pointer-events: none;
}
.hero-orbit-deco svg { width: 100%; height: 100%; overflow: visible; }

/* ─── Direction card bg art ─── */
.dir-art {
    position: absolute; bottom: -10px; right: -10px;
    width: 150px; height: 150px;
    z-index: 0; pointer-events: none; opacity: .12;
}
.direction-card { overflow: hidden; }

/* ─── Reward section orbit decorations ─── */
.reward-orbit-l { position: absolute; left: -200px; top: 50%; transform: translateY(-50%); width: 480px; height: 480px; z-index: 0; pointer-events: none; opacity: .22; }
.reward-orbit-r { position: absolute; right: -200px; top: 50%; transform: translateY(-50%); width: 380px; height: 380px; z-index: 0; pointer-events: none; opacity: .18; }

/* ─── Section backgrounds: subtle dot grid ─── */
.section-bg, .section-bg2, .section-bg3 {
    background-image: radial-gradient(rgba(124,58,237,.07) 1px, transparent 1px);
    background-size: 38px 38px;
}

/* ─── DNA/Pipeline SVG connector between bosqich cards ─── */
.bosqich-connector {
    position: absolute; left: 50%; top: 0; bottom: 0;
    transform: translateX(-50%); width: 100%;
    pointer-events: none; z-index: 0;
}

/* Smooth SMIL pulse opacity */
@keyframes glowPulse { 0%,100%{opacity:.15} 50%{opacity:.55} }

/* ─── Floating asteroid-ring decorations ─── */
.astro-ring {
    position: absolute; z-index: 0; pointer-events: none;
    animation: astroSpin var(--spd, 30s) linear infinite;
}
@keyframes astroSpin { to { transform: rotate(360deg); } }

/* ─── CTA stars field ─── */
.cta-starfield {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}

/* Mobile: hide heavy decorations */
@media (max-width: 767.98px) {
    .hero-circuit-svg { opacity: .12; }
    .hero-orbit-deco  { display: none; }
    .reward-orbit-l, .reward-orbit-r { display: none; }
    .dir-art { display: none; }
}