/* ============================================================
   NEXOLLY - COMPLETE STYLES (Mobile-First + Tablet + Desktop)
   Version: 2.3 | Video Hero + Dark Overlay
   ============================================================ */

:root {
    /* Nexolly permanent light+green identity (2026-08-22).
       This was the ORIGINAL dark/gold palette (--bg-primary: #0A0A0A,
       --gold-primary: #16A34A, --text-primary: #FFFFFF, etc). It was
       never actually converted when the dashboard's light/green theme
       was built (that work only touched assets/css/design-system.css
       and the dashboard shell, which the public site/layouts/main.php
       never even loads). Any page using these var() names -- rather
       than hardcoding its own hex, as home.php/about.php/faq.php
       currently do -- now gets the correct light+green identity for
       free. Values match the token set already proven on login.php. */
    --bg-primary: #050B14;
    --bg-secondary: #08111D;
    --bg-card: #101A2A;
    --text-primary: #FFFFFF;
    --text-secondary: #A7B0C0;
    --text-muted: #748097;
    --gold-primary: #16A34A;
    --gold-secondary: #16A34A;
    --gold-dark: #2477FF;
    --blue-accent: #2477FF;
    --shadow-glow: 0 0 50px rgba(22,163,74,.18);
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Header: solid brand green (matches the hero background + PWA
       theme-color) so the header and hero sit flush with no visible
       seam, and so the fixed-height math below is exact on every
       breakpoint -- mobile and desktop share this one header. */
    --header-bg: #050B14;
    --header-bg-scrolled: #08111D;
    --nx-header-h: 64px;
}

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

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

/* ============================================================
   CRITICAL FIX: Prevent shaking and horizontal overflow
   ============================================================ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    padding-bottom: 80px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* App-wide bold pass: buttons, links, and headings read like a native
   app rather than default thin web text. */
h1, h2, h3, h4, h5, h6 { font-weight: 800 !important; }
p, li, label { font-weight: 500; }
.btn, button, a.btn { font-weight: 700; }

/* ============================================================
   SPLASH SCREEN - FIXED CENTERING
   ============================================================ */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
}
.splash-screen.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Splash Video Background */
.splash-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}
.splash-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.82);
    z-index: 1;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 100vw;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}
.splash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
    color: var(--bg-primary);
    border-radius: 50%;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 36px;
    margin-bottom: 16px;
    animation: splashPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.splash-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 12px;
    white-space: nowrap;
}
.splash-caption {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 14px;
    margin-bottom: 0;
}
.splash-loader {
    width: 120px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
    max-width: 60vw;
}
.splash-loader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-primary), var(--gold-secondary));
    border-radius: 3px;
    /* Driven by JS toward ~85% while real critical resources load, then
       jumped to 100% right before fade-out -- see main.js. No fixed
       animation duration here means it never visually "finishes" (and
       tempts someone to wait for it) before the page is actually ready. */
    transition: width 0.25s ease;
}

@keyframes splashPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(22, 163, 74, 0.2); }
}
@media (prefers-reduced-motion: reduce) {
    .splash-icon { animation: none; }
    .splash-loader-bar { transition: none; }
}

/* ============================================================
   NAVIGATION - FIXED TOGGLER ICON
   ============================================================ */
#nxHeaderStack {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    /* Slides the whole stack (announce bar + nav) up/down together --
       see the scroll handler in main.js. */
    transition: transform 0.25s ease;
}
#mainNav {
    /* Solid brand green -- same color on mobile and desktop, and the
       same seam-free color the hero slider sits on (see .nx-hero
       background), so header + hero read as one continuous band. */
    background: var(--header-bg);
    min-height: var(--nx-header-h);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: static;
    width: 100%;
    transition: var(--transition);
}

/* ============================================================
   HEADLINE TICKER
   A thin, self-contained strip above the main nav. overflow:hidden
   on the wrapper is what guarantees this can never cause horizontal
   page scroll, however long a headline is -- the track scrolls
   *inside* that fixed-width box, the box itself never grows.
   ============================================================ */
.nx-ticker {
    display: flex;
    align-items: center;
    width: 100%;
    /* This gradient only ever shows through the badge area now -- the
       track-wrap below paints its own solid black background over the
       sliding portion, so the "UPDATES" badge stays on the original
       stable green while only the moving text sits on black. */
    background: linear-gradient(90deg, #15803D, #16A34A);
    overflow: hidden;
    height: 36px;
}
.nx-ticker-badge {
    flex: 0 0 auto;
    background: rgba(0,0,0,0.18);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 4px 14px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 1;
}
.nx-ticker-track-wrap {
    flex: 1 1 auto;
    overflow: hidden;
    height: 100%;
    min-width: 0; /* required for flex children to actually shrink/clip instead of forcing overflow */
    background: #000; /* solid black behind the sliding text only */
}
.nx-ticker-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    white-space: nowrap;
    /* Slower, easier-to-read pace. The exact duration is set per
       breakpoint below -- mobile gets the slowest speed since that's
       where the old fixed duration felt rushed. */
    animation: nx-ticker-scroll 45s linear infinite;
    will-change: transform;
}
.nx-ticker-track:hover, .nx-ticker-track:focus-within {
    animation-play-state: paused; /* lets a reader actually finish reading/click a link */
}
.nx-ticker-item {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    padding: 0 6px;
}
a.nx-ticker-item:hover { text-decoration: underline; }
a.nx-ticker-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.nx-ticker-sep {
    color: rgba(255,255,255,0.65);
    padding: 0 12px;
    font-size: 11px;
}
@keyframes nx-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* content is rendered twice, so -50% is exactly one full loop */
}
@media (prefers-reduced-motion: reduce) {
    .nx-ticker-track { animation: none; }
    .nx-ticker-track-wrap { overflow-x: auto; } /* still reachable, just not auto-scrolling */
}
/* Tablet: a little slower than desktop's default 45s. */
@media (max-width: 991.98px) {
    .nx-ticker-track { animation-duration: 55s; }
}
/* Mobile: the slowest pace of all, so a headline is easy to read in
   full before it scrolls away on a narrow, close-up screen. The
   container also grows slightly to comfortably fit the larger bold
   text below, and never shrinks into the nav underneath it since the
   ticker and nav are stacked in normal flow, not overlapped. */
@media (max-width: 575.98px) {
    .nx-ticker { height: 34px; }
    .nx-ticker-badge { font-size: 10px; padding: 3px 8px; }
    .nx-ticker-item { font-size: 13px; font-weight: 700; }
    .nx-ticker-track { animation-duration: 65s; }
}

#mainNav.scrolled {
    background: var(--header-bg-scrolled);
    padding: 6px 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
}

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
    color: var(--bg-primary);
    border-radius: 50%;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}
.brand-text { color: var(--text-primary); }

/* Header-only: white badge + white wordmark on the green #mainNav bar
   (the footer's .footer-brand keeps the rule above, since the footer
   sits on a light background). */
.navbar-brand .brand-icon {
    background: #fff;
    color: var(--header-bg);
}
.navbar-brand .brand-text { color: #fff; }

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    font-size: 14px;
    padding: 8px 14px;
    transition: var(--transition);
    position: relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #fff;
}
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 2px;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}
/* "Join Free" is .btn-primary (green-on-white elsewhere on the site);
   inside the green header it needs its own white outline so it still
   reads as a button instead of blending into the bar. */
/* Phase 7: header currency switcher */
.nx-currency-switcher { display: inline-flex; margin-right: 4px; }
.nx-currency-switcher select {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.nx-currency-switcher select option { color: #14141F; }

#mainNav .btn-primary {
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55) inset;
}

.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 10px;
    border-radius: 8px;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
    color: var(--bg-primary);
    border: none;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 50px;
    transition: var(--transition);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(22, 163, 74, 0.3);
    color: var(--bg-primary);
}
.btn-primary.btn-lg { padding: 14px 36px; font-size: 16px; }
.btn-primary.btn-sm { padding: 8px 18px; font-size: 12px; }

.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    background: transparent;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.3);
}
.btn-outline-light.btn-lg { padding: 14px 36px; font-size: 16px; }

.btn-gold {
    background: linear-gradient(135deg, #16A34A, #15803D);
    color: var(--bg-primary);
    border: none;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
    transition: var(--transition);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(21, 128, 61, 0.3);
    color: var(--bg-primary);
}

.btn-outline {
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    background: transparent;
    padding: 14px 36px;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-primary);
}

/* ============================================================
   HERO SECTION — VIDEO BACKGROUND
   ============================================================ */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    padding: 120px 0 80px;
}

/* Video: perfectly centered, covers entire section */
.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

/* Dark overlay: heavy enough for crisp text */
.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(255, 255, 255, 0.78) 40%,
        rgba(255, 255, 255, 0.88) 100%
    );
    z-index: 1;
}

/* Content sits above overlay */
.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Text shadow for extra readability against video */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.2);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    color: var(--gold-primary);
    margin-bottom: 16px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}

.hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: 12px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.8);
}
.hero-title .highlight {
    background: linear-gradient(135deg, var(--gold-primary), #15803D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.8;
    max-width: 500px;
    margin: 0 auto 20px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.crypto-tag {
    display: inline-block;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.18);
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 600;
    color: var(--gold-primary);
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px 0 28px;
}
.stat-item { text-align: center; }
.stat-number {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--gold-primary);
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.hero-buttons .btn {
    width: 100%;
    max-width: 280px;
}

/* ============================================================
   MAIN INNER WRAPPER
   ============================================================ */
.main-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
    padding: 60px 0;
    width: 100%;
}
.section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    margin-bottom: 6px;
}
.section-title .highlight {
    background: linear-gradient(135deg, var(--gold-primary), #15803D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto 30px;
}

/* ============================================================
   SCROLL HINT (Mobile only)
   ============================================================ */
.scroll-hint {
    display: none;
}

/* ============================================================
   CRYPTO SHOWCASE
   ============================================================ */
.crypto-showcase { background: var(--bg-secondary); }
.crypto-scroll {
    gap: 12px;
    justify-content: flex-start;
}
.crypto-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    padding: 16px 12px;
    text-align: center;
    transition: var(--transition);
    min-width: 130px;
}
.crypto-card:hover { transform: translateY(-4px); border-color: rgba(22, 163, 74, 0.12); }
.crypto-card .crypto-icon { width: 32px; height: 32px; margin-bottom: 4px; }
.crypto-card h5 { font-size: 14px; font-weight: 600; margin-bottom: 0; }
.crypto-card .crypto-name { font-size: 11px; color: var(--text-muted); }

/* ============================================================
   OPPORTUNITY SECTION
   ============================================================ */
.opportunity-section { background: var(--bg-secondary); }

.opportunity-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}
.opportunity-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    transition: var(--transition);
}
.opportunity-item:hover { border-color: rgba(22, 163, 74, 0.08); }
.opportunity-item .opp-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: rgba(22, 163, 74, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gold-primary);
}
.opportunity-item h5 { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.opportunity-item p { font-size: 13px; color: var(--text-secondary); margin-bottom: 0; }

.opportunity-visual {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-top: 30px;
    width: 100%;
}

.earnings-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 180px;
    gap: 6px;
    width: 100%;
}
.chart-bar {
    flex: 1;
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.5), rgba(22, 163, 74, 0.15));
    border-radius: 4px 4px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 4px;
    min-height: 20px;
    transition: var(--transition);
    height: 0;
}
.chart-bar:hover { transform: scaleY(1.03); transform-origin: bottom; }
.chart-bar span { font-size: 9px; color: var(--text-secondary); }
.chart-bar .bar-value { color: var(--gold-primary); font-weight: 700; font-size: 10px; }

.chart-caption {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 12px;
    margin-bottom: 0;
}

/* ============================================================
   STEPS
   ============================================================ */
.steps-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto;
}

.step-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
    transition: var(--transition);
    min-width: 260px;
}
.step-card:hover { transform: translateY(-4px); border-color: rgba(22, 163, 74, 0.08); }

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
    color: var(--bg-primary);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border-radius: 50%;
    margin-bottom: 8px;
}

.step-card .step-icon { font-size: 28px; color: var(--gold-primary); margin-bottom: 4px; }
.step-card h4 { font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.step-card p { font-size: 13px; color: var(--text-secondary); margin-bottom: 0; }

/* ============================================================
   LEVELS
   ============================================================ */
.levels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
}

.level-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    padding: 18px 14px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    min-width: 160px;
}
.level-card:hover { transform: translateY(-4px); }
.level-card.featured {
    border-color: var(--gold-primary);
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.06), rgba(21, 128, 61, 0.02));
}
.level-card.premium { border-color: rgba(0, 207, 255, 0.12); }
.level-card.master {
    border-color: #15803D;
    background: linear-gradient(135deg, rgba(21, 128, 61, 0.04), rgba(22, 163, 74, 0.02));
}

.level-badge {
    position: absolute;
    top: -6px;
    right: 6px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 50px;
    background: var(--gold-primary);
    color: var(--bg-primary);
    white-space: nowrap;
}

.level-card .level-icon { font-size: 26px; margin-bottom: 4px; }
.level-card .level-name { font-weight: 700; font-size: 16px; }
.level-card .level-status { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.level-card .level-price { font-weight: 700; color: var(--gold-primary); font-size: 16px; }
.level-card .level-reward { font-size: 12px; color: var(--text-secondary); }
.level-card .level-days { font-size: 11px; color: var(--text-muted); }

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
    transition: var(--transition);
    min-width: 220px;
}
.feature-card:hover { transform: translateY(-4px); border-color: rgba(22, 163, 74, 0.08); }
.feature-card .feature-icon { font-size: 32px; color: var(--gold-primary); margin-bottom: 8px; }
.feature-card h4 { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.feature-card p { font-size: 13px; color: var(--text-secondary); margin-bottom: 0; }

/* ============================================================
   TRUST SECTION
   ============================================================ */
.trust-section { background: var(--bg-secondary); }

.trust-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    transition: var(--transition);
}
.trust-card:hover { transform: translateY(-4px); border-color: rgba(22, 163, 74, 0.08); }
.trust-card .trust-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 34px;
    background: linear-gradient(135deg, var(--gold-primary), #15803D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.trust-card p { font-size: 13px; color: var(--text-secondary); margin-bottom: 0; }

/* ============================================================
   TRUSTPILOT SECTION
   ============================================================ */
.trustpilot-section { background: var(--bg-secondary); }
.trustpilot-box {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    text-align: center;
    transition: var(--transition);
}
.trustpilot-box:hover {
    border-color: rgba(0, 196, 255, 0.2);
    transform: translateY(-4px);
}
.trustpilot-logo {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #00B67A;
    margin-bottom: 12px;
}
.trustpilot-stars {
    font-size: 28px;
    color: #00B67A;
    margin-bottom: 16px;
    letter-spacing: 4px;
}
.trustpilot-box h3 {
    font-weight: 700;
    margin-bottom: 8px;
}
.trustpilot-box p {
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.btn-trustpilot {
    background: #00B67A;
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-trustpilot:hover {
    background: #00a06b;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 182, 122, 0.3);
    color: #fff;
}

/* ============================================================
   PARTNERS MARQUEE
   ============================================================ */
.partners-section {
    background: var(--bg-primary);
    padding-bottom: 40px;
    overflow: hidden;
}
.partner-marquee {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 20px 0;
    width: 100%;
}
.partner-track {
    display: inline-flex;
    animation: marquee 35s linear infinite;
    gap: 60px;
    padding: 0 30px;
    will-change: transform;
}
.partner-marquee:hover .partner-track {
    animation-play-state: paused;
}
.partner-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--text-muted);
    opacity: 0.6;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.partner-item i {
    font-size: 24px;
    color: var(--gold-primary);
}
.partner-item:hover {
    opacity: 1;
    color: var(--text-primary);
    transform: scale(1.05);
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background: var(--bg-secondary); }

.faq-container {
    max-width: 600px;
    margin: 0 auto;
}

.accordion-item {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm) !important;
    margin-bottom: 10px;
    overflow: hidden;
}
.accordion-button {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 15px;
    padding: 16px 18px;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) { color: var(--gold-primary) !important; }
.accordion-button::after { filter: brightness(0) invert(1); }
.accordion-body {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    padding: 0 18px 16px;
}

/* ============================================================
   CTA
   ============================================================ */
.cta-box {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.04), rgba(21, 128, 61, 0.02));
    border: 1px solid rgba(22, 163, 74, 0.06);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
}
.cta-box h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
}
.cta-box p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding: 6px 0 env(safe-area-inset-bottom, 6px) 0;
    transition: transform 0.3s ease;
}
.bottom-nav.hidden {
    transform: translateY(100%);
}

.nav-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 500;
    padding: 4px 10px;
    transition: var(--transition);
    text-decoration: none;
}
.nav-item i { font-size: 20px; transition: var(--transition); }
.nav-item.active { color: var(--gold-primary); }
.nav-item.active i {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 12px rgba(22, 163, 74, 0.2));
}
.nav-item:hover { color: var(--text-primary); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--bg-secondary);
    padding: 30px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 20px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.footer-brand .brand-icon { width: 28px; height: 28px; font-size: 14px; }
.footer-brand .brand-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.footer-desc {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
    max-width: 300px;
}

.site-footer h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 4px; }
.site-footer ul a {
    color: var(--text-secondary);
    font-size: 13px;
    transition: var(--transition);
    text-decoration: none;
}
.site-footer ul a:hover {
    color: var(--text-primary);
    padding-left: 4px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 12px;
    margin-top: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* ============================================================
   AOS FIX: Prevent layout shift during animation
   ============================================================ */
[data-aos] {
    will-change: transform, opacity;
    pointer-events: auto;
}

/* ============================================================
   MOBILE FIXES (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
    body { padding-bottom: 80px; }
    
    .section > .container,
    .hero-section > .container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .section { padding: 40px 0; }
    
    /* Hero: full height on mobile, video stays centered */
    .hero-section {
        padding: 100px 0 60px;
        min-height: 100vh;
    }
    .hero-title { font-size: 28px; }
    .hero-stats { gap: 20px; }
    .stat-number { font-size: 22px; }
    
    /* Horizontal scroll sections on mobile */
    .slider-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 12px !important;
        padding: 8px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: none !important;
        margin: 0 !important;
    }
    .slider-mobile::-webkit-scrollbar {
        display: none !important;
    }
    .slider-mobile > * {
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        width: auto !important;
    }
    .slider-mobile > .crypto-card { min-width: 130px; }
    .slider-mobile > .step-card { min-width: 260px; }
    .slider-mobile > .level-card { min-width: 160px; }
    .slider-mobile > .feature-card { min-width: 220px; }
    
    /* Scroll hint visible only on mobile */
    .scroll-hint {
        display: block;
        text-align: center;
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 8px;
        animation: hintBounce 2s ease-in-out infinite;
    }
    .scroll-hint i {
        margin: 0 4px;
        color: var(--gold-primary);
    }
    @keyframes hintBounce {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(5px); }
    }
    
    .opportunity-visual {
        margin-top: 30px;
        padding: 20px;
        width: 100%;
    }
    .earnings-chart { height: 150px; }
    
    .cta-box { padding: 30px 20px; text-align: center; }
    .cta-box h2 { font-size: 24px; }
    
    .trustpilot-box { padding: 32px 20px; }
    
    .partner-item { font-size: 16px; gap: 8px; }
    .partner-item i { font-size: 20px; }
}

/* Hide scroll hint on tablet and desktop */
@media (min-width: 768px) {
    .scroll-hint {
        display: none !important;
    }
}

/* ============================================================
   TABLET (768px - 991px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
    .bottom-nav { display: none; }
    body { padding-bottom: 0; }

    .hero-section { min-height: 80vh; padding: 120px 0 80px; }
    .hero-title { font-size: 40px; }
    .hero-description { font-size: 16px; }
    .hero-stats { gap: 40px; }
    .stat-number { font-size: 28px; }
    .hero-buttons { flex-direction: row; }
    .hero-buttons .btn { width: auto; max-width: none; }

    .section { padding: 70px 0; }
    .section-title { font-size: 32px; }

    .crypto-scroll { justify-content: center; flex-wrap: wrap; gap: 16px; }
    .crypto-card { min-width: 0; width: 140px; }

    .steps-container { flex-direction: row; max-width: 100%; gap: 16px; }
    .step-card { min-width: 0; flex: 1; }

    .levels-grid { grid-template-columns: repeat(3, 1fr); max-width: 700px; gap: 14px; }
    .level-card { min-width: 0; }

    .features-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; gap: 16px; }
    .feature-card { min-width: 0; }

    .opportunity-visual { margin-top: 0; padding: 28px; }
    .earnings-chart { height: 200px; }

    .trust-card .trust-number { font-size: 38px; }

    .cta-box { padding: 40px 40px; text-align: left; }
    .cta-box h2 { font-size: 28px; }
}

/* ============================================================
   DESKTOP (992px+)
   ============================================================ */
@media (min-width: 992px) {
    .bottom-nav { display: none; }
    body { padding-bottom: 0; }

    .hero-section { min-height: 100vh; padding: 120px 0 80px; }
    .hero-title { font-size: 52px; }
    .hero-description { font-size: 17px; }
    .hero-stats { gap: 50px; }
    .stat-number { font-size: 32px; }
    .hero-buttons { flex-direction: row; }
    .hero-buttons .btn { width: auto; max-width: none; }

    .section { padding: 80px 0; }
    .section-title { font-size: 36px; }

    .crypto-scroll { justify-content: center; flex-wrap: wrap; gap: 16px; }
    .crypto-card { min-width: 0; width: 140px; }

    .steps-container { flex-direction: row; max-width: 900px; gap: 24px; }
    .step-card { min-width: 0; flex: 1; }

    .levels-grid { grid-template-columns: repeat(4, 1fr); max-width: 900px; gap: 16px; }
    .level-card { min-width: 0; padding: 24px 16px; }
    .level-card .level-icon { font-size: 32px; }
    .level-card .level-name { font-size: 18px; }
    .level-card .level-price { font-size: 18px; }

    .features-grid { grid-template-columns: repeat(3, 1fr); max-width: 900px; gap: 20px; }
    .feature-card { min-width: 0; }

    .faq-container { max-width: 800px; }

    .opportunity-visual { margin-top: 0; padding: 30px; }
    .earnings-chart { height: 220px; }

    .trust-card .trust-number { font-size: 42px; }

    .cta-box { padding: 48px 60px; text-align: left; }
    .cta-box h2 { font-size: 32px; }
    .cta-box p { font-size: 16px; margin-bottom: 0; }
}

/* ============================================================
   LARGE DESKTOP (1200px+)
   ============================================================ */
@media (min-width: 1200px) {
    .hero-title { font-size: 56px; }

    .levels-grid { grid-template-columns: repeat(7, 1fr); max-width: 1200px; }
    .features-grid { max-width: 1100px; }
    .steps-container { max-width: 1000px; }
}

/* ============================================================
   SMALL MOBILE (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .hero-title { font-size: 26px; }
    .section-title { font-size: 24px; }
    .crypto-scroll { grid-template-columns: repeat(2, 1fr); }
    .crypto-card { padding: 12px 6px; }
    .crypto-card .crypto-icon { width: 28px; height: 28px; }
}

/* ============================================================
   CRYPTO SHOWCASE SLIDER FIX
   ============================================================ */
.crypto-scroll {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .crypto-scroll.slider-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 12px !important;
        padding: 8px 0 !important;
        width: 100% !important;
        margin: 0 !important;
        grid-template-columns: none !important;
    }
    .crypto-scroll.slider-mobile::-webkit-scrollbar {
        display: none !important;
    }
    .crypto-scroll.slider-mobile > .crypto-card {
        flex: 0 0 auto !important;
        scroll-snap-align: center !important;
        min-width: calc(100vw - 80px) !important;
        max-width: 320px !important;
        width: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .crypto-scroll {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow-x: visible !important;
    }
    .crypto-scroll > .crypto-card {
        min-width: 0 !important;
        width: 140px !important;
        flex: none !important;
    }
}

@media (min-width: 992px) {
    .crypto-scroll {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow-x: visible !important;
    }
    .crypto-scroll > .crypto-card {
        min-width: 0 !important;
        width: 140px !important;
        flex: none !important;
    }
}

@media (max-width: 480px) {
    .crypto-scroll.slider-mobile {
        display: flex !important;
        grid-template-columns: none !important;
    }
    .crypto-scroll.slider-mobile > .crypto-card {
        min-width: calc(100vw - 80px) !important;
    }
}

/* ============================================================
   HOW IT WORKS - SQUARE/PORTRAIT CARDS ON MOBILE SLIDER
   ============================================================ */
@media (max-width: 767px) {
    .steps-container.slider-mobile {
        gap: 16px !important;
        padding: 12px 4px !important;
    }
    
    .steps-container.slider-mobile > .step-card {
        flex: 0 0 auto !important;
        scroll-snap-align: center !important;
        min-width: 220px !important;
        max-width: 75vw !important;
        width: auto !important;
        aspect-ratio: 1 / 1.15;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 28px 20px !important;
        text-align: center !important;
    }
    
    .steps-container.slider-mobile > .step-card .step-icon {
        font-size: 36px !important;
        margin-bottom: 12px !important;
    }
    
    .steps-container.slider-mobile > .step-card h4 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .steps-container.slider-mobile > .step-card p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    
    .steps-container.slider-mobile > .step-card .step-number {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
}

/* ============================================================
   FEATURES - PORTRAIT SQUARE CARDS ON MOBILE SLIDER
   ============================================================ */
@media (max-width: 767px) {
    .features-grid.slider-mobile {
        gap: 16px !important;
        padding: 12px 4px !important;
    }
    
    .features-grid.slider-mobile > .feature-card {
        flex: 0 0 auto !important;
        scroll-snap-align: center !important;
        min-width: 220px !important;
        max-width: 75vw !important;
        width: auto !important;
        aspect-ratio: 1 / 1.15;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 28px 20px !important;
        text-align: center !important;
    }
    
    .features-grid.slider-mobile > .feature-card .feature-icon {
        font-size: 36px !important;
        margin-bottom: 12px !important;
    }
    
    .features-grid.slider-mobile > .feature-card h4 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .features-grid.slider-mobile > .feature-card p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}

/* ============================================================
   RESEARCH PLAYER - STYLE OVERRIDES (CONFLICT FIXES)
   ============================================================ */

/* Override any conflicting styles for research player */
#researchPlayer .nx-card {
    background: var(--nx-surface, #12121A);
}

#researchPlayer .nx-option-label {
    background: var(--nx-surface-2, #181822) !important;
}

#researchPlayer .nx-option-label:hover {
    background: var(--nx-surface, #12121A) !important;
}

#researchPlayer .nx-option-label.selected {
    background: var(--nx-gold-dim, rgba(22, 163, 74, 0.12)) !important;
    border-color: var(--nx-gold, #16A34A) !important;
}

/* Ensure progress bar is visible */
#progressBar {
    background: linear-gradient(90deg, var(--nx-gold, #16A34A), #15803D) !important;
}

/* Fix mobile bottom nav overlap */
@media (max-width: 767px) {
    .nx-content {
        padding-bottom: calc(var(--nx-bottomnav-h, 64px) + var(--nx-space-6, 24px)) !important;
    }
}

/* Fix task grid on mobile - ensure no conflicts */
@media (max-width: 599px) {
    .nx-task-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* Ensure research player content is readable on mobile */
@media (max-width: 480px) {
    #researchContent .nx-h3 {
        font-size: 15px !important;
    }
    
    #researchContent .nx-body {
        font-size: 13px !important;
    }
    
    .nx-option-label span {
        font-size: 14px !important;
    }
}

/* Fix for mobile drawer z-index conflicts */
.nx-mobile-drawer {
    z-index: 10000 !important;
}

.nx-mobile-drawer-overlay {
    z-index: 9999 !important;
}

.nx-bottom-nav {
    z-index: 1000 !important;
}

/* Ensure task cards don't have blue color from public CSS */
.nx-task-card {
    background: var(--nx-surface, #12121A) !important;
    border: 1px solid var(--nx-border-strong, rgba(255,255,255,0.14)) !important;
    color: var(--nx-text, #F5F5F7) !important;
}

.nx-task-card .nx-reward-amount {
    color: var(--nx-gold, #16A34A) !important;
}

.nx-task-card .nx-crypto-icon {
    color: var(--nx-gold, #16A34A) !important;
}

/* Fix for any blue link colors in research player */
#researchPlayer a {
    color: var(--nx-gold, #16A34A) !important;
}

#researchPlayer a:hover {
    color: #15803D !important;
}

/* Ensure proper safe area for all devices */
@supports (padding: max(0px)) {
    .nx-bottom-nav {
        padding-bottom: max(env(safe-area-inset-bottom), 8px) !important;
    }
    
    .nx-mobile-drawer {
        padding-bottom: max(env(safe-area-inset-bottom), 0px) !important;
    }
}
/* ============================================================
   LEGAL PAGES (Terms, Privacy) -- "physical document" look
   Shared across all legal pages so Privacy Policy gets the same
   styling as Terms of Service instead of rendering unstyled.
   ============================================================ */
/* "Physical" document look: layered shadow, top accent bar, a paper-like
   raised card instead of a flat bordered box, plus a numbered-badge
   treatment on each section heading so it reads like a real printed
   legal document, not a plain text dump. */
.legal-card {
    background: var(--bg-card);
    border: 1px solid rgba(20, 20, 31, 0.06);
    border-top: 5px solid #16A34A;
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: 0 4px 12px rgba(6,78,59,.05), 0 20px 45px rgba(6,78,59,.08);
    position: relative;
    counter-reset: legal-section;
}
.legal-card-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, #16A34A, #15803D);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(22,163,74,.30);
}
.legal-updated-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(22,163,74,.10); color: #15803D;
    font-size: 13px; font-weight: 700;
    padding: 6px 14px; border-radius: 999px; margin-top: 6px;
}
.legal-card h3 {
    font-weight: 700;
    margin-top: 36px;
    margin-bottom: 12px;
    color: var(--gold-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    counter-increment: legal-section;
}
.legal-card h3::before {
    content: counter(legal-section);
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(22,163,74,.12);
    color: #15803D;
    font-size: 14px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.legal-card p, .legal-card li {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 15px;
    font-weight: 500;
}
.legal-card ul {
    padding-left: 24px;
}
.legal-card ul li {
    margin-bottom: 8px;
}
.legal-divider {
    height: 1px;
    background: rgba(20, 20, 31, 0.08);
    margin: 24px 0;
}
.text-gold {
    color: var(--gold-primary);
}
@media (max-width: 768px) {
    .legal-card {
        padding: 26px 20px;
    }
    .legal-card h3::before { width: 26px; height: 26px; font-size: 12px; }
}