/* ============================================================
   LASHSEGWAY28 — Design System v2
   lashsegway28.com · primary #BFFF00
   ============================================================ */

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

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

:root {
    --surface:          #0a0a0a;
    --surface-lowest:   #060606;
    --surface-low:      #0f0f0f;
    --surface-mid:      #141414;
    --surface-container:#1a1a1a;
    --on-surface:       #ececec;
    --on-surface-2:     rgba(236,236,236,0.6);
    --on-surface-3:     rgba(236,236,236,0.35);
    --primary:          #BFFF00;
    --on-primary:       #0a1200;
    --primary-dim:      #a8e600;
    --primary-muted:    rgba(191,255,0,0.12);
    --primary-border:   rgba(191,255,0,0.2);
    --primary-glow:     rgba(191,255,0,0.15);
    --border:           rgba(255,255,255,0.07);
    --border-strong:    rgba(255,255,255,0.12);
    --error:            #ff5f5f;
    --max-w:            1440px;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Manrope', system-ui, sans-serif;
    background-color: var(--surface);
    color: var(--on-surface);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent any child from breaking layout width */
section, header, footer, nav { max-width: 100vw; overflow-x: clip; }

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--surface-lowest); }
::-webkit-scrollbar-thumb { background: rgba(191,255,0,0.25); border-radius: 2px; }

/* ── MAX WIDTH CONTAINER ────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 768px) {
    .container { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 1280px) {
    .container { padding-left: 4rem; padding-right: 4rem; }
}

/* ── NOISE TEXTURE ──────────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ── PRELOADER ──────────────────────────────────────────────── */
#preloader { transition: opacity 0.7s ease, visibility 0.7s ease; }
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    letter-spacing: -0.03em;
    animation: pl-pulse 1.1s ease infinite alternate;
}
@keyframes pl-pulse {
    from { opacity: 0.5; letter-spacing: -0.04em; }
    to   { opacity: 1;   letter-spacing: -0.02em; }
}
.preloader-bar-track {
    background: rgba(191,255,0,0.06);
    border: 1px solid rgba(191,255,0,0.1);
}
#preloader-bar {
    background: linear-gradient(90deg, #a8e600, #BFFF00, #d4ff4d);
    box-shadow: 0 0 16px rgba(191,255,0,0.7);
    transition: width 0.08s linear;
}
.preloader-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0;
    animation: pf linear infinite;
}
@keyframes pf {
    0%   { transform: translateY(110vh); opacity: 0; }
    8%   { opacity: 0.5; }
    92%  { opacity: 0.3; }
    100% { transform: translateY(-10vh); opacity: 0; }
}

/* ── GLASS ──────────────────────────────────────────────────── */
.glass {
    background: rgba(255,255,255,0.025);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
}
.glass-strong {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid var(--border-strong);
}

/* ── GLOW ───────────────────────────────────────────────────── */
.glow   { box-shadow: 0 0 24px rgba(191,255,0,0.08), 0 0 60px rgba(191,255,0,0.03); }
.glow-s { box-shadow: 0 0 20px rgba(191,255,0,0.07), 0 0 50px rgba(191,255,0,0.03); }
.text-glow { text-shadow: 0 0 24px rgba(191,255,0,0.55), 0 0 48px rgba(191,255,0,0.25); }
.text-glow-s { text-shadow: 0 0 32px rgba(191,255,0,0.35); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.btn:active { transform: scale(0.97) !important; }

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    animation: cta-pulse 2.8s ease infinite;
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
    pointer-events: none;
}
.btn-primary:hover {
    background: var(--primary-dim);
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(191,255,0,0.45);
    animation: none;
}
@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(191,255,0,0.45); }
    50%       { box-shadow: 0 0 0 10px rgba(191,255,0,0); }
}

.btn-ghost {
    background: transparent;
    color: var(--on-surface);
    border: 1px solid rgba(255,255,255,0.13);
}
.btn-ghost:hover {
    border-color: rgba(191,255,0,0.35);
    background: rgba(191,255,0,0.05);
    transform: translateY(-2px);
}

.btn-kick {
    background: var(--primary);
    color: var(--on-primary);
}
.btn-kick:hover {
    background: var(--primary-dim);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(191,255,0,0.38);
}

.btn-fb {
    background: rgba(24,119,242,0.1);
    color: var(--on-surface);
    border: 1px solid rgba(24,119,242,0.25);
}
.btn-fb:hover {
    background: rgba(24,119,242,0.2);
    transform: translateY(-2px);
}

/* ── NAV ────────────────────────────────────────────────────── */
.nav-link {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-2);
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
    transition: color 0.2s;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 1.5px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.22s ease;
    transform-origin: left;
    border-radius: 1px;
}
.nav-link:hover         { color: var(--on-surface); }
.nav-link:hover::after  { transform: scaleX(1); }
.nav-link.active        { color: var(--primary); }
.nav-link.active::after { transform: scaleX(1); }

/* Mobile menu */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.28s ease;
    opacity: 0;
}
#mobile-menu.open { max-height: 360px; opacity: 1; }

/* ── HEX BG ─────────────────────────────────────────────────── */
.hex-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0L30 8.66 45 0l15 8.66V26L45 34.64l-15 8.66-15-8.66L0 26V8.66z' fill='none' stroke='rgba(191,255,0,0.03)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 52px;
}

/* ── FLOATING SVGs ──────────────────────────────────────────── */
.floating-svg-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.float-svg {
    position: absolute;
    opacity: 0;
    animation: svg-in 1.2s ease forwards, svg-float linear infinite;
    filter: drop-shadow(0 0 6px rgba(191,255,0,0.2));
    will-change: transform;
}
@keyframes svg-in {
    from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
    to   { opacity: var(--fo, 0.13); transform: scale(1) rotate(0deg); }
}
@keyframes svg-float {
    0%   { transform: translateY(0) rotate(var(--r0, 0deg)); }
    33%  { transform: translateY(-12px) rotate(var(--r1, 4deg)); }
    66%  { transform: translateY(-5px) rotate(var(--r2, -3deg)); }
    100% { transform: translateY(0) rotate(var(--r0, 0deg)); }
}
.fsv-1  { top:7%;  left:2%;   width:50px; --fo:.12; --r0:-6deg;  --r1:3deg;  --r2:-9deg;  animation-duration:1.2s,8s;  animation-delay:.3s,.3s;  }
.fsv-2  { top:20%; left:7%;   width:36px; --fo:.10; --r0:10deg;  --r1:-5deg; --r2:14deg;  animation-duration:1.2s,10s; animation-delay:.8s,.8s;  }
.fsv-3  { top:58%; left:1%;   width:42px; --fo:.09; --r0:-3deg;  --r1:7deg;  --r2:-6deg;  animation-duration:1.2s,12s; animation-delay:1.2s,1.2s;}
.fsv-4  { top:78%; left:11%;  width:30px; --fo:.13; --r0:5deg;   --r1:-9deg; --r2:11deg;  animation-duration:1.2s,9s;  animation-delay:.5s,.5s;  }
.fsv-5  { top:8%;  right:6%;  width:46px; --fo:.12; --r0:9deg;   --r1:-3deg; --r2:13deg;  animation-duration:1.2s,11s; animation-delay:.6s,.6s;  }
.fsv-6  { top:33%; right:2%;  width:34px; --fo:.10; --r0:-5deg;  --r1:11deg; --r2:-8deg;  animation-duration:1.2s,13s; animation-delay:1.0s,1.0s;}
.fsv-7  { top:63%; right:5%;  width:40px; --fo:.13; --r0:7deg;   --r1:-12deg;--r2:4deg;   animation-duration:1.2s,7s;  animation-delay:.4s,.4s;  }
.fsv-8  { top:82%; right:14%; width:26px; --fo:.09; --r0:-11deg; --r1:5deg;  --r2:-5deg;  animation-duration:1.2s,14s; animation-delay:1.5s,1.5s;}
.fsv-9  { top:44%; left:4%;   width:28px; --fo:.07; --r0:18deg;  --r1:-7deg; --r2:10deg;  animation-duration:1.2s,16s; animation-delay:2.0s,2.0s;}
.fsv-10 { top:14%; right:21%; width:20px; --fo:.10; --r0:-13deg; --r1:9deg;  --r2:-4deg;  animation-duration:1.2s,15s; animation-delay:1.8s,1.8s;}
.fsv-11 { top:90%; left:23%;  width:32px; --fo:.08; --r0:4deg;   --r1:-10deg;--r2:7deg;   animation-duration:1.2s,17s; animation-delay:2.2s,2.2s;}
.fsv-12 { top:48%; right:19%; width:24px; --fo:.09; --r0:-8deg;  --r1:14deg; --r2:-3deg;  animation-duration:1.2s,18s; animation-delay:2.5s,2.5s;}

/* ── HERO ───────────────────────────────────────────────────── */
.hero-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.045em;
}
.hw-ultimate { color: #ffffff; }
.hw-stake    { color: transparent; -webkit-text-stroke: 1.5px rgba(236,236,236,0.28); }
.hw-rewards  { color: var(--primary); font-style: italic; }

/* Verified badge */
.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(191,255,0,0.07);
    border: 1px solid rgba(191,255,0,0.18);
    border-radius: 100px;
    padding: 0.28rem 0.7rem;
}
.badge-dot {
    width: 5px; height: 5px;
    background: var(--primary);
    border-radius: 50%;
    animation: dot-pulse 1.6s ease infinite;
}
@keyframes dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(191,255,0,0.55); }
    50%       { opacity: 0.7; box-shadow: 0 0 0 4px rgba(191,255,0,0); }
}

/* Offer card */
.offer-card {
    background: rgba(191,255,0,0.025);
    border: 1px solid rgba(191,255,0,0.18);
    border-top: 2px solid rgba(191,255,0,0.45);
    border-radius: 16px;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
}

/* Promo pill */
.promo-pill {
    background: rgba(6,6,6,0.9);
    border: 1px solid rgba(191,255,0,0.22);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.promo-pill:hover { border-color: rgba(191,255,0,0.5); background: rgba(191,255,0,0.05); }
.promo-code { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 1.2rem; color: var(--primary); letter-spacing: 0.18em; }
.copy-hint  { color: rgba(191,255,0,0.55); font-size: 0.7rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 0.3rem; transition: color 0.2s; }
.promo-pill:hover .copy-hint { color: var(--primary); }

/* Countdown */
.cd-num   { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 1.875rem; color: var(--primary); line-height: 1; display: block; }
.cd-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.575rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-surface-3); margin-top: 0.2rem; display: block; }
.cd-sep   { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 1.4rem; color: rgba(191,255,0,0.35); padding-bottom: 0.5rem; }

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
    opacity: 0;
    transform: scale(0.93);
    transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

.stagger > *:nth-child(1)  { transition-delay: 0.04s; }
.stagger > *:nth-child(2)  { transition-delay: 0.11s; }
.stagger > *:nth-child(3)  { transition-delay: 0.18s; }
.stagger > *:nth-child(4)  { transition-delay: 0.25s; }
.stagger > *:nth-child(5)  { transition-delay: 0.32s; }
.stagger > *:nth-child(6)  { transition-delay: 0.39s; }

/* ── SECTION TYPOGRAPHY ─────────────────────────────────────── */
.eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.75;
}
.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--on-surface);
    line-height: 1.05;
}

/* ── LEADERBOARD ────────────────────────────────────────────── */
.podium-card {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}
.podium-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--pc, rgba(255,255,255,0.08));
}
.podium-card:hover { transform: translateY(-7px); box-shadow: 0 20px 56px rgba(0,0,0,0.4); }
.podium-card.r1 { --pc: var(--primary); }
.podium-card.r2 { --pc: #8888a0; }
.podium-card.r3 { --pc: #a06030; }

.podium-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800; font-size: 1.15rem;
    text-transform: uppercase;
    margin: 0 auto;
}
.av1 { background: rgba(191,255,0,0.12); color: var(--primary); border: 1.5px solid rgba(191,255,0,0.35); }
.av2 { background: rgba(136,136,160,0.1); color: #9090aa; border: 1.5px solid rgba(136,136,160,0.2); }
.av3 { background: rgba(160,96,48,0.1);   color: #b07040; border: 1.5px solid rgba(160,96,48,0.2); }

.rank-pip {
    font-family: 'Geist Mono', monospace;
    font-weight: 700; font-size: 0.65rem;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
.rp1 { background: rgba(191,255,0,0.1); color: var(--primary); border: 1px solid rgba(191,255,0,0.18); }
.rp2 { background: rgba(136,136,160,0.07); color: #8888a0; border: 1px solid rgba(136,136,160,0.14); }
.rp3 { background: rgba(160,96,48,0.07); color: #a06030; border: 1px solid rgba(160,96,48,0.14); }

.crown { font-size: 1.35rem; animation: crown-bob 3s ease infinite alternate; filter: drop-shadow(0 0 6px rgba(191,255,0,0.45)); }
@keyframes crown-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }

.lb-row { border-bottom: 1px solid rgba(255,255,255,0.035); transition: background 0.18s; }
.lb-row:hover { background: rgba(255,255,255,0.02); }
.lb-row:last-child { border-bottom: none; }

.st-verified { color: #BFFF00; background: rgba(191,255,0,0.07); border: 1px solid rgba(191,255,0,0.17); }
.st-pending  { color: #f5a623; background: rgba(245,166,35,0.07); border: 1px solid rgba(245,166,35,0.17); }

/* ── BENEFITS — BENTO GRID ──────────────────────────────────── */
.bento-grid {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: 1fr;
    align-items: stretch;
}
@media (min-width: 640px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(12, 1fr);
        align-items: stretch;
    }
    /* Row 1: featured (8) + reload (4) */
    .bento-a { grid-column: span 8; }
    .bento-b { grid-column: span 4; }
    /* Row 2: three equal cards (4+4+4) */
    .bento-c { grid-column: span 4; }
    .bento-d { grid-column: span 4; }
    .bento-f { grid-column: span 4; }
    /* Row 3: leaderboard full-width */
    .bento-e { grid-column: span 12; }
}

.bento-card {
    border-radius: 14px;
    padding: 1.75rem;
    border: 1px solid rgba(255,255,255,0.055);
    background: rgba(255,255,255,0.018);
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}
.bento-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at top left, rgba(191,255,0,0.04) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.bento-card:hover { transform: translateY(-5px); border-color: rgba(191,255,0,0.18); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.bento-card:hover::before { opacity: 1; }

/* Featured card (rakeback) */
.bento-card.featured {
    background: rgba(191,255,0,0.03);
    border-color: rgba(191,255,0,0.14);
    background-image: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(191,255,0,0.05) 0%, transparent 70%);
}
.bento-card.featured .bento-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

.bento-icon {
    width: 40px; height: 40px;
    background: rgba(191,255,0,0.07);
    border: 1px solid rgba(191,255,0,0.12);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 1.25rem;
    transition: background 0.2s, box-shadow 0.2s;
}
.bento-card:hover .bento-icon { background: rgba(191,255,0,0.12); box-shadow: 0 0 14px rgba(191,255,0,0.18); }

.bento-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--on-surface);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.bento-body {
    font-family: 'Manrope', sans-serif;
    font-size: 0.8125rem;
    color: var(--on-surface-2);
    line-height: 1.65;
}

/* ── HOW TO CLAIM — CIRCLES ─────────────────────────────────── */
.steps-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
}
@media (min-width: 768px) {
    .steps-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 0 0;
    }
    /* Single dashed line behind all 4 circles */
    .steps-row::before {
        content: '';
        position: absolute;
        top: 22px; /* half of 44px circle */
        left: 12.5%;
        right: 12.5%;
        border-top: 1.5px dashed rgba(191,255,0,0.22);
        pointer-events: none;
    }
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.75rem;
}

.step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(191,255,0,0.4);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--primary);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin-bottom: 1.1rem;
    transition: background 0.2s, box-shadow 0.2s;
}
.step-item:hover .step-circle {
    background: rgba(191,255,0,0.08);
    box-shadow: 0 0 16px rgba(191,255,0,0.25);
}

.step-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--on-surface);
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}
.step-body {
    font-family: 'Manrope', sans-serif;
    font-size: 0.8rem;
    color: var(--on-surface-2);
    line-height: 1.65;
    max-width: 180px;
}

/* ── KICK SECTION ───────────────────────────────────────────── */
.kick-section {
    background: var(--surface-low);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.kick-section::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
}
.kick-section::after {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse 40% 100% at 0% 50%, rgba(191,255,0,0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* ── KICK LIVE GRID ─────────────────────────────────────────── */
.kick-live-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
}
@media (min-width: 900px) {
    .kick-live-grid {
        grid-template-columns: 260px 1fr;
        align-items: stretch;
    }
}

/* Gifters panel */
.kick-gifters-panel {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    min-height: 340px;
}
.kick-gifters-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.kick-gifters-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(236,236,236,0.6);
    text-align: center;
    flex: 1;
}
.kick-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: rgba(236,236,236,0.5);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.kick-nav-btn:hover {
    border-color: rgba(191,255,0,0.3);
    color: #BFFF00;
    background: rgba(191,255,0,0.05);
}
.kick-gifters-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}
.kick-gifters-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.kick-gifters-loading,
.kick-gifters-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    text-align: center;
    padding: 1rem;
}
.kick-gifters-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kick-gifter-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.15s;
}
.kick-gifter-row:last-child { border-bottom: none; }
.kick-gifter-row:hover { background: rgba(191,255,0,0.03); }
.kick-gifter-rank {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kick-gifter-name {
    flex: 1;
    min-width: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kick-gifter-qty {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Geist Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(191,255,0,0.7);
    flex-shrink: 0;
}

/* Stream embed */
.kick-stream-wrap {
    position: relative;
    padding-top: 56.25%;
    background: #060606;
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
}
.kick-offline-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #060606;
    z-index: 10;
    overflow: hidden;
}
.kick-offline-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0.55;
}
.kick-offline-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0.75) 100%);
}
.kick-offline-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
}

/* ── STAT PILL ──────────────────────────────────────────────── */
.stat-pill {
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--primary);
    background: rgba(191,255,0,0.07);
    border: 1px solid rgba(191,255,0,0.13);
    border-radius: 6px;
    padding: 0.28rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

/* ── PRIZE COUNTER ──────────────────────────────────────────── */
@keyframes count-up {
    from { opacity: 0.2; filter: blur(3px); transform: translateY(3px); }
    to   { opacity: 1;   filter: blur(0);   transform: translateY(0); }
}
.counter-animate { animation: count-up 0.38s ease forwards; }

/* ── ADMIN INPUTS ─────────────────────────────────────────────*/
.admin-input {
    background: #060606 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: #ececec !important;
    box-shadow: none !important;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    width: 100%;
    outline: none;
    transition: border-color 0.2s !important;
}
.admin-input:focus { border-color: rgba(191,255,0,0.4) !important; }
.admin-input::placeholder { color: rgba(236,236,236,0.2) !important; }

.admin-select {
    background: #060606 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: #ececec !important;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.2s !important;
    cursor: pointer;
}
.admin-select:focus { border-color: rgba(191,255,0,0.4) !important; }
.admin-select option { background: #111; }

/* ── FOOTER ─────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); }

/* ── RESPONSIVE HELPERS ─────────────────────────────────────── */
@media (max-width: 767px) {
    .float-svg { display: none; }
    .fsv-1, .fsv-2, .fsv-5, .fsv-7 { display: block; }
    .hero-headline { font-size: clamp(3.25rem, 13vw, 5rem) !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-headline { font-size: clamp(4.5rem, 9vw, 7rem) !important; }
}
@media (min-width: 1024px) {
    .hero-headline { font-size: clamp(5.5rem, 8vw, 9rem) !important; }
}