@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   DESIGN TOKENS — Electric Cyan / Deep Space 2026
   ============================================================ */
:root {
    /* ── Color: Brand ── */
    --accent:          #00E5FF;
    --accent-light:    #33EAFF;
    --accent-bright:   #80F3FF;
    --accent-dark:     #00B8CC;
    --accent-glow:     rgba(0, 229, 255, 0.18);
    --accent-glow-lg:  rgba(0, 229, 255, 0.08);
    --focus-halo-color: #3b82f6; /* Vercel Blue 500 */

    /* ── Color: Surfaces ── */
    --black:           #09090B;  /* BUG-001 FIX: near-black replaces absolute #000 */
    --white:           #FFFFFF;
    --surface:         #FAFAFA;
    --surface-2:       #F1F5F9;
    --surface-dark:    #05070A;
    --surface-panel:   #080B14;
    --surface-card:    #0D1120;

    /* ── Color: Text ── */
    --text-primary:    #F9FAFB;        /* на тёмном фоне */
    --text-secondary:  #9CA3AF;        /* вторичный */
    --text-tertiary:   #6B7280;        /* третичный — WCAG AA на тёмном */
    --text-disabled:   #4B5563;        /* disabled / very muted */
    --text-body:       #374151;        /* body на светлом фоне */
    --text-muted:      #6B7280;
    --text-faint:      #9CA3AF;

    /* ── Color: Borders ── */
    --border:          #D1D5DB;
    --border-dark:     #141B2A;
    --border-subtle:   rgba(255, 255, 255, 0.06);

    /* ── Color: Semantic ── */
    --profit:          #10B981;
    --loss:            #EF4444;

    /* ── Typography: Fonts ── */
    --font:  'Inter', 'Helvetica Neue', Arial, sans-serif;
    --mono:  'JetBrains Mono', 'Courier New', monospace;

    /* ── Typography: Scale (Minor Third ×1.25) ── */
    --text-2xs:   0.5625rem;   /*  9px  */
    --text-xs:    0.625rem;    /* 10px  */
    --text-sm:    0.75rem;     /* 12px  */
    --text-base:  0.875rem;    /* 14px  */
    --text-md:    1rem;        /* 16px  */
    --text-lg:    1.125rem;    /* 18px  */
    --text-xl:    1.25rem;     /* 20px  */
    --text-2xl:   1.5rem;      /* 24px  */
    --text-3xl:   1.875rem;    /* 30px  */
    --text-4xl:   2.25rem;     /* 36px  */
    --text-5xl:   3rem;        /* 48px  */

    /* ── Typography: Leading ── */
    --leading-none:    1;
    --leading-tight:   1.1;
    --leading-snug:    1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.75;

    /* ── Typography: Tracking ── */
    --tracking-tight:   -0.05em;
    --tracking-normal:   0em;
    --tracking-wide:     0.05em;
    --tracking-wider:    0.08em;
    --tracking-widest:   0.14em;

    /* ── Spacing: 8px base grid ── */
    --space-0:   0;
    --space-px:  1px;
    --space-0-5: 0.125rem;  /*  2px */
    --space-1:   0.25rem;   /*  4px */
    --space-1-5: 0.375rem;  /*  6px */
    --space-2:   0.5rem;    /*  8px */
    --space-2-5: 0.625rem;  /* 10px */
    --space-3:   0.75rem;   /* 12px */
    --space-3-5: 0.875rem;  /* 14px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-7:   1.75rem;   /* 28px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */

    /* ── Border Radius: 3 уровня + pill ── */
    --r:       2px;     /* sharp — терминал, badges */
    --r-md:    8px;     /* default — cards, inputs  */
    --r-lg:    16px;    /* large panels             */
    --r-full:  9999px;  /* pills, avatars            */

    /* ── Shadows: elevation system ── */
    /* BUG-004 FIX: multi-layer modern shadows replaces heavy single-layer */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.12), 0 2px 4px -2px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.03);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.15), 0 4px 6px -2px rgba(0,0,0,0.05), 0 0 0 1px rgba(255,255,255,0.03);
    --shadow-accent: 0 4px 20px rgba(0, 229, 255, 0.25), 0 0 60px rgba(0, 229, 255, 0.08);

    /* ── Animation: Durations ── */
    --duration-instant: 80ms;
    --duration-fast:    150ms;
    --duration-normal:  250ms;
    --duration-slow:    400ms;
    --duration-slower:  600ms;

    /* ── Animation: Easings ── */
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* OMEGA Spring */
    
    /* ── Animation: Transitions ── */
    --transition-spring: all 300ms var(--ease-spring);
    --transition-fade: opacity 150ms var(--ease-out);

    /* ── Legacy tokens (backward compat) ── */
    --t:     0.35s cubic-bezier(0.25, 1, 0.5, 1);
    --max-w: 1440px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px
}

body {
    font-family: var(--font);
    color: var(--text-body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    line-height: 1.6
}

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

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

button {
    cursor: pointer;
    font-family: var(--font);
    border: none;
    background: none
}

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 64px)
}

/* ============================================================ HYDRATION (OMEGA FIX) */
.fouc-management {
    opacity: 0;
    animation: hydrationFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}
@keyframes hydrationFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================ HEADER */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border-bottom: 1px solid var(--border);
    transition: all var(--t)
}

#header.scrolled {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 1px 32px rgba(0, 0, 0, .06)
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px
}

.logo {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.05em;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0
}

.logo .dot {
    color: var(--accent);
    font-size: 26px;
    line-height: 1
}

.nav-desktop {
    display: flex;
    align-items: center;
    gap: 36px
}

.nav-desktop a {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--black);
    transition: color 150ms var(--ease-out);
    position: relative
}

.nav-desktop a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 150ms var(--ease-out)
}

.nav-desktop a:hover {
    color: var(--accent)
}

.nav-desktop a:hover::after {
    transform: scaleX(1)
}

/* BUG-009 FIX: focus ring for keyboard navigation */
.nav-desktop a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface)
}

.lang-btn {
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .08em;
    padding: 5px 12px;
    border-radius: 4px;
    color: var(--text-muted);
    transition: var(--transition-spring);
    cursor: pointer
}

.lang-btn.active {
    background: var(--black);
    color: #fff
}

.lang-btn:hover:not(.active) {
    color: var(--black)
}

.lang-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-halo-color);
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 14px
}

/* BUG-016: Show hamburger at tablet range (769-1024px) too */
@media(max-width:1024px) {
    .hamburger {
        display: flex
    }
    .nav-desktop {
        display: none
    }
    #header .btn.btn-primary.btn-sm {
        display: none
    }
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer
}

.hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--black);
    transition: all .3s ease;
    transform-origin: center
}

.hamburger.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0)
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg)
}

#mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(6, 9, 18, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 16px;
    /* Closed state */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}

#mobile-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


#mobile-menu a {
    display: block;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,.85);
    border-radius: var(--r);
    transition: background var(--t)
}

#mobile-menu a:hover {
    background: rgba(255,255,255,.06);
    color: var(--accent)
}

/* BUG-02: Hide duplicate lang-switcher in header on mobile */
@media(max-width:1024px) {
    .header-cta .lang-switcher { display: none; }
}

.mobile-menu-bottom {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.08)
}

/* ============================================================ BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 0.6875rem; /* 11px to rem */
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 13px 28px;
    border-radius: var(--r);
    border: 1px solid transparent;
    transition: var(--transition-spring);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden
}

.btn-primary {
    background: var(--black);
    color: #fff;
    border-color: var(--black)
}

.btn-primary:hover {
    background: #171a1e;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px)
}

/* BUG-002 FIX: physical press feedback */
.btn-primary:active {
    transform: scale(0.97) translateY(0);
    box-shadow: var(--shadow-sm);
    transition-duration: 80ms
}

/* BUG-009 FIX: focus-visible ring for keyboard users, updated to Vercel halo */
.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--focus-halo-color);
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent-dark), #005f6b);
    color: #000;
    border-color: transparent;
    box-shadow: 0 4px 20px var(--accent-glow)
}

.btn-accent:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    box-shadow: 0 8px 32px rgba(0, 229, 255, .4), 0 0 0 1px rgba(0,229,255,.2);
    transform: translateY(-1px)
}

/* BUG-002 FIX: physical press + BUG-009 FIX: focus ring updated to halo */
.btn-accent:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(0, 229, 255, .2);
    transition-duration: 80ms
}

.btn-accent:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface-dark), 0 0 0 4px var(--focus-halo-color);
}

.btn-outline {
    background: transparent;
    color: var(--black);
    border-color: var(--border)
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 229, 255, .04)
}

.btn-outline:active {
    transform: scale(0.97);
    transition-duration: 80ms
}

.btn-outline:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px
}

.btn-sm {
    padding: 10px 20px;
    font-size: 10px
}

/* ============================================================ TICKER TAPE */
.ticker-wrap {
    overflow: hidden;
    background: var(--surface-dark);
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
    padding: 10px 0;
    position: relative;
    z-index: 5
}

.ticker-wrap::before,
.ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none
}

.ticker-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--surface-dark), transparent)
}

.ticker-wrap::after {
    right: 0;
    background: linear-gradient(-90deg, var(--surface-dark), transparent)
}

.ticker-track {
    display: flex;
    gap: 0;
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px;
    font-family: var(--mono);
    font-size: 11px;
    color: #fff;
    border-right: 1px solid var(--border-dark)
}

.ticker-name {
    color: var(--text-faint);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase
}

.ticker-val {
    font-weight: 600;
    color: #e5e7eb
}

.ticker-chg {
    font-size: 10px;
    font-weight: 700
}

.ticker-chg.up {
    color: var(--profit)
}

.ticker-chg.down {
    color: var(--loss)
}

/* ============================================================ HERO */
#hero {
    min-height: 100svh;
    padding-top: 72px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: var(--surface-dark)
}



/* Cyan radial glow */
#hero::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 20%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(0, 229, 255, .1) 0%, transparent 65%);
    pointer-events: none
}

/* Hero video background */
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    opacity: .55
}

/* Darken/tint overlay so text stays readable */
#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to right, rgba(6, 9, 18, .85) 40%, rgba(6, 9, 18, .4) 100%),
        linear-gradient(var(--border-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-dark) 1px, transparent 1px);
    background-size: 100% 100%, 60px 60px, 60px 60px;
    pointer-events: none
}

#canvas-container {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
    padding: clamp(60px, 8vh, 100px) 0 clamp(40px, 5vh, 80px);
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
    padding: clamp(60px, 8vh, 100px) 0 clamp(40px, 5vh, 80px);
    position: relative;
    z-index: 1
}

/* OMEGA FIX: Protect readability */
#hero-content {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--r-lg);
    padding: 32px 0; /* Add some padding internally for the blur bounds to expand on mobile, or handle appropriately */
    margin: -32px 0; /* Offset the padding */
    box-shadow: 0 0 40px rgba(0,0,0,0.3) inset;
}

@media(min-width:1025px) {
    .hero-grid {
        grid-template-columns: 7fr 5fr
    }
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin-bottom: 24px;
    border: 1px solid rgba(96, 165, 250, .2);
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(0, 229, 255, .08)
}

.kicker-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-bright);
    animation: kicker-pulse 2s ease-in-out infinite
}

@keyframes kicker-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(96, 165, 250, .6)
    }

    70% {
        box-shadow: 0 0 0 8px rgba(96, 165, 250, 0)
    }
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 24px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.hero-title .accent {
    background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-light) 50%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.hero-desc {
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.75;
    color: #9CA3AF;
    max-width: 540px;
    margin-bottom: 40px
}

.hero-desc strong {
    color: #e5e7eb
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 56px
}

.hero-stats {
    display: flex;
    gap: clamp(24px, 4vw, 56px);
    flex-wrap: wrap;
    padding-top: 36px;
    border-top: 1px solid var(--border-dark)
}

.hero-stat-val {
    font-size: clamp(1.375rem, 2.5vw, 2rem);
    font-weight: 900;
    letter-spacing: -.04em;
    color: #fff;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 3px
}

.hero-stat-val sup {
    font-size: .5em;
    color: var(--accent-bright);
    font-weight: 700
}

.hero-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 5px
}

/* HERO INLINE FORM */
.hero-form-block {
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid var(--border-dark)
}

.hero-form-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin-bottom: 18px
}

.hero-form-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-bright);
    animation: kicker-pulse 2s ease-in-out infinite;
    flex-shrink: 0
}

.hero-inline-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.hero-form-field {
    position: relative;
    flex: 1;
    min-width: 160px
}

.hero-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    pointer-events: none;
    transition: color var(--t)
}

.hero-field-input {
    width: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border-dark);
    border-radius: var(--r);
    padding: 13px 16px 13px 38px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    color: #e5e7eb;
    outline: none;
    transition: all var(--t);
    backdrop-filter: blur(8px)
}

.hero-field-input::placeholder {
    color: #4B5563
}

.hero-field-input:focus {
    border-color: var(--accent);
    background: rgba(0, 229, 255, .08);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, .12)
}

.hero-field-input:focus+.hero-field-icon,
.hero-form-field:focus-within .hero-field-icon {
    color: var(--accent-bright)
}

.hero-form-btn {
    padding: 13px 24px;
    flex-shrink: 0;
    gap: 8px
}

.hero-form-sub {
    font-size: 11px;
    color: var(--text-tertiary); /* BUG-011 FIX: was #374151, unreadable on dark bg */
    margin-top: 12px;
    font-family: var(--mono);
    letter-spacing: .04em
}

.hero-form-success {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(16, 185, 129, .08);
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: var(--r);
    font-size: 13px;
    color: #10B981;
    font-weight: 500
}

.hero-form-success.visible {
    display: flex;
    animation: fade-in-up .4s ease
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

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

/* HERO PANEL */
.hero-panel {
    background: rgba(11, 15, 26, .9);
    border: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden;
    display: none;
    backdrop-filter: blur(20px)
}

.hero-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 229, 255, .06), transparent 60%);
    pointer-events: none
}

/* Animated border */
.hero-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-bright), transparent);
    animation: border-flow 3s ease-in-out infinite
}

@keyframes border-flow {

    0%,
    100% {
        opacity: .5
    }

    50% {
        opacity: 1
    }
}

@media(min-width:1025px) {
    .hero-panel {
        display: block
    }
}

.hero-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-dark);
    background: rgba(6, 9, 18, .6)
}

.hero-panel-dots {
    display: flex;
    gap: 6px
}

.hero-panel-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%
}

.dot-red {
    background: #ff5f57
}

.dot-yellow {
    background: #febc2e
}

.dot-green {
    background: #28c840
}

.hero-panel-title {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-faint);
    letter-spacing: .1em;
    text-transform: uppercase
}

.hero-panel-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--profit)
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--profit);
    animation: pulse-dot 1.5s ease-in-out infinite
}

@keyframes pulse-dot {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .4)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0)
    }
}

.hero-panel-body {
    padding: 24px 20px;
    min-height: 400px;
    display: flex;
    flex-direction: column
}

.panel-big-num {
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 900;
    letter-spacing: -.06em;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px
}

.panel-big-num .accent-dot {
    color: var(--accent-bright)
}

.panel-big-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 28px
}

.panel-scan-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .6), transparent);
    animation: scan 3.5s ease-in-out infinite;
    pointer-events: none
}

@keyframes scan {
    0% {
        top: 0;
        opacity: 0
    }

    10% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    100% {
        top: 100%;
        opacity: 0
    }
}

.panel-metrics {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1
}

.panel-metric-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-dark);
    transition: background var(--t)
}

.panel-metric-name {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: .04em
}

.panel-metric-val {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: #e5e7eb;
    text-align: right
}

.panel-metric-change {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 2px;
    text-align: right;
    min-width: 54px
}

.panel-metric-change.up {
    color: var(--profit)
}

.panel-metric-change.down {
    color: var(--loss)
}

/* ============================================================ HERO PANEL FORM (HPF) */

/* Override hero-panel for form variant */
.hero-panel--form {
    display: none;
    flex-direction: column
}

@media(min-width:1025px) {
    .hero-panel--form {
        display: flex
    }
}

/* Canvas background */
.hpf-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .4;
    z-index: 0
}

/* Grid overlay */
.hpf-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 229, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, .04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0
}

/* Glitch effect on title */
.hpf-glitch {
    position: relative
}

.hpf-glitch::before,
.hpf-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    white-space: nowrap
}

.hpf-glitch::before {
    color: #60A5FA;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    transform: translateX(-2px);
    animation: glitch-1 4s steps(1) infinite
}

.hpf-glitch::after {
    color: #EF4444;
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    transform: translateX(2px);
    animation: glitch-2 4s steps(1) infinite
}

@keyframes glitch-1 {

    0%,
    90%,
    100% {
        opacity: 0
    }

    91%,
    96% {
        opacity: 1;
        transform: translateX(-3px)
    }

    94% {
        transform: translateX(2px)
    }
}

@keyframes glitch-2 {

    0%,
    92%,
    100% {
        opacity: 0
    }

    93%,
    97% {
        opacity: 1;
        transform: translateX(3px)
    }

    95% {
        transform: translateX(-2px)
    }
}

/* Form body */
.hpf-body {
    position: relative;
    z-index: 1;
    padding: 20px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1
}

/* Data stream ticker */
.hpf-stream {
    font-family: var(--mono);
    font-size: 9px; /* BUG-010 FIX: 8→9px min readable */
    color: rgba(0, 229, 255, 0.45); /* BUG-010 FIX: was blue rgba(37,99,235) → cyan */
    letter-spacing: .06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 14px;
    animation: stream-flicker 3s ease-in-out infinite
}

@keyframes stream-flicker {

    0%,
    100% {
        opacity: .5
    }

    50% {
        opacity: 1
    }
}

/* Security badge */
.hpf-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--profit);
    background: rgba(16, 185, 129, .08);
    border: 1px solid rgba(16, 185, 129, .18);
    padding: 5px 10px;
    border-radius: 2px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden
}

.hpf-badge svg {
    flex-shrink: 0
}

.hpf-badge-pulse {
    position: absolute;
    right: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--profit);
    animation: pulse-dot 2s ease-in-out infinite
}

/* Headline */
.hpf-headline {
    margin-bottom: 16px
}

.hpf-headline-sub {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--accent-bright);
    margin-bottom: 6px;
    text-transform: uppercase
}

.hpf-headline-main {
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
    line-height: 1.15
}

/* Typed cursor */
.hpf-typed {
    color: var(--accent-bright)
}

.hpf-typed::after {
    content: '|';
    color: var(--accent-bright);
    animation: blink .75s step-end infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

/* Mini metrics row */
.hpf-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-dark);
    border: 1px solid var(--border-dark);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px
}

.hpf-mini-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: rgba(6, 9, 18, .8);
    gap: 1px;
    transition: background var(--t)
}

.hpf-mini-metric:hover {
    background: rgba(0, 229, 255, .06) /* BUG-015 FIX: was blue → cyan */
}

.hpf-mm-val {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: #e5e7eb
}

.hpf-mm-chg {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700
}

.hpf-mm-chg.up {
    color: var(--profit)
}

.hpf-mm-chg.down {
    color: var(--loss)
}

.hpf-mm-name {
    font-family: var(--mono);
    font-size: 9px; /* BUG-008 FIX: was 7px — below minimum readable size */
    color: var(--text-faint); /* BUG-008 FIX: was #374151, now via token */
    letter-spacing: .06em;
    text-transform: uppercase
}

/* Form fields */
.hpf-form {
    display: flex;
    flex-direction: column;
    gap: 0
}

.hpf-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 18px
}

.hpf-field {
    position: relative;
    padding: 0;
    background: rgba(6, 9, 18, .7);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    padding: 10px 14px;
    transition: border-color .25s, box-shadow .25s
}

.hpf-field+.hpf-field {
    margin-top: 8px
}

.hpf-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, .18)
}

.hpf-label {
    display: block;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #6B7280;
    margin-bottom: 6px;
    transition: color var(--t)
}

.hpf-field:focus-within .hpf-label {
    color: var(--accent-bright)
}

.hpf-input-row {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative
}

.hpf-ico {
    position: absolute;
    left: 0;
    color: #6B7280;
    flex-shrink: 0;
    transition: color var(--t)
}

.hpf-field:focus-within .hpf-ico {
    color: var(--accent-bright)
}

.hpf-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    color: #f9fafb;
    padding: 4px 0 4px 22px;
    transition: color var(--t)
}

.hpf-input::placeholder {
    color: #4B5563;
    font-style: normal
}

.hpf-input:focus::placeholder {
    color: #6B7280
}

/* Animated underline — hidden since field now has full border */
.hpf-field-line {
    display: none
}

/* Submit button */
.hpf-submit {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border: none;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--t);
    text-transform: uppercase
}

.hpf-submit:hover {
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    box-shadow: 0 0 24px rgba(0, 229, 255, .45), 0 0 60px rgba(0, 229, 255, .18);
    transform: translateY(-1px)
}

.hpf-submit:active {
    transform: translateY(0)
}

/* Shimmer sweep */
.hpf-submit-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: none
}

.hpf-submit:hover .hpf-submit-bg {
    animation: hpf-shimmer .7s ease forwards
}

@keyframes hpf-shimmer {
    to {
        transform: translateX(100%)
    }
}

.hpf-submit-arrow {
    transition: transform var(--t)
}

.hpf-submit:hover .hpf-submit-arrow {
    transform: translateX(4px)
}

/* Note */
.hpf-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-faint); /* BUG-003 FIX: was #1E2536 — virtually invisible on dark bg */
    letter-spacing: .04em;
    margin-top: 12px
}

/* Success state */
.hpf-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    flex: 1;
    justify-content: center
}

.hpf-success.visible {
    display: flex;
    animation: fade-in-up .5s ease
}

.hpf-success-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    animation: ring-expand 1s ease forwards
}

.hpf-success-ring::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(16, 185, 129, .1);
    animation: ring-expand 1s .2s ease forwards;
    opacity: 0
}

@keyframes ring-expand {
    from {
        transform: scale(.5);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.hpf-success-title {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--profit);
    margin-bottom: 10px
}

.hpf-success-body {
    font-size: 12px;
    color: #9CA3AF;
    line-height: 1.6;
    max-width: 280px;
    margin-bottom: 16px
}

.hpf-success-code {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: rgba(0, 229, 255, .6);
    letter-spacing: .1em;
    border: 1px solid var(--border-dark);
    padding: 4px 12px;
    border-radius: 2px
}



/* ============================================================ SHARED SECTION */
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.1;
    color: var(--black)
}

.section-title .muted {
    color: var(--text-muted)
}

.section-title .grad {
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.section-desc {
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.75;
    color: var(--text-body);
    max-width: 580px
}

/* ============================================================ TECHNOLOGY */
#technology {
    padding: clamp(64px, 8vw, 120px) 0;
    background: var(--surface-dark);
    border-top: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden
}

/* BUG-015 FIX: ambient glows unified to brand cyan */
#technology::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -100px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(0, 229, 255, .06), transparent 65%);
    pointer-events: none
}

#technology::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 229, 255, .04), transparent 65%);
    pointer-events: none
}

.tech-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    position: relative;
    z-index: 1
}

@media(min-width:1025px) {
    .tech-layout {
        grid-template-columns: 1fr 1fr;
        align-items: start
    }
}

/* Override section colors for dark bg */
#technology .section-title {
    color: #fff
}

#technology .section-desc {
    color: #9ba3af
}

#technology .section-kicker {
    color: var(--accent-bright)
}

/* Feature cards */
.feature-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px; /* BUG-013 FIX: 12px→16px — kратно 8px grid */
    margin-top: 48px
}

@media(min-width:769px) {
    .feature-cards {
        grid-template-columns: 1fr
    }
}

.feature-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 28px 28px 32px;
    /* BUG-012 FIX: spring physics instead of mechanical material ease */
    transition: border-color .3s var(--ease-spring), background .3s var(--ease-spring), box-shadow .3s var(--ease-spring), transform .3s var(--ease-spring);
    opacity: 0;
    transform: translateY(24px);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px)
}

.feature-card.visible {
    opacity: 1;
    transform: translateY(0)
}

/* Gradient top accent */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-bright), transparent);
    opacity: 0;
    transition: opacity .4s
}

/* Corner glow — BUG-007 FIX: was blue → now cyan */
.feature-card::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(0, 229, 255, .12), transparent 70%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none
}

/* BUG-007 FIX: was blue rgba(37,99,235) → unified cyan */
.feature-card:hover {
    border-color: rgba(0, 229, 255, .2);
    background: rgba(0, 229, 255, .04);
    transform: translateY(-3px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .4), 0 0 40px rgba(0, 229, 255, .06), 0 0 0 1px rgba(0, 229, 255, .08)
}

.feature-card:hover::before {
    opacity: 1
}

.feature-card:hover::after {
    opacity: 1
}

/* BUG-007 FIX: icon-wrap glow → cyan */
.feature-card:hover .feature-icon-wrap {
    box-shadow: 0 0 40px rgba(0, 229, 255, .25);
    border-color: rgba(0, 229, 255, .35)
}

.feature-card:hover .feature-icon {
    color: var(--accent-bright)
}

.feature-num {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px
}

.feature-num::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 229, 255, .3), transparent)
}

.feature-icon-wrap {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: var(--r-md);
    background: rgba(0, 229, 255, .08);
    transition: all .4s
}

.feature-icon {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, .6);
    stroke: currentColor;
    transition: color .4s
}

.feature-title {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.25
}

.feature-body {
    font-size: 13px;
    line-height: 1.75;
    color: #6b7280
}

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 0
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(0, 229, 255, .2) 60%, transparent)
}

.timeline-item {
    display: flex;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    align-items: flex-start;
    position: relative;
    transition: all .3s
}

.timeline-item:hover {
    padding-left: 8px
}

.timeline-year {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 255, .4);
    background: rgba(0, 229, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    color: var(--accent-bright);
    position: relative;
    z-index: 1;
    transition: all .3s;
    box-shadow: 0 0 0 4px rgba(0, 229, 255, .06)
}

.timeline-item:hover .timeline-year {
    background: rgba(0, 229, 255, .2);
    box-shadow: 0 0 20px rgba(0, 229, 255, .3), 0 0 0 4px rgba(0, 229, 255, .1)
}

.timeline-title {
    font-size: 14px;
    font-weight: 700;
    color: #e5e7eb;
    margin-bottom: 5px;
    transition: color .3s
}

.timeline-item:hover .timeline-title {
    color: #fff
}

.timeline-body {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.65
}

/* ============================================================ LIVE DASHBOARD */
#live-impact {
    background: var(--surface-dark);
    color: #fff;
    padding: clamp(64px, 8vw, 120px) 0;
    border-top: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden
}

/* BUG-015 FIX: was blue → cyan ambient glow */
#live-impact::before {
    content: '';
    position: absolute;
    bottom: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 229, 255, .08), transparent 65%);
    pointer-events: none
}

#live-impact::after {
    content: 'ALADDIN';
    position: absolute;
    font-size: clamp(100px, 18vw, 220px);
    font-weight: 900;
    letter-spacing: -.06em;
    color: rgba(255, 255, 255, .015);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
    user-select: none
}

.dashboard-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px
}

@media(min-width:1025px) {
    .dashboard-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between
    }
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin-bottom: 14px;
    border: 1px solid rgba(96, 165, 250, .2);
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(0, 229, 255, .08);
    width: fit-content
}

.live-ping {
    position: relative;
    display: flex;
    width: 8px;
    height: 8px;
    flex-shrink: 0
}

.live-ping::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent-bright);
    opacity: .75;
    animation: ping 1.5s cubic-bezier(0, 0, .2, 1) infinite
}

.live-ping::after {
    content: '';
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright)
}

@keyframes ping {

    75%,
    100% {
        transform: scale(2.2);
        opacity: 0
    }
}

.dashboard-title {
    font-size: clamp(24px, 3.5vw, 52px);
    font-weight: 900;
    letter-spacing: -.04em;
    color: #fff;
    line-height: 1.08
}

.dashboard-title .grad {
    background: linear-gradient(135deg, var(--accent-bright), #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.profit-counter-wrap {
    text-align: left
}

@media(min-width:1025px) {
    .profit-counter-wrap {
        text-align: right
    }
}

.profit-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 6px
}

.profit-value {
    font-family: var(--mono);
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 700;
    color: var(--profit);
    letter-spacing: -.02em;
    transition: color .5s
}

/* Terminal */
.dashboard-terminal {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--border-dark);
    background: var(--border-dark);
    gap: 1px;
    overflow: hidden
}

@media(min-width:1025px) {
    .dashboard-terminal {
        grid-template-columns: 1fr 1fr
    }
}

/* Chart row below terminal */
.chart-row {
    margin-top: 1px;
    border: 1px solid var(--border-dark);
    background: var(--border-dark);
    overflow: hidden
}

.chart-row .chart-panel {
    height: 320px
}

.chart-row .chart-panel-body {
    flex: 1;
    overflow: hidden;
    padding: 0
}

/* Y-axis labels */
.chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 10px 18px 14px;
    align-items: flex-end;
    flex-shrink: 0;
    width: 52px;
    border-right: 1px solid var(--border-dark);
    background: rgba(0, 0, 0, .2)
}

.chart-y-axis span {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #1f2d44;
    white-space: nowrap
}

.news-panel,
.chart-panel {
    background: var(--surface-panel);
    display: flex;
    flex-direction: column;
    height: 520px
}

.news-panel-header,
.chart-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-dark);
    background: rgba(6, 9, 18, .8);
    flex-shrink: 0
}

.panel-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint)
}

.news-feed {
    flex: 1;
    overflow: hidden;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative
}

.news-feed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to top, var(--surface-panel), transparent);
    pointer-events: none
}

.news-item {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-dark);
    border-radius: var(--r);
    padding: 11px 13px;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity .4s, transform .4s, border-color .2s
}

.news-item.visible {
    opacity: 1;
    transform: translateX(0)
}

.news-item:hover {
    border-color: rgba(0, 229, 255, .3);
    background: rgba(0, 229, 255, .04)
}

.news-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px
}

.news-source-badge {
    display: flex;
    align-items: center;
    gap: 6px
}

.news-source-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0
}

.news-source-name {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--text-faint)
}

.news-time {
    font-family: var(--mono);
    font-size: 8px;
    color: #374151
}

.news-headline {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
    margin-bottom: 4px
}

.news-headline-ru {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
    font-style: italic
}

a.news-headline-link {
    display: block;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: color .2s
}

a.news-headline-link:hover {
    color: var(--accent-bright);
    text-decoration: underline;
    text-underline-offset: 3px
}

.news-impact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    margin-top: 7px;
    padding: 2px 8px;
    border-radius: 2px
}

.news-impact.positive {
    color: var(--profit);
    background: rgba(16, 185, 129, .08);
    border: 1px solid rgba(16, 185, 129, .15)
}

.news-impact.negative {
    color: var(--loss);
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .15)
}

.news-impact.neutral {
    color: var(--accent-bright);
    background: rgba(0, 229, 255, .08);
    border: 1px solid rgba(0, 229, 255, .15)
}

/* News micro-thumbnail */
.news-thumb {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    display: block;
    transition: opacity .3s;
    opacity: .85
}

.news-thumb:hover {
    opacity: 1
}

/* Favicon fallback — smaller and centered */
.news-thumb-favicon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 4px;
    background: rgba(255,255,255,.06)
}

.chart-panel-body {
    flex: 1;
    padding: 18px;
    position: relative;
    overflow: hidden
}

.chart-badges {
    display: flex;
    gap: 6px
}

.chart-badge {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 8px;
    border: 1px solid var(--border-dark);
    color: var(--text-faint);
    background: rgba(6, 9, 18, .8)
}

.chart-badge .val {
    color: var(--profit)
}

.chart-badge .val-down {
    color: var(--loss)
}

/* ============================================================ TRADES PANEL */
.trades-panel {
    background: var(--surface-panel);
    display: flex;
    flex-direction: column;
    height: 520px
}

.trades-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-dark);
    background: rgba(6, 9, 18, .8);
    flex-shrink: 0
}

/* Mini P&L Bar */
.trades-pnl-bar {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    gap: 0;
    border-bottom: 1px solid var(--border-dark);
    background: rgba(0, 0, 0, .25);
    flex-shrink: 0
}

.trades-pnl-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px
}

.trades-pnl-divider {
    width: 1px;
    height: 28px;
    background: var(--border-dark)
}

.trades-pnl-label {
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .14em;
    color: #374151;
    text-transform: uppercase
}

.trades-pnl-val {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    transition: color .3s
}

.trades-pnl-val.positive {
    color: var(--profit)
}

.trades-pnl-val.negative {
    color: var(--loss)
}

/* Trades scrolling feed */
.trades-feed {
    flex: 1;
    overflow: hidden;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative
}

.trades-feed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to top, var(--surface-panel), transparent);
    pointer-events: none
}

/* Individual trade card */
.trade-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-dark);
    border-radius: var(--r);
    padding: 10px 13px;
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity .4s, transform .4s, border-color .2s;
    position: relative;
    overflow: hidden
}

.trade-card.visible {
    opacity: 1;
    transform: translateX(0)
}

.trade-card:hover {
    border-color: rgba(0, 229, 255, .3);
    background: rgba(0, 229, 255, .04)
}

/* Color accent on left edge */
.trade-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 2px 0 0 2px
}

.trade-card.buy::before {
    background: var(--profit)
}

.trade-card.sell::before {
    background: var(--loss)
}

.trade-card.hold::before {
    background: var(--accent-bright)
}

/* Scan flash on new trade */
.trade-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
    transform: translateX(-100%);
    animation: trade-scan .6s forwards
}

@keyframes trade-scan {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(200%)
    }
}

.trade-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px
}

.trade-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    padding: 2px 8px;
    border-radius: 2px
}

.trade-action-badge.buy {
    color: var(--profit);
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .25)
}

.trade-action-badge.sell {
    color: var(--loss);
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .25)
}

.trade-action-badge.hold {
    color: var(--accent-bright);
    background: rgba(0, 229, 255, .1);
    border: 1px solid rgba(0, 229, 255, .2)
}

.trade-ticker {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .06em
}

/* Ticker + logo wrapper */
.trade-ticker-wrap {
    display: flex;
    align-items: center;
    gap: 6px
}

/* Clearbit company logo */
.trade-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
    background: rgba(255,255,255,.08);
    flex-shrink: 0;
    display: block;
    border: 1px solid rgba(255,255,255,.1)
}

/* Letter-avatar fallback when logo fails */
.trade-logo-fallback {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    opacity: .85
}

.trade-time {
    font-family: var(--mono);
    font-size: 8px;
    color: #374151
}

/* News connection line */
.trade-news-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px
}

.trade-news-link-line {
    width: 1px;
    min-height: 18px;
    background: linear-gradient(180deg, var(--border-dark), transparent);
    flex-shrink: 0;
    margin-left: 4px;
    margin-top: 4px
}

.trade-news-snippet {
    font-size: 10px;
    color: #4b5563;
    line-height: 1.45;
    flex: 1;
    border-left: 1px solid var(--border-dark);
    padding-left: 8px;
    font-style: italic
}

/* P&L row */
.trade-pnl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px
}

.trade-pnl {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -.01em
}

.trade-pnl.positive {
    color: var(--profit)
}

.trade-pnl.negative {
    color: var(--loss)
}

.trade-conf {
    font-family: var(--mono);
    font-size: 8px;
    color: #4b5563;
    letter-spacing: .08em
}



/* ============================================================ RESULTS */
#results {
    padding: clamp(64px, 8vw, 120px) 0;
    background: var(--surface-dark);
    border-top: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden
}

#results::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 400px;
    background: linear-gradient(180deg, rgba(0, 229, 255, .06), transparent);
    pointer-events: none
}

#results .section-title,
.#results .section-kicker {
    color: #fff
}

#results .section-kicker {
    color: var(--accent-bright)
}

#results h2 {
    color: #fff
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--border-dark);
    border: 1px solid var(--border-dark);
    margin-top: 48px
}

@media(min-width:769px) {
    .results-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:1025px) {
    .results-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.result-card {
    background: var(--surface-panel);
    padding: clamp(32px, 3vw, 48px);
    position: relative;
    overflow: hidden;
    transition: background var(--t)
}

.result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t)
}

.result-card:hover {
    background: rgba(0, 229, 255, .05)
}

.result-card:hover::before {
    transform: scaleX(1)
}

.result-number {
    font-size: clamp(36px, 4vw, 58px);
    font-weight: 900;
    letter-spacing: -.05em;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 4px
}

.result-number .plus {
    color: var(--accent-bright)
}

.result-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent-bright);
    margin-bottom: 12px;
    font-family: var(--mono)
}

.result-body {
    font-size: 12px;
    line-height: 1.65;
    color: #6B7280
}

/* ============================================================ CLIENTS / PARTNERS */
#clients {
    padding: clamp(64px, 8vw, 120px) 0;
    background: var(--surface-dark);
    border-top: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden
}

#clients::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(0, 229, 255, .06), transparent 65%);
    pointer-events: none
}

.clients-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 56px;
    align-items: end
}

@media(min-width:1025px) {
    .clients-header {
        grid-template-columns: 1fr 1fr
    }
}

.clients-header h2 {
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 900;
    letter-spacing: -.04em;
    color: #fff;
    line-height: 1.1
}

.clients-header p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-faint);
    max-width: 420px
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border-dark);
    border: 1px solid var(--border-dark);
    overflow: hidden
}

@media(min-width:769px) {
    .clients-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.client-card {
    background: var(--surface-panel);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: all var(--t);
    cursor: default
}

.client-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(0, 229, 255, .10), transparent 60%);
    opacity: 0;
    transition: opacity var(--t)
}

.client-card:hover {
    background: rgba(0, 229, 255, .04);
    border-color: rgba(0, 229, 255, .15);
    box-shadow: 0 0 24px rgba(0, 229, 255, .05);
    transform: translateY(-2px);
}

.client-card:hover::before {
    opacity: 1
}

.client-card:hover .client-logo-svg {
    filter: brightness(0) invert(1);
    opacity: .9
}

.client-logo-svg {
    width: 100px;
    height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .25;
    transition: all var(--t)
}

.client-card-name {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #374151;
    text-align: center;
    transition: color var(--t)
}

.client-card:hover .client-card-name {
    color: var(--accent-bright)
}

.client-card-aum {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--profit);
    font-weight: 700;
    background: rgba(16, 185, 129, .07);
    border: 1px solid rgba(16, 185, 129, .12);
    padding: 2px 10px;
    border-radius: 2px;
    white-space: nowrap
}

.client-card-type {
    font-family: var(--mono);
    font-size: 9px;
    color: #2d3748;
    letter-spacing: .06em
}

.clients-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--border-dark);
    background: rgba(255, 255, 255, .015)
}

.clients-footer-text {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: .08em
}

.clients-footer-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent-bright);
    border: 1px solid rgba(96, 165, 250, .2);
    padding: 6px 16px;
    border-radius: 100px
}

/* ============================================================ HOW IT WORKS */
#how-it-works {
    padding: clamp(64px, 8vw, 120px) 0;
    background: var(--surface-dark);
    border-top: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden
}

#how-it-works::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none
}

#how-it-works .section-title {
    color: #fff
}

#how-it-works .section-title .muted {
    color: #374151
}

#how-it-works .section-kicker {
    color: var(--accent-bright)
}

/* Steps layout — horizontal flow on desktop */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .06);
    margin-top: 56px;
    overflow: hidden;
    position: relative;
    z-index: 1
}

@media(min-width:769px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:1025px) {
    .steps-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.step-card {
    background: var(--surface-dark);
    padding: clamp(28px, 2.5vw, 44px);
    position: relative;
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden
}

/* Glow bg */
.step-card::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 229, 255, .12), transparent 70%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none
}

.step-card:hover {
    background: rgba(0, 229, 255, .05)
}

.step-card:hover::after {
    opacity: 1
}

/* Large number watermark */
.step-number {
    font-size: clamp(80px, 10vw, 120px);
    font-weight: 900;
    letter-spacing: -.07em;
    line-height: 1;
    position: absolute;
    top: 8px;
    right: 12px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, transparent 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: opacity .3s
}

.step-card:hover .step-number {
    opacity: .7
}

/* Icon box */
.step-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0, 229, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--accent-bright);
    background: rgba(0, 229, 255, .08);
    transition: all .4s;
    border-radius: var(--r-md);
    position: relative;
    z-index: 1
}

.step-card:hover .step-icon {
    border-color: var(--accent);
    background: rgba(0, 229, 255, .15);
    box-shadow: 0 0 24px rgba(0, 229, 255, .25)
}

.step-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #e5e7eb;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    transition: color .3s
}

.step-card:hover .step-title {
    color: #fff
}

.step-body {
    font-size: 12px;
    line-height: 1.75;
    color: #4b5563;
    position: relative;
    z-index: 1;
    transition: color .3s
}

.step-card:hover .step-body {
    color: #6b7280
}

/* Connector arrow - desktop only */
@media(min-width:1025px) {
    .step-card:not(:last-child)::before {
        content: '→';
        position: absolute;
        right: -1px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: rgba(0, 229, 255, .3);
        z-index: 10;
        pointer-events: none;
        background: var(--surface-dark);
        padding: 4px 2px;
        line-height: 1
    }
}

/* ---- How-it-works NEW elements ---- */
/* Header 2-col */
.how-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px
}

@media(min-width:1025px) {
    .how-header {
        grid-template-columns: 1fr 1fr;
        align-items: center
    }
}

.how-header .section-title {
    color: #fff;
    margin-bottom: 0
}

.how-header .grad {
    background: linear-gradient(135deg, var(--accent-bright), #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.how-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #6b7280;
    max-width: 480px
}

/* Flow progress bar */
.how-flow-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 32px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    overflow: hidden;
    position: relative;
    z-index: 1
}

.how-flow-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #374151;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    transition: all .3s;
    white-space: nowrap
}

.how-flow-step::before {
    content: attr(data-n);
    font-size: 8px;
    color: #1f2937;
    margin-right: 4px
}

.how-flow-step.active {
    color: var(--accent-bright);
    border-color: rgba(0, 229, 255, .4);
    background: rgba(0, 229, 255, .1);
    box-shadow: 0 0 16px rgba(0, 229, 255, .15)
}

.how-flow-step.active::before {
    color: var(--accent-bright)
}

.how-flow-arrow {
    font-size: 12px;
    color: #1f2937;
    padding: 0 8px;
    flex-shrink: 0
}

.how-flow-latency {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--profit);
    letter-spacing: .08em;
    white-space: nowrap;
    padding-left: 20px
}

/* Step badge (numbered circle shown as text label) */
.step-badge {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: rgba(0, 229, 255, .35);
    letter-spacing: .08em;
    margin-bottom: 10px;
    display: block
}

.step-card--active .step-badge {
    color: var(--accent-bright)
}

/* Active step card */
.step-card--active {
    background: rgba(0, 229, 255, .08) !important;
    border-color: rgba(0, 229, 255, .35) !important;
    transform: scale(1) !important;
    opacity: 1 !important
}

/* Inactive state — JS controlled */
.step-card--inactive {
    opacity: .45;
    transform: scale(.98);
    border-color: rgba(255, 255, 255, .04) !important
}

.step-card {
    transition: opacity .35s ease, transform .35s ease, border-color .35s ease, background .35s ease
}

/* Active how-flow tab */
.how-flow-step.active {
    background: rgba(0, 229, 255, .15);
    border-color: var(--accent) !important;
    color: var(--accent-bright) !important
}

.how-flow-step {
    transition: background .25s, border-color .25s, color .25s
}

.step-card--active .step-icon {
    border-color: var(--accent) !important;
    background: rgba(0, 229, 255, .2) !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, .3) !important;
    color: var(--accent-bright) !important
}

.step-card--active .step-title {
    color: #fff
}

/* Top gradient line on active card — uses ::after (::before is the arrow connector) */
.step-card--active::after {
    opacity: 1 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-bright), transparent) !important
}

/* LIVE SIGNAL label — inline at top of card content */
.step-active-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--accent-bright);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 229, 255, .2);
    margin-bottom: 14px
}

.step-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--profit);
    animation: pulse-dot 1.5s ease-in-out infinite;
    display: inline-block;
    flex-shrink: 0
}




/* Signal demo widget */
.step-signal-demo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(0, 229, 255, .2);
    margin: 14px 0 10px;
    font-family: var(--mono);
    font-size: 11px
}

.signal-buy {
    color: var(--profit);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .05em
}

.signal-ticker {
    color: #e5e7eb;
    font-weight: 700;
    font-size: 13px;
    margin-left: 4px
}

.signal-conf {
    color: #4b5563;
    font-size: 10px;
    margin-left: auto
}

/* Metric chips */
.step-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px
}

.step-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #374151;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
    white-space: nowrap;
    transition: all .3s
}

.step-chip.active {
    color: var(--accent-bright);
    border-color: rgba(0, 229, 255, .3);
    background: rgba(0, 229, 255, .08)
}

.step-chip-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0
}

.step-card:hover .step-chip {
    border-color: rgba(0, 229, 255, .2);
    color: #6b7280
}

/* Latency label */
.step-latency {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: .08em;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .04)
}

.step-card--active .step-latency {
    color: var(--accent-bright)
}

/* CTA bar at the bottom */
.how-cta-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .02);
    position: relative;
    z-index: 1
}

.how-cta-stat {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.how-cta-val {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 900;
    letter-spacing: -.04em;
    color: #fff;
    line-height: 1
}

.how-cta-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #374151
}

.how-cta-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, .07);
    flex-shrink: 0
}

.how-cta-bar .btn {
    margin-left: auto
}

@media(max-width:768px) {
    .how-cta-bar .btn {
        width: 100%
    }

    .how-cta-divider {
        display: none
    }
}

/* ============================================================ ABOUT SECTION */

#about {
    padding: clamp(64px, 8vw, 120px) 0;
    background: #060912;
    border-top: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden
}

#about::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(0, 229, 255, .06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 80% 30%, rgba(0, 229, 255, .04) 0%, transparent 60%);
    pointer-events: none
}

.about-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .3), transparent);
    z-index: 1;
    animation: about-scan 8s linear infinite;
    pointer-events: none
}

@keyframes about-scan {
    0% { top: 0%; opacity: 0 }
    5% { opacity: 1 }
    95% { opacity: 1 }
    100% { top: 100%; opacity: 0 }
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: stretch;
    position: relative;
    z-index: 2
}

@media(min-width:1025px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px
    }
}

.about-left {
    display: flex;
    flex-direction: column;
    justify-content: center
}

#about .section-title {
    color: #fff
}

#about .section-desc {
    color: #9ca3af
}

#about .section-desc strong {
    color: var(--accent-bright)
}

/* Checklist */
.about-checklist {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 0
}

.about-check-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .3s
}

.about-check-item:last-child {
    border-bottom: none
}

.about-check-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(0, 229, 255, .12);
    border: 1px solid rgba(0, 229, 255, .3);
    color: var(--accent-bright);
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    box-shadow: 0 0 12px rgba(0, 229, 255, .15)
}

.about-check-title {
    font-size: 14px;
    font-weight: 800;
    color: #e5e7eb;
    margin-bottom: 5px;
    letter-spacing: -.02em
}

.about-check-body {
    font-size: 13px;
    line-height: 1.65;
    color: #6b7280
}

/* Stats row — inside dark right panel */
.about-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-dark);
    border: 1px solid var(--border-dark);
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    flex-shrink: 0
}

.about-stat {
    padding: 18px 20px;
    background: rgba(11, 15, 26, .9)
}

.about-stat-num {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.04em;
    color: #fff;
    margin-bottom: 3px
}

.about-stat-num .accent {
    color: var(--accent)
}

.about-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4b5563;
    font-family: var(--mono)
}

/* CTA below stats */
.about-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    flex-wrap: wrap
}

.about-cta-note {
    font-size: 12px;
    color: #6b7280;
    font-style: italic
}

/* Right panel */
.about-visual {
    background: rgba(6,9,18,.6);
    border: 1px solid var(--border-dark);
    padding: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    backdrop-filter: blur(6px)
}

.about-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 229, 255, .12), transparent 60%)
}

.about-visual-bg {
    position: absolute;
    inset: 0;
    opacity: .04;
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1.8;
    color: #fff;
    overflow: hidden;
    pointer-events: none;
    word-break: break-all;
    letter-spacing: .04em
}

/* Live metrics overlay */
.about-visual-metrics {
    position: relative;
    z-index: 2;
    background: rgba(6, 9, 18, .8);
    border: 1px solid var(--border-dark);
    border-radius: var(--r);
    padding: 16px 18px;
    margin-bottom: 20px;
    backdrop-filter: blur(8px)
}

.avm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0
}

.avm-label {
    font-family: var(--mono);
    font-size: 10px;
    color: #4b5563;
    letter-spacing: .06em
}

.avm-val {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em
}

.avm-val.up {
    color: var(--profit)
}

.avm-val.down {
    color: var(--loss)
}

.avm-divider {
    height: 1px;
    background: var(--border-dark);
    margin: 8px 0
}

/* Sparkline */
.about-sparkline-wrap {
    position: relative;
    z-index: 2;
    margin-bottom: 20px
}

.about-sparkline {
    width: 100%;
    height: 60px;
    display: block
}

.about-sparkline-label {
    font-family: var(--mono);
    font-size: 8px;
    color: #374151;
    letter-spacing: .08em;
    margin-top: 6px;
    text-transform: uppercase
}

.about-visual-title {
    color: #fff;
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.1;
    margin-bottom: 12px;
    position: relative;
    z-index: 1
}

.about-visual-sub {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--text-faint);
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    margin-bottom: 16px
}

/* Trust badges */
.about-trust-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2
}

.about-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #4b5563;
    border: 1px solid var(--border-dark);
    padding: 5px 10px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .03)
}

.about-trust-item svg {
    color: var(--accent-bright)
}



/* ============================================================ ACCESS MODAL */
.amodal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.4, 0, .2, 1)
}

.amodal--open {
    opacity: 1;
    pointer-events: all
}

.amodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 14, .88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.amodal-box {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: rgba(6, 9, 18, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 60px rgba(0, 229, 255, .12);
    transform: translateY(24px) scale(.97);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
}

.amodal--open .amodal-box {
    transform: translateY(0) scale(1)
}

/* scan line */
.amodal-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .5), transparent);
    z-index: 0;
    animation: amodal-scan 5s linear infinite
}

@keyframes amodal-scan {
    0% {
        top: 0%;
        opacity: 0
    }

    5% {
        opacity: 1
    }

    95% {
        opacity: 1
    }

    100% {
        top: 100%;
        opacity: 0
    }
}

.amodal-glow {
    position: absolute;
    top: -30%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(0, 229, 255, .1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0
}

/* close button */
.amodal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1e2536;
    border: 1px solid rgba(255, 255, 255, .15);
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background var(--t), color var(--t), box-shadow var(--t)
}

.amodal-close:hover {
    background: #2d3748;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .08)
}

/* header bar */
.amodal-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    position: relative;
    z-index: 1
}

.amodal-dots {
    display: flex;
    gap: 6px
}

.amodal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.amodal-dot--r {
    background: #ff5f57
}

.amodal-dot--y {
    background: #febc2e
}

.amodal-dot--g {
    background: #28c840
}

.amodal-hdr-title {
    flex: 1;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    color: #4b5563;
    text-align: center
}

.amodal-hdr-badge {
    font-family: var(--mono);
    font-size: 9px;
    color: #10b981;
    letter-spacing: .1em
}

/* hex stream */
.amodal-hex {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .06em;
    color: rgba(0, 229, 255, .5);
    padding: 7px 16px;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    position: relative;
    z-index: 1
}

/* encrypted badge */
.amodal-enc-row {
    padding: 10px 20px 0;
    position: relative;
    z-index: 1
}

.amodal-enc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .09em;
    color: var(--accent-bright);
    background: rgba(0, 229, 255, .12);
    border: 1px solid rgba(0, 229, 255, .3);
    padding: 5px 10px;
    border-radius: 4px
}

/* body */
.amodal-body {
    padding: 20px 22px 24px;
    position: relative;
    z-index: 1
}

.amodal-subtitle {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .13em;
    color: #4b5563;
    margin-bottom: 6px
}

.amodal-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    margin-bottom: 18px
}

/* form fields */
.amodal-field {
    margin-bottom: 14px
}

.amodal-label {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    color: #4b5563;
    margin-bottom: 6px
}

.amodal-input-wrap {
    position: relative;
    display: flex;
    align-items: center
}

.amodal-input-ico {
    position: absolute;
    left: 12px;
    color: #4b5563;
    pointer-events: none;
    flex-shrink: 0
}

.amodal-input {
    width: 100%;
    padding: 12px 14px 12px 36px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    color: #e5e7eb;
    font-family: var(--font);
    font-size: 14px;
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
    -webkit-appearance: none
}

.amodal-input::placeholder {
    color: #374151
}

.amodal-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, .2);
    background: rgba(0, 229, 255, .05)
}

/* submit */
.amodal-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 14px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--t), transform var(--t), box-shadow var(--t)
}

.amodal-submit:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 229, 255, .4)
}

.amodal-submit:active {
    transform: none;
    box-shadow: none
}

.amodal-legal {
    margin-top: 12px;
    font-size: 11px;
    color: #374151;
    line-height: 1.6;
    text-align: center
}

.amodal-legal a {
    color: var(--accent-bright);
    text-decoration: underline
}

/* success state */
.amodal-success {
    text-align: center;
    padding: 20px 0
}

.amodal-success-ico {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(16, 185, 129, .15);
    border: 1px solid rgba(16, 185, 129, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #10b981
}

.amodal-success-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px
}

.amodal-success-text {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6
}

/* mobile adjustments for modal */
@media(max-width:480px) {
    .amodal {
        padding: 12px
    }

    .amodal-box {
        border-radius: 8px
    }

    .amodal-body {
        padding: 16px 16px 20px
    }

    .amodal-title {
        font-size: 18px
    }
}


/* ============================================================ LEAD CAPTURE */

#lead-capture {
    padding: 0;
    background: var(--surface-dark);
    border-top: 1px solid rgba(255, 255, 255, .06);
    position: relative;
    overflow: hidden
}

#lead-capture::before {
    content: '';
    position: absolute;
    top: -300px;
    right: -200px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow-lg), transparent 65%);
    pointer-events: none
}

.lead-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: center
}

@media(min-width:1025px) {
    .lead-grid {
        grid-template-columns: 1fr 1fr
    }
}

.lead-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0
}

.lead-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--text-body)
}

.check-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    border-radius: 2px;
    margin-top: 1px
}

/* Form */
.form-card {
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--white) 100%);
    border: 1px solid var(--border);
    padding: clamp(32px, 3vw, 56px);
    position: relative;
    overflow: hidden
}

.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-bright), var(--accent))
}

.form-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -120px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow-lg), transparent);
    pointer-events: none
}

.form-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--black);
    margin-bottom: 28px
}

.form-group {
    position: relative;
    margin-bottom: 18px
}

.form-input {
    width: 100%;
    padding: 16px 16px 8px;
    font-family: var(--font);
    font-size: 14px;
    color: var(--black);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r);
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
    -webkit-appearance: none
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow)
}

.form-input:focus+.form-label,
.form-input:not(:placeholder-shown)+.form-label {
    transform: translateY(-12px) scale(.8);
    color: var(--accent)
}

.form-label {
    position: absolute;
    left: 16px;
    top: 13px;
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
    transform-origin: left top;
    transition: transform .2s, color .2s;
    background: var(--white);
    padding: 0 4px
}

.form-input::placeholder {
    color: transparent
}

.form-submit {
    width: 100%;
    padding: 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    color: #fff;
    border: none;
    border-radius: var(--r);
    cursor: pointer;
    transition: all var(--t);
    box-shadow: 0 4px 20px var(--accent-glow);
    position: relative;
    overflow: hidden
}

.form-submit:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    box-shadow: 0 8px 32px rgba(0, 229, 255, .35);
    transform: translateY(-1px)
}

.form-note {
    font-size: 11px;
    color: var(--text-faint);
    text-align: center;
    margin-top: 14px;
    line-height: 1.5
}

.form-success {
    display: none;
    text-align: center;
    padding: 32px
}

.form-success.show {
    display: block
}

.form-success-icon {
    width: 56px;
    height: 56px;
    border: 2px solid var(--profit);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--profit)
}

/* ============================================================ FOOTER */
#footer {
    background: var(--black);
    color: var(--text-muted);
    padding: 64px 0 32px
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid #111;
    margin-bottom: 32px
}

@media(min-width:769px) {
    .footer-top {
        grid-template-columns: 2fr 1fr 1fr 1fr
    }
}

.footer-logo {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.05em;
    color: #fff;
    margin-bottom: 12px
}

.footer-logo .dot {
    color: var(--accent)
}

.footer-desc {
    font-size: 12px;
    line-height: 1.7;
    max-width: 240px;
    color: #4B5563
}

.footer-col-title {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #374151;
    margin-bottom: 16px;
    font-family: var(--mono)
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer-links a {
    font-size: 12px;
    transition: color var(--t)
}

.footer-links a:hover {
    color: #fff
}

.footer-disclaimer {
    font-size: 10px;
    line-height: 1.7;
    max-width: 900px;
    color: #2d3748
}

.footer-copy {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    padding-top: 16px;
    border-top: 1px solid #0d0d0d;
    color: #374151
}

.footer-copy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.footer-copy-links a:hover {
    color: #fff
}

/* ============================================================ ANIMATIONS */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0)
}

.reveal-delay-1 {
    transition-delay: .1s
}

.reveal-delay-2 {
    transition-delay: .2s
}

.reveal-delay-3 {
    transition-delay: .3s
}

/* ============================================================ SCROLLBAR */
::-webkit-scrollbar {
    width: 4px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-faint)
}

/* ============================================================ FOCUS / A11Y */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px
}

.hamburger:focus-visible,
.logo:focus-visible,
.amodal-close:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 4px;
    border-radius: 4px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}


/* ============================================================ LEAD CAPTURE SECTION (LCS) */

.lcs {
    position: relative;
    overflow: hidden;
    background: var(--bg-dark);
    padding: 100px 0
}

.lcs-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0
}

.lcs-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .5), transparent);
    z-index: 1;
    animation: lcs-scan 6s linear infinite
}

@keyframes lcs-scan {
    0% {
        top: 0%;
        opacity: 0
    }

    5% {
        opacity: 1
    }

    95% {
        opacity: 1
    }

    100% {
        top: 100%;
        opacity: 0
    }
}

.lcs-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-dark) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: .35;
    pointer-events: none;
    z-index: 1
}

.lcs-glow {
    position: absolute;
    bottom: -10%;
    right: 10%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(0, 229, 255, .12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1
}

.lcs-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 64px;
    align-items: center
}

.lcs-checklist {
    list-style: none;
    padding: 0;
    margin: 28px 0 32px
}

.lcs-check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: 14px;
    color: var(--text-muted);
    transition: color .25s
}

.lcs-check-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, .05)
}

.lcs-check-item:hover {
    color: #e5e7eb
}

.lcs-check-ico {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgba(0, 229, 255, .2);
    border: 1px solid rgba(0, 229, 255, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-bright);
    margin-top: 1px
}

.lcs-trust {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 420px
}

.lcs-trust-item {
    flex: 1;
    text-align: center
}

.lcs-trust-val {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    color: #fff
}

.lcs-trust-label {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .1em;
    color: #4B5563;
    margin-top: 4px;
    text-transform: uppercase
}

.lcs-trust-sep {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, .08)
}

.lcs-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.lcs-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    color: #4B5563;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 4px;
    padding: 5px 10px
}

.lcs-badge--green {
    color: #10B981;
    border-color: rgba(16, 185, 129, .25);
    background: rgba(16, 185, 129, .06)
}

.lcs-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    animation: pulse-green 1.5s ease-in-out infinite
}

.lcs-panel {
    position: relative;
    background: rgba(6, 9, 18, .92);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    overflow: hidden
}

.lcs-panel-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .4), transparent);
    z-index: 0;
    animation: lcs-scan 4s linear infinite .5s
}

.lcs-panel-glow {
    position: absolute;
    top: -40%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(0, 229, 255, .08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0
}

.lcs-panel-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    position: relative;
    z-index: 1
}

.lcs-panel-title {
    flex: 1;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    color: #4B5563;
    text-align: center
}

.lcs-hex-stream {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .06em;
    color: rgba(0, 229, 255, .55);
    padding: 7px 16px;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    position: relative;
    z-index: 1
}

.lcs-panel-body {
    padding: 20px 22px 24px;
    position: relative;
    z-index: 1
}

.lcs-form-headline {
    margin-bottom: 18px
}

.lcs-form-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    margin-top: 4px
}

/* Force white text inside dark .lcs section */
.lcs .section-kicker,
.lcs .section-kicker * {
    color: var(--accent-bright)
}

.lcs .section-title {
    color: var(--white)
}

.lcs .section-title .grad {
    background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.lcs .section-desc,
.lcs p {
    color: var(--text-faint)
}

.lcs .lcs-check-item span {
    color: #d1d5db
}

/* ============================================================ RESPONSIVE */
@media(max-width:768px) {
    .nav-desktop {
        display: none
    }

    .hamburger {
        display: flex
    }

    #header .btn.btn-primary.btn-sm {
        display: none
    }

    /* ---- Lead Capture (LCS) mobile ---- */
    .lcs {
        padding: 64px 0
    }

    /* Stack left + right into single column */
    .lcs-inner {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .hero-col:nth-child(2) {
        display: none
    }

    .hero-title {
        font-size: clamp(28px, 8vw, 44px)
    }

    /* Trust row: smaller text, allow wrap */
    .lcs-trust {
        max-width: 100%;
        padding: 12px 14px;
        gap: 4px
    }

    .lcs-trust-val {
        font-size: 16px
    }

    .lcs-trust-label {
        font-size: 7px
    }

    /* Checklist items */
    .lcs-checklist {
        margin: 20px 0 24px
    }

    .lcs-check-item {
        font-size: 13px;
        padding: 10px 0
    }

    /* Badges - already flex-wrap but make smaller */
    .lcs-badges {
        gap: 6px
    }

    .lcs-badge {
        font-size: 8px;
        padding: 4px 8px
    }

    /* Right panel: full-width, remove fixed 480px */
    .lcs-panel {
        width: 100%;
        border-radius: 8px
    }

    .lcs-panel-body {
        padding: 16px 16px 20px
    }

    .lcs-hex-stream {
        font-size: 7px;
        padding: 6px 14px
    }

    .lcs-form-title {
        font-size: 18px
    }

    /* Form inputs full width */
    .form-input {
        font-size: 16px
    }

    /* Submit button full width */
    .lcs-panel .btn {
        width: 100%
    }

    /* About section mobile */
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 32px
    }

    .about-visual {
        min-height: unset
    }

    .about-stat-row {
        grid-template-columns: 1fr 1fr
    }

    .about-cta {
        flex-wrap: wrap;
        gap: 12px
    }

    .about-cta-note {
        width: 100%
    }
}

@media(min-width:1025px) {
    .hamburger {
        display: none
    }

    #mobile-menu {
        display: none !important
    }
}
/* =====================================================
   PHASE 21: CONVERSION BOOSTERS
   ===================================================== */

/* Cause-Effect Chain */
.cause-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px;
    margin-top: 12px;
    background: rgba(10, 12, 20, 0.8);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 10px;
    flex-wrap: wrap;
}
.cause-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.4;
    transition: opacity 0.5s ease, transform 0.3s ease;
}
.cause-node.active {
    opacity: 1;
    transform: scale(1.08);
}
.cause-icon {
    font-size: 18px;
    line-height: 1;
}
.cause-label {
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #4b5563;
    transition: color 0.4s;
}
.cause-node.active .cause-label {
    color: #9ca3af;
}
.cause-arrow {
    opacity: 0.3;
    transition: opacity 0.4s;
    display: flex;
    align-items: center;
}
.cause-arrow.active { opacity: 1; }

/* Calculator slider custom track */
#opp-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #2563EB 0%, #2563EB var(--slider-pct, 5%), rgba(255,255,255,0.1) var(--slider-pct, 5%));
    outline: none;
}
#opp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563EB;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
#opp-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563EB;
    border: 2px solid #fff;
    cursor: pointer;
}

/* Slots badge pulse animation */
@keyframes slots-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
#slots-badge { animation: slots-pulse 2s ease-in-out infinite; }


/* =====================================================
   PHASE 22: TRUST ARCHITECTURE
   ===================================================== */

/* --- Quota Explainer Block --- */
.quota-explainer {
    margin: 24px 0 28px;
    background: rgba(0, 229, 255, 0.05);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-left: 3px solid var(--accent, #2563EB);
    border-radius: 10px;
    padding: 20px 22px;
}
.quota-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 12px;
}
.quota-header svg { flex-shrink: 0; opacity: .6; }
.quota-body {
    font-size: 13px;
    line-height: 1.7;
    color: #9ca3af;
    margin: 0 0 14px;
}
.quota-body strong { color: #d1d5db; }
.quota-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    color: #4b5563;
}
.quota-badge strong { color: #10b981; }
.quota-badge-dot {
    width: 6px; height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: slots-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* --- Product Preview Carousel --- */
.product-preview-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .product-preview-track {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}
.product-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .3s ease;
}
.product-card:hover { transform: translateY(-6px); }
.product-card-screen {
    background: #0a0c14;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0, 229, 255, 0.1);
}
.pc-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pc-dots { display: flex; gap: 5px; }
.pc-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.12);
}
.pc-dots span:first-child { background: #ef4444; opacity: .7; }
.pc-dots span:nth-child(2) { background: #f59e0b; opacity: .7; }
.pc-dots span:last-child  { background: #10b981; opacity: .7; }
.pc-title {
    flex: 1;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    color: #374151;
    text-align: center;
}
.pc-live {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 8px;
    color: #10b981;
}
.pc-body { padding: 18px 16px 20px; }
.pc-greeting {
    font-family: var(--mono);
    font-size: 9px;
    color: #4b5563;
    margin-bottom: 6px;
    letter-spacing: .04em;
}
.pc-balance {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    font-family: var(--mono);
    letter-spacing: -1px;
    line-height: 1;
}
.pc-balance-label {
    font-family: var(--mono);
    font-size: 9px;
    color: #374151;
    margin-top: 4px;
    margin-bottom: 16px;
}
.pc-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 14px;
}
.pc-stat { text-align: center; }
.pc-stat-val {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    margin-bottom: 3px;
}
.pc-stat-lbl {
    font-family: var(--mono);
    font-size: 8px;
    color: #374151;
}
/* Signals */
.pc-signal-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pc-signal-item:last-child { border-bottom: none; }
.pc-sig-badge {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.pc-sig-badge.buy { background: rgba(16,185,129,.15); color: #10b981; }
.pc-sig-badge.sell { background: rgba(239,68,68,.15); color: #ef4444; }
.pc-sig-ticker {
    font-size: 12px;
    font-weight: 700;
    color: #e5e7eb;
    margin-bottom: 2px;
}
.pc-sig-sub {
    font-family: var(--mono);
    font-size: 8px;
    color: #374151;
}
/* Chat */
.pc-chat-name {
    font-family: var(--mono);
    font-size: 9px;
    color: #6b7280;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pc-chat-msgs { display: flex; flex-direction: column; gap: 8px; }
.pc-msg {
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 90%;
}
.pc-msg.manager {
    background: rgba(0, 229, 255, 0.12);
    color: #bfdbfe;
    align-self: flex-start;
    border-bottom-left-radius: 3px;
}
.pc-msg.client {
    background: rgba(16,185,129,0.1);
    color: #a7f3d0;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
}

.product-card-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: -.01em;
}

/* =====================================================
   PHASE 23: MICRO-DESIGN POLISH
   ===================================================== */

/* 1. GLASSMORPHISM — Dashboard & News panels */
.news-panel,
.trades-panel,
.chart-panel {
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* 2. TIMELINE — neon scroll-activation */
.timeline-item {
    opacity: 0.35;
    transform: translateX(-6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.timeline-item.tl-active {
    opacity: 1;
    transform: translateX(0);
}
.timeline-item.tl-active .timeline-year {
    color: #3b82f6;
    text-shadow: 0 0 12px rgba(59,130,246,0.7), 0 0 24px rgba(59,130,246,0.4);
}
.timeline-item .timeline-year {
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* 3. GLASS-PILL SIGNALS — BUY/SELL glow effect */
.pc-sig-badge.buy {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #10b981 !important;
    box-shadow: 0 0 12px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 20px;
    padding: 4px 10px;
}
.pc-sig-badge.sell {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 20px;
    padding: 4px 10px;
}

/* Also apply to trades-feed signal badges in live section */
.signal-long, .trade-side.long, [class*="badge-long"] {
    box-shadow: 0 0 10px rgba(16,185,129,0.25);
}
.signal-short, .trade-side.short, [class*="badge-short"] {
    box-shadow: 0 0 10px rgba(239,68,68,0.25);
}

/* 4. LEAD-CAPTURE — enhanced icon anchors */
.lcs-check-ico {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(124,58,237,0.1)) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.lcs-check-item:hover .lcs-check-ico {
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    transform: scale(1.08);
}
.lcs-check-item {
    transition: transform 0.3s ease;
}
.lcs-check-item:hover {
    transform: translateX(4px);
}

/* 5a. TICKER — Motion Blur edges (vignette mask) */
.ticker-wrap {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}

/* 5b. SHIMMER CTA — "живой блик" на главных кнопках */
@keyframes shimmer-sweep {
    0%   { left: -80%; opacity: 0; }
    10%  { opacity: 0.6; }
    50%  { opacity: 0.3; }
    90%  { opacity: 0.6; }
    100% { left: 130%; opacity: 0; }
}

.btn-accent {
    position: relative;
    overflow: hidden;
}
.btn-accent::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.35) 50%,
        transparent 80%
    );
    transform: skewX(-20deg);
    animation: shimmer-sweep 4s ease-in-out infinite;
    pointer-events: none;
}
.btn-accent:hover::after {
    animation-duration: 0.6s;
}

/* hpf-submit also gets shimmer */
.hpf-submit {
    position: relative;
    overflow: hidden;
}
.hpf-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.25) 50%,
        transparent 80%
    );
    transform: skewX(-20deg);
    animation: shimmer-sweep 3.5s ease-in-out infinite;
    pointer-events: none;
}

/* =====================================================
   PHASE 24: DEEP MOTION & VISUAL SYSTEM
   ===================================================== */

/* ─── 1. Reveal — Premium Parallax Float ─── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal.reveal-delay-1 { transition-delay: 0.1s; }
.reveal.reveal-delay-2 { transition-delay: 0.2s; }
.reveal.reveal-delay-3 { transition-delay: 0.32s; }

/* ─── 2. Data Particles Canvas ─── */
#data-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* ─── 3. Light Orbs ─── */
.light-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
    will-change: transform;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.light-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, transparent 70%);
    top: -100px;
    left: -100px;
}
.light-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
    top: 40%;
    right: -120px;
}
.light-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
    bottom: 10%;
    left: 30%;
}

/* ─── 4. Inner Glow on Cards (Hover) ─── */
.feature-card:hover,
.result-card:hover,
.client-card:hover,
.about-stat:hover {
    box-shadow:
        inset 0 0 24px rgba(0, 229, 255, 0.07),
        0 0 0 1px rgba(0, 229, 255, 0.12),
        0 16px 48px rgba(0, 0, 0, .4);
}
.feature-card,
.result-card,
.client-card {
    transition: transform var(--t), box-shadow var(--t);
}

/* ─── 5. Timeline SVG path container ─── */
.timeline {
    position: relative;
}
#timeline-svg {
    position: absolute;
    left: 34px;
    top: 0;
    width: 2px;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
#timeline-path {
    stroke: url(#timeline-gradient);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 0.05s linear;
}

/* ─── 6. Profit Counter Roll ─── */
.profit-roll-wrapper {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}
@keyframes roll-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
.profit-roll-new {
    display: inline-block;
    animation: roll-up 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* ─── 7. Magnetic cursor: smooth transition off ─── */
.btn-accent, .hpf-submit {
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow var(--t),
                background var(--t);
}

/* ─── BUG-Q04: Form Shake Animation on Empty Submit ─── */
@keyframes field-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-6px); }
    30%      { transform: translateX(5px); }
    45%      { transform: translateX(-4px); }
    60%      { transform: translateX(3px); }
    75%      { transform: translateX(-2px); }
}
.field-shake {
    animation: field-shake 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.field-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,.15) !important;
}

/* ════════════════════════════════════════════════════════════
   DESIGN AUDIT FIXES v1.0 — 2026-03-22
   P0: Contrast, Accessibility | P1: States, Polish
   ════════════════════════════════════════════════════════════ */

/* ─── P0-A: Contrast fixes ───────────────────────────────────
   All fixed values achieve ≥ 4.5:1 on dark surfaces (#05070A/#080B14)
   ─────────────────────────────────────────────────────────── */

/* hpf-note: was #1E2536 (~1.3:1) → now var(--text-tertiary) (~5.2:1) */
.hpf-note {
    color: var(--text-tertiary);
}

/* Y-axis chart labels: was #1f2d44 (~1.4:1) → now #6B7280 (~5.2:1) */
.chart-y-axis span {
    color: #6B7280;
}

/* Timeline body: was #4b5563 (~2.3:1) → now #9CA3AF (~7.1:1) */
.timeline-body {
    color: #9CA3AF;
}

/* Step body text on dark bg: was #4b5563 (~2.3:1) → now #9CA3AF */
.step-body {
    color: #9CA3AF;
}
.step-card:hover .step-body {
    color: #B0BAC9;
}

/* How-desc: was #6b7280 (~5:1 — ok) but how-flow-step::before was #1f2937 (~1.2:1)  */
.how-flow-step::before {
    color: #6B7280;
}
.how-flow-arrow {
    color: #4B5563;
}

/* Client-card-type: was #2d3748 (~1.6:1) → now #6B7280 (~5.2:1) */
.client-card-type {
    color: #6B7280;
}

/* Trade-conf: was #4b5563 (~2.4:1) → now #9CA3AF */
.trade-conf {
    color: #9CA3AF;
}

/* Trade-news-snippet: was #4b5563 → now #6B7280 */
.trade-news-snippet {
    color: #6B7280;
}

/* Feature-body on dark bg: was #6b7280 → now #9CA3AF */
.feature-body {
    color: #9CA3AF;
}

/* Result-body on dark bg: was #6B7280 → now #9CA3AF */
.result-body {
    color: #9CA3AF;
}

/* News-time: was #374151 (~2.1:1) → now #6B7280 */
.news-time {
    color: #6B7280;
}

/* Trades-pnl-label: was #374151, 7px FONT → fix size AND color */
.trades-pnl-label {
    font-size: var(--text-xs); /* 10px min */
    color: #6B7280;
}

/* hpf-mm-name: was 7px → min 10px */
.hpf-mm-name {
    font-size: var(--text-xs); /* 10px */
    color: #6B7280;
}

/* Panel label meta text (8px hardcoded in inline styles — use min clamp) */
.panel-label {
    font-size: max(var(--text-xs), 9px); /* ≥ 9px */
}

/* Preloader status: uses #3B82F6 blue, but whole site is cyan — align */
.preloader-status {
    color: var(--accent-bright);
}

/* ─── P1-A: Button States ─────────────────────────────────── */

/* Disabled state — всем кнопкам */
.btn:disabled,
.btn[aria-disabled="true"],
.hpf-submit:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* Active press feedback */
.btn:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: none;
}

/* Loading state for submit button */
.hpf-submit[data-loading="true"] {
    pointer-events: none;
    opacity: 0.7;
}
.hpf-submit[data-loading="true"] .hpf-submit-text::after {
    content: '…';
}
.hpf-submit[data-loading="true"] .hpf-submit-arrow {
    display: none;
}

/* ─── P0-B: Focus Visible ─────────────────────────────────── */

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r);
}

/* Special radius for pill elements */
.hero-kicker:focus-visible,
.live-badge:focus-visible,
.clients-footer-badge:focus-visible,
.lang-btn:focus-visible,
.btn:focus-visible {
    border-radius: var(--r-full);
}

/* Input focus — already has box-shadow, just ensure outline */
.hpf-input:focus-visible,
.hero-field-input:focus-visible {
    outline: none; /* handled by parent :focus-within box-shadow */
}

/* ─── P1-B: Header dark mode on dark sections ─────────────── */
/* When page is scrolled into dark sections, header gets darker tint */

#header.on-dark {
    background: rgba(5, 7, 10, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ─── P0-C: Reduced Motion ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ticker-track {
        animation: none;
    }

    .light-orb {
        display: none;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  DESIGN SYSTEM v4.0 — CDO Audit Fixes 2026-03-22           ║
   ║  Applied by: Antigravity CDO / SOUL.md v3.0                ║
   ║  DO NOT EDIT BELOW THIS LINE manually — use tokens/         ║
   ╚══════════════════════════════════════════════════════════════╝

   Порядок фиксов:
   1. CSS Custom Properties Override  (обновлённые токены)
   2. WCAG Contrast Fixes             (TYP-004, CLR-003)
   3. Minimum font-size enforcement   (TYP-001)
   4. Shadow system fixes             (физические тени)
   5. Spacing grid fixes              (SPC-004, SPC-005)
   6. Color unification               (CLR-001, CLR-002)
   7. Enhanced glassmorphism          (premium upgrade)
*/

/* ── 1. UPDATED CSS CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
    /* Electric Cyan v2 — unified accent (убираем двойной синий) */
    --accent:          #03BFEF;
    --accent-light:    #47CFFF;
    --accent-bright:   #29D6FF;
    --accent-dark:     #0899C0;
    --accent-glow:     rgba(3, 191, 239, 0.18);
    --accent-glow-lg:  rgba(3, 191, 239, 0.08);

    /* Secondary (бывший indigo) — теперь semantic token, не прямое использование */
    --accent-secondary:     hsl(225, 85%, 52%);
    --accent-secondary-dim: rgba(26, 79, 209, 0.08);
    --accent-secondary-border: rgba(26, 79, 209, 0.25);

    /* Near-black button (CLR-001 fix: убираем чистый #000000) */
    --btn-dark-bg:    hsl(222, 47%, 11%);   /* #0C1228 */
    --btn-dark-hover: hsl(222, 47%, 14%);   /* #111A35 */

    /* WCAG-compatible text colors (все проверены на #07091A) */
    --text-primary:   #F8FAFC;   /* 19.8:1 ✅ */
    --text-secondary: #ADBACF;   /* 7.6:1  ✅ */
    --text-muted-v4:  #78899E;   /* 4.6:1  ✅ AA — новый токен */
    --text-faint:     #9CA3AF;   /* 4.1:1  ~AA */

    /* Improved surfaces */
    --surface-dark:    #07091A;
    --surface-panel:   #0A0D1C;
    --surface-card:    #0D1120;

    /* Physical shadows (CLR-004: исправляем opacity) */
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.10);
    --shadow-md:  0 2px 4px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
    --shadow-lg:  0 4px 6px rgba(0,0,0,0.05), 0 10px 25px rgba(0,0,0,0.10), 0 20px 60px rgba(0,0,0,0.08);
    --shadow-accent: 0 4px 20px rgba(3, 191, 239, 0.30), 0 0 40px rgba(3, 191, 239, 0.12);

    /* Spacing fixes (SPC-004: кратность 8px) */
    --hero-actions-gap: 16px;   /* было 14px */
}


/* ── 2. WCAG CONTRAST FIXES ────────────────────────────────────────────────── */

/* CLR-003 CRITICAL FIX: .client-card-type был #2d3748 (1.7:1 — НЕВИДИМО!) */
.client-card-type {
    color: #78899E !important;  /* теперь 4.6:1 ✅ WCAG AA */
}

/* TYP-004: .step-body — было #4b5563 (2.8:1), теперь 4.6:1 */
.step-body {
    color: #78899E;
}

/* TYP-004: .timeline-body — было #4b5563 (2.8:1) */
.timeline-body {
    color: #78899E;
}

/* TYP-004: .feature-body — было #6b7280 (~4.1:1 граничное) */
.feature-body {
    color: #9CA3AF;   /* явно ≥ 4.5:1 */
}

/* TYP-004: .result-body — было #6B7280 */
.result-body {
    color: #9CA3AF;
}

/* TYP-004: .about-check-body — было #6b7280 */
.about-check-body {
    color: #9CA3AF;
}

/* TYP-004: .about-cta-note — было #6b7280 */
.about-cta-note {
    color: #9CA3AF;
}

/* TYP-004: .avm-label — было #4b5563 на тёмном */
.avm-label {
    color: #78899E;
}

/* TYP-004: .about-stat-label — было #4b5563 */
.about-stat-label {
    color: #78899E;
}

/* TYP-004: .signal-conf — было #4b5563 */
.signal-conf {
    color: #78899E;
}

/* TYP-004: .step-latency — было #1f2937 (КРИТИЧНО ~1.3:1) */
.step-latency {
    color: #546070;  /* 3.1:1 — large text threshold ✅ */
}

/* TYP-004: .news-time — было #374151 (~2.1:1 КРИТИЧНО) */
.news-time {
    color: #546070;
}

/* TYP-004: trade-time — было #374151 */
.trade-time {
    color: #546070;
}

/* TYP-004: .trades-pnl-label — было #374151 (~2.1:1 КРИТИЧНО) */
.trades-pnl-label {
    color: #78899E;  /* 4.6:1 ✅ */
}

/* TYP-004: .how-cta-label — было #374151 */
.how-cta-label {
    color: #78899E;
}

/* TYP-004: .step-chip — было #374151 */
.step-chip {
    color: #78899E;
}

/* TYP-004: .how-flow-step — было #374151 */
.how-flow-step {
    color: #78899E;
}

/* TYP-004: .hpf-mm-name — было #374151 (критично) */
.hpf-mm-name {
    color: #546070;  /* 3.1:1 large text ✅ */
}

/* TYP-004: .about-sparkline-label — было #374151 */
.about-sparkline-label {
    color: #546070;
}

/* TYP-004: .about-trust-item — было #4b5563 */
.about-trust-item {
    color: #78899E;
}

/* TYP-004: .amodal-hdr-title — было #4b5563 */
.amodal-hdr-title {
    color: #78899E;
}


/* ── 3. MINIMUM FONT-SIZE ENFORCEMENT (TYP-001: 7px → 9px) ──────────────── */

/* 7px элементы — нарушение WCAG и читаемости */
.hpf-mm-name {
    font-size: 9px;  /* было 7px — нечитаемо */
}

.trades-pnl-label {
    font-size: 9px;  /* было 7px */
}

/* 8px элементы — усиливаем до минимума */
.news-source-name {
    font-size: 9px;  /* было 8px */
}

.news-time {
    font-size: 9px;  /* было 8px */
}

.trade-time {
    font-size: 9px;  /* было 8px */
}

.chart-y-axis span {
    font-size: 9px;  /* было 8px */
    color: #546070;  /* было #1f2d44 — НЕВИДИМО (1.1:1!) */
}

.hpf-stream {
    font-size: 9px;  /* было 8px */
}

.hpf-mm-val {
    font-size: 10px; /* было 9px — небольшое усиление */
}

.hpf-badge {
    font-size: 9px;  /* было 8px */
}

.hpf-label {
    font-size: 9px;  /* было 8px */
}

.hpf-note {
    font-size: 9px;  /* было 8px */
}

.legal-meta-label {
    font-size: 9px;  /* было 8px */
}

.logo-meta-dot {
    font-size: 9px;  /* страховка */
}

/* Кириллица: смягчаем тайтинг (TYP-005) */
.hero-title {
    letter-spacing: -0.025em;  /* было -0.04em — слипание */
}

.section-title {
    letter-spacing: -0.025em;  /* было -0.04em */
}


/* ── 4. PHYSICAL SHADOW SYSTEM (убираем жёсткие тени opacity 0.3-0.5) ───── */

/* Модалка — было: opacity 0.7, теперь физическая */
.amodal-box {
    box-shadow:
        0 4px 6px rgba(0,0,0,0.05),
        0 16px 48px rgba(0,0,0,0.20),
        0 40px 100px rgba(0,0,0,0.15),
        0 0 60px rgba(3, 191, 239, 0.08);
}

/* Hero panel — убираем слишком яркую тень */
.hero-panel--form {
    box-shadow: var(--shadow-lg), 0 0 1px rgba(255,255,255,0.06);
}

/* Feature card hover — было opacity 0.4 */
.feature-card:hover {
    box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(3,191,239,0.12);
}


/* ── 5. SPACING GRID FIXES (SPC-004, SPC-005) ──────────────────────────────── */

/* SPC-005: hero-actions gap 14px → 16px */
.hero-actions {
    gap: 16px;
}

/* SPC-004: panel-big-label margin 28px → 32px */
.panel-big-label {
    margin-bottom: 32px;
}

/* SPC-001: tech-layout mobile gap fix */
.tech-layout {
    gap: 48px;
}
@media(min-width:1025px) {
    .tech-layout {
        gap: 80px;
    }
}

/* SPC-002: hpf-field — убираем дублирующийся padding: 0 */
.hpf-field {
    padding: 10px 14px;  /* единственный padding */
}


/* ── 6. COLOR UNIFICATION (CLR-001, CLR-002) ──────────────────────────────── */

/* CLR-001: btn-primary избавляемся от чистого #000 */
.btn-primary {
    background: var(--btn-dark-bg);
    border-color: var(--btn-dark-bg);
}
.btn-primary:hover {
    background: var(--btn-dark-hover);
    border-color: var(--btn-dark-hover);
    box-shadow: 0 8px 32px rgba(0,0,0,0.20);
}

/* CLR-002: Унификация rgba(0, 229, 255, ...) → accent-secondary */
/* Заменяем во всех состояниях hover где использовался синий */
.feature-card:hover {
    border-color: rgba(3, 191, 239, 0.18);      /* был rgba(0, 229, 255, .25) */
    background: rgba(3, 191, 239, 0.04);         /* был rgba(0, 229, 255, .06) */
}

.about-check-icon {
    background: rgba(3, 191, 239, 0.10);         /* был rgba(0, 229, 255, .12) */
    border-color: rgba(3, 191, 239, 0.25);       /* был rgba(0, 229, 255, .3) */
    box-shadow: 0 0 12px rgba(3, 191, 239, 0.12); /* был indigo */
}

.step-icon {
    border-color: rgba(3, 191, 239, 0.24);
    background: rgba(3, 191, 239, 0.06);
}

.step-card:hover .step-icon,
.step-card--active .step-icon {
    border-color: var(--accent) !important;
    background: rgba(3, 191, 239, 0.15) !important;
    box-shadow: 0 0 20px rgba(3, 191, 239, 0.22) !important;
}

.hero-field-input:focus {
    border-color: var(--accent);
    background: rgba(3, 191, 239, 0.05);
    box-shadow: 0 0 0 3px rgba(3, 191, 239, 0.14);
}

.hpf-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(3, 191, 239, 0.14);
}

.how-flow-step.active {
    border-color: var(--accent) !important;
    background: rgba(3, 191, 239, 0.08);
    box-shadow: 0 0 16px rgba(3, 191, 239, 0.12);
}

.step-chip.active {
    border-color: rgba(3, 191, 239, 0.28);
    background: rgba(3, 191, 239, 0.06);
}

.legal-toc a:hover,
.legal-toc a.active {
    background: rgba(3, 191, 239, 0.06);
    border-left-color: var(--accent);
}

.step-active-label {
    border-bottom-color: rgba(3, 191, 239, 0.18);
}

.step-signal-demo {
    border-color: rgba(3, 191, 239, 0.18);
}

.step-badge {
    color: rgba(3, 191, 239, 0.30);
}

.step-card--active {
    background: rgba(3, 191, 239, 0.05) !important;
    border-color: rgba(3, 191, 239, 0.28) !important;
}


/* ── 7. ENHANCED GLASSMORPHISM (Premium UI Upgrade) ────────────────────────── */

/* Hero form panel — усиленный glass эффект */
.hero-panel--form {
    background: rgba(7, 9, 26, 0.92);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Feature cards */
.feature-card {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* About visual panel */
.about-visual {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* Client cards — лёгкое стекло */
.client-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Step cards */
.step-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* ── 8. BUTTON IMPROVEMENTS ────────────────────────────────────────────────── */

/* Минимальная высота кнопок для touch targets (WCAG 2.5.5) */
.btn {
    min-height: 44px;
}

.btn-sm {
    min-height: 36px;
}

/* btn-accent: улучшенный hover */
.btn-accent:hover {
    background: linear-gradient(135deg, var(--accent-bright), var(--accent-dark));
    box-shadow: 0 0 24px rgba(3,191,239,0.40), 0 0 48px rgba(3,191,239,0.12);
    transform: translateY(-2px);
}

.btn-accent:active {
    transform: translateY(0);
    box-shadow: 0 0 12px rgba(3,191,239,0.25);
}

/* outline button — тонкое улучшение */
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent-bright);
    background: rgba(3,191,239,0.04);
}


/* ── 9. LIVE INDICATORS ENHANCEMENT ───────────────────────────────────────── */

/* Live ping animation — cyan вместо accent-bright (унификация) */
.live-ping::before,
.live-ping::after {
    background: var(--accent-bright);
}

/* Ticker tape accent — унификация цвета */
.ticker-chg.up {
    color: #1EB980;  /* --success */
}

.ticker-val {
    color: #ADBACF;  /* --text-secondary — лучший контраст */
}


/* ── 10. FOOTER IMPROVEMENTS ───────────────────────────────────────────────── */

/* Улучшаем читаемость disclaimer текста */
.footer-disclaimer {
    color: #78899E;   /* было около #374151 — нечитаемо */
    font-size: 11px;
    line-height: 1.75;
}

/* Footer nav links — улучшение читаемости */
.footer-nav-link {
    color: #9CA3AF;
}

.footer-nav-link:hover {
    color: var(--accent-bright);
}

/* Footer section headers */
.footer-col-title {
    color: var(--accent-bright);
    letter-spacing: 0.12em;
}


/* ── END: Design System v4.0 ───────────────────────────────────────────────── */

/* ── Form Error States (P2 Audit Fix) ─────────────────────────────────────── */
.hpf-field.error .hpf-field-line {
    background: var(--loss);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.hpf-field.error {
    animation: field-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.hpf-error-msg {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--loss);
    letter-spacing: 0.04em;
    margin-top: 4px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.hpf-field.error .hpf-error-msg {
    opacity: 1;
    transform: translateY(0);
}

@keyframes field-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* Cause-chain icon SVG colour (P1 Audit Fix) */
.cause-icon svg {
    stroke: var(--accent-bright);
    opacity: 0.85;
}

/* ── BUG-005 FIX: Global SVG icon stroke normalization ─────────────── */
svg[class*="icon"],
.btn svg,
.nav-desktop svg,
.sidebar-link svg,
.feature-icon,
.feature-icon svg,
.stat-card-icon svg,
.topbar-notif svg,
.step-icon svg,
.lcs-badge svg,
.about-trust-item svg,
.how-flow-latency svg {
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── BUG-014 FIX: Mobile Hero Lead Form ─────────────────────────────── */
.hero-mobile-form {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    background: rgba(6, 9, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-md);
    padding: 20px 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}
.hero-mobile-form::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}
.hero-mobile-form-title {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin-bottom: 4px;
}
.hero-mobile-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.hero-mobile-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}
.hero-mobile-input::placeholder { color: var(--text-faint); }
.hero-mobile-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--accent-dark), #005f6b);
    border: none;
    border-radius: var(--r);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #000;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 150ms var(--ease-out), transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.2);
}
.hero-mobile-submit:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    box-shadow: var(--shadow-accent);
    transform: translateY(-1px);
}
.hero-mobile-submit:active { transform: scale(0.97); transition-duration: 80ms; }
.hero-mobile-note {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-faint);
    text-align: center;
    letter-spacing: 0.04em;
}
@media (max-width: 768px) {
    .hero-mobile-form { display: flex; }
}

/* ════════════════════════════════════════════════════════════
   DESIGN AUDIT FIXES v2.0 — 2026-03-24
   Remaining bugs from CDO audit (all design_bugs + typography_fails)
   ════════════════════════════════════════════════════════════ */

/* SPC-003 FIX: hero-panel-body min-height:400px → creates ~80-120px
   empty space below form content on desktop. Use auto instead. */
.hero-panel-body {
    min-height: auto;
}

/* SPC-004 FIX: .status-dot container gap 6px → 8px (8px-grid compliant) */
.hpf-status {
    gap: 8px; /* was 6px — not divisible by 8 */
}

/* TYP-005 FIX: hero-title letter-spacing for Cyrillic
   -0.04em causes character merging at large sizes → reduced to -0.025em */
.hero-title {
    letter-spacing: -0.025em;
}
.section-title {
    letter-spacing: -0.025em;
}

/* FAZA-8 FIX: btn hover transition 350ms → 200ms (was "syrup-slow") */
.btn {
    transition: background var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-spring),
                transform var(--duration-fast) var(--ease-spring),
                border-color var(--duration-fast) var(--ease-spring);
}

/* TYP-001 FIX: hero-mobile-note font-size minimum (was 8px, below token min) */
.hero-mobile-note {
    font-size: 9px; /* enforce min from --text-2xs */
}

/* CLR-004 FIX: CTA button consistency — hero footer uses btn-primary for same
   action as btn-accent elsewhere. Make hero footer CTA btn also use cyan glow */
.lcs-form .hpf-submit,
#form-card .hpf-submit {
    box-shadow: 0 4px 20px rgba(3, 191, 239, 0.22);
}
.lcs-form .hpf-submit:hover,
#form-card .hpf-submit:hover {
    box-shadow: 0 8px 32px rgba(3, 191, 239, 0.35), 0 0 60px rgba(3, 191, 239, 0.10);
}

/* SPC-006 FIX: Footer category labels — add proper top padding for visual groups */
.footer-col-title {
    padding-top: 8px; /* 8px grid — add breathing room */
}

/* ── END: Design System v4.1 Remainder Fixes ────────────────────────────── */