:root {
  --ink:        #050810;
  --ink-2:      #0a0e1c;
  --paper:      #f4f1ea;
  --accent:     #10b981;   /* emerald — primary */
  --accent-2:   #22d3ee;   /* cyan — secondary */
  --accent-3:   #fbbf24;   /* amber — highlight */
  --short:      #f43f5e;   /* rose — for SHORT/loss markers */
  --edge:       rgba(255,255,255,0.07);
  --edge-strong:rgba(255,255,255,0.16);
}

html, body { background: var(--ink); color: #e6e8ef; }
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  font-family: 'Geist', system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
}
.display { font-family: 'Fraunces', serif; font-optical-sizing: auto; letter-spacing: -0.02em; }
.mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---- aurora background ---- */
.aurora-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(60% 50% at 12% 0%,  rgba(16,185,129,.20) 0%, transparent 60%),
    radial-gradient(55% 45% at 95% 10%, rgba(34,211,238,.18) 0%, transparent 62%),
    radial-gradient(50% 40% at 50% 100%, rgba(251,191,36,.10) 0%, transparent 60%),
    linear-gradient(180deg, #050810 0%, #0a0e1c 40%, #04060d 100%);
}
.aurora-bg::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    conic-gradient(from 220deg at 30% 20%,
      rgba(16,185,129,.14), rgba(34,211,238,.14), rgba(251,191,36,.08), rgba(16,185,129,.14));
  filter: blur(80px);
  animation: drift 32s linear infinite;
  mix-blend-mode: screen;
  opacity: .7;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(-3%, 2%, 0) rotate(180deg); }
  100% { transform: translate3d(0,0,0) rotate(360deg); }
}

/* ---- film grain ---- */
.grain::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .55;
  mix-blend-mode: overlay;
}

/* ---- glass surfaces ---- */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
  border: 1px solid var(--edge);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 30px 60px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.02);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid var(--edge-strong);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.glass-hover { transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
.glass-hover:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.20); }

/* ---- accent gradient text ---- */
.accent-text {
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- buttons ---- */
.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, #0d9668 100%);
  color: #001b12;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow:
    0 10px 30px -10px rgba(16,185,129,.45),
    inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .2s ease, box-shadow .3s ease, filter .2s;
  font-weight: 600;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 14px 34px -10px rgba(16,185,129,.55),
    0 6px 20px -6px rgba(34,211,238,.3),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.btn-ghost {
  border: 1px solid var(--edge-strong); color: #e6e8ef;
  transition: background .2s ease, border-color .3s;
}
.btn-ghost:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.28); }

/* ---- decorations ---- */
.dots {
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
}
.hair { border-top: 1px solid rgba(255,255,255,.08); }

@keyframes pulse-dot {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
.pulse-dot { animation: pulse-dot 2.4s ease-in-out infinite; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { opacity: 0; animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .18s; }
.d3 { animation-delay: .30s; } .d4 { animation-delay: .42s; }
.d5 { animation-delay: .54s; } .d6 { animation-delay: .66s; }

/* ---- price ticker marquee ---- */
.marquee { mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee-track { animation: slide 50s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- meter / progress ---- */
.meter-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
  box-shadow: 0 0 24px rgba(16,185,129,.35);
}

/* ---- chart-like sparkline placeholder grid ---- */
.spark {
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/12px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/100% 12px;
}

/* ---- section sentinel ---- */
.section-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* ---- watermark wordmark ---- */
.wordmark {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  letter-spacing: -0.08em;
  font-size: clamp(120px, 22vw, 300px);
  line-height: .8;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.015));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}

/* ---- chip / pill ---- */
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--edge);
}
.chip-long  { color: var(--accent);    background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.3); }
.chip-short { color: var(--short);     background: rgba(244,63,94,.10);  border-color: rgba(244,63,94,.3); }
.chip-info  { color: var(--accent-2);  background: rgba(34,211,238,.10); border-color: rgba(34,211,238,.3); }

::selection { background: rgba(16,185,129,.4); color: #001b12; }
html { scrollbar-gutter: stable; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
