/* KYNEX Edge — main stylesheet (mobile-first; desktop rules in @media(min-width:901px) blocks) */
/* KYNEX Edge — main stylesheet (mobile-first; desktop rules in the @media(min-width:901px) block at the end) */
:root{--fg:#0a0a0a;--mute:#6b6b6b;--line:#e6e6e6;--c1:#c2531b;--c2:#1f5c8b;--c3:#3a7d22;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:68px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--fg);font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}svg{max-width:100%}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
main,footer{overflow-x:clip}
.chk{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
/* header — pure CSS menu */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.bar{height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.02em}
.logo i{display:grid;grid-template-columns:repeat(3,6px);gap:2px}.logo i b{width:6px;height:6px;background:var(--fg)}
.logo i b:nth-child(2),.logo i b:nth-child(4),.logo i b:nth-child(7){opacity:.18}.logo span{font-weight:400}
.burger{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger span{width:18px;height:1.5px;background:var(--fg);transition:transform .2s}
#mt:checked+.burger span:first-child{transform:translateY(3.25px) rotate(45deg)}#mt:checked+.burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:6px 20px 22px;max-height:calc(100vh - 60px - env(safe-area-inset-top,0px));overflow-y:auto;-webkit-overflow-scrolling:touch}
#mt:checked~nav{display:block}
nav>a,.svb{display:block;padding:15px 2px;font-size:17px;font-weight:500;border-bottom:1px solid var(--line);cursor:pointer}
.svb::after{content:"+";float:right;font-weight:400}#sv:checked+.svb::after{content:"–"}
nav .cta{margin-top:16px;border:0;background:var(--fg);color:#fff;text-align:center;border-radius:99px;padding:15px}
.mega{display:none}#sv:checked~.mega{display:block}
.mega .in{padding:0 0 6px}
.gp{padding:14px 0 4px}.gp h4{margin:0 0 6px;font:500 12px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.gp h4::before{content:"";width:8px;height:8px;background:var(--k)}
.gp a{display:block;padding:8px 0 8px 16px;border-left:1px solid var(--line);margin-left:3px}.gp b{display:block;font-size:15px;font-weight:600}.gp small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px;line-height:1.4}
.gp a:hover{border-left-color:var(--fg)}
/* shared */
.tag{display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border:1px solid var(--line);border-radius:99px;font-size:12px;color:var(--mute)}
.tag::before{content:"";width:7px;height:7px;background:var(--k,var(--fg))}
.lead{font-size:16px;line-height:1.6;color:var(--mute);margin:0 0 22px}
.btn{display:inline-block;padding:14px 24px;border-radius:99px;font-weight:500;font-size:15px;border:1px solid var(--fg);text-align:center;transition:.2s}
.btn.p{background:var(--fg);color:#fff}.btn.p:hover{background:#fff;color:var(--fg)}.btn.s:hover{background:var(--fg);color:#fff}.btn.w{background:#fff;color:var(--fg);border-color:#fff}.btn.w:hover{background:transparent;color:#fff}
.btns{display:flex;gap:10px;flex-wrap:wrap}.btns .btn{flex:1 1 auto}
.big{font-size:34px;line-height:1.05;letter-spacing:-.04em;font-weight:600;margin:20px 0 16px}.big em{font-style:normal;color:transparent;-webkit-text-stroke:1.3px var(--fg)}
.stats{display:flex;gap:24px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font:12px "JetBrains Mono",monospace;color:var(--mute)}.stats b{display:block;font:600 24px "Space Grotesk",sans-serif;color:var(--fg);letter-spacing:-.03em}
/* carousel (scroll-snap, no JS needed) */
.car{padding-top:0;display:flex;flex-direction:column}.trk{width:100%;min-width:0}
.trk{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.trk::-webkit-scrollbar{display:none}
.sl{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;padding:30px 20px 10px;display:flex;flex-direction:column;align-items:flex-start}
.tx{display:contents}
.tx>*{max-width:640px}.tag{order:1}.sl h1,.sl h2{order:2;font-size:42px;line-height:1;letter-spacing:-.045em;margin:18px 0 14px;font-weight:600}.lead{order:3}
.vs{order:4;align-self:stretch;margin:4px 0 18px}.chips{order:5}.sl .btn{order:6;align-self:stretch}
.vs svg{display:block;width:100%;max-width:230px;height:auto;margin:0 auto}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}.chips span{font-size:12px;padding:6px 11px;border:1px solid var(--line);border-radius:99px;color:#333}
.tbs{order:-1;width:100%;display:flex;gap:8px;max-width:1280px;margin:0 auto;padding:14px 20px 0;align-items:flex-start}
.tbs a{flex:1;border-top:2px solid var(--line);padding:10px 0 0;font:500 12px "JetBrains Mono",monospace;color:var(--mute);line-height:1.35}
.tbs a.on{color:var(--fg);border-top-color:var(--fg)}.tbs b{display:block;font-weight:500;color:var(--fg);font-size:12px}
.arr{display:none;gap:8px;margin-left:14px}.arr button{width:46px;height:46px;border-radius:50%;border:1px solid var(--fg);background:#fff;font-size:18px;cursor:pointer;transition:.2s}.arr button:hover{background:var(--fg);color:#fff}
.ab{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:280px;margin:0 auto}
.pg{position:relative;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:210px;overflow:hidden;background:#fff}
.pg.w{border-color:var(--c2);box-shadow:0 16px 36px -22px var(--c2)}
.pg b{font-size:9px;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center}.pg s{text-decoration:none;background:var(--c2);color:#fff;padding:2px 6px;border-radius:99px;font-size:8px}
.pg>i{display:block;height:32px;border-radius:7px;background:#efefef}.pg>i.s{height:10px;width:70%}.pg>i.s+i.s{width:45%}
.pg .bt{display:block;height:22px;width:60%;border-radius:99px;background:#0a0a0a}.pg.w .bt{background:var(--c2)}
.hm{position:absolute;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(194,83,27,.7),rgba(194,83,27,0) 70%);transform:translate(-50%,-50%);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.rt{margin-top:auto}.rt span{font-size:18px;font-weight:500}.rt>div{height:5px;background:#eee;border-radius:9px;margin-top:5px}.rt>div>div{height:100%;background:#9a9a9a;border-radius:9px}.pg.w .rt>div>div{background:var(--c2)}
/* funnel */
.fs{border-top:1px solid var(--line)}
.fi{max-width:680px;margin:0 auto;padding:60px 20px}
.viz{position:relative;--o1:.6;--o2:.6;--o3:.6;--p1:.55;--p2:.55;--p3:.55}
.viz[data-a="1"]{--o1:1;--o2:.1;--o3:.1;--p1:1;--p2:.25;--p3:.25}.viz[data-a="2"]{--o1:.1;--o2:1;--o3:.1;--p1:.25;--p2:1;--p3:.25}.viz[data-a="3"]{--o1:.1;--o2:.1;--o3:1;--p1:.25;--p2:.25;--p3:1}
.g1{opacity:var(--o1)}.g2{opacity:var(--o2)}.g3{opacity:var(--o3)}.gl{transition:opacity .5s}
.ar1{opacity:var(--p1)}.ar2{opacity:var(--p2)}.ar3{opacity:var(--p3)}.ar{transition:opacity .4s}
.fd{display:none}.fm{display:block;max-width:380px;margin:8px auto}.fm svg,.fd svg,.fd canvas{display:block;width:100%;height:auto}.fd.cv svg{display:none}.fd canvas{cursor:pointer}
.tier{border-top:1px solid var(--line);padding:16px 0 16px 14px;border-left:3px solid transparent;transition:opacity .3s,border-color .3s;cursor:pointer}
.tier small{display:block;font:500 12px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.tier strong{display:block;font-size:22px;letter-spacing:-.03em;line-height:1.1}.tier p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--mute)}
.viz[data-a="1"] .tier:not(.t1),.viz[data-a="2"] .tier:not(.t2),.viz[data-a="3"] .tier:not(.t3){opacity:.45}
.viz[data-a="1"] .t1,.viz[data-a="2"] .t2,.viz[data-a="3"] .t3{border-left-color:var(--k)}
.viz[data-a="1"] .t1 small,.viz[data-a="2"] .t2 small,.viz[data-a="3"] .t3 small{color:var(--k)}
/* why */
.why{background:#fafafa;border-top:1px solid var(--line)}
.sec{max-width:1280px;margin:0 auto;padding:60px 20px}
.cd{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;margin-bottom:14px;display:flex;flex-direction:column}
.cd small{font:500 12px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--k)}
.num{font-size:60px;font-weight:600;letter-spacing:-.05em;line-height:1;margin:10px 0}
.cd p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--mute)}
.dots{max-width:230px;display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:auto}.dots i{aspect-ratio:1;background:#e6e6e6;display:block}.dots i.h{background:var(--k)}
.hrs{display:flex;gap:3px;align-items:flex-end;height:54px;margin-top:auto}.hrs i{flex:1;background:var(--k);opacity:.85;display:block}
.cap{display:block;margin-top:10px;font:12px "JetBrains Mono",monospace;color:var(--mute)}
.chart{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 14px}
.chart h3{margin:4px 6px 12px;font-size:20px;letter-spacing:-.03em}.chart small{margin-left:6px;font:500 12px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--mute)}
.chart svg{display:block;width:100%;height:auto}.cw{display:none}
.lg{display:flex;gap:14px;flex-wrap:wrap;font:12px "JetBrains Mono",monospace;margin:0 6px 8px}.lg span::before{content:"";display:inline-block;width:14px;height:3px;background:var(--k);margin-right:6px;vertical-align:middle}
.cn{display:flex;align-items:center;gap:12px;margin:8px 6px 0}.cn b{font-size:38px;letter-spacing:-.04em}.cn span{font-size:13px;color:var(--mute);line-height:1.4}
.fn{font:12px/1.6 "JetBrains Mono",monospace;color:var(--mute);margin:16px 6px 0}
.tk{border-top:1px solid var(--line)}
.tw{max-width:1280px;margin:0 auto;padding:70px 28px 100px;display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start}
.tw h1{font-size:clamp(40px,5vw,70px);line-height:1;letter-spacing:-.045em;margin:24px 0 20px;font-weight:600}
.tw h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.nx{list-style:none;margin:36px 0;padding:0;display:grid;gap:20px}
.nx li{display:flex;gap:16px;align-items:flex-start}.nx b{font-size:12px;border:1px solid var(--fg);border-radius:99px;padding:6px 10px}
.nx strong{display:block;font-size:16px;margin-bottom:2px}.nx span{font-size:14px;color:var(--mute);line-height:1.5}
.ci{display:grid;gap:8px;font-size:13px;padding-top:24px;border-top:1px solid var(--line)}.ci a:hover{text-decoration:underline}
.fc{background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:0 40px 80px -50px rgba(0,0,0,.25)}
.fc h2{margin:0 0 4px;font-size:26px;letter-spacing:-.03em}.fc .sb{margin:0 0 26px;font-size:14px;color:var(--mute)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fl{display:block;margin-bottom:18px}.fl>span{display:block;font:500 12px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.fl em{font-style:normal;color:var(--c1)}
.fl input,.fl select,.fl textarea{width:100%;font:400 16px "Space Grotesk",sans-serif;padding:14px 16px;border:1px solid #d4d4d4;border-radius:14px;background:#fff;color:var(--fg);outline:none;transition:.2s;-webkit-appearance:none;appearance:none}
.fl select{background-image:linear-gradient(45deg,transparent 50%,#0a0a0a 50%),linear-gradient(135deg,#0a0a0a 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.fl textarea{min-height:120px;resize:vertical}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:var(--fg);box-shadow:0 0 0 3px rgba(10,10,10,.08)}
.fl.bad input,.fl.bad textarea{border-color:#c0392b}.er{display:none;color:#c0392b;font-size:12px;margin-top:6px}.bad .er{display:block}
.pl{display:flex;flex-wrap:wrap;gap:8px}.pl label{cursor:pointer}.pl input{position:absolute;opacity:0;pointer-events:none;width:auto}
.pl label span{display:inline-block;padding:9px 14px;border:1px solid #d4d4d4;border-radius:99px;font-size:13px;transition:.2s}
.pl input:checked+span{background:var(--fg);color:#fff;border-color:var(--fg)}.pl input:focus-visible+span{box-shadow:0 0 0 3px rgba(10,10,10,.15)}
.ck{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mute);line-height:1.5;margin:4px 0 22px;cursor:pointer}.ck input{margin-top:3px;width:18px;height:18px;accent-color:#0a0a0a;flex:none}
.sub2{width:100%;cursor:pointer;font:500 16px "Space Grotesk",sans-serif;padding:17px;border-radius:99px;border:1px solid var(--fg);background:var(--fg);color:#fff;transition:.2s}.sub2:hover{background:#fff;color:var(--fg)}
.ok{text-align:left}.ok .tick{width:52px;height:52px;border-radius:50%;background:var(--fg);color:#fff;display:grid;place-items:center;font-size:24px;margin-bottom:18px}
.ok pre{white-space:pre-wrap;word-break:break-word;background:#f6f6f6;border-radius:14px;padding:16px;font:12px/1.6 "JetBrains Mono",monospace;margin:18px 0;max-height:240px;overflow:auto}
.ok .btns{margin-top:6px}.ok button.btn{background:#fff;cursor:pointer;font-family:inherit}.ok button.btn:hover{background:var(--fg);color:#fff}
body.talkv .cta2{display:none}body.talkv .fg{padding-top:60px}
@media(max-width:900px){.tw{grid-template-columns:1fr;gap:40px;padding:44px 18px 70px}}
@media(max-width:560px){.fr{grid-template-columns:1fr;gap:0}.fc{padding:22px 18px;border-radius:20px}}
footer{background:#0a0a0a;color:#fff;overflow:hidden}
.fw{max-width:1280px;margin:0 auto;padding:90px 28px 0}
.cta2{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:60px;border-bottom:1px solid #2a2a2a}
.cta2 h2{font-size:clamp(36px,5vw,68px);line-height:1;letter-spacing:-.045em;margin:0;font-weight:600}
.btn.w{background:#fff;color:#0a0a0a;border-color:#fff}.btn.w:hover{background:transparent;color:#fff}
.fg{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.5fr;gap:36px;padding:50px 0}
.fg h4{margin:0 0 16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#888;font-weight:500}
.fg a{display:block;padding:4px 0;font-size:14px;color:#ddd;transition:.15s}.fg a:hover{color:#fff;padding-left:5px}
.fg p{margin:0 0 10px;font-size:14px;line-height:1.6;color:#bbb}.fd{margin-top:16px!important}
.fb{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#777;padding:20px 0;border-top:1px solid #2a2a2a}
.wm{font-size:clamp(60px,17vw,250px);font-weight:700;letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:1px #333;white-space:nowrap;margin:10px 0 -.08em;user-select:none}
@media(max-width:900px){.fw{padding:60px 20px 0}.fg{grid-template-columns:1fr 1fr;gap:28px 20px}.fg>div:first-child,.fg>div:last-child{grid-column:1/-1}.cta2 h2{font-size:38px}}
@media(max-width:560px){.fg{grid-template-columns:1fr}}
/* views: with JS the form is its own page; without JS it simply sits on the page */

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===== desktop ===== */
@media(min-width:901px){
 html{scroll-padding-top:76px}
 .bar{height:68px;padding:0 28px}.burger{display:none}
 nav{display:flex!important;position:static;align-items:center;gap:6px;padding:0;border:0;max-height:none;overflow:visible;background:none}
 nav>a,.svb{padding:10px 16px;font-size:14px;border:0;border-radius:99px;transition:background .2s}
 .svb::after{content:"";float:none;display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg)}
 #sv:checked+.svb::after{content:"";transform:translateY(1px) rotate(-135deg)}
 nav>a:hover,.svb:hover,#sv:checked+.svb{background:#f1f1f1}
 nav .cta{margin:0 0 0 10px;padding:11px 20px}nav .cta:hover{background:#333}
 .mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
 .mega .in{max-width:1280px;margin:0 auto;padding:34px 28px 38px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
 .gp{padding:0}.gp a{transition:.15s}.gp a:hover b{padding-left:4px}
 .sl{display:grid;grid-template-columns:6fr 5fr;gap:40px;align-items:center;min-height:min(640px,calc(100vh - 150px));padding:56px max(28px,calc((100% - 1224px)/2)) 30px}
 .tx{display:block}.tx>*{max-width:none}.sl h1,.sl h2{font-size:clamp(44px,6.4vw,92px);margin:24px 0 22px}.lead{font-size:17px;max-width:560px}
 .chips{max-width:560px;margin-bottom:30px}.sl .btn{display:inline-block;padding:15px 26px}.vs{margin:0}.vs svg{max-width:440px}.ab{max-width:440px;gap:16px}.pg{min-height:340px;padding:16px;border-radius:18px}
 .tbs{order:0;padding:0 28px 38px;align-items:center}.tbs a{flex:0 1 250px;font-size:12px}.tbs a b{font-size:12px}.arr{display:none;margin-left:auto}.js .arr{display:flex}
 .fi{max-width:1280px;padding:100px 28px;display:grid;grid-template-columns:5fr 7fr;gap:30px;align-items:center}
 .big{font-size:clamp(40px,5.2vw,74px);letter-spacing:-.045em;margin:26px 0 22px;line-height:1}.stats{margin-top:44px}.btns .btn{flex:0 0 auto}
 .fm{display:none}.fd{display:block}
 .tier{position:absolute;left:var(--x);top:var(--y);width:var(--w,27%);transform:translateY(-50%);border:0;padding:0}.tier.l{text-align:right}.tier strong{font-size:clamp(18px,1.9vw,27px)}.tier p{font-size:12.5px}
 .sec{padding:100px 28px}.big+.lead{max-width:760px}
 .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}.cd{margin:0;padding:28px;transition:.3s}.cd:hover{transform:translateY(-4px);border-color:var(--k)}.num{font-size:clamp(56px,6vw,84px)}.cd p{font-size:14.5px}
 .chart{margin-top:20px;padding:30px}.cs{display:none}.cw{display:block}.chart h3{font-size:24px;margin:6px 0 0}.chart small{margin:0}.lg{margin:0 0 8px;font-size:12px}.chh{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
 .cn b{font-size:44px}.cn span{font-size:14px;max-width:420px}.cn,.fn{margin-left:0;margin-right:0}
}


/* ===== service pages ===== */
.js .view{display:none}.js .view.on{display:block}.talkv .cta2{display:none}
.gp h4 a{display:inline;padding:0;border:0;margin:0}.gp h4 a:hover{text-decoration:underline}
.gp .gi{border-left:1px solid var(--line);margin-left:3px;padding:7px 0 7px 16px}
.gp .gh{display:block;padding:0;border:0;margin:0;font-size:15px}.gp .gh b{display:block;font-weight:600}.gp .gh:hover b{text-decoration:underline}
.gp .gs{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:4px}
.gp .gs a{display:inline;border:0;padding:3px 0;margin:0;font-size:13px;color:var(--mute)}.gp .gs a:hover{color:var(--fg)}
.tmore{display:inline-block;margin-top:10px;font:500 12px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--k);border-bottom:1px solid currentColor;padding-bottom:2px}
.p-hero{border-bottom:1px solid var(--line)}
.p-hi{max-width:1280px;margin:0 auto;padding:30px 20px 40px;display:flex;flex-direction:column;gap:26px}
.crumb{font:12px "JetBrains Mono",monospace;color:var(--mute);margin-bottom:20px}.crumb a:hover{color:var(--fg)}.crumb b{font-weight:400;color:var(--fg)}
.p-hero .tag::before{background:var(--k)}
.p-hero h1{font-size:46px;line-height:1;letter-spacing:-.05em;font-weight:600;margin:18px 0 16px}
.p-hv{max-width:260px;margin:0 auto;width:100%}.p-hv svg{display:block;width:100%;height:auto}
.p-sub{position:sticky;top:calc(60px + env(safe-area-inset-top,0px));z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.p-subi{display:flex;gap:8px;overflow-x:auto;padding:10px 20px;max-width:1280px;margin:0 auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.p-subi::-webkit-scrollbar{display:none}
.p-subi a{flex:0 0 auto;padding:8px 14px;border:1px solid var(--line);border-radius:99px;font:500 12px "JetBrains Mono",monospace;white-space:nowrap;transition:.2s}
.p-subi a:hover{border-color:var(--fg)}.p-subi a.on{background:var(--fg);color:#fff;border-color:var(--fg)}
.p-secs{max-width:1280px;margin:0 auto;padding:0 20px 20px}
.p-grp{scroll-margin-top:56px;padding:56px 0 24px}
.p-grp h2{font-size:clamp(36px,4.4vw,60px);letter-spacing:-.045em;line-height:1;margin:10px 0 14px;font-weight:600}
.p-grp p{font-size:16px;line-height:1.6;color:var(--mute);max-width:700px;margin:0 0 18px}
.p-n{font-size:12px;letter-spacing:.08em;color:var(--k)}
.p-chips2{display:flex;flex-wrap:wrap;gap:8px}.p-chips2 a{padding:8px 14px;border:1px solid var(--line);border-radius:99px;font:500 12px "JetBrains Mono",monospace}.p-chips2 a:hover{border-color:var(--k);color:var(--k)}
.p-sec{scroll-margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:36px 0;border-top:1px solid var(--line)}
.p-sec h2,.p-sec h3{font-size:30px;letter-spacing:-.035em;line-height:1.05;margin:10px 0 12px;font-weight:600}
.p-txt p{font-size:15.5px;line-height:1.6;color:var(--mute);margin:0 0 16px}
.p-ck{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}.p-ck li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45}.p-ck li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;background:var(--k)}
.p-more{display:inline-block;font:500 12px "JetBrains Mono",monospace;color:var(--k);border-bottom:1px solid currentColor;padding-bottom:2px}
.p-vc{background:#fafafa;border:1px solid var(--line);border-radius:22px;padding:22px 20px;position:relative;min-width:0}
.p-vt{font:500 11px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:16px;padding-right:96px}
.p-ill{position:absolute;top:18px;right:16px;font-size:9px;letter-spacing:.08em;color:#aaa;border:1px solid var(--line);border-radius:99px;padding:3px 8px;background:#fff}
.p-note{font-size:12px;color:var(--mute);margin:14px 0 0}
.p-hb>div{display:grid;grid-template-columns:86px 1fr auto;gap:10px;align-items:center;margin:12px 0;font:12px "JetBrains Mono",monospace}
.p-hb i{display:block;height:22px;width:var(--w);background:var(--k);border-radius:3px}.p-hb b{font-weight:500;min-width:44px;text-align:right}
.p-ln{display:block;width:100%;height:auto}
.p-vb{display:flex;gap:10px;height:170px}.p-vb>div{flex:1;display:flex;flex-direction:column}.p-vb em{display:flex;align-items:flex-end;flex:1}.p-vb i{display:block;width:100%;background:#d9d9d9;border-radius:6px 6px 0 0}.p-vb i.hi{background:var(--k)}.p-vb span{font:10px "JetBrains Mono",monospace;text-align:center;margin-top:8px;color:var(--mute)}
.p-dn{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:14px}.p-dn svg{width:130px;height:130px}.p-dn ul{list-style:none;margin:0;padding:0;font:12px "JetBrains Mono",monospace;display:grid;gap:8px}.p-dn li i{display:inline-block;width:9px;height:9px;margin-right:8px}.p-dn li b{margin-left:10px;font-weight:500}
.p-cb{display:grid;gap:10px}.p-cb p{margin:0;max-width:82%;padding:11px 15px;border-radius:18px;font-size:13.5px;line-height:1.4}
.p-cb .u{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}.p-cb .a{background:var(--k);color:#fff;justify-self:end;border-bottom-right-radius:5px}
.p-art{display:grid;gap:12px}.p-art>div{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px}.p-art span{display:block;font-size:12px;letter-spacing:.08em;color:var(--mute);margin-bottom:10px}.p-art i{display:block;height:9px;background:#e6e6e6;border-radius:3px;margin-top:7px}.p-art u{position:absolute;top:12px;right:14px;text-decoration:none;font-size:9px;color:#fff;background:var(--k);padding:3px 7px;border-radius:99px}
.p-scr{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.p-scr>div{position:relative;aspect-ratio:16/10;border:1.5px solid #0a0a0a;border-radius:6px;background:#fff}.p-scr .live{background:var(--k);border-color:var(--k)}.p-scr u{position:absolute;left:6px;bottom:4px;font-size:8px;color:#fff;text-decoration:none}
.p-sch{display:grid;grid-template-columns:repeat(24,1fr);gap:2px}.p-sch i{height:16px;background:#e3e3e3;border-radius:2px}.p-sch i.on{background:var(--k)}.p-sl{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-top:6px}
.p-trio{display:grid;gap:14px}.p-trio>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.p-trio small{font-size:12px;letter-spacing:.1em;color:var(--k)}.p-trio p{margin:12px 0 0;font-size:12px;color:var(--mute)}
.p-trio ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}.p-trio li{display:flex;gap:10px;align-items:center}.p-trio li b{font:500 12px "JetBrains Mono",monospace;width:16px}.p-trio li i{display:block;height:10px;flex:1;background:#e6e6e6;border-radius:3px}.p-trio li.me i{background:var(--k)}
.p-trio .ans{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px}.p-trio .ans i{display:block;height:8px;background:#e6e6e6;border-radius:3px;margin-bottom:7px}.p-trio .ans i.s{width:55%}.p-trio .ans span{display:inline-block;margin:4px 6px 0 0;font-size:12px;padding:3px 8px;border-radius:99px;background:#f1f1f1}.p-trio .ans.g{background:linear-gradient(135deg,rgba(31,92,139,.08),rgba(58,125,34,.08))}
.p-heat{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px}.p-heat i{aspect-ratio:1;background:var(--k);border-radius:2px}
.p-scrub{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12px}.p-scrub>div{position:relative;flex:1;height:6px;background:#e3e3e3;border-radius:9px}.p-scrub u{position:absolute;left:0;top:0;bottom:0;width:46%;background:var(--fg);border-radius:9px}.p-scrub em{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--k);border:2px solid #fff;z-index:1}.p-scrub b{font-weight:400;font-size:11px;color:var(--mute)}
.p-ab{display:grid;grid-template-columns:1fr 1fr;gap:12px}.p-ab>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.p-ab>div.w{border-color:var(--k)}.p-ab span{font-size:12px;letter-spacing:.06em;color:var(--mute);display:block}.p-ab s{text-decoration:none;background:var(--k);color:#fff;padding:2px 6px;border-radius:99px;font-size:8px;margin-left:4px}.p-ab b{display:block;font-size:34px;letter-spacing:-.04em;margin:8px 0 12px;font-weight:600}.p-ab i{display:block;height:6px;border-radius:9px;background:#9a9a9a;width:var(--w)}.p-ab .w i{background:var(--k)}
.p-lp{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:6px}.p-lp .nv{height:8px;width:40%;background:#e6e6e6;border-radius:3px;margin-bottom:12px}.p-lp .h i{display:block;height:14px;width:70%;background:#d9d9d9;border-radius:3px;margin-bottom:8px}.p-lp .h i.s{height:8px;width:50%}.p-lp .h u{display:block;height:24px;width:90px;background:var(--k);border-radius:99px;margin:10px 0 14px}.p-lp .f{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.p-lp .f i{display:block;height:36px;background:#efefef;border-radius:6px}
.p-lp span{position:absolute;font-size:9px;background:var(--fg);color:#fff;padding:2px 7px;border-radius:99px}.p-lp .a1{top:30px;right:12px}.p-lp .a2{bottom:12px;right:12px}.p-lp .a3{top:6px;right:12px;background:var(--k)}
.p-fl{display:grid;gap:8px;align-items:center}.p-fl>div{display:grid;gap:8px}.p-fl em{font-style:normal;font-size:13px;padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:center}.p-fl>span{text-align:center;color:var(--k);font-size:20px;transform:rotate(90deg)}
.p-st{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}.p-st li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:14px}.p-st b{width:26px;height:26px;border-radius:50%;background:var(--k);color:#fff;display:grid;place-items:center;font:500 12px "JetBrains Mono",monospace}
.p-chips{display:flex;flex-wrap:wrap;gap:8px}.p-chips span{font-size:12px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:#fff}
.p-q{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13.5px;margin-bottom:18px;display:flex;gap:10px;align-items:center}.p-q span{font-size:12px;color:#fff;background:var(--k);border-radius:99px;padding:3px 8px;flex:none}
.p-sq{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:grid;gap:18px}.p-sq::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:#d9d9d9}.p-sq li{position:relative}.p-sq li::before{content:"";position:absolute;left:-22px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--k);border:2px solid #fafafa;box-sizing:content-box;margin-left:-1px}.p-sq b{display:block;font:500 11px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--k)}.p-sq span{font-size:14px}
.p-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}.p-kpis>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}.p-kpis small{display:block;font-size:9px;letter-spacing:.08em;color:var(--mute)}.p-kpis b{display:block;font-size:20px;letter-spacing:-.03em;margin:4px 0 2px;font-weight:600}.p-kpis em{font:normal 500 11px "JetBrains Mono",monospace;color:var(--k)}
.p-next{max-width:1280px;margin:0 auto;padding:30px 20px 80px;display:grid;gap:16px}
.p-nx,.p-cta{border-radius:22px;padding:26px;display:block}.p-nx{border:1px solid var(--line);transition:.25s}.p-nx:hover{border-color:var(--k);transform:translateY(-3px)}
.p-nx small{font:500 12px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--k)}.p-nx strong{display:block;font-size:34px;letter-spacing:-.04em;margin:8px 0 6px;line-height:1}.p-nx span{color:var(--mute);font-size:14.5px}.p-nx i{display:block;margin-top:18px;font-style:normal;font-size:22px}
.p-cta{background:#0a0a0a;color:#fff}.p-cta h3{font-size:30px;letter-spacing:-.04em;line-height:1.05;margin:0 0 18px;font-weight:600}
@media(min-width:901px){
 .p-hi{flex-direction:row;align-items:center;justify-content:space-between;padding:64px 28px 72px;gap:40px}.p-ht{max-width:680px}
 .p-hero h1{font-size:clamp(56px,7vw,100px)}.p-hv{max-width:360px;margin:0}
 .p-sub{top:calc(68px + env(safe-area-inset-top,0px))}.p-subi{padding:12px 28px}
 .p-secs{padding:0 28px 30px}.p-grp{padding:90px 0 30px}
 .p-sec{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;padding:64px 0}.p-sec:nth-of-type(even) .p-viz{order:-1}
 .p-sec h2,.p-sec h3{font-size:clamp(30px,3vw,42px)}.p-txt p{font-size:16.5px}.p-vc{padding:28px}
 .p-trio{grid-template-columns:repeat(3,1fr)}
 .p-fl{grid-template-columns:1fr auto 1fr auto 1fr}.p-fl>span{transform:none}
 .p-st{grid-template-columns:repeat(4,1fr)}.p-st li{flex-direction:column;align-items:flex-start;padding:16px}
 .p-next{grid-template-columns:1fr 1fr;padding:30px 28px 100px}.p-nx,.p-cta{padding:36px}.p-nx strong{font-size:48px}.p-cta h3{font-size:38px}
}

/* ===== realistic mockups ===== */
.tb{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.p-tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}.p-tabs::-webkit-scrollbar{display:none}
.p-tabs label{flex:0 0 auto;padding:7px 13px;border:1px solid var(--line);border-radius:99px;font:500 11px "JetBrains Mono",monospace;background:#fff;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.p-pane{display:none}
.tb:nth-of-type(1):checked~.p-panes>.p-pane:nth-child(1),.tb:nth-of-type(2):checked~.p-panes>.p-pane:nth-child(2),.tb:nth-of-type(3):checked~.p-panes>.p-pane:nth-child(3){display:block}
.tb:nth-of-type(1):checked~.p-tabs label:nth-child(1),.tb:nth-of-type(2):checked~.p-tabs label:nth-child(2),.tb:nth-of-type(3):checked~.p-tabs label:nth-child(3){background:var(--fg);color:#fff;border-color:var(--fg)}
.sk i{display:block;height:8px;background:#e6e6e6;border-radius:3px;margin-top:7px}.sk i.s{width:55%}
.m-win{background:#fff;border:1px solid #d9d9d9;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(0,0,0,.35);min-width:0}
.m-wb{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#f1f1f1;border-bottom:1px solid #e3e3e3}.m-wb i{width:8px;height:8px;border-radius:50%;background:#cfcfcf;flex:none}
.m-wb span{flex:1;min-width:0;margin-left:8px;background:#fff;border-radius:99px;padding:3px 10px;font-size:10px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-wbody{padding:14px;position:relative}
.m-phone{width:100%;max-width:240px;margin:0 auto;border:2px solid #0a0a0a;border-radius:30px;padding:9px;background:#fff}
.m-phone::before{content:"";display:block;width:54px;height:5px;border-radius:9px;background:#0a0a0a;margin:2px auto 8px}
.m-scr{border-radius:20px;overflow:hidden;background:#f2f2f2;display:flex;flex-direction:column;min-height:400px;font-size:11px;position:relative}
.m-bar{padding:9px 12px;background:#fff;border-bottom:1px solid #e5e5e5;font-size:10px;color:#777}
.m-post{background:#fff;margin-bottom:6px;padding:10px}
.m-ph{display:flex;gap:8px;align-items:center;margin-bottom:8px}.m-ph strong{display:block;font-size:11px}.m-ph small{font-size:9px;color:#888}
.m-av{width:26px;height:26px;border-radius:50%;background:#d9d9d9;flex:none;display:block}.m-av.k{background:var(--k)}.m-av.w{background:rgba(255,255,255,.85)}
.m-cap{margin:0 0 8px;font-size:11px;line-height:1.4;color:#222}
.m-img{aspect-ratio:16/10;border-radius:8px;background:radial-gradient(circle at 72% 32%,rgba(255,255,255,.55) 0 13%,transparent 14%),linear-gradient(135deg,var(--k),#222)}
.m-link{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#f3f3f3;padding:8px 10px;border-radius:0 0 8px 8px}.m-link small{display:block;font-size:9px;color:#888}.m-link strong{font-size:11px}.m-link u{text-decoration:none;font-weight:600;font-size:10px;padding:6px 10px;background:#e1e1e1;border-radius:6px;white-space:nowrap}
.m-react{display:flex;justify-content:space-around;padding-top:9px;font-size:9px;color:#777}
.vid{background:linear-gradient(160deg,#2b2b33,#0a0a0a 70%);color:#fff;min-height:430px}
.vid::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 35%,rgba(255,255,255,.18),transparent 45%);pointer-events:none}
.m-top2{display:flex;justify-content:center;gap:14px;padding:12px;font-size:10px;opacity:.9;position:relative;z-index:1}.m-top2 b{border-bottom:2px solid #fff;padding-bottom:3px}
.m-rail{position:absolute;right:8px;bottom:104px;display:grid;gap:10px;justify-items:center;z-index:1}.m-rail i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9)}.m-rail small{font-size:9px;margin-top:-6px}
.m-vcap{position:absolute;left:10px;right:56px;bottom:12px;z-index:1}.m-vcap strong{font-size:12px}.m-vcap p{margin:6px 0;font-size:11px;line-height:1.35}.m-vcap div{font-size:9px;opacity:.8}.m-vcap u{display:block;text-align:center;text-decoration:none;background:var(--k);padding:9px;border-radius:6px;font-weight:600;margin-top:10px}
.m-spons{font-size:9px;background:rgba(255,255,255,.22);padding:2px 7px;border-radius:99px;margin-left:6px}
.m-chh{display:flex;gap:8px;align-items:center;padding:10px;color:#fff}.m-chh strong{font-size:11px;display:block}.m-chh small{font-size:9px;opacity:.9}
.m-msgs{padding:12px;display:grid;gap:8px;align-content:start;flex:1;background:#eef1f5}
.m-msgs p{margin:0;padding:8px 11px;border-radius:12px;font-size:11px;line-height:1.35;max-width:88%;background:#fff}.m-msgs p.u{justify-self:end;background:#d9ecd0}
.m-msgs .btnx{display:inline-block;justify-self:start;font-size:10px;font-weight:600;padding:7px 12px;border-radius:99px;background:var(--k);color:#fff;margin-top:4px}
.m-sq{border:1px solid #ddd;border-radius:99px;padding:7px 14px;font-size:12px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.m-tabs2{display:flex;gap:14px;font-size:10px;color:#777;margin-bottom:12px;border-bottom:1px solid #eee;padding-bottom:6px}.m-tabs2 b{color:#0a0a0a;border-bottom:2px solid #0a0a0a;padding-bottom:6px;margin-bottom:-7px}
.m-res{margin-bottom:14px}.m-res small{display:block;font-size:10px;color:#666;margin-bottom:2px}.m-res small b{border:1px solid #333;border-radius:3px;padding:0 4px;margin-right:6px;font-size:9px;color:#111}
.m-res a{display:block;color:#1a4fb4;font-size:15px;line-height:1.25;font-weight:500}.m-res p{margin:4px 0 0;font-size:12px;line-height:1.4;color:#555}
.m-res.ad{padding:10px;border-radius:10px;background:#f7f9fe;border:1px solid #e1e8f7}.m-res.top{padding:10px;border-radius:10px;background:#fff7f2;border:1px solid #f0dccf}.m-res.top::before{content:"#1";display:inline-block;font:600 10px "JetBrains Mono",monospace;color:#fff;background:var(--k);border-radius:99px;padding:2px 8px;margin-bottom:6px}
.m-sl{display:flex;gap:10px;margin-top:8px;font-size:11px;color:#1a4fb4;flex-wrap:wrap}
.m-snip{border:1px solid #e0e0e0;border-radius:12px;padding:14px;margin-bottom:12px}.m-snip small{font-size:10px;color:var(--k);letter-spacing:.08em;display:block;margin-bottom:6px}.m-snip p{margin:0 0 8px;font-size:13px;line-height:1.5}.m-snip ol{margin:0 0 8px;padding-left:18px;font-size:12px;line-height:1.6}.m-snip small:last-child{color:#666;letter-spacing:0;margin:0}
.m-paa span{display:block;padding:10px 12px;border:1px solid #e0e0e0;border-radius:8px;font-size:12px;margin-bottom:6px}.m-paa span::after{content:"+";float:right}
.m-ai{background:linear-gradient(135deg,rgba(31,92,139,.09),rgba(58,125,34,.09));border:1px solid #dbe5ee;border-radius:14px;padding:16px}.m-ai small{font-size:10px;letter-spacing:.08em;color:var(--c2);display:block;margin-bottom:8px}.m-ai p{margin:0 0 12px;font-size:13.5px;line-height:1.55}.m-ai sup{font-size:9px;color:var(--c2);font-weight:600}
.m-src{display:flex;gap:8px;flex-wrap:wrap}.m-src span{background:#fff;border:1px solid #dbe5ee;border-radius:99px;padding:5px 11px;font-size:10px;color:#555}.m-src b{color:var(--c2);margin-right:4px}
.m-news{background:#fbfaf7;border:1px solid #d9d4c7;border-radius:6px;padding:14px;font-family:Georgia,"Times New Roman",serif;color:#1a1a1a;box-shadow:0 18px 40px -26px rgba(0,0,0,.3)}
.m-news .mast{text-align:center;border-bottom:3px double #1a1a1a;padding-bottom:8px}.m-news .mast small{display:block;font-size:9px;letter-spacing:.1em;color:#777}.m-news .mast strong{display:block;font-size:30px;letter-spacing:.05em;line-height:1.15}.m-news .sec{display:flex;justify-content:center;gap:14px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;color:#555;font-family:"JetBrains Mono",monospace}
.m-news .nb{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:12px}.m-news .tag2{font-size:9px;letter-spacing:.1em;color:var(--k);font-family:"JetBrains Mono",monospace}.m-news h4{font-size:20px;line-height:1.15;margin:6px 0;font-weight:700}.m-news .by{font-size:10px;color:#777;margin:0 0 8px;font-style:italic}.m-news .cap{display:block;font-size:9px;color:#777;margin:4px 0 8px;font-style:italic}
.m-news .cols{columns:2;column-gap:12px}.m-news .cols i{display:block;height:6px;background:#d8d4c8;margin-bottom:6px;border-radius:2px;break-inside:avoid}.m-news aside{border-left:1px solid #d9d4c7;padding-left:12px}.m-news aside b{font-size:11px;display:block;margin-bottom:8px}.m-news aside i{display:block;height:6px;background:#d8d4c8;margin-bottom:6px}
.p-scene{display:block;width:100%;height:auto}
.sitewf{position:relative}.sitewf .nv{display:flex;gap:8px;align-items:center;margin-bottom:12px}.sitewf .nv b{width:34px;height:10px;background:#0a0a0a;border-radius:3px}.sitewf .nv span{width:26px;height:6px;background:#ddd;border-radius:3px}.sitewf .nv u{margin-left:auto;width:42px;height:14px;background:#0a0a0a;border-radius:99px}
.sitewf .hero{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;align-items:center}.sitewf .h{display:block;height:13px;background:#222;border-radius:3px;margin-bottom:6px}.sitewf .h.s{width:70%}.sitewf .p{display:block;height:6px;background:#ddd;border-radius:3px;margin-bottom:5px}.sitewf .p.s{width:60%}
.sitewf .cta{display:block;width:86px;height:22px;border-radius:99px;background:#9a9a9a;margin-top:10px}.sitewf .cta.k,.sitewf.b .cta{background:var(--k)}.sitewf.b .cta{width:110px;height:26px}
.sitewf .img{aspect-ratio:1;border-radius:10px;background:#e8e8e8}.sitewf.b .img{background:linear-gradient(135deg,var(--k),#222)}
.sitewf .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.sitewf .cards i{display:block;aspect-ratio:4/3;background:#efefef;border-radius:8px}
.sitewf .trust{display:block;font-size:9px;color:#555;margin-top:8px}.sitewf .logos{display:flex;gap:10px;margin-top:12px}.sitewf .logos i{flex:1;height:14px;background:#e3e3e3;border-radius:3px}
.sitewf .seg{display:block;font-size:9px;letter-spacing:.06em;color:var(--k);margin-bottom:10px}.sitewf .offer{margin:12px 0 0;padding:9px 11px;border-radius:10px;background:#f3f3f3;font-size:11px;font-weight:600}
.hb2{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(224,69,31,.8),rgba(240,160,48,.35) 45%,transparent 70%);transform:translate(-50%,-50%);pointer-events:none}
.scrolld{position:absolute;right:5px;top:14px;bottom:14px;width:7px;border-radius:9px;background:linear-gradient(#e0451f,#f0a030 40%,#9fc4e8 75%,#e8eef5)}
.p-cur{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pin{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--k);color:#fff;font:600 11px "JetBrains Mono",monospace;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transform:translate(-50%,-50%);font-style:normal}
.p-2c{display:grid;grid-template-columns:1fr 1fr;gap:12px}.p-2c>div{min-width:0}
.ab2{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:12px}.ab2.w{border-color:var(--k)}.ab2 span{font-size:9px;letter-spacing:.06em;color:var(--mute)}.ab2 s{text-decoration:none;background:var(--k);color:#fff;padding:2px 6px;border-radius:99px;font-size:8px;margin-left:3px}.ab2 b{font-size:22px;letter-spacing:-.03em}
.p-find{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}.p-find li{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px}.p-find li em{width:20px;height:20px;border-radius:50%;background:var(--k);color:#fff;font:600 10px "JetBrains Mono",monospace;display:grid;place-items:center;flex:none;font-style:normal}.p-find li span{flex:1}.p-find b{font:500 10px "JetBrains Mono",monospace;padding:3px 8px;border-radius:99px}.p-find .hi{background:#fde4df;color:#b3261e}.p-find .md{background:#fdf0d5;color:#9a6a00}.p-find .lo{background:#e6f1e6;color:#2d6a2d}
.p-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11px;margin:12px 0}.p-leg b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--k);color:#fff;font-size:10px;margin-right:6px}
.m-widget{position:absolute;right:10px;bottom:10px;width:68%;background:#fff;border:1px solid #d9d9d9;border-radius:14px;box-shadow:0 16px 34px -14px rgba(0,0,0,.45);overflow:hidden;z-index:2}.m-widget .wh{display:flex;gap:8px;align-items:center;padding:10px;color:#fff}.m-widget .wh strong{display:block;font-size:11px}.m-widget .wh small{font-size:9px;opacity:.9}
.m-widget .m-msgs{padding:10px}.m-widget .qr{display:flex;gap:6px;flex-wrap:wrap}.m-widget .qr span{font-size:10px;border:1px solid var(--k);color:var(--k);border-radius:99px;padding:5px 9px;background:#fff}.m-widget .wi{padding:9px 12px;border-top:1px solid #eee;font-size:10px;color:#999}
.m-win.tall .m-wbody{min-height:400px}
.p-co{display:grid;gap:10px}.p-co .brief,.p-co .outs>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.p-co small{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.06em;color:var(--mute);margin-bottom:6px}.p-co small b{font-weight:500;color:var(--k)}.p-co small b.rv{color:#9a6a00}.p-co strong{display:block;font-size:14px;line-height:1.3}.p-co .arw{text-align:center;color:var(--k);font-size:20px}.p-co .outs{display:grid;gap:10px}.p-co .outs p{margin:8px 0 0;font-size:12px}.p-co .brief .p-chips{margin-top:10px}
.m-chat{display:grid;gap:12px}.m-chat>p{margin:0;justify-self:end;max-width:85%;background:#fff;border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:11px 14px;font-size:13px}.m-chat .a{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}.m-chat .a>p{margin:0 0 14px;font-size:13px;line-height:1.5}.m-chat .a .p-vb{height:130px}.m-chat .a .p-chips{margin-top:12px}
.p-kb{display:grid;grid-template-columns:repeat(4,minmax(92px,1fr));gap:8px;overflow-x:auto}.p-kb>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:150px}.p-kb small{display:block;font-size:10px;letter-spacing:.06em;color:var(--k);margin-bottom:8px}.p-kb p{margin:0 0 8px;padding:8px;background:#f4f4f4;border-radius:8px;font-size:12px}.p-kb p b{display:block}.p-kb p span{font-size:9px;color:var(--mute)}
.dh{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}.dh strong{font-size:14px}.dh span{font-size:10px;color:var(--mute);background:#f3f3f3;border-radius:99px;padding:4px 10px}
.m-win .p-kpis>div{background:#fafafa}.m-win .p-vb{height:130px}.m-win .p-dn{margin-top:4px}
.p-tbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:14px}.p-tbl th{text-align:left;font:500 10px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--mute);padding:6px 4px;border-bottom:1px solid var(--line)}.p-tbl td{padding:8px 4px;border-bottom:1px solid #f0f0f0}.p-tbl td:not(:first-child){font-family:"JetBrains Mono",monospace;font-size:11px}
.p-trk{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}.p-trk div{text-align:center;font-size:10px;color:var(--mute)}.p-trk b{display:block;font-size:16px;color:var(--fg);margin-bottom:4px}.p-trk i{display:block;height:5px;border-radius:9px;background:var(--k);margin-bottom:6px}
.p-row{display:grid;gap:16px}
@media(max-width:560px){.m-news .nb{grid-template-columns:1fr}.m-news aside{display:none}.m-news h4{font-size:18px}.m-wbody{padding:10px}.sitewf .nv span{display:none}.m-widget{width:78%}.p-2c .m-wb span{display:none}}
@media(min-width:901px){.p-row{grid-template-columns:1fr 1fr;align-items:start}.p-co{grid-template-columns:1fr}}
.p-co .m-img{aspect-ratio:16/6}
@media(min-width:901px){.p-co .outs{grid-template-columns:repeat(3,1fr)}.p-co .outs>div{padding:12px}.p-co .outs strong{font-size:13px}}

/* ===== about + blog ===== */
.a-sec{max-width:1280px;margin:0 auto;padding:60px 20px}
.a-mis{font-size:clamp(28px,4.4vw,58px);line-height:1.08;letter-spacing:-.04em;font-weight:600;max-width:1000px;margin:18px 0 22px}.a-mis em{font-style:normal;color:transparent;-webkit-text-stroke:1.3px var(--fg)}
.a-cols{display:grid;gap:16px;max-width:900px}.a-cols p{margin:0;color:var(--mute);font-size:16px;line-height:1.65}
.a-ap{display:grid;gap:14px;margin-top:24px}.a-ap a{display:block;border:1px solid var(--line);border-radius:22px;padding:26px;transition:.25s}.a-ap a:hover{border-color:var(--k);transform:translateY(-3px)}
.a-ap small{font:500 12px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--k)}.a-ap strong{display:block;font-size:30px;letter-spacing:-.04em;margin:8px 0;line-height:1.05}.a-ap span{color:var(--mute);font-size:14.5px;line-height:1.5}.a-ap i{display:block;margin-top:16px;font-style:normal;font-size:22px;color:var(--k)}
.a-pr{margin-top:24px;border-top:1px solid var(--line)}.a-pr>div{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}.a-pr b{font:500 12px "JetBrains Mono",monospace;color:var(--mute);padding-top:5px}.a-pr strong{display:block;font-size:22px;letter-spacing:-.025em}.a-pr p{margin:6px 0 0;color:var(--mute);font-size:15px;line-height:1.55;max-width:560px}
.a-lab{background:#0a0a0a;color:#fff}.a-lab .tag{color:#aaa;border-color:#333}.a-lab .tag::before{background:#fff}.a-lab h2{font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.045em;margin:20px 0 24px;font-weight:600}.a-lab .p-chips span{background:transparent;color:#ddd;border-color:#444}
.a-h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em;line-height:1.05;margin:18px 0 0;font-weight:600}
.a-team{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}.a-team>div{border:1px solid var(--line);border-radius:20px;padding:20px 12px;text-align:center}.a-team i{display:block;width:72px;height:72px;border-radius:50%;background:#efefef;margin:0 auto 12px;border:1px solid var(--line)}.a-team strong{display:block;font-size:15px}.a-team span{font-size:12px;color:var(--mute)}
.a-visit{display:grid;gap:26px;margin-top:20px}.a-map{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}.a-map i{aspect-ratio:1;background:#f1f1f1;display:block}.a-map i.on{background:#d4d4d4}.a-map i.pin2{background:var(--c1);box-shadow:0 0 0 4px rgba(194,83,27,.25)}
.a-addr strong{font-size:20px;letter-spacing:-.02em}.a-addr p{margin:8px 0 14px;color:var(--mute);line-height:1.6}.a-addr a:not(.btn){display:block;padding:3px 0;font-size:15px}.a-addr a:not(.btn):hover{text-decoration:underline}
.b-hero{max-width:1280px;margin:0 auto;padding:36px 20px 6px}.b-hero h1{font-size:46px;line-height:1;letter-spacing:-.05em;font-weight:600;margin:18px 0 14px}
.b-note{font-size:12px;letter-spacing:.06em;color:#9a9a9a;margin:0}
.b-wrap{position:relative}.bfi{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.b-fl{display:flex;gap:8px;overflow-x:auto;padding:18px 20px;max-width:1280px;margin:0 auto;scrollbar-width:none}.b-fl::-webkit-scrollbar{display:none}
.b-fl label{flex:0 0 auto;padding:9px 16px;border:1px solid var(--line);border-radius:99px;font:500 12px "JetBrains Mono",monospace;cursor:pointer;white-space:nowrap}
#bf-all:checked~.b-fl label[for=bf-all],#bf-dm:checked~.b-fl label[for=bf-dm],#bf-cro:checked~.b-fl label[for=bf-cro],#bf-ai:checked~.b-fl label[for=bf-ai],#bf-au:checked~.b-fl label[for=bf-au]{background:var(--fg);color:#fff;border-color:var(--fg)}
#bf-dm:checked~.b-grid .b-c:not([data-c=dm]),#bf-cro:checked~.b-grid .b-c:not([data-c=cro]),#bf-ai:checked~.b-grid .b-c:not([data-c=ai]),#bf-au:checked~.b-grid .b-c:not([data-c=au]){display:none}
.b-grid{max-width:1280px;margin:0 auto;padding:6px 20px 70px;display:grid;gap:16px}
.b-c{display:block;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;transition:.25s}.b-c:hover{transform:translateY(-4px);border-color:var(--k)}
.b-c .th{display:block;border-bottom:1px solid var(--line)}.b-c .th svg{display:block;width:100%;height:auto}.b-c .bd{display:block;padding:20px}.b-c .cat{display:block;font:500 12px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--k)}.b-c h3{font-size:21px;letter-spacing:-.03em;line-height:1.2;margin:8px 0 10px}.b-c p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--mute)}.b-c .mt{display:block;font:12px "JetBrains Mono",monospace;color:var(--mute)}
.b-post{max-width:760px;margin:0 auto;padding:30px 20px 40px}.b-post h1{font-size:36px;line-height:1.05;letter-spacing:-.045em;font-weight:600;margin:18px 0 16px}.b-post h2{font-size:24px;letter-spacing:-.03em;margin:34px 0 10px}.b-post p{font-size:16.5px;line-height:1.7;color:#333;margin:0 0 14px}.b-post .lead{color:var(--mute)}
.b-hero-img{border:1px solid var(--line);border-radius:22px;overflow:hidden;margin:26px 0}.b-hero-img svg{display:block;width:100%;height:auto}
.b-call{border-left:3px solid var(--k);background:#f7f9fc;padding:16px 20px;border-radius:0 14px 14px 0;margin:24px 0}.b-call strong{font:500 12px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--k)}.b-call p{margin:6px 0 0}
.b-end{margin-top:40px;padding:26px;border-radius:22px;background:#0a0a0a;color:#fff}.b-end p{color:#fff;font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0 0 16px}.b-end .btn{background:#fff;color:var(--fg);border-color:#fff}
.b-side{max-width:760px;margin:0 auto;padding:0 20px 80px}.b-side h3{font-size:12px;letter-spacing:.08em;color:var(--mute);margin:0 0 12px}.b-side a{display:block;padding:14px 0;border-top:1px solid var(--line)}.b-side small{display:block;font-size:12px;letter-spacing:.08em;color:var(--mute);margin-bottom:4px}.b-side span{font-size:16px;font-weight:500;line-height:1.3}.b-all{font:500 12px "JetBrains Mono",monospace;color:var(--fg)}
@media(min-width:901px){
 .a-sec{padding:100px 28px}.a-cols{grid-template-columns:1fr 1fr;gap:40px}.a-ap{grid-template-columns:repeat(3,1fr)}.a-pr>div{grid-template-columns:80px 1fr;padding:28px 0}.a-pr strong{font-size:26px}
 .a-team{grid-template-columns:repeat(4,1fr)}.a-visit{grid-template-columns:1.3fr 1fr;align-items:center;gap:60px}
 .b-hero{padding:64px 28px 10px}.b-hero h1{font-size:clamp(56px,7vw,100px)}.b-fl{padding:24px 28px}.b-grid{grid-template-columns:repeat(3,1fr);padding:10px 28px 100px;gap:20px}
 .b-c.w{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr}.b-c.w .th{border-bottom:0;border-right:1px solid var(--line)}.b-c.w .th svg{height:100%;object-fit:cover}.b-c.w .bd{padding:36px;align-self:center}.b-c.w h3{font-size:32px}
 .b-post h1{font-size:54px}.b-post{padding-top:50px}
}



/* keyboard focus */
:focus-visible{outline:2px solid var(--c2);outline-offset:3px}
footer :focus-visible{outline-color:#fff}
.chk:focus-visible+.burger,.chk:focus-visible+.svb{outline:2px solid var(--c2);outline-offset:3px}
@media(min-width:901px){#mt{display:none}}
/* language switcher (EN / VI) */
.lang{display:flex;align-items:center;margin:0 10px 0 auto;border:1px solid var(--line);border-radius:99px;padding:3px;font:500 12px "JetBrains Mono",monospace}
.lang a{min-width:36px;min-height:36px;display:grid;place-items:center;padding:0 8px;border-radius:99px;color:var(--mute)}
.lang a[aria-current]{background:var(--fg);color:#fff}
.lang a:not([aria-current]):hover{color:var(--fg)}
@media(min-width:901px){nav{margin-left:auto}.lang{order:3;margin:0 0 0 14px}}

/* refinement pass — small details to remove template tells, layout unchanged */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.stats b,.cd big,.mono{font-variant-numeric:tabular-nums}
/* emphasised words: solid two-tone instead of outlined text */
.big em,.tw h1 em,.a-mis em{color:var(--mute);-webkit-text-stroke:0}
/* footer wordmark: tone-on-tone instead of outline */
.wm{color:#151515;-webkit-text-stroke:0}
/* radius system: actions stay pill, information chips are squared */
.tag{padding:0;border:0;border-radius:0}
.chips span,.p-chips span,.p-subi a,.p-chips2 a,.p-ill,.b-fl label,.pl label span{border-radius:4px}
/* depth only where something floats */
.fc,.m-win,.m-news{box-shadow:none}

/* mockup content skin — fictional running-shoe store shown inside the .sitewf browser mockups (EN + VI via :lang) */
.sitewf{--shoe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M5 33c0-7 6-11 13-11l17-1c5-5 10-10 17-10h6c2 6 7 10 15 12l14 4c6 2 8 6 8 10v3H5z' fill='%23111110'/%3E%3Cpath d='M5 40h90v3c0 2-2 3-4 3H9c-2 0-4-1-4-3z' fill='%23c2531b'/%3E%3Cpath d='M44 18l5 6M50 14l5 6M56 12l4 6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");font-family:"Space Grotesk",system-ui,sans-serif}
.sitewf .nv b{width:auto;height:auto;background:none;border-radius:0;font:700 9px/1 "Space Grotesk",sans-serif;letter-spacing:.04em;color:#111}
.sitewf .nv b::before{content:"YOUR BRAND"}
.sitewf .nv u{width:auto;height:auto;padding:3px 8px;font:500 8px/1.2 "Space Grotesk",sans-serif;color:#fff;text-decoration:none}
.sitewf .nv u::before{content:"Cart · 2"}
.sitewf .h{height:auto;width:auto;background:none;border-radius:0;margin:0;font:700 clamp(13px,1.35vw,17px)/1.08 "Space Grotesk",sans-serif;letter-spacing:-.035em;color:#111}
.sitewf .h::before{content:"Run lighter."}
.sitewf .h.s{width:auto;margin-bottom:6px}
.sitewf .h.s::before{content:"Go further."}
.sitewf .p{height:auto;width:auto;background:none;border-radius:0;margin:0;font:400 8.5px/1.45 "Space Grotesk",sans-serif;color:#6b6b6b}
.sitewf .p::before{content:"Trail Runner 2: 230 g, cushioned for long runs."}
.sitewf .p.s{width:auto}
.sitewf .p.s::before{content:"Free delivery in 2 days."}
.sitewf .cta{display:grid;place-items:center;width:auto;height:auto;padding:6px 12px;justify-self:start;font:600 8.5px/1 "Space Grotesk",sans-serif;color:#fff;text-decoration:none;background:#0a0a0a}
.sitewf .hero>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.sitewf .cta::before{content:"Shop now"}
.sitewf.b .cta{width:auto;height:auto;padding:8px 14px;font-size:9.5px}
.sitewf.b .cta::before{content:"Get yours, free returns"}
.sitewf .img{position:relative;background:var(--shoe) 50% 58%/78% auto no-repeat,linear-gradient(160deg,#efebe4,#ddd6ca)}
.sitewf.b .img{background:var(--shoe) 50% 58%/78% auto no-repeat,linear-gradient(160deg,#f4ede4,var(--k))}
.sitewf .img::after{content:"$89";position:absolute;top:7px;left:7px;padding:2px 6px;border-radius:3px;background:#fff;font:600 8px/1.3 "Space Grotesk",sans-serif;color:#111}
.sitewf .cards i{position:relative;background:var(--shoe) 50% 40%/62% auto no-repeat,#f2f0eb}
.sitewf .cards i:nth-child(2){background:var(--shoe) 50% 40%/62% auto no-repeat,#e9eef2}
.sitewf .cards i:nth-child(3){background:var(--shoe) 50% 40%/62% auto no-repeat,#eef0e8}
.sitewf .cards i::after{position:absolute;left:6px;bottom:4px;font:500 7px/1.2 "Space Grotesk",sans-serif;color:#333}
.sitewf .cards i:nth-child(1)::after{content:"Trail 2 · $89"}
.sitewf .cards i:nth-child(2)::after{content:"Road 5 · $95"}
.sitewf .cards i:nth-child(3)::after{content:"Pace · $79"}
.sitewf .logos i{display:grid;place-items:center;height:14px;background:none;font:700 7px/1 "Space Grotesk",sans-serif;letter-spacing:.08em;color:#a3a3a3}
.sitewf .logos i:nth-child(1)::before{content:"NORTHWIND"}
.sitewf .logos i:nth-child(2)::before{content:"LUMEN"}
.sitewf .logos i:nth-child(3)::before{content:"ORBITA"}
.sitewf .logos i:nth-child(4)::before{content:"KAIZEN"}
:lang(vi) .sitewf .nv b::before{content:"THƯƠNG HIỆU"}
:lang(vi) .sitewf .nv u::before{content:"Giỏ · 2"}
:lang(vi) .sitewf .h::before{content:"Chạy nhẹ hơn."}
:lang(vi) .sitewf .h.s::before{content:"Đi xa hơn."}
:lang(vi) .sitewf .p::before{content:"Trail Runner 2: chỉ 230 g, êm cho chặng dài."}
:lang(vi) .sitewf .p.s::before{content:"Giao miễn phí trong 2 ngày."}
:lang(vi) .sitewf .cta::before{content:"Mua ngay"}
:lang(vi) .sitewf.b .cta::before{content:"Mua ngay, đổi trả miễn phí"}
:lang(vi) .sitewf .img::after{content:"2.190.000 ₫"}
:lang(vi) .sitewf .cards i:nth-child(1)::after{content:"Trail 2 · 2,19 tr"}
:lang(vi) .sitewf .cards i:nth-child(2)::after{content:"Road 5 · 2,39 tr"}
:lang(vi) .sitewf .cards i:nth-child(3)::after{content:"Pace · 1,99 tr"}
.sitewf{container-type:inline-size}
.sitewf .nv b,.sitewf .nv u,.sitewf .cards i::after{white-space:nowrap}
.sitewf .nv span{width:auto;height:auto;background:none;border-radius:0;font:500 7.5px/1 "Space Grotesk",sans-serif;color:#6b6b6b}
.sitewf .nv span:nth-of-type(1)::before{content:"Shop"}
.sitewf .nv span:nth-of-type(2)::before{content:"Sale"}
.sitewf .nv span:nth-of-type(3)::before{content:"Stories"}
:lang(vi) .sitewf .nv span:nth-of-type(1)::before{content:"Sản phẩm"}
:lang(vi) .sitewf .nv span:nth-of-type(2)::before{content:"Ưu đãi"}
:lang(vi) .sitewf .nv span:nth-of-type(3)::before{content:"Blog"}
.sitewf.b .cta::before{content:"Get yours today"}
:lang(vi) .sitewf.b .cta::before{content:"Mua ngay hôm nay"}
/* the audit mockup shows the problems it lists: no prices on product cards */
.p-viz:has(.p-find) .sitewf .cards i::after,.p-viz:has(.p-find) .sitewf .img::after{content:none}
/* small mockups (A/B, personalization, mobile): keep only headline, CTA and product */
@container (max-width:240px){
  .sitewf .nv span,.sitewf .p,.sitewf .img::after,.sitewf .cards i::after{display:none}
  .sitewf .h{font-size:11px}
  .sitewf .cta{padding:5px 9px;font-size:7.5px}
  .sitewf.b .cta{padding:6px 10px;font-size:8px}
  .sitewf .hero{grid-template-columns:1.3fr 1fr;gap:8px}
}
@container (max-width:340px){.sitewf .nv span{display:none}.sitewf .p.s{display:none}}
@container (max-width:240px){.sitewf .h{font-size:10.5px;white-space:nowrap}}

/* buttons & controls: 4px corners instead of full pills (matches chips) */
.btn,nav .cta,.burger,.arr button,.sub2,.lang{border-radius:4px}
.lang a{border-radius:3px}
.fl input,.fl select,.fl textarea{border-radius:4px}

/* cards & panels: 6px corners; inner blocks 4px; browser-window mockups 8px (phones and chat bubbles keep their real-world shape) */
.p-vc,.b-c,.p-nx,.p-cta,.cd,.chart,.fc,.pg,.a-ap a,.a-team>div,.b-hero-img,.b-end,.ok pre{border-radius:6px}
.p-co .brief,.p-co .outs>div,.p-kpis>div,.p-trio>div,.p-art>div,.p-ab>div,.p-lp,.p-heat,.p-q,.p-st li,.p-cb p{border-radius:4px}
.m-win{border-radius:8px}

/* lighthouse pass: contrast + heading order */
.viz[data-a="1"] .tier:not(.t1),.viz[data-a="2"] .tier:not(.t2),.viz[data-a="3"] .tier:not(.t3){opacity:1}
.viz[data-a="1"] .tier:not(.t1) strong,.viz[data-a="2"] .tier:not(.t2) strong,.viz[data-a="3"] .tier:not(.t3) strong{color:var(--mute)}
.tmore{color:color-mix(in srgb,var(--k) 80%,#000)}
.fb{color:#8f8f8f}
.p-ill{font-size:10px;color:#6b6b6b}
.m-wb span{color:#6b6b6b}
.fg h3{margin:0 0 16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#888;font-weight:500}
.wm::before{content:attr(data-t)}

/* motion: scroll reveal (classes set by reveal.js) + cross-page fade (View Transitions, Chrome/Edge/Safari 18+ over http/https) */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.rv.in{opacity:1;transform:none}
@view-transition{navigation:auto}
header#hd{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .18s ease-in both}
::view-transition-new(root){animation:vt-in .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}::view-transition-old(root),::view-transition-new(root){animation:none}}
@media print{.rv{opacity:1;transform:none}}

/* home: page h1 kept for SEO/screen readers but not shown, so the hero stays as the original design */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* mobile hero order so the CTA sits in the first screen */
@media(max-width:900px){
 .sl .btn{order:3;align-self:flex-start;margin:0 0 20px}
 .vs svg{max-width:180px}
 .sl h1,.sl h2{font-size:38px;margin:14px 0 12px}
}
/* home: hero intro — the orbit turns once, then the copy comes in line by line (html.intro is set in <head>, skipped for reduced motion) */
@keyframes in-orb{from{opacity:0;transform:scale(.9)}}
@keyframes in-spin{from{transform:rotate(-360deg)}}
@keyframes in-up{from{opacity:0;transform:translateY(16px)}}
.intro #s1 .vs svg{animation:in-orb .7s cubic-bezier(.2,.7,.2,1) both}
.intro #s1 .spin{transform-box:view-box;transform-origin:50% 50%;animation:in-spin 1.5s cubic-bezier(.45,.05,.2,1) both}
.intro #s1 .tx>*{animation:in-up .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(1.35s + var(--d,0) * 90ms)}
.intro #s1 .tag{--d:0}.intro #s1 h2{--d:1}.intro #s1 .lead{--d:2}.intro #s1 .chips{--d:3}.intro #s1 .btn{--d:4}
.intro .tbs,.intro .arr{animation:in-up .6s cubic-bezier(.2,.7,.2,1) 1.8s both}
/* blog: FAQ (native details/summary; same answers are in FAQPage JSON-LD in <head>) */
.b-faq{margin:44px 0 0;border-bottom:1px solid var(--line)}
.b-faq h2{margin-bottom:14px}
.b-faq details{border-top:1px solid var(--line)}
.b-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.4}
.b-faq summary::-webkit-details-marker{display:none}
.b-faq summary::after{content:"+";flex:none;font:500 18px/1 "JetBrains Mono",monospace;color:var(--k);transition:transform .25s ease}
.b-faq details[open] summary::after{transform:rotate(45deg)}
.b-faq summary:hover{color:var(--k)}
.b-faq details p{margin:-4px 0 20px;max-width:640px}
/* motion: "visual leads, copy follows" — shared by the hero slides, service-page heroes and scroll sections */
@keyframes in-pop{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes in-draw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
/* hero slides 2–3: play when the slide is first shown (.seen from carousel.js) */
.intro .ready #s2:not(.seen) .tx>*,.intro .ready #s3:not(.seen) .tx>*,.intro .ready #s2:not(.seen) .vs,.intro .ready #s3:not(.seen) .vs{opacity:0}
.intro #s2.seen .tx>*,.intro #s3.seen .tx>*{animation:in-up .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(1.05s + var(--d,0) * 90ms)}
.intro .sl .tag{--d:0}.intro .sl h2{--d:1}.intro .sl .lead{--d:2}.intro .sl .chips{--d:3}.intro .sl .btn{--d:4}
.intro #s2.seen .pg{animation:in-pop .55s cubic-bezier(.2,.7,.2,1) both}
.intro #s2.seen .pg>:not(.hm){animation:in-pop .45s cubic-bezier(.2,.7,.2,1) both}
.intro #s2.seen .pg>:nth-child(2){animation-delay:.3s}.intro #s2.seen .pg>:nth-child(3){animation-delay:.4s}.intro #s2.seen .pg>:nth-child(4){animation-delay:.5s}
.intro #s2.seen .pg>:nth-child(5){animation-delay:.6s}.intro #s2.seen .pg>:nth-child(6){animation-delay:.7s}.intro #s2.seen .pg>:nth-child(7){animation-delay:.8s}
.intro #s3.seen .vs svg{animation:in-orb .6s cubic-bezier(.2,.7,.2,1) both}
.intro #s3 .spin{transform-box:view-box;transform-origin:50% 50%}
.intro #s3.seen .spin{animation:in-spin 1.1s cubic-bezier(.45,.05,.2,1) both}
.intro #s3 .pop{transform-box:view-box;transform-origin:50% 50%}
.intro #s3.seen .pop{animation:in-pop .5s cubic-bezier(.2,.7,.2,1) .7s both}
/* service-page heroes: the funnel draws in top to bottom, then the copy */
.intro .p-hv svg{animation:in-draw 1.1s cubic-bezier(.45,.05,.2,1) both}
.intro .p-ht>*{animation:in-up .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.85s + var(--d,0) * 90ms)}
.intro .p-ht>:nth-child(2){--d:1}.intro .p-ht>:nth-child(3){--d:2}.intro .p-ht>:nth-child(4){--d:3}.intro .p-ht>:nth-child(5){--d:4}
/* scroll sections (reveal.js adds .sq): frame, then its rows, then the copy */
.sq.rv{opacity:1;transform:none;transition:none}
.sq .sq-v{opacity:0;translate:0 18px;scale:.97;transition:opacity .6s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.2,.7,.2,1)}
.sq .sq-p{opacity:0;translate:0 10px;transition:opacity .45s ease-out,translate .45s ease-out;transition-delay:calc(.25s + var(--s,0) * 110ms)}
.sq .sq-t{opacity:0;translate:0 14px;transition:opacity .6s cubic-bezier(.2,.7,.2,1),translate .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--tv,.6s) + var(--t,0) * 80ms)}
.sq.in .sq-v,.sq.in .sq-p,.sq.in .sq-t{opacity:1;translate:none;scale:none}
@media(prefers-reduced-motion:reduce){.sq .sq-v,.sq .sq-p,.sq .sq-t{opacity:1;translate:none;scale:none;transition:none}}
@media print{.sq .sq-v,.sq .sq-p,.sq .sq-t{opacity:1;translate:none;scale:none}}
.sq .viz .tier.sq-p{opacity:0}.sq.in .viz .tier.sq-p{opacity:1}
/* header: slimmer bar (52 / 58px) — every offset that depends on it reads --hh */
:root{--hh:52px}
@media(min-width:901px){:root{--hh:58px}}
.bar{height:var(--hh)}
html{scroll-padding-top:calc(var(--hh) + 8px)}
.p-sub{top:calc(var(--hh) + env(safe-area-inset-top,0px))}
nav{max-height:calc(100vh - var(--hh) - env(safe-area-inset-top,0px))}
/* home hero: exactly one screen under the header (grows only if the content cannot fit) */
.car{min-height:calc(100svh - var(--hh) - 1px - env(safe-area-inset-top,0px))}
.car .trk{flex:1 1 auto}
@media(min-width:901px){.sl{min-height:0}}
@media(min-width:901px) and (max-height:760px){
 .sl{padding-top:24px;padding-bottom:12px}
 .sl h1,.sl h2{font-size:clamp(40px,min(6.4vw,10svh),92px);margin:14px 0 14px}
 .lead{margin-bottom:14px}.chips{margin-bottom:20px}
 .vs svg{max-width:min(440px,56svh)}
 .tbs{padding-bottom:22px}
}
@media(max-width:900px) and (max-height:760px){
 .vs svg{max-width:120px}.vs{margin:0 0 12px}
 .sl{padding-top:20px}
}
@media(max-width:900px) and (min-height:761px) and (max-height:900px){.vs svg{max-width:150px}}