/* FIT Platform marketing site — served at signalboss.net. Gunmetal + blue,
   matching the FIT landing pages (see frontend/templates/landing.html tokens). */
:root{
  --bg:#22272C; --bg-deep:#171C21; --panel:#2c343b; --panel-top:#39424B; --panel-bot:#272E35;
  --bd:#46505A; --bd2:#333B43;
  --t0:#F1F3F5; --t1:#D5DADF; --t2:#B8C0C7; --t3:#8d97a1;
  --blue:#2D8CFF; --blue-deep:#1677E8; --green:#20B26B; --red:#E05252;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:'Newsreader',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg-deep)}
body{background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
/* nav */
nav{background:var(--bg-deep);border-bottom:1px solid var(--bd2);position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--t0);text-decoration:none;letter-spacing:.01em}
.brand b{color:var(--blue);font-weight:700}
.brand span{color:var(--t1);font-weight:500;margin-left:7px;font-size:15px;letter-spacing:.14em}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);text-decoration:none}
.nav-links a:hover{color:var(--t0)}
.btn{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#fff;background:linear-gradient(180deg,var(--blue),var(--blue-deep));padding:13px 26px;border-radius:5px;border:0;cursor:pointer;box-shadow:0 8px 22px rgba(22,119,232,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--bd);box-shadow:none;color:var(--t1)}
.btn.sm{padding:9px 16px;font-size:12px}
@media(max-width:760px){.nav-links a.hide-m{display:none}.nav-links{gap:14px}}
/* hero */
.hero{padding:88px 0 72px;border-bottom:1px solid var(--bd2);background:radial-gradient(900px 400px at 75% -10%,rgba(45,140,255,.12),transparent 70%)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--blue);margin-bottom:22px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5.6vw,60px);line-height:1.08;color:var(--t0);max-width:820px}
h1 em{font-style:italic;color:var(--blue)}
.lede{margin-top:24px;max-width:700px;font-size:19px;color:var(--t1)}
.cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
/* sections */
section{padding:64px 0;border-bottom:1px solid var(--bd2)}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,38px);color:var(--t0);line-height:1.15;margin-bottom:14px}
.sub{color:var(--t2);max-width:680px;margin-bottom:34px}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g3,.g2{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));border:1px solid var(--bd);border-radius:6px;padding:26px;box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.card h3{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;font-weight:600}
.card p{color:var(--t1);font-size:16px}
a.card{text-decoration:none;display:block}
a.card:hover{border-color:var(--blue)}
.card .go{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.honest{background:var(--bg-deep);border:1px solid var(--bd2);border-left:3px solid var(--blue);padding:26px 28px;border-radius:4px}
.honest li{margin:8px 0 8px 20px;color:var(--t1)}
/* capture */
.capture{background:var(--bg-deep)}
form.cap{display:flex;gap:10px;flex-wrap:wrap;max-width:640px}
form.cap input{flex:1 1 200px;background:var(--bg);border:1px solid var(--bd);color:var(--t0);padding:13px 14px;border-radius:5px;font:inherit;font-size:16px}
form.cap input:focus{outline:2px solid var(--blue);outline-offset:0}
.cap-msg{margin-top:14px;font-family:var(--mono);font-size:13px;min-height:20px}
.cap-msg.ok{color:var(--green)} .cap-msg.err{color:var(--red)}
/* tools */
.tool{padding-top:48px;padding-bottom:70px}
.tool h1{font-size:clamp(30px,4.4vw,44px)}
.panel{margin-top:28px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));border:1px solid var(--bd);border-radius:6px;padding:28px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:700px){.row{grid-template-columns:1fr}}
label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);margin:0 0 6px}
select,input.n{width:100%;background:var(--bg);border:1px solid var(--bd);color:var(--t0);padding:12px;border-radius:5px;font-family:var(--mono);font-size:16px}
.leg{margin-bottom:6px}
.result{margin-top:26px;border-top:1px solid var(--bd);padding-top:22px}
.big{font-family:var(--serif);font-size:44px;color:var(--t0);font-weight:600;line-height:1.1}
.big small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--t2);text-transform:uppercase;font-weight:500;margin-bottom:6px}
.facts{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;font-family:var(--mono);font-size:14px;color:var(--t1)}
.facts b{display:block;color:var(--t0);font-size:17px}
.note{margin-top:18px;font-size:14px;color:var(--t2);line-height:1.6}
table.rc{width:100%;border-collapse:collapse;margin-top:6px;font-family:var(--mono);font-size:15px}
table.rc th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);text-align:left;padding:10px 12px;border-bottom:1px solid var(--bd)}
table.rc td{padding:14px 12px;border-bottom:1px solid var(--bd2);color:var(--t0)}
table.rc tr.next td{color:var(--blue)}
/* footer */
footer{background:var(--bg-deep);padding:44px 0 56px;color:var(--t3);font-size:13.5px;line-height:1.7}
footer a{color:var(--t2)}
footer .risk{max-width:860px;margin-top:16px}
/* nav: quiet member-login link */
.nav-links a.login{font-size:12px;color:var(--t3);letter-spacing:.08em}
.nav-links a.login:hover{color:var(--t1)}
/* contact form */
form.cap textarea{flex:1 1 100%;background:var(--bg);border:1px solid var(--bd);color:var(--t0);padding:13px 14px;border-radius:5px;font:inherit;font-size:16px;resize:vertical}
form.cap textarea:focus{outline:2px solid var(--blue);outline-offset:0}
/* call-to-action under each tool */
.tool-cta{margin-top:34px;background:var(--bg-deep);border:1px solid var(--bd2);border-left:3px solid var(--blue);border-radius:4px;padding:24px 26px}
.tool-cta p{color:var(--t1);max-width:720px}
.tool-cta strong{color:var(--t0)}
.tc-row{margin-top:16px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
form.capform{display:flex;gap:8px;flex:1 1 320px;max-width:460px}
form.capform input{flex:1;background:var(--bg);border:1px solid var(--bd);color:var(--t0);padding:9px 12px;border-radius:5px;font:inherit;font-size:15px}
form.capform input:focus{outline:2px solid var(--blue)}
.tool-cta .cap-msg{margin-top:10px}
.nav-links a{white-space:nowrap}
@media(max-width:560px){.nav-links a.login{display:none}.brand span{font-size:13px;letter-spacing:.1em}}
/* ---- CTA pass: one big message, big buttons that say what happens ---- */
.btn .arr{display:inline-block;margin-left:6px;transition:transform .15s}
.btn:hover .arr{transform:translateX(4px)}
.btn.lg{padding:16px 30px;font-size:14px}
.btn.xl{padding:22px 40px;font-size:16px;letter-spacing:.12em;border-radius:6px}
.btn.xl:not(.ghost){box-shadow:0 12px 34px rgba(22,119,232,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.xl.ghost{border-color:var(--blue);color:var(--t0)}
.btn.xl.ghost:hover{background:rgba(45,140,255,.12)}
h1.discover{font-size:clamp(54px,11vw,112px);line-height:1;letter-spacing:.01em;text-transform:uppercase;max-width:none}
h1.discover em{font-style:normal;color:var(--blue)}
.tagline{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,30px);color:var(--t1)}
.hero .cta-row{margin-top:36px}
.cta-note{margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--t3);letter-spacing:.02em}
.cta-band{text-align:center;background:linear-gradient(180deg,#1d2a38,var(--bg-deep));border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.cta-band h2{font-size:clamp(30px,4.4vw,46px)}
.cta-band p{color:var(--t1);max-width:620px;margin:0 auto 6px}
.cta-row.center{justify-content:center}
form.cap .btn{align-self:stretch}
@media(max-width:600px){.btn.xl{width:100%;text-align:center;padding:20px 22px}.cta-row{flex-direction:column}}
.tool-cta .btn.lg{white-space:nowrap}
.card.wide{max-width:none}

/* =====================================================================
   PIZZAZZ PASS — smaller type, motion, depth. Everything honours
   prefers-reduced-motion (see the media query at the very end).
   ===================================================================== */
body{font-size:16px}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 100%)}
section{padding:54px 0}
h2{font-size:clamp(26px,3.2vw,34px)}
.sub{margin-bottom:26px}
.lede{font-size:17.5px;margin-top:18px}
/* hero */
.hero{position:relative;overflow:hidden;padding:56px 0 52px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:560px}}
h1.discover{font-size:clamp(40px,6vw,76px);letter-spacing:.005em;
  background:linear-gradient(180deg,#fff 30%,#b9c6d3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h1.discover em{background:linear-gradient(90deg,#2D8CFF,#7cc0ff 60%,#2D8CFF);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.tagline{font-size:clamp(19px,2.3vw,24px);margin-top:10px}
.kicker{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(32,178,107,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(32,178,107,0)}100%{box-shadow:0 0 0 0 rgba(32,178,107,0)}}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.orb.o1{width:420px;height:420px;background:#1677E8;opacity:.22;top:-140px;right:-60px;animation:floaty 14s ease-in-out infinite}
.orb.o2{width:320px;height:320px;background:#20B26B;opacity:.10;bottom:-140px;left:-80px;animation:floaty 18s ease-in-out infinite reverse}
@keyframes floaty{50%{transform:translate(26px,30px)}}
/* buttons: smaller, with a shine sweep */
.btn.xl{padding:17px 30px;font-size:14.5px}
.btn{position:relative;overflow:hidden}
.btn:not(.ghost)::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:not(.ghost):hover::after{left:130%}
.hero .cta-row{margin-top:26px}
/* illustration card */
.hero-art{position:relative;justify-self:end;width:100%}
.art-card{background:linear-gradient(180deg,rgba(57,66,75,.85),rgba(39,46,53,.9));border:1px solid var(--bd);border-radius:10px;padding:34px 18px 14px;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(45,140,255,.12),inset 0 1px 0 rgba(255,255,255,.06);position:relative}
.art-tag{position:absolute;top:10px;left:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.spread-svg{width:100%;height:auto;display:block}
.svg-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;fill:#8d97a1}
.svg-lbl.sg{fill:#6f7a85}.svg-lbl.hi{fill:#7cc0ff}.svg-lbl.r{fill:#20B26B;text-anchor:start}
.ln{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.6s .3s ease forwards}
.ln.a{stroke:#2D8CFF}.ln.b{stroke:#8fa1b3;animation-delay:.55s}.ln.z{stroke:#5fb0ff;stroke-width:2.8;animation-delay:1s}
@keyframes draw{to{stroke-dashoffset:0}}
.zarea{opacity:0;animation:fadein 1.4s 2.1s ease forwards}
@keyframes fadein{to{opacity:1}}
.sig{stroke:#E05252;stroke-opacity:.55;stroke-dasharray:4 5}.zero{stroke:#46505A}
.peak{opacity:0;animation:fadein .6s 2.6s ease forwards}
.peak .dot{fill:#E05252;filter:drop-shadow(0 0 6px #E05252)}
.peak .ring{fill:none;stroke:#E05252;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 2s 2.8s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.chip{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t0);background:rgba(23,28,33,.92);border:1px solid var(--blue);border-radius:99px;padding:6px 14px;box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 18px rgba(45,140,255,.25);animation:bob 5s ease-in-out infinite}
.chip.c1{top:-14px;right:36px}.chip.c2{bottom:56px;left:-16px;animation-delay:-1.6s}.chip.c3{bottom:-14px;right:70px;animation-delay:-3.2s}
@keyframes bob{50%{transform:translateY(-7px)}}
/* markets marquee */
.marquee{overflow:hidden;border-bottom:1px solid var(--bd2);background:rgba(23,28,33,.75);-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;gap:42px;width:max-content;padding:15px 0;animation:marq 62s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--mono);font-size:14px;letter-spacing:.16em;color:var(--t2)}
.marquee span:nth-child(3n+1){color:var(--blue)}
@keyframes marq{to{transform:translateX(-50%)}}
/* cards: icon, lift, glow edge */
.card{position:relative;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 20px 44px rgba(0,0,0,.45),0 0 0 1px rgba(45,140,255,.35),0 0 30px rgba(45,140,255,.18)}
.ico{width:34px;height:34px;margin-bottom:14px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(45,140,255,.5))}
.card h3{margin-top:0}
.card.wide{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:start}
.card.wide .ico{grid-row:1/4;margin:2px 0 0}
.card.wide .go{grid-column:2}
/* CTA band with a moving glow edge */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:-60% -20%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(45,140,255,.28) 85%,transparent 100%);animation:spin 12s linear infinite}
.cta-band::after{content:"";position:absolute;inset:1px;background:linear-gradient(180deg,#1b2735,#151a20)}
.cta-band .wrap{position:relative;z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-band h2{font-size:clamp(26px,3.6vw,38px)}
/* scroll reveal (class added by js/fx.js) */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease,border-color .25s,box-shadow .25s}
.rv.in{opacity:1;transform:none}
.card.rv.in:hover{transform:translateY(-4px)}
/* tool pages: slimmer */
.tool{padding-top:36px}
.tool h1{font-size:clamp(28px,3.6vw,38px)}
.big{font-size:38px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ln{stroke-dashoffset:0}.zarea,.peak{opacity:1}.rv{opacity:1;transform:none}
}

/* headline variant: sentence-case, long-form hook */
h1.discover.hook{text-transform:none;font-size:clamp(30px,4.2vw,52px);line-height:1.08;letter-spacing:0}

/* =====================================================================
   COLOUR ACCENTS — gunmetal + blue + white stay the base; each section
   gets its own accent so the page isn't one flat blue. Accent comes from
   --acc (default blue). Palette: amber, green, violet, teal.
   ===================================================================== */
:root{--amber:#F5A524;--violet:#A371F7;--teal:#2DD4BF;--pink:#F0629A}
.card{--acc:var(--blue);border-top:3px solid var(--acc)}
.card h3{color:var(--acc)}
.ico{stroke:var(--acc);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--acc) 55%,transparent))}
.card:hover{border-color:var(--acc);box-shadow:0 20px 44px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent),0 0 32px color-mix(in srgb,var(--acc) 25%,transparent)}
a.card:hover{border-color:var(--acc)}
.card .go{color:var(--acc)}
.card{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 9%,var(--panel-top)),var(--panel-bot))}
.g3 .card:nth-child(1){--acc:var(--blue)}
.g3 .card:nth-child(2){--acc:var(--amber)}
.g3 .card:nth-child(3){--acc:var(--green)}
#teachers .g2 .card:nth-child(1){--acc:var(--violet)}
#teachers .g2 .card:nth-child(2){--acc:var(--pink)}
#tools .card{--acc:var(--teal)}
/* section headings: short colour bar above */
section h2::before{content:"";display:block;width:44px;height:4px;border-radius:2px;margin-bottom:14px;background:linear-gradient(90deg,var(--blue),var(--teal))}
#teachers h2::before{background:linear-gradient(90deg,var(--violet),var(--pink))}
.capture h2::before{background:linear-gradient(90deg,var(--amber),var(--pink))}
.cta-band h2::before{margin-left:auto;margin-right:auto;background:linear-gradient(90deg,var(--blue),var(--violet))}
section:not(.cta-band):not(.capture):nth-of-type(1) h2::before{background:linear-gradient(90deg,var(--blue),var(--green))}
/* hero: warmer orbs + coloured chips */
.orb.o2{background:var(--green);opacity:.14}
.hero::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(80px);background:var(--violet);opacity:.12;top:40%;left:38%;pointer-events:none;animation:floaty 20s ease-in-out infinite}
.chip.c1{border-color:var(--blue);box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 18px rgba(45,140,255,.35)}
.chip.c2{border-color:var(--amber);color:#ffd9a0;box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 18px rgba(245,165,36,.35)}
.chip.c3{border-color:var(--green);color:#a8f0cb;box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 18px rgba(32,178,107,.35)}
.svg-lbl.hi{fill:var(--amber)}
.ln.b{stroke:#c9a8ff}
/* marquee: colours cycle */
.marquee span:nth-child(5n+1){color:var(--blue)}
.marquee span:nth-child(5n+2){color:var(--amber)}
.marquee span:nth-child(5n+3){color:var(--green)}
.marquee span:nth-child(5n+4){color:var(--violet)}
.marquee span:nth-child(5n){color:var(--teal)}
/* CTA band: glow shifts blue → violet */
.cta-band::before{background:conic-gradient(from 0deg,transparent 0 55%,rgba(45,140,255,.32) 68%,rgba(163,113,247,.30) 82%,transparent 100%)}
.cta-band::after{background:linear-gradient(180deg,#1b2735,#171a26)}
/* honesty box and contact */
.honest{border-left-color:var(--green);background:linear-gradient(90deg,rgba(32,178,107,.08),var(--bg-deep) 40%)}
.capture{background:linear-gradient(180deg,var(--bg-deep),#1c1a2b)}
form.cap input:focus,form.cap textarea:focus{outline-color:var(--amber)}
/* tool-page call-out + nav button */
.tool-cta{border-left-color:var(--teal)}
.kicker{color:var(--teal)}
.hero .kicker{color:var(--teal)}
.btn.sm{background:linear-gradient(180deg,#3d97ff,var(--blue-deep))}

/* three-beat headline: line 1 left, line 2 indented, line 3 back to the left edge */
h1.discover.hook .hl{display:block}
h1.discover.hook .l2{margin-top:.55em;padding-left:clamp(28px,7vw,96px)}
h1.discover.hook .l3{margin-top:.55em}
/* first line of the headline in dark gold */
h1.discover.hook .l1{background:linear-gradient(180deg,#E3B847,#B8860B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}