/* ============================================================
   VolSurfers v2 — Premium dark fintech design system
   Surfaces → ink → accent → components → motion
   ============================================================ */

:root{
  /* Surfaces */
  --bg:        #05070D;
  --bg-2:      #070B14;
  --bg-3:      #0A101C;
  --card:      rgba(151,168,200,0.05);
  --card-2:    rgba(151,168,200,0.08);
  --border:    rgba(151,168,200,0.13);
  --border-2:  rgba(151,168,200,0.22);

  /* Ink */
  --ink:       #EAF0FA;
  --ink-2:     #A3B1C9;
  --ink-3:     #76839E;

  /* Accent system */
  --accent:    #38D8EC;   /* electric cyan  */
  --accent-2:  #8B7CF6;   /* violet         */
  --long:      #2FD6C3;   /* teal  = LONG   */
  --cash:      #F6465D;   /* trading red = SHORT accents  */
  --btc-orange:#F7931A;   /* bitcoin orange (charts)      */
  --spx-blue:  #4B9EF9;   /* S&P bar        */
  --gold:      #F5C84B;   /* gold bar       */
  --grad: linear-gradient(120deg, var(--accent), var(--accent-2));

  /* Chart tokens */
  --chart-grid:   rgba(151,168,200,0.09);
  --chart-axis:   rgba(151,168,200,0.16);
  --chart-muted:  #64748B;

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Rhythm */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --container: 1160px;
  --nav-h: 68px;

  /* Motion */
  --ease-out: cubic-bezier(.22,.9,.28,1);
  --ease-spring: cubic-bezier(.34,1.4,.44,1);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100dvh;
}
img,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; touch-action:manipulation; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; touch-action:manipulation; }
::selection{ background:rgba(56,216,236,0.28); }

h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.12; letter-spacing:-0.015em; font-weight:600; }
.h-display{ font-size:clamp(2.5rem, 7vw, 4.6rem); font-weight:700; letter-spacing:-0.03em; }
.h-section{ font-size:clamp(1.75rem, 4.4vw, 2.7rem); letter-spacing:-0.02em; }
.h-card{ font-size:clamp(1.15rem, 2.4vw, 1.4rem); }
.lead{ font-size:clamp(1.02rem, 2.1vw, 1.2rem); color:var(--ink-2); max-width:58ch; }
.small{ font-size:0.875rem; color:var(--ink-3); }

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); opacity:0.7; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--accent); opacity:0.7; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(20px, 4.5vw, 40px); }
.section{ padding:clamp(72px, 12vh, 130px) 0; position:relative; }

/* ---------- Ambient background ---------- */
.orbs{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.orb{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:0.16;
  will-change:transform;
  animation:orbFloat 26s var(--ease-out) infinite alternate;
}
.orb-a{ width:52vw; height:52vw; max-width:720px; max-height:720px; background:#0E7490; top:-18%; left:-12%; }
.orb-b{ width:44vw; height:44vw; max-width:600px; max-height:600px; background:#4C3D9E; top:30%; right:-16%; animation-delay:-9s; animation-duration:32s; }
.orb-c{ width:36vw; height:36vw; max-width:480px; max-height:480px; background:#0B4F5E; bottom:-14%; left:24%; animation-delay:-18s; animation-duration:38s; }
@keyframes orbFloat{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{   transform:translate3d(6vw, 4vh, 0) scale(1.12); }
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.5;
  background-image:radial-gradient(rgba(151,168,200,0.045) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, black 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, black 30%, transparent 100%);
}

/* ---------- Nav ---------- */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(5,7,13,0.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color 300ms ease, background 300ms ease;
}
.topnav.scrolled{ border-bottom-color:var(--border); background:rgba(5,7,13,0.82); }
.topnav .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:none; padding:0 clamp(20px, 3vw, 46px);
}

.brand{ display:flex; align-items:center; gap:11px; }
.brand .logo-mark{ width:30px; height:30px; flex-shrink:0; }
.brand-word{
  font-family:var(--font-mono); font-weight:500; font-size:0.98rem;
  letter-spacing:0.04em; color:var(--ink); text-transform:lowercase;
}
.brand-word .cursor{
  color:var(--accent); font-weight:600;
  animation:blinkCursor 1.1s step-end infinite;
}
@keyframes blinkCursor{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-link{
  padding:9px 15px; border-radius:10px; font-size:0.92rem; font-weight:500;
  color:var(--ink-2); transition:color 160ms ease, background 160ms ease;
}
.nav-link:hover{ color:var(--ink); background:var(--card-2); }
.nav-link.active{ color:var(--ink); background:var(--card-2); }
.nav-link .soon-tag{
  font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.08em;
  color:var(--accent-2); vertical-align:super; margin-left:3px;
}

.badge-live{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.74rem; font-weight:500; letter-spacing:0.06em;
  padding:8px 14px; border-radius:999px;
  background:var(--card); border:1px solid var(--border);
  white-space:nowrap;
}
.badge-live .dot{ width:7px; height:7px; border-radius:50%; background:var(--long); position:relative; flex-shrink:0; }
.badge-live .dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--long); opacity:0.7;
  animation:pulse 2.2s ease-out infinite;
}
.badge-live.cash .dot{ background:var(--cash); }
.badge-live.cash .dot::after{ border-color:var(--cash); }
.badge-live .state{ font-weight:700; color:var(--long); }
.badge-live.cash .state{ color:var(--cash); }
@keyframes pulse{ 0%{ transform:scale(0.6); opacity:0.8; } 100%{ transform:scale(1.9); opacity:0; } }

/* Mobile nav */
.nav-burger{ display:none; width:44px; height:44px; border-radius:10px; position:relative; z-index:120; }
.nav-burger span{
  position:absolute; left:12px; right:12px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform 300ms var(--ease-out), opacity 200ms ease, top 300ms var(--ease-out);
}
.nav-burger span:nth-child(1){ top:16px; } .nav-burger span:nth-child(2){ top:22px; } .nav-burger span:nth-child(3){ top:28px; }
.nav-burger.open span:nth-child(1){ top:22px; transform:rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ top:22px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:110; display:flex; flex-direction:column;
  justify-content:center; padding:0 clamp(28px,8vw,60px); gap:6px;
  background:rgba(5,7,13,0.92);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  opacity:0; pointer-events:none; transition:opacity 280ms ease;
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{
  font-family:var(--font-display); font-size:clamp(2rem,9vw,2.8rem); font-weight:600;
  padding:12px 0; color:var(--ink-2); border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; justify-content:space-between;
  transform:translateY(18px); opacity:0; transition:transform 420ms var(--ease-out), opacity 420ms ease, color 200ms ease;
}
.mobile-menu.open a{ transform:translateY(0); opacity:1; }
.mobile-menu.open a:nth-child(1){ transition-delay:60ms; } .mobile-menu.open a:nth-child(2){ transition-delay:120ms; }
.mobile-menu.open a:nth-child(3){ transition-delay:180ms; } .mobile-menu.open a:nth-child(4){ transition-delay:240ms; }
.mobile-menu a:hover, .mobile-menu a.active{ color:var(--ink); }
.mobile-menu .m-tag{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; color:var(--ink-3); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:0.98rem;
  padding:14px 26px; border-radius:13px; min-height:48px;
  transition:transform 200ms var(--ease-spring), box-shadow 250ms ease, background 200ms ease, border-color 200ms ease;
  will-change:transform;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{
  background:var(--grad); color:#03151C;
  box-shadow:0 8px 28px -8px rgba(56,216,236,0.45);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -8px rgba(56,216,236,0.55); }
.btn-ghost{
  background:var(--card); border:1px solid var(--border-2); color:var(--ink);
}
.btn-ghost:hover{ background:var(--card-2); transform:translateY(-2px); }
.btn .arrow{ transition:transform 220ms var(--ease-out); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---------- Cards ---------- */
.glass{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  position:relative;
}
.glass-hover{ transition:transform 300ms var(--ease-out), border-color 300ms ease, background 300ms ease; }
.glass-hover:hover{ transform:translateY(-4px); border-color:var(--border-2); background:var(--card-2); }

.card-pad{ padding:clamp(22px, 3.5vw, 34px); }

/* ---------- Stat tiles ---------- */
.stat-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.stat-tile{ padding:20px 22px; border-radius:var(--r-md); background:var(--card); border:1px solid var(--border); }
.stat-tile .label{ font-size:0.78rem; color:var(--ink-3); letter-spacing:0.02em; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.stat-tile .value{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem, 3vw, 1.9rem); letter-spacing:-0.02em; line-height:1.1;
}
.stat-tile .sub{ font-size:0.76rem; color:var(--ink-3); margin-top:5px; }
.stat-tile .value.pos{ color:var(--long); } .stat-tile .value.neg{ color:var(--cash); }

/* Meter (drawdown comparison) */
.meter{ height:10px; border-radius:999px; background:var(--card-2); overflow:hidden; position:relative; }
.meter .fill{
  height:100%; border-radius:999px; width:0;
  transition:width 1100ms var(--ease-out);
}

/* ---------- Chart chrome ---------- */
.chart-card{ overflow:hidden; }
.chart-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-bottom:18px;
}
.chart-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.chart-sub{ font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-3); letter-spacing:0.05em; margin-top:4px; }
.chart-box{ position:relative; width:100%; }
.chart-box canvas{ width:100%; height:100%; }

.legend{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:0.8rem; color:var(--ink-2); }
.legend .key{ display:inline-flex; align-items:center; gap:7px; }
.legend .key i{ width:16px; height:0; border-top:2.5px solid; border-radius:2px; display:inline-block; }
.legend .key.band i{ width:12px; height:12px; border:none; border-radius:3px; }

.chart-tip{
  position:absolute; z-index:5; pointer-events:none;
  background:rgba(8,12,22,0.94); border:1px solid var(--border-2);
  border-radius:12px; padding:10px 13px; min-width:150px;
  font-size:0.8rem; opacity:0; transform:translateY(4px);
  transition:opacity 140ms ease, transform 140ms ease;
  box-shadow:0 12px 32px -8px rgba(0,0,0,0.6);
}
.chart-tip.show{ opacity:1; transform:translateY(0); }
.chart-tip .tip-date{ font-family:var(--font-mono); font-size:0.68rem; color:var(--ink-3); margin-bottom:6px; letter-spacing:0.04em; }
.chart-tip .tip-row{ display:flex; align-items:center; gap:8px; justify-content:space-between; padding:2px 0; }
.chart-tip .tip-row .k{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); }
.chart-tip .tip-row .k i{ width:12px; border-top:2.5px solid; border-radius:2px; display:inline-block; }
.chart-tip .tip-row .v{ font-family:var(--font-mono); font-weight:600; color:var(--ink); }

/* Segmented control (range presets / toggles) */
.seg{
  display:inline-flex; gap:3px; padding:4px; border-radius:12px;
  background:var(--card); border:1px solid var(--border);
}
.seg button{
  padding:8px 15px; border-radius:9px; font-size:0.82rem; font-weight:500;
  color:var(--ink-3); min-height:36px;
  transition:color 160ms ease, background 200ms ease;
}
.seg button:hover{ color:var(--ink-2); }
.seg button.active{ background:var(--card-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--border-2); }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-md); border:1px solid var(--border); }
table.data{
  width:100%; border-collapse:collapse; font-size:0.86rem; min-width:520px;
  background:var(--card);
}
table.data th{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; text-align:left;
  padding:13px 18px; border-bottom:1px solid var(--border-2);
}
table.data td{
  padding:12px 18px; border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
table.data tr:last-child td{ border-bottom:none; }
table.data td.num{ font-family:var(--font-mono); font-size:0.8rem; }
/* position + OPEN chips: sit side by side, stack flush-left when the cell is
   too narrow (mobile) — gap handles both axes so nothing collides or indents */
.pos-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 8px; }
.sig-chip{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:0.78rem;
  padding:4px 11px; border-radius:999px; letter-spacing:0.04em;
}
.sig-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sig-chip.long{ color:var(--long); background:rgba(47,214,195,0.1); }
.sig-chip.cash{ color:var(--cash); background:rgba(246,70,93,0.11); }

/* ---------- Chart end-dot pulse ---------- */
.chart-pulse{ position:absolute; width:0; height:0; pointer-events:none; opacity:0; z-index:2; transition:opacity 400ms ease; }
.chart-pulse.on{ opacity:1; }
.chart-pulse.on::before{
  content:""; position:absolute; left:-4px; top:-4px; width:8px; height:8px;
  border-radius:50%; background:currentColor; box-shadow:0 0 14px currentColor;
}
.chart-pulse.on::after{
  content:""; position:absolute; left:-8px; top:-8px; width:16px; height:16px;
  border-radius:50%; border:1.5px solid currentColor;
  animation:pulse 2.3s ease-out infinite;
}

/* ---------- Reveal motion ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 700ms ease, transform 700ms var(--ease-out); transition-delay:var(--d, 0ms); will-change:opacity, transform; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-30px); }
[data-reveal="right"]{ transform:translateX(30px); }
[data-reveal="scale"]{ transform:scale(0.94); }
[data-reveal].in{ transform:none; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--border); padding:44px 0 54px; margin-top:40px; }
.footer .container{ max-width:none; padding:0 clamp(20px, 3vw, 46px); }
.footer .cols{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start; }
.footer .disclaimer{ font-size:0.78rem; color:var(--ink-3); max-width:62ch; line-height:1.7; }
.footer .fnav{ display:flex; gap:20px; font-size:0.85rem; color:var(--ink-2); }
.footer .fnav a:hover{ color:var(--ink); }

/* ---------- Page transitions ---------- */
.page-enter{ animation:pageIn 600ms var(--ease-out) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .nav-links, .topnav .badge-live{ display:none; }
  .nav-burger{ display:block; }
}
@media (min-width: 861px){
  .mobile-menu{ display:none; }
}

/* Phones: two labels were breaking to a second line and knocking their rows out
   of alignment — "Intra-trade Max DD" (needs 118px in a 115px box) and the chart
   legend (needs 311px in 290px). Tighter tile padding and a smaller, tighter
   legend buy back more than the deficit without touching the copy. */
@media (max-width: 520px){
  .stat-tile{ padding:20px 14px; }
  .legend{ gap:6px 10px; font-size:0.72rem; }
  .legend .key{ gap:5px; }
  .legend .key i{ width:12px; }
  .legend .key.band i{ width:10px; height:10px; }
}
/* Very narrow phones (SE-class, 320px): the four legend keys still need 255px in
   a 234px row, so tighten one more step rather than shrink type on every phone. */
@media (max-width: 360px){
  .legend{ gap:6px 8px; font-size:0.66rem; }
  .legend .key{ gap:4px; }
  .legend .key i{ width:10px; }
  .legend .key.band i{ width:9px; height:9px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .orb{ animation:none; }
}

/* ---------- Focus ---------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }