/* ==========================================================================
   Dark OS Trading — Index Page Styles
   Extracted from inline <style> for HTTP caching + maintainability.
   ========================================================================== */

/* ===== Fonts ===== */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/tajawal-arabic-400-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/tajawal-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/tajawal-arabic-700-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/tajawal-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/static/fonts/tajawal-arabic-900-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/static/fonts/tajawal-latin-900-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-padding-top: calc(var(--nav-stack-height, 9rem) + 1rem); }
body { font-family: 'Tajawal', sans-serif; background: #030303; overflow-x: hidden; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #D4AF37; border-radius: 3px; }

/* Skip link for keyboard nav */
.skip-link {
    position: absolute; top: -40px; left: 0;
    background: #D4AF37; color: #030303;
    padding: 8px 16px; font-weight: 700;
    z-index: 10000; text-decoration: none;
    border-radius: 0 0 6px 0;
}
.skip-link:focus { top: 0; }

.noise-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 9999; opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.gold-glow { box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.1); }
.gold-glow-strong { box-shadow: 0 0 30px rgba(212, 175, 55, 0.5), 0 0 60px rgba(212, 175, 55, 0.2); }
.hover\:gold-glow-strong:hover {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5), 0 0 60px rgba(212, 175, 55, 0.2);
}
.text-glow { text-shadow: 0 0 20px rgba(212, 175, 55, 0.5); }

.brand-logo-frame {
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #030303;
    border: 1px solid rgba(212, 175, 55, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.brand-logo-frame-sm { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; }
.brand-logo-frame-lg { width: 4rem; height: 4rem; border-radius: 1rem; }
.brand-logo-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.grid-bg {
    background-size: 50px 50px;
    background-image: linear-gradient(to right, rgba(212, 175, 55, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
    animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

#particles-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}
/* Disable expensive particle canvas on small screens for battery */
@media (max-width: 720px) {
    #particles-canvas { display: none; }
}

.glass-card {
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.1);
}
.glass-card:hover { border-color: rgba(212, 175, 55, 0.3); }

#navbar.nav-scrolled {
    background: rgba(17, 17, 17, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.hero-section {
    align-items: flex-start !important;
    min-height: auto;
    padding-top: calc(var(--nav-stack-height, 9rem) + 1rem) !important;
}
@media (min-width: 768px) {
    .hero-section {
        min-height: 100vh;
        padding-top: calc(var(--nav-stack-height, 8rem) + 2rem) !important;
    }
}

.pricing-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.pricing-card::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.7s;
}
.pricing-card:hover::before { left: 100%; }
.pricing-card.featured {
    border: 2px solid #D4AF37;
    transform: scale(1.05);
}
.pricing-card.featured:hover { transform: scale(1.08); }
.pricing-card:hover { transform: translateY(-6px); }
.pricing-card.featured:hover { transform: scale(1.05) translateY(-6px); }
.featured-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.375rem 1rem;
    line-height: 1.3;
}

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    50% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
}
.pulse-live { animation: pulse-gold 2s infinite; }

.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 3s infinite;
}
@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

.accordion-content {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease-out;
}
.accordion-content.active { max-height: 1000px; }

.count-up { font-variant-numeric: tabular-nums; }

#chart-container { position: relative; width: 100%; height: 500px; }
.static-chart-frame,
.static-chart-frame * { user-select: none; }
.static-chart-frame #chart-container {
    pointer-events: none;
    touch-action: pan-y;
}
@media (max-width: 768px) {
    #chart-container { height: 350px; }
    .pricing-card.featured { transform: scale(1); }
    .pricing-card.featured:hover { transform: scale(1.02); }
    .hero-title { font-size: 2.25rem !important; line-height: 1.2 !important; }
}
@media (max-width: 768px) {
    .pricing-card.featured:hover { transform: translateY(-3px); }
}

.modal-backdrop { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); }
.input-gold:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
}
.market-skeleton {
    color: transparent !important;
    min-width: 4.5rem;
    border-radius: 0.375rem;
    display: inline-block;
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
}
@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes flashGreen {
    0% { color: #00D084; text-shadow: 0 0 20px rgba(0,208,132,0.5); }
    100% { color: white; }
}
@keyframes flashRed {
    0% { color: #FF4757; text-shadow: 0 0 20px rgba(255,71,87,0.5); }
    100% { color: white; }
}
.flash-up { animation: flashGreen 0.5s ease; }
.flash-down { animation: flashRed 0.5s ease; }
.dir-ltr { direction: ltr; unicode-bidi: isolate; }
.bg-trade-red { background-color: #FF4757; }
.border-gray-800\/80 { border-color: rgba(31, 41, 55, 0.8); }
.text-gold-400\/90 { color: rgba(244, 208, 63, 0.9); }

.summary-plot-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(212, 175, 55, 0.08), rgba(3, 3, 3, 0) 45%),
        rgba(3, 3, 3, 0.72);
    border: 1px solid rgba(212, 175, 55, 0.12);
}
.summary-plot-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(212, 175, 55, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
    background-size: 48px 100%, 100% 36px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent 85%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent 85%);
}
.summary-plot-canvas { position: relative; z-index: 1; width: 100%; height: 180px; }
.summary-stat { background: rgba(3, 3, 3, 0.55); border: 1px solid rgba(31, 41, 55, 0.8); }
.summary-stat .font-mono { display: block; min-height: 1.25rem; }
.summary-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
.summary-plot-legend {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
}
.sentiment-bar-wrap { width: 100%; }
.sentiment-bar-meta {
    direction: ltr; display: flex; align-items: center;
    justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem;
}
.sentiment-bar {
    direction: ltr; display: flex; width: 100%; height: 0.75rem;
    overflow: hidden; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55);
}
.sentiment-bar-segment { height: 100%; min-width: 0; transition: width 0.45s ease; }
.sentiment-bar-negative { width: 50%; background: linear-gradient(90deg, #7f1d1d 0%, #ff4757 100%); }
.sentiment-bar-positive { width: 50%; background: linear-gradient(90deg, #00d084 0%, #064e3b 100%); }
@media (min-width: 768px) {
    .summary-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .summary-plot-canvas { height: 150px; }
}

/* ===== Intelligence-Lab visual layer ===== */
:root {
    --lab-cyan: #5fe7d8;
    --lab-cyan-dim: rgba(95, 231, 216, 0.18);
    --lab-amber: #ffb547;
    --lab-amber-dim: rgba(255, 181, 71, 0.18);
    --lab-line: rgba(255, 255, 255, 0.06);
    --lab-panel: rgba(8, 8, 9, 0.78);
    --lab-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --ui-temperature: 0.5;
    --ui-breath-speed: 1;
    --ui-activity: 1;
    --ui-glow-intensity: 1;
    --ui-heartbeat: 0;
}

.lab-status-strip {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; flex-wrap: wrap;
    padding: 6px 14px;
    font-family: var(--lab-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: rgba(231, 231, 231, 0.78);
    background:
        linear-gradient(90deg, rgba(95, 231, 216, 0.05), rgba(255, 181, 71, 0.04) 50%, rgba(95, 231, 216, 0.05)),
        rgba(3, 3, 3, 0.85);
    border-top: 1px solid var(--lab-line);
    border-bottom: 1px solid var(--lab-line);
    direction: ltr;
}
.lab-status-strip .dot {
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--lab-cyan);
    box-shadow: 0 0 8px var(--lab-cyan);
    display: inline-block;
    margin-inline-end: 6px;
}
.lab-status-strip .item { display: inline-flex; align-items: center; white-space: nowrap; }
.lab-status-strip .k { color: rgba(212, 175, 55, 0.85); margin-inline-end: 4px; }
.lab-status-strip .v { color: #fff; font-weight: 700; }
.lab-status-strip .sep { color: rgba(255, 255, 255, 0.18); margin: 0 6px; }
@media (max-width: 640px) {
    .lab-status-strip { font-size: 9.5px; padding: 5px 8px; gap: 10px; }
    .lab-status-strip .sep { display: none; }
}

.lab-terminal {
    background:
        radial-gradient(circle at 20% 10%, rgba(95, 231, 216, 0.06), transparent 55%),
        linear-gradient(180deg, rgba(11, 11, 12, 0.94), rgba(6, 6, 7, 0.92));
    border: 1px solid var(--lab-line);
    border-radius: 14px;
    font-family: var(--lab-mono);
    overflow: hidden;
    position: relative;
}
.lab-terminal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(95, 231, 216, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(95, 231, 216, 0.04) 1px, transparent 1px);
    background-size: 32px 100%, 100% 28px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent 90%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent 90%);
}
.lab-terminal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--lab-line);
    background: rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 1;
    direction: ltr;
}
.lab-terminal-head .dots { display: flex; gap: 6px; }
.lab-terminal-head .dots span {
    width: 9px; height: 9px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}
.lab-terminal-head .dots span:nth-child(1) { background: #ff5f56; }
.lab-terminal-head .dots span:nth-child(2) { background: #ffbd2e; }
.lab-terminal-head .dots span:nth-child(3) { background: #27c93f; }
.lab-terminal-head .title {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.lab-terminal-head .live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; color: var(--lab-cyan);
}
.lab-terminal-head .live .pulse {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--lab-cyan);
    box-shadow: 0 0 8px var(--lab-cyan);
    animation: lab-pulse 1.4s ease-in-out infinite;
}
@keyframes lab-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.lab-terminal-body {
    position: relative; z-index: 1;
    padding: 14px 16px 16px;
    height: 290px; overflow: hidden;
    font-size: 12.5px; line-height: 1.65;
    color: rgba(231, 231, 231, 0.85);
    direction: ltr; text-align: left;
}
@media (max-width: 640px) {
    .lab-terminal-body { height: 230px; font-size: 11px; padding: 10px 12px 12px; }
}
.lab-line {
    display: flex; gap: 10px; align-items: flex-start;
    opacity: 0; transform: translateY(8px);
    animation: lab-line-in 0.45s ease forwards;
}
@keyframes lab-line-in { to { opacity: 1; transform: translateY(0); } }
.lab-line .t { color: rgba(255, 255, 255, 0.38); min-width: 64px; }
.lab-line .tag {
    min-width: 64px; font-weight: 800; text-align: center;
    padding: 0 6px; border-radius: 4px;
    border: 1px solid currentColor;
}
.lab-line .body { color: rgba(231, 231, 231, 0.88); flex: 1; word-break: break-word; }
.lab-line.kind-data    .tag { color: #9ecbff; }
.lab-line.kind-signal  .tag { color: var(--lab-amber); }
.lab-line.kind-train   .tag { color: #d3aaff; }
.lab-line.kind-infer   .tag { color: var(--lab-cyan); }
.lab-line.kind-research.tag,
.lab-line.kind-research .tag { color: #f4d03f; }
.lab-line.kind-infra   .tag { color: #8ee06c; }

.lab-model-card {
    position: relative;
    background:
        radial-gradient(circle at 90% 0%, rgba(95, 231, 216, 0.06), transparent 60%),
        rgba(11, 11, 12, 0.78);
    border: 1px solid var(--lab-line);
    border-radius: 14px;
    padding: 18px 18px 16px;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.lab-model-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow: 0 18px 48px rgba(212, 175, 55, 0.08);
}
.lab-model-card .code {
    font-family: var(--lab-mono);
    font-size: 11px; letter-spacing: 0.12em;
    color: var(--lab-cyan); margin-bottom: 6px;
}
.lab-model-card .name {
    font-size: 16px; font-weight: 800;
    color: #fff; margin-bottom: 4px;
}
.lab-model-card .name-en {
    font-family: var(--lab-mono);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 14px;
    direction: ltr;
}
.lab-model-card .row {
    display: flex; gap: 8px;
    font-size: 12.5px; line-height: 1.7;
    color: rgba(231, 231, 231, 0.75);
}
.lab-model-card .row b {
    color: rgba(212, 175, 55, 0.85);
    font-weight: 700; min-width: 64px;
}
.lab-model-card .footer {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--lab-mono); font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    direction: ltr;
}
.lab-model-card .status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.lab-model-card .status-pill.live {
    color: #00d084;
    background: rgba(0, 208, 132, 0.10);
    border: 1px solid rgba(0, 208, 132, 0.35);
}
.lab-model-card .status-pill.live::before {
    content: ''; width: 6px; height: 6px; border-radius: 999px;
    background: #00d084; box-shadow: 0 0 6px #00d084;
}
.lab-model-card .status-pill.backtesting {
    color: var(--lab-amber);
    background: rgba(255, 181, 71, 0.10);
    border: 1px solid rgba(255, 181, 71, 0.32);
}
.lab-model-card .status-pill.backtesting::before {
    content: '○'; font-weight: 900; line-height: 1;
}

.grid-bg {
    transition: filter 0.8s ease, opacity 0.8s ease;
    filter: hue-rotate(calc((var(--ui-temperature) - 0.5) * -40deg))
            saturate(calc(0.8 + var(--ui-temperature) * 0.4));
}

.brand-logo-frame.heartbeat { animation: brand-heartbeat 0.9s ease-out; }
@keyframes brand-heartbeat {
    0%   { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 0 0 rgba(212,175,55,0.55); }
    40%  { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 0 8px rgba(212,175,55,0); }
    100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 0 0 rgba(212,175,55,0); }
}
@keyframes nav-heart {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.55; }
}
#navbar .heart-dot {
    animation: nav-heart calc(1.6s * var(--ui-breath-speed)) ease-in-out infinite;
}

.whisper-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 25; overflow: hidden;
}
.whisper {
    position: absolute;
    font-family: var(--lab-mono);
    font-size: 11px; letter-spacing: 0.18em;
    color: rgba(212, 175, 55, 0.55);
    text-transform: lowercase; white-space: nowrap;
    opacity: 0; filter: blur(0.6px);
    transition: opacity 1.6s ease, transform 6s linear, filter 0.6s ease;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}
.whisper.cool { color: rgba(95, 231, 216, 0.45); text-shadow: 0 0 10px rgba(95, 231, 216, 0.22); }
.whisper.warm { color: rgba(255, 181, 71, 0.55); text-shadow: 0 0 10px rgba(255, 181, 71, 0.25); }
.whisper.show { opacity: 1; }
.whisper.fade { opacity: 0; filter: blur(2px); }

.glass-card {
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.gold-glow {
    box-shadow:
        0 0 calc(20px * var(--ui-glow-intensity)) rgba(212, 175, 55, calc(0.3 * var(--ui-glow-intensity))),
        0 0 calc(40px * var(--ui-glow-intensity)) rgba(212, 175, 55, calc(0.1 * var(--ui-glow-intensity)));
}

body.war-mode { filter: saturate(0.7) contrast(1.08); }
body.war-mode .noise-overlay { opacity: 0.05; }
body.war-mode .grid-bg { opacity: 0.55; }

#activity-feed + span, #activity-feed { transition: opacity 0.4s ease; }
.glass-card:has(#activity-feed) span.bg-trade-green { transition: box-shadow 0.7s ease; }

.glass-card:not(.pricing-card):hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.45),
                0 0 0 1px rgba(212, 175, 55, 0.18);
}

#hero-price { transition: letter-spacing 0.6s ease; letter-spacing: calc(-0.01em * (var(--ui-activity) - 1)); }

.ai-scanning { gap: 0.4rem; }
.ai-scan-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--lab-cyan);
    box-shadow: 0 0 8px var(--lab-cyan);
    animation: ai-scan calc(2s * var(--ui-breath-speed)) ease-in-out infinite;
}
@keyframes ai-scan {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.4); opacity: 0.35; }
}

.chart-scars {
    position: absolute;
    inset: 49px 0 0 0;
    width: 100%;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: screen;
    opacity: 0.85;
}

.countdown-cell {
    position: relative;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 10px;
    padding: 0.75rem;
    min-width: 60px;
    text-align: center;
    overflow: hidden;
}
.countdown-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(212, 175, 55, 0.22), transparent 60%);
    opacity: 0;
    animation: countdown-breath calc(2.4s * var(--ui-breath-speed)) ease-in-out infinite;
}
.countdown-cell > div { position: relative; z-index: 1; }
@keyframes countdown-breath {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.countdown-sep {
    animation: countdown-blink calc(1.2s * var(--ui-breath-speed)) steps(1, end) infinite;
}
@keyframes countdown-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.35; }
}

.opportunity-ritual {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.opportunity-ritual.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.opportunity-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.6rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.20), rgba(255, 71, 87, 0.18));
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(8px);
    overflow: hidden;
}
.opportunity-button:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.85);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.45), 0 0 60px rgba(255, 71, 87, 0.18);
}
.opportunity-filament {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from 0deg,
        transparent 0%,
        rgba(212, 175, 55, 0.55) 18%,
        transparent 38%,
        transparent 60%,
        rgba(255, 71, 87, 0.45) 80%,
        transparent 100%);
    animation: filament-spin calc(6s * var(--ui-breath-speed)) linear infinite;
    opacity: 0.7;
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
            mask: radial-gradient(circle, transparent 58%, #000 60%);
}
@keyframes filament-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.opportunity-label {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
}
.opportunity-kicker {
    font-weight: 900;
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: 0.02em;
}
.opportunity-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}
@media (max-width: 480px) {
    .opportunity-sub { display: none; }
}

/* ==========================================================================
   NEW SECTIONS — Dark Psychology Build
   ========================================================================== */

/* ===== Risk Banner (top of hero) — anti-disqualification anchor ===== */
.risk-banner {
    background: linear-gradient(90deg, rgba(255, 71, 87, 0.08), rgba(212, 175, 55, 0.06), rgba(255, 71, 87, 0.08));
    border-top: 1px solid rgba(255, 71, 87, 0.18);
    border-bottom: 1px solid rgba(255, 71, 87, 0.18);
    padding: 8px 14px;
    font-size: 11px;
    color: rgba(255, 220, 220, 0.85);
    text-align: center;
    letter-spacing: 0.02em;
    direction: rtl;
}
.risk-banner strong { color: #ff7480; font-weight: 700; }

/* ===== Disqualification Section ===== */
.disqual-card {
    background: linear-gradient(180deg, rgba(255, 71, 87, 0.04), rgba(3, 3, 3, 0.7));
    border: 1px solid rgba(255, 71, 87, 0.15);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.disqual-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 71, 87, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 71, 87, 0.03) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
.disqual-card > * { position: relative; z-index: 1; }
.qualify-card {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.05), rgba(3, 3, 3, 0.7));
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.disqual-list li,
.qualify-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
.disqual-list li::before {
    content: '✕';
    color: #ff4757;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.qualify-list li::before {
    content: '◆';
    color: #D4AF37;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ===== Comparison Table ===== */
.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    direction: rtl;
    font-size: 0.9rem;
}
.compare-table thead th {
    background: rgba(212, 175, 55, 0.08);
    color: #D4AF37;
    font-weight: 800;
    padding: 0.875rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    white-space: nowrap;
}
.compare-table thead th:first-child {
    text-align: right;
    color: #fff;
    background: transparent;
}
.compare-table tbody td {
    padding: 0.875rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    vertical-align: middle;
}
.compare-table tbody td:first-child {
    color: #fff;
    font-weight: 700;
    background: rgba(3, 3, 3, 0.4);
}
.compare-table .col-us {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent);
    color: #fff !important;
    font-weight: 700;
}
.compare-table .yes { color: #00d084; font-weight: 800; }
.compare-table .no  { color: #ff4757; font-weight: 800; }
.compare-table .partial { color: var(--lab-amber); font-weight: 800; }
@media (max-width: 768px) {
    .compare-table { font-size: 0.8rem; }
    .compare-table thead th,
    .compare-table tbody td { padding: 0.625rem 0.5rem; }
}

/* ===== Methodology Stack (scientific depth proof) ===== */
.method-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(95, 231, 216, 0.08);
    border: 1px solid rgba(95, 231, 216, 0.25);
    border-radius: 999px;
    font-family: var(--lab-mono);
    font-size: 11px;
    color: var(--lab-cyan);
    direction: ltr;
}
.method-pill.amber {
    background: rgba(255, 181, 71, 0.08);
    border-color: rgba(255, 181, 71, 0.25);
    color: var(--lab-amber);
}
.method-pill.gold {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
    color: #D4AF37;
}

/* ===== Sticky Mobile CTA Bar ===== */
.sticky-mobile-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(3, 3, 3, 0.4), rgba(3, 3, 3, 0.96) 60%);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; gap: 0.65rem; align-items: center;
}
.sticky-mobile-cta.visible { transform: translateY(0); }
.sticky-mobile-cta .price-tag {
    font-family: var(--lab-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}
.sticky-mobile-cta .price-tag b {
    color: #D4AF37;
    font-size: 13px;
    display: block;
}
.sticky-mobile-cta button {
    flex: 1;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #D4AF37, #b8941f);
    color: #030303;
    border: none;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
}
@media (min-width: 768px) {
    .sticky-mobile-cta { display: none; }
}
/* Reserve space so footer content isn't covered on mobile */
@media (max-width: 767px) {
    body.has-sticky-cta { padding-bottom: 76px; }
}

/* ===== Toast Notifications (replaces alert) ===== */
.toast-stack {
    position: fixed;
    top: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    width: min(420px, 92vw);
}
.toast {
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(15, 15, 16, 0.96), rgba(8, 8, 9, 0.94));
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-right: 3px solid #D4AF37;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1.55;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-right-color: #ff4757; border-color: rgba(255, 71, 87, 0.25); }
.toast.success { border-right-color: #00d084; border-color: rgba(0, 208, 132, 0.25); }
.toast .title {
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
    color: #D4AF37;
}
.toast.success .title { color: #00d084; }
.toast.error .title { color: #ff4757; }

/* ===== Application Modal (replaces signup modal) ===== */
.app-modal-form .helper {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.35rem;
    line-height: 1.5;
}

/* ===== Quote Card (member theses) ===== */
.thesis-card {
    position: relative;
    padding: 1.5rem;
}
.thesis-card::before {
    content: '“';
    position: absolute;
    top: -0.5rem; right: 1rem;
    font-size: 4rem;
    line-height: 1;
    color: rgba(212, 175, 55, 0.25);
    font-family: serif;
}
.thesis-card .author-handle {
    font-family: var(--lab-mono);
    font-size: 11px;
    color: rgba(212, 175, 55, 0.7);
    direction: ltr;
    margin-top: 0.25rem;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .grid-bg, .brand-logo-frame.heartbeat, #navbar .heart-dot,
    .whisper, .pulse-live, .countdown-cell::before, .countdown-sep,
    .ai-scan-dot, .opportunity-filament, .shimmer::after, .lab-terminal-head .live .pulse,
    .lab-line, #particles-canvas { animation: none !important; transition: none !important; }
    .whisper { display: none; }
    .chart-scars { display: none; }
    #particles-canvas { display: none; }
    .toast { transition: none; }
}