/* ============================================================
   Landing page. Shares the tokens in styles.css, so the red
   and black here is the same red and black as the app.
   ============================================================ */
html,body{height:auto;overflow-x:hidden;overflow-y:auto}
body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.55}
img{max-width:100%;display:block}
::selection{background:rgba(212,175,55,.35)}

.wrap{width:min(1180px,100% - 44px);margin-inline:auto}

/* ---------- top bar ---------- */
.lnav{position:fixed;top:0;left:0;right:0;z-index:60;height:68px;
  display:flex;align-items:center;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
  border-bottom:1px solid transparent}
.lnav.solid{background:rgba(8,7,6,.82);backdrop-filter:blur(14px);border-bottom-color:var(--border-soft)}
.lnav .wrap{display:flex;align-items:center;gap:16px}
.lnav-brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.lnav-brand .name{font-weight:800;font-size:17px;letter-spacing:.4px}

.lang{display:flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03)}
.lang-btn{background:none;border:0;color:var(--text-3);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  padding:5px 11px;border-radius:999px;cursor:pointer;transition:.18s}
.lang-btn:hover{color:var(--text-2)}
.lang-btn.on{background:rgba(212,175,55,.16);color:#f7e9bb}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 20px;border-radius:999px;font-weight:700;font-size:13.5px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:.18s}
.btn-primary{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;
  box-shadow:0 6px 22px rgba(212,175,55,.32)}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 8px 28px rgba(212,175,55,.44)}
.btn-ghost{border-color:var(--border);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:#4a393d;background:rgba(255,255,255,.05)}
.btn-lg{height:48px;padding:0 26px;font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:120px 0 64px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
#dots{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.orb.a{width:660px;height:660px;top:-260px;left:-180px;opacity:.5;
  background:radial-gradient(circle,#d4af37,transparent 62%);animation:drift1 24s ease-in-out infinite}
.orb.b{width:540px;height:540px;bottom:-240px;right:-160px;opacity:.42;
  background:radial-gradient(circle,#8a6d1c,transparent 65%);animation:drift2 28s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,54px) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-64px,-46px) scale(1.07)}}
.hero-floor{position:absolute;left:50%;bottom:-12%;width:220%;height:52%;
  transform:translateX(-50%) perspective(440px) rotateX(65deg);
  background-image:linear-gradient(rgba(212,175,55,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(212,175,55,.14) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(to top,#000 4%,transparent 76%);
          mask-image:linear-gradient(to top,#000 4%,transparent 76%);
  animation:floorscroll 8s linear infinite}
@keyframes floorscroll{to{background-position:0 46px}}
.hero-vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,transparent 38%,rgba(0,0,0,.78) 100%)}

.hero-inner{position:relative;z-index:2;text-align:center;max-width:880px;margin-inline:auto}

.badge{display:inline-flex;align-items:center;gap:11px;height:38px;padding:0 8px 0 16px;
  border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.035);
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:28px}
.badge .vantage{height:15px;width:auto;opacity:.95;
  padding-left:11px;border-left:1px solid var(--border);margin-left:2px}

h1.hero-title{font-size:clamp(38px,6.4vw,70px);line-height:1.03;letter-spacing:-.028em;
  font-weight:800;margin:0 0 22px}
h1.hero-title span{display:block}
h1.hero-title .grad{background:linear-gradient(96deg,#fff 8%,#e8c46a 58%,var(--brand-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--text-2);font-size:clamp(15px,1.5vw,17.5px);max-width:660px;
  margin:0 auto 34px;line-height:1.62}

.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}

.social{display:inline-flex;align-items:center;gap:12px;color:var(--text-2);font-size:13.5px}
.faces{display:flex}
.faces span{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);
  margin-left:-9px;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff}
.faces span:first-child{margin-left:0}
.faces span:nth-child(1){background:linear-gradient(140deg,#6b5417,#d4af37)}
.faces span:nth-child(2){background:linear-gradient(140deg,#3a2b2e,#6d4a4f)}
.faces span:nth-child(3){background:linear-gradient(140deg,#8a6d1c,#f4d77e)}
.faces span:nth-child(4){background:linear-gradient(140deg,#241d1f,#4a393d)}
.social b{color:var(--text);font-weight:800}

/* stat strip */
.stats{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border-soft);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  overflow:hidden}
.stat{padding:22px 18px;text-align:center;border-left:1px solid var(--border-soft)}
.stat:first-child{border-left:0}
.stat .n{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,#f0dca8);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .k{margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-3)}
.stat-note{margin:14px 0 0;text-align:center;color:var(--text-3);font-size:11.5px;line-height:1.5}

/* ---------- section rail ---------- */
#rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.rail-dot{display:flex;align-items:center;gap:10px;cursor:pointer}
.rail-dot i{display:block;width:26px;height:2px;border-radius:2px;background:#3c352a;transition:.22s}
.rail-label{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);opacity:0;transform:translateX(6px);transition:.22s}
.rail-dot:hover .rail-label{opacity:1;transform:none}
.rail-dot.on i{width:44px;background:var(--brand-2);box-shadow:0 0 12px var(--brand-glow)}
.rail-dot.on .rail-label{opacity:1;transform:none;color:var(--text-2)}

/* ---------- feature sections ---------- */
.sec{padding:112px 0;position:relative}
.sec .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:64px;align-items:center}
.sec.flip .wrap{direction:rtl}
.sec.flip .wrap>*{direction:ltr}

.eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-2);margin:0 0 18px}
.sec h2{font-size:clamp(28px,3.5vw,42px);line-height:1.1;letter-spacing:-.025em;
  font-weight:800;margin:0 0 20px}
.sec p.body{color:var(--text-2);font-size:15.5px;line-height:1.68;margin:0 0 26px;max-width:52ch}
.bullets{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bullets li{display:flex;gap:11px;align-items:flex-start;color:var(--text-2);font-size:14.5px}
.bullets li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:7px;
  background:var(--brand-2);box-shadow:0 0 10px var(--brand-glow)}

[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.8,.25,1),transform .7s cubic-bezier(.2,.8,.25,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.09s}
[data-reveal][data-delay="2"]{transition-delay:.18s}

/* ---------- product mockups, built from real markup ---------- */
.shot{position:relative;border-radius:16px;border:1px solid var(--border);
  background:linear-gradient(180deg,#100d0e,#0a0708);overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.02) inset}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.055),transparent 42%)}
.shot-bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;
  border-bottom:1px solid var(--border-soft);background:rgba(255,255,255,.02)}
.shot-bar i{width:8px;height:8px;border-radius:50%;background:#332a2c}
.shot-bar .u{margin-left:10px;font-size:9.5px;color:var(--text-3);letter-spacing:.05em}
.shot-body{display:grid;grid-template-columns:96px minmax(0,1fr);min-height:290px}
.shot-side{border-right:1px solid var(--border-soft);padding:12px 8px;display:grid;
  gap:6px;align-content:start;background:rgba(0,0,0,.28)}
.shot-side b{font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:#5b5155;
  font-weight:800;margin-top:6px}
.shot-side s{text-decoration:none;display:flex;align-items:center;gap:6px;font-size:9.5px;
  color:var(--text-3);padding:4px 6px;border-radius:6px}
.shot-side s::before{content:"";width:9px;height:9px;border-radius:2px;background:#2a2224;flex:0 0 auto}
.shot-side s.on{background:rgba(212,175,55,.16);color:#f2e4c2}
.shot-side s.on::before{background:var(--brand-2)}
.shot-main{padding:14px;display:grid;gap:10px;align-content:start}

.mrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mkpi{border:1px solid var(--border-soft);border-radius:9px;padding:9px 10px;
  background:rgba(255,255,255,.022)}
.mkpi .k{font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:#5b5155;font-weight:800}
.mkpi .v{font-size:15px;font-weight:800;margin-top:3px;letter-spacing:-.02em}
.mkpi .v.up{color:var(--green)}
.mkpi .v.down{color:var(--red)}
.mcard{border:1px solid var(--border-soft);border-radius:11px;padding:11px 12px;
  background:rgba(255,255,255,.022)}
.mcard>h4{margin:0 0 9px;font-size:10.5px;font-weight:700;color:var(--text-2);letter-spacing:.02em}
.mcard svg{display:block;width:100%;height:auto}

/* calendar heat map */
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mcal i{aspect-ratio:1;border-radius:4px;background:#191315;display:block}
.mcal i.g1{background:rgba(34,197,94,.28)}
.mcal i.g2{background:rgba(34,197,94,.52)}
.mcal i.g3{background:rgba(34,197,94,.8)}
.mcal i.r1{background:rgba(255,92,84,.32)}
.mcal i.r2{background:rgba(255,92,84,.62)}

/* checklist */
.mlist{display:grid;gap:7px}
.mlist div{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--text-2)}
.mlist div::before{content:"";width:11px;height:11px;border-radius:3px;border:1px solid #3c352a;flex:0 0 auto}
.mlist div.done{color:var(--text-3)}
.mlist div.done::before{background:var(--brand);border-color:var(--brand)}

/* year heat map */
.myear{display:grid;grid-template-columns:repeat(26,1fr);gap:2.5px}
.myear i{aspect-ratio:1;border-radius:2px;background:#171213}
.myear i.a{background:rgba(212,175,55,.3)}
.myear i.b{background:rgba(212,175,55,.55)}
.myear i.c{background:rgba(212,175,55,.85)}

/* trade rows */
.mtable{display:grid;gap:0}
.mtable .tr{display:grid;grid-template-columns:1.2fr .6fr .7fr .8fr;gap:8px;
  padding:7px 2px;border-top:1px solid var(--border-soft);font-size:9.5px;color:var(--text-2)}
.mtable .tr:first-child{border-top:0;color:#5b5155;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;font-size:7.5px}
.mtable .tr b{font-weight:700;color:var(--text)}
.mtable .up{color:var(--green);font-weight:700;text-align:right}
.mtable .down{color:var(--red);font-weight:700;text-align:right}

/* ---------- academy cards ---------- */
.sec-wide .wrap{display:block}
.sec-head{max-width:720px;margin:0 auto 52px;text-align:center}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head p.body{margin-inline:auto}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;border:1px solid var(--border-soft);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  overflow:hidden;transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:#4a393d;transform:translateY(-3px)}
.card .thumb{aspect-ratio:16/9;position:relative;
  background:linear-gradient(140deg,#1a1214,#0a0708)}
.card .thumb::after{content:"";position:absolute;inset:0;
  background:radial-gradient(420px 200px at 30% 0%,rgba(212,175,55,.28),transparent 68%)}
.card .thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;z-index:2;
  background:rgba(212,175,55,.9);box-shadow:0 6px 22px rgba(212,175,55,.45)}
.card .thumb .play svg{margin-left:2px}
.card .meta{padding:18px 18px 20px}
.card .meta h3{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.card .meta p{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.6}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{border:1px solid var(--border-soft);border-radius:var(--radius);padding:24px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  counter-increment:step;position:relative}
.step::before{content:counter(step,decimal-leading-zero);display:block;font-size:11px;
  font-weight:800;letter-spacing:.2em;color:var(--brand-2);margin-bottom:14px}
.step h3{margin:0 0 8px;font-size:17px;font-weight:700}
.step p{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.6}

/* ---------- closing cta ---------- */
.close{position:relative;padding:120px 0;overflow:hidden;text-align:center;
  border-top:1px solid var(--border-soft)}
.close::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 420px at 50% 0%,rgba(212,175,55,.2),transparent 68%)}
.close h2{font-size:clamp(30px,4.2vw,50px);line-height:1.06;letter-spacing:-.028em;
  font-weight:800;margin:0 0 18px}
.close p{color:var(--text-2);font-size:16px;max-width:560px;margin:0 auto 32px;line-height:1.62}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--border-soft);padding:38px 0 46px}
.foot .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px}
.foot-partner{display:flex;align-items:center;gap:10px;margin-left:auto;
  font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.foot-partner img{height:16px;width:auto;opacity:.9}
.foot-risk{margin:22px 0 0;color:var(--text-3);font-size:11.5px;line-height:1.6;max-width:78ch}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  #rail{display:none}
  .sec .wrap{grid-template-columns:1fr;gap:40px}
  .sec.flip .wrap{direction:ltr}
  .sec .shot{order:2}
  .cards,.steps{grid-template-columns:1fr}
}
@media (max-width:720px){
  .wrap{width:min(1180px,100% - 32px)}
  .lnav-brand .name{display:none}
  .lnav .btn-ghost{display:none}
  .sec{padding:76px 0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--border-soft)}
  .shot-body{grid-template-columns:1fr}
  .shot-side{display:none}
  .mrow{grid-template-columns:repeat(2,1fr)}
  .hero{padding:104px 0 56px}
  .hero-cta .btn{flex:1 1 100%}
}
@media (max-width:359px){
  .stats{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid var(--border-soft)}
  .stat:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* thumbnail art, drawn rather than screenshotted, so it carries no
   third party branding and stays sharp on any display */
.card .thumb .art{position:absolute;inset:0;width:100%;height:100%;padding:16px;opacity:.9;
  transition:opacity .2s ease,transform .3s ease}
.card:hover .thumb .art{opacity:1;transform:scale(1.02)}

/* legal links in the footer */
.foot-links{margin:14px 0 0;display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--text-3);font-size:12px;text-decoration:none}
.foot-links a:hover{color:var(--text-2);text-decoration:underline}

/* ============================================================
   Ambient ground. Three stacked layers, none of them interactive:
   a fixed grain plate, slow gold bloom behind the whole page, and
   the existing hero art on top of both. The grain is what stops
   large flat blacks looking like dead pixels on an OLED screen.
   ============================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% 34%, rgba(212,175,55,.13), transparent 64%),
    radial-gradient(720px 420px at 11% 26%, rgba(212,175,55,.06), transparent 60%),
    radial-gradient(720px 420px at 89% 42%, rgba(244,215,126,.05), transparent 60%),
    radial-gradient(860px 460px at 50% 102%, rgba(138,109,28,.07), transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:61;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* keep real content above the bloom */
.lnav,.hero,main,section,footer{position:relative;z-index:1}

/* A hairline of brand along the very top. Cheap, and it reads as
   deliberate rather than as a default black page. */
body{
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,#8a6d1c,#f4d77e 38%,#d4af37 62%,#8a6d1c) 1;
}

/* [hidden] has to win over the display rules above, or an unset
   figure prints as "Join  traders" with a hole in it. */
.social[hidden],.stats[hidden],.stat[hidden],.stat-note[hidden]{display:none!important}

/* ============================================================
   Restraint pass.

   Black and gold goes wrong when the gold is everywhere: glowing
   blobs, gradient-filled headlines, metallic text. That reads as
   a template with the hue slider dragged across. Expensive black
   and gold is mostly black, mostly plain white type, with gold
   used sparingly and precisely: a hairline, a small mark, one
   button. These rules override the decorative treatments above.
   ============================================================ */

/* Headlines are solid. Gradient-filled type is the single
   strongest tell of a generated page. */
h1.hero-title .grad{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--brand);
}
.stat .n{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--text);
}

/* The drifting blurred orbs go. Structure reads as considered,
   atmosphere reads as filler. */
.orb{display:none}

/* Ambient bloom pulled right back: present, not a glow. */
body::before{
  background:
    radial-gradient(1100px 620px at 50% -6%, rgba(212,175,55,.055), transparent 62%),
    radial-gradient(760px 420px at 50% 104%, rgba(212,175,55,.028), transparent 62%);
}

/* A single hairline under the nav, and a thin rule above the
   footer. Precision instead of glow. */
.lnav{border-bottom:1px solid rgba(212,175,55,.16)}

/* The perspective floor stays, it is structure, but quieter. */
.hero-floor{opacity:.42}

/* Primary button: flat gold, dark ink. No gradient, no shadow
   bloom. It should look stamped, not lit. */
.btn-primary{
  background:var(--brand);color:#141008;border:1px solid #e0bf52;
  box-shadow:none;font-weight:700;
}
.btn-primary:hover{background:#e0bf52;border-color:#eccf6e}

/* Avatars in the social row were four different gradients, which
   is noise. One material, varying weight. */
.faces span{background:#1c1813!important;color:var(--brand);border-color:#0c0b09}