/* EconQ v3 wireframe. Plain CSS, no external dependencies. */
:root{--bg:#070b11;--s1:#0c1219;--s2:#121a23;--s3:#1a242f;--teal:#2dd4bf;--blue:#2563eb;--t1:#f2f6fa;--t2:#9aa8b8;--t3:#66768a;--line:rgba(255,255,255,.09);--line-t:rgba(45,212,191,.3);--mono:ui-monospace,"IBM Plex Mono",SFMono-Regular,Menlo,Consolas,monospace;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--t1);font:16px/1.55 var(--sans)}
a{color:inherit}
.shell{max-width:1200px;margin:0 auto;padding:0 24px}
.center{text-align:center}
.wf-banner{padding:8px 24px;background:#1f1806;color:#fbbf24;font:600 12px/1.4 var(--mono);letter-spacing:.06em;text-align:center}
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:24px;padding:14px 24px;background:rgba(7,11,17,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.logo{font-weight:700;font-size:18px;text-decoration:none}
.nav-links{display:flex;gap:20px;margin-left:auto}
.nav-links a{color:var(--t2);text-decoration:none;font-size:14px}
.nav-links a.on,.nav-links a:hover{color:var(--t1)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;border:1px solid transparent;font-family:inherit}
.btn-demo{background:var(--teal);color:#04201d}
.btn-ghost{border-color:var(--line);color:var(--t1)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 20px}
.center .actions{justify-content:center}
.hero{position:relative;padding:96px 0 72px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-sm{padding:72px 0 56px}
.hero h1{margin:8px 0 12px;font-size:clamp(34px,4.6vw,60px);line-height:1.08;letter-spacing:-.03em}
.hero-in{position:relative;z-index:30}
.lead{max-width:640px;margin:0;color:var(--t2);font-size:18px}
.center .lead{margin:0 auto}
.blk{padding:72px 0;border-bottom:1px solid var(--line)}
.blk-alt{background:var(--s1)}
.blk-k{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--t2);font:600 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.center .blk-k{justify-content:center}
.blk-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--line-t);border-radius:50%;color:var(--teal);letter-spacing:0}
.blk-h{margin:0 0 16px;font-size:clamp(24px,2.8vw,38px);line-height:1.15;letter-spacing:-.015em}
.notes{margin:0 0 20px;padding-left:18px;color:var(--t3);font-size:14px}
.notes li{margin:4px 0}
.hint{margin:14px 0 0;color:var(--t3);font-size:13px;font-style:italic}
.ph{display:flex;align-items:center;justify-content:center;min-height:220px;margin-top:20px;padding:24px;border:1px dashed rgba(255,255,255,.18);border-radius:16px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px);color:var(--t3);font:13px/1.5 var(--mono);text-align:center}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.links-k{color:var(--t3);font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.link-chip{display:inline-block;padding:4px 10px;border:1px solid var(--line-t);border-radius:999px;color:#5eead4;font-size:12px;text-decoration:none}
/* particle field placeholder: dots drifting toward the centre */
.field{position:absolute;inset:0;z-index:10;pointer-events:none;background:radial-gradient(closest-side,rgba(45,212,191,.12),transparent 70%) center/70% 80% no-repeat}
.field::before{content:"";position:absolute;inset:-10%;background-image:radial-gradient(circle,rgba(154,168,184,.35) 1px,transparent 1.5px);background-size:34px 34px;mask-image:radial-gradient(ellipse at center,transparent 25%,#000 70%);-webkit-mask-image:radial-gradient(ellipse at center,transparent 25%,#000 70%);animation:inward 9s linear infinite}
@keyframes inward{from{transform:scale(1.12);opacity:.9}to{transform:scale(.88);opacity:.3}}
.blk-cta{position:relative;overflow:hidden;padding:110px 0}
.blk-cta .shell{position:relative;z-index:30}
/* drum */
.drum-h{display:flex;flex-wrap:wrap;align-items:center;gap:0 .35em;margin:16px 0 24px;font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.03em}
.drum-win{position:relative;display:block;height:5.5em;font-size:1em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.drum{list-style:none;margin:0;padding:0;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.drum-i{height:1.1em;line-height:1.1em;white-space:nowrap;color:var(--t3);opacity:.35;transition:opacity .5s,color .5s}
.drum-i a{text-decoration:none}
.drum-i.on{color:var(--teal);opacity:1}
.drum-i.near{opacity:.6}
/* dashboard */
.dash{display:grid;grid-template-columns:220px 1fr;margin-top:12px;border:1px solid var(--line);border-radius:20px;background:var(--bg);overflow:hidden}
.dash-side{display:flex;flex-direction:column;gap:2px;padding:16px 10px;background:var(--s2);border-right:1px solid var(--line)}
.dash-brand{margin:0 0 12px;padding:0 10px;font-weight:700}
.dash-tab{padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--t2);font:500 13px/1.3 var(--sans);text-align:left;cursor:pointer}
.dash-tab.on{background:rgba(45,212,191,.14);color:var(--teal)}
.dash-main{position:relative;display:grid;min-height:380px;padding:20px}
.dash-panel{grid-area:1/1;display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;transition:opacity .4s}
.dash-panel.on{opacity:1;visibility:visible}
.dash-path{margin:0;color:var(--t3);font:12px var(--mono)}
.dash-screen{flex:1;display:flex;align-items:center;justify-content:center;min-height:240px;border:1px dashed rgba(255,255,255,.18);border-radius:14px;color:var(--t3);font:13px var(--mono)}
.dash-cap{margin:0;color:var(--t2)}
.dash-panel .link-chip{align-self:flex-start}
/* who gets what */
.hub{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "core core" "c c";gap:20px;margin-top:12px}
.hub-core{grid-area:core;justify-self:center;padding:18px 28px;border:1px solid var(--teal);border-radius:999px;background:rgba(45,212,191,.08);font-weight:700;text-align:center}
.hub-core span{color:var(--t2);font-weight:400;font-size:13px}
.hub-node{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--s1)}
.hub-0{grid-area:a}.hub-1{grid-area:b}.hub-2{grid-area:c;max-width:560px;justify-self:center;width:100%}
.hub-who{margin:0;font-size:20px;font-weight:700}
.hub-sub{margin:2px 0 10px;color:var(--t3);font:12px var(--mono)}
.hub-node ul{margin:0;padding-left:18px;color:var(--t2);font-size:14px}
/* steps, proof */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:12px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-t)}
.steps li{position:relative;padding:28px 20px 0 0}
.step-n{position:absolute;top:-13px;left:0;padding:2px 8px;border:1px solid var(--line-t);border-radius:999px;background:var(--s1);color:var(--teal);font:600 12px var(--mono)}
.step-t{margin:0;font-weight:700}
.step-d{margin:4px 0 0;color:var(--t2);font-size:14px}
.proof{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px}
.metric{padding:22px;border-left:2px solid var(--teal);background:var(--s1)}
.metric-v{margin:0;font-size:44px;font-weight:700;letter-spacing:-.03em}
.metric-t{margin:4px 0;color:var(--t2)}
.metric-s{margin:0;color:var(--t3);font:12px var(--mono)}
.cases{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:20px}
.case{padding:20px;border:1px solid var(--line);border-radius:16px}
.case-k{margin:0 0 6px;color:#fbbf24;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.case-t{margin:0;font-weight:600}
.case-d{margin:6px 0 0;color:var(--t2);font-size:14px}
/* platform subnav */
.subnav{position:sticky;top:59px;z-index:50;display:flex;gap:6px;padding:10px 24px;overflow-x:auto;background:rgba(12,18,25,.95);border-bottom:1px solid var(--line)}
.subnav a{flex:none;padding:6px 12px;border-radius:999px;color:var(--t2);font-size:13px;text-decoration:none}
.subnav a:hover{background:var(--s3);color:var(--t1)}
section[id]{scroll-margin-top:120px}
/* solutions */
.sol{display:grid;grid-template-columns:260px 1fr;gap:24px}
.sol-tabs{display:flex;flex-direction:column;gap:6px}
.sol-tab{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:none;color:var(--t2);font:600 14px var(--sans);text-align:left;cursor:pointer}
.sol-tab.on{border-color:var(--teal);background:rgba(45,212,191,.08);color:var(--t1)}
.sol-panel{display:none;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--s1)}
.sol-panel.on{display:block}
.sol-panel h3{margin:0 0 12px;font-size:26px}
.sol-row{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.sol-row p{margin:0;color:var(--t2)}
.sol-rk{color:var(--t3)!important;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.mx{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.mx-row{display:grid;grid-template-columns:200px repeat(7,minmax(90px,1fr));min-width:860px;border-top:1px solid var(--line)}
.mx-row span{padding:10px;font-size:13px;color:var(--t2)}
.mx-head{border-top:0;background:var(--s2)}
.mx-head span{color:var(--t3);font:11px var(--mono)}
.mx-c{text-align:center;font-family:var(--mono)}
/* form */
.form{display:grid;gap:14px;max-width:520px;margin-top:28px}
.form label{display:grid;gap:6px;color:var(--t2);font-size:13px}
.form input,.form select{padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--s1);color:var(--t1);font:inherit}
.form .btn{justify-self:start}
/* footer */
.foot{padding:48px 24px;border-top:1px solid var(--line);background:var(--s1)}
.foot-cols{display:flex;flex-wrap:wrap;gap:56px;max-width:1200px;margin:0 auto}
.foot-cols div{display:flex;flex-direction:column;gap:6px}
.foot-cols a{color:var(--t2);font-size:14px;text-decoration:none}
.foot-k{margin:0 0 4px;color:var(--t3);font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.foot-note{max-width:1200px;margin:28px auto 0;color:var(--t3);font-size:12px}
@media (max-width:991px){
 .dash{grid-template-columns:1fr}
 .dash-side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
 .dash-brand{display:none}
 .dash-tab{flex:none}
 .sol{grid-template-columns:1fr}
 .sol-tabs{flex-direction:row;overflow-x:auto}
 .sol-tab{flex:none}
}
@media (max-width:767px){
 .nav-links{display:none}
 .nav .btn{margin-left:auto}
 .hub{grid-template-columns:1fr;grid-template-areas:"core" "a" "b" "c"}
 .steps,.proof,.cases{grid-template-columns:1fr}
 .steps{border-top:0;gap:28px}
 .steps li{border-top:1px solid var(--line-t)}
 .sol-row{grid-template-columns:1fr;gap:4px}
 .drum-h{display:block}
 .drum-lead{display:block;margin-bottom:.15em}
}
@media (prefers-reduced-motion:reduce){
 .drum{transition-duration:.2s}
 .field::before{animation-duration:30s}
 html{scroll-behavior:auto}
}
