/* Sigma Digital Technical Institute — site styles */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%}
[hidden]{display:none !important}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
/* Layout: navy masthead with the Σ assembling from its four facets; alternating light / navy bands;
   each facet colour codes one program field (blue = data, green = tech, red = design, yellow = marketing). */
:root{
  --navy:#032C88; --navy-deep:#021C5A; --band:#032C88; --band-ink:#FFFFFF; --band-muted:#B9C7EE;
  --yellow:#F5B70F; --green:#14A044; --red:#E8402F; --blue:#2E63D1; --slate:#6B7A9E;
  --bg:#F4F6FB; --surface:#FFFFFF; --ink:#0B1533; --muted:#536081; --line:#DCE2EF; --soft:#E8EDF8;
  --link:#2350B5; --ok:#14A044; --err:#C7321F;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r:14px; --wrap:1180px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --band:#0A2470; --band-ink:#FFFFFF; --band-muted:#AEBDE8;
  --bg:#050E29; --surface:#0C1940; --ink:#EDF1FF; --muted:#A2AED0; --line:#1E2C5B; --soft:#11214F;
  --link:#86A9FF; --blue:#4C7FEA; --slate:#8A98C0; --err:#FF7A66; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --band:#0A2470; --band-ink:#FFFFFF; --band-muted:#AEBDE8;
  --bg:#050E29; --surface:#0C1940; --ink:#EDF1FF; --muted:#A2AED0; --line:#1E2C5B; --soft:#11214F;
  --link:#86A9FF; --blue:#4C7FEA; --slate:#8A98C0; --err:#FF7A66; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--band)}
h1,h2,h3{font-family:var(--f-display); line-height:1.08; text-wrap:balance; margin:0; letter-spacing:-.01em}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--yellow); outline-offset:2px; border-radius:6px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
@media (min-width:720px){ .wrap{padding-left:max(32px, env(safe-area-inset-left,0px)); padding-right:max(32px, env(safe-area-inset-right,0px))} }
section{padding-block:clamp(56px, 8vw, 104px)}
.eyebrow{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px}
.eyebrow i{width:18px; height:3px; border-radius:2px; background:var(--yellow); display:inline-block}
.h2{font-size:clamp(1.9rem, 4vw, 2.9rem); font-weight:800; margin-top:12px}
.lede{color:var(--muted); font-size:1.075rem; max-width:60ch; margin-top:14px}
.sec-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:24px; margin-bottom:36px}
.sec-head > div{min-width:0}

/* buttons */
.btn{--bb:var(--yellow); --bi:var(--navy-deep); display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer; text-decoration:none;
  font:600 1rem/1 var(--f-body); padding:15px 22px; border-radius:999px; background:var(--bb); color:var(--bi); transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(245,183,15,.7)}
.btn.ghost{background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px currentColor, 0 6px 16px -10px rgba(0,0,0,.4)}
.btn svg{width:18px; height:18px}

/* header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--band); color:var(--band-ink); transition:box-shadow .2s}
.top.scrolled{box-shadow:0 10px 30px -14px rgba(2,12,45,.55)}
.top .wrap{display:flex; align-items:center; gap:24px; min-height:72px}
.brand{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; flex:none}
.brand svg{width:34px; height:38px}
.brand b{font:600 1rem/1.15 var(--f-body); display:block}
.brand small{font:500 .78rem/1.15 var(--f-body); color:var(--band-muted); display:block}
.nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.nav a{color:var(--band-ink); text-decoration:none; font-weight:500; padding:9px 12px; border-radius:999px; font-size:.95rem; opacity:.9}
.nav a:hover{background:rgba(255,255,255,.1); opacity:1}
.top .btn{padding:11px 18px; font-size:.95rem}
.burger{display:none; margin-left:auto; background:none; border:0; color:inherit; width:44px; height:44px; border-radius:10px; cursor:pointer}
.burger svg{width:26px; height:26px}
@media (max-width:980px){
  .nav, .top .btn.cta-top{display:none}
  .burger{display:inline-grid; place-items:center}
}
.drawer{position:fixed; inset:0; z-index:70; background:rgba(2,12,45,.55); display:flex; justify-content:flex-end}
.drawer-in{width:min(340px, 88vw); height:100%; background:var(--band); color:var(--band-ink); display:flex; flex-direction:column; gap:6px;
  padding:calc(20px + env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) 22px; animation:slide .25s ease}
@keyframes slide{from{transform:translateX(30px); opacity:.4}}
.drawer-in a{color:inherit; text-decoration:none; font:600 1.2rem/1 var(--f-display); padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.12)}
.drawer-in .btn{margin-top:18px}
.drawer-close{align-self:flex-end; background:none; border:0; color:inherit; width:44px; height:44px; cursor:pointer}

/* hero */
.hero{background:var(--band); color:var(--band-ink); padding-block:clamp(40px,6vw,80px) 0; overflow:hidden; position:relative}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero-grid > div{min-width:0}
.hero .eyebrow{color:var(--band-muted)}
.hero h1{font-size:clamp(2.4rem, 6.2vw, 4.6rem); font-weight:800; margin-top:18px}
.hero h1 em{font-style:normal; color:var(--yellow)}
.hero .lede{color:var(--band-muted); font-size:1.15rem}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; padding:0; list-style:none}
.chips li{font-size:.88rem; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14)}
.mark-stage{position:relative; aspect-ratio:1/1; max-width:420px; width:100%; justify-self:center}
.mark-stage svg{width:100%; height:100%; overflow:visible}
.facet{transform-box:fill-box; transform-origin:center; animation:assemble 1.1s cubic-bezier(.2,.8,.2,1) both}
.f-y{--dx:-40px; --dy:-50px; animation-delay:.05s}
.f-g{--dx:-70px; --dy:10px; animation-delay:.18s}
.f-r{--dx:50px; --dy:40px; animation-delay:.31s}
.f-b{--dx:60px; --dy:70px; animation-delay:.44s}
@keyframes assemble{from{transform:translate(var(--dx),var(--dy)) rotate(-8deg); opacity:.15}}
.orbit{position:absolute; inset:6%; border:1px dashed rgba(255,255,255,.18); border-radius:50%}
.stats{display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(40px,6vw,72px); border-top:1px solid rgba(255,255,255,.14)}
.stat{padding:26px 20px 30px 0; display:flex; flex-direction:column; gap:4px; min-width:0}
.stat + .stat{padding-left:20px; border-left:1px solid rgba(255,255,255,.14)}
.stat b{font:800 clamp(1.8rem,3.6vw,2.6rem)/1 var(--f-display); font-variant-numeric:tabular-nums}
.stat span{color:var(--band-muted); font-size:.92rem}
.stat:nth-child(1) b{color:var(--yellow)} .stat:nth-child(2) b{color:#7FE09F} .stat:nth-child(3) b{color:#FF8E7E} .stat:nth-child(4) b{color:#9DB9FF}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .mark-stage{max-width:240px; order:-1; justify-self:start}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){padding-left:0; border-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}

/* programs */
.filters{display:flex; flex-wrap:wrap; gap:8px}
.filter{border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:600 .92rem/1 var(--f-body); padding:10px 15px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.filter .dot{width:9px; height:9px; border-radius:2px; transform:rotate(45deg)}
.filter[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
:root[data-theme="dark"] .filter[aria-pressed="true"]{background:var(--yellow); border-color:var(--yellow); color:var(--navy-deep)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .filter[aria-pressed="true"]{background:var(--yellow); border-color:var(--yellow); color:var(--navy-deep)} }
.toolbar{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-bottom:26px}
.toggle{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.92rem; cursor:pointer}
.toggle input{width:18px; height:18px; accent-color:var(--navy)}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px}
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px 22px; display:flex; flex-direction:column; gap:12px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(3,44,136,.45); border-color:color-mix(in srgb, var(--c) 45%, var(--line))}
.card::before{content:""; position:absolute; top:0; right:0; width:54px; height:54px; background:var(--c); clip-path:polygon(0 0,100% 0,100% 100%)}
.card .field{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px}
.card .field i{width:8px; height:8px; background:var(--c); transform:rotate(45deg)}
.card h3{font-size:1.35rem; font-weight:700; padding-right:30px}
.card p{color:var(--muted)}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px}
.tag{font-size:.8rem; font-weight:600; padding:5px 10px; border-radius:6px; background:var(--soft); color:var(--ink)}
.tag.open{background:color-mix(in srgb, var(--green) 16%, transparent); color:color-mix(in srgb, var(--green) 70%, var(--ink))}
.tag.wait{background:color-mix(in srgb, var(--yellow) 22%, transparent); color:color-mix(in srgb, #8a6400 75%, var(--ink))}
.card .actions{display:flex; gap:10px; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px; margin-top:4px}
.drawer[hidden], .toast[hidden], [hidden]{display:none !important}
.card .actions button{white-space:nowrap; background:none; border:0; padding:6px 0; font:600 .95rem var(--f-body); color:var(--link); cursor:pointer; display:inline-flex; gap:6px; align-items:center}
.card .actions span{white-space:nowrap; font-family:var(--f-mono); font-size:.8rem; color:var(--muted)}
.empty{grid-column:1/-1; padding:30px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r)}

/* steps */
.steps-band{background:var(--surface); border-block:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:s; margin:0; padding:0; list-style:none}
.steps li{padding:24px 22px 8px 0; position:relative; min-width:0}
.steps li + li{padding-left:22px; border-left:1px solid var(--line)}
.steps .n{font:800 3rem/1 var(--f-display); color:var(--c); display:block; margin-bottom:16px}
.steps h3{font-size:1.2rem; margin-bottom:8px}
.steps p{color:var(--muted); font-size:.96rem}
@media (max-width:860px){ .steps{grid-template-columns:1fr 1fr} .steps li:nth-child(3){padding-left:0; border-left:0} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} .steps li, .steps li + li{padding-left:0; border-left:0; border-top:1px solid var(--line)} }

/* why */
.why{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
.why > div{min-width:0}
.benefits{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line)}
.benefit{padding:22px 20px 22px 0; border-bottom:1px solid var(--line); min-width:0}
.benefit:nth-child(even){padding-left:20px; border-left:1px solid var(--line)}
.benefit h3{font-size:1.08rem; font-family:var(--f-body); font-weight:700; letter-spacing:0; margin-bottom:6px; display:flex; gap:10px; align-items:center}
.benefit h3 svg{width:20px; height:20px; color:var(--blue); flex:none}
.benefit p{color:var(--muted); font-size:.95rem}
.platform{margin-top:28px; background:var(--band); color:var(--band-ink); border-radius:var(--r); padding:26px; display:grid; gap:12px}
.platform b{font:700 1.3rem var(--f-display)}
.platform p{color:var(--band-muted)}
.device{display:flex; gap:10px; flex-wrap:wrap}
.device span{font-family:var(--f-mono); font-size:.75rem; padding:6px 10px; border-radius:6px; background:rgba(255,255,255,.1)}
@media (max-width:860px){ .why{grid-template-columns:1fr} }
@media (max-width:560px){ .benefits{grid-template-columns:1fr} .benefit:nth-child(even){padding-left:0; border-left:0} }

/* quiz */
.quiz-band{background:var(--band); color:var(--band-ink)}
.quiz-band .eyebrow{color:var(--band-muted)}
.quiz-band .lede{color:var(--band-muted)}
.quiz{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start}
.quiz > div{min-width:0}
.qbox{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:clamp(20px,3vw,32px)}
.qprog{display:flex; gap:6px; margin-bottom:22px}
.qprog i{flex:1; height:4px; border-radius:3px; background:rgba(255,255,255,.16)}
.qprog i.on{background:var(--yellow)}
.qstep-label{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--band-muted)}
.qbox h3{font-size:clamp(1.3rem,2.4vw,1.7rem); margin:8px 0 20px}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.opt{text-align:left; background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.18); color:inherit; border-radius:12px; padding:16px; cursor:pointer; font:500 1rem/1.35 var(--f-body); display:flex; gap:12px; align-items:flex-start; transition:border-color .15s, background .15s}
.opt:hover{border-color:var(--yellow); background:rgba(255,255,255,.08)}
.opt i{flex:none; width:12px; height:12px; margin-top:5px; transform:rotate(45deg); background:var(--c, var(--yellow))}
.opt small{display:block; color:var(--band-muted); font-size:.85rem; margin-top:2px}
@media (max-width:560px){ .opts{grid-template-columns:1fr} }
@media (max-width:860px){ .quiz{grid-template-columns:1fr} }
.result{display:grid; gap:16px}
.result .rcard{background:var(--surface); color:var(--ink); border-radius:14px; padding:22px; position:relative; overflow:hidden}
.result .rcard::before{content:""; position:absolute; top:0; right:0; width:64px; height:64px; background:var(--c); clip-path:polygon(0 0,100% 0,100% 100%)}
.result .rcard h4{font:800 1.6rem/1.1 var(--f-display); margin:6px 0 8px; padding-right:40px}
.result .rcard p{color:var(--muted)}
.result .also{color:var(--band-muted); font-size:.95rem}
.result .also button{background:none; border:0; color:var(--yellow); font:600 .95rem var(--f-body); cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0}
.qnav{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.linkbtn{background:none; border:0; color:var(--band-muted); font:500 .95rem var(--f-body); cursor:pointer; padding:8px 0; text-decoration:underline; text-underline-offset:3px}

/* corporate */
.corp{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:clamp(24px,4vw,48px); position:relative; overflow:hidden}
.corp > div{min-width:0}
.corp::after{content:""; position:absolute; right:-40px; bottom:-40px; width:200px; height:200px; background:var(--yellow); clip-path:polygon(100% 0,100% 100%,0 100%); opacity:.9}
.corp ul{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.corp li{display:flex; gap:10px; align-items:flex-start}
.corp li::before{content:""; width:9px; height:9px; background:var(--green); transform:rotate(45deg); margin-top:8px; flex:none}
.corp .side{position:relative; z-index:1; display:grid; gap:12px; justify-items:start}
.corp .side p{color:var(--muted)}
@media (max-width:860px){ .corp{grid-template-columns:1fr} }

/* reviews */
.rev-wrap{position:relative}
.reviews{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(290px, 380px); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:thin}
.review{scroll-snap-align:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; gap:16px; min-width:0}
.review blockquote{margin:0; font-size:1rem; color:var(--ink)}
.review blockquote::before{content:"\201C"; display:block; font:800 3rem/0.6 var(--f-display); color:var(--c); margin-bottom:8px; padding-top:12px}
.who{display:flex; align-items:center; gap:12px; margin-top:auto; border-top:1px solid var(--line); padding-top:14px}
.av{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font:700 .95rem var(--f-body); color:#fff; background:var(--c); flex:none}
.who b{display:block; font-size:.98rem}
.who span{font-size:.85rem; color:var(--muted)}
.rev-nav{display:flex; gap:8px}
.circ{width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center}
.circ:hover{border-color:var(--navy)}
.circ svg{width:20px; height:20px}

/* faq */
.faq{display:grid; grid-template-columns:.75fr 1.25fr; gap:48px; align-items:start}
.faq > div{min-width:0}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font:600 1.08rem/1.4 var(--f-body)}
summary::-webkit-details-marker{display:none}
summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{color:var(--muted); padding:0 0 22px; max-width:64ch}
@media (max-width:860px){ .faq{grid-template-columns:1fr} }

/* apply */
.apply{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:stretch}
.apply > *{min-width:0}
.form{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(22px,3.5vw,40px); display:grid; gap:16px}
.form h2{font-size:clamp(1.7rem,3.2vw,2.3rem)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fld{display:grid; gap:6px; min-width:0}
.fld label{font-weight:600; font-size:.92rem}
.fld input, .fld select{font:500 1rem var(--f-body); color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:13px 14px; width:100%; min-width:0}
.fld input:focus, .fld select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent)}
.fld .err{color:var(--err); font-size:.85rem; min-height:0}
.fld.bad input, .fld.bad select{border-color:var(--err)}
.phone{display:flex; gap:8px}
.phone span{flex:none; display:grid; place-items:center; padding:0 12px; border-radius:10px; background:var(--soft); font-family:var(--f-mono); font-size:.9rem}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--muted)}
.check input{width:18px; height:18px; margin-top:2px; accent-color:var(--navy); flex:none}
.note{font-size:.82rem; color:var(--muted)}
.success{display:grid; gap:12px; justify-items:start}
.success .tick{width:56px; height:56px; border-radius:50%; background:color-mix(in srgb, var(--green) 18%, transparent); color:var(--green); display:grid; place-items:center}
.success .tick svg{width:28px; height:28px}
.contact{background:var(--band); color:var(--band-ink); border-radius:20px; padding:clamp(22px,3.5vw,40px); display:flex; flex-direction:column; gap:22px}
.contact h3{font-size:1.5rem}
.cline{display:grid; gap:4px}
.cline small{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--band-muted)}
.cline .val{font-size:1.08rem; font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap; user-select:all}
.cline p{color:var(--band-muted); font-size:.92rem}
.copy{user-select:none; background:rgba(255,255,255,.1); border:0; color:inherit; font:600 .78rem var(--f-body); padding:5px 10px; border-radius:6px; cursor:pointer}
.copy:hover{background:rgba(255,255,255,.18)}
.contact a{color:var(--yellow)}
@media (max-width:860px){ .apply{grid-template-columns:1fr} }
@media (max-width:520px){ .row{grid-template-columns:1fr} }

/* footer */
footer{background:var(--navy-deep); color:#DCE4FA; padding-block:56px calc(28px + env(safe-area-inset-bottom,0px))}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.fgrid > div{min-width:0}
footer h4{font:600 .78rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:#93A6DC; margin:0 0 14px}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
footer a{color:#DCE4FA; text-decoration:none}
footer a:hover{color:var(--yellow)}
footer .brand small{color:#93A6DC}
footer .fine{border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.85rem; color:#93A6DC}
.social{display:flex; gap:10px; margin-top:18px}
.social a{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center}
.social svg{width:18px; height:18px}
@media (max-width:860px){ .fgrid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .fgrid{grid-template-columns:1fr} }

/* ---------- motion & abstraction ---------- */
canvas.facets{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:block}
.hero > .wrap, .quiz-band > .wrap{position:relative; z-index:1}
.quiz-band{position:relative; overflow:hidden}
.top::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--yellow), #FFD95A); transform-origin:left; transform:scaleX(var(--p,0))}
/* Σ depth on pointer */
.par{transform:translate(calc(var(--mx,0) * var(--d) * 1px), calc(var(--my,0) * var(--d) * 1px)); transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.mark-stage .orbit{animation:spin 60s linear infinite}
.mark-stage .orbit::before, .mark-stage .orbit::after{content:""; position:absolute; width:12px; height:12px; transform:rotate(45deg); top:-6px; left:calc(50% - 6px); background:var(--yellow)}
.mark-stage .orbit::after{top:auto; bottom:-6px; background:#2E63D1; width:9px; height:9px; left:calc(50% - 4.5px)}
@keyframes spin{to{transform:rotate(360deg)}}
/* headline words */
.w{display:inline-block; animation:wordIn .8s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 55ms + 150ms)}
@keyframes wordIn{from{opacity:0; translate:0 .45em; filter:blur(6px)}}
/* buttons: sheen */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); translate:-120% 0; transition:translate .6s ease}
.btn:hover::after{translate:120% 0}
.btn.ghost::after{background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%)}
/* tools ribbon */
.ribbon{border-bottom:1px solid var(--line); background:var(--surface); overflow:hidden; padding-block:18px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.track{display:flex; width:max-content; gap:44px; animation:marquee 48s linear infinite}
.ribbon:hover .track{animation-play-state:paused}
.track span{display:inline-flex; align-items:center; gap:12px; font:600 1.02rem var(--f-display); color:var(--muted); white-space:nowrap}
.track span i{width:9px; height:9px; transform:rotate(45deg); background:var(--c)}
.track small{font:500 .7rem var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); opacity:.75}
@keyframes marquee{to{transform:translateX(-50%)}}
/* cards: tilt + spotlight */
.card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s}
.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.card::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(280px circle at var(--sx,50%) var(--sy,0%), color-mix(in srgb, var(--c) 16%, transparent), transparent 70%)}
.card:hover::after{opacity:1}
.card::before{transition:width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1)}
.card:hover::before{width:70px; height:70px}
.card .actions button svg{transition:translate .25s}
.card:hover .actions button svg{translate:4px 0}
/* steps: connector that fills as you scroll */
.steps{position:relative}
.steps::before, .steps::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:2px}
.steps::before{background:var(--line)}
.steps::after{background:linear-gradient(90deg, var(--blue), var(--green), var(--red), var(--yellow)); transform-origin:left; transform:scaleX(1)}
.steps .n{transition:transform .3s}
.steps li:hover .n{transform:translateY(-4px) rotate(-4deg)}
@media (max-width:520px){ .steps::before, .steps::after{display:none} }
/* benefit icons + faq */
.benefit h3 svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.benefit:hover h3 svg{transform:scale(1.18) rotate(-6deg)}
details p{animation:none}
details[open] p{animation:faqIn .35s ease both}
@keyframes faqIn{from{opacity:0; translate:0 -6px}}
.opt{transition:border-color .15s, background .15s, transform .2s}
.opt:hover{transform:translateY(-2px)}
.qbox > *{animation:qIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes qIn{from{opacity:0; translate:14px 0}}
.corp::after{animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{to{transform:translate(-14px,-10px) scale(1.08)}}
/* scroll-driven reveals (progressive; content is fully visible without support) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 70%}
    .steps::after{transform:scaleX(0); animation:fillLine linear both; animation-timeline:view(); animation-range:entry 40% cover 50%}
    .stat b{animation:none}
  }
}
@keyframes rise{from{opacity:0; translate:0 36px; scale:.985}}
@keyframes fillLine{to{transform:scaleX(1)}}
::view-transition-group(*){animation-duration:.38s; animation-timing-function:cubic-bezier(.2,.8,.2,1)}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-weight:600; font-size:.9rem; z-index:80}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} }
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.check a{color:var(--link)}