*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  /* core */
  --bg:#06060a;--bg1:#08080e;--bg2:#0b0c13;--bg3:#0f1018;
  --glass:rgba(255,255,255,.035);--glass2:rgba(255,255,255,.05);
  --bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);
  /* brand */
  --y:#F5C400;--y2:#ffd84d;--yd:#cfa400;
  /* holo / color-shift signature */
  --h1:#ff2e88;--h2:#a855f7;--h3:#22d3ee;--h4:#f5c400;
  --holo:linear-gradient(115deg,#ff2e88 0%,#a855f7 32%,#22d3ee 64%,#f5c400 100%);
  --holo2:linear-gradient(115deg,#22d3ee,#a855f7,#ff2e88);
  /* text */
  --tw:#f3f3f7;--tm:#9a9aab;--td:#5c5c6e;--tx:#37374a;
  --r:16px;--rl:24px;--rx:32px;
  --mono:'Space Mono',monospace;
}
body{font-family:'Inter','Noto Sans SC',system-ui,sans-serif;background:var(--bg);color:var(--tw);overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative}
h1,h2,h3,h4,.disp{font-family:'Space Grotesk','Noto Sans SC','Inter',sans-serif}
:lang(zh-CN){font-family:'Noto Sans SC','Inter',system-ui,sans-serif}
::selection{background:var(--y);color:#000}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--h2),var(--h3));border-radius:8px}
img{display:block}
a{color:inherit}

/* ── ambient page backdrop ── */
.bgfx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:
  radial-gradient(ellipse 60% 50% at 80% -5%,rgba(168,85,247,.10),transparent 60%),
  radial-gradient(ellipse 55% 45% at 0% 30%,rgba(34,211,238,.08),transparent 60%),
  radial-gradient(ellipse 70% 60% at 50% 110%,rgba(245,196,0,.06),transparent 60%),
  var(--bg)}
.bgfx::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 100% 100% at 50% 0%,#000 10%,transparent 80%)}
#starfield{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9}

.container{max-width:1320px;margin:0 auto;padding:0 5%}
section{padding:110px 0;position:relative}

/* ── scroll progress ── */
.sprog{position:fixed;top:0;left:0;height:2px;width:0;z-index:1100;background:var(--holo);box-shadow:0 0 12px rgba(168,85,247,.6)}

/* ── custom cursor ── */
.cur,.curd{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);mix-blend-mode:screen}
.cur{width:8px;height:8px;background:var(--y);transition:width .2s,height .2s,background .2s}
.curd{width:42px;height:42px;border:1px solid rgba(245,196,0,.5);transition:transform .14s ease-out,width .25s,height .25s,border-color .25s}
.cur.act{width:0;height:0}
.curd.act{width:64px;height:64px;border-color:rgba(168,85,247,.8);background:rgba(168,85,247,.05)}
@media(hover:none){.cur,.curd{display:none}}

/* ── shared section header ── */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--y);margin-bottom:16px}
.eyebrow::before{content:'';width:26px;height:1px;background:linear-gradient(90deg,var(--y),transparent)}
.eyebrow.ctr{justify-content:center}.eyebrow.ctr::after{content:'';width:26px;height:1px;background:linear-gradient(270deg,var(--y),transparent)}
.h-ttl{font-size:clamp(2rem,3.4vw,3.1rem);font-weight:700;line-height:1.05;letter-spacing:-1px;color:var(--tw)}
.h-ttl .holo{background:var(--holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:holoShift 6s linear infinite}
@keyframes holoShift{to{background-position:200% center}}
.h-sub{color:var(--tm);font-size:15px;line-height:1.75;max-width:560px;margin-top:18px}
.divln{width:54px;height:3px;border-radius:3px;background:var(--holo);margin:18px 0 0}
.sec-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:54px;flex-wrap:wrap;gap:20px}
.lnk{font-family:var(--mono);color:var(--tw);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--bd2);border-radius:50px;transition:.3s;background:var(--glass)}
.lnk:hover{border-color:var(--y);color:var(--y);box-shadow:0 0 24px rgba(245,196,0,.18)}
.lnk::after{content:'→';transition:transform .3s}
.lnk:hover::after{transform:translateX(4px)}

/* ── badges ── */
.b{display:inline-flex;align-items:center;padding:3px 10px;border-radius:50px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;backdrop-filter:blur(8px)}
.b-new{background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.4);color:#5be3ff}
.b-hot{background:rgba(255,46,136,.14);border:1px solid rgba(255,46,136,.4);color:#ff6aa6}
.b-sale{background:rgba(245,196,0,.14);border:1px solid rgba(245,196,0,.4);color:var(--y2)}
.stars{color:var(--y);font-size:11px;letter-spacing:2px}

/* ── buttons ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.3px;text-decoration:none;cursor:pointer;border:none;font-family:inherit;border-radius:12px;transition:transform .25s cubic-bezier(.34,1.4,.5,1),box-shadow .3s;will-change:transform}
.btn-p{background:var(--y);color:#08080e;padding:15px 30px;box-shadow:0 0 0 rgba(245,196,0,0)}
.btn-p:hover{box-shadow:0 14px 40px rgba(245,196,0,.35),0 0 0 1px rgba(245,196,0,.5);transform:translateY(-3px)}
.btn-g{background:var(--glass2);color:var(--tw);padding:15px 30px;border:1px solid var(--bd2);backdrop-filter:blur(10px)}
.btn-g:hover{border-color:var(--h2);color:#fff;box-shadow:0 0 30px rgba(168,85,247,.25);transform:translateY(-3px)}
.btn-sm{padding:9px 18px;font-size:11px;border-radius:9px}

/* ── ANN BAR ── */
.ann{position:relative;z-index:1001;overflow:hidden;background:linear-gradient(90deg,rgba(245,196,0,.1),rgba(168,85,247,.08),rgba(34,211,238,.08));border-bottom:1px solid var(--bd);padding:9px 0}
.ann-track{display:flex;gap:60px;white-space:nowrap;animation:marq 28s linear infinite;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tm)}
.ann-track span{display:inline-flex;align-items:center;gap:10px}
.ann-track b{color:var(--y);font-weight:700}
.ann-track a{color:var(--h3);text-decoration:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:1000;transition:transform .4s,background .4s,border-color .4s}
nav.hide{transform:translateY(-100%)}
.nw{max-width:1320px;margin:10px auto 0;padding:0 18px;height:62px;display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:rgba(8,8,14,.6);backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--bd);border-radius:50px;width:calc(100% - 4%);box-shadow:0 8px 40px rgba(0,0,0,.4)}
.logo{font-family:'Space Grotesk';font-size:18px;font-weight:700;letter-spacing:2px;color:var(--tw);text-decoration:none;flex-shrink:0;display:flex;align-items:center;gap:9px}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--holo);box-shadow:0 0 14px rgba(168,85,247,.7);animation:holoShift 4s linear infinite;background-size:200%}
.logo em{font-style:normal;background:var(--holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:holoShift 6s linear infinite}
/* TeckWrap's real logo is a black wordmark on transparent, with no light/reversed
   variant published anywhere on their site. A white silhouette derived from the
   same artwork (same shapes/proportions, ink colour only) sits directly on the
   dark nav -- no backing chip. */
.logo-mark{display:flex;align-items:center;transition:filter .25s,transform .25s}
.logo-mark img{display:block;height:46px;width:auto;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
.logo:hover .logo-mark{transform:translateY(-1px)}
.logo:hover .logo-mark img{filter:drop-shadow(0 1px 6px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(255,255,255,.35))}
.nl{display:flex;list-style:none;gap:2px}
.nl a{color:var(--tm);text-decoration:none;font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:50px;transition:.25s;white-space:nowrap;position:relative}
.nl a:hover{color:var(--tw)}
.nl a.on{color:var(--y)}
.nl a.on::after{content:'';position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--y);box-shadow:0 0 8px var(--y)}
.nr{display:flex;align-items:center;gap:12px;flex-shrink:0}
.menubtn{display:none;background:none;border:none;color:var(--tw);font-size:22px;cursor:pointer}
.langSwitch{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--tw);background:var(--glass);border:1px solid var(--bd2);border-radius:50px;padding:9px 15px;cursor:pointer;transition:.25s}
.langSwitch:hover{border-color:var(--y);color:var(--y);box-shadow:0 0 24px rgba(245,196,0,.18)}
.drawer .langSwitch{align-self:flex-start;margin-top:8px}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:60px 0 40px}
.horb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0}
.horb.o1{width:520px;height:520px;background:radial-gradient(circle,rgba(168,85,247,.4),transparent 70%);top:-10%;right:-6%}
.horb.o2{width:440px;height:440px;background:radial-gradient(circle,rgba(34,211,238,.32),transparent 70%);bottom:-12%;left:-8%}
.horb.o3{width:360px;height:360px;background:radial-gradient(circle,rgba(245,196,0,.22),transparent 70%);top:40%;left:42%}
.hbody{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:3;width:100%}
.hpill{display:inline-flex;align-items:center;gap:9px;background:var(--glass2);border:1px solid var(--bd2);color:var(--tw);padding:8px 16px 8px 12px;border-radius:50px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:26px;backdrop-filter:blur(10px)}
.hpill .pd{width:7px;height:7px;border-radius:50%;background:var(--y);box-shadow:0 0 10px var(--y);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hero h1{font-size:clamp(2.8rem,5.6vw,5.4rem);font-weight:700;line-height:.98;letter-spacing:-3px;margin-bottom:24px}
.hero h1 span{display:block}
.hero h1 .l2{background:var(--holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:holoShift 5s linear infinite}
.hero h1 .l3{-webkit-text-stroke:1.5px rgba(255,255,255,.28);color:transparent}
.hdesc{color:var(--tm);font-size:16px;line-height:1.75;margin-bottom:36px;max-width:470px}
.hctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}
.hstats{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.hst .n{font-family:'Space Grotesk';font-size:2.1rem;font-weight:700;color:var(--tw);line-height:1;letter-spacing:-1px}
.hst .n em{font-style:normal;color:var(--y)}
.hst .l{font-family:var(--mono);font-size:9.5px;color:var(--td);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px}
.hsd{width:1px;height:38px;background:var(--bd2)}
/* hero visual */
.hvis{position:relative;height:580px}
.hmain{position:absolute;inset:0;border-radius:var(--rx);overflow:hidden;border:1px solid var(--bd2);box-shadow:0 50px 120px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.04)}
.hmain img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s;transform:scale(1.05)}
.hmain::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 40%,rgba(6,6,10,.55) 100%)}
.hmain::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 60%);background-size:300% 300%;animation:sheen 5s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}
.hframe{position:absolute;inset:-1px;border-radius:var(--rx);pointer-events:none;z-index:3;padding:1px;background:var(--holo);background-size:200%;animation:holoShift 6s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5}
.htag{position:absolute;background:rgba(10,10,16,.75);backdrop-filter:blur(18px);border:1px solid var(--bd2);border-radius:16px;padding:11px;z-index:6;width:172px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.htag.t1{bottom:26px;left:-30px}
.htag.t2{top:40px;right:-30px}
.htag-img{width:100%;height:60px;border-radius:10px;overflow:hidden;margin-bottom:9px}
.htag-img img{width:100%;height:100%;object-fit:cover}
.htag-name{font-size:12.5px;font-weight:700;color:var(--tw)}
.htag-sub{font-family:var(--mono);font-size:9.5px;color:var(--y);letter-spacing:.5px;margin-top:3px}
.hscroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:4;font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--td);display:flex;flex-direction:column;align-items:center;gap:8px}
.hscroll .ln{width:1px;height:34px;background:linear-gradient(var(--y),transparent);position:relative;overflow:hidden}
.hscroll .ln::after{content:'';position:absolute;top:0;left:0;width:100%;height:40%;background:var(--y);animation:scrolldn 1.8s ease-in-out infinite}
@keyframes scrolldn{0%{top:-40%}100%{top:100%}}

/* ── MARQUEE TRUST ── */
.tbar{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);background:var(--bg1);padding:22px 0;overflow:hidden;position:relative}
.tbar::before,.tbar::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.tbar::before{left:0;background:linear-gradient(90deg,var(--bg1),transparent)}
.tbar::after{right:0;background:linear-gradient(270deg,var(--bg1),transparent)}
.tb-track{display:flex;gap:54px;white-space:nowrap;animation:marq 32s linear infinite;width:max-content}
.tb{display:flex;align-items:center;gap:11px;color:var(--tm);font-size:13.5px;font-weight:500;flex-shrink:0}
.tb .ic{font-size:18px;filter:saturate(1.2)}

/* ═══ CARD SYSTEM (glass) ═══ */
.pc{position:relative;background:var(--glass);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .4s,box-shadow .4s;transform-style:preserve-3d;will-change:transform}
.pc::after{content:'';position:absolute;inset:0;border-radius:var(--r);padding:1px;background:var(--holo);background-size:200%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none;animation:holoShift 6s linear infinite}
.pc:hover{border-color:transparent;box-shadow:0 28px 60px rgba(0,0,0,.5)}
.pc:hover::after{opacity:.8}
.pc .glow{position:absolute;inset:0;border-radius:var(--r);background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(168,85,247,.14),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:1}
.pc:hover .glow{opacity:1}
.pth{height:200px;position:relative;overflow:hidden}
.pth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.pc:hover .pth img{transform:scale(1.08)}
.pbadges{position:absolute;top:11px;left:11px;display:flex;gap:5px;flex-wrap:wrap;z-index:3}
.pwish{position:absolute;top:11px;right:11px;width:34px;height:34px;border-radius:50%;background:rgba(6,6,10,.5);backdrop-filter:blur(8px);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--tm);z-index:3;cursor:pointer;transition:.25s}
.pwish:hover{background:rgba(255,46,136,.2);border-color:var(--h1);color:#ff6aa6;transform:scale(1.1)}
.pbd{padding:18px;flex:1;display:flex;flex-direction:column;position:relative;z-index:2}
.pbd h3{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:5px;color:var(--tw);font-family:'Space Grotesk'}
.pbd .sku{font-family:var(--mono);font-size:9.5px;color:var(--td);letter-spacing:1px;text-transform:uppercase;margin-bottom:9px}
.pbd .rat{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.pbd .rat span{font-size:11px;color:var(--td)}
.pft{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:13px;border-top:1px solid var(--bd)}
.pft .pr{font-family:'Space Grotesk';font-size:16px;font-weight:700;color:var(--tw)}
.pft .pr small{font-size:10px;color:var(--td);font-weight:400}
.addb{background:var(--glass2);color:var(--y);border:1px solid rgba(245,196,0,.3);cursor:pointer;padding:8px 15px;border-radius:9px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.5px;transition:.25s}
.addb:hover{background:var(--y);color:#000;border-color:var(--y)}
.vlt{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:'Space Grotesk';font-size:30px;font-weight:700;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.9);letter-spacing:-1px;line-height:1;pointer-events:none;z-index:3}
.vlt small{display:block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:2px;color:var(--y);margin-top:3px;text-shadow:none}

/* grids */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gauto{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:20px}
.smore{text-align:center;margin-top:48px;padding:32px;border-radius:var(--r);border:1px dashed var(--bd2);background:var(--glass)}
.smore p{font-size:13.5px;color:var(--tm);margin-bottom:18px}

/* ═══ ABOUT ═══ */
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.aimg{position:relative;height:540px;border-radius:var(--rx);overflow:visible}
.aimg .frame{position:absolute;inset:0;border-radius:var(--rx);overflow:hidden;border:1px solid var(--bd2)}
.aimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.aimg:hover img{transform:scale(1.05)}
.aimg .frame::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 50%,rgba(6,6,10,.5))}
.abadge{position:absolute;border-radius:18px;padding:18px 22px;backdrop-filter:blur(18px);z-index:4;border:1px solid var(--bd2)}
.abadge.b1{bottom:-22px;right:-22px;background:var(--y);color:#000;box-shadow:0 18px 50px rgba(245,196,0,.4)}
.abadge.b2{top:-22px;left:-22px;background:rgba(10,10,16,.75);color:var(--tw)}
.abadge .n{font-family:'Space Grotesk';font-size:28px;font-weight:700;line-height:1}
.abadge .l{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;margin-top:4px;opacity:.75}
.about-para{color:var(--tm);font-size:14.5px;line-height:1.85;margin-bottom:16px}
.about-lead{font-size:17px;font-weight:600;color:var(--tw);margin-bottom:14px}
.achips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.achip{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--bd);border-radius:10px;padding:9px 15px;font-size:12px;font-weight:500;color:var(--tm);transition:.25s}
.achip:hover{border-color:var(--y);color:var(--tw);transform:translateY(-3px);box-shadow:0 0 24px rgba(245,196,0,.12)}
.achip span{font-size:15px}

/* ═══ NUMBERS BENTO ═══ */
#numbers{padding:120px 0}
.nbento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.nb{position:relative;background:var(--glass);border:1px solid var(--bd);border-radius:22px;padding:32px 28px;overflow:hidden;transition:transform .4s,border-color .4s,box-shadow .4s}
.nb:hover{transform:translateY(-5px);border-color:var(--bd2);box-shadow:0 28px 60px rgba(0,0,0,.4)}
.nb::after{content:'';position:absolute;inset:0;border-radius:22px;background:radial-gradient(circle at 50% 0%,rgba(168,85,247,.12),transparent 60%);opacity:0;transition:.4s;pointer-events:none}
.nb:hover::after{opacity:1}
.nb-w2{grid-column:span 2}.nb-w3{grid-column:span 3}.nb-w4{grid-column:span 4}.nb-w6{grid-column:span 6}
.nb-num{font-family:'Space Grotesk';font-size:clamp(3rem,5.5vw,5.2rem);font-weight:700;color:var(--y);line-height:1;letter-spacing:-3px;display:block;font-variant-numeric:tabular-nums;text-shadow:0 0 50px rgba(245,196,0,.3)}
.nb-num-sm{font-family:'Space Grotesk';font-size:clamp(2.2rem,3.5vw,3.6rem);font-weight:700;color:var(--y);line-height:1;letter-spacing:-2px;display:block;text-shadow:0 0 36px rgba(245,196,0,.25)}
.nb-label{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--td);margin-top:10px;display:block}
.nb-sub{font-size:13px;color:var(--tm);margin-top:12px;line-height:1.65}
.nb-icon{font-size:26px;margin-bottom:14px;display:block;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.nb:hover .nb-icon{transform:scale(1.2) rotate(-8deg)}
.nb-hl{background:linear-gradient(135deg,var(--y),var(--y2))!important;border-color:var(--y)!important}
.nb-hl .nb-num{color:#000!important;text-shadow:none!important}
.nb-hl .nb-label{color:rgba(0,0,0,.55)!important}.nb-hl .nb-sub{color:rgba(0,0,0,.62)!important}
.nb-hl::after{display:none}
.nb-holo{background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(34,211,238,.06))!important;border-color:rgba(168,85,247,.22)!important}
.ring-wrap{width:94px;height:94px;position:relative;margin:0 auto 18px}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:5}
.ring-fill{fill:none;stroke:var(--y);stroke-width:5;stroke-linecap:round;stroke-dasharray:214;stroke-dashoffset:214;transition:stroke-dashoffset 2s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 6px rgba(245,196,0,.5))}
.nb.visible .ring-fill{stroke-dashoffset:var(--offset,0)}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-center .nb-num-sm{font-size:1.7rem;letter-spacing:-1px}
.ring-center small{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--td);display:block;margin-top:3px}
.nb-timeline{display:flex;flex-direction:column;gap:11px;margin-top:18px}
.nb-tl{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--tm)}
.nb-tl-dot{width:7px;height:7px;border-radius:50%;background:var(--y);box-shadow:0 0 8px rgba(245,196,0,.5);flex-shrink:0}
.nb-tl-bar{flex:1;height:2px;background:rgba(255,255,255,.07);border-radius:1px;overflow:hidden}
.nb-tl-fill{height:100%;background:var(--holo);background-size:200%;border-radius:1px;width:0;transition:width 1.5s cubic-bezier(.4,0,.2,1);animation:holoShift 4s linear infinite}
.nb.visible .nb-tl-fill{width:var(--tlw,0%)}
.nb-sw{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.nb-sw i{width:28px;height:28px;border-radius:50%;border:2px solid rgba(0,0,0,.25);opacity:0;transform:scale(.2);transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .5s}
.nb.visible .nb-sw i{opacity:1;transform:scale(1)}
.nb-globe{position:absolute;right:-26px;bottom:-26px;width:160px;height:160px;border-radius:50%;border:1.5px solid rgba(168,85,247,.14);opacity:.5;pointer-events:none;animation:spin 30s linear infinite}
.nb-globe::before{content:'';position:absolute;inset:18px;border-radius:50%;border:1.5px dashed rgba(34,211,238,.12)}
.nb-globe::after{content:'';position:absolute;inset:40px;border-radius:50%;border:1.5px solid rgba(245,196,0,.1)}
@keyframes spin{to{transform:rotate(360deg)}}
.nb-certs{display:flex;flex-wrap:wrap;background:var(--glass);border:1px solid var(--bd);border-radius:22px;overflow:hidden}
.nb-cert{flex:1;min-width:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;border-right:1px solid var(--bd);transition:background .3s}
.nb-cert:last-child{border-right:none}
.nb-cert:hover{background:rgba(168,85,247,.06)}
.nb-cert-icon{font-size:22px;margin-bottom:9px;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.nb-cert:hover .nb-cert-icon{transform:scale(1.2) rotate(-5deg)}
.nb-cert-name{font-size:12px;font-weight:700;color:var(--tw);text-align:center}
.nb-cert-desc{font-family:var(--mono);font-size:9px;color:var(--td);margin-top:4px;text-align:center;letter-spacing:.5px}

/* ═══ PROCESS ═══ */
.proc-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px;position:relative}
.proc-line{position:absolute;top:46px;left:12.5%;right:12.5%;height:2px;background:var(--bd2);z-index:0}
.proc-fill{height:100%;width:0;background:var(--holo);background-size:200%;transition:width 1.6s cubic-bezier(.4,0,.2,1);animation:holoShift 4s linear infinite}
.pstep{text-align:center;padding:0 20px;position:relative;z-index:1}
.psnum{width:92px;height:92px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--bd2);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:30px;position:relative;transition:.5s cubic-bezier(.34,1.56,.64,1)}
.pstep:hover .psnum{border-color:var(--y);transform:translateY(-6px) scale(1.08);box-shadow:0 18px 44px rgba(245,196,0,.25)}
.psn{position:absolute;top:-4px;right:-4px;width:26px;height:26px;border-radius:50%;background:var(--y);color:#000;font-family:var(--mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pstep h4{font-size:16px;font-weight:600;color:var(--tw);margin-bottom:11px;font-family:'Space Grotesk'}
.pstep p{font-size:12.5px;color:var(--tm);line-height:1.7}

/* ═══ COLLECTIONS ═══ */
.cgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;grid-template-rows:280px 280px;gap:16px}
/* .cc is now the whole clickable card (an <a>, not a div) -- there is no
   separate button once the badge/subtitle are gone, so the card itself is
   the only way to reach the product page. */
.cc{display:block;text-decoration:none;border-radius:var(--rl);overflow:hidden;position:relative;cursor:pointer;border:1px solid var(--bd);transition:transform .4s,box-shadow .4s}
.cc:hover{transform:translateY(-6px);box-shadow:0 32px 70px rgba(0,0,0,.55)}
.cc:hover img{transform:scale(1.08)}
.cc:first-child{grid-row:span 2}
.cc img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
/* Title only, no panel: a strong multi-layer text-shadow carries legibility
   instead of a background chip. This trades the WCAG-provable contrast
   guarantee a solid panel gave for a fully unobstructed photo -- deliberate,
   per user request, not an oversight. */
.cco{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:22px;z-index:2}
.cc:not(:first-child) .cco{justify-content:flex-start}
/* Black fill + light stroke reads against both dark AND light patches of an
   unpredictable photo -- a shadow alone only helps on light backgrounds. */
.ccl{font-family:'Space Grotesk';font-size:20px;font-weight:700;color:#000;
  -webkit-text-stroke:1.6px #fff;paint-order:stroke fill;
  text-shadow:0 2px 10px rgba(0,0,0,.35)}
.cc:first-child .ccl{font-size:28px;-webkit-text-stroke:2px #fff}

/* ═══ FILTER TABS ═══ */
.ftabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.ftab{padding:8px 18px;border-radius:50px;border:1px solid var(--bd);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--tm);cursor:pointer;transition:.25s;background:var(--glass);text-transform:uppercase}
.ftab:hover{color:var(--tw);border-color:var(--bd2)}
.ftab.on{background:var(--y);color:#000;border-color:var(--y)}

/* ═══ PPF ═══ */
.ppf-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-bottom:20px}
.ppf-feat{border-radius:var(--rl);overflow:hidden;position:relative;height:480px;border:1px solid var(--bd2)}
.ppf-feat img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.ppf-feat:hover img{transform:scale(1.05)}
.ppf-feat::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,10,.95) 0%,rgba(6,6,10,.05) 55%,transparent 100%)}
.ppf-fb{position:absolute;bottom:0;left:0;right:0;padding:30px;z-index:2}
.ppf-ftag{display:inline-block;background:var(--y);color:#000;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 13px;border-radius:50px;margin-bottom:12px}
.ppf-fb h3{font-family:'Space Grotesk';font-size:23px;font-weight:700;margin-bottom:6px}
.ppf-fb p{color:var(--tm);font-size:12.5px}
.ppf-aside{display:flex;flex-direction:column;gap:20px}
.ppf-aside .pc .pth{height:178px}
/* compare table */
.ctbl{background:var(--glass);border-radius:var(--rl);border:1px solid var(--bd);overflow:hidden;margin-top:24px}
.cth{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;background:rgba(168,85,247,.06);border-bottom:1px solid var(--bd);padding:16px 24px;gap:8px}
.cth span{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--td);text-transform:uppercase;letter-spacing:1px}
.ctr{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;padding:16px 24px;gap:8px;border-bottom:1px solid var(--bd);align-items:center;transition:background .25s}
.ctr:last-child{border-bottom:none}
.ctr:hover{background:rgba(255,255,255,.025)}
.ctr .cn{font-size:13.5px;font-weight:600;color:var(--tw);font-family:'Space Grotesk'}
.ctr .cn small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--td);font-weight:400;margin-top:2px}
.ctr .col{font-size:12.5px;color:var(--tm)}
.chk{color:#2ee6a6;font-size:16px}.xmk{color:#ff5e7a;font-size:16px}
.cpy{color:var(--y);font-weight:700;font-size:13px;font-family:'Space Grotesk'}

/* ═══ WINDOW FILMS ═══ */
.tser{margin-bottom:56px}
.tshd{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.tshd h3{font-family:'Space Grotesk';font-size:19px;font-weight:600;color:var(--tw)}
.tshd p{font-size:12px;color:var(--tm);margin-top:3px}
.tsbadge{margin-left:auto;background:var(--glass2);border:1px solid var(--bd2);color:var(--y);font-family:var(--mono);font-size:9px;font-weight:700;padding:5px 13px;border-radius:50px;letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0}
.tsdiv{flex:1;height:1px;background:var(--bd)}

/* ═══ TOOLS ═══ */
#tools .pth{background:#0e0e15}
#tools .pth img{object-fit:contain;padding:18px}
.kits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:52px}
.kc{position:relative;background:var(--glass);border:1px solid var(--bd);border-radius:22px;overflow:hidden;transition:.4s}
.kc:hover{border-color:var(--bd2);transform:translateY(-5px);box-shadow:0 28px 60px rgba(0,0,0,.4)}
.kc-img{height:230px;overflow:hidden;background:#0e0e15;border-bottom:1px solid var(--bd)}
.kc-img img{width:100%;height:100%;object-fit:contain;padding:22px;transition:transform .5s}
.kc:hover .kc-img img{transform:scale(1.06)}
.kc-body{padding:24px}
.kc-body h3{font-family:'Space Grotesk';font-size:17px;font-weight:600;margin-bottom:7px;color:var(--tw)}
.kc-body p{color:var(--tm);font-size:12.5px;line-height:1.6;margin-bottom:16px}
.kc-best{position:absolute;top:16px;right:16px;background:var(--y);color:#000;font-family:var(--mono);font-size:9px;font-weight:700;padding:5px 11px;border-radius:50px;letter-spacing:.5px;z-index:3}
.toolslbl{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--td);text-transform:uppercase;letter-spacing:2px;margin-bottom:20px}

/* ═══ GALLERY ═══ */
.gfilter{display:flex;gap:8px;flex-wrap:wrap}
.gfbtn{padding:8px 18px;border-radius:50px;border:1px solid var(--bd);font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--tm);cursor:pointer;transition:.25s;background:var(--glass);text-transform:uppercase}
.gfbtn:hover{color:var(--tw)}
.gfbtn.on{background:var(--y);color:#000;border-color:var(--y)}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px}
.gi{border-radius:18px;overflow:hidden;position:relative;cursor:pointer;background:var(--bg3);border:1px solid var(--bd)}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.3,1)}
.gi:hover img{transform:scale(1.1)}
.gi.tall{grid-row:span 2}.gi.wide{grid-column:span 2}
.govl{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,10,.92),rgba(6,6,10,.1) 60%,transparent);opacity:0;transition:opacity .4s;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.gi:hover .govl{opacity:1}
.gon{font-family:'Space Grotesk';font-size:14px;font-weight:600;color:#fff;transform:translateY(12px);transition:transform .4s}
.gos{font-family:var(--mono);font-size:10px;color:var(--y);margin-top:4px;transform:translateY(12px);transition:transform .4s .05s}
.gi:hover .gon,.gi:hover .gos{transform:translateY(0)}
.giexp{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(6,6,10,.5);backdrop-filter:blur(8px);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;opacity:0;transition:.4s;z-index:2}
.gi:hover .giexp{opacity:1}
/* lightbox */
.lbx{position:fixed;inset:0;background:rgba(4,4,8,.96);backdrop-filter:blur(8px);z-index:9999;display:none;align-items:center;justify-content:center}
.lbx.open{display:flex}
.lbx-img{max-width:86vw;max-height:84vh;border-radius:16px;object-fit:contain;animation:pop .35s ease;border:1px solid var(--bd2)}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
.lbx-close{position:absolute;top:24px;right:28px;font-size:30px;color:#fff;cursor:pointer;background:none;border:none;opacity:.7;transition:.2s}
.lbx-close:hover{opacity:1;transform:rotate(90deg)}
.lbx-info{position:absolute;bottom:30px;text-align:center;color:#fff}
.lbx-info h4{font-family:'Space Grotesk';font-size:17px;font-weight:600}
.lbx-info p{font-family:var(--mono);font-size:11px;color:var(--y);margin-top:5px}
.lbx-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:26px;color:#fff;cursor:pointer;background:var(--glass2);border:1px solid var(--bd2);width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.25s}
.lbx-nav:hover{background:var(--y);color:#000;border-color:var(--y)}
.lbx-prev{left:24px}.lbx-next{right:24px}

/* ═══ TEAM ═══ */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px}
.tcard{height:370px;perspective:1400px;cursor:pointer}
.tinner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.tcard:hover .tinner{transform:rotateY(180deg)}
.tfront,.tback{position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;overflow:hidden;border:1px solid var(--bd)}
.tfront{background:var(--glass)}
.tback{background:var(--bg3);transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;border-color:rgba(168,85,247,.25)}
.tavatar{height:218px;display:flex;align-items:center;justify-content:center;font-size:64px;position:relative;overflow:hidden}
.av1{background:linear-gradient(135deg,#1a0540,#4a1080)}.av2{background:linear-gradient(135deg,#042418,#0a5a40)}
.av3{background:linear-gradient(135deg,#3a1000,#7a2800)}.av4{background:linear-gradient(135deg,#001830,#0050a0)}
.av5{background:linear-gradient(135deg,#2a0020,#6a0050)}.av6{background:linear-gradient(135deg,#2a2200,#6a5800)}
.tavatar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:55%;background:linear-gradient(to top,var(--glass),transparent)}
.tfbody{padding:20px 24px}
.tfbody h4{font-family:'Space Grotesk';font-size:16px;font-weight:600;color:var(--tw);margin-bottom:4px}
.tfbody .role{font-size:12px;color:var(--tm)}
.tdept{display:inline-block;background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.3);color:#c79bff;font-family:var(--mono);font-size:9px;font-weight:700;padding:4px 11px;border-radius:50px;margin-top:10px;letter-spacing:.5px}
.tback h4{font-family:'Space Grotesk';font-size:20px;font-weight:700;color:#fff;margin-bottom:6px}
.tback .role{font-family:var(--mono);font-size:10px;color:var(--y);letter-spacing:2px;text-transform:uppercase;margin-bottom:18px}
.tback p{font-size:12.5px;color:var(--tm);line-height:1.75;margin-bottom:22px}
.tsocs{display:flex;gap:9px;justify-content:center}
.tsoc{width:36px;height:36px;border-radius:10px;background:var(--glass2);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;cursor:pointer;transition:.25s;text-decoration:none}
.tsoc:hover{background:var(--y);border-color:var(--y);color:#000}

/* ═══ SAMPLE CTA ═══ */
.scta{position:relative;overflow:hidden;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.scta-bg{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,46,136,.12),rgba(168,85,247,.12),rgba(34,211,238,.1),rgba(245,196,0,.12));background-size:300%;animation:holoShift 10s linear infinite;z-index:0}
.scta-inner{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:80px 5%;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.scta-inner h2{font-family:'Space Grotesk';font-size:clamp(1.9rem,3vw,2.6rem);font-weight:700;color:var(--tw);margin-bottom:12px;line-height:1.1}
.scta-inner p{color:var(--tm);font-size:15px;max-width:500px;line-height:1.7}
.scta-eye{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--y);margin-bottom:14px}
.scta-btns{display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0}

/* ═══ REVIEWS ═══ */
.rvg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rvc{position:relative;background:var(--glass);border:1px solid var(--bd);border-radius:var(--r);padding:28px;transition:.35s;overflow:hidden}
.rvc:hover{transform:translateY(-5px);border-color:var(--bd2);box-shadow:0 28px 60px rgba(0,0,0,.4)}
.rvq{font-family:'Space Grotesk';font-size:48px;color:var(--y);line-height:.6;margin-bottom:14px;opacity:.5}
.rvt{color:var(--tw);font-size:14px;line-height:1.75;margin-bottom:20px}
.rvprod{background:var(--glass2);border:1px solid var(--bd2);border-radius:8px;padding:6px 12px;font-family:var(--mono);font-size:10px;color:var(--tm);margin-bottom:14px;display:inline-block}
.rvprod strong{color:var(--y)}
.rva{display:flex;justify-content:space-between;align-items:flex-end;padding-top:16px;border-top:1px solid var(--bd)}
.rva-name{font-size:13px;font-weight:700;color:var(--tw)}
.rva-role{font-size:11px;color:var(--tm);margin-top:2px}
.rva-date{font-family:var(--mono);font-size:10px;color:var(--td)}

/* ═══ FAQ ═══ */
.faq-g{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:54px;align-items:start}
.fi{background:var(--glass);border-radius:14px;border:1px solid var(--bd);overflow:hidden;transition:border-color .25s}
.fi.open{border-color:rgba(245,196,0,.3)}
.fq{padding:21px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer}
.fq h4{font-size:14px;font-weight:600;line-height:1.4;color:var(--tw);font-family:'Space Grotesk'}
.ftog{width:30px;height:30px;border-radius:50%;background:var(--glass2);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;transition:.35s;color:var(--y)}
.fi.open .ftog{background:var(--y);color:#000;transform:rotate(135deg)}
.fa{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;padding:0 22px;color:var(--tm);font-size:13px;line-height:1.75}
.fi.open .fa{max-height:340px;padding:0 22px 20px}

/* ═══ NEWSLETTER ═══ */
.nl-sec{padding:80px 0;border-top:1px solid var(--bd);position:relative;overflow:hidden}
.nl-sec .horb{filter:blur(80px);opacity:.4}
.nl-inner{max-width:660px;margin:0 auto;text-align:center;padding:0 5%;position:relative;z-index:2}
.nl-inner h3{font-family:'Space Grotesk';font-size:2rem;font-weight:700;margin-bottom:10px}
.nl-inner p{color:var(--tm);font-size:14.5px;margin-bottom:30px}
.nlf{display:flex;gap:11px;max-width:480px;margin:0 auto}
.nli{flex:1;background:var(--glass);border:1px solid var(--bd2);border-radius:12px;padding:14px 18px;color:var(--tw);font-size:14px;font-family:inherit;outline:none;transition:.25s}
.nli:focus{border-color:var(--y);box-shadow:0 0 24px rgba(245,196,0,.12)}
.nli::placeholder{color:var(--td)}

/* ═══ CONTACT ═══ */
.cg{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:54px}
.ci-row{display:flex;flex-direction:column;gap:22px}
.ci{display:flex;align-items:flex-start;gap:15px}
.ci-ic{width:46px;height:46px;background:var(--glass2);border:1px solid var(--bd2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.ci-lbl{font-family:var(--mono);font-size:10px;color:var(--td);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px}
.ci-val{font-size:14px;font-weight:600;color:var(--tw)}
.ci-val a{color:var(--tw);text-decoration:none;transition:.2s}.ci-val a:hover{color:var(--y)}
.cform{background:var(--glass);border-radius:var(--rl);padding:34px;border:1px solid var(--bd)}
.cform h3{font-family:'Space Grotesk';font-size:20px;font-weight:600;margin-bottom:26px}
.cf2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cfl{display:block;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--td);text-transform:uppercase;letter-spacing:1px;margin-bottom:7px}
.cfi,.cfta,.cfsel{width:100%;background:var(--glass);border:1px solid var(--bd2);border-radius:10px;padding:12px 16px;color:var(--tw);font-size:13.5px;font-family:inherit;outline:none;transition:.25s;margin-bottom:15px}
.cfi:focus,.cfta:focus,.cfsel:focus{border-color:var(--y);box-shadow:0 0 20px rgba(245,196,0,.1)}
.cfi::placeholder,.cfta::placeholder{color:var(--td)}
.cfsel{background:var(--bg3);color:var(--tm)}
.cfta{height:120px;resize:vertical;margin-bottom:20px}
.cfsub{width:100%}

/* ═══ FOOTER ═══ */
footer{background:var(--bg1);border-top:1px solid var(--bd);padding:74px 0 0;position:relative}
.fg{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.3fr;gap:44px;margin-bottom:56px}
.fb-logo{font-family:'Space Grotesk';font-size:18px;font-weight:700;letter-spacing:2px;color:var(--tw);text-decoration:none;display:inline-flex;align-items:center;gap:9px;margin-bottom:18px}
.fb-logo .dot{width:8px;height:8px;border-radius:50%;background:var(--holo);background-size:200%;animation:holoShift 5s linear infinite}
.fb-logo em{font-style:normal;background:var(--holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:holoShift 6s linear infinite}
.fb p{color:var(--td);font-size:12.5px;line-height:1.8;margin-bottom:22px;max-width:300px}
.fsoc{display:flex;gap:9px}
.fsc{width:36px;height:36px;border-radius:10px;background:var(--glass2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--tm);transition:.25s;text-decoration:none}
.fsc:hover{background:var(--y);border-color:var(--y);color:#000;transform:translateY(-3px)}
.fc h4{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--td);margin-bottom:18px}
.fc ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.fc a{color:var(--tm);font-size:12.5px;text-decoration:none;transition:.2s}.fc a:hover{color:var(--y)}
.fcerts{display:flex;flex-direction:column;gap:8px}
.cert{display:inline-flex;align-items:center;gap:9px;background:var(--glass);border:1px solid var(--bd);border-radius:9px;padding:9px 14px;font-size:11.5px;color:var(--tm);transition:.25s}
.cert:hover{border-color:rgba(245,196,0,.3);color:var(--tw)}
.cert-dot{width:7px;height:7px;border-radius:50%;background:var(--y);box-shadow:0 0 8px var(--y);flex-shrink:0}
.fbot{border-top:1px solid var(--bd);padding:24px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.fbot p{color:var(--td);font-size:11.5px}
/* mainland China hosting/ICP filing requirement -- number itself is not
   translated, so it sits outside the data-zh copyright line rather than
   nested inside it (i18n.js does el.textContent= on plain data-zh elements,
   which would silently delete a nested link on every language toggle) */
.fbot-copy{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.beian-link{color:var(--td);font-size:11.5px;text-decoration:none;transition:.2s;white-space:nowrap}
.beian-link:hover{color:var(--y)}
.flinks{display:flex;gap:20px}
.flinks a{color:var(--td);font-size:11.5px;text-decoration:none;transition:.2s}.flinks a:hover{color:var(--y)}

/* ═══ REVEAL ═══ */
.anim{opacity:0;transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.anim.fu{transform:translateY(48px)}
.anim.fl{transform:translateX(-56px)}
.anim.fr{transform:translateX(56px)}
.anim.fs{transform:scale(.9)}
.anim.visible{opacity:1!important;transform:none!important}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.floatY{animation:floatY 4s ease-in-out infinite}

/* ── portfolio mode: hide prices & cart ── */
.pft,.kc-price,.addb,.ppf-price-row{display:none!important}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .fg{grid-template-columns:1fr 1fr 1fr}
  .ppf-layout{grid-template-columns:1fr}.ppf-feat{height:340px}
  .ppf-aside{flex-direction:row}.ppf-aside .pc{flex:1}
}
@media(max-width:900px){
  section{padding:80px 0}
  .nl,.menubtn~.nr .lnk{}
  .nl{display:none}
  .menubtn{display:block}
  .hbody{grid-template-columns:1fr;gap:48px}
  .hvis{height:380px}
  .hero h1{letter-spacing:-1.5px}
  .about-wrap{grid-template-columns:1fr;gap:52px}
  .aimg{height:360px}
  .nbento{grid-template-columns:repeat(2,1fr)}.nb-w2,.nb-w3,.nb-w4,.nb-w6{grid-column:span 2}
  .proc-steps{grid-template-columns:1fr 1fr;gap:44px 20px}.proc-line{display:none}
  .cgrid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:240px}
  .cc:first-child{grid-row:span 1;grid-column:span 2}
  .g3,.rvg,.kits{grid-template-columns:1fr 1fr}
  .ggrid{grid-template-columns:repeat(2,1fr)}.gi.wide{grid-column:span 1}
  .tgrid{grid-template-columns:1fr 1fr}
  .faq-g,.cg{grid-template-columns:1fr}.cg{gap:40px}
  .lbx-nav{display:none}
}
@media(max-width:600px){
  section{padding:60px 0}
  .g4,.g3,.rvg,.kits,.tgrid{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr;grid-auto-rows:220px}.cc:first-child{grid-column:span 1}
  .nbento{grid-template-columns:1fr}.nb-w2,.nb-w3,.nb-w4,.nb-w6{grid-column:span 1}
  .nb-certs{flex-direction:column}.nb-cert{border-right:none!important;border-bottom:1px solid var(--bd)}
  .proc-steps{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr}
  .ppf-aside{flex-direction:column}
  .hctas{flex-direction:column}.hctas .btn{width:100%}
  .nlf{flex-direction:column}
  .htag{display:none}
  .ggrid{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
}
@media(max-width:420px){.fg{grid-template-columns:1fr}.cth,.ctr{grid-template-columns:2fr 1fr 1fr}.cth span:nth-child(n+4),.ctr>div:nth-child(n+4){display:none}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:1200;background:rgba(6,6,10,.97);backdrop-filter:blur(20px);display:none;flex-direction:column;padding:80px 8% 40px}
.drawer.open{display:flex}
.drawer a{color:var(--tw);font-family:'Space Grotesk';font-size:24px;font-weight:600;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--bd)}
.drawer a:hover{color:var(--y)}
.drawer .dclose{position:absolute;top:28px;right:8%;font-size:30px;background:none;border:none;color:var(--tw);cursor:pointer}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .anim{opacity:1!important;transform:none!important}
}

/* ══════════════════════════════════════════════
   SUB-PAGE SYSTEM  (added for the multi-page build)
   ══════════════════════════════════════════════ */

/* ── page banner ── */
.phero{position:relative;padding:82px 0 70px;overflow:hidden;border-bottom:1px solid var(--bd)}
.phero .horb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none}
.phero .horb.o1{width:440px;height:440px;background:radial-gradient(circle,rgba(168,85,247,.38),transparent 70%);top:-45%;right:2%}
.phero .horb.o2{width:360px;height:360px;background:radial-gradient(circle,rgba(34,211,238,.28),transparent 70%);bottom:-55%;left:-4%}
.phero-in{position:relative;z-index:3;max-width:820px}
.phero h1{font-size:clamp(2.3rem,4.6vw,3.9rem);font-weight:700;line-height:1.03;letter-spacing:-2px;margin-bottom:20px}
.phero h1 .holo{background:var(--holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:holoShift 6s linear infinite}
.phero p{color:var(--tm);font-size:16px;line-height:1.8;max-width:620px}
.phero .divln{margin:22px 0 0}

/* ── breadcrumbs ── */
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:20px}
.crumbs a{color:var(--td);text-decoration:none;transition:.25s}
.crumbs a:hover{color:var(--y)}
.crumbs span{color:var(--y)}
.crumbs i{font-style:normal;color:var(--tx)}

/* ── reusable CTA band ── */
.ctaband{position:relative;overflow:hidden;border-radius:var(--rx);border:1px solid var(--bd2);background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(34,211,238,.06));padding:56px 48px;text-align:center;margin:96px 0 0}
.ctaband::after{content:'';position:absolute;inset:0;border-radius:var(--rx);padding:1px;background:var(--holo);background-size:200%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.45;pointer-events:none;animation:holoShift 6s linear infinite}
.ctaband h3{font-size:clamp(1.6rem,2.9vw,2.4rem);font-weight:700;letter-spacing:-1px;margin-bottom:14px}
.ctaband p{color:var(--tm);font-size:14.5px;line-height:1.75;max-width:520px;margin:0 auto 28px}
.ctaband .btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ── timeline (about) ── */
.tl{position:relative;margin-top:20px;padding-left:34px}
.tl::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--y),rgba(168,85,247,.5),transparent)}
.tli{position:relative;padding-bottom:38px}
.tli:last-child{padding-bottom:0}
.tli::before{content:'';position:absolute;left:-34px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--y);box-shadow:0 0 14px rgba(245,196,0,.5)}
.tli .yr{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2px;color:var(--y);margin-bottom:7px}
.tli h4{font-size:17px;font-weight:600;margin-bottom:8px;color:var(--tw)}
.tli p{color:var(--tm);font-size:13.5px;line-height:1.75}

/* ── value / feature cards ── */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.val{position:relative;background:var(--glass);border:1px solid var(--bd);border-radius:var(--rl);padding:32px 28px;transition:transform .4s,border-color .4s,box-shadow .4s;overflow:hidden}
.val:hover{transform:translateY(-6px);border-color:var(--bd2);box-shadow:0 28px 60px rgba(0,0,0,.45)}
.val::after{content:'';position:absolute;inset:0;border-radius:var(--rl);background:radial-gradient(circle at 50% 0%,rgba(168,85,247,.13),transparent 62%);opacity:0;transition:.4s;pointer-events:none}
.val:hover::after{opacity:1}
.val .vi{font-size:30px;margin-bottom:16px;display:block;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.val:hover .vi{transform:scale(1.18) rotate(-7deg)}
.val h4{font-size:16.5px;font-weight:600;margin-bottom:10px;color:var(--tw)}
.val p{color:var(--tm);font-size:13.5px;line-height:1.75}
.val .vnum{position:absolute;top:18px;right:22px;font-family:'Space Grotesk';font-size:44px;font-weight:700;color:rgba(255,255,255,.045);line-height:1}

/* ── split feature rows ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative;height:430px;border-radius:var(--rx);overflow:hidden;border:1px solid var(--bd2)}
.split-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.split-media:hover img{transform:scale(1.05)}
.split-media::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 50%,rgba(6,6,10,.5))}
.split-body p{color:var(--tm);font-size:14.5px;line-height:1.85;margin-bottom:15px}

/* ── dealer tiers ── */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--bd);border-radius:var(--rl);padding:34px 30px;transition:transform .4s,border-color .4s,box-shadow .4s}
.tier:hover{transform:translateY(-7px);box-shadow:0 30px 66px rgba(0,0,0,.5)}
.tier.feat{border-color:rgba(245,196,0,.45);background:linear-gradient(160deg,rgba(245,196,0,.09),var(--glass))}
.tier-tag{position:absolute;top:-11px;left:30px;background:var(--y);color:#08080e;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 13px;border-radius:50px}
.tier h4{font-family:'Space Grotesk';font-size:21px;font-weight:700;margin-bottom:7px;color:var(--tw)}
.tier .tsub{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--y);margin-bottom:22px}
.tier ul{list-style:none;margin-top:4px;flex:1}
.tier li{display:flex;gap:10px;align-items:flex-start;color:var(--tm);font-size:13.5px;line-height:1.65;padding:9px 0;border-bottom:1px solid var(--bd)}
.tier li:last-child{border-bottom:none}
.tier li::before{content:'✓';color:var(--y);font-weight:700;flex-shrink:0}
.tier .btn{margin-top:26px;width:100%}

/* ── office / info cards ── */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.office{background:var(--glass);border:1px solid var(--bd);border-radius:var(--rl);padding:28px 26px;transition:.35s}
.office:hover{border-color:var(--y);transform:translateY(-5px);box-shadow:0 0 34px rgba(245,196,0,.1)}
.office .oflag{font-size:26px;margin-bottom:14px;display:block}
.office h4{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--tw)}
.office .orole{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--y);margin-bottom:14px}
.office p{color:var(--tm);font-size:13px;line-height:1.7}

/* ── FAQ categories ── */
.faqcat{margin-bottom:56px}
.faqcat:last-child{margin-bottom:0}
.faqcat-h{display:flex;align-items:center;gap:13px;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--bd)}
.faqcat-h .fci{font-size:21px}
.faqcat-h h3{font-family:'Space Grotesk';font-size:19px;font-weight:700;color:var(--tw)}
.faqcat-h .fcn{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--td)}

/* ── care / spec cards ── */
.cared{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.care{display:flex;gap:18px;background:var(--glass);border:1px solid var(--bd);border-radius:var(--r);padding:24px;transition:.35s}
.care:hover{border-color:var(--bd2);transform:translateY(-4px)}
.care .ci2{font-size:24px;flex-shrink:0;line-height:1.2}
.care h4{font-size:15px;font-weight:600;margin-bottom:7px;color:var(--tw)}
.care p{color:var(--tm);font-size:13px;line-height:1.7}
.care.warn{border-color:rgba(255,46,136,.28);background:rgba(255,46,136,.05)}
.care.warn h4{color:#ff6aa6}

/* ── stat strip ── */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden}
.strip .si{background:var(--bg1);padding:32px 24px;text-align:center;transition:.35s}
.strip .si:hover{background:var(--bg2)}
.strip .si .n{font-family:'Space Grotesk';font-size:clamp(1.9rem,3vw,2.7rem);font-weight:700;color:var(--y);line-height:1;letter-spacing:-1.5px}
.strip .si .l{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--td);margin-top:9px}

/* ── sub-page responsive ── */
@media(max-width:1100px){
  .vals,.tiers,.offices{grid-template-columns:repeat(2,1fr)}
  .split{gap:40px}
  .split-media{height:360px}
}
@media(max-width:900px){
  .phero{padding:56px 0 50px}
  .split{grid-template-columns:1fr;gap:36px}
  .split.rev .split-media{order:0}
  .split-media{height:300px}
  .strip{grid-template-columns:repeat(2,1fr)}
  .ctaband{padding:44px 26px;margin-top:70px}
}
@media(max-width:600px){
  .vals,.tiers,.offices,.cared{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .tl{padding-left:28px}
  .tli::before{left:-28px;width:13px;height:13px}
}

/* quick-jump row: 4 across on desktop, collapsing properly on smaller screens */
.vals4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.vals4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vals4{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════
   RING GALLERY — rotating ring, active shot centred
   ══════════════════════════════════════════════ */
.rw{--rw-size:660px;--rw-radius:300px;--rw-thumb:92px;
    position:relative;width:var(--rw-size);height:var(--rw-size);margin:0 auto;
    touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rw::before{content:'';position:absolute;inset:calc(var(--rw-thumb)/2 + 14px);border-radius:50%;
    border:1px dashed rgba(255,255,255,.07);pointer-events:none}
.rw::after{content:'';position:absolute;left:50%;top:50%;width:calc(var(--rw-radius)*2 + var(--rw-thumb));
    height:calc(var(--rw-radius)*2 + var(--rw-thumb));transform:translate(-50%,-50%);border-radius:50%;
    background:radial-gradient(circle,transparent 58%,rgba(168,85,247,.07) 72%,transparent 80%);
    pointer-events:none;z-index:0}

/* the rotating layer */
.rw-ring{position:absolute;inset:0;will-change:transform}
.rw-cell{position:absolute;left:50%;top:50%;width:var(--rw-thumb);height:var(--rw-thumb);
    margin:calc(var(--rw-thumb)/-2) 0 0 calc(var(--rw-thumb)/-2);
    padding:0;border:none;background:none;cursor:pointer;border-radius:50%;
    transform:rotate(calc(var(--i)*var(--step))) translateY(calc(var(--rw-radius)*-1)) rotate(calc(var(--i)*var(--step)*-1)) rotate(var(--counter,0deg));
    transition:none}
.rw-cell .rw-thumb{width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;
    border:1px solid var(--bd2);background:var(--bg2);
    box-shadow:0 10px 28px rgba(0,0,0,.5);
    transition:border-color .35s,box-shadow .35s,transform .35s}
.rw-cell img{width:100%;height:100%;object-fit:cover;display:block}
.rw-cell .rw-thumb::after{content:'';position:absolute;inset:0;border-radius:50%;
    background:rgba(6,6,10,.55);transition:opacity .35s}
.rw-cell:hover .rw-thumb{border-color:var(--y);box-shadow:0 0 26px rgba(245,196,0,.3)}
.rw-cell.on .rw-thumb{border-color:transparent;box-shadow:0 0 0 2px var(--y),0 0 34px rgba(245,196,0,.5)}
.rw-cell.on .rw-thumb::after{opacity:0}
.rw-cell:focus-visible{outline:none}
.rw-cell:focus-visible .rw-thumb{border-color:var(--h3);box-shadow:0 0 0 3px rgba(34,211,238,.6)}

/* active marker at 12 o'clock */
.rw-mark{position:absolute;left:50%;top:calc(var(--rw-size)/2 - var(--rw-radius) - var(--rw-thumb)/2 - 22px);
    transform:translateX(-50%);z-index:5;pointer-events:none;
    font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--y)}
.rw-mark span{display:block;width:9px;height:9px;margin:6px auto 0;border-radius:50%;
    background:var(--y);box-shadow:0 0 12px var(--y)}

/* centre hero */
.rw-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
    width:min(380px,56%);text-align:center;pointer-events:none}
.rw-stage{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--rl);overflow:hidden;
    border:1px solid var(--bd2);background:var(--bg2);box-shadow:0 30px 80px rgba(0,0,0,.75)}
.rw-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .45s ease,transform .8s ease;transform:scale(1.06)}
.rw-stage img.show{opacity:1;transform:scale(1)}
.rw-stage::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:var(--rl);
    background:linear-gradient(165deg,transparent 55%,rgba(6,6,10,.5))}
.rw-frame{position:absolute;inset:-1px;border-radius:var(--rl);pointer-events:none;z-index:3;padding:1px;
    background:var(--holo);background-size:200%;animation:holoShift 6s linear infinite;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6}
.rw-cap{margin:28px auto 0;max-width:440px;text-align:center;padding:0 16px}
.rw-cap .rw-name{font-family:'Space Grotesk';font-size:16px;font-weight:700;color:var(--tw);line-height:1.3}
.rw-cap .rw-sku{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--y);margin-top:6px}
.rw-cap .rw-count{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--td);margin-top:10px}

/* controls */
.rw-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px}
.rw-btn{width:46px;height:46px;border-radius:50%;background:var(--glass2);border:1px solid var(--bd2);
    color:var(--tw);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(10px);transition:.25s}
.rw-btn:hover{border-color:var(--y);color:var(--y);box-shadow:0 0 22px rgba(245,196,0,.22);transform:translateY(-2px)}
.rw-hint{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--td);
    text-align:center;margin-top:16px}
.rw-open{pointer-events:auto;margin-top:16px;display:inline-flex}

@media(max-width:820px){ .rw{--rw-size:480px;--rw-radius:212px;--rw-thumb:68px} .rw-cap .rw-name{font-size:14px} }
@media(max-width:520px){ .rw{--rw-size:340px;--rw-radius:150px;--rw-thumb:52px}
  .rw-cap .rw-name{font-size:13px} .rw-cap .rw-sku{font-size:9.5px} }
@media(prefers-reduced-motion:reduce){ .rw-frame{animation:none} .rw-stage img{transition:opacity .01s} }

/* phone: keep the centre block inside the ring's inner clearance */
@media(max-width:560px){
  .rw-cap{margin-top:22px}
  .rw-cap .rw-name{font-size:13px;line-height:1.3}
  .rw-cap .rw-sku{font-size:9.5px;margin-top:5px}
}

/* ══════════════════════════════════════════════
   CATEGORISED GALLERY GRID
   ══════════════════════════════════════════════ */
.ggrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:20px}
.g2{background:var(--glass);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;
    display:flex;flex-direction:column;cursor:pointer;
    transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .4s,box-shadow .4s}
.g2:hover{transform:translateY(-6px);border-color:var(--bd2);box-shadow:0 28px 62px rgba(0,0,0,.55)}
.g2-th{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg3)}
.g2-th img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.g2:hover .g2-th img{transform:scale(1.09)}
.g2-th::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(6,6,10,.55),transparent 46%)}
.g2-cat{position:absolute;top:11px;left:11px;z-index:3;
    background:rgba(6,6,10,.62);backdrop-filter:blur(8px);border:1px solid var(--bd2);
    color:var(--y);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1.2px;
    text-transform:uppercase;padding:4px 10px;border-radius:50px}
.g2-bd{padding:15px 17px 17px;position:relative;z-index:2}
.g2-n{font-family:'Space Grotesk';font-size:14px;font-weight:600;color:var(--tw);line-height:1.35}
.g2-s{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--td);margin-top:6px}
.g2:hover .g2-s{color:var(--y)}

/* filter pill counters */
.gfbtn i{font-style:normal;opacity:.5;margin-left:5px;font-size:9.5px}
.gfbtn.on i{opacity:.65}

/* filtering: animate out rather than snapping */
.gi.g2.hide{display:none}
.gempty{display:none;text-align:center;color:var(--tm);font-size:14px;
    padding:52px 20px;border:1px dashed var(--bd2);border-radius:var(--r);background:var(--glass);margin-top:8px}
.gempty.show{display:block}

@media(max-width:600px){
  .ggrid2{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
  .g2-n{font-size:13px}
}
@media(max-width:420px){ .ggrid2{grid-template-columns:1fr} }

/* footer social: inline SVG brand marks, inherit colour so hover still works */
.fsc svg{width:16px;height:16px;display:block;fill:currentColor;transition:transform .25s}
.fsc:hover svg{transform:scale(1.12)}

/* footer paragraph has no bottom margin (global reset), so the social row sat flush against it */
.fsoc{margin-top:22px}

/* Collection card text went through two rounds of full-card gradient-scrim
   tuning (percentage stops, then px stops calibrated to the correct WCAG
   large-text threshold) before landing on the frosted-chip approach defined
   up near .cgrid instead -- see the comment there. A gradient dark enough to
   guarantee text contrast will always leave most of a short card looking
   dull; a small solid panel behind just the text does not have that
   tradeoff. Superseded rules removed rather than left to fight the cascade.
*/

/* ══════════════════════════════════════════════
   DISTRIBUTION NETWORK
   ══════════════════════════════════════════════ */
.dnet-bar{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:30px}
.dnet-search{position:relative;flex:1;min-width:260px;max-width:380px}
.dnet-search input{width:100%;background:var(--glass);border:1px solid var(--bd);border-radius:50px;
  padding:12px 18px 12px 42px;color:var(--tw);font-family:inherit;font-size:13px;transition:.25s;-webkit-appearance:none}
.dnet-search input::placeholder{color:var(--td)}
.dnet-search input:focus{outline:none;border-color:var(--y);box-shadow:0 0 24px rgba(245,196,0,.14)}
.dns-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.5;pointer-events:none}
.dnet-pills{display:flex;gap:8px;flex-wrap:wrap}

.dnet{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.dcard{position:relative;background:var(--glass);border:1px solid var(--bd);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;transition:transform .35s,border-color .35s,box-shadow .35s}
.dcard:hover{transform:translateY(-4px);border-color:var(--bd2);box-shadow:0 24px 52px rgba(0,0,0,.45)}
.dcard.hide{display:none}
.dc-head{display:flex;align-items:center;gap:11px;margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid var(--bd)}
.dc-flag{font-size:22px;line-height:1;flex-shrink:0}
.dc-country{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--y)}
.dc-city{font-size:11.5px;color:var(--td);margin-top:3px}
.dc-name{font-family:'Space Grotesk';font-size:14.5px;font-weight:600;color:var(--tw);line-height:1.35}
.dc-person{font-size:12px;color:var(--tm);margin-top:5px}
.dc-links{display:flex;flex-direction:column;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid var(--bd)}
.dc-link{font-size:12px;color:var(--tm);text-decoration:none;transition:.2s;word-break:break-word;display:block}
.dc-link:hover{color:var(--y)}
.dc-web{color:var(--h3)}
.dc-web:hover{color:var(--y)}

@media(max-width:600px){
  .dnet{grid-template-columns:1fr}
  .dnet-search{max-width:none}
}

/* ══════════════════════════════════════════════
   REVIEWS PAGE — rating summary + embed slot
   ══════════════════════════════════════════════ */
.rsum{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:center;
  background:var(--glass);border:1px solid var(--bd);border-radius:var(--rx);padding:40px 44px}
.rsum-score{text-align:center;border-right:1px solid var(--bd);padding-right:40px}
.rsum-num{font-family:'Space Grotesk';font-size:clamp(3.4rem,6vw,4.6rem);font-weight:700;color:var(--y);
  line-height:1;letter-spacing:-3px;text-shadow:0 0 46px rgba(245,196,0,.28)}
.rsum-stars{color:var(--y);font-size:19px;letter-spacing:4px;margin-top:12px}
.rsum-total{font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--td);margin-top:12px}
.rbars{display:flex;flex-direction:column;gap:11px}
.rbar{display:grid;grid-template-columns:56px 1fr 96px;align-items:center;gap:14px}
.rbar-lbl{font-family:var(--mono);font-size:11px;color:var(--tm);white-space:nowrap}
.rbar-track{height:9px;border-radius:9px;background:rgba(255,255,255,.06);overflow:hidden}
.rbar-fill{height:100%;border-radius:9px;background:linear-gradient(90deg,var(--yd),var(--y2));
  width:0;transition:width 1.4s cubic-bezier(.4,0,.2,1)}
.rsum.visible .rbar-fill{width:var(--w,0%)}
.rbar-val{font-family:var(--mono);font-size:10.5px;color:var(--td);text-align:right;white-space:nowrap}

/* third-party widget slot */
.embed-slot{position:relative;margin-top:16px;min-height:120px}
.embed-note{border:1px dashed var(--bd2);border-radius:var(--r);background:var(--glass);
  padding:38px 30px;text-align:center}
.embed-note .en-ic{font-size:26px;display:block;margin-bottom:14px}
.embed-note h4{font-family:'Space Grotesk';font-size:16px;font-weight:600;color:var(--tw);margin-bottom:10px}
.embed-note p{color:var(--tm);font-size:13px;line-height:1.75;max-width:520px;margin:0 auto}
.embed-note code{font-family:var(--mono);font-size:11.5px;color:var(--y);background:rgba(245,196,0,.08);
  border:1px solid rgba(245,196,0,.2);border-radius:5px;padding:2px 7px;word-break:break-word}
/* once the real widget renders inside the slot, the placeholder gets out of the way */
.embed-slot.loaded .embed-note{display:none}

@media(max-width:820px){
  .rsum{grid-template-columns:1fr;gap:30px;padding:32px 26px}
  .rsum-score{border-right:none;border-bottom:1px solid var(--bd);padding:0 0 26px}
  .rbar{grid-template-columns:50px 1fr 74px;gap:10px}
}

/* 8 nav items need a little less breathing room before the drawer takes over at 900px */
@media(max-width:1080px){
  .nw{gap:16px}
  .nl a{padding:8px 10px;font-size:12px}
  .nr .lnk{padding:9px 14px}
}

/* About-page image badges overhang by -22px; below 1100px that pushed past the
   viewport and produced horizontal page scroll. Tuck them in. */
@media(max-width:1100px){
  .abadge.b1{right:0;bottom:-14px}
  .abadge.b2{left:0;top:-14px}
}

/* ══════════════════════════════════════════════
   GLOBAL SALES TEAM — photo-forward bento showcase
   (rebuilt 2026-08 to replace the photo+textblock cards;
   the old design buried the roster under a big hero banner
   and a lot of body copy. This is photo-first: name/role are
   an overlaid badge, territory + contact collapse into a thin
   footer strip so the grid reads as a wall of faces.)
   ══════════════════════════════════════════════ */
.tgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-auto-rows:120px;gap:14px}
.tcard2{position:relative;grid-row:span 2;border-radius:var(--rl);overflow:hidden;border:1px solid var(--bd);
  background:var(--glass);display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .4s,box-shadow .4s}
.tcard2:hover{transform:translateY(-6px);border-color:var(--bd2);box-shadow:0 26px 56px rgba(0,0,0,.5)}
.tcard2.hide{display:none}
.tcard2.lead{border-color:rgba(245,196,0,.5)}
/* every 6th card runs taller for a bento rhythm rather than a flat grid */
.tcard2:nth-child(6n+1){grid-row:span 3}

.tc-photo{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--bg3)}
/* direct child only -- the nested flag icons are also <img> descendants of
   .tc-photo and must not inherit this 100%-fill sizing */
.tc-photo > img{width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.tcard2:hover .tc-photo > img{transform:scale(1.06)}
/* scrim is always on (not hover-only) so the badge stays legible on pale
   backgrounds and on touch devices that never trigger :hover */
.tc-photo::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(6,6,10,.96) 0%,rgba(6,6,10,.88) 40%,rgba(6,6,10,.4) 68%,rgba(6,6,10,0) 100%)}
/* self-hosted SVG flags, not emoji: Windows/Chrome has no font that merges the
   two regional-indicator letters into a flag glyph (mobile OSes do), so flag
   emoji rendered fine on phones and as boxes/letters on desktop. Real vector
   flags render identically everywhere. */
.tc-flags{position:absolute;top:9px;right:9px;z-index:2;display:flex;gap:4px}
.tc-flag{width:18px;height:13px;border-radius:2px;object-fit:cover;display:block;
  box-shadow:0 1px 4px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.25)}
.tc-badge{position:absolute;left:12px;right:12px;bottom:11px;z-index:2}
.tc-badge .tc-name{font-family:'Space Grotesk';font-size:14.5px;font-weight:700;color:#fff;line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.85)}
.tc-badge .tc-role{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--y);margin-top:4px;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.tcard2.lead .tc-badge .tc-role{color:#fff}

.tc-foot{display:flex;align-items:center;gap:8px;padding:9px 10px;flex-shrink:0;
  background:var(--glass);border-top:1px solid var(--bd)}
.tc-terr{flex:1;min-width:0;font-size:10.5px;color:var(--td);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-icons{display:flex;gap:6px;flex-shrink:0}
.tc-ic{width:26px;height:26px;border-radius:50%;background:var(--glass2);border:1px solid var(--bd2);
  display:flex;align-items:center;justify-content:center;color:var(--tm);flex-shrink:0;transition:.2s}
.tc-ic svg{width:12px;height:12px;fill:currentColor}
.tc-ic:hover{background:var(--y);border-color:var(--y);color:#000;transform:scale(1.12)}
.tc-ic-wa:hover{background:#25d366;border-color:#25d366;color:#fff}

@media(max-width:900px){ .tgrid2{grid-auto-rows:104px} }
@media(max-width:600px){
  .tgrid2{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));grid-auto-rows:92px;gap:10px}
  .tc-badge .tc-name{font-size:12.5px}
  .tc-badge .tc-role{font-size:8px}
  .tc-foot{padding:7px 8px}
  .tc-terr{font-size:9.5px}
  .tc-ic{width:23px;height:23px}
  .tc-ic svg{width:11px;height:11px}
  .tc-flag{width:15px;height:11px}
}
@media(max-width:360px){ .tgrid2{grid-template-columns:repeat(2,1fr)} }