/* ============================================================
   Trading Edge Academy — Phase 4 design layer
   Premium dark "trading desk" aesthetic.
   Display: Sora (geometric, technical) · Body: Inter
   Accent: signal-green #00C37A · gold #F4B400 · ink #050505
   ============================================================ */

:root{
  --green:#00C37A;
  --green-soft:rgba(0,195,122,.12);
  --green-line:rgba(0,195,122,.28);
  --gold:#F4B400;
  --ink:#050505;
  --panel:#0c0e0d;
  --panel-2:#121514;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --txt:#f3f5f4;
  --muted:#9aa3a0;
  --muted-2:#6b7370;
}

*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--ink);
  color:var(--txt);
  letter-spacing:-0.01em;
}
.font-display{ font-family:'Sora','Inter',sans-serif; letter-spacing:-0.03em; }

/* ---- Type rhythm ---- */
h1,h2,h3{ font-family:'Sora','Inter',sans-serif; letter-spacing:-0.03em; }
.eyebrow{
  font-family:'Sora',sans-serif;
  font-weight:700; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green);
}
.ticker-num{ font-family:'Sora',sans-serif; font-variant-numeric:tabular-nums; }

/* ---- Background textures ---- */
.bg-mesh{
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(0,195,122,.10), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(244,180,0,.06), transparent 70%),
    var(--ink);
}
.bg-grid{
  background-image:
    linear-gradient(rgba(0,195,122,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,195,122,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 40%,transparent 100%);
}
.glass{
  background:rgba(12,14,13,.66);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

/* ---- Cards ---- */
.card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-radius:1.5rem;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  border-color:var(--green-line);
  transform:translateY(-3px);
  box-shadow:0 18px 50px -24px rgba(0,195,122,.4);
}
.card-glow{ position:relative; overflow:hidden; }
.card-glow::before{
  content:""; position:absolute; inset:-1px;
  background:radial-gradient(140px 140px at var(--mx,50%) var(--my,0%),rgba(0,195,122,.14),transparent 70%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.card-glow:hover::before{ opacity:1; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'Sora',sans-serif; font-weight:700;
  border-radius:999px; padding:.95rem 1.8rem;
  transition:transform .15s ease, box-shadow .25s ease, background .25s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-green{
  background:var(--green); color:#021109;
  box-shadow:0 12px 34px -12px rgba(0,195,122,.7);
}
.btn-green:hover{ background:#2fe49a; box-shadow:0 16px 40px -10px rgba(0,195,122,.85); }
.btn-ghost{ border:1px solid var(--line-2); color:var(--txt); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.btn-gold{ background:var(--gold); color:#1a1300; box-shadow:0 12px 34px -12px rgba(244,180,0,.6); }
.btn-gold:hover{ background:#ffc928; }

/* ---- Pills / badges ---- */
.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--green-line); background:var(--green-soft);
  color:var(--green); border-radius:999px;
  padding:.45rem 1rem; font-size:.8rem; font-weight:700;
}
.dot-live{ width:.5rem; height:.5rem; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(0,195,122,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(0,195,122,0); } 100%{ box-shadow:0 0 0 0 rgba(0,195,122,0); } }

/* ---- Inputs ---- */
.field{
  width:100%;
  background:rgba(0,0,0,.5);
  border:1px solid var(--line);
  border-radius:.85rem;
  padding:.85rem 1rem;
  color:var(--txt); font-size:.95rem;
  transition:border-color .2s, box-shadow .2s;
}
.field::placeholder{ color:var(--muted-2); }
.field:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }

/* ---- Marquee strip ---- */
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; gap:3rem; animation:scroll 28s linear infinite; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---- Section frame ---- */
.wrap{ max-width:80rem; margin-inline:auto; padding-inline:1.25rem; }
@media(min-width:1024px){ .wrap{ padding-inline:2rem; } }

/* ---- Gradient text ---- */
.grad{
  background:linear-gradient(100deg,#fff 30%,var(--green) 75%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- Sparkline chart line ---- */
.spark path{ stroke:var(--green); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw 2.4s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green); outline-offset:2px;
}

/* legacy support for inner auth/checkout pages */
.soft-grid{
  background-image:
    linear-gradient(rgba(0,195,122,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,195,122,.06) 1px,transparent 1px);
  background-size:46px 46px;
}