/* ScanX brand palette (see report): logo green #7dba00; neutrals from scanx-live-src public/styles.css */
:root{--bg:#111514;--fg:#f6f8f1;--mut:#b7c0b6;--ac:#7dba00;--on-ac:#18200f;--card:#1b211e;--ln:#293426}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:inherit}.nav{position:sticky;top:0;z-index:9;display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;background:#111514f5;backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
.logo{font-weight:800;text-decoration:none;letter-spacing:-.02em}.logo b{color:var(--ac)}.nav nav{display:flex;gap:22px;align-items:center}.nav nav a{text-decoration:none;color:var(--mut);font-size:15px}
.btn{display:inline-block;background:var(--ac);color:var(--on-ac)!important;font-weight:700;padding:14px 24px;border-radius:999px;text-decoration:none;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(125,186,0,.3)}.btn.sm{padding:8px 16px}
.ghost{color:var(--mut);text-decoration:none;margin-left:18px}
section{padding:96px 5vw;max-width:1200px;margin:auto}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;min-height:calc(100vh - 60px);padding-top:40px}
.eyebrow{color:var(--ac);font-size:13px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin:0 0 12px}
h1{font-size:clamp(38px,5.6vw,68px);line-height:1.02;letter-spacing:-.035em;margin:0 0 20px}h1 span{color:var(--mut)}
h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;margin:0 0 40px;line-height:1.1}.lead{color:var(--mut);font-size:19px;max-width:34em}
.cta{margin:28px 0}.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}.chips li{border:1px solid var(--ln);border-radius:999px;padding:5px 14px;font-size:14px;color:var(--mut)}
.scan-card{margin:0;background:var(--card);border:1px solid var(--ln);border-radius:22px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#hero-scan{width:100%;height:auto;display:block;border-radius:12px;background:#8e8a83}
figcaption{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--mut);padding:10px 4px 0}.dot{width:9px;height:9px;border-radius:50%;margin-left:10px}.r{background:#ff5a4e}.p{background:#4fc3ff}.c{background:#ffd54a}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps li{background:var(--card);border:1px solid var(--ln);border-radius:18px;padding:26px}.steps em{font-style:normal;color:var(--ac);font-weight:800}.steps h3{margin:8px 0}.steps p{color:var(--mut);margin:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:var(--card);border:1px solid var(--ln);border-radius:18px;overflow:hidden}
.card img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .6s}.card:hover img{transform:scale(1.04)}.card h3,.card p{margin:16px 20px 0}.card p{color:var(--mut);margin-bottom:22px}
.strip{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.strip img{width:100%;height:280px;object-fit:cover;border-radius:18px}
.note{color:var(--mut);font-size:14px;margin-top:26px}
.final{text-align:center;background:linear-gradient(180deg,var(--card),transparent);border-radius:28px;border:1px solid var(--ln);margin-bottom:60px}.final h2{margin-bottom:10px}.final p{color:var(--mut);margin-bottom:28px}
footer{text-align:center;color:var(--mut);padding:30px 5vw 50px;font-size:14px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}
.steps li:nth-child(2){transition-delay:.08s}.steps li:nth-child(3){transition-delay:.16s}.steps li:nth-child(4){transition-delay:.24s}
@media(max-width:860px){.hero{grid-template-columns:1fr;min-height:0;gap:30px}.steps{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.nav nav a:not(.btn){display:none}section{padding:64px 5vw}.strip img{height:180px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.ghost{display:block;margin:16px 0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.card img{transition:none}}
/* Studio hero */
.sx-hero{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#2c302e}
.sx-hero .sx-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sx-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.sx-hero.live canvas{opacity:1}
.r{background:#b4e844}.p{background:#f041ff}.c{background:#78dcff}.ill{margin-left:auto;font-size:11px;opacity:.7}
/* Studio accents */
.sx-wipe{position:relative;height:2px;overflow:hidden;max-width:1200px;margin:0 auto;background:var(--ln)}
.sx-wipe::after{content:"";position:absolute;inset:0;width:30%;background:linear-gradient(90deg,transparent,#b4e844,transparent);animation:sxw 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes sxw{from{transform:translateX(-100%)}to{transform:translateX(400%)}}
.sx-grid{width:56px;height:38px;vertical-align:middle;margin-left:10px}
.sx-grid line{stroke:#b4e844;stroke-width:6;stroke-dasharray:400;stroke-dashoffset:400}
.in .sx-grid line,.process .sx-grid line{animation:sxg 1.2s ease-out .3s forwards}
.sx-grid line:nth-child(2){animation-delay:.4s}.sx-grid line:nth-child(3){animation-delay:.5s}.sx-grid line:nth-child(4){animation-delay:.6s}.sx-grid line:nth-child(5){animation-delay:.7s}.sx-grid line:nth-child(6){animation-delay:.8s}
@keyframes sxg{to{stroke-dashoffset:0}}
.sx-pulse{position:relative;width:14px;height:14px;border-radius:50%;background:#b4e844;margin:0 auto 22px}
.sx-pulse::before,.sx-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #b4e844;animation:sxp 2s ease-out infinite}
.sx-pulse::after{animation-delay:1s}@keyframes sxp{from{transform:scale(1);opacity:.9}to{transform:scale(5);opacity:0}}
@media (prefers-reduced-motion:reduce){.sx-wipe::after,.sx-pulse::before,.sx-pulse::after{animation:none}.sx-grid line{animation:none!important;stroke-dashoffset:0}}
.logo img{display:block;height:48px;width:auto}.flogo{display:inline-block;margin-bottom:8px}.flogo img{height:40px}
.pv{font-size:12px;color:var(--mut);margin:-14px 0 14px}.final .pv{margin:14px 0 0}

/* v2: 50/50 + Klokly-style motion */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:20}.progress span{display:block;height:100%;background:var(--ac);transform:scaleX(0);transform-origin:left}
.hero{display:block;min-height:0;padding-top:56px}.hero-head{text-align:center;max-width:820px;margin:0 auto 40px}.hero-head .lead{margin:0 auto}
h1 .w1,h1 .w2{display:inline-block}h1 .w2{color:var(--ac)}
.js h1 .w1,.js h1 .w2{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}.js h1 .w2{animation-delay:.25s}@keyframes rise{from{opacity:0;transform:translateY(30px)}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.half{background:var(--card);border:1px solid var(--ln);border-radius:24px;padding:16px 16px 26px}
.half .scan-card{padding:0;border:0;box-shadow:none;background:none}.half h2{margin:18px 8px 8px;font-size:clamp(28px,3vw,38px)}.half p{color:var(--mut);margin:0 8px 18px}.half .btn{margin-left:8px}
.pour-slot{aspect-ratio:16/10;border-radius:12px;overflow:hidden}.pour-slot img,.pour-slot video{width:100%;height:100%;object-fit:cover;display:block}
.btn.alt{background:transparent;color:var(--fg)!important;border:1px solid var(--ac)}
.hero>.pv{text-align:center;margin:18px 0 0}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:24px;padding-bottom:56px}.stat{border-top:1px solid var(--ln);padding-top:14px}.stat b{display:block;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;color:var(--fg)}.stat span{color:var(--mut);font-size:14px}.count{font-variant-numeric:tabular-nums}
.svc-head{max-width:760px;margin-bottom:36px}.svc-head h2{margin-bottom:14px}
.ph{overflow:hidden}.card .ph img{height:220px}
.process{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}.tl-side{position:sticky;top:110px}
.timeline{list-style:none;margin:0;padding:0 0 0 40px;position:relative}.tl-bar{position:absolute;left:10px;top:0;bottom:0;width:3px;background:var(--ln);border-radius:3px}.tl-bar span{display:block;height:100%;background:var(--ac);transform:scaleY(0);transform-origin:top}
.timeline li{position:relative;padding:28px 0 56px}.timeline li::before{content:"";position:absolute;left:-36px;top:34px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--ln);transition:background .3s,border-color .3s}
.timeline li.on::before{background:var(--ac);border-color:var(--ac)}.timeline em{font-style:normal;color:var(--ac);font-weight:800}.timeline h3{font-size:26px;margin:6px 0}.timeline p{color:var(--mut);margin:0}
.items{list-style:none;padding:0;margin:0 0 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.items li{background:var(--card);border:1px solid var(--ln);border-radius:18px;padding:22px}.items h3{margin:0 0 6px}.items p{margin:0;color:var(--mut);font-size:15px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:16px}.g{margin:0;position:relative;border-radius:18px;overflow:hidden}.g.tall{grid-row:span 2}.g .ph{height:100%}
.g img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);will-change:transform}
.g figcaption{position:absolute;left:12px;bottom:12px;background:rgba(17,21,20,.85);color:var(--fg);font-size:13px;padding:5px 11px;border-radius:999px}
.final h2{font-size:clamp(28px,4vw,44px)}
.reveal{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}.g.reveal{transform:translateY(40px) scale(.97)}.g.reveal.in{transform:none}
@media(max-width:860px){.split{grid-template-columns:1fr}.trust{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr;gap:10px}.tl-side{position:static}.items{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:180px}}
@media(max-width:520px){.items{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.g img{transform:none!important}.js h1 span{animation:none}.progress{display:none}.tl-bar span{transform:none}}