/* ==========================================================================
   Smart Copy Classroom — styles
   Palette and spacing tokens live in :root. Change them there, not inline.
   ========================================================================== */

:root{
  /* ---------------------------------------------------------------------
     NEON PALETTE — four accent hues used across the whole site.
     Every accent also has an -rgb triplet so it can be dropped straight into
     rgba() for glows: rgba(var(--neon-pink-rgb),.3).

     Cards, icons and section accents pick one of these through --accent (see
     the .a-blue / .a-green / .a-yellow / .a-pink helper classes further down),
     so re-colouring a block is a one-class change, never a new rule.
     --------------------------------------------------------------------- */
  --neon-green:#2ee86b;   --neon-green-rgb:46,232,107;
  --neon-blue:#38bdf8;    --neon-blue-rgb:56,189,248;
  --neon-yellow:#ffd23f;  --neon-yellow-rgb:255,210,63;
  --neon-pink:#ff4fd8;    --neon-pink-rgb:255,79,216;

  /* The default accent. Any element can override it on itself or a parent. */
  --accent:var(--neon-green);
  --accent-rgb:var(--neon-green-rgb);

  /* brand — kept as aliases so every existing rule keeps working */
  --green:var(--neon-green);
  --green-dim:#1bb954;
  --cyan:var(--neon-blue);
  --amber:#ffa724;

  /* surface */
  --bg:#070b14;
  --bg-alt:#0a1020;
  --surface:#0e1524;
  --surface-2:#121b2e;
  --line:#1c2740;

  /* ---------------------------------------------------------------------
     TYPE SCALE — the only font sizes the site uses. Every font-size rule
     below reads one of these, so resizing a level is a one-line change.
       hero    the hero headline
       h2      section titles (and the big step numerals)
       h3      card / step / strategy titles
       num     headline figures (hero stats, strategy return)
       lead    subtitles under a title
       body    running text: prose, FAQ, base
       body-sm text inside cards (grows to body on phones, see the end)
       kicker  the bracketed eyebrow above every section title
       small   buttons, nav, links, footers
       meta    labels, disclaimers
       micro   uppercase pills and badges only
     --------------------------------------------------------------------- */
  --fs-hero:clamp(2.35rem,6.4vw,4.4rem);
  --fs-h2:clamp(1.75rem,4vw,2.65rem);
  --fs-h3:1.1875rem;
  --fs-num:clamp(1.6rem,3.4vw,2.2rem);
  --fs-lead:clamp(1.0625rem,1.7vw,1.1875rem);
  --fs-kicker:clamp(.9375rem,1.5vw,1.125rem);
  --ls-kicker:.16em;              /* tracking that goes with --fs-kicker */
  --fs-body:1rem;
  --fs-body-sm:.9375rem;
  --fs-small:.875rem;
  --fs-meta:.8125rem;
  --fs-micro:.6875rem;

  /* type colours */
  --text:#ffffff;
  --muted:#93a3b8;
  --muted-dim:#64748b;

  /* glow */
  --glow-green:0 0 24px rgba(46,232,107,.35);
  --glow-cyan:0 0 24px rgba(56,189,248,.35);

  /* layout */
  --wrap:1180px;
  --pad:24px;
  --r:16px;
  --r-sm:10px;

  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---------------------------------------------------------------------
     3D OWL (hero) — SAFE TO EDIT BY HAND
     Change a value, save, refresh the browser. No rebuild needed.

     The owl behaves differently at two sizes:
       DESKTOP (>1000px) — absolutely positioned overlay beside the hero text.
                          Controlled by --owl-width/-height and the offsets.
       NARROW  (<=1000px) — leaves the overlay and becomes its own centred
                          block in the hero column, above the text, so
                          nothing overlaps. Controlled by --owl-m-* below;
                          the offsets are ignored there.

     --owl-width / --owl-height   (desktop only)
         Any CSS length: 520px, 40vw, or min(520px,40vw) to cap it on
         small screens. Keep the two equal — the owl is square, and a
         mismatch just pads the canvas with empty space, it won't stretch.

     --owl-top / --owl-right / --owl-bottom / --owl-left   (desktop only)
         Distance from that edge of the hero. Set the TWO edges you want
         to anchor to and leave the opposite two as `auto`.
           top-right (current):  top + right,  bottom + left = auto
           top-left:             top + left,   bottom + right = auto
           bottom-right:         bottom+right, top + left = auto
         Accepts px, %, vw/vh, or calc().

     --owl-m-size / --owl-m-gap   (narrow only)
         Size of the stacked owl and the space between it and the headline.

     --owl-opacity
         0 = invisible, 1 = fully solid.
     --------------------------------------------------------------------- */
  --owl-width:min(520px,40vw);
  --owl-height:min(520px,40vw);

  /* Vertically centred in the hero. The calc keeps it centred at every
     window height; swap in a plain value (e.g. 22%) to pin it instead.
     Add a nudge to taste: calc(50% - var(--owl-height) / 2 + 40px). */
  --owl-top:calc(50% - var(--owl-height) / 2);
  --owl-right:8%;
  --owl-bottom:auto;
  --owl-left:auto;
  --owl-opacity:.9;

  /* narrow-viewport stacked owl */
  --owl-m-size:min(300px,52vw);
  --owl-m-gap:20px;
}

/* Narrow / tablet: the owl gets its own space in the flow, so it no longer
   needs to be faded back to stay clear of the text. */
@media (max-width:1000px){
  :root{ --owl-opacity:1; }
}

/* 1001-1400px: still the desktop overlay, but the 620px-wide hero paragraph
   and a full-size 520px owl fight for the same space. Measured clean with a
   400px cap at 32vw. Above 1400px the hero text stops growing (.wrap caps at
   1180px) so the full size fits with room to spare. */
@media (min-width:1001px) and (max-width:1400px){
  :root{
    --owl-width:min(400px,32vw);
    --owl-height:min(400px,32vw);
    --owl-right:5%;
  }
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.12;margin:0;letter-spacing:-.02em;font-weight:800}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--green);color:#04120a;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;
}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:800px}
.center{text-align:center}

/* --------------------------------------------------------- nav */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:16px 0;
  transition:background .3s var(--ease),padding .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(7,11,20,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding:10px 0;
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px}

.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-text{font-weight:800;font-size:var(--fs-body);letter-spacing:-.01em;white-space:nowrap}
.brand-thin{font-weight:400;color:var(--muted);margin-left:5px}

.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:var(--fs-small);color:var(--muted);font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links .btn{color:#04120a}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:100px;
  font-weight:700;font-size:var(--fs-body-sm);letter-spacing:.01em;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s;
  will-change:transform;
}
.btn-sm{padding:9px 18px;font-size:var(--fs-small)}
.btn-lg{padding:16px 34px;font-size:var(--fs-body)}

.btn-green{background:var(--green);color:#04120a;box-shadow:var(--glow-green)}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(46,232,107,.55)}

.btn-cyan{background:transparent;color:var(--cyan);border-color:rgba(56,189,248,.45);box-shadow:inset 0 0 20px rgba(56,189,248,.06)}
.btn-cyan:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:var(--glow-cyan)}

.link-arrow{display:inline-flex;align-items:center;gap:7px;color:var(--cyan);font-weight:600;font-size:var(--fs-small);margin-top:14px}
.link-arrow span{transition:transform .2s var(--ease)}
.link-arrow:hover span{transform:translateX(4px)}

/* --------------------------------------------------------- hero */
.hero{
  position:relative;
  min-height:100svh;min-height:100dvh;
  display:flex;align-items:center;
  padding:130px 0 90px;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.layer{position:absolute;inset:0;will-change:transform}

.layer-grid{
  background-image:
    linear-gradient(rgba(46,232,107,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,232,107,.055) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 85% 65% at 50% 42%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 42%,#000 25%,transparent 78%);
}
.layer-glow{border-radius:50%;filter:blur(90px)}
.glow-a{width:min(620px,85vw);height:min(620px,85vw);left:-12%;top:-14%;background:radial-gradient(circle,rgba(46,232,107,.22),transparent 68%)}
.glow-b{width:min(560px,80vw);height:min(560px,80vw);right:-14%;bottom:-16%;left:auto;top:auto;background:radial-gradient(circle,rgba(56,189,248,.2),transparent 68%)}

/* The 3D owl. Size and position come from the --owl-* tokens in :root —
   edit them there, not here. All four offsets are declared so they override
   the `inset:0` inherited from .layer. */
.layer-bolt{
  top:var(--owl-top);
  right:var(--owl-right);
  bottom:var(--owl-bottom);
  left:var(--owl-left);
  width:var(--owl-width);
  height:var(--owl-height);
  opacity:var(--owl-opacity);
  --poster-color:transparent;
  background-color:transparent;
}
/* Interactive: drag to rotate. touch-action:pan-y lets a vertical swipe
   scroll the page while a horizontal drag spins the owl; disable-zoom on the
   element keeps the mouse wheel scrolling the page instead of zooming.
   Hit-testing is limited to this element's own box. */
model-viewer.layer-bolt{
  pointer-events:auto;
  touch-action:pan-y;
  cursor:grab;
  /* the grey/orange flash on tap comes from the host's default
     -webkit-tap-highlight-color (rgba(0,0,0,.18)); this inherits into the
     shadow tree too */
  -webkit-tap-highlight-color:transparent;
}
model-viewer.layer-bolt:active{cursor:grabbing}
/* The square box on click is a focus ring. model-viewer's shadow root holds
   <div class="userInput" tabindex="0"> and its own stylesheet gives it
   outline-offset:-1px / outline-width:1px, so the UA ring hugs the whole
   square. Document CSS cannot reach that div and model-viewer exposes no
   ::part for it, so the inner half is injected into the shadow root from
   main.js; this covers the host itself. The owl is decorative, so the ring
   costs nothing - it is not keyboard-operable either way. */
model-viewer.layer-bolt:focus,
model-viewer.layer-bolt:focus-visible,
model-viewer.layer-bolt:focus-within{outline:none}
/* Narrow viewports: the owl drops out of the overlay and becomes its own
   centred block in the hero's flex column, above the text - no overlap.
   To put it BELOW the text instead, change order to 1 and move the gap:
     order:1; margin:var(--owl-m-gap) auto 0;
   It renders on every viewport, touch phones included - there is
   deliberately no pointer:coarse hide rule.
   The 1000px cut-off is where the hero paragraph (620px) stops leaving
   usable clear space beside it; below that the overlay always overlapped.
   z-index: as a static box the owl would paint underneath the absolutely
   positioned .hero-bg, so its grid, glow and scanlines drew across the model.
   A flex item takes z-index without being positioned; 1 lifts it over every
   background layer and keeps it under the hero text (.hero-in, z-index 2). */
@media (max-width:1000px){
  .hero{flex-direction:column;justify-content:center}
  .layer-bolt{
    position:static;
    z-index:1;
    order:-1;
    flex:0 0 auto;
    width:var(--owl-m-size);
    height:var(--owl-m-size);
    margin:0 auto var(--owl-m-gap);
  }
}

/* ---- dev-only owl positioning mode -------------------------------------
   Switched on by ?edit=1 in the URL or by pressing Shift+O. Never active
   for normal visitors: main.js adds .owl-edit to <body> only on request.
   pointer-events:auto here re-enables hit-testing on a descendant of
   .hero-bg (which is pointer-events:none), so the drag handler can see it. */
body.owl-edit model-viewer.layer-bolt,
body.owl-edit model-viewer.layer-bolt:focus,
body.owl-edit model-viewer.layer-bolt:focus-visible,
body.owl-edit model-viewer.layer-bolt:focus-within{
  pointer-events:auto;
  cursor:grab;
  outline:2px dashed var(--cyan);
  outline-offset:6px;
}
body.owl-edit model-viewer.layer-bolt.is-dragging{cursor:grabbing;outline-style:solid}
.owl-hud{
  position:fixed;z-index:9999;left:16px;bottom:16px;
  font:600 12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(7,11,20,.92);color:var(--cyan);
  border:1px solid var(--cyan);border-radius:var(--r-sm);
  padding:10px 13px;max-width:min(340px,calc(100vw - 32px));
  white-space:pre-wrap;pointer-events:none;
}
.owl-hud b{color:var(--green)}

.layer-scan{
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px);
  opacity:.5;
}

.hero-in{position:relative;z-index:2;pointer-events:none}
/* The hero text wrapper spans the full column width, so its empty right-hand
   side covers the owl behind it. Make the wrapper itself transparent to the
   pointer and hand events back to its children, so drags that land on blank
   space reach the owl while every real control stays clickable. */
.hero-in > *{pointer-events:auto}
/* Those children are full-width blocks too. Where the owl is an overlay
   (>1000px) shrink the ones beside it to their actual content; below that
   the owl has its own row in the flow and nothing overlaps. */
@media (min-width:1001px){
  .hero .eyebrow,
  .hero h1,
  .hero-cta,
  .hero-stats{width:fit-content;max-width:100%}
}

.eyebrow{
  font-size:var(--fs-kicker);letter-spacing:var(--ls-kicker);text-transform:uppercase;
  color:var(--green);font-weight:700;margin:0 0 18px;
}
.hero h1{font-size:var(--fs-hero);margin-bottom:22px;font-weight:900}
.grad{
  background:linear-gradient(100deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:var(--fs-lead);color:var(--muted);max-width:620px;margin:0 0 36px;line-height:1.7}

.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-cta.center{justify-content:center}

.hero-stats{display:flex;flex-wrap:wrap;gap:44px;margin-top:58px}

/* --------------------------------------------------------- ticker tape
   TradingView renders the marquee inside a cross-origin iframe, so nothing
   here can recolour its interior - theme/transparency live in the widget's
   JSON config in index.html. What we style is the frame around it: a dark
   neon-edged strip that matches the hero. isTransparent:true in the config
   is what lets this gradient show through. */
.ticker{
  margin-top:36px;
  max-width:100%;
  overflow:hidden;                 /* nothing escapes sideways on narrow screens */
  border:1px solid rgba(46,232,107,.22);
  border-radius:var(--r-sm);
  background:
    linear-gradient(90deg,rgba(46,232,107,.09),rgba(56,189,248,.09)),
    var(--surface);
  box-shadow:0 0 26px rgba(46,232,107,.08);
}
.ticker .tradingview-widget-container{width:100%}
.ticker iframe{display:block;width:100%!important;max-width:100%!important;border:0}
.ticker .tradingview-widget-copyright{
  font-size:var(--fs-micro);letter-spacing:.04em;text-align:right;
  padding:0 10px 6px;margin:0;line-height:1.4;
}
.ticker .tradingview-widget-copyright a{color:var(--muted-dim);text-decoration:none}
.ticker .tradingview-widget-copyright a:hover{color:var(--cyan)}
.hstat b,.pstat b{
  display:block;font-size:var(--fs-num);font-weight:800;
  color:var(--green);letter-spacing:-.02em;line-height:1.1;
  text-shadow:0 0 22px rgba(46,232,107,.35);font-variant-numeric:tabular-nums;
}
.hstat span,.pstat span{font-size:var(--fs-meta);color:var(--muted-dim);letter-spacing:.04em}

.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  width:24px;height:38px;border:1.5px solid var(--line);border-radius:14px;z-index:2;
}
.scroll-hint span{
  position:absolute;top:8px;left:50%;margin-left:-2px;
  width:4px;height:7px;border-radius:2px;background:var(--green);
  animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(13px)}}

/* --------------------------------------------------------- sections */
.sec{padding:clamp(72px,10vw,124px) 0;position:relative}
.sec.alt{background:var(--bg-alt)}

.kicker{
  font-size:var(--fs-kicker);letter-spacing:var(--ls-kicker);text-transform:uppercase;
  color:var(--cyan);font-weight:700;margin:0 0 14px;
}
.sec h2{font-size:var(--fs-h2);margin-bottom:18px}
.sec h2 em{font-style:normal;color:var(--green)}
.lead{font-size:var(--fs-lead);color:var(--muted);max-width:660px;margin:0 0 42px;line-height:1.75}

/* --------------------------------------------------------- cards */
.grid{display:grid;gap:22px;margin-top:44px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px 28px;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;
  transform-style:preserve-3d;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(46,232,107,.1),transparent 42%);
  opacity:0;transition:opacity .35s;
}
.card:hover{border-color:rgba(46,232,107,.38);box-shadow:0 18px 44px rgba(0,0,0,.42)}
.card:hover::after{opacity:1}

.ico{
  width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;margin-bottom:20px;
  background:rgba(46,232,107,.09);border:1px solid rgba(46,232,107,.22);
  color:var(--green);box-shadow:inset 0 0 18px rgba(46,232,107,.08);
}
.ico svg{width:23px;height:23px}
.card h3{font-size:var(--fs-h3);margin-bottom:10px}
.card p{color:var(--muted);font-size:var(--fs-body-sm);margin:0;line-height:1.7}

.card.feature{border-color:rgba(46,232,107,.3);background:linear-gradient(160deg,var(--surface-2),var(--surface))}
.card.soon{background:transparent;border-style:dashed}

.tagrow{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tag{
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--muted);
}
.tag-green{background:rgba(46,232,107,.12);border-color:rgba(46,232,107,.32);color:var(--green)}
.card .role{margin-bottom:22px}

.speclist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.speclist li{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small);
}
.speclist span{color:var(--muted-dim)}
.speclist b{color:var(--text);font-weight:600}

/* --------------------------------------------------------- strategy lab */
.strat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;
}
.loading-note{color:var(--muted-dim);font-size:var(--fs-small);grid-column:1/-1}

.strat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;
}
.strat:hover{transform:translateY(-4px);border-color:rgba(46,232,107,.32);box-shadow:0 18px 44px rgba(0,0,0,.45)}

.strat-art{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#141d30,#0b1120);
  display:grid;place-items:center;
}
.strat-art img{width:100%;height:100%;object-fit:cover}
.strat-badge{
  position:absolute;top:12px;left:12px;
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;backdrop-filter:blur(6px);
}
.strat-badge.up{background:rgba(46,232,107,.16);color:var(--green);border:1px solid rgba(46,232,107,.4)}
.strat-badge.down{background:rgba(248,113,113,.16);color:#fca5a5;border:1px solid rgba(248,113,113,.42)}

.strat-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.strat-name{font-size:var(--fs-h3);font-weight:800;margin:0}
.strat-tag{font-size:var(--fs-meta);color:var(--cyan);font-weight:600;margin:2px 0 0}
.strat-prov{font-size:var(--fs-meta);color:var(--muted-dim);margin:8px 0 0}
.strat-prov b{color:var(--muted);font-weight:600}

.strat-return{margin:16px 0 14px;display:flex;align-items:baseline;gap:8px}
.strat-return b{font-size:var(--fs-num);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.strat-return.up b{color:var(--green);text-shadow:0 0 20px rgba(46,232,107,.3)}
.strat-return.down b{color:#f87171;text-shadow:0 0 20px rgba(248,113,113,.28)}
.strat-return span{font-size:var(--fs-micro);color:var(--muted-dim);letter-spacing:.04em}

.strat-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px;
}
.strat-stats div{background:var(--surface);padding:9px 6px;text-align:center}
.strat-stats b{display:block;font-size:var(--fs-small);font-weight:700;color:var(--text)}
.strat-stats span{font-size:var(--fs-micro);color:var(--muted-dim);letter-spacing:.03em;text-transform:uppercase}
.strat-stats .risk-hi b{color:#fbbf24}

.strat-id{font-size:var(--fs-micro);color:var(--muted-dim);margin:0 0 16px;font-family:ui-monospace,monospace}
.strat-id b{color:var(--muted);font-weight:600}

.strat-cta{margin-top:auto;display:flex;gap:8px}
.strat-cta .btn{flex:1;padding:11px 14px;font-size:var(--fs-small)}
.btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* --------------------------------------------------------- report card gallery */
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.report{
  margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.report:hover,.report:focus-visible{transform:translateY(-4px);border-color:rgba(56,189,248,.4);box-shadow:0 16px 40px rgba(0,0,0,.45);outline:none}
.report-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.report-head b{font-size:var(--fs-small)}
.report-ret{font-size:var(--fs-small);font-weight:800;font-variant-numeric:tabular-nums}
.report-ret.up{color:var(--green)}
.report-ret.down{color:#f87171}
.report img{width:100%;height:auto;display:block;background:#0b1120}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(4,7,13,.92);display:grid;place-items:center;padding:24px;backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(460px,92vw);max-height:88vh;border-radius:12px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:.8}
.lb-close:hover{opacity:1}

/* --------------------------------------------------------- prose / smart way */
.prose{margin-top:8px}
.prose p{color:var(--muted);font-size:var(--fs-body);line-height:1.8;margin:0 0 16px}
.prose em{color:var(--text);font-style:normal;font-weight:600}
.prose b{color:var(--text)}
.tagline-line{color:var(--green)!important;font-weight:700;font-size:var(--fs-body)!important;font-style:italic;margin-top:6px!important}

/* --------------------------------------------------------- deal / ref */
.deal{margin-top:40px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px 24px}
.deal p{color:var(--muted);font-size:var(--fs-body-sm);margin:0 0 18px}
.deal b{color:var(--green)}
.ref{margin-top:22px;font-size:var(--fs-meta);color:var(--muted-dim)}
.ref b{color:var(--cyan);font-family:ui-monospace,monospace}

/* --------------------------------------------------------- faq groups */
.faq-group{font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin:30px 0 4px}
.faq-group:first-child{margin-top:8px}

/* --------------------------------------------------------- performance */
.perf{
  display:grid;grid-template-columns:260px 1fr;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:26px;
}
.perf-stats{display:grid;gap:26px;padding:34px 30px;border-right:1px solid var(--line);align-content:center}
.perf-chart{padding:26px 22px;min-height:230px;display:flex;align-items:center}
.perf-chart svg{width:100%;height:220px;overflow:visible}
.gridlines line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 6}

#equityLine{filter:drop-shadow(0 0 7px rgba(46,232,107,.55))}

.upd{color:var(--green);font-weight:700}

.shot{margin:0 0 22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.shot img{width:100%;height:auto;background:var(--surface-2);min-height:120px}
.shot figcaption{padding:13px 20px;font-size:var(--fs-meta);color:var(--muted-dim);border-top:1px solid var(--line)}

.disclaimer{font-size:var(--fs-meta);color:var(--muted-dim);max-width:720px;margin:0;line-height:1.7}

/* --------------------------------------------------------- classroom split */
.split{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:center}
.ticks{list-style:none;margin:0 0 30px;padding:0}
.ticks li{position:relative;padding:8px 0 8px 30px;color:var(--muted);font-size:var(--fs-body-sm)}
.ticks li::before{
  content:"";position:absolute;left:0;top:15px;
  width:15px;height:8px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

.phone{
  position:relative;border-radius:30px;padding:12px;
  background:linear-gradient(160deg,#1a2438,#0b1120);
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 60px rgba(46,232,107,.07);
  transform:perspective(1200px) rotateY(-11deg) rotateX(3deg);
}
.phone-notch{width:88px;height:5px;border-radius:100px;background:#0a0f1c;margin:3px auto 12px}
.phone-screen{background:var(--bg);border-radius:20px;padding:16px;display:grid;gap:11px}
.msg{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;border-left:3px solid var(--cyan)}
.msg b{display:block;font-size:var(--fs-meta);margin-bottom:4px;color:var(--cyan)}
.msg span{font-size:var(--fs-meta);color:var(--muted);line-height:1.6;display:block}
.msg.green{border-left-color:var(--green)}
.msg.green b{color:var(--green)}

/* --------------------------------------------------------- steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.steps.steps-4{grid-template-columns:repeat(4,1fr)}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;position:relative;
}
.step-n{
  font-size:var(--fs-h2);font-weight:900;line-height:1;margin-bottom:16px;
  background:linear-gradient(140deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85;
}
.step h3{font-size:var(--fs-h3);margin-bottom:10px}
.step p{color:var(--muted);font-size:var(--fs-body-sm);margin:0;line-height:1.7}

/* --------------------------------------------------------- faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;
  font-weight:600;font-size:var(--fs-body);position:relative;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.fa{padding:0 40px 22px 0}
.fa p{color:var(--muted);font-size:var(--fs-body);margin:0;line-height:1.75}
.faq-note{margin-top:26px;font-size:var(--fs-small);color:var(--muted-dim)}

/* --------------------------------------------------------- join */
.join{
  background:
    radial-gradient(ellipse 65% 90% at 50% 100%,rgba(46,232,107,.12),transparent 66%),
    var(--bg-alt);
}
.join h2{margin-bottom:20px}
.join .lead{margin-left:auto;margin-right:auto;margin-bottom:38px}

/* --------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);padding:56px 0 34px;background:var(--bg)}
.foot-in{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:38px}
.foot-brand p{color:var(--muted-dim);font-size:var(--fs-small);margin:9px 0 0;max-width:330px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.foot-links a{color:var(--muted);font-size:var(--fs-small);transition:color .2s}
.foot-links a:hover{color:var(--green)}
.foot-legal{border-top:1px solid var(--line);padding-top:26px}
.foot-legal p{font-size:var(--fs-meta);color:var(--muted-dim);line-height:1.75;margin:0 0 12px;max-width:900px}
.foot-legal b{color:var(--muted)}
.cr{font-size:var(--fs-meta)}

/* --------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}
.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.27s}
.reveal.d4{transition-delay:.36s}
.reveal.d5{transition-delay:.45s}

/* --------------------------------------------------------- responsive */
@media (max-width:980px){
  .strat-grid,.report-grid{grid-template-columns:1fr 1fr}
  .g3,.steps,.steps.steps-4{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:44px}
  .split-visual{max-width:340px}
  .perf{grid-template-columns:1fr}
  .perf-stats{grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--line);gap:22px}
}

@media (max-width:760px){
  .burger{display:block}
  .nav-links{
    position:fixed;inset:0 0 auto 0;top:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(7,11,20,.97);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    padding:86px 24px 30px;
    transform:translateY(-100%);transition:transform .4s var(--ease);
    border-bottom:1px solid var(--line);
  }
  .nav-links.open{transform:none}
  .nav-links a{padding:16px 0;font-size:var(--fs-body);border-bottom:1px solid var(--line)}
  .nav-links .btn{margin-top:20px;justify-content:center;border-bottom:0}

  .strat-grid,.report-grid,.g3,.g2,.steps,.steps.steps-4{grid-template-columns:1fr}
  .hero{padding:110px 0 80px}
  .hero-stats{gap:28px;margin-top:44px}
  .ticker{margin-top:28px}
  .hstat{min-width:44%}
  .perf-stats{padding:26px 22px}
  .phone{transform:none}
  .foot-in{flex-direction:column;gap:26px}
}

@media (max-width:420px){
  :root{--pad:18px}
  .hero-cta .btn{width:100%}
}

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

/* ==========================================================================
   OWL HEADMASTER — AI chat widget
   Markup: the #owlDock / #owlPanel blocks at the end of index.html.
   Logic:  assets/js/owlchat.js  (edit the bubble lines in BUBBLE_LINES there).
   Everything here is namespaced .owl-* so it cannot collide with the 3D owl
   in the hero (.layer-bolt), the ticker, or the lightbox.
   ========================================================================== */

/* --------------------------------------------------------- dock + button */
.owl-dock{
  position:fixed;right:20px;bottom:20px;z-index:95;
  display:flex;align-items:center;gap:10px;
}
/* The dock ships with [hidden]; an author display rule outranks the UA one,
   so the hidden state has to be spelled out here. */
.owl-dock[hidden]{display:none}

.owl-btn{
  position:relative;flex:0 0 auto;
  width:60px;height:60px;border-radius:50%;
  padding:0;border:0;background:transparent;cursor:pointer;
  animation:owlFloat 3s var(--ease) infinite;
  transition:transform .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.owl-btn:hover{transform:scale(1.08)}
.owl-btn:active{transform:scale(.96)}
.owl-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* The glow lives on a ::before so the breathing loop and the hover scale
   never fight over the same transform / box-shadow. */
.owl-btn::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 18px rgba(46,232,107,.45);
  animation:owlGlow 2.4s ease-in-out infinite;
  pointer-events:none;
}
.owl-btn img{
  position:relative;display:block;width:100%;height:100%;
  border-radius:50%;object-fit:cover;
}

@keyframes owlFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes owlGlow{
  0%,100%{box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 14px rgba(46,232,107,.35),0 0 0 0 rgba(46,232,107,.30)}
  50%    {box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 30px rgba(46,232,107,.70),0 0 0 12px rgba(46,232,107,0)}
}

/* --------------------------------------------------------- speech bubble */
.owl-bubble{
  order:-1;                       /* sits to the LEFT of the button */
  max-width:210px;
  position:relative;
  margin:0;padding:10px 13px;
  font-size:var(--fs-meta);line-height:1.45;font-weight:500;
  color:var(--text);text-align:left;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid rgba(46,232,107,.42);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 16px rgba(46,232,107,.16);
  cursor:pointer;
  opacity:0;transform:translateX(10px) scale(.9);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
  pointer-events:none;
}
.owl-bubble.show{opacity:1;transform:none;pointer-events:auto}
.owl-bubble::after{          /* little tail pointing at the owl */
  content:"";position:absolute;right:-6px;top:50%;
  width:10px;height:10px;margin-top:-5px;
  background:var(--surface-2);
  border-right:1px solid rgba(46,232,107,.42);
  border-bottom:1px solid rgba(46,232,107,.42);
  transform:rotate(-45deg);
}

/* --------------------------------------------------------- panel */
.owl-panel{
  position:fixed;right:20px;bottom:92px;z-index:96;
  width:min(380px,calc(100vw - 40px));
  height:min(560px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 30px rgba(46,232,107,.12);
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  visibility:hidden;
}
.owl-panel.open{opacity:1;transform:none;visibility:visible}

.owl-head{
  display:flex;align-items:center;gap:11px;
  padding:13px 14px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-bottom:1px solid var(--line);
}
.owl-head img{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 12px rgba(46,232,107,.4)}
.owl-head-txt{flex:1 1 auto;min-width:0}
.owl-head h3{margin:0;font-size:var(--fs-body-sm);font-weight:700;letter-spacing:.2px}
.owl-head p{margin:2px 0 0;font-size:var(--fs-micro);color:var(--green)}
.owl-close{
  flex:0 0 auto;width:30px;height:30px;border-radius:8px;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  font-size:19px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:all .2s;
}
.owl-close:hover{color:var(--text);border-color:var(--green);background:rgba(46,232,107,.1)}

.owl-log{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:14px;display:flex;flex-direction:column;gap:10px;
  background:var(--bg-alt);
}
.owl-log::-webkit-scrollbar{width:6px}
.owl-log::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.owl-msg{
  max-width:86%;padding:9px 12px;border-radius:13px;
  font-size:var(--fs-small);line-height:1.6;word-wrap:break-word;overflow-wrap:anywhere;
  animation:owlIn .26s var(--ease) both;
}
.owl-msg.bot{align-self:flex-start;background:var(--surface-2);
  border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--text)}
.owl-msg.me{align-self:flex-end;background:rgba(46,232,107,.14);
  border:1px solid rgba(46,232,107,.4);border-bottom-right-radius:5px;color:var(--text)}
.owl-msg.err{border-color:rgba(255,167,36,.45)}
.owl-msg strong{color:var(--green);font-weight:700}
.owl-msg a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.owl-msg a:hover{color:var(--green)}
@keyframes owlIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.owl-dots{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.owl-dots i{width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:owlBlink 1.2s ease-in-out infinite}
.owl-dots i:nth-child(2){animation-delay:.18s}
.owl-dots i:nth-child(3){animation-delay:.36s}
@keyframes owlBlink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.owl-form{
  flex:0 0 auto;display:flex;gap:8px;align-items:flex-end;
  padding:11px;border-top:1px solid var(--line);background:var(--surface);
}
.owl-form textarea{
  flex:1 1 auto;min-width:0;resize:none;
  min-height:40px;max-height:110px;
  padding:10px 12px;border-radius:11px;
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:var(--fs-small);line-height:1.45;
  transition:border-color .2s;
}
.owl-form textarea::placeholder{color:var(--muted-dim)}
.owl-form textarea:focus{outline:none;border-color:var(--green)}
.owl-form textarea:disabled{opacity:.6}
.owl-send{
  flex:0 0 auto;width:40px;height:40px;border-radius:11px;border:0;cursor:pointer;
  background:var(--green);color:#04120a;display:grid;place-items:center;
  transition:background .2s,transform .2s,opacity .2s;
}
.owl-send svg{width:18px;height:18px}
.owl-send:hover:not(:disabled){background:#4cff87;transform:translateY(-1px)}
.owl-send:disabled{opacity:.4;cursor:not-allowed}

.owl-foot{
  flex:0 0 auto;padding:0 12px 9px;margin:0;
  font-size:var(--fs-micro);color:var(--muted-dim);text-align:center;background:var(--surface);
}

/* --------------------------------------------------------- mobile */
@media (max-width:760px){
  .owl-dock{right:16px;bottom:16px}
  .owl-btn{width:52px;height:52px}
  .owl-bubble{max-width:150px;font-size:var(--fs-micro);padding:8px 10px;border-radius:12px}

  /* --owl-vh is kept in sync with visualViewport by owlchat.js so the panel
     shrinks above the on-screen keyboard instead of hiding behind it. */
  .owl-panel{
    right:12px;left:12px;bottom:12px;width:auto;
    height:min(78vh,calc(var(--owl-vh,100vh) - 24px));
  }
}

/* --------------------------------------------------------- motion off */
@media (prefers-reduced-motion:reduce){
  .owl-btn,.owl-btn::before{animation:none}
  .owl-btn::before{box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 20px rgba(46,232,107,.5)}
  .owl-bubble{transition:none}
  .owl-msg{animation:none}
}

/* ==========================================================================
   CLIENT REVISION ROUND — neon accents, card glow, carousel, animated bg
   Appended last on purpose: everything here is meant to win over the base
   rules above. The global prefers-reduced-motion block still outranks it all
   (it uses !important), so reduced-motion users get a static page for free.
   ========================================================================== */

/* --------------------------------------------------------- accent helpers
   Put one of these on any card, section or icon and every accent-aware rule
   below follows it — border, glow, icon, arrow, indicator.  B2 */
.a-green {--accent:var(--neon-green);  --accent-rgb:var(--neon-green-rgb)}
.a-blue  {--accent:var(--neon-blue);   --accent-rgb:var(--neon-blue-rgb)}
.a-yellow{--accent:var(--neon-yellow); --accent-rgb:var(--neon-yellow-rgb)}
.a-pink  {--accent:var(--neon-pink);   --accent-rgb:var(--neon-pink-rgb)}

/* Section kickers pick up their section's accent instead of always cyan. */
.sec .kicker{color:var(--accent)}
.sec h2 .grad{background:linear-gradient(100deg,var(--accent),var(--neon-blue) 60%,var(--neon-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ==========================================================================
   B6 — ANIMATED BACKGROUND
   A drifting grid plus four slow neon orbs. Transform/opacity only, so it
   stays on the compositor and never touches layout. It is one fixed layer for
   the whole page rather than per-section, so the cost does not scale with
   content length.
   ========================================================================== */
.fx-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  contain:strict;                 /* nothing inside can invalidate page layout */
}
/* Sections paint over it, so the ones with their own fill are made slightly
   translucent — just enough for the glow to read through without washing out
   the text contrast. */
.sec,.hero,.foot{position:relative;z-index:1}
.sec.alt{background:rgba(10,16,32,.82)}
.foot{background:rgba(7,11,20,.86)}

.fx-grid{
  position:absolute;inset:-60% -60% -60% -60%;
  background-image:
    linear-gradient(rgba(var(--neon-blue-rgb),.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--neon-blue-rgb),.05) 1px,transparent 1px);
  background-size:70px 70px;
  animation:fxDrift 46s linear infinite;
  will-change:transform;
}
@keyframes fxDrift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(70px,70px,0)}   /* exactly one tile — seamless loop */
}

.fx-orb{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:.22;
  will-change:transform;
}
.fx-orb.o1{width:40vw;height:40vw;left:-8vw;top:6vh;
  background:radial-gradient(circle,rgba(var(--neon-green-rgb),.85),transparent 68%);
  animation:fxOrbA 34s ease-in-out infinite}
.fx-orb.o2{width:34vw;height:34vw;right:-6vw;top:34vh;
  background:radial-gradient(circle,rgba(var(--neon-pink-rgb),.7),transparent 68%);
  animation:fxOrbB 41s ease-in-out infinite}
.fx-orb.o3{width:30vw;height:30vw;left:28vw;bottom:-6vh;
  background:radial-gradient(circle,rgba(var(--neon-blue-rgb),.8),transparent 68%);
  animation:fxOrbC 38s ease-in-out infinite}
.fx-orb.o4{width:22vw;height:22vw;right:22vw;top:-4vh;
  background:radial-gradient(circle,rgba(var(--neon-yellow-rgb),.55),transparent 68%);
  animation:fxOrbD 45s ease-in-out infinite}

@keyframes fxOrbA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(6vw,8vh,0)}}
@keyframes fxOrbB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-7vw,-6vh,0)}}
@keyframes fxOrbC{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(5vw,-7vh,0)}}
@keyframes fxOrbD{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-4vw,6vh,0)}}

/* Tab in the background: main.js flips this class so the compositor stops
   doing work nobody can see. */
html.fx-paused .fx-bg *{animation-play-state:paused!important}

/* ==========================================================================
   B1 + B3 — CARD STROKE AND HOVER
   The stroke is a 1px inset ring in the card's accent plus a soft outer bloom,
   both carried on box-shadow so the border-radius is respected and no extra
   element is needed. Hover scales the whole card and lifts the bloom.
   ========================================================================== */
.card,.strat,.report{
  border-color:rgba(var(--accent-rgb),.30);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.07),
    0 0 18px rgba(var(--accent-rgb),.07),
    0 10px 30px rgba(0,0,0,.35);
  transition:transform .35s var(--ease),border-color .3s var(--ease),box-shadow .35s var(--ease);
  will-change:transform;
}
.card:hover,.strat:hover,.report:hover,.report:focus-visible,
.card:focus-within,.strat:focus-within{
  transform:translateY(-6px) scale(1.022);
  border-color:rgba(var(--accent-rgb),.75);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.22),
    0 0 34px rgba(var(--accent-rgb),.30),
    0 22px 50px rgba(0,0,0,.5);
  outline:none;
}
/* the cursor-follow wash already on .card, re-tinted to the accent */
.card::after{
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
    rgba(var(--accent-rgb),.13),transparent 42%);
}
.ico{
  background:rgba(var(--accent-rgb),.10);
  border-color:rgba(var(--accent-rgb),.28);
  color:var(--accent);
  box-shadow:inset 0 0 18px rgba(var(--accent-rgb),.10);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.card:hover .ico{
  transform:translateY(-2px);
  box-shadow:inset 0 0 18px rgba(var(--accent-rgb),.18),0 0 22px rgba(var(--accent-rgb),.35);
}

/* ==========================================================================
   B7 — "EXPLORE →" INDICATOR + whole-card links
   Every card carrying an indicator also carries a real <a class="card-link">
   stretched across it, so the card is keyboard-reachable, middle-clickable and
   announced as a link. Buttons that sit on top (the strategy "Copy" button)
   are raised above it rather than being nested inside — nested interactive
   elements inside a link are invalid and break keyboard order.
   ========================================================================== */
/* z-index 2 puts the overlay above the card's own text (z-index 1) so a click
   anywhere on the card reaches the link; the CTA row sits at 3, above it. */
.card-link{
  position:absolute;inset:0;z-index:2;
  border-radius:inherit;
  font-size:0;color:transparent;        /* the label is for screen readers only */
}
.card-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.card-go{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:16px;font-size:var(--fs-small);font-weight:700;letter-spacing:.02em;
  color:var(--accent);opacity:.8;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.card-go span{transition:transform .25s var(--ease)}
.card:hover .card-go,.strat:hover .card-go,.card:focus-within .card-go{opacity:1}
.card:hover .card-go span,.strat:hover .card-go span{transform:translateX(5px)}

/* ==========================================================================
   B9 + B3 — STRATEGY CARDS
   The front of the card is now name / character / teaser / headline return.
   Copiers, profit share, provider and the strategy ID moved behind the
   click-through to Telegram. The risk pill and the drawdown badge stay: they
   are the honest part and both losing strategies keep them.
   ========================================================================== */
.strat{position:relative}
.strat-art{z-index:0}
.strat-art img{
  transition:transform .45s var(--ease),filter .45s var(--ease);
  will-change:transform;
}
.strat:hover .strat-art img,.strat:focus-within .strat-art img{
  transform:scale(1.12);
  filter:saturate(1.15) brightness(1.08);
}
/* a soft accent wash over the art so each character sits in its own colour */
.strat-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(var(--accent-rgb),.14) 100%);
  opacity:.75;transition:opacity .35s var(--ease);
}
.strat:hover .strat-art::after{opacity:1}

.strat-body{position:relative;z-index:1}

.strat-teaser{
  color:var(--muted);font-size:var(--fs-body-sm);line-height:1.65;
  margin:12px 0 0;
}
.strat-meta{
  display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;
}
.strat-pill{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;
  background:rgba(var(--accent-rgb),.10);
  border:1px solid rgba(var(--accent-rgb),.32);
  color:var(--accent);
}
.strat-pill.risk-hi{
  background:rgba(255,210,63,.10);border-color:rgba(255,210,63,.38);color:var(--neon-yellow);
}
.strat .card-go{margin-top:16px}
.strat-cta{margin-top:16px;position:relative;z-index:3}

/* ==========================================================================
   B4 — REPORT CARD CAROUSEL
   Built on native scroll-snap: touch swipe, trackpad and momentum come from
   the browser, so there is no drag-tracking JS to jank. The arrows and dots
   just call scrollTo. The lightbox click behaviour is unchanged.
   ========================================================================== */
.carousel{position:relative;margin-top:44px}

.carousel-track{
  display:flex;gap:20px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;      /* a swipe never turns into page navigation */
  padding:10px 4px 18px;              /* room for the card glow, not clipped */
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track>.report{
  flex:0 0 calc((100% - 40px)/3);
  scroll-snap-align:start;
  min-width:0;
}

.carousel-arrow{
  position:absolute;top:calc(50% - 20px);z-index:4;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(14,21,36,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(var(--neon-blue-rgb),.45);
  color:var(--neon-blue);
  box-shadow:0 0 18px rgba(var(--neon-blue-rgb),.22),0 8px 22px rgba(0,0,0,.45);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .25s;
}
.carousel-arrow svg{width:19px;height:19px}
.carousel-arrow.prev{left:-14px}
.carousel-arrow.next{right:-14px}
.carousel-arrow:hover{transform:scale(1.12);box-shadow:0 0 28px rgba(var(--neon-blue-rgb),.5),0 8px 22px rgba(0,0,0,.45)}
.carousel-arrow:disabled{opacity:.25;cursor:default;transform:none}
.carousel-arrow:focus-visible{outline:2px solid var(--neon-blue);outline-offset:3px}

.carousel-dots{
  display:flex;justify-content:center;gap:9px;margin-top:6px;
}
.carousel-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--line);border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,width .25s;
}
.carousel-dots button:hover{background:rgba(var(--neon-blue-rgb),.5)}
.carousel-dots button[aria-current="true"]{
  width:26px;border-radius:100px;
  background:var(--neon-blue);
  box-shadow:0 0 12px rgba(var(--neon-blue-rgb),.7);
}
.carousel-dots button:focus-visible{outline:2px solid var(--neon-blue);outline-offset:3px}

/* ==========================================================================
   B5 — GUARDIAN CTA
   A filled pill that cycles through the four neon hues, with a sheen that
   sweeps across on hover. background-position and transform only.
   ========================================================================== */
.btn-guardian{
  position:relative;overflow:hidden;
  color:#07110b;border:0;
  background:linear-gradient(100deg,
    var(--neon-green),var(--neon-blue),var(--neon-pink),var(--neon-yellow),var(--neon-green));
  background-size:300% 100%;
  animation:guardianHue 9s linear infinite,guardianPulse 2.8s ease-in-out infinite;
  box-shadow:0 0 22px rgba(var(--neon-green-rgb),.4);
}
.btn-guardian::after{          /* the sweeping sheen */
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(0) skewX(-18deg);
  transition:transform .75s var(--ease);
  pointer-events:none;
}
.btn-guardian:hover::after{transform:translateX(320%) skewX(-18deg)}
.btn-guardian:hover{transform:translateY(-3px) scale(1.04)}
@keyframes guardianHue{from{background-position:0% 50%}to{background-position:300% 50%}}
@keyframes guardianPulse{
  0%,100%{box-shadow:0 0 18px rgba(var(--neon-green-rgb),.35),0 0 0 0 rgba(var(--neon-pink-rgb),.28)}
  60%    {box-shadow:0 0 30px rgba(var(--neon-pink-rgb),.5),0 0 0 14px rgba(var(--neon-pink-rgb),0)}
}
.deal{
  border-color:rgba(var(--neon-pink-rgb),.3);
  box-shadow:inset 0 0 0 1px rgba(var(--neon-pink-rgb),.07),0 0 26px rgba(var(--neon-pink-rgb),.08);
}

/* ==========================================================================
   B10 — SECTION CTA ROWS
   ========================================================================== */
.sec-cta{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:34px;
}
.btn-neon{
  background:transparent;color:var(--accent);
  border:1.5px solid rgba(var(--accent-rgb),.5);
  box-shadow:inset 0 0 20px rgba(var(--accent-rgb),.06);
}
.btn-neon:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 0 26px rgba(var(--accent-rgb),.45),inset 0 0 20px rgba(var(--accent-rgb),.1);
}
.link-arrow{color:var(--accent)}

/* ==========================================================================
   B8 — MICRO ANIMATIONS
   The existing .reveal does the fade/slide; .reveal-x is the sideways variant
   for CTA rows so they do not all move identically.
   ========================================================================== */
.reveal-x{opacity:0;transform:translateX(-22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-x.in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .carousel-track>.report{flex:0 0 calc((100% - 20px)/2)}
  .carousel-arrow.prev{left:-6px}
  .carousel-arrow.next{right:-6px}
}

@media (max-width:760px){
  /* B6 — the orbs stop moving and the grid goes entirely. Keeping two static
     blurred orbs costs one paint and nothing per frame, so the page still has
     colour without any scroll-time work on a phone. */
  .fx-grid,.fx-orb.o3,.fx-orb.o4{display:none}
  .fx-orb{animation:none!important;filter:blur(55px);opacity:.16}

  .carousel-track{gap:14px;scroll-padding-left:4px}
  .carousel-track>.report{flex:0 0 86%}
  .carousel-arrow{display:none}      /* swipe is the interaction on touch */
  .carousel-dots{margin-top:2px}

  /* hover states never fire on touch, so the resting card is the only one the
     visitor sees — give it a touch more presence and drop the scale. */
  .card:hover,.strat:hover,.report:hover{transform:translateY(-3px)}
  .sec-cta .btn{flex:1 1 100%;justify-content:center}
}

/* Pointer-coarse devices: no hover scale at all, so a tap never leaves a card
   stuck in its hover state. */
@media (hover:none){
  .card:hover,.strat:hover,.report:hover,.card:focus-within,.strat:focus-within{transform:none}
  .strat:hover .strat-art img,.strat:focus-within .strat-art img{transform:none}
}

/* ==========================================================================
   MOTION OFF — belt and braces on top of the global !important block
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .fx-bg{display:none}
  .card:hover,.strat:hover,.report:hover{transform:none}
  .strat:hover .strat-art img{transform:none}
  .carousel-track{scroll-behavior:auto}
  .reveal-x{opacity:1;transform:none}
}

/* the track lives inside .carousel, which already carries the top margin */
.carousel .carousel-track{margin-top:0}

/* B4 — the report screenshots are full phone captures, so a raw card runs
   ~2000px tall and drags the arrows and dots far below the fold. Crop every
   card to the same height from the top (where the name, return and risk sit)
   and let the lightbox show the whole screenshot on click. */
.carousel-track>.report{position:relative}
.carousel-track>.report img{
  height:380px;object-fit:cover;object-position:top center;
}
.carousel-track>.report::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(transparent,rgba(10,16,32,.92));
  pointer-events:none;
}
.carousel-track>.report .report-zoom{
  /* a corner pill rather than a centred caption, so it never lands on top of
     the numbers inside the screenshot */
  position:absolute;right:12px;bottom:12px;z-index:2;
  padding:5px 10px;border-radius:100px;
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);background:rgba(7,11,20,.8);
  border:1px solid rgba(var(--accent-rgb),.4);
  backdrop-filter:blur(6px);
  opacity:.9;transition:opacity .25s var(--ease),transform .25s var(--ease);
  pointer-events:none;
}
.report:hover .report-zoom{transform:translateY(-2px)}
.report:hover .report-zoom{opacity:1}

@media (max-width:760px){
  .carousel-track>.report img{height:300px}
}

/* ==========================================================================
   POLISH ROUND — alignment, type scale on phones, neon frames
   ========================================================================== */

/* Phones show one card per row, so card text has the full width to itself:
   bring it up to body size. */
@media (max-width:760px){
  :root{--fs-body-sm:1rem}
}

/* --------------------------------------------------------- C1 alignment
   Cards in a row share a height (the grid stretches them). Each card is a
   column whose text block grows, which pushes everything after it - pills,
   the arrow link, the button - to the same line on every card, whatever the
   length of the copy above. No fixed heights anywhere. */
.card,.step{display:flex;flex-direction:column}
.card>p,.step>p{flex:1 0 auto}
.card .card-go,.step .link-arrow{align-self:flex-start}

.strat-teaser{flex:1 0 auto}
.strat-meta{flex-wrap:nowrap}
.strat-pill{white-space:nowrap}
.strat .card-go{align-self:flex-start}

.report-head{gap:12px}
.report-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --------------------------------------------------------- C3 neon frames
   Text-only blocks get the same accent stroke as the cards: a 1px ring in
   the block's accent plus a soft bloom. .neon-frame is the reusable version;
   .step and the FAQ lists opt in directly. */
.neon-frame,.step,.faq{
  background:var(--surface);
  border:1px solid rgba(var(--accent-rgb),.30);
  border-radius:var(--r);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.07),
    0 0 18px rgba(var(--accent-rgb),.07),
    0 10px 30px rgba(0,0,0,.35);
}
.neon-frame{padding:30px 28px}
.step{transition:border-color .3s var(--ease),box-shadow .35s var(--ease)}
.step:hover,.step:focus-within{
  border-color:rgba(var(--accent-rgb),.6);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.16),
    0 0 28px rgba(var(--accent-rgb),.22),
    0 14px 36px rgba(0,0,0,.42);
}

.prose.neon-frame{margin-top:28px}
.prose.neon-frame>p:last-child{margin-bottom:0}

.faq{padding:0 24px;margin-top:12px}
.faq details:last-child{border-bottom:0}
.faq-group{margin-top:34px}
.faq-group:first-child{margin-top:22px}
.faq-cta{margin-top:18px}

.join-panel{background:rgba(14,21,36,.72);padding:44px 28px}
.join-panel .ref{margin-bottom:0}
/* the desktop hero rule shrinks .hero-cta to its content, which left this
   centred row stuck to the left edge */
.hero-cta.center{margin-left:auto;margin-right:auto}

@media (max-width:760px){
  .neon-frame{padding:24px 20px}
  .faq{padding:0 18px}
  .faq summary{padding-right:30px}
  .fa{padding-right:0}
  .join-panel{padding:32px 20px}
}

/* ==========================================================================
   SECTION EYEBROWS — [ NEON BRACKETS ]
   One treatment for every eyebrow: the hero's .eyebrow and each section's
   .kicker. Size and tracking come from --fs-kicker / --ls-kicker in :root.
   The brackets are two pseudo-elements, each a three-sided border, coloured
   by the section's --accent. They are positioned against the label's own
   box, so they stay attached to the text.

   The box always shrink-wraps its text, with the same bracket gap and padding
   on every eyebrow at every width. A box only hugs its text while the text
   sits on one line (or breaks at a forced <br>): text that soft-wraps makes
   its box as wide as the container. So on phones the size and tracking ease
   down to keep each label on one line, and the one label too long for the
   narrowest phones (the hero's) carries its own break point - see .kb-br.
   ========================================================================== */
.eyebrow,.kicker{
  --bk-w:9px;                     /* bracket arm length */
  --bk-gap:14px;                  /* bracket to text */
  position:relative;
  display:block;width:fit-content;max-width:100%;
  /* letter-spacing leaves a trailing gap after the last letter; take it back
     off the right padding so both brackets sit the same distance away */
  padding:7px calc(var(--bk-w) + var(--bk-gap) - var(--ls-kicker))
          7px calc(var(--bk-w) + var(--bk-gap));
  line-height:1.35;
  color:var(--accent);
  text-shadow:0 0 18px rgba(var(--accent-rgb),.35);
  text-wrap:balance;
}
.eyebrow::before,.eyebrow::after,
.kicker::before,.kicker::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--bk-w);
  border:2px solid var(--accent);
  /* drop-shadow follows the drawn strokes; box-shadow would glow the open side too */
  filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.85)) drop-shadow(0 0 12px rgba(var(--accent-rgb),.4));
  pointer-events:none;
}
.eyebrow::before,.kicker::before{left:0;border-right:0;border-radius:3px 0 0 3px}
.eyebrow::after,.kicker::after{right:0;border-left:0;border-radius:0 3px 3px 0}

/* a clear break before each section starts */
.sec .kicker{margin-top:clamp(12px,2.4vw,28px);margin-bottom:20px}
.eyebrow{margin-bottom:22px}

/* The hero label's optional break: "THE SMART METHODOLOGY [· ] PU PRIME".
   Off by default, so it reads as one line with the dot. */
.kb-br{display:none}

@media (max-width:760px){
  :root{--fs-kicker:clamp(.8125rem,3.4vw,.9375rem);--ls-kicker:.12em}
}
@media (max-width:420px){
  :root{--ls-kicker:.1em}
}
/* Narrowest phones: the hero label cannot fit on one line at a readable
   size, so break it at the dot. A forced break keeps the box as wide as the
   longer line, and the dot is dropped since the line break replaces it. */
@media (max-width:380px){
  .kb-br{display:inline}
  .kb-sep{display:none}
}