/* Layout and components. Values come from brand-tokens.css; no raw colors or fonts here. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-width:320px;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-5)}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:16px;z-index:100;background:var(--accent);color:var(--on-accent);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-weight:600}
.t2{color:var(--text-200)}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;cursor:pointer;transition:background .2s ease-out,border-color .2s ease-out,transform .2s ease-out,box-shadow .2s ease-out;will-change:transform}
.btn:hover{box-shadow:var(--shadow-glow)}
.btn svg{width:18px;height:18px}
.btn-ghost{background:transparent;color:var(--text-100);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-200);border-color:var(--accent)}
.ic{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* theme-aware logos */
.logo-light{display:none}
[data-theme="light"] .logo-dark{display:none}
[data-theme="light"] .logo-light{display:block}

/* marquee strip (once, home only) */
.strip{height:24px;position:relative;overflow:hidden;background:var(--surface-100)}
.strip-row{position:absolute;inset:0;display:flex;align-items:center;padding-left:14px}
.js .strip::before{content:none}
.strip::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--surface-300) 3.5px,transparent 4px) 14px 50%/36px 100% repeat-x}
.dot{flex:none;width:7px;height:7px;margin-right:29px;border-radius:50%;--l:0;background:color-mix(in srgb,var(--accent) calc(var(--l) * 100%),var(--surface-300));box-shadow:0 0 calc(var(--l) * 10px) calc(var(--l) * 2px) color-mix(in srgb,var(--accent) calc(var(--l) * 55%),transparent)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface-100) 85%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}
.nav-in{display:flex;align-items:center;gap:var(--space-6);height:68px}
.brand{display:block;width:150px;flex:none}
.nav-links{display:flex;gap:var(--space-5);margin-left:auto;font-size:14px;line-height:22px}
.nav-links a{position:relative;text-decoration:none;color:var(--text-200);padding:var(--space-2) 0;transition:color .2s ease-out}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--text-100)}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.nav .btn{padding:10px 20px;font-size:14px}
.menu-btn{display:none;margin-left:auto;background:transparent;border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3)}
.menu-btn svg{width:20px;height:20px}

/* hero */
.hero{position:relative;overflow:hidden;padding:var(--space-9) 0 var(--space-8)}
.spot{position:absolute;inset:-25% -10% -25% -25%;background:var(--spotlight);pointer-events:none;will-change:transform}
.hero .wrap{position:relative}
.hero h1{max-width:900px;margin-top:var(--space-5)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-7);align-items:center;margin-top:var(--space-7)}
.hero-copy .body-lg{max-width:460px}
.cta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}
.facts b{display:block;font:600 24px/32px var(--font-sans);letter-spacing:-.01em}
.facts span{font-size:12px;line-height:18px;color:var(--text-200);letter-spacing:.04em}

/* sign board */
.hero-copy,.sign{min-width:0}
.sign{background:var(--surface-200);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);transition:border-color .2s ease-out,box-shadow .2s ease-out}
.sign:hover,.sign:focus-within{box-shadow:var(--shadow-glow);border-color:var(--accent)}
.sign-top{display:flex;justify-content:space-between;align-items:center;padding:var(--space-1) var(--space-2) var(--space-3)}
.sign-top .label{color:var(--text-200)}
.sign canvas{display:block;margin:0 auto;border-radius:var(--radius-md);background:var(--ink);cursor:pointer}
.sign form{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
.sign input{flex:1;min-width:0;background:var(--surface-100);color:var(--text-100);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font:500 14px/22px var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.sign input::placeholder{color:var(--text-300)}
.sign input:hover{border-color:var(--border-strong)}
.sign .hint{margin:var(--space-3) var(--space-2) 0;font-size:12px;line-height:18px;color:var(--text-200)}
.sign .pp{background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius-pill);width:32px;height:32px;display:grid;place-items:center}
.sign .pp svg{width:14px;height:14px}

/* sections */
section{padding:var(--space-9) 0}
.sec-head{margin-bottom:var(--space-7);max-width:640px}
.sec-head .label{color:var(--accent-text);display:block;margin-bottom:var(--space-3)}
.sec-head p{margin-top:var(--space-3);color:var(--text-200)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--surface-200);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);transition:border-color .2s ease-out,box-shadow .2s ease-out,transform .2s ease-out;--mx:50%;--my:0%}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s ease-out;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
.card:hover{border-color:var(--accent);box-shadow:var(--shadow-glow);transform:translateY(-4px)}
.card:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.disc{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface-300);color:var(--accent-text);margin-bottom:var(--space-5)}
.disc svg{width:24px;height:24px}
.card .title{margin-bottom:var(--space-3)}
.card p{color:var(--text-200)}
.bul{margin-top:var(--space-5);display:grid;gap:var(--space-2);font-size:14px;line-height:22px;color:var(--text-100)}
.bul li{display:flex;align-items:center;gap:var(--space-3)}
.bul li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.demo{margin-top:auto;padding-top:var(--space-6)}
.demo-box{background:var(--surface-100);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);position:relative}
.demo-cap{display:flex;justify-content:space-between;font-size:12px;line-height:18px;color:var(--text-200);margin-bottom:var(--space-2)}
.demo-cap .read{font:500 12px/18px var(--font-mono);color:var(--text-100)}
.spark{width:100%;height:84px;touch-action:none;cursor:crosshair;overflow:visible}
.spark .area{fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.spark .ln{fill:none;stroke:var(--accent-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);transition:stroke-dashoffset 1.4s ease-out}
.spark.on .ln{stroke-dashoffset:0}
.spark .cur{stroke:var(--border-strong);stroke-width:1}
.spark .pt{fill:var(--accent-text);stroke:var(--surface-100);stroke-width:2}
.phone-row{display:flex;gap:var(--space-5);align-items:center}
.phone{flex:none;width:76px;height:132px;border:2px solid var(--border-strong);border-radius:var(--radius-md);padding:var(--space-3) var(--space-2);display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:var(--surface-200)}
.phone::before{content:"";width:22px;height:4px;border-radius:4px;background:var(--border-strong)}
.bulb{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface-300);transition:background .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out;padding:0}
.bulb[aria-checked="true"]{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent),0 0 28px color-mix(in srgb,var(--accent) 55%,transparent)}
.phone i{width:30px;height:3px;border-radius:3px;background:var(--border-subtle)}
.phone-row p{font-size:14px;line-height:22px}
.phone-row .st{font:500 12px/18px var(--font-mono);color:var(--text-200);margin-top:var(--space-2)}

/* process rail */
.rail{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.rail::before{content:"";position:absolute;left:9px;right:calc(25% - 9px);top:9px;height:2px;background:var(--border-subtle)}
.rail::after{content:"";position:absolute;left:9px;top:9px;height:2px;width:calc((100% - 9px) * var(--fill,0) * .75);background:var(--accent);transition:width .5s ease-out}
.step{position:relative;padding-top:var(--space-6);outline-offset:8px;border-radius:var(--radius-md)}
.step .b{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--surface-300);border:2px solid var(--border-strong);z-index:1;transition:background .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out}
.step.lit .b{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 20%,transparent),0 0 24px color-mix(in srgb,var(--accent) 50%,transparent)}
.step .n{font:500 12px/18px var(--font-mono);color:var(--text-200);letter-spacing:.08em}
.step .title{margin:var(--space-1) 0 var(--space-2);transition:color .2s ease-out}
.step.lit .title{color:var(--accent-text)}
.step p{font-size:14px;line-height:22px;color:var(--text-200);max-width:240px}

/* about */
.about{background:var(--surface-200);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-8);display:grid;grid-template-columns:minmax(0,560px) 1fr;gap:var(--space-8);align-items:center}
.about .label{color:var(--accent-text);display:block;margin-bottom:var(--space-3)}
.about .headline{margin-bottom:var(--space-4)}
.about p.body-lg{color:var(--text-200)}
.about .stk{width:min(100%,300px);justify-self:center;transition:transform .3s ease-out}
.about:hover .stk{transform:scale(1.04)}

/* contact */
.contact{text-align:center}
.contact .headline{margin-bottom:var(--space-3)}
.contact .row{display:flex;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-6) 0 var(--space-4)}
.copy{width:48px;height:48px;border-radius:50%;background:transparent;border:1.5px solid var(--border-strong);display:grid;place-items:center;transition:border-color .2s ease-out,background .2s ease-out}
.copy:hover{border-color:var(--accent);background:var(--surface-200)}
.copy svg{width:18px;height:18px}
.toast{min-height:18px;font-size:14px;line-height:22px;color:var(--success)}

/* footer */
.foot{border-top:1px solid var(--border-subtle);padding:var(--space-6) 0;font-size:14px;line-height:22px;color:var(--text-200)}
.foot .wrap{display:flex;align-items:center;gap:var(--space-5) var(--space-6);flex-wrap:wrap}
.foot .brand{width:120px}
.foot nav{display:flex;gap:var(--space-5)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--text-100)}
.foot .copy-r{margin-left:auto}
.theme{display:inline-flex;align-items:center;gap:var(--space-2);background:transparent;border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:14px;line-height:22px;color:var(--text-100);transition:border-color .2s ease-out}
.theme:hover{border-color:var(--accent)}
.theme svg{width:16px;height:16px}

/* doc pages */
.doc{padding:var(--space-9) var(--space-5) var(--space-8);max-width:720px}
.doc h1{font:700 44px/46px var(--font-sans);letter-spacing:-.03em;margin-bottom:var(--space-3)}
.doc h2{font:600 24px/32px var(--font-sans);letter-spacing:-.01em;margin:var(--space-7) 0 var(--space-3)}
.doc p,.doc li{color:var(--text-200);margin-bottom:var(--space-3)}
.doc ul{padding-left:var(--space-5);list-style:disc}
.doc a{color:var(--accent-text)}

/* reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s ease-out}
.js .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .about{grid-template-columns:minmax(0,1fr);padding:var(--space-6)}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  section{padding:var(--space-8) 0}
  .hero{padding:var(--space-8) 0 var(--space-7)}
  .menu-btn{display:grid}
  .nav .btn{display:none}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:var(--space-3) var(--space-5) var(--space-5);background:var(--surface-100);border-bottom:1px solid var(--border-subtle)}
  .nav-links.open{display:flex}
  .nav-links a{padding:var(--space-3) 0;font-size:16px}
  .rail{grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding-left:var(--space-7)}
  .rail::before{left:9px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .rail::after{left:9px;top:10px;width:2px;height:calc((100% - 20px) * var(--fill,0))}
  .step{padding-top:0}
  .step .b{left:calc(-1 * var(--space-7))}
  .step p{max-width:none}
  .foot .copy-r{margin-left:0;width:100%}
  .doc h1{font-size:34px;line-height:38px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  .spark .ln{stroke-dashoffset:0}
  .card:hover{transform:none}
}