@font-face{font-family:Inter;src:url(fonts/Inter.ttf) format("truetype");font-weight:100 900}
@font-face{font-family:Mono;src:url(fonts/Mono.ttf) format("truetype");font-weight:100 800}
:root,[data-theme=light]{
  --bg:#F3F5F8; --surf:#FFFFFF; --surf2:#EBEFF4; --stage:#EEF1F5; --ink:#0B1420; --mut:#5B6B7C; --mut2:#8A98A8;
  --line:rgba(11,20,32,.09); --blue:#0472A6; --blue2:#0A8FD0; --soft:#E3F0F8; --ok:#15985B;
  --heroA:#EAF3FA; --heroB:#FFFFFF; --glow:rgba(10,143,208,.18); --shadow:0 20px 50px rgba(11,20,32,.08);
  --chip:#FFFFFF;
}
[data-theme=dark]{
  --bg:#080C12; --surf:#111925; --surf2:#172130; --stage:#E9EDF2; --ink:#F2F5F8; --mut:#9AA9BA; --mut2:#6F8092;
  --line:rgba(255,255,255,.08); --blue:#0A8FD0; --blue2:#36B0EE; --soft:rgba(10,143,208,.14); --ok:#3DDC97;
  --heroA:#06111C; --heroB:#0B1828; --glow:rgba(30,155,224,.35); --shadow:0 20px 60px rgba(0,0,0,.45);
  --chip:#111925;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}
.mono{font-family:Mono,monospace;letter-spacing:.06em}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* strip */
.strip{background:var(--blue);color:#fff;font-size:13px;height:36px;overflow:hidden;position:relative}
.strip-track{display:flex;gap:56px;white-space:nowrap;position:absolute;top:0;height:36px;align-items:center;animation:marq 38s linear infinite;padding-left:56px}
.strip-track span{display:inline-flex;align-items:center;gap:10px;opacity:.95}
.strip-track span::before{content:"";width:5px;height:5px;border-radius:50%;background:#9FE1FF}
@keyframes marq{to{transform:translateX(-50%)}}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:1320px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo img{width:44px;height:44px;border-radius:50%}
.logo b{display:block;font-size:18px;font-weight:850;letter-spacing:-.01em;line-height:1}
.logo small{display:block;font-size:11px;color:var(--mut);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.mainnav{display:flex;gap:22px}
.mainnav a{font-size:14px;font-weight:600;color:var(--mut);transition:color .2s;position:relative}
.mainnav a:hover,.mainnav a.on{color:var(--ink)}
.mainnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:2px;background:var(--blue)}
.search{flex:1;max-width:420px;margin-left:auto;display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--line);border-radius:99px;padding:0 16px;height:44px}
.search svg{width:18px;height:18px;color:var(--mut)}
.search input{border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;width:100%}
.hdr-act{display:flex;align-items:center;gap:10px}
.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surf);display:grid;place-items:center;position:relative}
.iconbtn svg{width:20px;height:20px}
.iconbtn b{position:absolute;top:-4px;right:-4px;background:var(--blue);color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.iconbtn b.on{transform:scale(1)}
.iconbtn.menu{display:none}
.themebtn{display:flex;align-items:center;gap:0;border:1px solid var(--line);background:var(--surf);border-radius:99px;padding:4px;position:relative;font-size:12px;font-weight:700}
.themebtn span{padding:7px 12px;border-radius:99px;position:relative;z-index:1;transition:color .3s}
.themebtn i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--ink);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
[data-theme=light] .t-l{color:var(--bg)}
[data-theme=dark] .themebtn i{transform:translateX(100%)}
[data-theme=dark] .t-d{color:var(--bg)}
@media(max-width:1100px){.mainnav{display:none}.iconbtn.menu{display:grid}}
@media(max-width:720px){.hdr-in{flex-wrap:wrap;gap:10px;padding:10px 16px}.search{order:3;max-width:none;flex-basis:100%;margin:0;height:40px}.hdr-act{margin-left:auto;gap:6px}.themebtn{font-size:11px}.themebtn span{padding:6px 8px}.iconbtn{width:38px;height:38px}.logo img{width:38px;height:38px}.logo b{font-size:16px}.logo small{font-size:9px}}

/* mobile menu */
.mnav{position:fixed;inset:0 0 auto 0;top:0;z-index:60;background:var(--surf);padding:20px;transform:translateY(-110%);visibility:hidden;transition:transform .4s,visibility .4s;box-shadow:var(--shadow)}
.mnav.on{transform:none;visibility:visible}
.mnav a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-weight:700}

/* HERO SLIDER */
.hero{position:relative;margin:22px auto 0;max-width:1320px;padding:0 28px}
.slides{position:relative;border-radius:32px;overflow:hidden;height:520px;background:linear-gradient(120deg,var(--heroA),var(--heroB));border:1px solid var(--line)}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;padding:0 64px;opacity:0;pointer-events:none;transition:opacity .7s}
.slide.on{opacity:1;pointer-events:auto}
.slide::before{content:"";position:absolute;right:-6%;top:50%;width:62%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 62%)}
.slide .txt{position:relative;z-index:2}
.slide .kick{display:inline-flex;align-items:center;gap:8px;font-family:Mono;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);border:1px solid color-mix(in srgb,var(--blue2) 40%,transparent);border-radius:99px;padding:7px 12px}
.slide .kick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue2)}
.slide h1{font-size:clamp(40px,5.4vw,76px);line-height:.95;font-weight:900;letter-spacing:-.045em;margin:20px 0 14px}
.slide h1 em{font-style:normal;color:var(--blue2)}
.slide p.sub{font-size:18px;color:var(--mut);max-width:500px;line-height:1.5}
.specs{display:flex;gap:26px;margin:26px 0 0}
.specs div{font-size:12px;color:var(--mut);line-height:1.35}
.specs b{display:block;font-size:20px;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.btnrow{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:99px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;border:0;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--blue) 35%,transparent)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn .ar{transition:transform .2s}.btn:hover .ar{transform:translateX(4px)}
.price-tag{font-size:14px;color:var(--mut)}.price-tag b{font-size:22px;color:var(--ink);font-weight:850;display:block;letter-spacing:-.02em}
.slide .vis{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center}
.slide .vis img{max-height:430px;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.18));transform:translateY(20px) scale(.97);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1) .1s,opacity 1s .1s}
.slide.on .vis img{transform:none;opacity:1}
.vis.group img{position:absolute}
.vis.group .g1{height:215px;left:-4%;bottom:48px;z-index:4}
.vis.group .g2{height:390px;left:22%;bottom:62px;z-index:2}
.vis.group .g3{height:320px;right:-6%;bottom:54px;z-index:3}
.podium{position:absolute;bottom:34px;left:6%;right:2%;height:46px;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--blue2) 30%,transparent),transparent 70%)}
.spools{position:relative;width:440px;height:380px}
.spools span{position:absolute;width:150px;height:150px;border-radius:50%;box-shadow:inset 0 -10px 18px rgba(0,0,0,.2),0 20px 30px rgba(0,0,0,.15);opacity:0;transform:translateY(30px) rotate(-30deg);transition:all .9s cubic-bezier(.2,.8,.2,1)}
.spools span::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.13) 3px 4px)}
.spools span::after{content:"";position:absolute;inset:33%;border-radius:50%;background:#1d232b;box-shadow:0 0 0 6px #2c343f}
.slide.on .spools span{opacity:1;transform:none}
.clock{position:relative;width:330px;height:330px;border-radius:50%;background:var(--surf);box-shadow:var(--shadow);display:grid;place-items:center;border:1px solid var(--line)}
.clock::before{content:"";position:absolute;inset:18px;border-radius:50%;background:conic-gradient(var(--blue2) 0 var(--deg,0deg),transparent 0);transition:--deg 1s;-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%)}
.slide.on .clock::before{animation:clk 1.6s cubic-bezier(.2,.8,.2,1) forwards}
@property --deg{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes clk{to{--deg:360deg}}
.clock div{text-align:center;position:relative}.clock b{font-size:84px;font-weight:900;letter-spacing:-.05em;line-height:.9;display:block}.clock small{color:var(--mut);font-weight:600}
.clock img{position:absolute;width:190px;right:-120px;bottom:-30px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.2))}
.badge-time{position:absolute;left:4%;bottom:70px;background:var(--surf);color:var(--ink);border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);z-index:3}
.badge-time b{font-size:34px;font-weight:900;letter-spacing:-.04em;display:block;line-height:1}
.badge-time small{color:var(--mut);font-size:12px}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:420px}
.svc div{background:var(--surf);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow);opacity:0;transform:translateY(20px);transition:all .8s cubic-bezier(.2,.8,.2,1)}
.slide.on .svc div{opacity:1;transform:none}
.svc svg{width:30px;height:30px;color:var(--blue2)}
.svc b{display:block;margin-top:14px;font-size:16px}
.svc small{color:var(--mut);font-size:13px}
.sl-nav{position:absolute;left:92px;bottom:26px;display:flex;gap:8px;z-index:5}
.sl-nav button{width:36px;height:6px;border-radius:3px;border:0;background:color-mix(in srgb,var(--ink) 15%,transparent);overflow:hidden;position:relative;padding:0}
.sl-nav button i{position:absolute;inset:0;width:0;background:var(--blue2)}
.sl-nav button.on i{animation:prog 6.5s linear forwards}
@keyframes prog{to{width:100%}}
.sl-arrows{position:absolute;right:52px;bottom:18px;display:flex;gap:8px;z-index:5}
.sl-arrows button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surf);font-size:18px}
@media(max-width:900px){
  .slides{height:640px;border-radius:24px}
  .slide{grid-template-columns:1fr;padding:34px 24px 80px;align-content:start}
  .slide .vis{height:260px;order:-1}
  .slide .vis img{max-height:250px}
  .slide h1{margin:14px 0 10px}
  .slide p.sub{font-size:15px}
  .specs{gap:16px;flex-wrap:wrap}.specs b{font-size:16px}
  .vis.group .g1{height:150px;bottom:40px}.vis.group .g2{height:220px;bottom:20px}.vis.group .g3{height:170px;bottom:34px}
  .spools{transform:scale(.6)}
  .clock{width:210px;height:210px}.clock b{font-size:54px}.clock img{width:120px;right:-70px}.svc{width:100%;transform:scale(.9)}.svc div{padding:14px}
  .sl-nav{left:24px}.sl-arrows{display:none}
  .hero{padding:0 16px}
  .badge-time{bottom:10px;padding:10px 14px}.badge-time b{font-size:24px}
}

/* benefits */
.bens{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.bens div{display:flex;gap:14px;align-items:center;background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:18px}
.bens svg{width:28px;height:28px;color:var(--blue2);flex:none}
.bens b{display:block;font-size:15px}.bens small{color:var(--mut);font-size:13px}
@media(max-width:900px){.bens{grid-template-columns:1fr 1fr}.bens div{padding:14px;gap:10px}}

section.blk{padding:72px 0 0}
.sh{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}
.sh h2{font-size:clamp(28px,3.2vw,44px);font-weight:850;letter-spacing:-.035em;line-height:1}
.sh p{color:var(--mut);margin-top:8px}
.sh a{font-weight:700;color:var(--blue2);font-size:14px;white-space:nowrap}

/* category bento */
.cats{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;grid-template-rows:230px 230px;gap:14px}
.cat{border-radius:26px;padding:24px;position:relative;overflow:hidden;background:var(--surf);border:1px solid var(--line);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;display:flex;flex-direction:column;justify-content:space-between}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cat h3{font-size:24px;font-weight:850;letter-spacing:-.03em;position:relative;z-index:2}
.cat small{color:var(--mut);font-size:13px;position:relative;z-index:2}
.cat .go{position:relative;z-index:2;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.cat.all{background:var(--soft);border-color:transparent}
.cat.big{grid-row:span 2;background:linear-gradient(160deg,var(--blue),#03466A);color:#fff;border:0}
.cat.big small{color:#CFE6F3}
.cat.big .go{background:#fff;color:var(--blue)}
.cat.big img{position:absolute;right:-30px;bottom:-10px;height:78%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));transition:transform .6s}
.cat.big:hover img{transform:scale(1.04) translateX(-6px)}
.cat .sp{position:absolute;right:-26px;bottom:-26px;width:150px;height:150px;border-radius:50%;box-shadow:inset 0 -8px 16px rgba(0,0,0,.2);transition:transform .8s}
.cat:hover .sp{transform:rotate(90deg)}
.cat .sp::after{content:"";position:absolute;inset:34%;border-radius:50%;background:#1d232b;box-shadow:0 0 0 6px #2c343f}
.cat .sp::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.13) 3px 4px)}
@media(max-width:900px){.cats{grid-template-columns:1fr 1fr;grid-template-rows:auto}.cat{min-height:150px}.cat.big{grid-column:span 2;grid-row:auto;min-height:260px}}

/* color row */
.colors{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.colors::-webkit-scrollbar{display:none}
.colors a{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--mut);width:92px;text-align:center}
.colors i{width:64px;height:64px;border-radius:50%;box-shadow:inset 0 -6px 12px rgba(0,0,0,.18),0 0 0 1px var(--line);transition:transform .3s}
.colors a:hover i{transform:translateY(-4px) scale(1.06)}

/* rails / cards */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 42px)/4);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media(max-width:900px){.rail{grid-auto-columns:72%}}
.card{background:var(--surf);border:1px solid var(--line);border-radius:22px;padding:12px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ph{background:var(--stage);border-radius:16px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;position:relative}
.card .ph img{width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s}
.card:hover .ph img{transform:scale(1.05)}
.card .more{position:absolute;left:10px;bottom:10px;font-size:11px;font-weight:700;background:rgba(255,255,255,.92);color:#0B1420;border-radius:99px;padding:5px 9px;display:flex;gap:6px;align-items:center}
.card .more i{display:flex}.card .more i span{width:10px;height:10px;border-radius:50%;margin-right:-3px;box-shadow:0 0 0 1.5px #fff}
.card .meta{font-size:11px;color:var(--mut2);margin:12px 4px 4px;font-family:Mono;letter-spacing:.06em;text-transform:uppercase}
.card h4{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 4px;line-height:1.3}
.card .clr{display:flex;align-items:center;gap:7px;margin:6px 4px 0;font-size:13px;color:var(--mut)}
.card .clr i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px var(--line);flex:none}
.card .bt{display:flex;justify-content:space-between;align-items:end;margin:12px 4px 4px;margin-top:auto;padding-top:12px}
.card .pr b{font-size:18px;font-weight:850;letter-spacing:-.02em;display:block}
.card .pr small{font-size:12px;color:var(--ok);font-weight:600}
.add{width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-size:22px;display:grid;place-items:center;transition:transform .2s,background .2s;flex:none}
.add:hover{background:var(--blue)}
.add.pop{animation:pop .4s}
@keyframes pop{50%{transform:scale(1.25)}}

/* printer card big */
.pcard .ph{aspect-ratio:4/3.4}
.pcard .tags{display:flex;gap:5px;flex-wrap:wrap;margin:8px 4px 0}
.pcard .tags span{font-size:11px;border:1px solid var(--line);border-radius:99px;padding:3px 8px;color:var(--mut)}

/* brands */
.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.brands a{background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:22px 16px;text-align:center;font-weight:850;font-size:18px;letter-spacing:-.02em;transition:all .25s}
.brands a small{display:block;font-weight:500;font-size:12px;color:var(--mut);margin-top:4px;letter-spacing:0}
.brands a:hover{border-color:var(--blue2);color:var(--blue2)}
@media(max-width:900px){.brands{grid-template-columns:repeat(3,1fr)}}

/* store block */
.store{display:grid;grid-template-columns:1fr 1.1fr;gap:0;border-radius:30px;overflow:hidden;background:var(--surf);border:1px solid var(--line)}
.store .pic{min-height:440px;position:relative;overflow:hidden;background:var(--surf2);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:36px 36px}
.store .pic svg{position:absolute;inset:0;width:100%;height:100%;stroke:none}
.store .pin{position:absolute;left:52%;top:44%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.store .pin img{width:74px;height:74px;border-radius:50%;box-shadow:0 0 0 8px color-mix(in srgb,var(--blue2) 25%,transparent),var(--shadow)}
.store .pin::after{content:"";width:3px;height:26px;background:var(--blue2)}
.store .pulse{position:absolute;left:52%;top:44%;width:30px;height:30px;margin:-15px;border-radius:50%;background:var(--blue2);opacity:.5;animation:pl 2s infinite}
@keyframes pl{to{transform:scale(4);opacity:0}}
.store .lbl{position:absolute;left:52%;top:calc(44% + 18px);transform:translateX(-50%);background:var(--surf);border-radius:12px;padding:8px 12px;font-size:12px;font-weight:700;box-shadow:var(--shadow);white-space:nowrap}
.store .inf{padding:48px}
.store h2{font-size:clamp(30px,3.4vw,46px);font-weight:900;letter-spacing:-.04em;line-height:1}
.store ul{list-style:none;margin:26px 0}
.store li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);color:var(--mut);font-size:15px}
.store li b{color:var(--ink);min-width:130px}
@media(max-width:900px){.store{grid-template-columns:1fr}.store .pic{min-height:300px}.store .inf{padding:26px}.store li{flex-direction:column;gap:2px}}

/* catalog */
.crumb{font-size:13px;color:var(--mut);margin:26px 0 10px}
.crumb a:hover{color:var(--blue2)}
.cat-h{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.cat-h h1{font-size:clamp(34px,4.4vw,60px);font-weight:900;letter-spacing:-.045em;line-height:1}
.cat-h p{color:var(--mut);margin-top:8px}
.tabs{display:flex;gap:8px;margin:22px 0 0;overflow-x:auto;scrollbar-width:none}
.tabs a{white-space:nowrap;padding:10px 16px;border-radius:99px;border:1px solid var(--line);background:var(--chip);font-size:14px;font-weight:600;color:var(--mut)}
.tabs a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cgrid{display:grid;grid-template-columns:260px 1fr;gap:28px;margin-top:26px;align-items:start}
.filters{position:sticky;top:96px;background:var(--surf);border:1px solid var(--line);border-radius:22px;padding:8px 18px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin}
.fg{padding:16px 0;border-bottom:1px solid var(--line)}
.fg:last-child{border:0}
.fg h5{font-size:12px;font-family:Mono;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);margin-bottom:10px;display:flex;justify-content:space-between}
.fg h5 button{border:0;background:none;color:var(--blue2);font-family:Inter;letter-spacing:0;text-transform:none;font-size:12px;font-weight:600}
.ck{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;cursor:pointer;color:var(--ink)}
.ck input{display:none}
.ck .bx{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--mut2);display:grid;place-items:center;flex:none;transition:all .2s}
.ck input:checked+.bx{background:var(--blue);border-color:var(--blue)}
.ck input:checked+.bx::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.ck .n{margin-left:auto;font-size:12px;color:var(--mut2)}
.swf{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px;padding:4px 2px}
.swf label{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;color:var(--mut);text-align:center;line-height:1.1;min-width:0}
.swf input{display:none}
.swf i{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 -4px 8px rgba(0,0,0,.15),0 0 0 1px var(--line);transition:all .2s}
.swf input:checked+i{box-shadow:0 0 0 2px var(--surf),0 0 0 4px var(--blue2)}
.prange{display:flex;gap:8px;align-items:center}
.prange input{width:100%;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 10px;font:inherit;font-size:14px}
.pp{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pp button{border:1px solid var(--line);background:var(--bg);border-radius:99px;padding:6px 10px;font-size:12px;font-weight:600}
.pp button.on{background:var(--ink);color:var(--bg)}
.ctop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.ctop .cnt{color:var(--mut);font-size:14px}
.ctop select{height:40px;border-radius:99px;border:1px solid var(--line);background:var(--surf);color:var(--ink);padding:0 14px;font:inherit;font-size:14px}
.active{display:flex;gap:6px;flex-wrap:wrap}
.active button{border:0;background:var(--soft);color:var(--blue2);border-radius:99px;padding:6px 10px;font-size:12px;font-weight:700}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.morebtn{display:block;margin:30px auto 0}
.fbtn{display:none}
@media(max-width:900px){
  .cgrid{grid-template-columns:1fr}
  .filters{position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;border-radius:24px 24px 0 0;z-index:70;transform:translateY(105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);padding-bottom:90px}
  .filters.on{transform:none}
  .fbtn{display:inline-flex}
  .pgrid{grid-template-columns:1fr 1fr;gap:10px}
  .filters .apply{position:sticky;bottom:-80px}
}
.filters .apply{display:none}
@media(max-width:900px){.filters .apply{display:flex;width:100%;justify-content:center;margin-top:10px}}

/* product */
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;margin-top:10px}
.gal{background:var(--stage);border-radius:30px;aspect-ratio:1;display:grid;place-items:center;position:sticky;top:96px;overflow:hidden}
.gal img{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s}
.gal:hover img{transform:scale(1.08)}
.pd .brand{font-family:Mono;font-size:12px;letter-spacing:.12em;color:var(--blue2);text-transform:uppercase}
.pd h1{font-size:clamp(28px,3vw,42px);font-weight:850;letter-spacing:-.035em;line-height:1.05;margin:10px 0 16px}
.pd .pr{display:flex;align-items:end;gap:16px;flex-wrap:wrap}
.pd .pr b{font-size:36px;font-weight:900;letter-spacing:-.03em}
.pd .pr .pix{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);font-weight:700;border-radius:99px;padding:6px 12px;font-size:13px}
.pd .inst{color:var(--mut);margin-top:6px;font-size:14px}
.opt{margin-top:28px}
.opt h5{font-size:14px;margin-bottom:12px}.opt h5 span{color:var(--mut);font-weight:500}
.sibs{display:flex;flex-wrap:wrap;gap:10px;padding:6px}
.sibs a{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 -5px 10px rgba(0,0,0,.18),0 0 0 1px var(--line);transition:transform .2s;position:relative}
.sibs a:hover{transform:scale(1.1)}
.sibs a.on{box-shadow:0 0 0 2px var(--surf),0 0 0 4px var(--blue2)}
.sibs a:hover::after{content:attr(data-n);position:absolute;bottom:115%;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:11px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:5}
.volt{display:flex;gap:8px}
.volt a{padding:10px 16px;border-radius:12px;border:1px solid var(--line);font-weight:700;font-size:14px}
.volt a.on{border-color:var(--blue2);color:var(--blue2);background:var(--soft)}
.buy{display:flex;gap:10px;margin-top:28px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:99px;height:54px;background:var(--surf)}
.qty button{width:44px;height:100%;border:0;background:none;font-size:20px}
.qty span{width:26px;text-align:center;font-weight:700}
.buy .btn{height:54px;flex:1;justify-content:center}
.ship{margin-top:22px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surf)}
.ship div{display:flex;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);font-size:14px}
.ship div:last-child{border:0}
.ship svg{width:24px;height:24px;color:var(--blue2);flex:none}
.ship b{display:block}.ship small{color:var(--mut)}
.ship .tag{margin-left:auto;font-size:12px;font-weight:700;color:var(--ok);white-space:nowrap}
.ship input{margin-left:auto;width:120px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:0 10px;font:inherit}
.spec-t{margin-top:28px}
.spec-t h3{font-size:18px;margin-bottom:10px}
.spec-t div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.spec-t span{color:var(--mut)}
.spec-t b{font-weight:600;text-align:right}
.talk{margin-top:18px;display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;background:var(--soft);font-size:14px}
.talk b{display:block}.talk a{margin-left:auto;font-weight:700;color:var(--blue2);white-space:nowrap}
@media(max-width:900px){.pd{grid-template-columns:1fr;gap:24px}.gal{position:relative;top:0}}

/* drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100%;background:var(--surf);z-index:80;transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow)}
.drawer.on{transform:none}
.dr-in{display:flex;flex-direction:column;height:100%}
.dr-h{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.dr-h h3{font-size:22px;letter-spacing:-.02em}
.x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:none;font-size:22px}
.dr-list{flex:1;overflow:auto;padding:8px 24px}
.ci{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.ci .im{background:var(--stage);border-radius:14px;aspect-ratio:1;display:grid;place-items:center}
.ci .im img{width:84%;mix-blend-mode:multiply}
.ci b{font-size:14px;display:block;line-height:1.3}.ci small{color:var(--mut);font-size:12px}
.ci .q{display:flex;align-items:center;gap:8px;margin-top:8px}
.ci .q button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:none}
.ci .pv{font-weight:800;text-align:right}
.dr-f{padding:20px 24px;border-top:1px solid var(--line)}
.dr-f .r{display:flex;justify-content:space-between;padding:4px 0;color:var(--mut);font-size:14px}
.dr-f .r.t{color:var(--ink);font-size:18px;font-weight:850;padding-top:10px}
.dr-f .r.g{color:var(--ok);font-weight:700}
.dr-f .btn{width:100%;justify-content:center;margin-top:14px;height:54px}
.free{margin-bottom:14px;font-size:13px;color:var(--mut)}
.free .bar{height:6px;border-radius:3px;background:var(--surf2);margin-top:8px;overflow:hidden}
.free .bar i{display:block;height:100%;background:var(--blue2);transition:width .5s}
.empty{text-align:center;color:var(--mut);padding:60px 0}
.scrim{position:fixed;inset:0;background:rgba(5,10,16,.45);z-index:65;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);background:var(--ink);color:var(--bg);padding:14px 20px;border-radius:16px;font-size:14px;font-weight:600;z-index:90;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;max-width:90vw;text-align:center;opacity:0;pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1}
.wa{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;z-index:50;box-shadow:0 12px 30px rgba(37,211,102,.4)}
.wa svg{width:28px;height:28px}

.ftr{margin-top:90px;border-top:1px solid var(--line);background:var(--surf)}
.ftr-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-top:50px;padding-bottom:40px}
.ftr p{color:var(--mut);font-size:14px;line-height:1.6;margin-top:12px}
.ftr h5{font-size:12px;font-family:Mono;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.ftr-b{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:18px;padding-bottom:28px;border-top:1px solid var(--line);font-size:12px;color:var(--mut2)}
@media(max-width:900px){.ftr-in{grid-template-columns:1fr 1fr}}

.fade{animation:fade .5s cubic-bezier(.2,.8,.2,1)}
@keyframes fade{from{opacity:0;transform:translateY(14px)}}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* slide com foto de estúdio (versão clara/escura) */
.slide.photo::before{display:none}
.bgimg{position:absolute;top:0;bottom:0;right:0;height:100%;aspect-ratio:1456/819;background-size:cover;background-repeat:no-repeat;background-position:right center;opacity:0;transition:opacity .5s;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.bgimg.l{background-image:url(img/hero-x2d-claro.jpg)}
.bgimg.d{background-image:url(img/hero-x2d-escuro.jpg),url(img/hero-x2d-claro.jpg)}
[data-theme=light] .bgimg.l,[data-theme=dark] .bgimg.d{opacity:1}
.slide.photo .bgimg{transform:scale(1.06);transition:opacity .5s,transform 6.5s ease-out}
.slide.photo.on .bgimg{transform:scale(1)}
@media(max-width:900px){.bgimg{left:0;width:100%;aspect-ratio:auto;background-size:auto 44%;background-position:78% 0;-webkit-mask-image:linear-gradient(180deg,#000 36%,transparent 46%);mask-image:linear-gradient(180deg,#000 36%,transparent 46%)}.slide.photo .txt{padding-top:250px}.slide .btn.ghost{display:none}.slides{height:660px}.sl-nav{bottom:18px}
 [data-theme=light] .slides{background:linear-gradient(180deg,#EAF3FA,#fff)}}
@media(max-width:900px){
  .specs div:nth-child(n+4){display:none}
  .slide .price-tag{display:none}
  .slide .vis{height:230px}
  .spools{transform:scale(.5);transform-origin:center}
  .svc{width:100%;transform:none;gap:8px}
  .svc div{padding:12px;border-radius:16px}
  .svc svg{width:22px;height:22px}.svc b{font-size:13px;margin-top:6px}.svc small{font-size:11px}
  .clock{transform:scale(.85)}
}
@media(max-width:900px){
  .slide{grid-template-columns:minmax(0,1fr)}
  .slide .vis{overflow:hidden;width:100%}
  .spools{flex:none;margin:0 -100px}
}
@media(max-width:900px){.svc{grid-template-columns:repeat(4,1fr)}.svc div{padding:10px 6px;text-align:center}.svc small{display:none}.svc b{font-size:11px}}

/* rodapé mais discreto */
.ftr{margin-top:70px}
.ftr-in{padding-top:36px;padding-bottom:26px;gap:24px}
.ftr .logo img{width:34px;height:34px}.ftr .logo b{font-size:15px}.ftr .logo small{font-size:9px}
.ftr p{font-size:12.5px;line-height:1.55;margin-top:8px;color:var(--mut2)}
.ftr h5{font-size:10.5px}
.ftr-b{font-size:11px;padding-top:14px;padding-bottom:20px}

/* ===== imagens padronizadas ===== */
:root,[data-theme=light],[data-theme=dark]{--stage:#EAEFF4}
.card .ph img.std,.ci .im img.std{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.gal img.std{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.gal:hover img.std{transform:scale(1.04)}
.slide .vis img.wide{max-height:none;width:112%;max-width:none;margin-right:-8%}
.tclock{position:relative;width:400px;max-width:100%}
.tclock img{width:100%;max-height:none!important}
.tc-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:6%;color:#fff;text-shadow:0 0 24px rgba(30,155,224,.8)}
.tc-in b{font-size:96px;font-weight:900;letter-spacing:-.05em;line-height:.9}
.tc-in small{font-family:Mono,monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9FE1FF;margin-top:6px}
.svc img{width:64px;height:64px;object-fit:contain}
.svc div{display:flex;flex-direction:column;align-items:flex-start}
.cat .ci3{position:absolute;right:-6px;bottom:-4px;width:62%;max-width:210px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.18));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cat:hover .ci3{transform:translateY(-6px) rotate(-3deg) scale(1.04)}
.cat small.d{display:block;margin-top:4px;max-width:56%}
.cat.all .ci3{width:48%}
@media(max-width:900px){.tclock{width:230px}.tc-in b{font-size:56px}.svc img{width:40px;height:40px}.svc div{align-items:center}.cat .ci3{width:58%}}
.svc{width:440px}.svc div{padding:18px 18px 20px}.svc img{width:92px;height:92px;margin:-6px 0 2px -6px}
@media(max-width:900px){.svc{width:100%}.svc div{padding:10px 6px}.svc img{width:46px;height:46px;margin:0}}
.card .ph img.std,.ci .im img.std,.gal img.std{object-fit:contain}
.cat>div{position:relative;z-index:2;max-width:56%}
.cat .ci3{width:50%;max-width:190px;right:-10px;bottom:-14px}
.cat.all .ci3{width:42%}
.cat small.d{max-width:100%}
@media(max-width:900px){.cat>div{max-width:60%}.cat .ci3{width:46%}}
.cat.big>div{max-width:none}

/* ===== rodada 3 ===== */
/* miniaturas: impressora inteira, recorte sobre o fundo do card */
.card .ph img.std,.ci .im img.std,.gal img.std{width:82%;height:82%;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 14px 18px rgba(11,20,32,.12))}
.gal img.std{width:74%;height:74%}
/* card grande de impressoras: imagem inteira dentro do card */
.cat.big{overflow:hidden}
.cat.big img{right:18px;bottom:18px;height:66%;max-width:58%;object-fit:contain;object-position:right bottom}
/* cronômetro animado */
.sw-watch{position:relative;width:340px;max-width:100%;margin:auto}
.sw-watch svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 30px 40px rgba(11,20,32,.18))}
.sw-crown,.sw-stem,.sw-btn{fill:var(--ink)}
.sw-btn{opacity:.85}
.sw-body{fill:var(--surf);stroke:var(--line);stroke-width:2}
.sw-face{fill:var(--bg)}
.sw-ticks line{stroke:var(--mut2);stroke-width:2;stroke-linecap:round}
.sw-ticks line.m{stroke:var(--ink);stroke-width:3.5}
.sw-track{fill:none;stroke:color-mix(in srgb,var(--blue2) 14%,transparent);stroke-width:8}
.sw-prog{fill:none;stroke:var(--blue2);stroke-width:8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:160px 200px;filter:drop-shadow(0 0 6px var(--blue2))}
.slide.on .sw-prog{animation:swfill 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes swfill{0%{stroke-dashoffset:100}80%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.sw-hand{transform-origin:160px 200px}
.sw-hand line{stroke:var(--blue2);stroke-width:4;stroke-linecap:round}.sw-hand circle{fill:var(--blue2)}
.slide.on .sw-hand{animation:swspin 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes swspin{0%{transform:rotate(0)}80%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
.sw-hub{fill:var(--ink);stroke:var(--blue2);stroke-width:3}
.slide.on .sw-crown{animation:swpress 6s infinite}
@keyframes swpress{0%,3%{transform:translateY(0)}1.5%{transform:translateY(5px)}}
.sw-txt{position:absolute;left:0;right:0;top:55.5%;transform:translateY(-50%);text-align:center;pointer-events:none}
.sw-txt b{display:block;font-size:72px;font-weight:900;letter-spacing:-.05em;line-height:.9;color:var(--ink);margin-top:34px}
.sw-txt small{font-family:Mono,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue2)}
/* ícones soltos, sem caixas */
.icons4{display:grid;grid-template-columns:repeat(2,170px);gap:10px 34px;justify-content:center;align-content:center;margin:auto}
.icons4 figure{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(16px);transition:all .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d)}
.slide.on .icons4 figure{opacity:1;transform:none}
.icons4 img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(11,20,32,.18));animation:flt 5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes flt{50%{transform:translateY(-8px)}}
.icons4 figcaption{font-size:14px;font-weight:700;color:var(--ink)}
@media(max-width:900px){.sw-watch{width:210px}.sw-txt b{font-size:44px;margin-top:22px}.icons4{grid-template-columns:repeat(4,1fr);gap:6px;width:100%}.icons4 img{width:70px;height:70px}.icons4 figcaption{font-size:11px;text-align:center}}

/* mapa real */
.store .pic.map{background:var(--surf2);padding:0;min-height:440px;position:relative}
.store .pic.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
[data-theme=dark] .store .pic.map iframe{filter:invert(.92) hue-rotate(180deg) saturate(.8) brightness(.95)}
.maptag{position:absolute;left:18px;bottom:18px;display:flex;gap:10px;align-items:center;background:var(--surf);border-radius:16px;padding:10px 14px 10px 10px;box-shadow:var(--shadow);font-size:12px;color:var(--mut)}
.maptag img{width:38px;height:38px;border-radius:50%}
.maptag b{display:block;color:var(--ink);font-size:13px}
@media(max-width:900px){.store .pic.map{min-height:300px}}
/* carrinho vazio */
.empty{padding:40px 0 18px}
.empty .eico{width:72px;height:72px;border-radius:50%;background:var(--soft);display:grid;place-items:center;margin:0 auto 16px}
.empty .eico svg{width:32px;height:32px;color:var(--blue2)}
.empty b{display:block;color:var(--ink);font-size:17px}
.empty p{margin-top:6px;font-size:14px}
.sug{border-top:1px solid var(--line)}
.sug .ci{grid-template-columns:64px 1fr auto}
.sug .add{width:36px;height:36px;font-size:20px}
.icons4{row-gap:26px}

/* ===== rodada 4 ===== */
/* tipografia tecnológica: títulos em Space Grotesk, rótulos em mono */
.slide h1,.sh h2,.cat-h h1,.pd h1,.store h2,.cat h3,.cat.big h3{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.035em;font-weight:700}
.slide h1{letter-spacing:-.04em}
.kick2{display:inline-flex;align-items:center;gap:8px;font-family:Mono,monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue2);margin-bottom:12px}
.kick2::before{content:"";width:18px;height:1px;background:currentColor}
.bens small,.card .pr small,.cat small,.store li b,.specs div,.price-tag,.inst{font-family:Mono,monospace;letter-spacing:.02em}
.specs b{font-family:"Space Grotesk",Inter,sans-serif}
.card .pr b,.pd .pr b{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em}
.mainnav a{font-family:Mono,monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
/* sombra de chão nas impressoras dos banners */
.vis.prod,.vis.group{position:relative}
.vis.prod::after{content:"";position:absolute;left:50%;bottom:52px;width:62%;height:34px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(5,12,22,.38),rgba(5,12,22,0) 70%);z-index:0;filter:blur(2px)}
[data-theme=dark] .vis.prod::after{background:radial-gradient(ellipse at center,rgba(0,0,0,.7),rgba(0,0,0,0) 70%)}
.vis.prod img{position:relative;z-index:1;filter:drop-shadow(0 18px 18px rgba(5,12,22,.22))}
.vis.group .podium{background:radial-gradient(ellipse at center,rgba(5,12,22,.32),transparent 70%);height:40px;bottom:46px}
[data-theme=dark] .vis.group .podium{background:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%)}
.vis.group img{filter:drop-shadow(0 16px 16px rgba(5,12,22,.25))}
/* HUD */
.hud{position:relative;width:380px;max-width:100%;margin:auto}
.hud svg{width:100%;display:block;overflow:visible}
.hud circle{fill:none}
.h-r1{stroke:color-mix(in srgb,var(--blue2) 22%,transparent);stroke-width:1}
.h-r2{stroke:color-mix(in srgb,var(--blue2) 40%,transparent);stroke-width:1;stroke-dasharray:2 6}
.h-ticks line{stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:1.2}
.h-ticks line.m{stroke:var(--blue2);stroke-width:2}
.h-ticks{transform-origin:200px 200px;animation:hrot 60s linear infinite}
.h-r3{stroke:color-mix(in srgb,var(--blue2) 30%,transparent);stroke-width:1;stroke-dasharray:40 10 4 10;transform-origin:200px 200px;animation:hrot 18s linear infinite reverse}
.h-seg{stroke:color-mix(in srgb,var(--blue2) 14%,transparent);stroke-width:14;stroke-dasharray:1.6 .9}
.h-prog{stroke:var(--blue2);stroke-width:14;stroke-dasharray:1.6 .9;transform:rotate(-90deg);transform-origin:200px 200px;-webkit-mask:none;filter:drop-shadow(0 0 8px var(--blue2))}
.slide.on .h-prog{animation:hfill 6s steps(40) infinite}
@keyframes hfill{0%{stroke-dasharray:0 100}85%,100%{stroke-dasharray:100 0}}
.h-r4{stroke:color-mix(in srgb,var(--ink) 12%,transparent);stroke-width:1;fill:color-mix(in srgb,var(--surf) 70%,transparent)}
.h-scan{transform-origin:200px 200px;animation:hrot 4s linear infinite}
.h-scan path{fill:url(#none);fill:color-mix(in srgb,var(--blue2) 12%,transparent)}
.h-dot{transform-origin:200px 200px;animation:hrot 4s linear infinite}.h-dot circle{fill:var(--blue2);filter:drop-shadow(0 0 6px var(--blue2))}
@keyframes hrot{to{transform:rotate(360deg)}}
.h-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.h-txt small,.h-txt span{font-family:Mono,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue2)}
.h-txt span{color:var(--mut);letter-spacing:.08em;font-size:10.5px;margin-top:4px}
.h-txt b{font-family:Mono,monospace;font-weight:700;font-size:60px;letter-spacing:-.02em;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums}
@media(max-width:900px){.hud{width:230px}.h-txt b{font-size:36px}.h-txt span{display:none}}

.cat.big{background:#062A44 url(img/gpt/card-impressoras.jpg) center bottom/cover no-repeat}
.cat.big::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,40,66,.35),transparent 40%);pointer-events:none}
.cat.big>*{position:relative;z-index:2}
.cat.big{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background-size .8s}
@media(max-width:900px){.cat.big{min-height:380px}}

.cat small.d{font-family:Inter,sans-serif;letter-spacing:0}
.h-txt b{font-size:54px}
@media(max-width:900px){.h-txt b{font-size:32px}}
/* miniatura sempre inteira, independente da proporção da impressora */
.card .ph{position:relative}
.card .ph img.std{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.ci .im{position:relative}.ci .im img.std{position:absolute;inset:8%;width:84%;height:84%}
.gal{position:sticky}.gal img.std{position:absolute;inset:12%;width:76%;height:76%}

/* ===== rodada 5: animações suaves ===== */
.sl-nav button i{width:100%!important;transform:scaleX(0);transform-origin:left center;will-change:transform}
.sl-nav button.on i{animation:prog2 6.5s linear forwards}
@keyframes prog2{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.h-prog{stroke-dasharray:100;stroke-dashoffset:100;filter:none;will-change:stroke-dashoffset}
.slide.on .h-prog{animation:hfill2 7s cubic-bezier(.45,.05,.25,1) infinite}
@keyframes hfill2{0%{stroke-dashoffset:100;opacity:1}78%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
.h-dot circle{filter:none}
.h-ticks,.h-r3,.h-dot{will-change:transform}
.h-ticks{animation-duration:90s}.h-r3{animation-duration:30s}.h-dot{animation-duration:7s;animation-timing-function:cubic-bezier(.45,.05,.25,1)}
.slide{transition:opacity .9s ease}
/* fotos de banner: sem sombra extra, a cena já vem pronta */
.slide.photo .bgimg{will-change:transform,opacity}
/* cabeçalho: 3DERAS | PORTO ALEGRE na mesma linha */
.hdr .logo span{display:flex;align-items:center;gap:10px;white-space:nowrap}
.hdr .logo b{display:inline;line-height:1}
.hdr .logo small{display:inline-flex;align-items:center;gap:10px;margin:0;line-height:1}
.hdr .logo small::before{content:"";width:1px;height:16px;background:var(--line);background:color-mix(in srgb,var(--ink) 25%,transparent)}
@media(max-width:720px){.hdr .logo span{gap:7px}.hdr .logo small{gap:7px;font-size:9px}.hdr .logo b{font-size:15px}.hdr .logo small::before{height:12px}}
@media(max-width:380px){.hdr .logo small{display:none}}
@media(max-width:720px){
  .hdr-in{flex-wrap:wrap}
  .hdr .logo img{width:34px;height:34px}
  .themebtn{width:38px;height:38px;padding:0;border-radius:50%;justify-content:center}
  .themebtn span,.themebtn i{display:none}
  .themebtn::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
}
@media(max-width:900px){.brands{grid-template-columns:repeat(3,minmax(0,1fr))}.brands a{padding:16px 8px;font-size:15px;overflow:hidden;text-overflow:ellipsis}}
/* PORTO ALEGRE no mesmo estilo do menu */
.hdr .logo small{font-family:Mono,monospace;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
@media(max-width:720px){.hdr .logo small{font-size:11px}}
/* bolinhas de cor: espaço para o hover não cortar */
.colors{padding:12px 6px 8px;margin:-12px -6px 0}
.colors a{padding-top:2px}
/* ===== rodada 6 ===== */
/* marcador do slider: o ativo cresce suave e a barra preenche em GPU */
.sl-nav{gap:6px;align-items:center}
.sl-nav button{width:22px;height:5px;border-radius:99px;transition:width .6s cubic-bezier(.22,.8,.2,1),background .4s;transform:translateZ(0)}
.sl-nav button.on{width:56px}
.sl-nav button i{border-radius:99px;transform:translateZ(0) scaleX(0);backface-visibility:hidden}
.sl-nav button.on i{animation:prog3 6.5s linear forwards}
@keyframes prog3{from{transform:translateZ(0) scaleX(0)}to{transform:translateZ(0) scaleX(1)}}
/* tira o zoom lento das fotos (pesava e travava o marcador) */
.slide.photo .bgimg,.slide.photo.on .bgimg{transform:none!important;transition:opacity .9s ease!important;will-change:auto}
/* rodapé no mesmo padrão do cabeçalho */
.ftr .logo span{display:flex;align-items:center;gap:10px;white-space:nowrap}
.ftr .logo b{display:inline;line-height:1}
.ftr .logo small{display:inline-flex;align-items:center;gap:10px;margin:0;line-height:1;font-family:Mono,monospace;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.ftr .logo small::before{content:"";width:1px;height:16px;background:color-mix(in srgb,var(--ink) 25%,transparent)}
.ftr .logo b{font-size:18px}.ftr .logo img{width:40px;height:40px}
@media(max-width:380px){.hdr .logo small{display:inline-flex;font-size:10px;letter-spacing:.04em;gap:6px}.hdr .logo span{gap:6px}.hdr .logo b{font-size:14px}.hdr .logo img{width:30px;height:30px}.hdr-act{gap:5px}.iconbtn,.themebtn{width:36px!important;height:36px!important}}
@media(max-width:900px){.ftr-in{grid-template-columns:1fr 1fr;gap:22px 18px}.ftr-in>div:first-child{grid-column:1/-1}.ftr-in>div:nth-child(2){grid-column:1/-1}.ftr-b{flex-direction:column;gap:6px;padding-right:80px}.ftr .logo small{font-size:11px}}

/* ===== rodada 7: ajustes de celular ===== */
@media(max-width:900px){
  .bens div{padding:12px 12px;gap:10px;align-items:center}
  .bens svg{width:22px;height:22px}
  .bens b{font-size:13px;line-height:1.25}
  .bens small{font-size:10.5px;letter-spacing:0;line-height:1.35;display:block;margin-top:2px}
  .cat>div{max-width:100%}
  .cat small{font-size:11px;letter-spacing:0}
  .cat small:first-child{white-space:nowrap}
  .cat small.d{font-size:12.5px;line-height:1.35;max-width:100%}
  .cat h3{font-size:21px}
  .cat .ci3{width:44%;right:-8px;bottom:-10px}
  .cat{min-height:190px;padding:18px}
  .tabs{gap:6px;margin-top:16px}
  .tabs a{padding:7px 12px;font-size:12.5px}
  .bgimg{background-size:auto 48%!important;background-position:100% 0!important;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 50%);mask-image:linear-gradient(180deg,#000 40%,transparent 50%)}
  .slide.photo .txt{padding-top:280px}
}
@media(max-width:900px){.cat.all small:first-child{white-space:normal}}
/* ===== rodada 8: só celular ===== */
@media(max-width:900px){
  /* etiqueta acima do título: menor, numa linha, afastada da foto */
  .slide .kick{font-size:9.5px;letter-spacing:.1em;padding:5px 10px;gap:6px;white-space:nowrap;margin-top:18px}
  .slide .kick::before{width:5px;height:5px}
  /* espaço entre botão e marcador */
  .slides{height:720px}
  .bgimg{background-size:auto 300px!important}
  .slide.photo .txt{padding-top:286px}
  .slide{padding-bottom:70px}
  .slide .btnrow{margin-top:22px}
  .sl-nav{bottom:24px}
  /* cores: 2 fileiras de 4, rolando para o lado */
  .colors{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/4);gap:14px 8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 8px;margin:-10px -4px 0}
  .colors a{width:auto;font-size:11px;scroll-snap-align:start;gap:6px}
  .colors i{width:48px;height:48px}
  .colors small{font-size:10px}
}

/* ===== rodada 9: só celular ===== */
.quick{display:none}
@media(max-width:900px){
  .card .pr b{white-space:nowrap;font-size:16px}
  .card .pr small{white-space:nowrap;font-size:10.5px}
  .card .bt{gap:6px}
  .card .add{width:34px;height:34px;font-size:19px}
  .pcard .tags{gap:4px}
  .pcard .tags span{font-size:9.5px;padding:2px 6px;letter-spacing:0;white-space:nowrap}
  .card h4{font-size:14px}
  .card .meta{font-size:9.5px}
}
@media(max-width:720px){
  .quick{display:flex;order:4;flex-basis:100%;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
  .quick::-webkit-scrollbar{display:none}
  .quick a{flex:none;font-family:Mono,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surf);color:var(--ink);white-space:nowrap}
  .quick a:first-child{background:var(--blue);border-color:var(--blue);color:#fff}
}
@media(max-width:900px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail{grid-auto-columns:minmax(0,72%)}
  .card{padding:10px;min-width:0}
  .card .pr{min-width:0}
  .card .pr b{font-size:15px}
}
@media(max-width:380px){.card .pr b{font-size:14px}.card .add{width:30px;height:30px;font-size:17px}}
@media(max-width:900px){
  .card .add{position:absolute;top:16px;right:16px;width:34px!important;height:34px!important;font-size:19px;box-shadow:0 6px 14px rgba(11,20,32,.18);z-index:3}
  .card .pr small{white-space:nowrap;overflow:visible}
  .card .bt{padding-top:10px}
}
/* carrossel no celular: largura fixa por card */
@media(max-width:900px){.rail{grid-auto-columns:68%!important}.rail>.card{width:100%;min-width:0}}
/* celular: foto do banner vira o fundo do box, com degradê longo até o texto */
@media(max-width:900px){
  .bgimg{background-size:auto 360px!important;background-position:50% 0!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.55) 54%,rgba(0,0,0,.18) 66%,transparent 78%)!important;
    mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.55) 54%,rgba(0,0,0,.18) 66%,transparent 78%)!important}
  .slide.photo .txt{padding-top:262px}
  .slide.photo .kick{background:color-mix(in srgb,var(--surf) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}
@media(max-width:900px){
  .bgimg{top:0!important;bottom:auto!important;height:400px!important;aspect-ratio:auto!important;background-size:cover!important;background-position:50% 0!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.22) 85%,transparent 100%)!important;
    mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.22) 85%,transparent 100%)!important}
}
@media(max-width:900px){.bgimg{height:360px!important;background-size:auto 100%!important;background-position:84% 0!important}.slide.photo .txt{padding-top:270px}}