/* self-hosted fonts (no third-party request; Google Fonts is slow or unreachable on many Iranian networks).
   The mono face (figures, codes) is optional: on a slow first visit the fallback is kept and the font is used from the cache next time.
   Subsets: Persian/Arabic + basic Latin; OFL 1.1 — fonts/OFL-*.txt */
@font-face{font-family:"Vazirmatn";src:url("/fonts/vazirmatn-33.0.3.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-var.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:optional;unicode-range:U+0020-007E,U+00A0,U+00B0,U+00B7,U+00D7,U+2013-2014,U+2026,U+2190-2193,U+2212,U+2713,U+2715,U+2032-2033}
/* Layout concept: a 19-inch rack elevation. Pages are stacked "units" on a dark server-room ground;
   rails with U-ticks frame sections, product photos sit on light studio panels, FUKA yellow marks action. */
/* Layout concept: a 19-inch rack elevation. Pages are stacked "units"; rails with U-ticks frame sections,
   product photos sit on light studio panels, FUKA yellow marks action. Night = server room, Day = technical workspace. */
:root{
  --ink:#0a0e1c;          /* ground */
  --ink-2:#10162b;        /* section surface */
  --ink-3:#18203d;        /* raised surface */
  --line:#263055;         /* hairline / rail */
  --line-2:#33406c;
  --text:#e8ebf5;
  --text-2:#d3d7e6;       /* long-form reading text */
  --muted:#98a1c0;
  --dim:#7d87ab;
  --fuka:#ffc816;         /* FUKA yellow — fills, buttons */
  --fuka-2:#fed442;
  --fuka-ink:#1a1400;
  --fuka-t:#ffc816;       /* accent used as text / thin strokes */
  --glow:#5b4bff;         /* backlight, ambient gradients only */
  --studio:#eef0f5; --studio-2:#e3e6ee; --studio-ink:#161b2e;
  --stage:#0d1226;        /* 3D viewport */
  --hdr:rgba(10,14,28,.86);
  --ok:#3ccf91; --warn:#ffb020; --err:#ff6b6b; --err-t:#ffb3b3;
  --cold:#4aa8ff; --hot:#ff8a3d;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --grid:rgba(120,140,255,.07);
  --spot:#1e2856;
  --f-display:"Vazirmatn",Tahoma,sans-serif;
  --f-body:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --s-1:.75rem; --s0:.875rem; --s1:1rem; --s2:1.125rem; --s3:1.375rem; --s4:1.75rem; --s5:2.25rem; --s6:3rem;
  --r:6px; --gut:clamp(16px,4vw,48px); --maxw:1240px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --ink:#f2f4f8; --ink-2:#ffffff; --ink-3:#e7ebf3; --line:#d6dce8; --line-2:#b9c2d5;
  --text:#10152a; --text-2:#29304b; --muted:#4c5572; --dim:#646d8b;
  --fuka:#ffc816; --fuka-2:#f2b800; --fuka-ink:#1a1400; --fuka-t:#7a5900; --glow:#8f84ff;
  --stage:#e9edf5; --hdr:rgba(255,255,255,.88);
  --ok:#0f8a57; --warn:#9a5b00; --err:#c42b2b; --err-t:#a3201f; --cold:#1d6fd0; --hot:#c4561a;
  --shadow:0 12px 34px rgba(20,30,60,.14); --grid:rgba(30,60,140,.07); --spot:#ffffff;
  color-scheme:light;
}}
:root[data-theme="light"]{
  --ink:#f2f4f8; --ink-2:#ffffff; --ink-3:#e7ebf3; --line:#d6dce8; --line-2:#b9c2d5;
  --text:#10152a; --text-2:#29304b; --muted:#4c5572; --dim:#646d8b;
  --fuka:#ffc816; --fuka-2:#f2b800; --fuka-ink:#1a1400; --fuka-t:#7a5900; --glow:#8f84ff;
  --stage:#e9edf5; --hdr:rgba(255,255,255,.88);
  --ok:#0f8a57; --warn:#9a5b00; --err:#c42b2b; --err-t:#a3201f; --cold:#1d6fd0; --hot:#c4561a;
  --shadow:0 12px 34px rgba(20,30,60,.14); --grid:rgba(30,60,140,.07); --spot:#ffffff;
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease!important}
@media (prefers-reduced-motion:reduce){html.theme-anim *{transition:none!important}}
img{max-width:100%}
html,body{background:var(--ink)}
body{color:var(--text);font-family:var(--f-body);font-size:var(--s1);line-height:1.8;-webkit-font-smoothing:antialiased}
#app{min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--fuka-t);outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.35;margin:0;text-wrap:balance;letter-spacing:-.012em}
h1{font-weight:900}
.h2{font-size:clamp(1.4rem,1rem + 1.4vw,2rem);margin-block:.6rem 1rem}
p{margin:0}
.mono{font-family:var(--f-mono);letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.eyebrow{font-family:"JetBrains Mono","Vazirmatn",Tahoma,sans-serif;font-size:var(--s-1);letter-spacing:0;font-weight:600;text-transform:uppercase;color:var(--fuka-t);display:flex;gap:.6rem;align-items:center}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--fuka)}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--hdr);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.25rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.brand img{height:30px;width:auto;box-sizing:content-box;border-radius:6px}
:root[data-theme="light"] .arco-logo{background:#10152a;padding:5px 9px;border-radius:6px}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .arco-logo{background:#10152a;padding:5px 9px;border-radius:6px}}
.brand .tag{font-size:var(--s-1);color:var(--muted);border-inline-start:1px solid var(--line-2);padding-inline-start:.75rem;line-height:1.3}
.brand .tag b{display:block;color:var(--fuka-t);font-weight:600}
.nav{display:flex;gap:.25rem;margin-inline-start:auto}
.nav a{padding:.45rem .7rem;border-radius:var(--r);color:var(--muted);font-size:var(--s0);font-weight:500;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);background:var(--ink-3)}
.quote-pill{display:flex;align-items:center;gap:.5rem;background:var(--fuka);color:var(--fuka-ink);font-weight:700;font-size:var(--s0);padding:.5rem .9rem;border-radius:var(--r);white-space:nowrap}
.quote-pill .count{background:var(--fuka-ink);color:var(--fuka-t);border-radius:99px;min-width:1.4rem;text-align:center;font-size:var(--s-1);line-height:1.4rem;padding-inline:.3rem}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r);padding:.4rem .6rem}
@media (max-width:1060px){.nav{display:none}.nav.open{display:flex;position:absolute;inset-inline:0;top:100%;flex-direction:column;background:var(--ink-2);padding:var(--gut);border-bottom:1px solid var(--line)}.menu-btn{display:block;margin-inline-start:auto}.brand .tag{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--r);padding:.7rem 1.15rem;font-weight:600;font-size:var(--s0);border:1px solid transparent;transition:transform .15s ease,background .15s}
.btn:active{transform:translateY(1px)}
.btn-y{background:var(--fuka);color:var(--fuka-ink)}
.btn-y:hover{background:var(--fuka-2)}
.btn-o{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-o:hover{border-color:var(--fuka);color:var(--fuka-t)}
.btn-s{padding:.45rem .8rem;font-size:var(--s-1)}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------- rack rail (signature divider) ---------- */
.rail{height:22px;border-block:1px solid var(--line);background:
  repeating-linear-gradient(to left,transparent 0 43px,var(--line) 43px 44px),
  linear-gradient(var(--ink-2),var(--ink-2));position:relative}
.rail::before,.rail::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--ink);border:1px solid var(--line-2);transform:translateY(-50%)}
.rail::before{inset-inline-start:var(--gut)}.rail::after{inset-inline-end:var(--gut)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(60% 80% at 15% 40%,color-mix(in srgb,var(--glow) 28%,transparent),transparent 70%),var(--ink)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;padding-block:clamp(2.5rem,6vw,4.5rem)}
.hero h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.25rem);font-weight:800;letter-spacing:-.01em;margin-block:1rem 1.1rem}
.hero h1 em{font-style:normal;color:var(--fuka-t)}
.hero .lede{font-size:var(--s2);color:var(--muted);max-width:34em}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero-fig{position:relative;margin:0;aspect-ratio:4/5;max-height:560px;justify-self:center;width:100%;max-width:470px}
.hero-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:10px;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
.hero-fig figcaption{position:absolute;bottom:8%;inset-inline-start:-6%;background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r);padding:.6rem .9rem;font-size:var(--s-1);line-height:1.5;box-shadow:var(--shadow)}
.hero-fig figcaption b{display:block;font-family:var(--f-mono);color:var(--fuka-t);font-weight:500}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2.25rem;max-width:620px}
.facts div{background:var(--ink-2);padding:.8rem .9rem}
.facts b{display:block;font-family:var(--f-mono);font-size:var(--s3);font-weight:500;color:var(--text);line-height:1.2}
.facts span{font-size:var(--s-1);color:var(--muted)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-fig{max-width:380px;order:-1;aspect-ratio:1/1}.hero-fig figcaption{inset-inline-start:4%}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- sections ---------- */
.sec{padding-block:clamp(3rem,6vw,5rem)}
.sec-alt{background:var(--ink-2)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2rem}
.sec-head h2{font-size:clamp(1.4rem,1rem + 1.4vw,2rem);margin-top:.6rem}
.sec-head p{color:var(--muted);max-width:38em;margin-top:.5rem}

/* ---------- lineup (to scale) ---------- */
.lineup{border:1px solid var(--line);border-radius:10px;background:linear-gradient(var(--ink-2),var(--ink));padding:1rem 0 .5rem}
.lineup-bar{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1rem .75rem;align-items:center;justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{border:1px solid var(--line-2);background:transparent;border-radius:99px;padding:.3rem .8rem;font-size:var(--s-1);color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--fuka);border-color:var(--fuka);color:var(--fuka-ink);font-weight:600}
.lineup-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:.5rem;-webkit-mask-image:linear-gradient(to left,#000 88%,transparent);mask-image:linear-gradient(to left,#000 88%,transparent)}
.lineup svg{display:block}
.rk{cursor:pointer}
.rk .body{transition:fill .2s}
.rk:hover .body,.rk:focus .body{fill:#2b3566}
.rk:hover .lab,.rk:focus .lab{fill:var(--fuka-t)}
.rk:focus{outline:none}
.lineup-tip{min-height:3.2rem;padding:.25rem 1rem 0;font-size:var(--s0);color:var(--muted);display:flex;gap:1.25rem;flex-wrap:wrap;align-items:baseline}
.lineup-tip b{color:var(--text);font-family:var(--f-display)}

/* ---------- product cards ---------- */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card .ph{background:radial-gradient(90% 80% at 50% 45%,#fff,var(--studio) 60%,var(--studio-2));aspect-ratio:1/1;padding:1.2rem;position:relative;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.card .ph .u{position:absolute;top:.7rem;inset-inline-start:.7rem;background:var(--studio-ink);color:var(--fuka-t);font-family:var(--f-mono);font-size:var(--s-1);padding:.15rem .5rem;border-radius:4px}
.card .bd{padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card h3{font-size:var(--s1);font-weight:600}
.card .sku{font-family:var(--f-mono);font-size:var(--s-1);color:var(--dim)}
.card .dims{font-size:var(--s-1);color:var(--muted)}
.card .ft{display:flex;align-items:end;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:.6rem;border-top:1px dashed var(--line)}
.price{font-family:var(--f-mono);font-weight:600;font-size:var(--s2);color:var(--text);line-height:1.2}
.price small{font-family:var(--f-body);font-size:var(--s-1);color:var(--muted);font-weight:400;margin-inline-start:.25rem}
.price.ask{font-family:var(--f-body);font-size:var(--s0);color:var(--fuka-t)}

/* family tiles */
.fams{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.fam{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:center;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:.8rem;transition:border-color .2s}
.fam:hover{border-color:var(--fuka)}
.fam .ph{background:var(--studio);border-radius:6px;width:100%;aspect-ratio:1/1;padding:.4rem;overflow:hidden}
.fam .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fam h3{font-size:var(--s0);font-weight:600;line-height:1.5}
.fam p{font-size:var(--s-1);color:var(--muted);margin-top:.2rem}
.fam .from{font-family:var(--f-mono);font-size:var(--s-1);color:var(--fuka-t);margin-top:.35rem}

/* applications */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.app{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.app .k{font-family:var(--f-mono);font-size:var(--s-1);color:var(--dim)}
.app h3{font-size:var(--s2)}
.app p{font-size:var(--s0);color:var(--muted)}
.app .links{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.6rem}
.app .links a{font-family:var(--f-mono);font-size:var(--s-1);border:1px solid var(--line-2);border-radius:4px;padding:.1rem .45rem;color:var(--text)}
.app .links a:hover{border-color:var(--fuka);color:var(--fuka-t)}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- exploded viewer ----------
   The catalog drawings are served as PNG with a transparent page (tools/exploded_png.py); the panel behind them is a
   theme token, so the drawing sits on the site's own day/night surface. */
.xv{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.25rem;align-items:start}
@media (max-width:860px){.xv{grid-template-columns:1fr}}
.xv-fig{position:relative;background:var(--ink-2);border-radius:10px;border:1px solid var(--line);overflow:hidden}
.xv-fig img{display:block;width:100%;height:auto;aspect-ratio:auto}
.hs{position:absolute;width:4.6%;aspect-ratio:1/1;transform:translate(50%,-50%);border-radius:50%;border:0;padding:0;background:transparent}
[dir="rtl"] .hs{transform:translate(50%,-50%)}
.hs::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:3px solid var(--fuka);opacity:0;transform:scale(.7);transition:opacity .2s,transform .2s}
.hs.on::after,.hs:hover::after,.hs:focus-visible::after{opacity:1;transform:scale(1)}
.hs.on::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:color-mix(in srgb,var(--fuka) 30%,transparent);animation:ping 1.2s ease-out infinite}
@keyframes ping{from{transform:scale(.8);opacity:.9}to{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hs.on::before{animation:none}}
.legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.25rem}
.legend li{display:flex;gap:.6rem;align-items:center;padding:.35rem .5rem;border-radius:var(--r);cursor:default;font-size:var(--s0);line-height:1.45}
.legend li .n{flex:0 0 1.7rem;height:1.7rem;border-radius:50%;background:var(--ink-3);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--f-mono);font-size:var(--s-1)}
.legend li small{display:block;font-family:var(--f-mono);font-size:.7rem;color:var(--dim);direction:ltr;text-align:right}
.legend li.on{background:var(--ink-3)}
.legend li.on .n{background:var(--fuka);color:var(--fuka-ink);border-color:var(--fuka)}

/* ---------- catalog page ---------- */
.cat{display:grid;grid-template-columns:240px minmax(0,1fr);gap:1.5rem;align-items:start}
@media (max-width:900px){.cat{grid-template-columns:1fr}}
.filters{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);display:flex;flex-direction:column;gap:1.25rem;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:1rem}
@media (max-width:900px){.filters{position:static}}
.filters h4{font-family:var(--f-body);font-size:var(--s-1);font-weight:600;color:var(--muted);letter-spacing:.06em;margin-bottom:.5rem}
.filters .chips{gap:.35rem}
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;font-size:var(--s0);color:var(--muted)}
select,input,textarea{font:inherit;color:var(--text);background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);padding:.5rem .7rem}
textarea{min-height:110px;resize:vertical;width:100%}
label{font-size:var(--s-1);color:var(--muted);display:flex;flex-direction:column;gap:.3rem}

/* ---------- product page ---------- */
.crumb{font-size:var(--s-1);color:var(--dim);display:flex;flex-wrap:wrap;gap:.4rem;margin-block:1.5rem 1rem}
.crumb a:hover{color:var(--fuka-t)}
.pd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
@media (max-width:900px){.pd{grid-template-columns:1fr}}
.gal-main{background:radial-gradient(90% 80% at 50% 45%,#fff,var(--studio) 60%,var(--studio-2));border-radius:12px;aspect-ratio:1/1;padding:6%;position:relative;overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.gal-main .note{position:absolute;bottom:.6rem;inset-inline-start:.8rem;font-size:var(--s-1);color:#5a6080}
.thumbs{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto}
.thumbs button{flex:0 0 72px;height:72px;background:var(--studio);border:2px solid transparent;border-radius:8px;padding:.3rem}
.thumbs button[aria-current="true"]{border-color:var(--fuka)}
.thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pd h1{font-size:clamp(1.4rem,1rem + 1.5vw,2.1rem)}
.pd .meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:.8rem 1.2rem}
.tag2{font-size:var(--s-1);border:1px solid var(--line-2);border-radius:4px;padding:.1rem .5rem;color:var(--muted)}
.tag2.y{border-color:var(--fuka);color:var(--fuka-t)}
.buy{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:1.2rem;display:flex;flex-direction:column;gap:.9rem}
.buy .price{font-size:var(--s4)}
.buy .src{font-size:var(--s-1);color:var(--dim)}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.qty button{background:var(--ink-3);border:0;width:2.2rem;height:2.4rem}
.qty input{width:3rem;text-align:center;border:0;border-radius:0;background:transparent}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.keyspecs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.keyspecs div{background:var(--ink-2);padding:.6rem .5rem;text-align:center}
.keyspecs b{display:block;font-family:var(--f-mono);font-weight:500;font-size:var(--s1)}
.keyspecs span{font-size:.7rem;color:var(--muted)}
@media (max-width:520px){.keyspecs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.phones{display:flex;flex-wrap:wrap;gap:.35rem}
.phone{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:var(--s0);border:1px solid var(--line-2);border-radius:var(--r);padding:.25rem .55rem;background:var(--ink);direction:ltr;user-select:all}
.phone button{background:none;border:0;color:var(--dim);font-size:var(--s-1);padding:0;direction:rtl}
.phone button:hover{color:var(--fuka-t)}
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin-top:2.5rem;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:.75rem 1rem;color:var(--muted);font-weight:500;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--fuka)}
.tabpanel{padding-block:1.5rem}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:var(--s0)}
th,td{padding:.6rem .8rem;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-weight:600;color:var(--muted);font-size:var(--s-1);background:var(--ink-2)}
td.m{font-family:var(--f-mono)}
tr.hi td{background:color-mix(in srgb,var(--fuka) 12%,transparent)}
tr:last-child td{border-bottom:0}
.spec-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.spec-list div{background:var(--ink-2);padding:.7rem .9rem;display:flex;justify-content:space-between;gap:1rem;font-size:var(--s0)}
.spec-list span{color:var(--muted)}
.spec-list b{font-family:var(--f-mono);font-weight:500}
.feat{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem 1.5rem}
.feat li{display:flex;gap:.6rem;font-size:var(--s0);line-height:1.6}
.feat li::before{content:"";flex:0 0 8px;height:8px;margin-top:.55em;background:var(--fuka);transform:rotate(45deg)}
.uruler{display:flex;gap:1rem;align-items:flex-end}
.uruler .bar{width:46px;border:2px solid var(--line-2);border-radius:3px;padding:2px;display:flex;flex-direction:column-reverse;gap:1px;background:var(--ink)}
.uruler .bar i{display:block;height:6px;background:var(--ink-3)}
.uruler .bar i:nth-child(5n){background:var(--line-2)}
.note-box{border:1px solid var(--line-2);border-inline-start:3px solid var(--fuka);border-radius:var(--r);padding:.8rem 1rem;font-size:var(--s0);color:var(--muted);background:var(--ink-2)}

/* ---------- knowledge ---------- */
.kb{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}
.kbc{border:1px solid var(--line);border-radius:10px;padding:1.3rem;background:var(--ink-2);display:flex;flex-direction:column;gap:.6rem;transition:border-color .2s}
.kbc:hover{border-color:var(--fuka)}
.kbc .k{font-family:var(--f-mono);font-size:var(--s-1);color:var(--fuka-t)}
.kbc h3{font-size:var(--s2)}
.kbc p{font-size:var(--s0);color:var(--muted)}
.article{max-width:46rem;margin-inline:auto}
.article h1{font-size:clamp(1.5rem,1rem + 1.8vw,2.3rem);margin-block:.8rem 1rem}
.article h2{font-size:var(--s3);margin-block:2rem .7rem}
.article p,.article li{font-size:var(--s2);line-height:1.95;color:var(--text-2)}
.article p+p{margin-top:1rem}
.article ul{padding-inline-start:1.2rem}
.article .lead{font-size:var(--s3);color:var(--muted);line-height:1.8}
.formula{font-family:var(--f-mono);direction:ltr;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;margin-block:1rem;font-size:var(--s1)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:1.4rem;display:flex;flex-direction:column;gap:1rem}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.formgrid .full{grid-column:1/-1}
@media (max-width:560px){.formgrid{grid-template-columns:1fr}}

/* quote list */
.ql{display:flex;flex-direction:column;gap:.5rem}
.qi{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:.8rem;align-items:center;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:.6rem}
.qi .ph{background:var(--studio);border-radius:6px;aspect-ratio:1/1;padding:.3rem;overflow:hidden}
.qi .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (max-width:620px){.qi{grid-template-columns:56px minmax(0,1fr)}.qi .qty,.qi .lt{grid-column:2}}
.total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:1rem;margin-top:.5rem}

/* clients + footer */
.clients{background:#fff;border-radius:10px;padding:1rem;display:grid;place-items:center}
.clients img{max-height:150px;width:auto}
.foot{border-top:1px solid var(--line);background:var(--ink-2);padding-block:3rem 2rem;font-size:var(--s0)}
.foot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2rem}
@media (max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot .cols{grid-template-columns:1fr}}
.foot h4{font-family:var(--f-body);font-size:var(--s-1);color:var(--muted);letter-spacing:.06em;font-weight:600;margin-bottom:.8rem}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.foot a{color:var(--text-2)}.foot a:hover{color:var(--fuka-t)}
.foot .legal{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;color:var(--dim);font-size:var(--s-1)}
.toast{position:fixed;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));inset-inline-start:50%;transform:translateX(50%);background:var(--text);color:var(--ink);padding:.6rem 1rem;border-radius:var(--r);font-size:var(--s0);z-index:90;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.empty{border:1px dashed var(--line-2);border-radius:10px;padding:2rem;text-align:center;color:var(--muted)}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}*{scroll-behavior:auto}}

/* ---------- v2: shared utilities ---------- */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
/* number-only labels (2–7U, 18–27, 91.5 kg) keep logical order inside RTL */
.chip,.tag2,.kb-meta span,.facts b,.spec-list b,.keyspecs b,.price,.dz-rack span,.lineup-tip span{unicode-bidi:plaintext}
td.m,th.m{direction:ltr;text-align:right}
.hint{font-size:var(--s-1);color:var(--muted);line-height:1.6}
label.inl{flex-direction:row;align-items:center;gap:.35rem;font-family:var(--f-mono)}
.badge{display:inline-flex;align-items:center;font-size:.72rem;border-radius:99px;padding:.05rem .55rem;background:color-mix(in srgb,var(--fuka) 16%,transparent);color:var(--fuka-t);font-weight:600;white-space:nowrap}
.badge.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.sync,.stock{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--s-1);color:var(--muted);line-height:1.4}
.sync i,.stock i{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:0 0 8px}
.sync.ok i,.stock.ok i{background:var(--ok)} .sync.warn i,.stock.warn i{background:var(--warn)} .stock.off i{background:var(--dim)}
.sync.warn{color:var(--warn)}
.stock{font-weight:600;color:var(--text)}

/* ---------- knowledge center ---------- */
.kbcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:3rem}
.kbcat{position:relative;border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.3rem 1.1rem;background:linear-gradient(160deg,var(--ink-3),var(--ink-2) 60%);display:flex;flex-direction:column;gap:.45rem;transition:border-color .2s,transform .2s}
.kbcat:hover{border-color:var(--fuka);transform:translateY(-2px)}
.kbcat .n{position:absolute;top:1rem;inset-inline-end:1.1rem;color:var(--dim);font-size:var(--s-1)}
.kbcat .en{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--fuka-t);text-transform:uppercase}
.kbcat h3{font-size:var(--s2)} .kbcat p{font-size:var(--s0);color:var(--muted)}
.kb-meta{display:flex;flex-wrap:wrap;gap:.35rem .8rem;font-size:var(--s-1);color:var(--dim);align-items:center;margin-top:auto}
.kbc .kb-meta{padding-top:.4rem}
.kbsec{padding-block:1.5rem;border-top:1px solid var(--line);scroll-margin-top:90px}
.path{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;counter-reset:p}
.path li a{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:.9rem;align-items:center;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;transition:border-color .2s}
.path li a:hover{border-color:var(--fuka)}
.path .st{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--fuka-t);font-size:var(--s0)}
.path .tt b{display:block;font-weight:600;font-size:var(--s0)} .path .tt small{display:block;color:var(--muted);font-size:var(--s-1);line-height:1.6}
.path .kb-meta{margin:0}
@media (max-width:620px){.path li a{grid-template-columns:2.2rem minmax(0,1fr)}.path li a .kb-meta{grid-column:2}}
.path.sm li a{grid-template-columns:1.8rem minmax(0,1fr);padding:.5rem .6rem;background:transparent}
.path.sm .st{width:1.8rem;height:1.8rem;font-size:var(--s-1)}
.path.sm li[aria-current="step"] a{border-color:var(--fuka);background:var(--ink-3)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.5rem;align-items:start}
.art-grid .article{margin:0;max-width:46rem}
.art-aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);display:flex;flex-direction:column;gap:1rem}
@media (max-width:980px){.art-grid{grid-template-columns:1fr}.art-aside{position:static}}
.outline,.srcs{padding-inline-start:1.3rem}
.outline li,.srcs li{font-size:var(--s1);line-height:1.9;color:var(--text-2)}
.srcs li{font-size:var(--s0);direction:ltr;text-align:left;unicode-bidi:plaintext}
.srcs a{color:var(--fuka-t);text-decoration:underline;text-underline-offset:3px}
.vis{margin:0;padding-inline-start:1.1rem;font-size:var(--s0);color:var(--muted);display:flex;flex-direction:column;gap:.3rem}
figure.dg{margin:1.5rem 0;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:1rem}
figure.dg svg{display:block;width:100%;height:auto;direction:ltr}
figure.dg figcaption{font-size:var(--s-1);color:var(--dim);margin-top:.6rem}
.dg text{font-family:var(--f-mono)} .dg-t{fill:var(--muted);font-size:12px} .dg-s{fill:var(--dim);font-size:10.5px} .dg-strong{fill:var(--text);font-weight:600}
.dg-box{fill:none;stroke:var(--line-2);stroke-width:2} .dg-dev{fill:var(--ink-3);stroke:var(--line-2)} .dg-hole{fill:var(--dim)}
.dg-dev.z1{fill:#26346b} .dg-dev.z2{fill:#1f5a52} .dg-dev.z3{fill:#5e2a35}
.dg-dim{stroke:var(--dim);stroke-width:1.2;fill:none} .dg-acc{stroke:var(--fuka)} .dg-acc-t{fill:var(--fuka-t)} .dg-acc-f{fill:var(--fuka)}
.dg-fill{fill:var(--fuka)} .dg-bar:hover .dg-fill{fill:var(--fuka-2)}
.dg-node{fill:var(--ink-3);stroke:var(--line-2)}
.dg-cold{stroke:var(--cold);stroke-width:2;fill:none} .dg-hot{stroke:var(--hot);stroke-width:2;fill:none} .dg-cold-f{fill:var(--cold)} .dg-hot-f{fill:var(--hot)}
.dg-cold-z{fill:color-mix(in srgb,var(--cold) 10%,transparent)} .dg-hot-z{fill:color-mix(in srgb,var(--hot) 10%,transparent)}

/* ---------- 3D designer ---------- */
.dz{display:grid;gap:1rem;grid-template-columns:330px minmax(0,1fr) 290px;grid-template-areas:"cfg view elev" "bom bom bom";align-items:start}
.dz-cfg{grid-area:cfg}.dz-3d{grid-area:view}.dz-elev{grid-area:elev}.dz-bom{grid-area:bom}
@media (max-width:1100px){.dz{grid-template-columns:minmax(0,1fr) 290px;grid-template-areas:"view view" "cfg elev" "bom bom"}}
@media (max-width:760px){.dz{grid-template-columns:minmax(0,1fr);grid-template-areas:"view" "cfg" "elev" "bom"}}
.dz .panel{gap:.75rem;padding:1.1rem}
.dz-h{font-family:var(--f-body);font-size:var(--s0);font-weight:700;color:var(--text);margin-top:.25rem}
.dz-rack{display:flex;flex-direction:column;gap:.15rem;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:.7rem .8rem;font-size:var(--s-1);color:var(--muted)}
.dz-rack b{font-size:var(--s1);color:var(--fuka-t)}
.dz-fans{font-size:var(--s0);justify-content:space-between}
.dz-custom summary{cursor:pointer;font-size:var(--s0);color:var(--muted)}
.dz-3d{position:relative}
.dz-stage{position:relative;height:clamp(380px,62vh,640px);border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--stage)}
.dz-stage canvas{display:block;width:100%!important;height:100%!important;touch-action:none;cursor:grab}
.dz-stage canvas:active{cursor:grabbing}
@media (max-width:760px){.dz-stage{height:58vh;min-height:340px}.dz-stage canvas{touch-action:pan-y}}
.dz-load{position:absolute;inset:0;display:grid;place-items:center;padding:2rem;text-align:center;color:var(--muted);font-size:var(--s0)}
.dz-bar{display:flex;flex-wrap:wrap;gap:.35rem;margin-block:.6rem .3rem;align-items:center}
.dz-bar .sp{flex:1}
.dz-elevwrap{display:flex;flex-direction:column;align-items:center;gap:.3rem;max-height:720px;overflow:auto}
.el-frame{fill:var(--ink);stroke:var(--line-2);stroke-width:2}
.el-slot{fill:transparent;stroke:var(--line);stroke-width:1}
.el-n{fill:var(--dim);font-family:var(--f-mono);font-size:9px}
.el-it{cursor:pointer} .el-it rect{stroke:transparent;stroke-width:2}
.el-it.sel rect{stroke:var(--fuka)} .el-it.warn rect{stroke:var(--warn);stroke-dasharray:4 2} .el-it.err rect{stroke:var(--err);stroke-width:2.5}
.el-it:focus{outline:none} .el-it:focus rect{stroke:var(--fuka)}
.el-l{fill:#fff;font-size:10px;font-family:var(--f-body);pointer-events:none;direction:rtl;unicode-bidi:embed}
.dz-selbox{display:flex;flex-direction:column;gap:.4rem;background:var(--ink);border:1px solid var(--fuka);border-radius:8px;padding:.7rem .8rem;font-size:var(--s0)}
.vmsg{border-radius:8px;padding:.6rem .8rem;font-size:var(--s-1);line-height:1.7;margin-top:.5rem;border:1px solid}
.vmsg ul{margin:.2rem 0 0;padding-inline-start:1rem}
.vmsg.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok)}
.vmsg.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn)}
.vmsg.err{border-color:color-mix(in srgb,var(--err) 55%,transparent);color:var(--err-t);background:color-mix(in srgb,var(--err) 8%,transparent)}

/* ---------- design-system page ---------- */
.ds-h{font-size:var(--s2);margin-block:2rem .8rem}
.ds-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.ds-sw div{display:flex;flex-direction:column;gap:.15rem;font-size:var(--s-1);color:var(--muted)}
.ds-sw i{display:block;height:56px;border-radius:8px;border:1px solid var(--line-2)}
.ds-sw b{font-weight:500;color:var(--text)}
.ds-type{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1rem;align-items:baseline;padding-block:.35rem;border-bottom:1px dashed var(--line)}
.ds-type>span:first-child{font-size:var(--s-1);color:var(--dim)}
@media (max-width:560px){.ds-type{grid-template-columns:1fr;gap:.2rem}}

/* ---------- mobile tab bar + small-screen refinements ---------- */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:0;bottom:0;z-index:60;background:color-mix(in srgb,var(--ink-2) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 0 .45rem;font-size:.68rem;color:var(--muted)}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
  .tabbar a[aria-current="page"]{color:var(--fuka-t)}
  .tabbar .count{position:absolute;top:.25rem;inset-inline-start:calc(50% + 4px);background:var(--fuka);color:var(--fuka-ink);border-radius:99px;font-size:.62rem;min-width:1.1rem;line-height:1.1rem;text-align:center;padding-inline:.2rem}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .quote-pill{display:none}
  .top .wrap{min-height:58px}
}
@media (max-width:900px){
  .filters{flex-direction:column;gap:.75rem;padding:.8rem}
  .filters .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}
  .filters .chips .chip{white-space:nowrap}
}
@media (max-width:560px){
  .card .ph{padding:.8rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .grid .card .bd{padding:.7rem}
  .grid .card .dims{font-size:.7rem}
  .grid .card .ft{flex-direction:column;align-items:flex-start}
  .price{font-size:var(--s1)}
  .sec{padding-block:2.5rem}
}

/* ---------- v3: icons, designer modes, SEO home, custom, diag ---------- */
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-.2em}
.nav a{display:flex;align-items:center;gap:.4rem}.nav .ic{display:none}
@media (max-width:1060px){.nav .ic{display:inline-block;width:20px;height:20px;color:var(--fuka-t)}.nav.open a{padding:.75rem .6rem;font-size:var(--s1)}}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px}.menu-btn .ic{width:22px;height:22px}
@media (max-width:1060px){.menu-btn{display:flex}}
.eyebrow .ic{width:14px;height:14px}
.seg{display:flex;gap:.4rem;overflow-x:auto;margin-bottom:1rem;padding-bottom:.2rem;scrollbar-width:none}
.seg button{display:flex;align-items:center;gap:.45rem;white-space:nowrap;background:var(--ink-2);border:1px solid var(--line-2);border-radius:99px;padding:.55rem 1rem;color:var(--muted);font-weight:600;font-size:var(--s0)}
.seg button[aria-selected="true"]{background:var(--fuka);border-color:var(--fuka);color:var(--fuka-ink)}
.pal{display:flex;flex-direction:column}
.pal-row{display:grid;grid-template-columns:36px 1.8rem 36px minmax(0,1fr) auto;align-items:center;gap:.45rem;padding:.3rem 0;border-bottom:1px dashed var(--line)}
.pm{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);background:var(--ink-3);display:grid;place-items:center;padding:0;color:var(--text)}
.pm:hover,.pm:focus-visible{border-color:var(--fuka);color:var(--fuka-t)}.pm:active{transform:scale(.94)}
.pal-n{text-align:center;font-size:var(--s1);font-weight:600}.pal-l{font-size:var(--s0);line-height:1.45}.pal-u{font-size:var(--s-1);color:var(--dim);direction:ltr}
@media (pointer:coarse){.pm{width:42px;height:42px}.pal-row{grid-template-columns:42px 1.8rem 42px minmax(0,1fr) auto}}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.fgrid input,.fgrid select{width:100%;min-height:42px}.fg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fgrid small{font-family:var(--f-mono);color:var(--dim)}
.dz{grid-template-areas:"cfg view elev" "eng eng eng" "bom bom bom" "sheet sheet sheet"}
.dz-eng{grid-area:eng}.dz-sheet{grid-area:sheet}
@media (max-width:1100px){.dz{grid-template-areas:"view view" "cfg elev" "eng eng" "bom bom" "sheet sheet"}}
@media (max-width:760px){.dz{grid-template-areas:"view" "cfg" "elev" "eng" "bom" "sheet"}}
.dz-stage.light{background:#eef1f7;border-color:#c9cee0}.dz-stage.dark{background:#0d1226}
.dz-bar .chip{display:inline-flex;align-items:center;gap:.3rem;min-height:36px}
@media (pointer:coarse){.dz-bar .chip{min-height:42px;padding-inline:.9rem}}
.warn-t{color:var(--warn);font-weight:600}
.eng{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:.6rem}
.eng div{background:var(--ink-2);padding:.65rem .75rem}.eng b{display:block;font-size:var(--s2);font-weight:600;direction:ltr;text-align:right}.eng span{font-size:var(--s-1);color:var(--muted)}
.vmsg.info{border-color:var(--line-2);color:var(--muted)}.vmsg b .ic{margin-inline-end:.3rem}
.pl-plate{fill:#d9dce3}.pl-rail{fill:#8e95a5}.pl-l{font-size:6.5px;fill:#1a1f33;font-family:var(--f-mono);pointer-events:none}
.sheet-view{background:#fff;border-radius:8px;overflow:auto;margin-top:.8rem;-webkit-overflow-scrolling:touch}.sheet-view svg{display:block;width:100%;height:auto;min-width:620px}
.types,.czs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.type,.cz{position:relative;border:1px solid var(--line);border-radius:14px;padding:1.3rem;background:linear-gradient(160deg,var(--ink-3),var(--ink-2) 65%);display:flex;flex-direction:column;gap:.45rem;transition:border-color .2s,transform .2s}
.type:hover,.cz:hover{border-color:var(--fuka);transform:translateY(-2px)}
.type .en,.cz .en{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fuka-t)}
.type h3,.cz h3{font-size:var(--s3)}.type p,.cz p{font-size:var(--s0);color:var(--muted)}
.go{display:inline-flex;align-items:center;gap:.35rem;color:var(--fuka-t);font-size:var(--s0);font-weight:600;margin-top:auto;padding-top:.4rem}
.cz-ic{width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--fuka) 14%,transparent);color:var(--fuka-t);display:grid;place-items:center}.cz-ic .ic{width:24px;height:24px}
.ptable a{color:var(--fuka-t);font-weight:600}.ptable td{white-space:nowrap}
.faq{display:flex;flex-direction:column;gap:.5rem;max-width:56rem}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--ink-2);padding:0 1.1rem}
.faq summary{cursor:pointer;font-weight:700;padding:.9rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--fuka-t);font-family:var(--f-mono);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"−"}.faq p{color:var(--text-2);padding-bottom:1rem;line-height:1.95}
@media (max-width:760px){.tbl-wrap td:not(.m){white-space:normal;min-width:9rem}}
/* spam-trap fields (bots fill them, people never see them): visually hidden IN PLACE. Never push them off-screen with left/right offsets:
   in this RTL page an element at left:-9999px makes the page ~10,000 px wide and a phone opens /contact scrolled into blank space. */
.hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.dgl{padding-inline-start:1.2rem;display:flex;flex-direction:column;gap:.7rem;margin:0}
.dgl li{display:flex;flex-direction:column;gap:.4rem;border-bottom:1px dashed var(--line);padding-bottom:.6rem}.dgl input{width:100%}
.dgauto{margin:0;display:flex;flex-direction:column}.dgauto div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:.6rem;border-bottom:1px dashed var(--line);padding:.35rem 0}
.dgauto dt{color:var(--dim);font-size:var(--s-1)}.dgauto dd{margin:0;word-break:break-word;font-size:var(--s-1)}
@media (max-width:560px){.dgauto div{grid-template-columns:1fr;gap:.1rem}}

/* ---------- v4: theme button, cinematic hero, featured strip, mountain story, technology ---------- */
.theme-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line-2);background:var(--ink-2);border-radius:99px;padding:.35rem .8rem;min-height:40px;color:var(--text);font-size:var(--s-1);font-weight:600;flex-shrink:0}
.theme-btn .ic{color:var(--fuka-t);width:18px;height:18px}.theme-btn:hover{border-color:var(--fuka-t)}
@media (max-width:1060px){.theme-btn{margin-inline-start:auto}.menu-btn{margin-inline-start:.4rem}}
@media (max-width:560px){.theme-btn .tb-l{display:none}.theme-btn{width:42px;justify-content:center;padding:0}}
.btn-l{padding:.85rem 1.35rem;font-size:var(--s1)}
.feat-strip{border-bottom:1px solid var(--line);background:var(--ink-2)}
.fstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;padding-block:1.1rem}
.fcard{display:flex;flex-direction:column;background:var(--ink);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .2s,transform .2s;min-width:0}
.fcard:hover{border-color:var(--fuka-t);transform:translateY(-2px)}
.fcard .ph{background:radial-gradient(90% 80% at 50% 45%,#fff,var(--studio) 60%,var(--studio-2));aspect-ratio:4/3;padding:.6rem;display:block}
.fcard .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fcard .bd{padding:.55rem .7rem .7rem;display:flex;flex-direction:column;gap:.1rem;font-size:var(--s-1)}
.fcard .sku{font-family:var(--f-mono);color:var(--dim)}.fcard b{font-weight:600;font-size:var(--s0)}.fcard .price{font-size:var(--s0)}
.fcard.more{align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1rem;color:var(--fuka-t)}.fcard.more .ic{width:28px;height:28px}
@media (max-width:900px){.fstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.fcard{flex:0 0 42%;scroll-snap-align:start}}
@media (max-width:560px){.fcard{flex-basis:58%}}
.tech-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem;align-items:end;margin-block:.5rem 2rem}
@media (max-width:900px){.tech-hero{grid-template-columns:1fr}}
.h1t{font-size:clamp(1.6rem,1rem + 2vw,2.6rem);margin-block:.6rem .8rem}
.tsearch{flex-direction:row;align-items:center;gap:.5rem;background:var(--ink-2);border:1px solid var(--line-2);border-radius:99px;padding:.15rem .9rem;flex:1;max-width:540px;color:var(--muted)}
.tsearch input{border:0;background:transparent;flex:1;min-width:0;min-height:40px}
.journey{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;border-inline-start:2px solid var(--line-2);padding-inline-start:1rem}
.journey li{display:flex;align-items:center;gap:.6rem;font-size:var(--s0);color:var(--text-2)}.journey .ic{color:var(--fuka-t)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.ttile{position:relative;border:1px solid var(--line);border-radius:14px;padding:1.2rem;background:linear-gradient(160deg,var(--ink-3),var(--ink-2) 60%);display:flex;flex-direction:column;gap:.4rem;transition:border-color .2s,transform .2s}
.ttile:hover{border-color:var(--fuka-t);transform:translateY(-2px)}
.ttile .n{position:absolute;top:1rem;inset-inline-end:1.1rem;color:var(--dim);font-size:var(--s-1)}
.ttile .en{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;color:var(--fuka-t);text-transform:uppercase}
.ttile h3{font-size:var(--s2)}.ttile p{font-size:var(--s0);color:var(--muted)}
.ttile-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--fuka) 15%,transparent);color:var(--fuka-t);margin-bottom:.3rem}
.ttile-ic .ic{width:24px;height:24px}.ttile-ic.lg{width:64px;height:64px;border-radius:18px}.ttile-ic.lg .ic{width:32px;height:32px}
.tcat-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;align-items:start;margin-block:.5rem 1rem}
.tcat-head p{max-width:44em}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.scard{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .2s}
.scard:hover{border-color:var(--fuka-t)}
.scard .ph{background:radial-gradient(90% 80% at 50% 45%,#fff,var(--studio) 60%,var(--studio-2));aspect-ratio:4/3;padding:1rem}
.scard .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.scard .bd{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.3rem}.scard h3{font-size:var(--s0)}.scard .sku{font-family:var(--f-mono);font-size:.7rem;color:var(--dim);direction:ltr;text-align:right}.scard .dims{font-size:var(--s-1);color:var(--muted)}
.mini{display:flex;gap:.6rem;align-items:center;padding:.4rem 0;border-bottom:1px dashed var(--line);font-size:var(--s0)}
.mini img{width:46px;height:46px;object-fit:contain;background:var(--studio);border-radius:8px;padding:3px;mix-blend-mode:normal}
.mini small{display:block;color:var(--dim);font-size:var(--s-1)}
.h2{font-size:clamp(1.3rem,1rem + 1.2vw,1.8rem)}
/* ---------- rack selection checklists ---------- */
.seg .cnt{font-size:.7rem;opacity:.75;margin-inline-start:.15rem}
.sel-filters{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:end;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem}
.sel-filters h4{font-family:var(--f-body);font-size:var(--s-1);font-weight:600;color:var(--muted);margin-bottom:.4rem}
.sel-sort{flex-direction:row;align-items:center;gap:.5rem;margin-inline-start:auto}
.sel{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.25rem;align-items:start}
.slist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ink-2)}
.srow{display:grid;grid-template-columns:auto 56px minmax(0,1fr) auto 20px;gap:.75rem;align-items:center;padding:.55rem .8rem;border-bottom:1px solid var(--line);transition:background .15s}
.srow:last-child{border-bottom:0}.srow:hover{background:var(--ink-3)}.srow.on{background:color-mix(in srgb,var(--fuka) 10%,var(--ink-2));box-shadow:inset 3px 0 0 var(--fuka)}
.sck{display:grid;place-items:center;width:28px;height:44px}.sck input{width:20px;height:20px;accent-color:var(--fuka)}
.sth{width:56px;height:56px;background:var(--studio);border-radius:8px;padding:4px;display:grid;place-items:center;color:#4b536e}.sth img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--fuka) 15%,transparent);color:var(--fuka-t)}
.srow:has(.sic){grid-template-columns:44px minmax(0,1fr) auto 20px}
.sname{background:none;border:0;padding:.2rem 0;text-align:start;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.sname b{font-weight:600;font-size:var(--s0);line-height:1.5}.sname small{color:var(--muted);font-size:var(--s-1)}
.sprice .price{font-size:var(--s0)}.schev{color:var(--dim)}
.sel-bar{position:sticky;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;background:var(--ink-3);border:1px solid var(--fuka-t);border-radius:12px;padding:.6rem .8rem;margin-top:.8rem;box-shadow:var(--shadow);z-index:5}
.sdet{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:1.1rem;display:flex;flex-direction:column;gap:.8rem;min-height:240px}
.sdet h3{font-size:var(--s2)}.sdet .keyspecs{grid-template-columns:repeat(5,minmax(0,1fr))}
.sdet-ph{background:radial-gradient(90% 80% at 50% 45%,#fff,var(--studio) 60%,var(--studio-2));border-radius:10px;aspect-ratio:4/3;padding:.8rem;display:grid;place-items:center}
.sdet-ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.sdet-ph.ic-ph .ic{width:56px;height:56px;color:#7a5900}
.sdet-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;color:var(--muted);font-size:var(--s0);flex:1;padding:1.5rem}
.sdet-empty .ic{width:34px;height:34px;color:var(--fuka-t)}.sdet-empty b{color:var(--text)}
.sdet-x{display:none;position:absolute;top:.6rem;inset-inline-end:.6rem;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--ink-3);place-items:center}
@media (max-width:900px){
  .sel{grid-template-columns:1fr}
  .sdet{position:fixed;inset-inline:0;bottom:0;top:auto;z-index:70;max-height:82vh;overflow:auto;border-radius:18px 18px 0 0;padding:1.1rem max(16px,env(safe-area-inset-right,0px)) calc(1.2rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));transform:translateY(105%);transition:transform .3s ease;box-shadow:0 -10px 40px rgba(0,0,0,.35);min-height:0}
  .sdet.open{transform:none}.sdet-x{display:grid}.sdet-empty{display:none}
  .srow{grid-template-columns:auto 48px minmax(0,1fr) 16px}.srow .sprice{grid-column:3;grid-row:2}.sth{width:48px;height:48px}
  .srow:has(.sic){grid-template-columns:44px minmax(0,1fr) 16px}
}
@media (prefers-reduced-motion:reduce){.sdet{transition:none}}
/* ---------- product page: catalog references ---------- */
.catref{display:grid;grid-template-columns:72px minmax(0,1fr);gap:.8rem;align-items:center;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:.7rem;margin-top:.8rem}
.catref img{width:72px;height:auto;border-radius:4px;border:1px solid var(--line-2);background:#fff}
.catref .links{display:flex;flex-wrap:wrap;gap:.4rem}.catref h4{font-family:var(--f-body);font-size:var(--s-1);color:var(--muted);font-weight:600;margin-bottom:.35rem}
.src-legend{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .8rem}
.srcb{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;border-radius:99px;padding:.15rem .6rem;border:1px solid var(--line-2);color:var(--muted)}
.srcb i{width:9px;height:9px;border-radius:50%}.srcb.cat i{background:#3ccf91}.srcb.par i{background:var(--fuka)}.srcb.sch i{background:var(--dim)}
/* ---------- catalog viewer ---------- */
/* contact links */
.phone a{color:inherit}.phone a:hover{color:var(--fuka-t)}
a.mail{direction:ltr;unicode-bidi:isolate}
/* ---------- designer v4: workspace ---------- */
.dzw{max-width:1480px}
.lvl button{padding:.45rem .85rem}
.lvl button[aria-checked="true"]{background:var(--fuka);border-color:var(--fuka);color:var(--fuka-ink)}
.dz-sum{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:20;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;background:var(--hdr);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;padding:.5rem .9rem;margin-bottom:1rem}
.dz-sum span{display:flex;flex-direction:column;line-height:1.3}.dz-sum small{font-size:.68rem;color:var(--muted)}.dz-sum b{font-size:var(--s0);font-weight:600;direction:ltr;text-align:right}
.dz-sum .pill{flex-direction:row}
.pill{display:inline-flex;align-items:center;gap:.3rem;border-radius:99px;padding:.2rem .65rem;font-size:var(--s-1);font-weight:700}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}.pill.err{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err)}
.dz2{display:grid;grid-template-columns:340px minmax(0,1fr) 300px;gap:1rem;align-items:start;transition:grid-template-columns .25s ease}
.dz2.cfg-closed{grid-template-columns:150px minmax(0,1fr) 300px}.dz2.cfg-closed .cfg-body{display:none}.dz2.cfg-closed .cfg-head{flex-direction:column;align-items:stretch}
.cfg-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cfg-body{display:flex;flex-direction:column;gap:.75rem}
.dz-guide{margin:0;padding-inline-start:1.2rem;display:flex;flex-direction:column;gap:.45rem;background:color-mix(in srgb,var(--fuka) 8%,var(--ink));border:1px solid color-mix(in srgb,var(--fuka) 35%,var(--line));border-radius:10px;padding:.7rem .8rem .7rem .8rem;padding-inline-start:1.8rem;font-size:var(--s-1);color:var(--muted)}
.dz-guide b{display:block;color:var(--text);font-size:var(--s0)}
.dz-3d{position:relative;min-width:0}
.tb3{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-bottom:.5rem}
.tb3 .chip{display:inline-flex;align-items:center;gap:.3rem;min-height:38px;padding-inline:.75rem}
.tb3 .chip[aria-pressed="true"]{background:var(--fuka);border-color:var(--fuka);color:var(--fuka-ink);font-weight:600}
.tb-sep{width:1px;height:24px;background:var(--line-2);margin-inline:.15rem}
@media (pointer:coarse){.tb3 .chip{min-height:44px}}
.dz2 .dz-stage{height:clamp(460px,70vh,820px)}
.dz-stage.dark{background:#0d1226}
.dz-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1rem;margin-top:1rem;align-items:start}
.dz-sec summary{cursor:pointer;list-style:none;display:flex;align-items:center}.dz-sec summary::-webkit-details-marker{display:none}
.dz-sec summary::after{content:"+";margin-inline-start:auto;color:var(--fuka-t);font-family:var(--f-mono)}.dz-sec[open] summary::after{content:"−"}
@media (max-width:1180px){.dz2,.dz2.cfg-closed{grid-template-columns:minmax(0,1fr) 300px}.dz2 .dz-3d{grid-column:1/-1;order:-1}.dz2.cfg-closed .cfg-body{display:flex}.dz2 #dzcfgx{display:none}}
@media (max-width:760px){.dz2,.dz2.cfg-closed{grid-template-columns:minmax(0,1fr)}.dz2 .dz-stage{height:62vh;min-height:360px}.dz-row2{grid-template-columns:1fr}.dz-sum{top:calc(env(safe-area-inset-top,0px) + 58px);gap:.3rem .9rem;padding:.4rem .7rem}.dz-sum span:nth-child(4){display:none}}
.dz-stage canvas{touch-action:pan-y}
@media (pointer:fine){.dz-stage canvas{touch-action:none}}
.dz-3d.full{position:fixed;inset:0;z-index:95;background:var(--ink);padding:calc(.6rem + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(.6rem + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column}
.dz-3d.full .dz-stage{flex:1;height:auto!important;min-height:0}.dz-3d.full .dz-stage canvas{touch-action:none}.dz-3d.full #dz3dnote{display:none}
html.dz-lock,html.dz-lock body{overflow:hidden}
/* ---------- product 3D / exploded ---------- */
.p3d-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.25rem;align-items:start}
@media (max-width:900px){.p3d-grid{grid-template-columns:1fr}}
.p3d-stage{height:clamp(420px,62vh,640px)}
.h3wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.h3{position:absolute;top:0;left:0;margin:-15px 0 0 -15px;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--fuka);color:var(--fuka-ink);font:700 .78rem var(--f-mono);display:grid;place-items:center;pointer-events:auto;box-shadow:0 2px 10px rgba(0,0,0,.4);padding:0;transition:background .15s}
.h3.on{background:#fff;color:#1a1400;outline:3px solid var(--fuka)}
@media (pointer:coarse){.h3{width:36px;height:36px;margin:-18px 0 0 -18px}}
.p3list li[data-role]{cursor:pointer}.p3list li.nm{opacity:.62}
.p3info{margin-top:1rem}
.p3card{display:flex;flex-direction:column;gap:.55rem;background:var(--ink-2);border:1px solid var(--fuka-t);border-radius:12px;padding:1rem;font-size:var(--s0)}
.p3card p{color:var(--text-2);line-height:1.85}
.p3fig{position:relative;background:var(--ink-2);border-radius:8px;overflow:hidden;border:1px solid var(--line)}.p3fig img{display:block;width:100%}
.p3fig i{position:absolute;width:7%;aspect-ratio:1/1;transform:translate(50%,-50%);border:3px solid #e0a800;border-radius:50%;box-shadow:0 0 0 4px rgba(255,200,22,.35)}
/* ---------- battery configurator ---------- */
.bt{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:1.25rem;align-items:start}
@media (max-width:980px){.bt{grid-template-columns:1fr}}
.bt-out{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.bt-rec{display:flex;flex-direction:column;gap:.5rem}
.bt-svg{display:block;width:100%;height:auto;max-height:440px;direction:ltr}
.bt-cab{fill:none;stroke:var(--line-2);stroke-width:2}.bt-shelf{fill:var(--dim)}.bt-b{fill:#3d6fd6;stroke:var(--ink);stroke-width:.8}
.bt-t{fill:var(--muted);font:11px var(--f-mono)}.bt-cog{stroke:var(--hot);stroke-width:1.4;stroke-dasharray:4 3}
/* ---------- assistant ---------- */
.as-fab{position:fixed;z-index:85;inset-inline-start:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:.45rem;background:var(--fuka);color:var(--fuka-ink);border:0;border-radius:99px;padding:.7rem 1rem;font-weight:700;font-size:var(--s0);box-shadow:var(--shadow)}
.as-fab .ic{width:20px;height:20px}
.as-panel{position:fixed;z-index:86;inset-inline-start:max(16px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.as-panel[hidden]{display:none!important}
.as-h{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.75rem .9rem;border-bottom:1px solid var(--line);background:var(--ink-3)}
.as-h small{display:block;color:var(--muted);font-size:.7rem}.as-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--ink-2);display:grid;place-items:center}
.as-log{flex:1;overflow:auto;padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
.as-m{max-width:92%;border-radius:12px;padding:.6rem .75rem;font-size:var(--s0);line-height:1.85}
.as-m.u{align-self:flex-start;background:var(--fuka);color:var(--fuka-ink);border-end-start-radius:4px}
.as-m.a{align-self:flex-end;background:var(--ink);border:1px solid var(--line);border-end-end-radius:4px}
.as-m a{color:var(--fuka-t);text-decoration:underline;text-underline-offset:3px}.as-m ul{margin:.3rem 0;padding-inline-start:1.1rem}.as-m hr{border:0;border-top:1px dashed var(--line-2);margin:.5rem 0}
.as-m .as-src{font-size:.72rem;color:var(--muted)}.as-acts{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}.as-acts a{text-decoration:none;color:var(--text)}
.as-sug{display:flex;gap:.35rem;overflow-x:auto;padding:.4rem .8rem;scrollbar-width:none;border-top:1px solid var(--line)}.as-sug .chip{white-space:nowrap;min-height:36px}
.as-f{display:flex;gap:.4rem;padding:.6rem .8rem;border-top:1px solid var(--line)}.as-f input{flex:1;min-width:0;min-height:44px}.as-f .btn{min-width:48px}
.as-pv{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--muted);padding:0 .8rem .6rem}
@media (max-width:760px){.as-fab{bottom:calc(76px + env(safe-area-inset-bottom,0px));padding:.65rem}.as-fab span{display:none}
  .as-panel{inset-inline:0;bottom:0;width:100%;height:min(86vh,640px);border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}}
html.dz-lock .as-fab{display:none}
.dz2>*,.dz-row2>*{grid-area:auto}
@media (max-width:1180px){.dz2 .dz-3d{grid-column:1/-1;order:-1}}
.sth{overflow:hidden}.sth img{max-width:100%;max-height:100%}
.bt-out .eng{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:560px){.bt-out .eng{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.dz-sum{position:static}}
@media (max-width:760px){.dzw .sec-head p{display:none}.dzw .sec-head{margin-bottom:.4rem!important}.lvl button{padding:.4rem .7rem;font-size:var(--s-1)}.dzw .seg{margin-bottom:.6rem}}
.lvl button{min-height:42px}
/* ---------- v5: engineering rack carousel ---------- */
.rc{min-width:0;display:flex;flex-direction:column;gap:.6rem}
.rc-stage{position:relative;height:clamp(300px,44vh,440px);border-radius:18px;overflow:hidden;touch-action:pan-y;
  background:radial-gradient(52% 58% at 50% 46%,var(--spot),transparent 72%),linear-gradient(180deg,transparent 70%,color-mix(in srgb,var(--line) 35%,transparent));border:1px solid var(--line)}
.rc-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:none;transition:transform .8s cubic-bezier(.2,.75,.2,1),opacity .55s ease,visibility 0s linear .8s}
.rc-slide.on{opacity:1;visibility:visible;transition:transform .8s cubic-bezier(.2,.75,.2,1),opacity .55s ease,visibility 0s}
.rc-slide.from-next{transform:translateX(-30%) scale(.94) rotateY(10deg);opacity:0;visibility:visible}
.rc-slide.from-prev{transform:translateX(30%) scale(.94) rotateY(-10deg);opacity:0;visibility:visible}
.rc-slide.out-next{transform:translateX(30%) scale(.96);opacity:0}.rc-slide.out-prev{transform:translateX(-30%) scale(.96);opacity:0}
.rc-link{display:block;width:100%;height:100%}
.rc-svg{display:block;width:100%;height:100%;overflow:visible}
.rc-img{opacity:0}.rc-slide.on .rc-img{animation:rcImg .7s ease .25s forwards}
.rc-trace{fill:none;stroke:var(--fuka-t);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.rc-slide.on .rc-trace{animation:draw 1.05s ease forwards,rcTrace .7s ease 1.25s forwards}
.rc-dim{opacity:0}.rc-slide.on .rc-dim{animation:fadeIn .5s ease .65s forwards}
.rc-dim path{stroke:var(--text-2);stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke}
.rc-dim text{fill:var(--text);font:600 30px var(--f-mono);direction:ltr}.rc-dim text.v{writing-mode:vertical-rl;text-anchor:middle}.rc-dim text.tag{fill:var(--fuka-t);font-size:28px}
.rc-slide.on .rc-svg{animation:rcCam 7s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes rcImg{from{opacity:0}to{opacity:1}} @keyframes draw{to{stroke-dashoffset:0}} @keyframes fadeIn{to{opacity:1}} @keyframes rcTrace{to{opacity:.32}} @keyframes rcCam{from{transform:scale(1.045) translateY(8px)}to{transform:none}}
.rc-link:focus-visible{outline-offset:-4px}
.rc-ctrl{display:flex;align-items:center;gap:.4rem;align-self:center;background:var(--ink-2);border:1px solid var(--line);border-radius:99px;padding:.2rem}
.rc-btn{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;color:var(--text)}
.rc-btn:hover,.rc-btn:focus-visible{background:var(--ink-3);color:var(--fuka-t)}.rc-btn .ic{width:20px;height:20px}
.rc-count{font-size:var(--s0);color:var(--muted);min-width:4.2rem;text-align:center;direction:ltr}.rc-count b{color:var(--text)}
.rc-info{display:flex;flex-direction:column;gap:.45rem;min-height:12.5rem;margin-top:.4rem}
.rc-title{font-size:var(--s2);font-weight:700;line-height:1.5}.rc-title a:hover{color:var(--fuka-t)}
.rc-specs{display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:.3rem 1.1rem;justify-content:start}
.rc-specs span{display:flex;flex-direction:column;line-height:1.35}.rc-specs b{font-size:var(--s0);font-weight:600;direction:ltr;text-align:right}.rc-specs small{font-size:.68rem;color:var(--muted)}
.rc-buy{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem}.rc-buy .price{font-size:var(--s2)}
.rc-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.rc-meta .hint{flex:1;min-width:12rem;font-size:.7rem}
.rc-scale{width:74px;height:56px;flex:0 0 auto;direction:ltr}.rc-scale .ref{fill:none;stroke:var(--line-2);stroke-dasharray:3 2}.rc-scale .cur{fill:var(--fuka);opacity:.85}
.rc-scale text{font:8px var(--f-mono);fill:var(--muted)}.rc-scale line{stroke:var(--line-2)}
.rc-note{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--warn)}
.rc-strip{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem .1rem .4rem;scrollbar-width:thin;scroll-snap-type:x proximity}
.rc-th{position:relative;flex:0 0 58px;height:70px;border:1px solid var(--line);border-radius:10px;background:var(--ink-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;scroll-snap-align:center;overflow:hidden}
.rc-th img{width:44px;height:44px;object-fit:contain}.rc-th span{font-size:.62rem;color:var(--muted);line-height:1}
.rc-th[aria-selected="true"]{border-color:var(--fuka-t);background:var(--ink-3)}.rc-th[aria-selected="true"] span{color:var(--fuka-t)}
.rc-prog{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:0;background:var(--fuka)}
.rc.play:not(.paused) .rc-th[aria-selected="true"] .rc-prog{animation:rcProg 6.5s linear forwards}
@keyframes rcProg{to{width:100%}}
.rc.still .rc-slide,.rc.still .rc-slide.on{transition:none}.rc.still .rc-img,.rc.still .rc-dim{opacity:1;animation:none}
.rc.still .rc-trace{stroke-dashoffset:0;opacity:.32;animation:none}.rc.still .rc-svg{animation:none}
@media (prefers-reduced-motion:reduce){.rc-slide,.rc-slide.on{transition:none}.rc-img,.rc-dim{opacity:1!important;animation:none!important}.rc-trace{stroke-dashoffset:0;opacity:.32;animation:none!important}.rc-svg{animation:none!important}}
@media (max-width:900px){.rc-stage{height:min(360px,58vw + 120px)}.rc-info{min-height:0}}
@media (max-width:560px){.rc-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.rc-stage{height:330px}}

/* ==================== v6 (phase 2.2) ==================== */
/* ---------- contextual section tokens ----------
   One global theme (data-theme / OS preference). Sections only pick their own surface from tokens that are defined
   for BOTH modes, so a section can be a dusk landscape, a drafting studio or paper while the toggle stays global. */
:root{
  --mh-sky:#1c2029; --mh-ground:#0b0d12; --mh-text:#f4f1ec; --mh-sub:#cfc9c0; --mh-r1:#20242e; --mh-r2:#171a22; --mh-r3:#0f1116;
  --mh-topo:rgba(232,226,214,.10); --mh-shade:rgba(8,10,14,.62); --mh-acc:#ffc816; --mh-cap:#b9b2a7;
  --show-spot:#1d2442; --show-floor:rgba(150,165,220,.16); --show-grid:rgba(140,160,255,.055);
  --fx-a:#15171d; --fx-b:#0d0f14; --fx-r1:#1b1e26; --fx-r2:#13151b; --fx-text:#ece8e1;
  --paper:#fbfaf7; --paper-edge:#e4e0d8; --desk:#151a2c; --desk-2:#0f1322; --spine:rgba(0,0,0,.38);
  --tech-acc:#4aa8ff; --tech-glow:rgba(74,168,255,.10);
  --menu-bg:#121831; --menu-hover:#1b2346;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --mh-sky:#dcd6cf; --mh-ground:#f2f4f8; --mh-text:#15171c; --mh-sub:#3e4048; --mh-r1:#cfc8c0; --mh-r2:#c2bab1; --mh-r3:#b3aaa1;
  --mh-topo:rgba(60,52,44,.12); --mh-shade:rgba(242,244,248,0); --mh-acc:#7a5900; --mh-cap:#4d4a45;
  --show-spot:#ffffff; --show-floor:rgba(30,45,90,.14); --show-grid:rgba(30,60,140,.06);
  --fx-a:#ebe6df; --fx-b:#f2f4f8; --fx-r1:#ddd6cd; --fx-r2:#d2cac0; --fx-text:#15171c;
  --paper:#ffffff; --paper-edge:#d9d4ca; --desk:#e3e6ee; --desk-2:#d5dae5; --spine:rgba(30,30,40,.22);
  --tech-acc:#1d6fd0; --tech-glow:rgba(29,111,208,.07);
  --menu-bg:#ffffff; --menu-hover:#eef1f7;
}}
:root[data-theme="light"]{
  --mh-sky:#dcd6cf; --mh-ground:#f2f4f8; --mh-text:#15171c; --mh-sub:#3e4048; --mh-r1:#cfc8c0; --mh-r2:#c2bab1; --mh-r3:#b3aaa1;
  --mh-topo:rgba(60,52,44,.12); --mh-shade:rgba(242,244,248,0); --mh-acc:#7a5900; --mh-cap:#4d4a45;
  --show-spot:#ffffff; --show-floor:rgba(30,45,90,.14); --show-grid:rgba(30,60,140,.06);
  --fx-a:#ebe6df; --fx-b:#f2f4f8; --fx-r1:#ddd6cd; --fx-r2:#d2cac0; --fx-text:#15171c;
  --paper:#ffffff; --paper-edge:#d9d4ca; --desk:#e3e6ee; --desk-2:#d5dae5; --spine:rgba(30,30,40,.22);
  --tech-acc:#1d6fd0; --tech-glow:rgba(29,111,208,.07);
  --menu-bg:#ffffff; --menu-hover:#eef1f7;
}

/* ---------- 1. mountain hero ---------- */
.mh{position:relative;overflow:hidden;isolation:isolate;color:var(--mh-text);
  min-height:clamp(560px,calc(100svh - 104px),860px);display:flex;align-items:center;
  background:linear-gradient(180deg,var(--mh-sky) 0%,color-mix(in srgb,var(--mh-sky) 55%,var(--mh-ground)) 58%,var(--mh-ground) 100%)}
.mh-bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.mh-ridge{position:absolute;inset-inline:0;bottom:0;width:100%;height:62%}
.mh-ridge .r1{fill:var(--mh-r1)}.mh-ridge .r2{fill:var(--mh-r2)}.mh-ridge .r3{fill:var(--mh-r3)}
.mh-ridge path:last-child{fill:var(--mh-ground)}
.mh-topo{position:absolute;top:-4%;inset-inline-start:-6%;width:min(62vw,880px);height:auto;fill:none;stroke:var(--mh-topo);stroke-width:1}
/* the photograph: anchored to the inline end (left in RTL), full height, its inner edge dissolves into the scene */
.mh-photo{position:absolute;z-index:-1;margin:0;top:0;bottom:0;inset-inline-end:0;width:min(54vw,calc((100svh - 104px) * .84),780px)}
.mh-photo{-webkit-mask-image:linear-gradient(to right,#000 62%,transparent 99%),linear-gradient(to bottom,#000 80%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 62%,transparent 99%),linear-gradient(to bottom,#000 80%,transparent);mask-composite:intersect}
.mh-photo picture{display:contents}.mh-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.mh-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--mh-shade),transparent 34%,transparent 64%,var(--mh-shade))}
.mh-photo figcaption{position:absolute;top:.9rem;inset-inline-end:max(var(--gut),env(safe-area-inset-left,0px));z-index:1;font-size:.7rem;color:var(--mh-cap);background:color-mix(in srgb,var(--mh-ground) 55%,transparent);padding:.1rem .5rem;border-radius:4px}
.mh-in{position:relative;width:100%;display:flex;align-items:center;min-height:inherit;padding-block:clamp(2.5rem,7vh,5rem)}
.mh-copy{max-width:min(42rem,calc(100% - min(54vw,calc((100svh - 104px) * .84),780px) + 2rem));display:flex;flex-direction:column;gap:1.1rem;position:relative;padding-inline-start:1.4rem}
/* rack-rail motif: a measured vertical rule with U ticks beside the headline */
.mh-copy::before{content:"";position:absolute;inset-block:.3rem;inset-inline-start:0;width:9px;border-inline-start:2px solid var(--mh-acc);
  background:repeating-linear-gradient(to bottom,var(--mh-acc) 0 1px,transparent 1px 14px) no-repeat;background-size:7px 100%;opacity:.85}
.mh-k{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;letter-spacing:.14em;color:var(--mh-sub)}
.mh-k i{width:22px;height:2px;background:var(--mh-acc)}
.mh h1{font-size:clamp(2rem,1.1rem + 2.8vw,3.4rem);font-weight:900;line-height:1.28;letter-spacing:-.018em;color:var(--mh-text);text-wrap:balance}
.mh h1 em{font-style:normal;color:var(--mh-acc)}
.mh-sub{font-size:var(--s2);color:var(--mh-sub);max-width:30em}
.mh .ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.3rem}
.mh-ghost{border:1px solid color-mix(in srgb,var(--mh-text) 40%,transparent);color:var(--mh-text);background:color-mix(in srgb,var(--mh-ground) 30%,transparent);backdrop-filter:blur(4px)}
.mh-ghost:hover{border-color:var(--mh-acc);color:var(--mh-acc)}
.mh-geo{position:absolute;bottom:1.1rem;inset-inline-start:max(var(--gut),env(safe-area-inset-right,0px));font-size:.66rem;letter-spacing:.12em;color:var(--mh-cap);opacity:.85}
.mh-down{position:absolute;bottom:.9rem;inset-inline-start:50%;transform:translateX(50%) rotate(-90deg);width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--mh-text) 30%,transparent);background:transparent;color:var(--mh-text);display:grid;place-items:center}
.mh-down:hover{color:var(--mh-acc);border-color:var(--mh-acc)}
@media (prefers-reduced-motion:no-preference){.mh-photo img{animation:mhIn 1.6s cubic-bezier(.2,.7,.2,1) both}.mh-copy>*{animation:fade .8s ease both}.mh-copy>*:nth-child(2){animation-delay:.08s}.mh-copy>*:nth-child(3){animation-delay:.16s}.mh-copy>*:nth-child(4){animation-delay:.24s}}
@keyframes mhIn{from{opacity:.35;transform:scale(1.04)}to{opacity:1;transform:none}}   /* never fully transparent: the photo is the LCP element */
@media (max-width:980px){
  .mh{flex-direction:column;align-items:stretch;min-height:0}
  .mh-photo{position:relative;z-index:0;width:100%;height:min(66svh,128vw);inset:auto}
  .mh-photo{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
  .mh-photo img{object-position:50% 52%}
  @media (min-width:561px){.mh-photo img{object-position:50% 50%}}
  .mh-in{min-height:0;margin-top:-4.5rem;padding-block:0 3.2rem}
  .mh-copy{max-width:none}
  .mh-geo{display:none}.mh-down{display:none}
  .mh-ridge{height:40%}
}
@media (max-width:560px){.mh h1{font-size:clamp(1.75rem,6.6vw + .4rem,2.4rem)}.mh-sub{font-size:var(--s1)}.mh .ctas .btn{flex:1 1 auto}}

/* ---------- 2. engineering showcase (carousel set into the page) ---------- */
.show{position:relative;padding-block:clamp(2.5rem,5vw,4rem) .5rem;background:linear-gradient(180deg,var(--mh-ground) 0,var(--ink) 260px)}
.show-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 2rem;margin-bottom:.4rem}
.show-head .h2{margin-block:.5rem 0}
.show-facts{display:flex;flex-wrap:wrap;gap:.2rem 0;margin:0}
.show-facts div{padding-inline:1.1rem;border-inline-start:1px solid var(--line-2)}.show-facts div:first-child{border-inline-start:0;padding-inline-start:0}
.show-facts dt{font-size:var(--s-1);color:var(--muted)}.show-facts dd{margin:0;font-family:var(--f-mono);font-size:var(--s3);font-weight:500;color:var(--text);direction:ltr;text-align:right;line-height:1.3}
.show .rc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-areas:"info stage" "ctrl stage" "strip strip";gap:.4rem 2.5rem;align-items:start}
.show .rc-stage{grid-area:stage;height:clamp(340px,50vh,500px);border:0;border-radius:0;overflow:visible;
  background:radial-gradient(46% 52% at 50% 50%,var(--show-spot),transparent 74%)}
/* drafting grid that fades out at the edges, plus a measured floor line: no frame, no card */
.show .rc-stage::before{content:"";position:absolute;inset:-6% -4%;pointer-events:none;
  background-image:linear-gradient(var(--show-grid) 1px,transparent 1px),linear-gradient(90deg,var(--show-grid) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
.show .rc-stage::after{content:"";position:absolute;inset-inline:6%;bottom:7%;height:1px;background:linear-gradient(90deg,transparent,var(--show-floor) 15%,var(--show-floor) 85%,transparent)}
.show .rc-info{grid-area:info;min-height:0;margin-top:clamp(1rem,4vh,2.5rem)}
.show .rc-ctrl{grid-area:ctrl;align-self:start;justify-self:start;background:transparent;border:0;border-block:1px solid var(--line);border-radius:0;padding:.25rem 0;margin-top:.6rem}
.show .rc-strip{grid-area:strip;border-top:1px solid var(--line);padding-top:.8rem;margin-top:.4rem}
.show .rc-th{background:transparent;border-color:transparent;border-radius:8px}
.show .rc-th:hover{border-color:var(--line-2)}
.show .rc-th[aria-selected="true"]{background:color-mix(in srgb,var(--fuka) 9%,transparent);border-color:color-mix(in srgb,var(--fuka-t) 60%,transparent)}
.show .rc-title{font-size:var(--s3)}
.show .rc-note{background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:6px;padding:.25rem .55rem;color:var(--warn);line-height:1.6}
@media (max-width:900px){
  .show .rc{grid-template-columns:1fr;grid-template-areas:"stage" "ctrl" "info" "strip"}
  .show .rc-stage{height:min(380px,62vw + 120px)}
  .show .rc-ctrl{justify-self:center}
  .show .rc-info{margin-top:.4rem}
  .show-facts div{padding-inline:.8rem}.show-facts dd{font-size:var(--s2)}
}
@media (max-width:560px){.show .rc-stage{height:330px}}

/* ---------- 7. factory story ---------- */
.fx{position:relative;overflow:hidden;isolation:isolate;color:var(--fx-text);background:linear-gradient(180deg,var(--fx-a),var(--fx-b))}
.fx-ridge{position:absolute;inset-inline:0;bottom:0;width:100%;height:30%;z-index:-1}.fx-ridge .r1{fill:var(--fx-r1)}.fx-ridge .r2{fill:var(--fx-r2)}
.fx-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(3rem,7vw,6rem)}
.fx-h{font-size:clamp(2.2rem,1.3rem + 3.6vw,4.4rem);font-weight:900;line-height:1.12;letter-spacing:-.022em;margin-top:.8rem;color:var(--fx-text)}
.fx-h span{display:block;color:var(--fuka-t)}
.fx-copy>p{color:var(--text-2);max-width:34em;margin-top:1.1rem;line-height:1.95}
.fx-copy .hint{color:var(--muted)}
.fx-facts{display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;margin:1.4rem 0 .2rem}
.fx-facts dt{font-size:var(--s-1);color:var(--muted)}.fx-facts dd{margin:0;font-size:var(--s4);font-weight:600;color:var(--fx-text);direction:ltr;text-align:right}
.fx-media{display:grid;grid-template-columns:1fr;gap:.9rem}
.fx-photo{margin:0;position:relative;aspect-ratio:3/2;border-radius:14px;overflow:hidden}
.fx-photo.has img{display:block;width:100%;height:100%;object-fit:cover}
.fx-photo.has figcaption{position:absolute;bottom:0;inset-inline:0;padding:.5rem .8rem;font-size:var(--s-1);color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.fx-photo.slot{border:2px dashed var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;text-align:center;padding:1.2rem;color:var(--muted);font-size:var(--s-1);line-height:1.7;background:color-mix(in srgb,var(--ink-2) 55%,transparent)}
.fx-photo.slot .ic{width:34px;height:34px;color:var(--fuka-t)}.fx-photo.slot b{color:var(--text);font-size:var(--s0)}
.fx-plant{margin:0;display:grid;grid-template-columns:132px minmax(0,1fr);gap:.8rem;align-items:center}
.fx-plant img{width:132px;height:84px;object-fit:cover;border-radius:8px;display:block}
.fx-plant figcaption{font-size:var(--s-1);color:var(--muted)}
@media (max-width:900px){.fx-in{grid-template-columns:1fr}}

/* ---------- 3. dropdown navigation ---------- */
.top .wrap{position:relative}
.nav .nv-top{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.05rem}
.nv{position:relative;display:flex;align-items:center}
.nv.nv-wide{position:static}
.nav .nv-a{padding:.45rem .55rem}
.nv-t{width:26px;height:34px;border:0;background:transparent;border-radius:6px;display:grid;place-items:center;color:var(--dim);padding:0;margin-inline-start:-.3rem}
.nav .nv-t .ic{display:inline-block;width:14px;height:14px;color:currentColor;transform:rotate(-90deg);transition:transform .2s}
.nav .nv-t[aria-expanded="true"] .ic{transform:rotate(90deg)}
.nv-t:hover,.nv-t[aria-expanded="true"]{color:var(--fuka-t);background:var(--ink-3)}
.nv-p{position:absolute;z-index:70;top:calc(100% + 8px);inset-inline-start:0;min-width:290px;max-width:calc(100vw - 2 * var(--gut));background:var(--menu-bg);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);padding:.7rem}
.nv-wide .nv-p{inset-inline:var(--gut);top:calc(100% - 2px);width:auto;max-width:980px;margin-inline-start:auto}
.nv-mid .nv-p{width:560px}
.nv-p::before{content:"";position:absolute;inset-inline:0;top:-12px;height:12px}   /* hover bridge */
.nav .nv-p a,.nav .nv-p button{display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;border-radius:8px;color:var(--text-2);font-size:var(--s0);font-weight:500;white-space:normal;background:none;border:0;text-align:start}
.nav .nv-p a:hover,.nav .nv-p a:focus-visible,.nav .nv-p button:hover{background:var(--menu-hover);color:var(--text)}
.nav .nv-p .ic{display:inline-block;width:18px;height:18px;color:var(--fuka-t);flex:0 0 auto}
.nv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.05rem}
.nv-list small{margin-inline-start:auto;color:var(--dim);font-size:.7rem;padding-inline-start:.8rem}
.nv-2{display:grid;grid-template-columns:1fr 1fr}
.nv-rich a{align-items:flex-start!important}.nv-rich span{display:flex;flex-direction:column;line-height:1.5}.nv-rich b{font-weight:600;color:var(--text)}.nv-rich small{margin:0;padding:0;font-size:var(--s-1);color:var(--muted)}
.nv-grid{display:grid;gap:.4rem 1.2rem}.nv-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nav .nv-p .nv-h{font-weight:700;color:var(--text);font-size:var(--s0);border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:.2rem}
.nv-h small{margin-inline-start:auto;color:var(--dim);font-size:.7rem}
.nv-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.nv-rows li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.2rem .4rem;padding:.1rem 0;border-bottom:1px dashed var(--line)}
.nv-rows li:last-child{border-bottom:0}
.nav .nv-p .nv-fam{padding:.35rem .45rem;font-size:var(--s-1);color:var(--text-2)}
.nv-us{display:flex;flex-wrap:wrap;gap:.2rem;direction:ltr}
.nav .nv-p .nv-u{padding:.2rem .45rem;min-width:2.6rem;justify-content:center;font-size:.74rem;border:1px solid var(--line-2);border-radius:6px;color:var(--text)}
.nav .nv-p .nv-u:hover,.nav .nv-p .nv-u:focus-visible{border-color:var(--fuka);background:color-mix(in srgb,var(--fuka) 14%,transparent);color:var(--text)}
.nv-sku{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;min-height:2.2rem;margin-top:.5rem;padding:.45rem .6rem;border-radius:8px;background:var(--ink-3);font-size:var(--s-1);color:var(--text-2)}
.nv-sku b{color:var(--fuka-t)}
.nv-foot{display:flex;flex-wrap:wrap;gap:.2rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line)}
.nav .nv-foot a,.nav .nv-foot button{font-size:var(--s-1);color:var(--muted)}
@media (max-width:1060px){
  .nav.open{max-height:calc(100svh - 110px);overflow:auto;overscroll-behavior:contain;padding:.6rem var(--gut) 1rem}
  .nav .nv-top{flex-direction:column;align-items:stretch;gap:0}
  .nv,.nv.nv-wide{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;border-bottom:1px solid var(--line);position:static}
  .nav .nv-a{padding:.75rem .4rem;font-size:var(--s1)}
  .nv-t{width:48px;height:48px;margin:0}
  .nv-p,.nv-wide .nv-p,.nv-mid .nv-p{position:static;grid-column:1/-1;width:auto;max-width:none;box-shadow:none;border:0;border-radius:0;background:transparent;padding:0 .2rem .8rem;margin:0}
  .nv-p::before{display:none}
  .nv-g3,.nv-2{grid-template-columns:1fr}
  .nav .nv-p a,.nav .nv-p button{min-height:44px}
  .nav .nv-p .nv-u{min-height:40px;min-width:3rem}
}

/* ---------- 5. 3D / exploded presentation ---------- */
.acc-note{display:flex;gap:.55rem;align-items:flex-start;font-size:var(--s-1);line-height:1.8;color:var(--muted);border-inline-start:3px solid var(--line-2);padding:.2rem .8rem;margin:.2rem 0 .9rem}
.acc-note .ic{color:var(--fuka-t);margin-top:.25rem}.acc-note b{color:var(--text)}
/* studio surface for product engineering: neutral, slightly lit from above, follows the global theme */
.p3d-stage,.dz-stage{background:radial-gradient(70% 60% at 50% 38%,color-mix(in srgb,var(--show-spot) 85%,transparent),transparent 75%),linear-gradient(180deg,var(--stage),color-mix(in srgb,var(--stage) 80%,var(--ink)))}
.xv-fig{background:radial-gradient(80% 70% at 50% 45%,color-mix(in srgb,var(--show-spot) 70%,transparent),transparent 80%),var(--ink-2)}

/* ---------- 6. online catalog: a printed book on a desk ---------- */
.cvx-head{padding-bottom:1.2rem}
.cvx-head .sec-head{align-items:end}
.cvx-dl{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}.cvx-dl small{font-size:.7rem;color:var(--dim)}
.cvx-desk{position:relative;background:radial-gradient(60% 55% at 50% 30%,color-mix(in srgb,var(--desk) 70%,var(--text) 6%),transparent 75%),linear-gradient(180deg,var(--desk),var(--desk-2));border-block:1px solid var(--line);padding-block:0 1.6rem}
.cvx-wrap{max-width:1440px}
.cvx-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.55rem 0;margin-bottom:.4rem;background:color-mix(in srgb,var(--desk) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.cvx-nav,.cvx-tools,.cvx-zoom{display:flex;align-items:center;gap:.35rem}
.cvx-tools{margin-inline-start:auto}
.cvx-b.cvx-sbtn{display:none}@media (max-width:760px){.cvx-b.cvx-sbtn{display:inline-flex}}
.cvx-b{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:0 .6rem;border-radius:10px;border:1px solid var(--line-2);background:var(--ink-2);color:var(--text);font:inherit;font-size:var(--s-1);cursor:pointer}
.cvx-b:hover:not(:disabled){border-color:var(--fuka-t);color:var(--fuka-t)}
.cvx-b:disabled{opacity:.38;cursor:default}
.cvx-b[aria-pressed="true"]{border-color:color-mix(in srgb,var(--fuka-t) 70%,transparent);background:color-mix(in srgb,var(--fuka) 12%,var(--ink-2))}
.cvx-pg{display:flex;align-items:center;gap:.35rem}.cvx-pg input{width:3.4rem;height:44px;text-align:center;font-family:var(--f-mono);font-size:var(--s0);border-radius:10px}
.cvx-pg .mono{color:var(--muted)}
.cvx-zoom output{min-width:3.4rem;text-align:center;font-size:var(--s-1);color:var(--muted)}
.cvx-search{position:relative;flex:0 1 300px}.cvx-search .tsearch{max-width:none}
.cvx-search ul{position:absolute;top:calc(100% + .3rem);inset-inline:0;z-index:30;list-style:none;margin:0;padding:.3rem;background:var(--menu-bg);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);max-height:min(60vh,420px);overflow:auto}
.cvx-search li button{display:flex;justify-content:space-between;gap:.8rem;width:100%;text-align:start;padding:.55rem .65rem;border-radius:8px;border:0;background:none;color:var(--text);font:inherit;font-size:var(--s-1);cursor:pointer;min-height:44px;align-items:center}
.cvx-search li button:hover,.cvx-search li button:focus-visible{background:var(--menu-hover)}
/* the stage holds the book; it scrolls only when the reader zooms in, never the page sideways */
.cvx-stage{position:relative;padding-block:1.4rem 1rem;overflow:hidden;touch-action:pan-y pinch-zoom;outline:none}
.cvx-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--fuka-t);border-radius:12px}
.cvx-stage.zoomed{overflow:auto;touch-action:pan-x pan-y pinch-zoom;max-height:calc(100svh - 150px);border-radius:12px;background:color-mix(in srgb,var(--desk-2) 70%,transparent);-webkit-overflow-scrolling:touch}
.cvx-book{position:relative;margin-inline:auto;display:grid;grid-template-columns:var(--pw) var(--pw);perspective:2800px;transition:translate .5s cubic-bezier(.45,.05,.25,1)}
[data-mode="single"] .cvx-book{grid-template-columns:var(--pw)}
[data-mode="single"] .cvx-pg-r,[data-mode="single"] .cvx-spine{display:none}
.cvx-book.solo-l{translate:calc(var(--pw) / 2) 0}.cvx-book.solo-r{translate:calc(var(--pw) / -2) 0}
.cvx-pg-l,.cvx-pg-r{position:relative;background:var(--paper);height:100%}
.cvx-pg-l img,.cvx-pg-r img,.cvx-leaf img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
/* page-edge stacks: unread pages pile up on the left, read pages on the right */
.cvx-pg-l::before,.cvx-pg-r::before{content:"";position:absolute;inset-block:2px;z-index:-1;width:var(--stk-l,3px);inset-inline-start:calc(var(--stk-l,3px) * -1);background:repeating-linear-gradient(90deg,var(--paper-edge) 0 1px,var(--paper) 1px 2px);border-radius:2px 0 0 2px}
.cvx-pg-r::before{inset-inline-start:auto;inset-inline-end:calc(var(--stk-r,3px) * -1);width:var(--stk-r,3px);border-radius:0 2px 2px 0}
[data-mode="single"] .cvx-pg-l::before{display:none}
.cvx-pg-l,.cvx-pg-r{box-shadow:0 22px 44px -22px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.18)}
.cvx-pg-l[data-p=""],.cvx-pg-r[data-p=""]{visibility:hidden}
[data-mode="spread"] .cvx-pg-l[data-p]:not([data-p=""]),[data-mode="spread"] .cvx-pg-r[data-p]:not([data-p=""]){cursor:zoom-in}
.cvx-spine{position:absolute;top:0;bottom:0;left:var(--pw);width:min(70px,12%);translate:-50% 0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.07) 30%,rgba(0,0,0,.22) 49%,rgba(255,255,255,.14) 50%,rgba(0,0,0,.18) 51%,rgba(0,0,0,.06) 70%,transparent)}
.solo-l .cvx-spine,.solo-r .cvx-spine{display:none}
.cvx-leaf{position:absolute;top:0;height:100%;width:var(--pw);z-index:4;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.cvx-leaf.on-l,.cvx-leaf.one{left:0;transform-origin:100% 50%}.cvx-leaf.on-r{left:var(--pw);transform-origin:0 50%}
.cvx-leaf .f,.cvx-leaf .b{position:absolute;inset:0;background:var(--paper);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
.cvx-leaf .b{transform:rotateY(180deg)}
.cvx-leaf i{position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.cvx-leaf.on-r .f i,.cvx-leaf.on-l .b i{background:linear-gradient(270deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.cvx-hint{min-height:1.4em;text-align:center;font-size:var(--s-1);color:var(--muted);margin:0}
.cvx-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;align-items:baseline;justify-content:center;margin:.5rem auto .9rem;font-size:var(--s-1);color:var(--text-2);max-width:72rem}
.cvx-at{font-weight:600;color:var(--text)}
.cvx-meta a{color:var(--fuka-t);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--fuka-t) 35%,transparent);text-underline-offset:3px}
.cvx-strip{display:flex;gap:.5rem;overflow-x:auto;padding:.4rem .2rem .7rem;scroll-snap-type:x proximity;scrollbar-width:thin}
.cvx-strip button{flex:0 0 66px;position:relative;padding:0;border:2px solid transparent;border-radius:6px;background:var(--paper);cursor:pointer;scroll-snap-align:center;overflow:hidden;opacity:.78;transition:opacity .2s,border-color .2s}
.cvx-strip button:hover,.cvx-strip button:focus-visible{opacity:1}
.cvx-strip button[aria-current="true"]{border-color:var(--fuka);opacity:1}
.cvx-strip img{display:block;width:100%;height:auto;aspect-ratio:150/207}
.cvx-strip span{position:absolute;bottom:2px;inset-inline-end:2px;font-size:.62rem;background:rgba(15,18,30,.78);color:#fff;border-radius:3px;padding:0 .25rem;line-height:1.5}
@media (max-width:760px){
  .cvx-head .sec-head{flex-direction:column;align-items:stretch}.cvx-dl{align-items:stretch}
  .cvx-bar{top:calc(env(safe-area-inset-top,0px) + 60px);gap:.4rem;padding:.45rem 0}
  .cvx-tools{margin-inline-start:auto}.cvx-mode{display:none}.cvx-zoom output{display:none}
  .cvx-search{flex:1 1 100%;order:3;display:none}.cvx-bar.s-open .cvx-search{display:block}
  .cvx-stage{padding-block:.8rem .6rem;margin-inline:calc(var(--gut) * -1)}
  .cvx-stage.zoomed{max-height:calc(100svh - 190px);border-radius:0}
  .cvx-strip button{flex-basis:54px}
}
@media (max-width:360px){.cvx-zoom{display:none}.cvx-b{padding:0 .4rem;min-width:40px}.cvx-pg input{width:3rem}.cvx-nav,.cvx-tools{gap:.25rem}}
@media (prefers-reduced-motion:reduce){.cvx-book{transition:none}}

/* ---------- 7b. technology: restrained data-centre accent (same global theme, its own accent colour) ---------- */
.tech-hero{position:relative;isolation:isolate}
.tech-hero::before{content:"";position:absolute;inset:-1rem 0;z-index:-1;pointer-events:none;border-radius:16px;
  background:radial-gradient(60% 80% at 85% 0%,var(--tech-glow),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 47px,color-mix(in srgb,var(--tech-acc) 8%,transparent) 47px 48px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.tech-hero .eyebrow,.article>.eyebrow{color:var(--tech-acc)}
.tech-hero .eyebrow::before,.article>.eyebrow::before{background:var(--tech-acc)}
.ttile-ic{color:var(--tech-acc);background:color-mix(in srgb,var(--tech-acc) 13%,transparent)}
.article h2{border-inline-start:3px solid color-mix(in srgb,var(--tech-acc) 55%,transparent);padding-inline-start:.7rem}

/* ---------- lazy route loading (phase 2.3) ---------- */
.lazy-load{min-height:55vh;display:flex;align-items:center;justify-content:center;gap:.7rem;color:var(--muted);font-size:var(--s0);text-align:center;flex-wrap:wrap}
p.lazy-load{min-height:280px}
.spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--fuka);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--line-2)}}
/* layout stability: no empty footer before the first view, no footer under a loading placeholder, and the view keeps
   its children's margins inside (no margin collapse moving <main> when a lazy route replaces its placeholder) */
#view{display:flow-root}
.foot:empty{display:none}
#view:has(> .lazy-load) + .foot{display:none}

/* ---------- phase 2.4b: slogan opens the site ---------- */
.mh-slogan{font-family:var(--f-display);font-size:clamp(2.5rem,1rem + 3.9vw,4.6rem);font-weight:900;line-height:1.06;letter-spacing:-.028em;color:var(--mh-text);text-wrap:balance;margin:0}
.mh-slogan span{display:block;white-space:nowrap}
.mh-slogan span+span{color:var(--mh-acc)}
.mh h1{font-size:clamp(1.15rem,.85rem + 1.05vw,1.7rem);font-weight:700;line-height:1.5;letter-spacing:0;padding-top:.85rem;border-top:1px solid color-mix(in srgb,var(--mh-text) 22%,transparent);max-width:30em}
.mh h1 em{color:var(--mh-text);font-weight:800}
.mh-sub{font-size:var(--s1)}
@media (prefers-reduced-motion:no-preference){.mh-copy>*:nth-child(5){animation-delay:.32s}}
@media (max-width:560px){.mh-slogan{font-size:clamp(2.3rem,10.5vw,3.1rem)}.mh h1{font-size:clamp(1.05rem,4.3vw,1.25rem)}}

/* ---------- FUKA catalog brand gallery: a deliberately dark, cinematic section in both themes (the photographs are night scenes) ---------- */
.dg{--dg-bg:#090a11;--dg-text:#eef0f7;--dg-sub:#b7bccb;background:radial-gradient(120% 80% at 80% 0%,#1a1630 0%,var(--dg-bg) 60%);color:var(--dg-text);padding-block:clamp(3rem,7vw,5.5rem)}
.dg .sec-head h2{color:var(--dg-text)}.dg .sec-head p{color:var(--dg-sub)}.dg .eyebrow{color:var(--fuka)}
.dg .btn-o{color:var(--dg-text);border-color:color-mix(in srgb,var(--dg-text) 35%,transparent)}.dg .btn-o:hover{border-color:var(--fuka);color:var(--fuka)}
.dg-grid{display:grid;gap:clamp(.5rem,1vw,.9rem);grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(170px,17vw,250px);
  grid-template-areas:"a b b c" "a d e c" "f d e g"}
.dg-a{grid-area:a}.dg-b{grid-area:b}.dg-c{grid-area:c}.dg-d{grid-area:d}.dg-e{grid-area:e}.dg-f{grid-area:f}.dg-g{grid-area:g}
.dg-t{position:relative;display:block;overflow:hidden;border-radius:12px;background:#11131c;color:var(--dg-text);text-decoration:none;isolation:isolate;
  outline-offset:3px;box-shadow:0 0 0 1px color-mix(in srgb,var(--dg-text) 9%,transparent)}
.dg-t picture{display:contents}.dg-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s}
.dg-t::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,transparent 45%,rgba(5,6,12,.82));pointer-events:none}
.dg-q::after{background:linear-gradient(270deg,rgba(5,6,12,.86) 0%,rgba(5,6,12,.55) 55%,rgba(5,6,12,.1))}
.dg-cap,.dg-quote{position:absolute;z-index:1;inset-inline:1rem;bottom:.9rem;display:flex;flex-direction:column;gap:.15rem}
.dg-cap b{font-size:var(--s1);font-weight:800}.dg-cap small,.dg-quote cite{font-size:.72rem;color:var(--dg-sub);font-style:normal}
.dg-quote{inset-block:auto 1.1rem;inset-inline-start:1.2rem;max-width:min(30rem,82%);margin:0;gap:.45rem}
.dg-quote b{font-size:clamp(1.1rem,.8rem + 1vw,1.6rem);font-weight:900;line-height:1.35}
.dg-quote b::before{content:"";display:block;width:34px;height:3px;background:var(--fuka);margin-bottom:.6rem}
.dg-quote span{font-size:var(--s0);line-height:1.9;color:#d9dce6}
@media (hover:hover){.dg-t:hover img{transform:scale(1.045);filter:saturate(1.08)}}
.dg-t:focus-visible{outline:3px solid var(--fuka)}
@media (prefers-reduced-motion:reduce){.dg-t img{transition:none}}
@media (max-width:900px){.dg-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,34vw,230px);grid-template-areas:"b b" "a c" "a c" "e e" "d f" "d g"}
  .dg-e{min-height:clamp(230px,62vw,340px)}}
@media (max-width:560px){.dg-quote span{display:none}.dg-quote{max-width:90%}}

/* page band: the same photographs, set as a slim cinematic strip under a page title */
.db{position:relative;margin:0 0 1.4rem;height:clamp(140px,18vw,230px);border-radius:12px;overflow:hidden;background:#0d0f17;isolation:isolate}
.db picture{display:contents}.db img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.db::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,12,.78),rgba(6,7,12,.25) 60%,transparent);pointer-events:none}
.db figcaption{position:absolute;z-index:1;inset-inline-start:1.2rem;bottom:1rem;display:flex;flex-direction:column;gap:.15rem;color:#eef0f7}
.db figcaption span{font-weight:800;font-size:clamp(1rem,.8rem + .7vw,1.35rem)}.db figcaption small{font-size:.72rem;color:#b7bccb}

/* ==========================================================================================================
   Phase 2.5 — cinematic opening reel, engineering illustrations, header slogan
   ========================================================================================================== */

/* the opening reel is a dark cinematic stage in both themes (the photographs are night/dusk scenes) */
:root{--mh-sky:#0a0d14; --mh-ground:#07090e; --mh-text:#f5f2ec; --mh-sub:#cfd3dc; --mh-acc:#ffc816; --mh-cap:#b9bec9}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--mh-sky:#141a26; --mh-ground:#0d121b; --mh-text:#f5f2ec; --mh-sub:#d3d7e0; --mh-acc:#ffc816; --mh-cap:#c3c8d2}}
:root[data-theme="light"]{--mh-sky:#141a26; --mh-ground:#0d121b; --mh-text:#f5f2ec; --mh-sub:#d3d7e0; --mh-acc:#ffc816; --mh-cap:#c3c8d2}
@property --tint{syntax:"<color>";inherits:true;initial-value:#8a6a4a}

.mh.cine{--tint:#8a6a4a;transition:--tint 1.8s ease;background:var(--mh-ground);min-height:clamp(600px,calc(100svh - 96px),900px);align-items:stretch}
.cine-reel{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cine-f{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1);will-change:opacity}
.cine-f.on{opacity:1;z-index:2}.cine-f.off{opacity:1;z-index:1;transition:none}
/* the first frame keeps the .mh-photo hook (tests, preload) but none of the v6 split-hero styling */
.cine .mh-photo{position:absolute;inset:0;width:auto;height:auto;z-index:auto;-webkit-mask-image:none;mask-image:none}.cine .mh-photo.on{z-index:2}.cine .mh-photo::after{display:none}
.cine-f picture{display:contents}
.cine-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);transform-origin:50% 50%;backface-visibility:hidden}
.cine-f.on img,.cine-f.off img{will-change:transform}
@media (min-width:981px){
  /* frame on the left, title on the right (RTL start); the frame melts into the stage */
  .cine-reel{inset-inline-start:auto;inset-inline-end:0;width:min(60%,calc((100svh - 96px) * .92))}
  /* perf: a painted fade instead of mask-image, so the moving frames stay on the compositor */
  .cine-reel::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to right,transparent 55%,color-mix(in srgb,var(--mh-ground) 45%,transparent) 78%,var(--mh-ground) 100%)}
}
@media (max-width:980px){.cine-f img{object-position:var(--mpos)}}

/* Ken Burns: one slow push per frame, three directions */
@keyframes kb0{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.6%,-1.2%,0)}}
@keyframes kb1{from{transform:scale(1.12) translate3d(1.4%,0,0)}to{transform:scale(1.03) translate3d(-.6%,.8%,0)}}
@keyframes kb2{from{transform:scale(1.04) translate3d(0,1.2%,0)}to{transform:scale(1.14) translate3d(1.2%,-.8%,0)}}
@media (prefers-reduced-motion:no-preference){
  .cine-f.kb0.on img,.cine-f.kb0.off img{animation:kb0 9s cubic-bezier(.2,.5,.4,1) forwards}
  .cine-f.kb1.on img,.cine-f.kb1.off img{animation:kb1 9s cubic-bezier(.2,.5,.4,1) forwards}
  .cine-f.kb2.on img,.cine-f.kb2.off img{animation:kb2 9s cubic-bezier(.2,.5,.4,1) forwards}
  .cine-f.on img{filter:none;animation-fill-mode:forwards}
  /* exposure: the incoming frame arrives a little bright and soft, then settles */
  .cine.ready .cine-f.on:not(:first-child) img,.cine.ready .cine-f.on.kb0 img{transition:filter 1.4s ease}
}
.cine.paused .cine-f img{animation-play-state:paused}

/* stage effects: ambient tint behind the title, one light sweep per change, vignette, grain, curtain */
.cine-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cine-fx i{position:absolute;inset:0;display:block}
.cine-amb{background:radial-gradient(70% 90% at 92% 40%,color-mix(in srgb,var(--tint) 34%,transparent),transparent 70%),
  linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--mh-ground) 70%,transparent) 62%,var(--mh-ground) 100%)}
.cine-vig{background:radial-gradient(120% 100% at 30% 50%,transparent 55%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,rgba(0,0,0,.35),transparent 18%,transparent 70%,rgba(0,0,0,.5))}
.cine-grain{opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cine-sweep{opacity:0;background:linear-gradient(105deg,transparent 35%,rgba(255,226,150,.0) 40%,rgba(255,226,150,.22) 50%,rgba(255,240,200,.0) 60%,transparent 65%);transform:translateX(60%)}
@keyframes sweep{0%{opacity:0;transform:translateX(60%)}20%{opacity:1}100%{opacity:0;transform:translateX(-70%)}}
.cine.sweep .cine-sweep{animation:sweep 1.5s cubic-bezier(.3,.1,.3,1)}
.cine-bar{background:#000;transform:scaleY(0)}
.cine-bar.t{bottom:auto;height:50%;transform-origin:top}.cine-bar.b{top:auto;height:50%;transform-origin:bottom}
@keyframes curtain{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.cine.intro .cine-bar{animation:curtain 1.05s cubic-bezier(.7,0,.2,1) .15s both}

/* title block */
.cine-in{position:relative;width:100%;display:flex;flex-direction:column;justify-content:center;gap:2rem;min-height:inherit;padding-block:clamp(2.5rem,7vh,5rem) 1.5rem}
.cine .mh-copy{max-width:min(36rem,42%);gap:1.1rem}
.cine .mh-copy::before{display:none}
.cine .mh-k{font-family:var(--f-mono);letter-spacing:.12em;color:var(--mh-cap)}
.cine .mh-slogan{font-size:clamp(2.9rem,1rem + 4.3vw,5.4rem);line-height:1.02;letter-spacing:-.03em;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.cine .mh-slogan span{display:block}
.cine .mh-slogan b{display:inline-block;font-weight:900}
.cine .mh-slogan .l2 b{color:#ffc816;background:linear-gradient(100deg,#ffc816 0%,#ffc816 38%,#fff0b8 50%,#ffc816 62%,#ffc816 100%);background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cine h1{font-size:clamp(1.15rem,.8rem + 1vw,1.65rem);font-weight:700;border-top-color:rgba(245,242,236,.22);color:var(--mh-text);max-width:28em}
.cine h1 em{color:var(--mh-text)}
.cine .mh-sub{color:var(--mh-sub)}
@keyframes wordUp{from{transform:translateY(.55em);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:no-preference){
  .cine.intro .mh-slogan b{animation:wordUp .9s cubic-bezier(.2,.7,.2,1) both}
  .cine.intro .mh-slogan .l1 b:nth-child(1){animation-delay:.75s}.cine.intro .mh-slogan .l1 b:nth-child(2){animation-delay:.87s}
  .cine.intro .mh-slogan .l2 b:nth-child(1){animation-delay:1.02s,1.6s}.cine.intro .mh-slogan .l2 b:nth-child(2){animation-delay:1.12s,1.7s}.cine.intro .mh-slogan .l2 b:nth-child(3){animation-delay:1.22s,1.8s}
  .cine.intro .mh-slogan .l2 b{animation:wordUp .9s cubic-bezier(.2,.7,.2,1) both,shimmer 2.2s ease 1.6s both}
  .cine.intro h1,.cine.intro .mh-sub,.cine.intro .ctas,.cine.intro .mh-k{animation:fade .8s ease 1.45s both}
  .cine.intro .cine-dock{animation:fade .8s ease 1.7s both}
}

/* caption + controls dock (bottom of the stage) */
.cine-dock{display:flex;align-items:flex-end;justify-content:flex-end;gap:1.2rem 2rem;flex-wrap:wrap;margin-top:auto}
.cine-cap{display:flex;flex-direction:column;gap:.15rem;color:var(--mh-text);text-decoration:none;max-width:24rem;padding-inline-start:.9rem;border-inline-start:2px solid var(--mh-acc)}
.cine-cap b{font-size:var(--s1);font-weight:800}.cine-cap span{font-size:var(--s-1);color:var(--mh-sub)}
.cine-cap:hover b{color:var(--mh-acc)}
.cine-ctrl{display:flex;align-items:center;gap:.4rem;direction:rtl}
.cine-b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--mh-text);background:rgba(10,12,18,.62);border:1px solid rgba(245,242,236,.22)}
.cine-b:hover{border-color:var(--mh-acc);color:var(--mh-acc)}.cine-b .ic{width:18px;height:18px}
.cine-segs{display:flex;gap:5px;padding-inline:.4rem}
.cine-seg{position:relative;width:clamp(16px,2.6vw,34px);height:30px;padding:0;background:none;border:0;cursor:pointer}
.cine-seg::before{content:"";position:absolute;inset-inline:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(245,242,236,.28)}
.cine-seg i{position:absolute;inset-inline:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--mh-acc);transform:scaleX(0);transform-origin:right center}
.cine-seg.done i{transform:none}
.cine-seg[aria-selected="true"] i{transform:none}
@keyframes segRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){.cine-seg.run i{animation:segRun 7s linear forwards}}
.cine.paused .cine-seg.run i{animation-play-state:paused}
.cine-seg:focus-visible{outline:2px solid var(--mh-acc);outline-offset:2px;border-radius:4px}
.cine .mh-down{display:none}

@media (max-width:980px){
  .mh.cine{min-height:min(92svh,860px)}
  .cine-reel{-webkit-mask-image:none;mask-image:none}
  .cine-amb{background:linear-gradient(180deg,rgba(7,9,14,.15) 0%,transparent 28%,rgba(7,9,14,.55) 52%,var(--mh-ground) 92%),
    radial-gradient(90% 50% at 50% 100%,color-mix(in srgb,var(--tint) 30%,transparent),transparent 70%)}
  .cine-in{justify-content:flex-end;gap:1.3rem;padding-block:7rem 1.2rem}
  .cine-dock{margin-top:0}
  .cine .mh-copy{max-width:none}
  .cine .mh-slogan{font-size:clamp(2.6rem,11vw,4.2rem)}
  .cine-dock{flex-direction:column;align-items:stretch;gap:.8rem}
  .cine-ctrl{justify-content:space-between}
  .cine-segs{flex:1;justify-content:center}
  .cine-seg{width:auto;flex:1;max-width:34px}
  .cine .mh-down{display:none}
}
@media (max-width:560px){.cine .ctas .btn{flex:1 1 auto}.cine-cap{display:none}.mh.cine{min-height:calc(100svh - 90px)}.cine-in{padding-top:40svh}}

/* header: the slogan sits under «نمایندگی رسمی رک فوکا» */
.brand .tag .slg{display:block;color:var(--muted);font-size:.72rem;letter-spacing:0}

/* factory section: FUKA's factory photograph in the photo frame */
.fx-photo.plant{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:2005/970;min-height:0}
.fx-photo.plant picture{display:contents}.fx-photo.plant img{width:100%;height:100%;object-fit:cover;display:block}
.fx-media{display:block}

/* ==========================================================================================================
   engineering illustrations (js/illus.js) — a dark stage in both themes
   ========================================================================================================== */
.il-art{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 80% at 70% 18%,color-mix(in srgb,var(--il-glow) 24%,transparent),transparent 62%),
    radial-gradient(60% 50% at 20% 100%,color-mix(in srgb,var(--il-glow) 10%,transparent),transparent 70%),linear-gradient(180deg,#0f141d,#0a0d13)}
.il-art::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(140,160,190,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(140,160,190,.07) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(80% 80% at 60% 40%,#000,transparent);mask-image:radial-gradient(80% 80% at 60% 40%,#000,transparent)}
.il-svg{position:absolute;inset:4% 3%;width:94%;height:92%;overflow:visible}
.il-svg{direction:ltr}.il-svg path{stroke-linejoin:round;stroke-linecap:round}.il-svg .il-wire.cut{stroke:#7f93b0;stroke-dasharray:3 5;opacity:.7}
/* materials: t = top, l = front (+y), r = side (+x) */
.il-svg .rk.t{fill:#454d5d}.il-svg .rk.l{fill:var(--rkl,#1d2129)}.il-svg .rk.r{fill:var(--rkr,#2a2f3a)}
.il-svg .rk{stroke:rgba(255,255,255,.08);stroke-width:1}.il-svg .rk.t{stroke:rgba(255,255,255,.16)}
.il-svg .wh.t{fill:#f3f5f8}.il-svg .wh.l{fill:#d7dce3}.il-svg .wh.r{fill:#bfc5ce}
.il-svg .con.t{fill:#5f646c}.il-svg .con.l{fill:#43474e}.il-svg .con.r{fill:#50555c}
.il-svg .duct.t,.il-svg .duct.l,.il-svg .duct.r{fill:#353a44}
.il-svg .util.t{fill:#4b5563}.il-svg .util.l{fill:#2f3743}.il-svg .util.r{fill:#3b4452}
.il-svg .ups.t{fill:#3e4553}.il-svg .ups.l{fill:#1e232c}.il-svg .ups.r{fill:#2b313c}
.il-svg .crac.t{fill:#4a5262}.il-svg .crac.l{fill:#2a303b}.il-svg .crac.r{fill:#363d4a}
.il-svg .cdu.t{fill:#414857}.il-svg .cdu.l{fill:#222731}.il-svg .cdu.r{fill:#2e3440}
.il-svg .tray.t{fill:#8a93a3}.il-svg .tray.l{fill:#5d6575}.il-svg .tray.r{fill:#6e7686}
.il-svg .blank.t,.il-svg .blank.l,.il-svg .blank.r{fill:#262b35}.il-svg .blank.l{fill:#1a1e26}
.il-svg .fan.t{fill:#2b303b}.il-svg .fan.l,.il-svg .fan.r{fill:#1c2028}
.il-svg .pdu.t{fill:#363c48}.il-svg .pdu.l{fill:#1a1d24}.il-svg .pdu.r{fill:#272b33}
.il-svg .batt.t{fill:#ffc816}.il-svg .batt.l{fill:#2b2f38}.il-svg .batt.r{fill:#363b45}
.il-svg .pole.t,.il-svg .pole.l,.il-svg .pole.r{fill:#6b7280}.il-svg .pole.l{fill:#545b67}
.il-svg .cam.t{fill:#e5e7eb}.il-svg .cam.l{fill:#c5c9d0}.il-svg .cam.r{fill:#aeb3bc}
.il-svg .chip.t{fill:#1f4a3d}.il-svg .chip.l{fill:#163428}.il-svg .chip.r{fill:#1a3d31}
.il-svg .die.t{fill:#c0c8d6}.il-svg .die.l{fill:#8f99aa}.il-svg .die.r{fill:#a3adbd}
.il-svg .book1.t{fill:#ffc816}.il-svg .book1.l{fill:#d9a300}.il-svg .book1.r{fill:#e6ad00}
.il-svg .book2.t{fill:#4aa8ff}.il-svg .book2.l{fill:#2b7fd0}.il-svg .book2.r{fill:#3590e6}
.il-svg .book3.t{fill:#eef2f7}.il-svg .book3.l{fill:#c9d1dc}.il-svg .book3.r{fill:#d6dde6}
.il-svg .ruler.t{fill:#ffc816}.il-svg .ruler.l,.il-svg .ruler.r{fill:#c99d00}
.il-svg .pencil.t{fill:#ffc816}.il-svg .pencil.l,.il-svg .pencil.r{fill:#d9a300}.il-svg .pencilt.t,.il-svg .pencilt.l,.il-svg .pencilt.r{fill:#2b2f38}
.il-svg .bld.t{fill:#394150}.il-svg .bld.l{fill:#232935}.il-svg .bld.r{fill:#2c3340}
.il-svg .bld2.t{fill:#323947}.il-svg .bld2.l{fill:#1d222c}.il-svg .bld2.r{fill:#272d38}
.il-svg .card.t{fill:#e9eef4}.il-svg .card.l,.il-svg .card.r{fill:#c7cfda}
.il-svg .clip.t,.il-svg .clip.l,.il-svg .clip.r{fill:#9aa3b2}
.il-svg .outlet.t,.il-svg .outlet.l,.il-svg .outlet.r{fill:#cfd6e0}
.il-svg .il-floor{fill:#121722;stroke:#1f2734}.il-svg .il-floor.raised{fill:#151b27}
.il-svg .il-grid{stroke:#212938;stroke-width:1;fill:none}
.il-svg .il-wall{fill:#171c26;stroke:#222a37}.il-svg .il-wallgrid{stroke:#1f2632;fill:none}
.il-svg .il-bay{fill:#0b0e13}
.il-svg .il-eq{stroke:#2c323e;stroke-width:.8}.il-svg .il-eq.srv{fill:#1b1f27}.il-svg .il-eq.pp{fill:#232934}.il-svg .il-eq.blank{fill:#14171d}.il-svg .il-eq.gpu{fill:#171a24}
.il-svg .il-port{fill:#4a5364}
.il-svg .il-gpu{fill:#a78bfa;opacity:.85}.il-svg .il-gpu.g1{fill:#22d3ee}.il-svg .il-gpu.g2{fill:#8b5cf6}
.il-svg .il-led{fill:#34d399}.il-svg .il-led.b1{fill:#22d3ee}.il-svg .il-led.b2{fill:#fbbf24}.il-svg .il-led.b3{fill:#34d399}
.il-svg .il-glass{fill:rgba(150,190,255,.07);stroke:rgba(180,205,255,.28);stroke-width:1.2}
.il-svg .il-meshdot{fill:rgba(205,214,230,.30)}.il-svg .il-mesh{stroke:rgba(180,195,220,.25);stroke-width:1.2}
.il-svg .il-handle{fill:#9aa3b2}
.il-svg .il-vent{stroke:#4a5160;stroke-width:1.2;fill:none}
.il-svg .il-rear{fill:#12151c;stroke:#2a303b}
.il-svg .il-grille{fill:#232934;stroke:#3a4252;stroke-width:.8}
.il-svg .il-perf{fill:rgba(96,165,250,.16);stroke:rgba(96,165,250,.55)}
.il-svg .il-contain{fill:rgba(147,197,253,.10);stroke:rgba(147,197,253,.45)}
.il-svg .il-rung{stroke:#aab2c0;stroke-width:1.2;fill:none}
.il-svg .il-screen{fill:#0ea5e9;opacity:.85}
.il-svg .il-bolt{fill:#ffc816}
.il-svg .il-socket{fill:#0b0d11}
.il-svg .il-fan{fill:#0f1217;stroke:#8a93a3;stroke-width:1.4}
.il-svg .il-lens{fill:#22d3ee}
.il-svg .il-sheet{fill:#102033;stroke:#2b4a6e;stroke-width:1.2}.il-svg .il-tb{fill:none;stroke:#3b6390}.il-svg .il-tbl{stroke:#2f5276;fill:none}
.il-svg .il-wire{fill:none;stroke:#5aa6ff;stroke-width:1.3;stroke-dasharray:5 5}
.il-svg .il-dim,.il-svg .il-tick,.il-svg .il-ruler,.il-svg .il-lead{stroke:#9fb3c8;stroke-width:1.2;fill:none}
.il-svg .il-dim{stroke-dasharray:2 4}.il-svg .il-lead{stroke-dasharray:4 5;opacity:.8}
.il-svg .il-dimdot{fill:#9fb3c8}
.il-svg .il-time{stroke:#ffc816;stroke-width:2.5;fill:none}.il-svg .il-timedot{fill:#ffc816}
.il-svg .il-rtick{stroke:#6b5300;stroke-width:1}
.il-svg .il-cable{fill:none;stroke-width:3.2}
.il-svg .il-cable.c1{stroke:#4aa8ff}.il-svg .il-cable.c2{stroke:#ffc816}.il-svg .il-cable.c3{stroke:#34d399}.il-svg .il-cable.c4{stroke:#e5e7eb}.il-svg .il-cable.c5{stroke:#fb923c}
.il-svg .il-pipe{fill:none;stroke-width:4}.il-svg .il-pipe.cold{stroke:#38bdf8}.il-svg .il-pipe.hot{stroke:#fb923c}
.il-svg .il-trace{stroke:#34d399;stroke-width:1.3;fill:none;opacity:.8}
.il-svg .il-flow{stroke:#ffc816;stroke-width:3;fill:none;stroke-dasharray:10 9}.il-svg .il-flow.dc{stroke:#fb923c}
.il-svg .il-flow.hd{fill:#ffc816;stroke:none;stroke-dasharray:none}.il-svg .il-flow.dc.hd{fill:#fb923c}
.il-svg .il-air{fill:none;stroke-width:3;stroke-dasharray:9 8}.il-svg .il-air.cold{stroke:#60a5fa}.il-svg .il-air.hot{stroke:#f97316}
.il-svg .il-air.hd{stroke:none;stroke-dasharray:none}.il-svg .il-air.cold.hd{fill:#60a5fa}.il-svg .il-air.hot.hd{fill:#f97316}
.il-svg .il-rain{stroke:rgba(165,195,235,.55);stroke-width:1.3;fill:none}
.il-svg .il-win{fill:#1b2230}.il-svg .il-win.lit{fill:#ffc816;opacity:.75}.il-svg .il-win.s{fill:#141a24}
.il-svg .il-sign{fill:#ffc816}
.il-svg .il-pin{fill:#ffc816}.il-svg .il-pinc{fill:#0b0f14}.il-svg .il-pinline{stroke:#ffc816;stroke-width:2;fill:none}
.il-svg .il-chead{fill:#ffc816}.il-svg .il-cline{fill:#aab3c1}.il-svg .il-check{fill:#34d399}
.il-svg text{font-family:var(--f-mono);font-size:24px;font-weight:700;fill:#d3d9e4;text-anchor:middle;paint-order:stroke;stroke:#0b0e13;stroke-width:5px;stroke-linejoin:round}
.il-svg .il-tacc{fill:#ffc816}.il-svg .il-tdim{fill:#b8c6d6;font-size:21px}.il-svg .il-tcold{fill:#7cb7ff}.il-svg .il-thot{fill:#fb923c}
.il-svg .il-tdie{fill:#0b0f14;stroke:none;font-size:20px}
@keyframes ilBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ilDash{to{stroke-dashoffset:-38}}
@keyframes ilPulse{50%{opacity:.35}}
@keyframes ilRain{0%{transform:translate(0,-26px);opacity:0}25%{opacity:.9}100%{transform:translate(-8px,34px);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .il-svg .il-led.b1{animation:ilBlink 2.3s infinite}.il-svg .il-led.b2{animation:ilBlink 3.1s infinite .6s}.il-svg .il-led.b3{animation:ilBlink 1.7s infinite 1.1s}
  .il-svg .il-flow:not(.hd),.il-svg .il-air:not(.hd){animation:ilDash 1.6s linear infinite}
  .il-svg .il-gpu{animation:ilPulse 2.8s ease-in-out infinite}.il-svg .il-gpu.g1{animation-delay:.9s}.il-svg .il-gpu.g2{animation-delay:1.8s}
  .il-svg .il-rain{animation:ilRain 1.3s linear infinite}.il-svg .il-rain.r1{animation-delay:.45s}.il-svg .il-rain.r2{animation-delay:.9s}
}

/* where the art appears */
.ttile.has-art{padding:0;overflow:hidden;gap:0}
.ttile.has-art .il-art{border-radius:0;aspect-ratio:16/10}
.ttile.has-art .ttile-bd{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.15rem 1.2rem}
.ttile.has-art:hover .il-art{filter:brightness(1.08)}
.tgrid{grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}
.tcat-head.has-art{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:2rem}
.tcat-head.has-art .eyebrow{display:inline-flex;gap:.4rem;align-items:center}
.il-head{aspect-ratio:16/10}
.il-banner{aspect-ratio:21/8;margin-bottom:1.4rem}
.sec-head.has-art{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.8fr);align-items:center;gap:2rem}
.sec-head.has-art > div{min-width:0}
.il-side{aspect-ratio:16/10}
@media (max-width:860px){
  .tcat-head.has-art,.sec-head.has-art{grid-template-columns:1fr}
  .tcat-head.has-art .il-art{order:-1}
  .sec-head.has-art .il-side{order:-1;aspect-ratio:21/9}
  .il-banner{aspect-ratio:16/8}
}

/* ===== v10 (phase 2.6): launch polish — contact chips, link chips, tables, FUKA clients wall, about, factory capabilities ===== */

/* ---------- contact chips: a tel:/mailto: link each, no copy buttons ---------- */
.phones{display:flex;flex-wrap:wrap;gap:.5rem}
.phone{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.45rem .95rem .45rem .85rem;border-radius:999px;
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink-3) 65%,transparent);color:var(--text);
  font-family:var(--f-mono);font-size:var(--s0);font-weight:500;letter-spacing:.03em;direction:ltr;user-select:text;
  transition:border-color .2s,background-color .2s,transform .2s,color .2s}
.phone .ic{color:var(--fuka-t);width:17px;height:17px}
.phone bdi{unicode-bidi:isolate}
a.phone:hover,a.phone:focus-visible{border-color:var(--fuka);background:color-mix(in srgb,var(--fuka) 12%,var(--ink-3));color:var(--text);transform:translateY(-1px)}
a.phone:active{transform:none}
.phone.mail{font-size:var(--s-1)}
.panel .phones{gap:.55rem}

/* ---------- link chips and outline buttons ---------- */
.btn-o{background:color-mix(in srgb,var(--ink-3) 55%,transparent);border-color:var(--line-2)}
.btn-o:hover,.btn-o:focus-visible{border-color:var(--fuka);color:var(--text);background:color-mix(in srgb,var(--fuka) 10%,var(--ink-3))}
.app .links{gap:.4rem}
.app .links a{display:inline-flex;align-items:center;gap:.3rem;min-height:32px;border-radius:999px;padding:.2rem .7rem;font-size:.74rem;
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink-3) 55%,transparent);transition:border-color .2s,background-color .2s,color .2s}
.app .links a::after{content:"";width:6px;height:6px;border-inline-start:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.0;margin-inline-start:-.2rem;transition:opacity .2s,margin .2s}
.app .links a:hover,.app .links a:focus-visible{border-color:var(--fuka);color:var(--text);background:color-mix(in srgb,var(--fuka) 12%,var(--ink-3))}
.app .links a:hover::after{opacity:.9;margin-inline-start:0}
.go{gap:.45rem}
.go .ic{transition:transform .2s}
a:hover>.go .ic,a:focus-visible>.go .ic,.go:hover .ic{transform:translateX(-4px)}
.type,.kbcat,.cz,.kbc,.fam,.app{position:relative}
.type::before,.kbcat::before,.cz::before{content:"";position:absolute;inset-inline:1.3rem;top:-1px;height:2px;border-radius:2px;background:var(--fuka);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.type:hover::before,.kbcat:hover::before,.cz:hover::before,.type:focus-visible::before{transform:scaleX(1)}

/* ---------- data tables ---------- */
.tbl-wrap{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--ink-2);
  box-shadow:0 1px 0 color-mix(in srgb,var(--text) 4%,transparent) inset;scrollbar-width:thin}
.tbl-wrap table{font-size:var(--s0)}
.tbl-wrap th{position:sticky;top:0;z-index:1;background:color-mix(in srgb,var(--ink-3) 70%,var(--ink-2));color:var(--muted);font-weight:700;font-size:.74rem;
  letter-spacing:.01em;padding:.75rem .9rem;border-bottom:1px solid var(--line-2)}
.tbl-wrap td{padding:.78rem .9rem;border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
.tbl-wrap tbody tr{transition:background-color .15s}
.tbl-wrap tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--ink-3) 28%,transparent)}
.tbl-wrap tbody tr:hover td{background:color-mix(in srgb,var(--fuka) 7%,transparent)}
.tbl-wrap td:first-child{font-weight:600}
.tbl-wrap td a{color:var(--fuka-t);font-weight:700;text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--fuka-t) 45%,transparent)}
.tbl-wrap td a:hover{border-bottom-style:solid}
.tbl-wrap tr.hi td{background:color-mix(in srgb,var(--fuka) 14%,transparent)!important}
.tbl-wrap tr.hi td:first-child{box-shadow:inset -3px 0 0 var(--fuka)}
.ptable td.m:nth-last-child(-n+2){color:var(--text);font-weight:600}
.ptable td.m:nth-last-child(2){color:var(--fuka-t)}
@media (max-width:760px){.tbl-wrap th,.tbl-wrap td{padding:.65rem .7rem}}

/* ---------- factory capabilities (catalog p.2) ---------- */
.fx-caps{display:grid;gap:1rem;margin-top:1.6rem}
.fx-since{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.fx-since b{font-size:clamp(2.4rem,1.7rem + 2.2vw,3.6rem);font-weight:700;line-height:1;color:var(--fuka-t);letter-spacing:-.02em}
.fx-since span{color:var(--muted);font-size:var(--s0)}
.fx-caps ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.fx-caps li{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--ink-3) 55%,transparent);font-weight:700;font-size:var(--s0);color:var(--text)}
.fx-caps .ic{color:var(--fuka-t);width:18px;height:18px}

/* ---------- FUKA clients wall: printed logos, transparent, large ---------- */
.clients-w{margin-block:clamp(2.5rem,5vw,4.5rem) clamp(1rem,3vw,2.5rem)}
.cl-head{text-align:center;max-width:48rem;margin-inline:auto}
.cl-head .eyebrow{justify-content:center}
.cl-h{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);font-weight:900;line-height:1.3;margin-top:.7rem;letter-spacing:-.015em}
.cl-head p{color:var(--muted);margin-top:.7rem;font-size:var(--s1)}
.cl{list-style:none}
.cl-i{display:block;width:100%;aspect-ratio:7/5;background-repeat:no-repeat;background-size:800% 300%;
  background-position:calc(var(--c) * 100% / 7) calc(var(--r) * 50%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.bg-in .cl-i{background-image:url("/img/clients-dk-1x.webp");background-image:-webkit-image-set(url("/img/clients-dk-1x.webp") 1x,url("/img/clients-dk-2x.webp") 2x);background-image:image-set(url("/img/clients-dk-1x.webp") 1x,url("/img/clients-dk-2x.webp") 2x)}
:root[data-theme="light"] .bg-in .cl-i{background-image:url("/img/clients-1x.webp");background-image:-webkit-image-set(url("/img/clients-1x.webp") 1x,url("/img/clients-2x.webp") 2x);background-image:image-set(url("/img/clients-1x.webp") 1x,url("/img/clients-2x.webp") 2x)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .bg-in .cl-i{background-image:url("/img/clients-1x.webp");background-image:-webkit-image-set(url("/img/clients-1x.webp") 1x,url("/img/clients-2x.webp") 2x);background-image:image-set(url("/img/clients-1x.webp") 1x,url("/img/clients-2x.webp") 2x)}}
.cl:hover .cl-i{transform:scale(1.07)}
.cl-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.6rem) clamp(1rem,3vw,2.8rem);
  list-style:none;padding:0;margin:clamp(1.8rem,4vw,3rem) 0 0}
.cl-track{display:flex;direction:rtl;overflow:hidden;margin-top:clamp(1.4rem,3vw,2.2rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.cl-track+.cl-track{margin-top:clamp(.6rem,1.6vw,1.2rem)}
.cl-run{display:flex;flex:none;list-style:none;padding:0;margin:0}
.cl-run .cl{flex:none;width:clamp(120px,13vw,190px);margin-inline:clamp(.7rem,2vw,1.6rem)}
@keyframes clMarq{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:no-preference){
  .bg-in .cl-run{animation:clMarq 60s linear infinite}
  .bg-in .cl-track.rev .cl-run{animation-duration:72s;animation-direction:reverse}
  .cl-track:hover .cl-run,.cl-track:focus-within .cl-run{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .cl-track{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}
  .cl-run{flex-wrap:wrap;justify-content:center}.cl-run[aria-hidden="true"]{display:none}
}

/* ---------- about ---------- */
.ab-h{font-size:clamp(2rem,1.3rem + 2.8vw,3.6rem);font-weight:900;line-height:1.15;margin-block:.7rem 1.1rem;letter-spacing:-.02em}
.ab-h span{display:block;color:var(--fuka-t);font-size:.5em;font-weight:800;margin-top:.5rem;letter-spacing:0}
.ab-lead{font-size:var(--s2);color:var(--text-2);max-width:38em;line-height:1.95}
.ab-mark{display:grid;justify-items:center;gap:1.1rem;justify-self:center;padding:clamp(1rem,3vw,2.5rem)}
.ab-mark img{width:min(320px,70vw);height:auto}
.ab-mark .slg{font-weight:800;color:var(--muted);font-size:var(--s1)}
@media (max-width:980px){.cl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.cl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .8rem}}
.panel .phone.mail{align-self:flex-start}
.cl-sec{padding-block:clamp(1rem,3vw,2rem) clamp(2.5rem,5vw,4rem)}
.cl-sec .clients-w{margin-top:clamp(1.5rem,4vw,3rem)}

/* ---------- ARCO assistant: launcher, edge tab when dismissed, panel ---------- */
.as-fab{gap:.55rem;padding:.5rem 1.05rem .5rem .55rem;min-height:52px;border-radius:999px;
  background:linear-gradient(135deg,var(--fuka),#ffb000);color:var(--fuka-ink);
  box-shadow:0 10px 30px -8px color-mix(in srgb,var(--fuka) 55%,transparent),0 2px 6px rgba(0,0,0,.25);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-radius .35s,padding .35s,box-shadow .3s,opacity .3s}
.as-fab .as-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--fuka-ink);color:var(--fuka)}
.as-fab .as-ico .ic{width:19px;height:19px}
.as-fab:hover{transform:translateY(-2px)}
.as-on .as-fab{opacity:0;pointer-events:none;transform:scale(.85)}
/* dismissed: a slim tab hugging the screen edge (start side) */
.as-fab.tucked{inset-inline-start:0;padding:.35rem .35rem;min-height:0;border-start-start-radius:0;border-end-start-radius:0;border-radius:0 14px 14px 0;
  transform:translateX(30%);box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
[dir="rtl"] .as-fab.tucked,.as-fab.tucked[dir="rtl"]{border-radius:14px 0 0 14px}
.as-fab.tucked .as-l{display:none}
.as-fab.tucked .as-ico{width:34px;height:34px}
.as-fab.tucked:hover,.as-fab.tucked:focus-visible{transform:none}
.as-panel{width:min(410px,calc(100vw - 32px));height:min(620px,calc(100vh - 110px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  border-radius:22px;border:1px solid color-mix(in srgb,var(--fuka) 22%,var(--line-2));
  background:color-mix(in srgb,var(--ink-2) 92%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--text) 5%,transparent) inset;
  transform-origin:bottom right;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.as-panel.in{opacity:1;transform:none}
.as-h{gap:.75rem;padding:.9rem 1rem;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 140% at 100% 0,color-mix(in srgb,var(--fuka) 22%,transparent),transparent 60%),var(--ink-3)}
.as-av{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--fuka);color:var(--fuka-ink);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--fuka) 70%,transparent)}
.as-av .ic{width:21px;height:21px}
.as-t{flex:1;min-width:0}.as-t b{display:block;font-size:var(--s1);font-weight:800}
.as-t small{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.72rem}
.as-t small i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
.as-x{width:40px;height:40px;transition:background-color .2s,border-color .2s}
.as-x:hover,.as-x:focus-visible{border-color:var(--fuka);background:color-mix(in srgb,var(--fuka) 12%,var(--ink-2))}
.as-log{padding:1rem;gap:.7rem;scroll-behavior:smooth}
.as-m{border-radius:16px;padding:.7rem .9rem;box-shadow:0 2px 10px -6px rgba(0,0,0,.35)}
.as-m.a{background:var(--ink-3);border:1px solid var(--line)}
.as-m.u{background:linear-gradient(135deg,var(--fuka),#ffb000)}
.as-m.u{animation:asIn .25s ease both}.as-m.a{animation:asIn .3s ease both}
@keyframes asIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.as-m{animation:none}.as-panel{transition:none}.as-fab{transition:none}}
.as-sug{display:flex;flex-wrap:nowrap;gap:.4rem;padding:.6rem 1rem;border-top:1px solid var(--line)}
.as-chip{flex:none;white-space:nowrap;min-height:36px;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--text-2);font-size:var(--s-1);font-weight:600;transition:border-color .2s,background-color .2s,color .2s}
.as-chip:hover,.as-chip:focus-visible{border-color:var(--fuka);color:var(--text);background:color-mix(in srgb,var(--fuka) 10%,transparent)}
.as-f{gap:.5rem;padding:.7rem 1rem;border-top:1px solid var(--line)}
.as-f input{border-radius:999px;padding-inline:1rem;background:var(--ink);border-color:var(--line-2)}
.as-f input:focus{border-color:var(--fuka);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--fuka) 22%,transparent)}
.as-send{flex:none;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--fuka);color:var(--fuka-ink)}
.as-send .ic{width:20px;height:20px;transform:scaleX(-1)}
.as-pv{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:0 1rem .75rem;line-height:1.5}
.as-pv span{display:inline-flex;align-items:center;gap:.3rem}.as-pv a{display:inline-flex;align-items:center;gap:.3rem;flex:none;color:var(--fuka-t);font-weight:700}
.as-pv .ic{width:14px;height:14px}
@media (max-width:760px){
  .as-fab{padding:.4rem;min-height:0}.as-fab .as-l{display:none}
  .as-fab.tucked{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .as-panel{inset-inline:0;width:100%;border-radius:22px 22px 0 0;bottom:0;height:min(86vh,640px);transform-origin:bottom center}
}

/* ---------- cinematic captions: larger, with slide index and a call to action ---------- */
.cine-cap{gap:.3rem;max-width:30rem;padding:.2rem 1.1rem .2rem 0;padding-inline-start:1.1rem;border-inline-start:3px solid var(--mh-acc)}
.cine-cap small{font-size:.74rem;letter-spacing:.12em;color:var(--mh-sub)}
.cine-cap small b{color:var(--mh-acc);font-size:.9rem;font-weight:700}
.cine-cap strong{font-size:clamp(1.2rem,.95rem + 1vw,1.85rem);font-weight:900;line-height:1.3;letter-spacing:-.01em;color:var(--mh-text);text-wrap:balance}
.cine-cap span{font-size:clamp(.88rem,.8rem + .3vw,1.02rem);color:var(--mh-sub);line-height:1.7}
.cine-cap em{display:inline-flex;align-items:center;gap:.35rem;font-style:normal;font-weight:700;font-size:var(--s-1);color:var(--mh-acc);margin-top:.25rem}
.cine-cap em .ic{width:15px;height:15px;transition:transform .25s}
.cine-cap:hover strong{color:var(--mh-text)}.cine-cap:hover em .ic{transform:translateX(-4px)}
@media (prefers-reduced-motion:no-preference){.cine-cap.swap>*{animation:capIn .7s cubic-bezier(.2,.7,.2,1) both}.cine-cap.swap>:nth-child(2){animation-delay:.06s}.cine-cap.swap>:nth-child(3){animation-delay:.12s}.cine-cap.swap>:nth-child(4){animation-delay:.18s}}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:560px){.cine-cap{display:flex;max-width:none}.cine-cap strong{font-size:1.15rem}.cine-cap em{display:none}}

/* ---------- category heroes: the home reel, sized for a section page ---------- */
.mh.cine.cat-cine{min-height:clamp(560px,calc(100svh - 120px),820px)}
.cat-cine .cine-in{padding-block:clamp(2.2rem,6vh,4rem) 1.4rem}
.cat-cine .mh-copy{gap:.9rem}
.cat-cine h1{font-size:clamp(2.1rem,1.3rem + 3vw,3.9rem);font-weight:900;line-height:1.18;letter-spacing:-.022em;color:var(--mh-text);padding-top:0;border-top:0;text-wrap:balance}
.cat-q{font-size:clamp(1.15rem,.95rem + .9vw,1.6rem);font-weight:800;line-height:1.45;
  background:linear-gradient(100deg,#ffe58a,var(--mh-acc) 45%,#ffb000);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--mh-acc)}
.cat-lead{line-height:1.95;font-size:var(--s1);max-width:34em}
.cat-facts{display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;margin:.3rem 0}
.cat-facts div{display:flex;flex-direction:column;gap:.1rem;padding-inline-start:.8rem;border-inline-start:1px solid color-mix(in srgb,var(--mh-text) 22%,transparent)}
.cat-facts dt{font-size:.72rem;color:var(--mh-sub)}.cat-facts dd{margin:0;font-size:clamp(1.05rem,.9rem + .5vw,1.35rem);font-weight:600;color:var(--mh-text);direction:ltr;text-align:right}
.cat-cine .ctas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
/* product frames: a studio cut-out on the dark stage with a soft floor glow */
.cine-f.prodf{display:grid;place-items:center;background:radial-gradient(60% 55% at 50% 58%,color-mix(in srgb,var(--tint) 45%,transparent),transparent 72%)}
.pf-stage{position:relative;width:min(78%,560px);height:78%}
.pf-stage::after{content:"";position:absolute;inset-inline:12%;bottom:2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(4px);z-index:-1}
.cine-f .pf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 60%;filter:drop-shadow(0 28px 40px rgba(0,0,0,.55))}
.pf-photo .pf-img{border-radius:14px}
@media (max-width:980px){.pf-stage{height:62%;margin-top:-12%}}
@media (max-width:560px){.mh.cine.cat-cine{min-height:calc(100svh - 70px)}.cat-cine .cine-in{padding-top:44svh}.cat-facts{gap:.6rem 1.1rem}}
.cat-cine.is-fam h1{font-size:clamp(1.7rem,1.1rem + 2vw,2.8rem);line-height:1.3}
.pf-stage.pf-photo{width:min(70%,480px);height:auto;aspect-ratio:4/5;max-height:76%;border-radius:20px;padding:5%;
  background:radial-gradient(90% 80% at 50% 45%,#fff,var(--studio) 60%,var(--studio-2));box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.pf-stage.pf-photo::after{display:none}
.pf-photo .pf-img{position:absolute;inset:5%;width:90%;height:90%;mix-blend-mode:multiply;filter:none;border-radius:0}

/* ---------- contact: request / message tabs ---------- */
.cform{gap:1rem}
.cf-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.3rem;background:var(--ink);border:1px solid var(--line);border-radius:12px}
.cf-tabs button{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700;font-size:var(--s0)}
.cf-tabs button[aria-selected="true"]{background:var(--fuka);color:var(--fuka-ink)}
.cf-tabs button:not([aria-selected="true"]):hover{color:var(--text);background:var(--ink-3)}
.cform form{display:flex;flex-direction:column;gap:1rem}
.cform select{width:100%;min-height:42px}
/* the moment after submitting: number + tracking code, big and legible */
.trk-ok{border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 7%,var(--ink-2));border-radius:14px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.75rem}
.trk-ok>b{display:flex;align-items:center;gap:.45rem;color:var(--ok);font-size:var(--s1)}
.trk-ok dl{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:0}
.trk-ok dt{font-size:var(--s-1);color:var(--muted)}.trk-ok dd{margin:0;font-size:var(--s1);direction:ltr;text-align:right}
.trk-code{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem)!important;font-weight:700;letter-spacing:.12em;color:var(--fuka-t)}
.trk-ok p{font-size:var(--s0);color:var(--text-2);line-height:1.9}

/* ---------- tracking page ---------- */
.trk-head{margin-block:.5rem 1.4rem;max-width:44rem}.trk-head p{line-height:1.95}
.trk-form{max-width:44rem;gap:1rem}
.trk-form #t-code{letter-spacing:.14em;font-size:var(--s2);text-transform:uppercase}
.trk-recent{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:var(--s-1)}
.trk-res{display:flex;flex-direction:column;gap:1.2rem;margin-top:1.6rem;scroll-margin-top:90px}
.trk-sum{gap:1.2rem}
.trk-id{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem}.trk-id b{font-size:var(--s3);direction:ltr}
.trk-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem;counter-reset:s}
.trk-steps li{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:.75rem .8rem .7rem;border-radius:10px;background:var(--ink);border:1px solid var(--line);color:var(--muted)}
.trk-steps li i{width:10px;height:10px;border-radius:50%;background:var(--line-2);margin-bottom:.35rem}
.trk-steps li b{font-size:var(--s0);font-weight:700}.trk-steps li small{font-size:.72rem;color:var(--dim)}
.trk-steps li.done{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));color:var(--text)}.trk-steps li.done i{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent)}
.trk-lines h3,.trk-msg h3,.trk-replies h3{font-size:var(--s1);margin-bottom:.6rem;display:flex;gap:.4rem;align-items:center}
.trk-lines ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.trk-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;align-items:center;padding:.55rem 0;border-bottom:1px dashed var(--line);font-size:var(--s0)}
.trk-lines li .mono{color:var(--dim);font-size:var(--s-1)}
.trk-msg p{color:var(--text-2);line-height:1.9;white-space:pre-line}
.trk-reply{background:var(--ink);border:1px solid var(--line);border-inline-start:3px solid var(--fuka);border-radius:10px;padding:.8rem 1rem}
.trk-reply+.trk-reply{margin-top:.6rem}.trk-reply p{line-height:1.95;color:var(--text)}.trk-reply small{color:var(--dim);font-size:.72rem}

/* ---------- proforma: a document, light paper in both themes, prints alone ---------- */
.prf-doc{--p-ink:#111827;--p-sub:#4b5563;--p-line:#d9dde6;background:#fff;color:var(--p-ink);border-radius:14px;padding:clamp(1rem,3vw,2.2rem);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1.2rem}
.prf-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem;align-items:flex-start;padding-bottom:1rem;border-bottom:2px solid var(--p-ink)}
.prf-brand{display:flex;align-items:center;gap:.8rem}.prf-brand .arco-logo{height:40px;width:auto;background:#10152a;padding:6px 10px;border-radius:6px}
.prf-brand b{display:block;font-size:var(--s1)}.prf-brand span{font-size:var(--s-1);color:var(--p-sub)}
.prf-title h2{font-size:var(--s4);margin:0 0 .4rem;color:var(--p-ink)}
.prf-title dl{margin:0;display:grid;grid-template-columns:auto auto;gap:.15rem 1rem;font-size:var(--s0)}
.prf-title dl div{display:contents}.prf-title dt{color:var(--p-sub)}.prf-title dd{margin:0;font-weight:600}
.prf-party{display:flex;gap:.6rem;align-items:baseline;font-size:var(--s1)}.prf-party .muted{color:var(--p-sub)}
.prf-tbl{border-color:var(--p-line)}.prf-tbl table{font-size:var(--s0);color:var(--p-ink)}
.prf-tbl th{background:#f3f4f7;color:var(--p-sub);border-color:var(--p-line)}.prf-tbl td{border-color:var(--p-line)}
.prf-tbl td:nth-child(2){white-space:normal;min-width:12rem}
.prf-tot{margin:0 0 0 auto;min-width:min(100%,340px);display:flex;flex-direction:column;border:1px solid var(--p-line);border-radius:10px;overflow:hidden}
.prf-tot div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .9rem;border-bottom:1px solid var(--p-line);font-size:var(--s0)}
.prf-tot dt{color:var(--p-sub)}.prf-tot dd{margin:0;font-family:var(--f-mono);font-weight:600;direction:ltr}
.prf-tot .pay{background:#fff7d6;border-bottom:0}.prf-tot .pay dt{color:var(--p-ink);font-weight:700}.prf-tot .pay dd{font-size:var(--s2)}
.prf-tot .pay small{font-family:var(--f-body);font-weight:400;color:var(--p-sub)}
.prf-note{font-size:var(--s0);line-height:1.9;color:var(--p-ink)}
.prf-foot{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;padding-top:.8rem;border-top:1px solid var(--p-line);font-size:var(--s-1);color:var(--p-sub)}
.prf-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.prf-doc .btn-o{color:var(--p-ink);border-color:var(--p-line)}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff!important;padding:0!important}
  body *{visibility:hidden}
  .prf-doc,.prf-doc *{visibility:visible}
  .prf-doc{position:absolute;inset:0 0 auto 0;box-shadow:none;border-radius:0;padding:0}
  .prf-actions{display:none}
  .prf-tbl{overflow:visible}
}
.prf-tbl td.u{display:none}.prf-tbl th:nth-child(5){display:none}
/* phone: each proforma line becomes a labelled block — nothing hidden in a side-scrolling table */
@media (max-width:620px){
  .prf-tbl{border:0;overflow:visible}.prf-tbl thead{display:none}
  .prf-tbl table,.prf-tbl tbody,.prf-tbl tr,.prf-tbl td{display:block;width:100%}
  .prf-tbl tr{border:1px solid var(--p-line);border-radius:10px;padding:.5rem .8rem;margin-bottom:.6rem}
  .prf-tbl td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.3rem 0;white-space:normal;text-align:start;min-width:0!important}
  .prf-tbl td::before{content:attr(data-l);color:var(--p-sub);font-family:var(--f-body);flex-shrink:0}
  .prf-tbl td:first-child{display:none}.prf-tbl td.u{display:none}
  .prf-tbl td:nth-child(2){font-weight:600}
  .prf-tot{min-width:100%}
}
@media print{.prf-tbl td.u,.prf-tbl th:nth-child(5){display:none}}

/* ===== v11 (phase 2.7): FUKA cursor, stories, long product texts, category guides, articles ===== */

/* ---------- FUKA logo as the mouse pointer (owner 1405/07/29; corrected the same day: not everywhere).
   The logo is the page's ordinary pointer (background, text, images). Where the cursor tells the visitor something it is
   the system one again: the hand on links and buttons, the text bar in fields, grab/resize in the 3D designer and the
   catalog reader (their own rules win, no !important here). Mouse/trackpad only; touch screens are unaffected. ---- */
@media (pointer: fine){
  html, body{
    cursor: url(/icons/fuka-cursor-32.png) 3 3, auto;
    cursor: -webkit-image-set(url(/icons/fuka-cursor-32.png) 1x, url(/icons/fuka-cursor-64.png) 2x) 3 3, auto;
    cursor: image-set(url(/icons/fuka-cursor-32.png) 1x, url(/icons/fuka-cursor-64.png) 2x) 3 3, auto;
  }
  a[href], button, [role="button"], [role="tab"], summary, label[for], select, .st-av, .chip, .btn{cursor:pointer}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), textarea, [contenteditable="true"]{cursor:text}
  input[type="checkbox"], input[type="radio"], input[type="range"], input[type="button"], input[type="submit"]{cursor:pointer}
  button:disabled, [aria-disabled="true"]{cursor:not-allowed}
}

/* ---------- stories strip: under the header on every page. Height reserved before the script runs (no layout shift). ---------- */
.stories{height:104px;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(180deg, color-mix(in srgb,var(--ink-2) 80%,transparent), transparent)}
.st-row{display:flex;gap:clamp(.9rem,2vw,1.6rem);list-style:none;margin:0;padding:.75rem max(1rem,calc((100vw - 1240px)/2)) .5rem;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;height:100%;box-sizing:border-box}
.st-row::-webkit-scrollbar{display:none}
.st-row li{flex:none;scroll-snap-align:start}
.st-av{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.38rem;width:72px;text-align:center}
.st-ring{position:relative;display:block;width:64px;height:64px;border-radius:50%;padding:3px;box-sizing:border-box;
  background:conic-gradient(from 200deg, #ffc816, #fff1a8, #f59e0b, #ffc816 60%, #ffe27a, #ffc816);
  box-shadow:0 0 0 1px color-mix(in srgb,#ffc816 35%,transparent), 0 0 16px 1px color-mix(in srgb,#ffc816 55%,transparent);
  transition:transform .18s ease, box-shadow .18s ease}
.st-ring img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid var(--ink);box-sizing:border-box;background:var(--ink-3)}
.st-av:hover .st-ring, .st-av:focus-visible .st-ring{transform:scale(1.06);box-shadow:0 0 0 1px #ffc816, 0 0 22px 3px color-mix(in srgb,#ffc816 70%,transparent)}
.st-av:focus-visible{outline:none}.st-av:focus-visible .st-t{text-decoration:underline}
.st-av.seen .st-ring{background:var(--line-2,#4b557a);box-shadow:none}
.st-av.st-loading .st-ring::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;animation:st-spin .8s linear infinite}
.st-t{font-size:.72rem;line-height:1.25;color:var(--text);max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-av.ig .st-ring{background:conic-gradient(from 200deg,#ffc816,#ff7a00,#e1306c,#833ab4,#ffc816)}
@keyframes st-spin{to{transform:rotate(360deg)}}
@media (max-width:560px){.stories{height:96px}.st-ring{width:58px;height:58px}.st-av{width:64px}.st-t{font-size:.68rem}}
@media print{.stories{display:none}}

/* ---------- story viewer ---------- */
html.st-open, html.st-open body{overflow:hidden}
.st-view{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(4,6,14,.94);backdrop-filter:blur(6px)}
.st-card{position:relative;width:min(420px,100vw);height:min(100dvh,calc(min(420px,100vw)*16/9));overflow:hidden;background:#0b0f20;color:#fff;
  border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6);outline:none;touch-action:none;user-select:none}
@media (max-width:560px){.st-card{width:100vw;height:100dvh;border-radius:0}}
.st-bars{position:absolute;inset-inline:.6rem;top:.6rem;z-index:3;display:flex;gap:4px}
.st-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.st-bars b{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:right}
.st-bars i.done b{transform:scaleX(1)}
.st-head{position:absolute;inset-inline:.6rem;top:1.1rem;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.st-who{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.st-who img{border-radius:50%;border:2px solid #ffc816;object-fit:cover}
.st-tools{display:flex;gap:.25rem}
.st-b{all:unset;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.28)}
.st-b .ic{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.st-b:focus-visible{outline:2px solid #ffc816}
.st-frame{position:absolute;inset:0;z-index:1}
.st-media{width:100%;height:100%;object-fit:cover;display:block}
.st-contain{object-fit:contain;background:radial-gradient(70% 60% at 50% 45%, #1d2650, #0b0f20 70%)}
.st-stage{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(60% 45% at 50% 82%, color-mix(in srgb,#ffc816 22%,transparent), transparent 70%), radial-gradient(80% 60% at 50% 40%, #222b58, #0b0f20 75%)}
.st-cut{width:auto;height:60%;max-width:80%;margin-top:-14%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55))}
.st-kb{animation:st-kb 6s ease-out both}
@keyframes st-kb{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.st-view.paused .st-kb{animation-play-state:paused}
.st-zone{all:unset;cursor:pointer;position:absolute;z-index:2;top:4.5rem;bottom:9rem;width:38%}
.st-next{left:0}.st-prev{right:0}
.st-cap{position:absolute;inset-inline:0;bottom:0;z-index:3;padding:4.5rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg, rgba(4,6,14,.92), rgba(4,6,14,.55) 60%, transparent)}
.st-h{margin:0 0 .35rem;font-size:clamp(1.2rem,4.6vw,1.45rem);line-height:1.35;font-weight:800;text-wrap:balance}
.st-l{margin:0 0 .9rem;color:#d7dcef;font-size:.95rem;line-height:1.6}
.st-cta{display:inline-flex}
@media (prefers-reduced-motion: reduce){.st-kb{animation:none}.st-ring{transition:none}}

/* ---------- phase 2.7: long product / accessory texts ---------- */
.pd-sub{margin-top:.35rem;font-size:var(--s0)}
.pd-long{margin-top:clamp(2rem,5vw,3.5rem);padding-top:clamp(1.5rem,4vw,2.5rem);border-top:1px solid var(--line)}
.pd-long-h{font-size:var(--s3);margin-bottom:1rem}
.pd-long-b.article{margin:0;max-width:46rem}
.pd-long-b h2{font-size:var(--s2);margin-block:2rem .6rem}
.pd-long-b h3{font-size:var(--s1);margin-block:1.25rem .35rem}
.pd-long-b .lead{font-size:var(--s1);line-height:1.9}
.pd-long-b ul{padding-inline-start:1.2rem}
.pd-long-b a{color:var(--text);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:.25em}
.pd-long-b a:hover{color:var(--y)}
/* assistant: the rack planner's equipment table */
.as-tb{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:.86em}
.as-tb th,.as-tb td{padding:.3rem .4rem;border-bottom:1px solid var(--line);text-align:start}
.as-tb th{color:var(--muted);font-weight:600}

/* ---------- phase 2.7: articles ---------- */
.post-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1rem 1.5rem}
.post-cats a{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border:1px solid var(--line-2);border-radius:999px;font-size:var(--s-1);color:var(--text-2)}
.post-cats a small{color:var(--muted)}
.post-cats a[aria-current="page"]{border-color:var(--y);color:var(--text);background:color-mix(in srgb,var(--y) 14%,transparent)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1rem}
.post-card .bd{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem 1.3rem}
.post-card h3{font-size:var(--s1);line-height:1.6}
.post-card h3 a{color:var(--text)}
.post-card h3 a:hover{color:var(--y)}
.post-card p{font-size:var(--s-1);color:var(--muted);line-height:1.8}
.post-meta{display:flex;flex-wrap:wrap;gap:.25rem .8rem;font-size:.78rem;color:var(--muted)}
.post-meta a{color:var(--fuka-t)}
.post-also{margin-top:clamp(2rem,5vw,3rem)}
.post-rel{display:grid;gap:.55rem;padding:0;list-style:none;font-size:var(--s-1);line-height:1.7}
.post-rel a{color:var(--text-2);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--y) 60%,transparent);text-underline-offset:.2em}
.post-b a{color:var(--text);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:.25em}
.post-b a:hover{color:var(--y)}
.post-b h3{font-size:var(--s2);margin-block:1.5rem .5rem}
.post-b .tbl-wrap{margin-block:1rem}
/* eight menu items since «مقالات»: on mid-size screens the brand tagline gives way and the items tighten (no overflow) */
@media (min-width:1061px) and (max-width:1380px){
  .top .tag{display:none}
  .nav .nv-a{padding:.45rem .4rem}
  .nv-t{width:22px;margin-inline-start:-.35rem}
}
@media (min-width:1061px) and (max-width:1180px){
  .nav .nv-a{font-size:.86rem;padding:.4rem .3rem}
}
/* article pages: a wide price table scrolls inside its box instead of widening the page on a phone */
.art-grid > *{min-width:0}
.post-b .tbl-wrap{max-width:100%;overflow-x:auto}

/* FUKA videos on rack pages (phase 2.9): portrait clips as a row of phone-sized cards, landscape loops two per row */
.vids{margin-top:clamp(2rem,5vw,3rem)}
.vids-tall{display:flex;flex-wrap:wrap;gap:1rem}
.vids-tall .vid{width:min(220px,46%)}
.vids-wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
@media (max-width:700px){.vids-wide{grid-template-columns:1fr}}
.vid{margin:0}
.vid video{display:block;width:100%;height:auto;border-radius:10px;background:var(--ink-2);border:1px solid var(--line)}
.vid figcaption{margin-top:.45rem;font-size:var(--s-1);color:var(--muted)}

/* category highlights (phase 2.9) */
.seo-in{margin:0 0 1.6rem;padding:1rem 1.2rem;border:1px solid var(--line);border-inline-start:3px solid var(--fuka-t);border-radius:10px;background:var(--ink-2)}
.seo-in-h{font-size:var(--s2);font-weight:700;margin:0 0 .35rem}
.seo-in-u{color:var(--muted);margin:0 0 .6rem;font-size:var(--s0)}
.seo-in ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.35rem 1.2rem}
.seo-in li{font-size:var(--s0)}

/* «خدمات ساخت فلزی فوکا» (phase 2.9.2) */
.svc-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:start;margin-bottom:1.5rem}
.svc-head h1{margin-top:.6rem}
.svc-fig{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.svc-fig img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
.svc-ask{margin-top:1.2rem}
.svc-ask p{margin:0 0 .6rem}
.svc-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem}
.svc-nav a{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:var(--s-1);color:var(--text)}
.svc-nav a[aria-current="page"]{border-color:var(--fuka-t);color:var(--fuka-t)}
.svc-steps ol{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:.7rem}
.svc-steps li{counter-increment:st;display:grid;grid-template-columns:2rem 1fr;column-gap:.7rem;align-items:baseline}
.svc-steps li::before{content:counter(st);grid-row:span 2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--ink-2);border:1px solid var(--line);font-weight:700}
.svc-steps li span{color:var(--muted);font-size:var(--s0)}
@media (max-width:900px){.svc-head{grid-template-columns:1fr}.svc-fig{order:-1}}
.fx-caps li a{display:inline-flex;align-items:center;gap:.5rem;color:inherit}
.fx-caps li a:hover span{text-decoration:underline;text-underline-offset:3px}

/* ---------- phase 2.10 (1405/08/06): «فروشگاه» /shop, product reviews and ratings, header search ---------- */
.srch-btn{width:40px;padding:0;justify-content:center}
@media (max-width:1060px){.srch-btn{margin-inline-start:auto}.srch-btn + .theme-btn{margin-inline-start:.4rem}}
@media (max-width:560px){.srch-btn{width:42px}}

/* stars: an outline row with a filled row clipped to the value */
.stars{position:relative;display:inline-block;width:80px;height:16px;vertical-align:-2px;flex-shrink:0}
.stars svg{position:absolute;inset-block-start:0;inset-inline-start:0;width:80px;height:16px;fill:var(--fuka)}
.stars .st-off{fill:none;stroke:var(--line-2);stroke-width:1.4}
.stars .st-on{position:absolute;inset:0 auto 0 auto;inset-inline-start:0;overflow:hidden;height:16px}
.stars.lg,.stars.lg svg,.stars.lg .st-on{width:120px;height:24px}

/* ---------- shop ---------- */
.sp-hero{background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 32px,var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:1.25rem}
.sp-h1{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);line-height:1.35;max-width:22em}
.sp-lead{color:var(--muted);max-width:44em;margin-block:.6rem 1.25rem;line-height:1.8}
.sp-search{position:relative;max-width:760px}
.sp-search > .ic{position:absolute;inset-inline-start:1rem;top:50%;translate:0 -50%;width:22px;height:22px;color:var(--fuka-t);pointer-events:none}
.sp-search input{width:100%;min-height:58px;font-size:var(--s2);padding-inline:3.2rem 1rem;border-radius:10px;background:var(--ink);border:1.5px solid var(--line-2)}
.sp-search input:focus{outline:none;border-color:var(--fuka);box-shadow:0 0 0 3px color-mix(in srgb,var(--fuka) 30%,transparent)}
.sp-sug{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:30;background:var(--ink-2);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);padding:.35rem;list-style:none;margin:0;max-height:min(420px,60vh);overflow:auto}
.sp-sug a{display:flex;align-items:center;gap:.75rem;padding:.45rem .6rem;border-radius:8px;color:var(--text)}
.sp-sug img{width:40px;height:40px;object-fit:contain;background:var(--studio);border-radius:6px;padding:2px;mix-blend-mode:normal}
.sp-sug .ic{width:40px;height:22px;color:var(--fuka-t)}
.sp-sug span:not(.p){display:flex;flex-direction:column;min-width:0;flex:1}
.sp-sug b{font-weight:600;font-size:var(--s0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sug small{color:var(--dim);font-size:var(--s-1)}
.sp-sug .p{font-family:var(--f-mono);font-size:var(--s-1);color:var(--muted)}
.sp-sug [aria-selected="true"] a,.sp-sug a:hover{background:var(--ink-3)}
.sp-sug .none{padding:.7rem;color:var(--muted);font-size:var(--s-1)}
.sp-depts{display:flex;gap:.5rem;margin-top:1.25rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.sp-depts::-webkit-scrollbar{display:none}
.sp-depts button{display:flex;align-items:center;gap:.5rem;flex-shrink:0;border:1px solid var(--line-2);background:var(--ink);color:var(--text);border-radius:10px;padding:.55rem .9rem;font-size:var(--s0);font-weight:600}
.sp-depts button .ic{width:20px;height:20px;color:var(--fuka-t)}
.sp-depts button small{font-family:var(--f-mono);font-weight:400;color:var(--dim);font-size:var(--s-1)}
.sp-depts button:hover{border-color:var(--fuka-t)}
.sp-depts button[aria-pressed="true"]{background:var(--fuka);border-color:var(--fuka);color:var(--fuka-ink)}
.sp-depts button[aria-pressed="true"] .ic,.sp-depts button[aria-pressed="true"] small{color:var(--fuka-ink)}
.sp-body{display:grid;grid-template-columns:272px minmax(0,1fr);gap:2rem;align-items:start;padding-top:1.5rem}
.sp-side{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:thin}
.sp-side-h,.sp-side-f{display:none}
.sp-fg{border-bottom:1px solid var(--line);padding-block:.9rem}
.sp-fg:first-child{padding-top:0}
.sp-fg summary{cursor:pointer;font-weight:700;font-size:var(--s0);list-style:none;display:flex;justify-content:space-between;align-items:center}
.sp-fg summary::-webkit-details-marker{display:none}
.sp-fg summary::after{content:"";width:8px;height:8px;border-inline-start:2px solid var(--muted);border-bottom:2px solid var(--muted);rotate:-45deg;transition:rotate .15s}
.sp-fg[open] summary::after{rotate:135deg}
.sp-fg > :not(summary){margin-top:.8rem}
.sp-opts{display:flex;flex-direction:column;gap:.15rem}
.sp-opt{flex-direction:row;align-items:center;gap:.6rem;color:var(--text);font-size:var(--s0);padding:.3rem .2rem;border-radius:6px;cursor:pointer}
.sp-opt:hover{background:var(--ink-3)}
.sp-opt input{width:18px;height:18px;accent-color:var(--fuka);margin:0;padding:0}
.sp-opt span{flex:1;display:flex;align-items:center;gap:.4rem}
.sp-opt small{font-family:var(--f-mono);color:var(--dim)}
.sp-opt.off{opacity:.45;cursor:default}
/* the height filter: rack heights to scale */
.sp-sky{display:flex;align-items:end;gap:3px;justify-content:space-between}
.sp-u{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:none;border:0;padding:.25rem 0;color:var(--muted);flex:1;min-width:0;border-radius:6px}
.sp-ubar{display:block;width:100%;max-width:20px;border-radius:2px 2px 1px 1px;background:var(--ink-3);border:1px solid var(--line-2);position:relative;overflow:hidden}
.sp-ubar i{position:absolute;inset:2px;background:repeating-linear-gradient(to bottom,var(--line-2) 0 1px,transparent 1px calc(100% / var(--n)))}
.sp-u b{font-family:var(--f-mono);font-size:.68rem;font-weight:600;color:var(--text)}
.sp-u small{font-family:var(--f-mono);font-size:.62rem;color:var(--dim)}
.sp-u:hover .sp-ubar{border-color:var(--fuka-t)}
.sp-u[aria-pressed="true"] .sp-ubar{background:var(--fuka);border-color:var(--fuka)}
.sp-u[aria-pressed="true"] .sp-ubar i{background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--fuka-ink) 45%,transparent) 0 1px,transparent 1px calc(100% / var(--n)))}
.sp-u[aria-pressed="true"] b{color:var(--fuka-t)}
.sp-u[disabled]{opacity:.35;cursor:default}
.sp-u:focus-visible{outline:2px solid var(--fuka);outline-offset:1px}
/* price range: two thumbs on one track (log scale) */
.sp-range{position:relative;height:28px;direction:rtl}
.sp-range::before{content:"";position:absolute;inset-inline:0;top:12px;height:4px;border-radius:2px;background:linear-gradient(to left,var(--line-2) var(--a),var(--fuka) var(--a),var(--fuka) var(--b),var(--line-2) var(--b))}
.sp-range input{position:absolute;inset:0;width:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;min-height:0}
.sp-range input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:var(--fuka);border:3px solid var(--ink-2);box-shadow:0 0 0 1px var(--fuka);cursor:pointer}
.sp-range input::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--fuka);border:3px solid var(--ink-2);cursor:pointer}
.sp-range input::-webkit-slider-runnable-track{background:none}
.sp-range input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--fuka) 45%,transparent)}
.sp-pin{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.sp-pin input{width:100%;min-height:40px;font-family:var(--f-mono);font-size:var(--s-1);text-align:center}
.sp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.75rem}
.sp-n{margin-inline-end:auto;color:var(--muted)}
.sp-n b{color:var(--text);font-size:var(--s2)}
.sp-fbtn{display:none}
.sp-sort{flex-direction:row;align-items:center;gap:.5rem}
.sp-sort select{min-height:40px}
.sp-view{display:flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.sp-view button{background:none;border:0;width:40px;height:38px;color:var(--muted);display:grid;place-items:center}
.sp-view button[aria-pressed="true"]{background:var(--ink-3);color:var(--fuka-t)}
.sp-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.sp-chips:empty{display:none}
.sp-chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--fuka);color:var(--text);background:color-mix(in srgb,var(--fuka) 12%,transparent);border-radius:99px;padding:.25rem .45rem .25rem .7rem;font-size:var(--s-1)}
.sp-chip .ic{width:14px;height:14px;color:var(--fuka-t)}
.sp-clear{background:none;border:0;color:var(--fuka-t);font-size:var(--s-1);text-decoration:underline;text-underline-offset:3px;padding:.25rem .4rem}
.sp-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.sp-card{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative}
.sp-card:hover{border-color:var(--line-2)}
.sp-card:focus-within{border-color:var(--fuka-t)}
.sp-ph{display:grid;place-items:center;background:radial-gradient(90% 80% at 50% 45%,#fff,var(--studio) 60%,var(--studio-2));aspect-ratio:1/1;padding:1.1rem;position:relative}
.sp-ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sp-ph .u{position:absolute;top:.6rem;inset-inline-start:.6rem;background:var(--studio-ink);color:var(--fuka);font-family:var(--f-mono);font-size:var(--s-1);padding:.12rem .45rem;border-radius:4px}
.sp-noimg{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--studio-ink);opacity:.55;font-size:var(--s-1)}
.sp-noimg .ic{width:32px;height:32px}
.is-svc .sp-ph{background:var(--ink-3)}
.is-svc .sp-ph img{opacity:.5;mix-blend-mode:normal}
.sp-svc{position:absolute;z-index:1;width:64px;height:64px;border-radius:50%;background:var(--fuka);display:grid;place-items:center}
.sp-svc .ic{width:32px;height:32px;color:var(--fuka-ink)}
.sp-bd{padding:.85rem .9rem .9rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.sp-kind{font-size:var(--s-1);color:var(--dim)}
.sp-kind .mono{color:var(--muted)}
.sp-card h3{font-size:var(--s0);font-weight:700;line-height:1.6}
.sp-card h3 a::after{content:"";position:absolute;inset:0;z-index:0}
.sp-card h3 a:focus-visible{outline:none}
.sp-card h3 a:focus-visible::after{outline:2px solid var(--fuka);outline-offset:-2px;border-radius:10px}
.sp-specs{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0}
.sp-specs li{font-size:.72rem;color:var(--muted);background:var(--ink-3);border-radius:4px;padding:.1rem .45rem;unicode-bidi:plaintext}
.sp-rate{display:flex;align-items:center;gap:.35rem;font-size:var(--s-1)}
.sp-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:.6rem;border-top:1px dashed var(--line);flex-wrap:wrap}
.sp-ft .price{font-size:var(--s1)}
.sp-ft .btn,.sp-cmp{position:relative;z-index:1}
.sp-cmp{flex-direction:row;align-items:center;gap:.4rem;font-size:var(--s-1);color:var(--muted);align-self:flex-start;cursor:pointer}
.sp-cmp input{width:16px;height:16px;accent-color:var(--fuka);margin:0;padding:0}
.sp-grid.is-list{grid-template-columns:1fr}
.sp-grid.is-list .sp-card{flex-direction:row}
.sp-grid.is-list .sp-ph{width:150px;flex-shrink:0;aspect-ratio:auto;min-height:150px}
.sp-grid.is-list .sp-bd{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:1rem}
.sp-grid.is-list .sp-bd > *{flex-basis:100%}
.sp-grid.is-list .sp-ft{border-top:0;padding-top:0}
.sp-empty{grid-column:1/-1;border:1px dashed var(--line-2);border-radius:10px;padding:1.5rem;color:var(--muted);display:flex;flex-direction:column;gap:1rem}
.sp-empty b{color:var(--text)}
.sp-near{grid-column:1/-1;font-size:var(--s2);margin-top:.5rem}
/* compare tray + dialog */
.sp-cmpbar{position:fixed;inset-inline:0;bottom:0;z-index:55;background:color-mix(in srgb,var(--ink-2) 96%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--fuka);padding-block:.6rem}
.sp-cmpbar .wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.sp-cmp-t{display:flex;align-items:center;gap:.4rem;font-size:var(--s-1);color:var(--muted)}
.sp-cmp-t .ic{color:var(--fuka-t)}
.sp-cmpbar ul{display:flex;gap:.5rem;list-style:none;margin:0;padding:0;flex:1;flex-wrap:wrap}
.sp-cmpbar li{display:flex;align-items:center;gap:.35rem;border:1px solid var(--line-2);border-radius:8px;padding:.2rem .3rem .2rem .5rem;font-size:var(--s-1)}
.sp-cmpbar li img{width:32px;height:32px;object-fit:contain;background:var(--studio);border-radius:4px}
.sp-cmpbar li button{background:none;border:0;color:var(--muted);display:grid;place-items:center;width:26px;height:26px}
.sp-cmpbar li .ic{width:14px;height:14px}
.sp-dlg{border:1px solid var(--line-2);border-radius:12px;background:var(--ink-2);color:var(--text);padding:1.25rem;width:min(980px,calc(100vw - 24px));max-height:calc(100vh - 40px)}
.sp-dlg::backdrop{background:rgba(5,8,18,.7)}
.sp-dlg-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.sp-dlg-h h2{font-size:var(--s3)}
.sp-x{background:none;border:1px solid var(--line-2);border-radius:8px;width:40px;height:40px;display:grid;place-items:center;color:var(--text)}
.sp-ctbl{width:100%;border-collapse:collapse;font-size:var(--s0)}
.sp-ctbl th,.sp-ctbl td{padding:.55rem .6rem;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.sp-ctbl thead th{vertical-align:top}
.sp-ctbl thead a{display:flex;flex-direction:column;gap:.3rem;color:var(--text);font-weight:600}
.sp-ctbl thead img{width:110px;height:110px;object-fit:contain;background:var(--studio);border-radius:8px;padding:6px}
.sp-ctbl tbody th{color:var(--muted);font-weight:400;white-space:nowrap}
.sp-ctbl tr.df td{font-weight:700;color:var(--text)}
.sp-ctbl tr.df th{color:var(--fuka-t)}
html.sp-lock{overflow:hidden}
@media (max-width:900px){
  .sp-body{grid-template-columns:1fr;padding-top:1rem}
  .sp-fbtn{display:inline-flex}
  .sp-n{flex-basis:100%;order:-1}
  .sp-sort{margin-inline-start:auto}
  .sp-side{position:fixed;inset-inline:0;bottom:0;top:auto;z-index:80;max-height:86vh;background:var(--ink-2);border-radius:16px 16px 0 0;border-top:1px solid var(--line-2);
    padding:0 1rem;translate:0 105%;transition:translate .22s ease;box-shadow:0 0 0 100vmax rgba(0,0,0,0);visibility:hidden;display:flex;flex-direction:column}
  .sp-side.open{translate:0 0;box-shadow:0 0 0 100vmax rgba(5,8,18,.6);visibility:visible}
  .sp-side-h{display:flex;justify-content:space-between;align-items:center;padding-block:.8rem;position:sticky;top:0;background:var(--ink-2);z-index:1}
  .sp-facets{overflow:auto;flex:1}
  .sp-side-f{display:block;position:sticky;bottom:0;background:var(--ink-2);padding-block:.75rem calc(.75rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
  .sp-side-f .btn{width:100%}
}
@media (max-width:760px){
  .sp-cmpbar{bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .sp-ph{padding:.7rem}
  .sp-bd{padding:.6rem}
  .sp-ft{flex-direction:column;align-items:stretch}
  .sp-ft .btn{width:100%}
  .sp-grid.is-list .sp-ph{width:110px;min-height:110px}
  .sp-search input{min-height:52px;font-size:var(--s1)}
  .sp-view{display:none}
}
@media (prefers-reduced-motion:reduce){.sp-side{transition:none}}

/* ---------- reviews ---------- */
.rv{margin-top:3rem;scroll-margin-top:90px}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.rv-head .pd-long-h{margin:0}
.rv-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:2rem;align-items:start}
.rv-sum{display:flex;flex-direction:column;gap:.5rem}
.rv-avg{display:flex;align-items:baseline;gap:.4rem}
.rv-avg b{font-family:var(--f-mono);font-size:2.6rem;line-height:1}
.rv-dist{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.rv-dist li{display:grid;grid-template-columns:1rem 14px 1fr 2rem;align-items:center;gap:.4rem;font-size:var(--s-1);color:var(--muted)}
.rv-dist .ic{width:14px;height:14px;color:var(--fuka-t)}
.rv-dist .bar{height:6px;border-radius:3px;background:var(--ink-3);overflow:hidden}
.rv-dist .bar i{display:block;height:100%;background:var(--fuka)}
.rv-dist .c{text-align:end}
.rv-none{color:var(--muted);line-height:1.8}
.rv-list{display:flex;flex-direction:column}
.rv-list:empty{display:none}
.rv-item{border-bottom:1px solid var(--line);padding-block:1rem}
.rv-item:first-child{padding-top:0}
.rv-item header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--s-1);margin-bottom:.4rem}
.rv-item header b{font-size:var(--s0)}
.rv-item p{line-height:1.9;color:var(--text-2)}
.rv-reply{margin-top:.6rem;border-inline-start:3px solid var(--fuka);background:var(--ink-3);border-radius:0 8px 8px 0;padding:.6rem .8rem}
.rv-reply b{font-size:var(--s-1);color:var(--fuka-t)}
.rv-form{margin-top:1.5rem;max-width:760px}
.rv-form h3{font-size:var(--s2)}
.rv-rate{border:0;padding:0;margin:0;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.rv-rate legend{font-size:var(--s-1);color:var(--muted);margin-bottom:.4rem;padding:0}
.rv-stars{display:flex;gap:.15rem}
.rv-stars label{position:relative;cursor:pointer;display:block;padding:2px}
.rv-stars input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rv-stars svg{width:34px;height:34px;fill:none;stroke:var(--line-2);stroke-width:1.4;transition:fill .1s}
.rv-stars label.on svg{fill:var(--fuka);stroke:var(--fuka)}
.rv-stars input:focus-visible + svg{outline:2px solid var(--fuka);outline-offset:2px;border-radius:4px}
.rv-rate-t{font-size:var(--s-1);color:var(--muted)}
.rv-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.rv-fields input{width:100%;min-height:44px}
.req{color:var(--fuka-t)}
@media (max-width:760px){.rv-grid{grid-template-columns:1fr;gap:1rem}.rv-fields{grid-template-columns:1fr}}
html.sp-lock .as-fab{display:none}
html:has(.sp-cmpbar:not([hidden])) .as-fab:not(.tucked){bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (max-width:760px){html:has(.sp-cmpbar:not([hidden])) .as-fab:not(.tucked){bottom:calc(140px + env(safe-area-inset-bottom,0px))}}
@media (max-width:560px){.sp-lead{display:none}.sp-h1{margin-bottom:.9rem}}
/* nine menu items + search since «فروشگاه»: the tagline gives way up to 1560px; below 1180px the theme label folds to its icon */
@media (min-width:1061px) and (max-width:1560px){.top .tag{display:none}.nav .nv-a{padding:.45rem .4rem}.nv-t{width:22px;margin-inline-start:-.35rem}}
@media (min-width:1061px) and (max-width:1240px){.theme-btn .tb-l{display:none}.theme-btn{width:40px;justify-content:center;padding:0}.top .wrap{gap:.5rem}.nav .nv-a{padding:.45rem .3rem;font-size:.84rem}.nav .nv-a .ic{display:none}}

/* ---------- FUKA website photographs (WEBDECO): figures with a caption on type, series and technology pages ---------- */
.wd{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-block:1.25rem 2rem}
.wd-f{margin:0;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.wd-f img{display:block;width:100%;height:auto;aspect-ratio:auto}
.wd-f:not(.wd-tall) img{aspect-ratio:16/10;object-fit:cover}
.wd-1 .wd-f:not(.wd-tall) img{aspect-ratio:auto;object-fit:contain}
.wd-f figcaption{font-size:var(--s-1);color:var(--muted);padding:.5rem .75rem}
.wd-1{grid-template-columns:minmax(0,800px)}
.wd-tall{max-width:300px}
.wd-tall img{max-height:520px;object-fit:contain;background:#111}
/* product page: a long thumbnail row (FUKA photos + drawings) scrolls inside its column instead of widening the page on phones */
.pd > *{min-width:0}