/* ============ TOKENS ============ */
:root{
  --lime:#c4f32b;
  --lime-dim:#a9d820;
  --bg:#000000;
  --bg-2:#050505;
  --card:#0b0b0b;
  --card-2:#0e0e0e;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.05);
  --txt:#f2f3f0;
  --txt-2:#9a9d97;
  --txt-3:#6b6e69;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.center{text-align:center}

/* ============ TYPO ============ */
.h2{
  font-size:clamp(34px,4.4vw,58px);font-weight:400;line-height:1.08;
  letter-spacing:-.02em;margin:0;
  background:linear-gradient(180deg,#ffffff 0%,#cfd2cc 55%,#8e918c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.h2 .dim{color:transparent;background:linear-gradient(180deg,#a3a6a1,#6e716c);-webkit-background-clip:text;background-clip:text;font-weight:300}
.sub{color:var(--txt-2);font-size:16px;line-height:1.6;margin:18px auto 0;max-width:640px;font-weight:300}
.sub.left{margin-left:0;text-align:left}
.eyebrow{
  color:var(--lime);font-size:14px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 18px;
}

/* ============ BUTTONS ============ */
.btn-lime{
  display:inline-block;background:var(--lime);color:#0b0f05;
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 30px;border-radius:999px;position:relative;
  box-shadow:0 0 0 0 rgba(196,243,43,.5),0 8px 40px rgba(196,243,43,.35);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(196,243,43,.12),0 12px 50px rgba(196,243,43,.5);background:#d0ff3a}
.btn-lime.sm{text-transform:none;letter-spacing:0;font-size:15px;font-weight:400;padding:13px 26px}
.btn-ghost{
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:11px 26px;
  font-size:13px;font-weight:500;letter-spacing:.08em;transition:.3s var(--ease);
}
.btn-ghost:hover{background:#fff;color:#000;border-color:#fff}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(38px);filter:blur(10px);
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}.d4{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}}

/* ============ NAV ============ */
.nav{position:fixed;inset:14px 0 auto;z-index:80;transition:.4s var(--ease)}
.nav-inner{
  width:min(1180px,calc(100% - 40px));margin:0 auto;
  display:flex;align-items:center;gap:28px;
  padding:10px 12px 10px 22px;border-radius:999px;
  border:1px solid transparent;background:transparent;transition:.45s var(--ease);
}
.nav.stuck .nav-inner{
  background:rgba(10,10,10,.72);border-color:var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark,.brand-text{transition:filter .35s var(--ease)}
/* the mark is the symbol itself, un-projected to a face-on view. At header
   size the dark metal sinks into the black bar, so lift it a little here —
   the asset stays untouched. */
.brand-mark{
  width:auto;height:30px;display:block;
  filter:brightness(1.22) contrast(1.08) drop-shadow(0 0 10px rgba(196,243,43,.32));
}
.brand:hover .brand-mark{
  filter:brightness(1.34) contrast(1.1) drop-shadow(0 0 15px rgba(196,243,43,.55));
}
.footer .brand-mark{height:34px}
.brand-text{font-size:22px;font-weight:800;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:26px;margin:0 auto}
.nav-links a,.more{
  font-size:15px;color:#d7d9d4;font-weight:300;position:relative;padding:4px 0;
  display:inline-flex;align-items:center;gap:7px;transition:color .3s;
}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--lime);transition:right .4s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}
.chev{width:12px;height:12px}
.more .chev{width:20px;height:20px;padding:4px;border-radius:50%;background:rgba(255,255,255,.08)}
.nav-links .nav-cta{display:none}
.burger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span{width:18px;height:1.5px;background:#fff;display:block;transition:.3s}

/* ============ HERO ============ */
.hero{position:relative;padding:150px 0 26px;overflow:hidden;isolation:isolate}
.terminal-sec{position:relative;padding-top:130px}
.platform-intro{text-align:center;position:relative;z-index:4}
.platform-intro .eyebrow{margin-bottom:22px}
.platform-intro .sub{max-width:680px}
.hero-aurora{
  position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:1500px;height:560px;z-index:-2;opacity:.5;
  background:
    radial-gradient(38% 42% at 20% 60%,rgba(150,196,24,.20),transparent 70%),
    radial-gradient(34% 40% at 50% 52%,rgba(168,220,28,.22),transparent 70%),
    radial-gradient(38% 42% at 80% 60%,rgba(150,196,24,.18),transparent 70%);
  filter:blur(70px);
  -webkit-mask-image:radial-gradient(60% 70% at 50% 38%,#000 0%,transparent 78%);
  mask-image:radial-gradient(60% 70% at 50% 38%,#000 0%,transparent 78%);
  animation:aurora 11s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translateX(-50%) scale(1);opacity:.34}
  100%{transform:translateX(-50%) scale(1.07);opacity:.62}
}
.hero-glow{
  position:absolute;left:50%;top:560px;transform:translateX(-50%);
  width:900px;height:430px;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 55%,rgba(196,243,43,.50),rgba(150,220,30,.14) 40%,transparent 68%);
  filter:blur(72px);animation:pulse 6s ease-in-out infinite alternate;
}
@keyframes pulse{0%{opacity:.5;transform:translateX(-50%) scale(.95)}100%{opacity:.85;transform:translateX(-50%) scale(1.05)}}
.hero-content{position:relative;text-align:center;z-index:2}
.hero h1{
  font-size:clamp(40px,6vw,76px);font-weight:400;line-height:1.06;letter-spacing:-.03em;margin:0;
  background:linear-gradient(180deg,#ffffff 0%,#d8dbd5 48%,#9a9d97 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{color:var(--txt-2);font-size:17px;line-height:1.62;margin:26px auto 34px;max-width:720px}

/* ---- hero: one WebGL canvas (bed + symbol), screen-blended so its black
        background disappears into the page ----------------------------- */
.hero-3d{
  position:relative;z-index:1;width:100%;margin:6px auto 0;
  height:clamp(340px,50vh,560px);pointer-events:none;
}
#heroBed{
  position:absolute;inset:0;width:100%;height:100%;
  mix-blend-mode:screen;opacity:0;transition:opacity 1s var(--ease);
  pointer-events:auto;touch-action:none;cursor:grab;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 100%);
}
.hero-3d.bed-live #heroBed{opacity:1}
.hero-3d-glow{
  position:absolute;left:50%;top:14%;transform:translateX(-50%);
  width:min(820px,68vw);height:72%;z-index:0;
  background:radial-gradient(50% 50% at 50% 55%,rgba(196,243,43,.22),rgba(150,220,30,.07) 45%,transparent 72%);
  filter:blur(80px);animation:hero3dPulse 7s ease-in-out infinite alternate;
}
.hero-3d-hint{
  position:absolute;left:50%;bottom:-20px;transform:translateX(-50%) translateY(6px);
  display:inline-flex;align-items:center;gap:7px;z-index:3;
  font-size:12.5px;letter-spacing:.04em;color:rgba(236,238,233,.45);
  opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;white-space:nowrap;
}
.hero-3d-hint svg{width:15px;height:15px}
.hero-3d-hint.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hero-3d-hint.gone{opacity:0!important}
@keyframes hero3dPulse{0%{opacity:.55}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-3d-glow{animation:none}}

/* platform preview — built like the reference: a glass frame around the live
   dashboard, two cards stacked behind it peeking over the top edge, and an
   entrance that tips the frame up from lying flat. Measures follow the
   reference (frame radius 31, inset 6, cards 19 and 34 above, 175 and 337
   narrower). */
.terminal-wrap{
  position:relative;z-index:3;margin:104px auto 30px;width:min(1186px,calc(100% - 56px));
  perspective:1600px;
}
.term-deck{
  position:absolute;left:50%;height:50%;border-radius:25px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;transform:translateX(-50%) translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.term-deck.far{top:-34px;width:calc(100% - 337px);transition-delay:1.05s}
.term-deck.near{top:-19px;width:calc(100% - 175px);transition-delay:.9s}
.terminal-wrap.in .term-deck{opacity:1;transform:translateX(-50%)}
.terminal{
  position:relative;border-radius:31px;border:1px solid rgba(255,255,255,.24);padding:6px;
  background:rgba(10,14,6,.4);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 -10px 90px rgba(196,243,43,.10),0 40px 120px rgba(0,0,0,.9);
  transform-origin:bottom center;transform:scale(.95) rotateX(50deg);opacity:0;
  transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .3s,opacity .9s var(--ease) .3s;
  font-weight:400;
}
.terminal-wrap.in .terminal{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .terminal,.term-deck{transition:none;opacity:1}
  .terminal{transform:none}
  .term-deck{transform:translateX(-50%)}
}
.term-shot{display:block;width:100%;height:auto}
/* live dashboard in the frame: laid out at 1600 x 1000, scaled to the frame's
   width. --k comes from js/main.js. Not interactive here. */
.term-live{position:relative;aspect-ratio:1600/1000;overflow:hidden;background:#000;border-radius:25px}
.term-live iframe{position:absolute;left:0;top:0;width:1600px;height:1000px;border:0;
  transform:scale(var(--k,.5));transform-origin:0 0;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease)}
.term-live iframe.on{opacity:1}
/* tour tabs under the frame: the active one fills while its page is up */
.term-tour{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:30px}
.term-tour button{
  position:relative;overflow:hidden;padding:10px 22px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  font:inherit;font-size:15px;font-weight:300;color:#b4b7b1;cursor:pointer;transition:.35s var(--ease);
}
.term-tour button:hover{color:#fff}
.term-tour button.on{
  color:var(--lime);border-color:rgba(196,243,43,.4);background:rgba(196,243,43,.06);
  box-shadow:0 0 24px rgba(196,243,43,.18);
}
/* the tour's pointer: glides between targets, pulses when it clicks */
.term-cursor{
  position:absolute;left:0;top:0;z-index:5;width:26px;height:26px;margin:-3px 0 0 -6px;
  pointer-events:none;opacity:0;will-change:transform;
  transition:transform var(--d,900ms) cubic-bezier(.45,.05,.2,1),opacity .5s var(--ease);
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.7));
}
.term-cursor.show{opacity:1}
.term-cursor svg{display:block;width:100%;height:100%;transform-origin:20% 10%}
.term-cursor i{position:absolute;left:6px;top:3px;width:12px;height:12px;margin:-6px;border-radius:50%;
  border:2px solid var(--lime);opacity:0}
.term-cursor.tap i{animation:tapRing .6s ease-out}
.term-cursor.tap svg{animation:tapPress .3s ease-out}
@keyframes tapRing{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(4.4)}}
@keyframes tapPress{45%{transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){ .term-cursor{display:none} }
.term-top{display:flex;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:11.5px;color:#9b9e98}
.term-search{display:flex;align-items:center;gap:8px;background:#141414;border-radius:8px;padding:6px 10px;min-width:230px;color:#74776f}
.term-search .i{width:13px;height:13px}
.term-search kbd{margin-left:auto;font:inherit;color:#5d605a}
.term-chip{display:inline-flex;align-items:center;gap:6px;color:#b9bcb6;font-size:11.5px}
.term-top-right{margin-left:auto;display:flex;align-items:center;gap:12px;color:#8c8f89}
.term-top-right .i{width:15px;height:15px}
.toggle{width:24px;height:13px;border-radius:99px;background:#2a2c28;position:relative;display:inline-block}
.toggle::after{content:"";position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#e9ebe6}
.toggle.sm{width:22px;height:12px}
.demo-pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:#b9bcb6}
.demo-pill b{background:#e9ebe6;color:#0c0c0c;padding:2px 5px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.04em}
.term-tabs{display:flex;align-items:center;gap:26px;padding:0 16px;border-bottom:1px solid var(--line-soft);font-size:11.5px;color:#7c7f79}
.term-tabs .t{padding:10px 0;position:relative;white-space:nowrap}
.term-tabs .t i{font-style:normal;opacity:.5;margin-left:6px}
.term-tabs .t.active{color:#eceee9}
.term-tabs .t.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:#eceee9}
.term-tabs .plus{opacity:.55;font-size:14px}
.term-body{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:1px;background:var(--line-soft);min-height:430px}
.term-panel{background:#070707}
.panel-head{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11px;color:#8c8f89;border-bottom:1px solid var(--line-soft)}
.panel-head .grip{width:7px;height:11px;border-left:2px dotted #4a4d47;border-right:2px dotted #4a4d47}
.panel-head .spacer{flex:1}
.panel-head .ic{opacity:.55;font-size:11px;cursor:pointer}
.panel-head .chev{width:11px;height:11px;opacity:.6}
.wl{width:100%;border-collapse:collapse;font-size:11px}
.wl th{font-weight:400;color:#6a6d67;text-align:left;padding:7px 12px;font-size:10px}
.wl th.r,.wl td.r{text-align:right}
.wl td{padding:6px 12px;color:#9ea19b;border-top:1px solid rgba(255,255,255,.028)}
.wl tbody tr:first-child td{color:#e6e8e3}
.wl td.hi{color:#cfd2cc}
.wl td.pos{color:#8fbf46}.wl td.neg{color:#c76b63}
.chart-toolbar{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:11px;color:#8c8f89;flex-wrap:wrap}
.chart-toolbar button{background:#1a1c19;border-radius:6px;padding:5px 10px;color:#c9ccc6;font-size:11px;display:inline-flex;gap:6px;align-items:center}
.chart-toolbar button kbd{font:inherit;opacity:.45;font-size:9px}
.chart-toolbar .vol,.chart-toolbar .tf{display:inline-flex;align-items:center;gap:6px;color:#b6b9b3;padding:4px 8px}
.chart-toolbar .tool{opacity:.55;font-size:13px}
.chart-toolbar .spacer{flex:1}
.chart-toolbar .lbl{opacity:.7}
.candles{position:relative;height:340px;margin:0 60px 0 12px}
.candles .c{position:absolute;top:0;bottom:0;width:4px}
.candles .c .w{position:absolute;left:1.5px;width:1px;background:currentColor;opacity:.6}
.candles .c .b{position:absolute;left:0;width:4px;background:currentColor;border-radius:1px}
.price-axis{position:absolute;right:10px;top:96px;display:flex;flex-direction:column;gap:46px;font-size:9.5px;color:#5f625c;text-align:right}
.price-axis .now{background:#e9ebe6;color:#0c0c0c;padding:2px 4px;border-radius:3px}

/* ============ SECTIONS ============ */
.section{padding:150px 0;position:relative}
#programs{padding-top:250px}

/* ---- tabs ---- */
.tabs{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:9px;margin:48px auto 58px;max-width:1100px;   /* sieben Reiter in einer Reihe */
}
.tab{
  padding:10px 22px;border-radius:999px;font-size:15px;color:#b4b7b1;font-weight:300;
  white-space:nowrap;
  border:1px solid transparent;transition:.35s var(--ease);
}
.tab:hover{color:#fff}
.tab.active{
  color:var(--lime);border-color:rgba(196,243,43,.4);
  background:rgba(196,243,43,.06);
  box-shadow:0 0 24px rgba(196,243,43,.18),inset 0 0 20px rgba(196,243,43,.06);
  text-shadow:0 0 18px rgba(196,243,43,.6);
}

/* ---- plans ---- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:64px}
.plans[hidden]{display:none}   /* author display:grid would beat the UA rule */
.plan{position:relative;border-radius:22px;background:#070707;border:1px solid var(--line-soft);overflow:hidden;transition:.5s var(--ease)}
.plan:hover{border-color:rgba(255,255,255,.12);transform:translateY(-6px)}
.plan-tab{position:relative;height:88px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.plan-tab .tab-shape{position:absolute;inset:0;width:100%;height:96px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.65))}
.plan-tab .tab-shape path{fill:url(#tabGrad)}
.plan-tab span{
  position:relative;z-index:2;font-size:26px;font-weight:600;letter-spacing:-.01em;color:#fff;
  margin-bottom:6px;
}
.plan.featured .plan-tab .tab-shape path{fill:var(--lime)}
.plan.featured .plan-tab{filter:drop-shadow(0 0 30px rgba(196,243,43,.35))}
.plan.featured .plan-tab span{color:#0a0e04}
.plan-body{padding:18px 26px 34px}
.plan-body h3{font-size:17px;font-weight:600;letter-spacing:.01em;margin:0 0 12px}
.plan-body p{color:var(--txt-2);font-size:14.5px;line-height:1.58;margin:0;min-height:88px}
.plan-body hr{border:0;border-top:1px solid var(--line-soft);margin:22px 0 26px}
.metrics li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;row-gap:10px;margin-bottom:22px}
.metrics .knob{
  width:16px;height:22px;border-radius:7px;grid-row:span 2;
  background:linear-gradient(180deg,#3a3d37,#1a1c18);border:1px solid rgba(255,255,255,.07);
}
.metrics .mk{font-size:14.5px;font-weight:400;color:#eceee9}
.metrics .mv{font-size:13px;color:#d3d6d0;white-space:nowrap}
.metrics .bar{grid-column:2 / -1;height:7px;border-radius:99px;background:#1b1d19;overflow:hidden;display:block}
.metrics .bar i{display:block;height:100%;width:0;border-radius:99px;background:#f0f2ed;transition:width 1.1s var(--ease)}
.plan.in-view .bar i{width:var(--w)}

/* ---- module panel (per tab) --------------------------------------------
   Layout follows the reference exactly; the reference's purple accent is
   swapped for our lime, and its purple-tinted darks for lime-tinted ones.
   The mint state colour (DONE / LIVE / NEXT) is kept as in the reference. */
.mod-panel{
  display:none;position:relative;margin:0 0 64px;
  border:1px solid var(--line-soft);border-radius:26px;
  background:linear-gradient(160deg,#101208 0%,#0b0c07 42%,#080906 100%);
  padding:46px 46px 44px;
}
.mod-panel.show{display:block}
.mod-kicker{
  display:flex;align-items:center;gap:13px;margin:0 0 22px;
  font-size:13.5px;letter-spacing:.22em;color:var(--txt-2);font-weight:500;
}
.mod-kicker b{color:var(--lime);font-weight:600;letter-spacing:.14em}
.mod-kicker .sep{width:1px;height:15px;background:rgba(255,255,255,.18)}
.mod-kicker svg{width:20px;height:20px;color:var(--lime)}
.mod-title{
  margin:0 0 18px;font-size:clamp(40px,5vw,64px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:#fff;
}
.mod-lead{
  margin:0 0 30px;max-width:640px;
  font-size:19px;line-height:1.5;color:var(--txt-2);font-weight:300;
}
.mod-stat{display:flex;align-items:baseline;gap:12px;margin:0 0 42px;color:var(--txt-2);font-size:16px}
.mod-stat b{font-size:31px;font-weight:700;color:#fff;letter-spacing:-.02em}

.path{border:1px solid var(--line-soft);border-radius:20px;background:#070805;padding:26px 24px 24px}
.path-head{
  display:flex;justify-content:space-between;margin-bottom:18px;
  font-size:12.5px;letter-spacing:.2em;color:var(--txt-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.path-steps{display:grid;gap:13px}
.path-steps li{
  display:flex;align-items:center;gap:18px;
  border:1px solid var(--line-soft);border-radius:16px;
  background:#0c0d09;padding:20px 24px;transition:.35s var(--ease);
}
.path-steps li.on{border-color:rgba(196,243,43,.55);background:#0e1109}
.path-steps li:hover{border-color:rgba(255,255,255,.14)}
.path-steps .n{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(196,243,43,.4);color:var(--lime);
  display:grid;place-items:center;font-size:15px;letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.path-steps .t{display:flex;flex-direction:column;gap:5px;flex:1}
.path-steps .t b{font-size:20px;font-weight:600;color:#fff;letter-spacing:-.01em}
.path-steps .t em{font-style:normal;font-size:16px;color:var(--txt-2);font-weight:300}
.path-steps .st{
  flex:0 0 auto;font-size:12.5px;letter-spacing:.16em;color:#6ad09d;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.path-bar{margin-top:22px;height:6px;border-radius:99px;background:#1a1c16;overflow:hidden}
.path-bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#8fbf14,var(--lime));
  transition:width 1.2s var(--ease);
}
.mod-panel.ready .path-bar i{width:var(--p)}

@media (max-width:760px){
  .mod-panel{padding:30px 20px 28px;border-radius:20px}
  .mod-lead{font-size:17px}
  .path{padding:18px 14px 16px}
  .path-head{font-size:11px;letter-spacing:.1em}
  /* the status no longer squeezes the title into a sliver — it drops to its
     own line under the text */
  .path-steps li{
    display:grid;grid-template-columns:auto 1fr;
    column-gap:14px;row-gap:8px;padding:15px 16px;
  }
  .path-steps .n{width:42px;height:42px;font-size:13px}
  .path-steps .t b{font-size:16.5px}
  .path-steps .t em{font-size:14px}
  .path-steps .st{grid-column:2;justify-self:start;font-size:11px;letter-spacing:.14em}
}

/* ---- scanner panel ------------------------------------------------- */
.mod-dots{display:flex;flex-wrap:wrap;gap:26px;margin:0 0 38px}
.mod-dots li{
  display:flex;align-items:center;gap:10px;
  font-size:17px;color:#e2e4df;font-weight:300;
}
.mod-dots li::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 10px rgba(196,243,43,.8);
  animation:dotPulse 2.4s ease-in-out infinite;
}
.mod-dots li:nth-child(2)::before{animation-delay:.5s}
.mod-dots li:nth-child(3)::before{animation-delay:1s}
@keyframes dotPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

.scan{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(196,243,43,.22);background:#05060a;
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 30px 70px rgba(0,0,0,.6);
}
.scan img{width:100%;height:auto;display:block}
/* a lime read-head sweeping the chart, like the scanner working through it */
.scan-sweep{
  position:absolute;inset:0 auto 0 0;width:22%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(196,243,43,.13) 62%,rgba(196,243,43,.45) 99%,transparent);
  animation:scanSweep 5.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes scanSweep{
  0%{transform:translateX(-110%)}
  60%,100%{transform:translateX(520%)}
}
.scan-bar{
  position:absolute;left:14px;right:14px;bottom:14px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 20px;border-radius:12px;
  border:1px solid rgba(196,243,43,.28);
  background:rgba(6,8,4,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;letter-spacing:.14em;
}
.scan-live{display:flex;align-items:center;gap:11px;color:#e6e8e3}
.scan-live::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 12px rgba(196,243,43,.9);animation:dotPulse 1.6s ease-in-out infinite;
}
.scan-count{color:var(--lime);font-weight:600}

@media (max-width:760px){
  .mod-dots{gap:12px 20px;margin-bottom:26px}
  .mod-dots li{font-size:15px}
  .scan-bar{left:8px;right:8px;bottom:8px;padding:11px 13px;font-size:11px;letter-spacing:.08em;gap:10px}
  .scan-live::before,.mod-dots li::before{width:7px;height:7px}
}

/* ---- live desk panel ------------------------------------------------ */
.mod-badge{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 38px;
  padding:13px 22px;border-radius:999px;border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14.5px;color:var(--txt-2);
}
/* a live indicator stays red — that reads as "on air" everywhere */
.live-dot{
  width:9px;height:9px;border-radius:50%;background:#bb5769;flex:0 0 auto;
  box-shadow:0 0 10px rgba(187,87,105,.8);animation:dotPulse 1.8s ease-in-out infinite;
}
.desk{border:1px solid var(--line-soft);border-radius:20px;background:#080906;overflow:hidden}
.desk-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;border-bottom:1px solid var(--line-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;letter-spacing:.14em;
}
.desk-now-l{display:flex;align-items:center;gap:11px;color:#e6e8e3;font-weight:600}
.desk-tz{color:var(--txt-3)}

.desk-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px;
  margin:20px;padding:26px;border-radius:16px;
  border:1px solid rgba(196,243,43,.2);
  background:linear-gradient(150deg,#101309,#0a0b07 60%);
}
.feat-tag{
  margin:0 0 10px;font-size:13.5px;letter-spacing:.14em;font-weight:600;
  color:#d8f37e;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.desk-feature h4{margin:0 0 6px;font-size:28px;font-weight:600;letter-spacing:-.01em;color:#fff}
.feat-sub{margin:0 0 20px;font-size:16px;color:var(--txt-2);font-weight:300}
.feat-watch{display:flex;align-items:center;gap:13px;margin:0 0 24px;font-size:16px;color:#e2e4df}
.avs{display:flex}
.avs svg{width:30px;height:30px;border-radius:50%;border:2px solid #0a0b07;margin-right:-9px}
.feat-join{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  width:100%;max-width:330px;padding:16px 26px;border-radius:12px;
  background:linear-gradient(90deg,#a5d41c,var(--lime));color:#0b0f05;
  font-size:16.5px;font-weight:600;
  box-shadow:0 10px 30px rgba(196,243,43,.24);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.feat-join:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(196,243,43,.4)}
.feat-join svg{width:18px;height:18px}

.feat-r{
  border:1px solid var(--line-soft);border-radius:14px;background:#070805;
  padding:18px 20px 20px;display:flex;flex-direction:column;
}
.mini-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--txt-2);
}
.mini-head b{color:#66d4b4;font-weight:600}
/* a fixed height, not flex:1 — a percentage bar height needs a parent
   whose height is definite, otherwise it resolves to nothing */
.mini-bars{position:relative;display:flex;align-items:flex-end;gap:5px;height:132px}
.mini-bars span{
  flex:1;height:0;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,var(--lime),#7fa614);
  transition:height .9s var(--ease);
}
.mod-panel.ready .mini-bars span{height:var(--h)}
.mini-line{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease) .7s}
.mod-panel.ready .mini-line{opacity:1}

.desk-list{margin:0 20px 20px;display:grid;gap:12px}
.desk-list li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  padding:18px 24px;border-radius:14px;
  border:1px solid var(--line-soft);background:#0b0c08;
  transition:.35s var(--ease);
}
.desk-list li:hover{border-color:rgba(255,255,255,.13)}
.desk-list .tm{display:flex;flex-direction:column;gap:3px;min-width:78px}
.desk-list .tm b{font-size:19px;font-weight:600;color:#fff}
.desk-list .tm em{font-style:normal;font-size:12.5px;letter-spacing:.1em;color:var(--txt-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.desk-list .ev{display:flex;flex-direction:column;gap:4px;
  border-left:1px solid var(--line-soft);padding-left:22px}
.desk-list .ev b{font-size:18px;font-weight:600;color:#fff}
.desk-list .ev em{font-style:normal;font-size:14.5px;color:var(--txt-2);font-weight:300;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.desk-list .stt{
  font-size:12.5px;letter-spacing:.14em;color:var(--txt-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.desk-list .stt.on{color:var(--lime)}

@media (max-width:900px){
  .desk-feature{grid-template-columns:1fr;gap:22px;padding:20px;margin:14px}
  .feat-join{max-width:none}
  .desk-list{margin:0 14px 14px}
  .desk-list li{grid-template-columns:auto 1fr;row-gap:10px;padding:15px 16px;gap:14px}
  .desk-list .ev{padding-left:14px}
  .desk-list .stt{grid-column:2;justify-self:start}
  .desk-head{padding:15px 16px;font-size:12px;letter-spacing:.1em}
  .mod-badge{font-size:13px;padding:11px 16px;margin-bottom:26px}
  .desk-feature h4{font-size:23px}
}

@media (max-width:560px){
  .desk-list li{grid-template-columns:1fr auto;align-items:start;gap:5px 12px}
  .desk-list .tm{flex-direction:row;align-items:baseline;gap:8px;min-width:0}
  .desk-list .tm b{font-size:16.5px}
  .desk-list .tm em{font-size:11.5px}
  .desk-list .ev{grid-column:1/-1;border-left:0;padding-left:0;gap:2px}
  .desk-list .ev b{font-size:16.5px}
  .desk-list .ev em{font-size:13px}
  .desk-list .stt{grid-column:2;grid-row:1;justify-self:end;font-size:11.5px}
}

/* ---- gold trade ideas panel -----------------------------------------
   Same translation as the other panels: the reference's purple accent
   becomes our lime. Candle green/red and the mint TP line stay — those
   read as chart semantics, not as brand colour. The target icon stays
   gold because it stands for the instrument. */
.strats{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 30px}
.strat{
  display:inline-flex;align-items:center;gap:13px;
  padding:17px 26px;border-radius:14px;
  border:1px solid var(--line);background:#0b0c08;
  font-size:21px;font-weight:700;color:#fff;
  transition:.35s var(--ease);
}
.strat:hover{border-color:rgba(196,243,43,.45);background:#0e1109}
.strat svg{width:26px;height:26px;color:var(--lime);flex:0 0 auto}
.strat.only{padding:17px 36px}
.strat .ic-gold{width:29px;height:29px}

.gold-cta{
  display:inline-flex;align-items:center;gap:14px;
  margin:0 0 42px;padding:18px 30px;border-radius:14px;
  background:linear-gradient(100deg,#a5d41c,var(--lime));color:#0b0f05;
  font-size:18px;font-weight:600;
  box-shadow:0 12px 34px rgba(196,243,43,.24);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.gold-cta:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(196,243,43,.42)}
.gold-cta svg{width:20px;height:20px}

.gd-marks{display:inline-flex;gap:7px;margin-left:13px;vertical-align:-6px}
.gd-marks svg{width:22px;height:22px;color:var(--lime);opacity:.92}
.gd-marks .gd-gold{color:#e3aa26}
.gd-sym{color:#e6e8e3;font-weight:600;letter-spacing:.1em}

.gd-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;padding:20px}
.gd-chart{border:1px solid var(--line-soft);border-radius:14px;background:#070805;padding:20px 22px 22px}
.gc-head{
  display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.gc-l b{display:block;font-size:19px;color:#fff;font-weight:600;letter-spacing:.02em}
.gc-l em{font-style:normal;font-size:13px;letter-spacing:.12em;color:var(--txt-3)}
.gc-r{text-align:right}
.gc-r b{display:block;font-size:21px;color:#fff;font-weight:600;letter-spacing:.02em}
.gc-r em{font-style:normal;font-size:14px;color:#5ed3b2}

.gc-plot{
  position:relative;height:300px;overflow:hidden;
  border:1px solid rgba(255,255,255,.05);border-radius:8px;background:#0a0b07;
}
.gc-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:20% 25%;
}
/* the two levels draw themselves in once the panel is on screen */
.gc-tp,.gc-zone{position:absolute;left:0;right:0}
/* the line lives in a pseudo-element: scaleX on the box itself would make
   it a stacking context and trap the price label under the candles */
.gc-tp{top:25.2%;height:1px}
.gc-tp::before{
  content:"";position:absolute;inset:0;background:rgba(94,211,178,.55);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .45s;
}
.gc-zone{
  top:58.5%;bottom:1.8%;background:rgba(196,243,43,.10);
  border-top:1px solid rgba(196,243,43,.5);
  border-bottom:1px solid rgba(196,243,43,.26);
  opacity:0;transition:opacity .8s var(--ease) .7s;
}
.mod-panel.ready .gc-tp::before{transform:scaleX(1)}
.mod-panel.ready .gc-zone{opacity:1}
.gc-tp s,.gc-zone s{
  position:absolute;right:8px;z-index:3;text-decoration:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.06em;white-space:nowrap;
}
.gc-tp s{bottom:3px;color:#5ed3b2;text-shadow:0 0 5px #070805,0 0 5px #070805,0 0 9px #070805}
.gc-zone s{top:5px;color:var(--lime);text-shadow:0 0 5px #070805,0 0 5px #070805,0 0 9px #070805}

.gc-candles{position:absolute;inset:0;display:flex;padding:0 10px}
.cdl{
  position:relative;flex:1;opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i) * 45ms);
}
.mod-panel.ready .cdl{opacity:1;transform:none}
/* market switch: one frame at the start state, then the candles rise again */
.mod-panel.ready .gc-candles.swap .cdl{opacity:0;transform:translateY(12px);transition:none}
.cdl::before{
  content:"";position:absolute;left:50%;width:1.6px;margin-left:-.8px;
  top:var(--wt);height:var(--wh);background:currentColor;border-radius:1px;
}
.cdl b{position:absolute;left:25%;right:25%;top:var(--t);height:var(--h);
  background:currentColor;border-radius:2px}
.cdl.up{color:#5ed3b2}
.cdl.down{color:#f2748f}

.gd-list{display:grid;grid-template-rows:repeat(4,1fr);gap:14px}
.gd-list li{
  display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--line-soft);border-radius:14px;background:#0a0b07;
  padding:18px 22px;transition:.35s var(--ease);
}
.gd-list li.on{border-color:rgba(196,243,43,.45);background:linear-gradient(140deg,#151a08,#0c0e07)}
.gd-list li:hover{border-color:rgba(255,255,255,.14)}
.gd-list li.on:hover{border-color:rgba(196,243,43,.45)}
/* chips and rows pick the market shown in the chart */
[data-market]{cursor:pointer;user-select:none}
[data-market]:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.strat.on{border-color:rgba(196,243,43,.55);background:#0e1109}
.gd-list b{font-size:19px;font-weight:600;color:#fff;margin-bottom:5px}
.gd-list em{font-style:normal;font-size:15.5px;color:var(--txt-2);font-weight:300}

@media (max-width:900px){
  .strats{gap:10px}
  .strat{font-size:17px;padding:13px 18px;gap:10px;border-radius:12px}
  .strat svg{width:21px;height:21px}
  .strat.only{padding:13px 24px}
  .gold-cta{padding:15px 24px;font-size:16.5px;margin-bottom:30px}
  .gd-marks{display:none}
  .gd-body{grid-template-columns:1fr;padding:14px;gap:14px}
  .gd-chart{padding:16px 14px 16px}
  .gc-plot{height:220px}
  .gd-list{grid-template-rows:none}
  .gd-list li{padding:15px 16px}
  .gd-list b{font-size:17px}
  .gd-list em{font-size:14px}
}

/* ---- journal + analytics panel --------------------------------------
   Two columns like the reference: the pitch on the left, the dashboard
   on the right. Purple accent → lime; the P&L greens and the one red
   stay, they carry meaning. */
/* the dashboard needs the room: this panel runs a tighter gutter than
   the others so the four KPI cards keep their figures on one line */
[data-panel="journal"]{padding:40px 32px 36px}
.jr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.75fr);gap:34px;align-items:start}
.jr-l .mod-title{font-size:clamp(34px,3.4vw,54px);margin-bottom:22px}
.jr-l .mod-lead{margin-bottom:28px;font-size:17.5px}
.ok-dot{
  width:9px;height:9px;border-radius:50%;background:#37d49c;flex:0 0 auto;
  box-shadow:0 0 10px rgba(55,212,156,.75);
}
.jr-notes{display:grid;gap:14px}
.jr-notes li{
  display:flex;align-items:center;gap:15px;
  border:1px solid var(--line-soft);border-radius:14px;background:#0a0b07;
  padding:18px 22px;transition:.35s var(--ease);
}
.jr-notes li:hover{border-color:rgba(196,243,43,.3)}
.jr-notes b{display:block;font-size:17px;font-weight:600;color:#fff;margin-bottom:3px}
.jr-notes em{font-style:normal;font-size:14.5px;color:var(--txt-2);font-weight:300}

.jr-r{min-width:0}
.jr-body{padding:18px;display:grid;gap:16px}

.jr-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.jr-kpis li{
  border:1px solid var(--line-soft);border-radius:12px;background:#0b0c08;
  padding:15px 16px;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i) * 80ms);
}
.mod-panel.ready .jr-kpis li{opacity:1;transform:none}
.jr-kpis em{
  display:block;margin-bottom:7px;font-style:normal;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.12em;color:var(--txt-2);
}
.jr-kpis b{display:block;font-size:26px;font-weight:700;color:#fff;letter-spacing:-.01em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.jr-kpis s{
  display:block;margin-top:7px;text-decoration:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;color:#5ed3b2;white-space:nowrap;
}

.jr-mid{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,1fr);gap:16px}
.jr-curve,.jr-score{border:1px solid var(--line-soft);border-radius:14px;background:#0b0c08;padding:18px 20px 16px}
.jr-ch{
  display:flex;justify-content:space-between;margin-bottom:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.13em;color:var(--txt-2);
}
.jr-plot{position:relative;height:210px}
.jr-plot svg{position:absolute;inset:0;width:100%;height:100%}
.jr-line{stroke:var(--lime);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(196,243,43,.5));
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.6s var(--ease) .25s}
.jr-area{opacity:0;transition:opacity .9s var(--ease) .8s}
.mod-panel.ready .jr-line{stroke-dashoffset:0}
.mod-panel.ready .jr-area{opacity:1}
.jr-dot{
  position:absolute;left:99.1%;top:21.8%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(196,243,43,.3),0 0 14px rgba(196,243,43,.9);
  opacity:0;transition:opacity .5s var(--ease) 1.5s;
}
.mod-panel.ready .jr-dot{opacity:1}
.jr-badge{
  position:absolute;left:10px;top:12px;z-index:2;display:block;
  border:1px solid rgba(196,243,43,.5);border-radius:10px;
  background:rgba(10,12,6,.8);padding:10px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.jr-badge b{display:block;font-size:18px;color:#fff;font-weight:600}
.jr-badge em{font-style:normal;font-size:11.5px;letter-spacing:.14em;color:var(--txt-2)}
.jr-axis{
  display:flex;justify-content:space-between;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.1em;color:var(--txt-3);
}

.jr-score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.jr-ring{position:relative;width:148px;height:148px}
.jr-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.jr-ring .rt{stroke:#23271a;stroke-width:9}
.jr-ring .rv{
  stroke:var(--lime);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:0 100;transition:stroke-dasharray 1.4s var(--ease) .4s;
  filter:drop-shadow(0 0 7px rgba(196,243,43,.55));
}
.mod-panel.ready .jr-ring .rv{stroke-dasharray:62 100}
.jr-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.jr-val b{font-size:34px;font-weight:700;color:#fff;letter-spacing:-.02em}
.jr-val em{font-style:normal;font-size:11.5px;letter-spacing:.15em;color:var(--txt-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.jr-sl{margin:16px 0 0;font-size:19px;font-weight:600;color:#fff}
.jr-ss{margin:5px 0 0;font-size:12.5px;color:#5ed3b2;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.jr-tbl{border:1px solid var(--line-soft);border-radius:14px;background:#0b0c08;overflow:hidden}
.jr-th,.jr-tbl li{
  display:grid;grid-template-columns:minmax(0,1fr) 120px 84px 44px;
  align-items:center;gap:16px;padding:15px 20px;
}
.jr-th{
  border-bottom:1px solid var(--line-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.14em;color:var(--txt-3);
}
.jr-th span:nth-child(2),.jr-th span:nth-child(3){text-align:right}
.jr-th span:last-child{text-align:center}
.jr-tbl li{border-bottom:1px solid var(--line-soft);transition:.3s var(--ease)}
.jr-tbl li:last-child{border-bottom:0}
.jr-tbl li:hover{background:#0e1009}
.jr-tbl .pr b{display:block;font-size:17px;font-weight:600;color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.jr-tbl .pr em{font-style:normal;font-size:14.5px;color:var(--txt-2);font-weight:300}
.jr-tbl .st{
  text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.12em;color:var(--lime);
}
.jr-tbl .rr{
  text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;font-weight:600;
}
.jr-tbl .rr.pos{color:#5ed3b2}
.jr-tbl .rr.neg{color:#f2748f}
.jr-tbl .gr{
  display:grid;place-items:center;width:38px;height:38px;justify-self:center;
  border:1px solid rgba(196,243,43,.32);border-radius:10px;background:#101309;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;color:#e9ecdf;
}

.jr-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.jr-foot li{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--line-soft);border-radius:12px;background:#0b0c08;
  padding:16px 20px;
}
.jr-foot li span{flex:1;min-width:0}
.jr-foot b{display:block;font-size:16px;font-weight:600;color:#fff;margin-bottom:2px}
.jr-foot em{font-style:normal;font-size:14px;color:var(--txt-2);font-weight:300}
.jr-foot s{
  text-decoration:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;color:var(--txt-2);
}
.jr-foot s.pos{color:#5ed3b2}

@media (max-width:1100px){
  .jr{grid-template-columns:1fr;gap:30px}
  .jr-mid{grid-template-columns:1fr}
  .jr-score{padding:22px}
}
@media (max-width:760px){
  .jr-body{padding:14px;gap:14px}
  .jr-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .jr-kpis li{padding:13px 14px}
  .jr-kpis b{font-size:22px}
  .jr-notes li{padding:15px 16px}
  .jr-kpis em{font-size:11px;letter-spacing:.1em}
  /* the one-line rule is a desktop fit; here it would overflow the card */
  .jr-kpis s{white-space:normal;font-size:11px}
  .jr-ch{flex-direction:column;align-items:flex-start;gap:3px;font-size:11.5px}
  .jr-plot{height:170px}
  .jr-axis{font-size:10.5px;letter-spacing:.05em}
  .jr-badge{left:8px;top:8px;padding:7px 11px}
  .jr-badge b{font-size:15px}
  .jr-badge em{font-size:10px}
  .jr-ss{font-size:11.5px}
  /* the table drops its header row and stacks pair over strategy */
  .jr-th{display:none}
  .jr-tbl li{grid-template-columns:minmax(0,1fr) auto auto;gap:8px 12px;padding:14px 16px}
  /* pair and note get the full row; strategy, result and grade share the next */
  .jr-tbl .pr{grid-column:1/-1;grid-row:1}
  .jr-tbl .st{grid-column:1;grid-row:2;text-align:left;align-self:center}
  .jr-tbl .rr{grid-column:2;grid-row:2}
  .jr-tbl .gr{grid-column:3;grid-row:2;width:34px;height:34px;font-size:14px}
  .jr-foot{grid-template-columns:1fr}
}

/* ---- ai pt coach panel ----------------------------------------------
   Mirrored layout from the reference: console left, pitch right.
   Purple accent → lime; the status dot stays green. */
.co{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);gap:34px;align-items:start}
.co-l .mod-title{font-size:clamp(34px,3.4vw,54px);margin-bottom:22px}
.co-l .mod-lead{margin-bottom:26px;font-size:17.5px}
.co-quote{
  margin:0;padding:22px 24px;border-radius:14px;
  border:1px solid rgba(196,243,43,.32);
  background:linear-gradient(150deg,#141808,#0b0d06 65%);
  font-size:18px;line-height:1.5;color:#e9ecdf;font-weight:300;
}
.co-app{min-width:0}
.co-body{padding:20px;display:grid;gap:14px}

.co-ask{
  justify-self:end;max-width:78%;
  border:1px solid rgba(196,243,43,.3);border-radius:14px;
  background:linear-gradient(140deg,rgba(196,243,43,.12),rgba(196,243,43,.03));
  padding:16px 22px;
}
.co-ask em{
  display:block;margin-bottom:7px;font-style:normal;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.14em;color:var(--lime);
}
.co-ask p{margin:0;font-size:17px;color:#eef0e8;font-weight:300}

.co-answer{display:flex;gap:18px;align-items:flex-start;padding:4px 0 6px}
.co-av{
  flex:0 0 auto;width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;font-style:normal;
  background:linear-gradient(140deg,var(--lime),#8fbf14);color:#0b0f05;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;font-weight:700;letter-spacing:.06em;
  box-shadow:0 8px 22px rgba(196,243,43,.24);
}
.co-answer em{
  display:block;margin-bottom:7px;font-style:normal;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.14em;color:var(--lime);
}
.co-answer p{margin:0;font-size:17px;line-height:1.5;color:var(--txt);font-weight:300}

.co-steps{display:grid;gap:13px}
.co-steps li{
  display:flex;align-items:center;gap:20px;
  border:1px solid var(--line-soft);border-radius:16px;background:#0b0c08;
  padding:20px 24px;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .35s var(--ease);
  transition-delay:calc(var(--i) * 110ms);
}
.mod-panel.ready .co-steps li{opacity:1;transform:none}
.co-steps li:hover{border-color:rgba(196,243,43,.35)}
.co-steps .n{
  flex:0 0 auto;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  border:1px solid rgba(196,243,43,.32);background:#101309;color:var(--lime);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
}
.co-steps .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.co-steps .t b{font-size:20px;font-weight:600;color:#fff;letter-spacing:-.01em}
.co-steps .t em{font-style:normal;font-size:15.5px;color:var(--txt-2);font-weight:300}
.co-steps .tg{
  flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.14em;color:var(--lime);
}

.co-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.co-stat,.co-bars{border:1px solid var(--line-soft);border-radius:14px;background:#0b0c08;padding:18px 20px}
.co-stat em{
  display:block;margin-bottom:10px;font-style:normal;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.14em;color:var(--txt-2);
}
.co-stat b{display:block;font-size:28px;font-weight:700;color:#fff;letter-spacing:-.01em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.co-stat s{display:block;margin-top:9px;text-decoration:none;font-size:14px;color:var(--txt-2);font-weight:300}
.co-bars{display:flex;align-items:flex-end;gap:7px;height:auto;min-height:118px}
.co-bars i{
  flex:1;height:0;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--lime),#7fa614);
  transition:height .9s var(--ease);
}
.mod-panel.ready .co-bars i{height:var(--h)}

@media (max-width:1100px){
  .co{grid-template-columns:1fr;gap:30px}
  .co-l{order:-1}
}
@media (max-width:760px){
  .co-body{padding:14px;gap:12px}
  .co-ask{max-width:92%;padding:13px 16px}
  .co-ask p{font-size:15.5px}
  .co-answer{gap:13px}
  .co-av{width:42px;height:42px;border-radius:12px;font-size:13px}
  .co-answer p{font-size:15.5px}
  /* the tag drops under the text instead of squeezing the title */
  .co-steps li{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;padding:15px 16px}
  .co-steps .n{width:40px;height:40px;border-radius:11px;font-size:13px}
  .co-steps .t b{font-size:17px}
  .co-steps .t em{font-size:14px}
  .co-steps .tg{grid-column:2;justify-self:start;font-size:11px}
  .co-foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .co-stat{padding:14px 16px}
  .co-stat b{font-size:23px}
  .co-bars{grid-column:1/-1;min-height:96px;padding:14px 16px}
  .co-quote{font-size:16.5px;padding:18px 20px}
}

/* ---- full platform access -------------------------------------------
   Reference layout 1:1, purple → lime. The grid and the glow sit behind
   everything; the price card carries the section's weight. */
.access-sec{padding-top:0}
.access{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:40px;align-items:center;
  border:1px solid var(--line-soft);border-radius:30px;
  background:linear-gradient(160deg,#0d0f08 0%,#090a06 45%,#070805 100%);
  padding:70px 64px;
}
.access-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:86px 86px;
  mask-image:radial-gradient(135% 110% at 72% 42%,#000 35%,transparent 92%);
  -webkit-mask-image:radial-gradient(135% 110% at 72% 42%,#000 35%,transparent 92%);
  opacity:0;transition:opacity 1.1s var(--ease) .2s;
}
.access.in .access-grid{opacity:1}
.access-glow{
  position:absolute;right:-6%;top:-18%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(52% 44% at 50% 42%,rgba(196,243,43,.22),transparent 70%);
  filter:blur(6px);
}
.access-l,.access-r{position:relative;z-index:1}

.access-title{
  margin:0 0 26px;font-size:clamp(46px,6.4vw,92px);font-weight:800;
  line-height:.98;letter-spacing:-.035em;
  background:linear-gradient(170deg,#ffffff 0%,#f2f4ec 45%,#c9cfbc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.access-lead{
  margin:0 0 34px;max-width:520px;
  font-size:19px;line-height:1.55;color:var(--txt-2);font-weight:300;
}
.access-link{
  display:inline-flex;align-items:center;gap:13px;
  font-size:18px;font-weight:600;color:#fff;
  transition:gap .3s var(--ease),color .3s var(--ease);
}
.access-link svg{width:20px;height:20px;color:var(--lime)}
.access-link:hover{gap:19px;color:var(--lime)}

.price{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);border-radius:26px;
  background:
    radial-gradient(70% 45% at 78% 6%,rgba(196,243,43,.15),transparent 62%),
    linear-gradient(170deg,#0f1109 0%,#0a0b07 55%,#080905 100%);
  padding:40px 38px 44px;min-height:440px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.price-k{
  margin:0 0 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.2em;color:var(--txt-2);
}
.price-v{
  display:flex;align-items:flex-start;gap:4px;margin:0 0 28px;
  font-size:clamp(84px,7.6vw,118px);line-height:.86;font-weight:800;letter-spacing:-.05em;
  background:linear-gradient(160deg,#ffffff 0%,#eaf6b6 45%,#c4f32b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(16px) scale(.94);transform-origin:left bottom;
  transition:opacity .7s var(--ease) .25s,transform .7s var(--ease) .25s;
}
.access.in .price-v{opacity:1;transform:none}
.price-v span{font-size:.45em;line-height:1.05;font-weight:700}
.price-t{margin:0 0 24px;font-size:20px;font-weight:600;color:#fff}
.price-list{display:grid;gap:0}
.price-list li{
  display:flex;align-items:center;gap:15px;
  padding:17px 0;border-top:1px solid var(--line-soft);
  font-size:17px;color:var(--txt);font-weight:300;
  opacity:0;transform:translateX(-10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(.55s + var(--i) * 120ms);
}
.price-list li:last-child{border-bottom:1px solid var(--line-soft)}
.access.in .price-list li{opacity:1;transform:none}

.access-marks{
  display:flex;align-items:center;justify-content:center;
  margin:26px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.16em;color:var(--txt-3);
}
.access-marks span{display:flex;align-items:center;gap:16px}
.access-marks span:not(:last-child)::after{
  content:"";width:28px;height:1px;background:rgba(255,255,255,.14);
}

@media (max-width:1000px){
  .access{grid-template-columns:1fr;gap:34px;padding:44px 30px}
  .access-glow{right:-20%;width:90%}
  .access-lead{max-width:none}
  .price{min-height:0;padding:32px 28px 34px}
}
@media (max-width:620px){
  .access{padding:32px 20px;border-radius:22px}
  .access-title{margin-bottom:20px}
  .access-lead{font-size:17px;margin-bottom:28px}
  .access-link{font-size:16.5px}
  .price{padding:26px 22px 28px;border-radius:20px}
  .price-k{font-size:11.5px;letter-spacing:.16em}
  .price-t{font-size:18px}
  .price-list li{font-size:15.5px;padding:15px 0}
  /* four names plus their rules do not fit one phone line; the rules go,
     otherwise one dangles at the line break */
  .access-marks{flex-wrap:wrap;justify-content:flex-start;gap:10px 20px;font-size:11.5px}
  .access-marks span:not(:last-child)::after{display:none}
}

/* ---- the complete stack (comparison) --------------------------------
   Reference layout 1:1, purple → lime. The prices stay red and the
   check marks green — both carry meaning, not branding. */
.stack-sec{padding-top:0}
.stack-title{
  margin:0 0 26px;font-size:clamp(36px,5.6vw,82px);font-weight:800;
  line-height:1.02;letter-spacing:-.035em;color:#fff;
}
.stack-title span{
  background:linear-gradient(100deg,#e6f79a 0%,var(--lime) 40%,#8fbf14 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stack-lead{
  margin:0 0 44px;max-width:780px;
  font-size:18.5px;line-height:1.7;color:var(--txt-2);font-weight:300;
}

.cmp{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  border:1px solid var(--line-soft);border-radius:30px;
  background:linear-gradient(160deg,#0c0e07 0%,#080906 60%,#070805 100%);
  padding:22px;
}
.cmp-card{
  position:relative;border:1px solid var(--line-soft);border-radius:24px;
  background:#080905;padding:34px 32px 30px;
}
.cmp-us{
  border-color:rgba(196,243,43,.22);
  background:
    radial-gradient(64% 38% at 84% 4%,rgba(196,243,43,.16),transparent 64%),
    linear-gradient(170deg,#0e1008 0%,#090a06 55%,#070805 100%);
}
.cmp-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:24px}
.cmp-k{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.2em;color:var(--txt-2);
}
.cmp-sub{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.01em}

.cmp-rows{display:grid;gap:14px}
.cmp-rows li,.cmp-feats li{
  display:flex;align-items:center;gap:18px;
  border:1px solid var(--line-soft);border-radius:16px;background:#0b0c08;
  padding:18px 22px;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .35s var(--ease);
  transition-delay:calc(var(--i) * 70ms);
}
.cmp.in .cmp-rows li,.cmp.in .cmp-feats li{opacity:1;transform:none}
.cmp-rows li:hover,.cmp-feats li:hover{border-color:rgba(196,243,43,.3)}
.cmp-ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  border:1px solid rgba(196,243,43,.26);background:#101309;color:var(--lime);
}
.cmp-ic svg{width:22px;height:22px}
.cmp-rows li > span{flex:1;min-width:0;font-size:17.5px;color:var(--txt);font-weight:300}
/* the cost figures stay red — they are the point of the comparison */
.cmp-rows li b{
  flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:23px;font-weight:700;color:#f2748f;letter-spacing:-.01em;
}
.cmp-total{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  margin-top:26px;padding-top:26px;border-top:1px solid var(--line-soft);
}
.cmp-total > span{font-size:17px;color:var(--txt-2);font-weight:300}
.cmp-total p{display:flex;align-items:baseline;gap:12px;margin:0}
.cmp-total em,.cmp-total s{
  font-style:normal;text-decoration:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;color:var(--txt-3);
}
.cmp-total b{font-size:38px;font-weight:700;color:#fff;letter-spacing:-.03em}

.cmp-pill{
  position:absolute;right:26px;top:26px;
  padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.16em;color:var(--txt-2);
}
.cmp-brand{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.cmp-mark{width:46px;height:auto;filter:drop-shadow(0 0 12px rgba(196,243,43,.3))}
.cmp-brand b{font-size:27px;font-weight:800;letter-spacing:.02em;color:#fff}
.cmp-brand .rule{width:1px;height:24px;background:rgba(255,255,255,.16);margin:0 5px}
.cmp-brand span{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.18em;color:var(--txt-2);
}
.cmp-free{
  margin:0 0 18px;font-size:clamp(62px,7vw,104px);line-height:.88;
  font-weight:800;letter-spacing:-.045em;
  background:linear-gradient(120deg,#ffffff 0%,#eaf6b6 38%,var(--lime) 72%,#8fbf14 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(14px) scale(.95);transform-origin:left bottom;
  transition:opacity .7s var(--ease) .2s,transform .7s var(--ease) .2s;
}
.cmp.in .cmp-free{opacity:1;transform:none}
.cmp-us .cmp-k{display:block;margin-bottom:14px}
.cmp-note{margin:0 0 26px;max-width:520px;font-size:17px;line-height:1.55;color:var(--txt-2);font-weight:300}
.cmp-feats{display:grid;gap:13px;margin-bottom:28px}
.cmp-feats li > span{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cmp-feats li b{font-size:18.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.cmp-feats li em{font-style:normal;font-size:15px;color:var(--txt-2);font-weight:300}
/* a tick is green everywhere; that reading beats the brand colour here */
.cmp-ok{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(94,211,178,.4);background:rgba(94,211,178,.08);color:#5ed3b2;
  transform:scale(.6);opacity:0;
  transition:transform .45s var(--ease),opacity .45s var(--ease);
  transition-delay:calc(.25s + var(--i) * 70ms);
}
.cmp.in .cmp-ok{transform:none;opacity:1}
.cmp-ok svg{width:20px;height:20px}
.cmp-cta{
  display:inline-flex;align-items:center;gap:13px;
  padding:19px 32px;border-radius:14px;
  background:linear-gradient(100deg,#a5d41c,var(--lime));color:#0b0f05;
  font-size:18px;font-weight:600;
  box-shadow:0 14px 38px rgba(196,243,43,.26);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cmp-cta:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(196,243,43,.44)}
.cmp-cta svg{width:19px;height:19px}

.cmp-foot{
  margin:22px 0 0;padding-left:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.04em;color:var(--txt-3);
}

@media (max-width:1000px){
  .cmp{grid-template-columns:1fr;gap:16px;padding:16px;border-radius:24px}
  .cmp-card{padding:26px 22px 24px;border-radius:20px}
  .cmp-pill{right:20px;top:20px}
  .cmp-head{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:20px}
}
@media (max-width:620px){
  .stack-lead{font-size:16.5px;margin-bottom:32px}
  .cmp-card{padding:22px 16px 22px}
  .cmp-rows li,.cmp-feats li{gap:13px;padding:14px 15px;border-radius:14px}
  .cmp-ic{width:40px;height:40px;border-radius:11px}
  .cmp-ic svg{width:19px;height:19px}
  .cmp-rows li > span{font-size:15.5px}
  .cmp-rows li b{font-size:19px}
  .cmp-total{flex-direction:column;align-items:flex-start;gap:10px;margin-top:20px;padding-top:20px}
  .cmp-total b{font-size:32px}
  /* the pill would sit on the brand line at this width */
  .cmp-pill{position:static;display:inline-block;margin-bottom:16px}
  .cmp-brand b{font-size:23px}
  .cmp-brand span{font-size:11.5px;letter-spacing:.12em}
  .cmp-feats li b{font-size:16.5px}
  .cmp-feats li em{font-size:14px}
  .cmp-ok{width:32px;height:32px}
  .cmp-ok svg{width:17px;height:17px}
  .cmp-cta{width:100%;justify-content:center;padding:16px 24px;font-size:16.5px}
  .cmp-foot{font-size:11.5px;line-height:1.6}
}

/* ---- why ---- */
.why-card{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;
  background:linear-gradient(145deg,#111210 0%,#0a0b09 45%,#070806 100%);
  border:1px solid var(--line-soft);border-radius:26px;padding:48px 0 0 48px;overflow:hidden;
}
.why-left{padding-bottom:52px}
.checks{display:grid;gap:16px;margin-top:34px}
.checks.two{grid-template-columns:1fr 1fr;column-gap:20px}
.checks.two.wide{grid-template-columns:1fr 1fr;column-gap:44px;row-gap:18px;margin-top:40px}
.checks li{display:flex;align-items:center;gap:12px;font-size:16px;color:#e4e6e1;font-weight:300}
.ck{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;flex:0 0 auto;color:#fff}
.ck svg{width:12px;height:12px}
.ck.sq{border-radius:50%}
.why-hr{border:0;border-top:1px solid var(--line-soft);margin:34px 0 28px;width:70%}
.why-stats{display:flex;gap:44px;margin-bottom:34px}
.stat{display:flex;align-items:center;gap:12px}
.si{width:34px;height:34px;border-radius:50%;background:#161814;border:1px solid var(--line);display:grid;place-items:center;color:#c9ccc6}
.si svg{width:17px;height:17px}
.sv{display:flex;flex-direction:column;line-height:1.25}
.sv b{font-size:19px;font-weight:600}
.sv em{font-style:normal;font-size:14px;color:var(--txt-2)}
.why-right{display:flex;align-items:flex-end}
.stat-panel{
  position:relative;width:100%;height:100%;min-height:360px;border-radius:20px 0 0 0;
  background:linear-gradient(160deg,#1c1e1a,#0d0e0c 55%);border:1px solid var(--line-soft);border-bottom:0;
  overflow:hidden;
}
.stat-panel .chip{
  position:absolute;left:24px;top:22px;z-index:3;font-size:13px;color:#e7e9e4;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:9px;padding:7px 13px;backdrop-filter:blur(6px);
}
.bars{position:absolute;inset:auto 26px 0 26px;display:flex;align-items:flex-end;gap:16px;height:80%}
.bars span{
  flex:1;height:0;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#2b2e29,#141613);
  transition:height 1.2s var(--ease);
}
.stat-panel.in-view .bars span{height:var(--h)}
.bars span.lime{
  background:linear-gradient(180deg,#e9ffa0,var(--lime) 30%,#7fae12);
  box-shadow:0 0 50px rgba(196,243,43,.55),0 0 120px rgba(196,243,43,.3);
  transition-delay:.35s;
}
.stars{position:absolute;inset:0;pointer-events:none;z-index:1}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.28;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.12}50%{opacity:.6}}

/* ---- feature cards ---- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.feat{
  display:flex;gap:16px;align-items:flex-start;padding:24px 26px;border-radius:18px;
  background:linear-gradient(150deg,#0e0f0d,#080907);border:1px solid var(--line-soft);
  transition:.45s var(--ease);
}
.feat:hover{border-color:rgba(196,243,43,.22);transform:translateY(-4px);background:linear-gradient(150deg,#121310,#0a0b09)}
.fi{width:38px;height:38px;border-radius:50%;background:#15170f;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;color:#c6c9c3;transition:.4s}
.feat:hover .fi{color:var(--lime);border-color:rgba(196,243,43,.3)}
.fi svg{width:19px;height:19px}
.feat h4{margin:0 0 6px;font-size:19px;font-weight:400;letter-spacing:-.01em}
.feat p{margin:0;font-size:14.5px;line-height:1.5;color:var(--txt-2)}

/* ============ MARQUEE ============ */
.marquee-sec{padding:70px 0 40px}
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:scrollx 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.mq-group{display:flex;align-items:center;gap:60px;padding-right:60px}
/* the brand alternates with the three lines of the hero headline */
.mq{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:26px;letter-spacing:-.01em;transition:.4s;
}
.mq.brand{font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);
  text-shadow:0 0 22px rgba(196,243,43,.35)}
.mq.say{font-weight:300;color:#8d9089}
.mq.say:hover{color:#dfe2dc}

/* ============ GLOBE ============ */
.globe-sec{padding:190px 0 170px;overflow:hidden}
.globe-stage{
  position:absolute;left:-16%;top:50%;transform:translateY(-50%);
  width:min(760px,60vw);aspect-ratio:1;pointer-events:none;
}
#globe{width:100%;height:100%}
.globe-halo{
  position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(45% 45% at 62% 50%,rgba(196,243,43,.22),transparent 68%);
  filter:blur(34px);
}
.nodes{position:absolute;inset:0}
.node{position:absolute;display:flex;align-items:center}
.node .line{width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,243,43,.5))}
.node em{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(196,243,43,.45);background:rgba(20,26,8,.7);
  display:grid;place-items:center;color:var(--lime);
  box-shadow:0 0 24px rgba(196,243,43,.22);
  animation:float 5s ease-in-out infinite;
}
.node em svg{width:19px;height:19px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.node.n1{left:52%;top:17%}
.node.n2{left:58%;top:32%;}
.node.n3{left:64%;top:47%}
.node.n4{left:58%;top:61%}
.node.n5{left:52%;top:76%}
.node.n2 em{animation-delay:.6s}.node.n3 em{animation-delay:1.2s}
.node.n4 em{animation-delay:1.8s}.node.n5 em{animation-delay:2.4s}
.globe-copy{display:flex;justify-content:flex-end}
.globe-text{width:min(560px,100%)}
.globe-text .btn-lime{margin-top:44px}

/* ============ BENTO ============ */
.bento-sec{padding-top:40px}
.bento{display:grid;grid-template-columns:1.62fr 1fr;gap:20px}
.bento-card{
  position:relative;border-radius:22px;overflow:hidden;min-height:330px;
  border:1px solid var(--line-soft);background:#070707;
  display:flex;align-items:flex-end;transition:.5s var(--ease);
}
.bento-card.full{grid-column:1 / -1;min-height:360px}
.bento-card:hover{border-color:rgba(255,255,255,.14)}
.bento-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5;transition:transform 1.2s var(--ease),opacity .6s}
.bento-card:hover .bento-bg{transform:scale(1.06);opacity:.62}
.bento-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(4,4,4,.82) 46%,#040404 78%)}
.bento-content{position:relative;z-index:2;padding:34px 36px 36px;max-width:640px}
.bento-content h3{margin:0 0 12px;font-size:25px;font-weight:400;letter-spacing:-.01em}
.bento-content p{margin:0 0 22px;color:var(--txt-2);font-size:15px;line-height:1.6;font-weight:300}
.link-arrow{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:#fff}
.link-arrow svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.link-arrow:hover svg{transform:translateX(6px)}
.bg-candles{background-image:url(../assets/candles.svg)}
.bg-grid{background-image:url(../assets/grid-globe.svg);background-position:top center}
.bg-risk{background-image:url(../assets/risk.svg);opacity:.32}

/* ============ TESTIMONIALS ============ */
.testi-sec{padding:140px 0 120px;position:relative;overflow:hidden}
.testi-glow{
  position:absolute;left:50%;top:-40px;transform:translateX(-50%);
  width:640px;height:420px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.07),transparent 70%);
  filter:blur(40px);
}
.testi-viewport{margin-top:62px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.testi-track{display:flex;gap:26px;transition:transform .8s var(--ease);will-change:transform}
.testi-card{
  flex:0 0 clamp(320px,47vw,660px);border:1px solid var(--line-soft);border-radius:16px;
  padding:34px 34px 30px;background:#060606;opacity:.32;transition:opacity .7s var(--ease),border-color .7s;
}
.testi-card.active{opacity:1;border-color:rgba(255,255,255,.12);background:#080808}
.testi-card blockquote{margin:0 0 26px;font-size:clamp(16px,1.5vw,20px);line-height:1.5;font-weight:300;color:#eceee9}
.testi-who{display:flex;align-items:center;gap:13px}
.testi-who img{width:38px;height:38px;border-radius:50%}
.testi-who b{display:block;font-size:16px;font-weight:400}
.testi-who span{display:block;font-size:13px;color:var(--txt-3)}
.testi-nav{display:flex;justify-content:center;gap:14px;margin-top:44px}
.testi-nav button{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;color:#cfd2cc;transition:.35s var(--ease);
}
.testi-nav button:hover{background:#fff;color:#000;border-color:#fff}
.testi-nav svg{width:18px;height:18px}

/* ============ CTA ============ */
.cta-sec{padding:20px 0 120px}
.cta-card{
  position:relative;overflow:hidden;border-radius:30px;border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#0a0b07 0%,#080906 55%,#0b0d07 100%);
  padding:96px 30px 104px;text-align:center;
}
.cta-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:104px 104px;
  mask-image:radial-gradient(120% 100% at 50% 78%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 78%,#000 10%,transparent 78%);
  opacity:0;transition:opacity 1.2s var(--ease) .15s;
}
.cta-card.in .cta-grid{opacity:1}
/* the glow rises out of the bottom edge, as in the reference */
.cta-rise{
  position:absolute;left:50%;bottom:-38%;width:min(1120px,110%);height:92%;
  transform:translateX(-50%) scaleY(.7);transform-origin:bottom;
  background:radial-gradient(50% 50% at 50% 60%,rgba(196,243,43,.3),transparent 68%);
  filter:blur(10px);pointer-events:none;opacity:0;
  transition:opacity 1.2s var(--ease) .2s,transform 1.4s var(--ease) .2s;
}
.cta-card.in .cta-rise{opacity:1;transform:translateX(-50%) scaleY(1)}

.cta-kicker{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:13px;margin:0 0 30px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;letter-spacing:.2em;color:var(--txt-2);
}
.cta-title{
  position:relative;z-index:2;margin:0 auto 34px;max-width:15ch;
  font-size:clamp(40px,7vw,104px);line-height:1.02;font-weight:800;
  letter-spacing:-.04em;color:#fff;
}
.cta-title span{
  background:linear-gradient(100deg,#e6f79a 0%,var(--lime) 42%,#8fbf14 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cta-lead{
  position:relative;z-index:2;margin:0 auto 38px;max-width:620px;
  font-size:19px;line-height:1.6;color:var(--txt-2);font-weight:300;
}
.cta-btn{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:14px;
  padding:21px 38px;border-radius:15px;
  background:linear-gradient(100deg,#a5d41c,var(--lime));color:#0b0f05;
  font-size:19px;font-weight:600;
  box-shadow:0 16px 46px rgba(196,243,43,.3);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 22px 58px rgba(196,243,43,.48)}
.cta-btn svg{width:20px;height:20px}
.cta-fine{
  position:relative;z-index:2;margin:26px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.09em;color:var(--txt-3);
}

@media (max-width:760px){
  .cta-sec{padding-bottom:84px}
  .cta-card{padding:58px 20px 66px;border-radius:22px}
  .cta-grid{background-size:74px 74px}
  .cta-kicker{font-size:11.5px;letter-spacing:.14em;margin-bottom:22px}
  .cta-title{max-width:none;margin-bottom:24px}
  .cta-lead{font-size:16.5px;margin-bottom:30px}
  .cta-btn{width:100%;justify-content:center;padding:17px 26px;font-size:17px}
  .cta-fine{font-size:11.5px;letter-spacing:.05em}
}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--line-soft);background:#040404;padding:72px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px}
.foot-tag{color:#cfd2cc;font-size:17px;margin:22px 0 28px;font-weight:300}
.socials{display:flex;gap:12px}
.socials a{
  width:40px;height:40px;border-radius:50%;background:#131413;display:grid;place-items:center;
  color:#dfe2dc;transition:.35s var(--ease);
}
.socials a:hover{background:var(--lime);color:#0a0e04;transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.foot-col h5{margin:0 0 20px;font-size:17px;font-weight:400;color:#eceee9}
.foot-col a{display:block;margin-bottom:13px;font-size:15px;color:var(--txt-2);font-weight:300;transition:.3s}
.foot-col a:hover{color:var(--lime)}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--txt-2);font-weight:300;
}
.foot-legal{display:flex;gap:26px}
.foot-legal a{color:#e2e4df}
.foot-legal a:hover{color:var(--lime)}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .why-card{grid-template-columns:1fr;padding:36px 30px 0}
  .features{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr}
  .globe-stage{position:relative;left:auto;top:auto;transform:none;width:min(520px,86vw);margin:0 auto 40px}
  .globe-copy{justify-content:center}
  .globe-text{width:100%}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
/* keep the three funding plans side by side as long as possible */
@media (max-width:1080px){
  .plans{gap:16px}
  .plan-body{padding:16px 18px 28px}
  .plan-tab span{font-size:21px}
  .plan-body p{font-size:13.5px;min-height:104px}
  .metrics .mk{font-size:13.5px}
  .metrics .mv{font-size:12px}
  .metrics li{column-gap:10px;margin-bottom:19px}
}
@media (max-width:880px){
  .plans{gap:12px}
  .plan-tab{height:74px}
  .plan-tab .tab-shape{height:82px}
  .plan-tab span{font-size:17px}
  .plan-body{padding:14px 14px 24px}
  .plan-body h3{font-size:15px}
  .plan-body p{font-size:12.5px;line-height:1.5;min-height:112px}
  .metrics .knob{width:13px;height:19px}
  .metrics .mk{font-size:12.5px}
  .metrics .mv{font-size:11px}
}
@media (max-width:680px){
  .plans{grid-template-columns:1fr;max-width:480px;margin-inline:auto;gap:22px}
  .plan-tab{height:88px}
  .plan-tab .tab-shape{height:96px}
  .plan-tab span{font-size:26px}
  .plan-body{padding:18px 26px 34px}
  .plan-body h3{font-size:17px}
  .plan-body p{font-size:14.5px;min-height:0}
  .metrics .mk{font-size:14.5px}
  .metrics .mv{font-size:13px}
}

@media (max-width:760px){
  .nav-links{
    display:none;position:absolute;left:12px;right:12px;top:calc(100% + 10px);
    flex-direction:column;align-items:flex-start;gap:4px;margin:0;padding:16px 20px;
    background:rgba(10,10,10,.96);border:1px solid var(--line);border-radius:20px;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  }
  .nav-links.open{display:flex}
  .nav-links a,.nav-links .more{padding:10px 0;font-size:17px}
  /* Handy: Logo links, Sprache und Menue rechts. Der Knopf "Sign up" passt
     nicht mehr in die Leiste und steht dafuer als erster Punkt im Menue. */
  .burger{display:flex;order:3;flex:0 0 34px}
  .nav-inner{position:relative;width:calc(100% - 24px);padding:8px 8px 8px 14px;gap:8px}
  .nav-inner > .btn-ghost{display:none}
  .brand{flex:0 1 auto;min-width:0;gap:8px}
  .brand-mark{height:26px}
  .brand-text{font-size:19px}
  .nav-links .nav-cta{display:inline-flex;margin-bottom:6px;padding:10px 20px;border-radius:999px;
    background:var(--lime);color:#0b0f05;font-weight:600;font-size:15px}
  .nav-links .nav-cta::after{display:none}
  .hero{padding-top:140px}
  .section{padding:96px 0}
  #programs{padding-top:150px}
  .features{grid-template-columns:1fr}
  .checks.two{grid-template-columns:1fr}
  .term-body{grid-template-columns:1fr}
  .term-watchlist{display:none}
  .term-top,.term-tabs,.chart-toolbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .term-top::-webkit-scrollbar,.term-tabs::-webkit-scrollbar,.chart-toolbar::-webkit-scrollbar{display:none}
  .candles{height:220px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-direction:column;text-align:center}
  .terminal-wrap{margin:72px auto 10px;width:calc(100% - 24px)}
  .terminal{border-radius:16px;padding:4px}
  .term-live,.term-deck{border-radius:12px}
  .term-deck.far{top:-18px;width:calc(100% - 96px)}
  .term-deck.near{top:-10px;width:calc(100% - 52px)}
  .hero-3d{margin-top:6px;height:clamp(300px,42vh,400px)}
  .hero-3d-glow{width:130%;height:76%}
}

/* Nichts darf die Seite breiter machen als den Bildschirm: auf dem Handy
   waechst sonst die ganze Ansicht mit, und die feste Kopfleiste verrutscht
   (im Deutschen staerker, weil die Woerter laenger sind). */
html{overflow-x:clip}
@media (max-width:760px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .foot-grid > *{min-width:0}
  .foot-col a,.foot-col h5{overflow-wrap:anywhere}
  .checks.two,.checks.two.wide{grid-template-columns:minmax(0,1fr)}
  .checks li{min-width:0;overflow-wrap:anywhere}
}