:root{--bg:#0B0C0E;--surface:#14161A;--card:#1C1F24;--line:#2A2E35;--mute:#8A93A0;--text:#F4F2EE;--accent:#E8742A;--glow:#F2B35E;--on-accent:#0B0C0E;
--fh:"Exo 2",Inter,system-ui,sans-serif;--fb:Inter,system-ui,sans-serif;--cut:14px;--t:.25s;--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 var(--fb);overflow-x:hidden;transition:background var(--t)}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
header,main,footer{position:relative;z-index:1}
h1,h2,h3{font-family:var(--fh);font-weight:800;line-height:1.1}
h1{font-size:clamp(40px,7vw,84px)}h2{font-size:clamp(28px,4vw,44px);margin-bottom:28px}h3{font-size:20px}
a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--on-accent);padding:8px;z-index:99}
.hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:12px var(--pad);background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color var(--t)}
.hdr.stuck{border-color:var(--line)}
.logo{display:flex;align-items:center;gap:8px;font:800 22px var(--fh);letter-spacing:.14em}.logo svg{width:34px;height:34px}
nav{display:flex;gap:20px;margin-left:auto;font-size:14px;color:var(--mute)}nav a:hover{color:var(--text)}
.tools{display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid var(--line)}.lang button{background:none;border:0;color:var(--mute);padding:6px 10px;font:500 13px var(--fb);cursor:pointer}.lang [aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.icon{background:none;border:1px solid var(--line);color:var(--text);width:38px;height:38px;cursor:pointer;font-size:16px}.icon:hover{border-color:var(--accent)}.burger{display:none}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font:800 15px var(--fh);letter-spacing:.06em;padding:14px 26px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));transition:filter var(--t),transform var(--t)}
.btn:hover{filter:brightness(1.12);transform:translateY(-2px)}.btn.sm{padding:9px 16px;font-size:13px;--cut:9px}.btn.big{font-size:20px;padding:20px 44px}
.btn.ghost{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.sec{padding:clamp(56px,9vw,110px) var(--pad)}
.hero{min-height:calc(100vh - 64px);display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:32px;padding:40px var(--pad)}
.hero-logo{width:72px;height:72px;margin-bottom:20px}
.lead{max-width:52ch;color:var(--mute);margin:20px 0 28px;font-size:18px}.cta{display:flex;gap:14px;flex-wrap:wrap}
.meta{margin-top:22px;color:var(--mute);font-size:14px}.tag{background:var(--card);border:1px solid var(--accent);color:var(--glow);padding:2px 8px;margin-right:6px;font-family:var(--fh)}
.hero-art{position:relative;height:min(62vh,560px)}.hero-art::before{content:"";position:absolute;inset:8% 0;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 28%,transparent),transparent)}
.hero-art img{position:absolute;width:62%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55));transition:transform .2s ease-out}
.hero-art img:nth-child(1){left:0;top:4%}.hero-art img:nth-child(2){right:0;top:34%;width:54%}.hero-art img:nth-child(3){left:14%;bottom:0;width:50%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.grid.big{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}.grid.col2{grid-template-columns:repeat(2,1fr)}
.item{position:relative;background:radial-gradient(120% 90% at 50% 30%,var(--card),var(--surface));border:1px solid var(--line);padding:0;cursor:zoom-in;color:inherit;text-align:left;font:inherit;transition:transform var(--t),border-color var(--t),box-shadow var(--t);transform-style:preserve-3d}
.item:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.item .ph{aspect-ratio:4/3;display:grid;place-items:center;padding:12px}.item img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(0,0,0,.5))}
.item .cap{padding:12px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column}.cap b{font:800 15px var(--fh)}.cap span{color:var(--mute);font-size:13px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;padding:24px;border-left:1px solid var(--line)}.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:800 40px var(--fh);color:var(--accent);margin-bottom:8px}.steps p{color:var(--mute)}
.final{text-align:center;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 10%,transparent))}.final p{color:var(--mute);margin-bottom:26px}.final .meta{margin-top:20px}.warn{color:var(--glow);font-size:14px;margin-top:14px}
#faqList{max-width:860px}details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font:600 18px var(--fh);position:relative}summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;color:var(--accent);font-size:24px;transition:transform var(--t)}details[open] summary::after{transform:rotate(45deg)}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}details[open] .ans{grid-template-rows:1fr}.ans>p{overflow:hidden;color:var(--mute);padding-bottom:0}details[open] .ans>p{padding-bottom:18px}
.ftr{padding:40px var(--pad);border-top:1px solid var(--line);display:flex;gap:24px;align-items:center;flex-wrap:wrap}.ftr p{color:var(--mute);font-size:13px;max-width:70ch}
.lb{position:fixed;inset:0;z-index:50;background:rgba(5,6,8,.92);display:flex;align-items:center;justify-content:center}.lb[hidden]{display:none}.lb figure{max-width:88vw;text-align:center}.lb img{max-width:88vw;max-height:76vh}.lb figcaption{margin-top:12px}
.lb .icon{position:absolute;background:var(--card)}.lb-x{top:16px;right:16px}.lb-p{left:16px}.lb-n{right:16px}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.rv.in{opacity:1;transform:none}
@media(max-width:900px){nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--bg);padding:20px var(--pad);border-bottom:1px solid var(--line);display:none}nav.open{display:flex}.burger{display:block}.hdr .dl{display:none}
.hero,.two,.why{grid-template-columns:1fr}.hero{min-height:0}.hero-art{height:320px}.bento{grid-template-columns:1fr 1fr}.cell,.cell.main{grid-column:span 1}.steps{grid-template-columns:1fr}.grid.big{grid-template-columns:1fr}}
@media(max-width:480px){.grid{grid-template-columns:1fr 1fr}.grid.col2{grid-template-columns:1fr}.bento{grid-template-columns:1fr}.logo span{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

.feat{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.fc{position:relative;overflow:hidden;min-height:280px;padding:26px;background:linear-gradient(150deg,var(--card),var(--surface));border:1px solid var(--line);border-top:3px solid var(--accent);grid-column:span 3;transition:border-color var(--t)}
.fc:nth-child(2),.fc:nth-child(3){grid-column:span 2}.fc:hover{border-color:var(--accent)}
.fc h3{font-size:clamp(26px,3vw,38px);position:relative}.fc p{position:relative;max-width:22ch;color:var(--mute);margin-top:8px}
.fc img{position:absolute;right:-4%;bottom:-6%;width:62%;max-height:92%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(0,0,0,.55));transition:transform .4s}.fc:hover img{transform:scale(1.05) rotate(-2deg)}
.fc:nth-child(2) img,.fc:nth-child(3) img{width:74%;right:-10%}
.facts{list-style:none;padding:0;margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.facts li{padding:16px 18px;border-left:1px solid var(--line);font-size:14px;color:var(--mute)}.facts li:first-child{border-left:0}.facts b{display:block;color:var(--text);font:800 17px var(--fh)}
.kview{position:relative;display:block;background:radial-gradient(70% 70% at 50% 45%,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--surface) 75%);border:1px solid var(--line);aspect-ratio:16/9;max-height:62vh;width:100%;padding:0;cursor:zoom-in;perspective:1000px;overflow:hidden;color:inherit;font:inherit;touch-action:pan-y}

.kview.l img{animation:inL .45s cubic-bezier(.2,.7,.2,1)}.kview.r img{animation:inR .45s cubic-bezier(.2,.7,.2,1)}
@keyframes inR{from{opacity:0;transform:translateX(40px) scale(.94)}}@keyframes inL{from{opacity:0;transform:translateX(-40px) scale(.94)}}
.kcap{position:absolute;left:18px;bottom:14px;text-align:left;display:flex;flex-direction:column}.kcap b{font:800 clamp(20px,3vw,30px) var(--fh)}.kcap span{color:var(--mute)}
.wgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.wb{position:relative;overflow:hidden;padding:24px;background:var(--card);border:1px solid var(--line);grid-column:span 3;display:flex;flex-direction:column;justify-content:flex-end;min-height:170px}
.wb strong{font:800 clamp(24px,2.6vw,34px)/1.05 var(--fh)}.wb span{color:var(--mute);font-size:14px;margin-top:8px;max-width:30ch}
.wb.a{grid-column:span 7;min-height:340px;background:linear-gradient(120deg,var(--surface) 35%,color-mix(in srgb,var(--accent) 14%,var(--card)))}.wb.a strong{font-size:clamp(32px,4.6vw,56px);max-width:12ch}
.wb.a img{position:absolute;right:-3%;top:6%;width:56%;filter:drop-shadow(0 20px 20px rgba(0,0,0,.55))}.wb.a>*:not(img){position:relative}
.wb.b{grid-column:span 5;border-color:var(--accent);justify-content:center}.wb.b strong{font-size:clamp(48px,7vw,92px);color:var(--glow);letter-spacing:-.01em}.wb.b span{font:600 20px var(--fh);color:var(--text)}
@media(max-width:900px){.feat{grid-template-columns:1fr 1fr}.fc,.fc:nth-child(2),.fc:nth-child(3){grid-column:span 1}.facts{grid-template-columns:1fr 1fr}.facts li:nth-child(3){border-left:0}.facts li:nth-child(n+3){border-top:1px solid var(--line)}
.wb,.wb.a,.wb.b{grid-column:span 12}.wb:nth-child(n+3){grid-column:span 6}.wb.a img{width:62%}}
@media(max-width:560px){.feat{grid-template-columns:1fr}.fc{min-height:240px}.fc img,.fc:nth-child(n) img{width:60%;right:-4%}.fc p{max-width:16ch}.facts{grid-template-columns:1fr}.facts li{border-left:0;border-top:1px solid var(--line)}.facts li:first-child{border-top:0}.wb:nth-child(n+3){grid-column:span 12}.kview{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.kview img,.fc img{animation:none!important}}
details>summary{padding:14px 40px 14px 0;font-size:17px}

.stage{outline-offset:6px}
.snav{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:18px}#kNum{font:800 18px var(--fh);font-variant-numeric:tabular-nums;min-width:5.5ch;text-align:center;color:var(--mute)}
h1{margin-bottom:4px}.lead{margin:24px 0 34px}.cta{margin-bottom:6px}.meta{margin-top:26px}
h2{margin-bottom:34px}.sub{color:var(--mute);max-width:56ch;margin:-14px 0 26px}
.fc{padding:30px}.fc p{margin-top:14px;line-height:1.55}
.steps li{padding:28px}.steps h3{margin-bottom:10px}.steps li::before{margin-bottom:14px}
.wb{padding:28px}.wb span{margin-top:12px;line-height:1.5}
.facts li{padding:20px 22px}.facts b{margin-bottom:4px}
.kcap{gap:4px}.item .cap{padding:14px 18px;gap:3px}
.final h2{margin-bottom:16px}.final p{margin-bottom:34px}.final .meta{margin-top:26px}
summary{padding:18px 40px 18px 0}.ans>p{line-height:1.6}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{position:relative;display:flex;flex-direction:column;min-height:330px;padding:22px;text-align:left;color:inherit;font:inherit;cursor:pointer;background:radial-gradient(90% 70% at 50% 62%,color-mix(in srgb,var(--accent) 9%,var(--card)),var(--surface));border:1px solid var(--line);transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.cat:hover,.cat:focus-visible{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 34px rgba(0,0,0,.35)}
.cat-t b{display:block;font:800 clamp(22px,2.2vw,28px) var(--fh)}.cat-t small{color:var(--mute);font-size:14px}
.pile{position:relative;flex:1;min-height:170px;margin:12px 0}
.pile img{position:absolute;max-width:64%;max-height:62%;width:auto;height:auto;filter:drop-shadow(0 12px 12px rgba(0,0,0,.55));transition:transform .35s}
.pile img:nth-child(1){left:0;top:4%;transform:rotate(-8deg)}.pile img:nth-child(2){right:0;bottom:4%;transform:rotate(5deg)}.pile img:nth-child(3){left:20%;top:30%;z-index:2}
.cat:hover .pile img:nth-child(1){transform:rotate(-11deg) translate(-3px,-4px)}.cat:hover .pile img:nth-child(2){transform:rotate(8deg) translate(3px,4px)}.cat:hover .pile img:nth-child(3){transform:translateY(-6px) scale(1.04)}
.cat[data-c=agents] .pile img,.cat[data-c=gloves] .pile img{max-width:44%;max-height:92%}
.cat[data-c=agents] .pile img:nth-child(n){transform:none}.cat[data-c=agents] .pile img:nth-child(1){left:6%;top:0}.cat[data-c=agents] .pile img:nth-child(2){right:6%;bottom:0}
.cat[data-c=gloves] .pile img:nth-child(1){left:4%;top:6%;transform:rotate(-6deg)}.cat[data-c=gloves] .pile img:nth-child(2){right:4%;bottom:4%;transform:rotate(6deg)}
.cat-go{align-self:flex-start;font:800 13px var(--fh);letter-spacing:.08em;padding:8px 14px;border:1px solid var(--accent);color:var(--glow);transition:background var(--t),color var(--t)}.cat:hover .cat-go{background:var(--accent);color:var(--on-accent)}
.viewer{animation:vin .4s ease-out}@keyframes vin{from{opacity:0;transform:translateY(10px)}}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.vbar b{font:800 22px var(--fh)}
.stage{max-width:860px;margin:0 auto}
.kview{aspect-ratio:16/10;max-height:60vh}
.kview img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:60%;max-height:62%;object-fit:contain;filter:drop-shadow(var(--sx,0px) 22px 18px rgba(0,0,0,.6));transition:transform .18s ease-out;will-change:transform}
.kview[data-cat=agents] img{max-width:40%;max-height:78%}.kview[data-cat=gloves] img{max-width:52%}
.kcap{left:20px;bottom:16px}
@media(max-width:900px){.cats{grid-template-columns:1fr 1fr}.kview img{max-width:68%}}
@media(max-width:560px){.cats{gap:10px}.cat{min-height:250px;padding:14px}.cat-t b{font-size:20px}.pile{min-height:120px}.cat-go{font-size:12px;padding:8px 10px}.kview{aspect-ratio:4/3}.vbar b{font-size:18px}.icon{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.viewer{animation:none}}

.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-10px 0 24px}.filters[hidden]{display:none}
.chip{background:none;border:1px solid var(--line);color:var(--mute);padding:8px 14px;font:600 13px var(--fh);cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t)}
.chip:hover{color:var(--text);border-color:var(--mute)}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.filters select{background:var(--card);color:var(--text);border:1px solid var(--line);padding:8px 10px;font:500 13px var(--fb);max-width:100%}
.grid.sm{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.grid.sm .ph{aspect-ratio:1/1;padding:10px}.grid.sm .cap{padding:10px 14px}.grid.sm .cap b{font-size:14px;line-height:1.25}.grid.sm .cap span{font-size:12px}
.more{display:flex;justify-content:center;margin-top:26px}.more[hidden]{display:none}
#agents{padding-top:0}
@media(max-width:560px){.grid.sm{grid-template-columns:1fr 1fr;gap:10px}.chip{padding:10px 12px}}

.demo{color:var(--mute);font-size:14px;max-width:62ch;margin:-14px 0 26px}
.cat-t small{display:block;line-height:1.4;margin-top:4px}

.item .ph{position:relative;padding:0}
.item .ph img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);max-width:none;max-height:none;object-fit:contain}
.grid.sm .ph img{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.ld{animation:imgin .4s ease-out}@keyframes imgin{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.ld{animation:none}}

.cat[data-c=gloves] .pile img{max-width:58%;max-height:80%}