/* ====================================================================
   MANUFAKTUR X — BRIGHT DESIGN SYSTEM  (Builderon-inspired re-skin)
   Shared across the bright mockup pages. Design only.
   Impeccable pass: Archivo/Hanken type, tinted whites, restrained
   shadows, no glassmorphism / gradient-text / purple, small radii.
   ==================================================================== */
:root{
  --white:#ffffff;
  --bg:#faf7f1;              /* warm off-white page (never pure white) */
  --surface:#fffdf9;         /* cards: barely-tinted white */
  --bg-soft:#f2eee5;         /* warm alt band */
  --bg-band:#ece7dc;         /* slightly deeper band */
  --navy:#0d1b2a;             /* dark anchor: top bar, footer, numbers panel */
  --navy-2:#13283f;
  --ink:#1b232c;             /* near-black, warm-tinted (not pure) */
  --muted:#5a6470;           /* body muted (>=4.5:1 on light) */
  --muted-light:rgba(247,244,238,.68);
  --accent:#ec5a1c;          /* bright orange (bridges MFX #ea580c + theme #fd5d14) */
  --accent-2:#ff7a3d;
  --accent-ink:#c2440b;      /* hover */
  --line:#e6e1d6;
  --line-strong:#d6cfbf;
  --shadow-sm:0 1px 2px rgba(27,35,44,.05), 0 2px 6px rgba(27,35,44,.04);
  --shadow:0 2px 4px rgba(27,35,44,.05), 0 10px 24px rgba(27,35,44,.07);
  --shadow-lg:0 4px 10px rgba(27,35,44,.06), 0 18px 44px rgba(27,35,44,.10);
  --r:6px; --r-lg:10px;
  --fh:'Archivo',system-ui,-apple-system,sans-serif;
  --fb:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--fb); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
h1,h2,h3,h4{font-family:var(--fh); color:var(--ink); margin:0; line-height:1.06; letter-spacing:-.01em}
.ital{font-style:italic}
.accent{color:var(--accent)}
::selection{background:var(--accent); color:#fff}

/* ---- eyebrow ---- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 18px}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--accent); display:inline-block}
.eyebrow.center{justify-content:center}
.eyebrow .star{color:var(--accent)}
.h-section{font-weight:800; font-size:clamp(30px,4.4vw,52px); text-transform:uppercase}
/* per-product tier head (heading left, lede right) - matches real homepage */
.tier-head{display:grid; grid-template-columns:1fr auto; gap:24px 48px; align-items:end; margin:0 0 44px}
.tier-head .h-section{font-size:clamp(28px,3.6vw,46px); margin-top:14px}
.tier-head .head-r{max-width:34ch; text-align:right}
@media(max-width:760px){ .tier-head{grid-template-columns:1fr} .tier-head .head-r{text-align:left} }
/* hero scroll cue (real homepage) */
.scroll-cue{position:absolute; left:0; right:0; bottom:18px; text-align:center; font-family:var(--fh); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); z-index:3}
.scroll-cue .chev{display:block; width:9px; height:9px; margin:9px auto 0; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg)}
.b2b-numbers > h3{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-light); margin:0 0 6px; position:relative}
.lede{font-size:clamp(16px,1.3vw,19px); color:var(--muted); line-height:1.6; max-width:60ch}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--fh); font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; padding:15px 28px; border-radius:var(--r); border:1.5px solid var(--accent); background:var(--accent); color:#fff; transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s; box-shadow:0 1px 2px rgba(27,35,44,.12)}
.btn:hover{background:var(--accent-ink); border-color:var(--accent-ink); transform:translateY(-1px); box-shadow:0 4px 12px rgba(27,35,44,.16)}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}
.btn-sm{padding:11px 20px; font-size:13px}
.btn-lg{padding:17px 32px; font-size:15px}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong); box-shadow:none}
.btn-ghost:hover{background:transparent; color:var(--accent); border-color:var(--accent); transform:translateY(-2px)}
.btn-light{background:var(--surface); color:var(--navy); border-color:#fff; box-shadow:var(--shadow)}
.btn-light:hover{background:var(--surface); color:var(--accent-ink); border-color:#fff}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.5); box-shadow:none}
.btn-outline-light:hover{background:rgba(255,255,255,.1); color:#fff; border-color:#fff}
.btn-block{width:100%; justify-content:center}
/* magnetic buttons: JS drives transform, so neutralise the CSS hover lift */
.btn.magnetic:hover{transform:none}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px}

/* ===================== TOP BAR ===================== */
.topbar{background:var(--navy); color:var(--muted-light); font-size:13px}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; min-height:42px; gap:18px; flex-wrap:wrap}
.topbar a{color:var(--muted-light); transition:color .2s}
.topbar a:hover{color:#fff}
.topbar .ti{display:inline-flex; align-items:center; gap:8px}
.topbar svg{width:15px; height:15px; color:var(--accent)}
.topbar .group{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.lang-toggle a{font-family:var(--fh); font-weight:700; letter-spacing:.06em}
.lang-toggle .on{color:#fff}
@media(max-width:820px){ .topbar .left{display:none} }

/* ===================== HEADER ===================== */
.site-header{position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line); transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(13,27,42,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:24px}
.brand{font-family:var(--fh); font-weight:800; font-size:24px; letter-spacing:.02em; text-transform:uppercase; color:var(--navy); white-space:nowrap}
.brand .star{font-style:italic; color:var(--accent)}
.nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0}
.nav-links > li > a, .nav-links > li > .navlink{font-family:var(--fh); font-weight:600; font-size:14.5px; letter-spacing:.02em; color:var(--ink); display:inline-flex; align-items:center; gap:6px; padding:8px 0; position:relative; cursor:pointer; transition:color .2s}
.nav-links > li > a::after,.nav-links > li > .navlink::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent); transition:width .25s}
.nav-links > li > a:hover,.nav-links > li > .navlink:hover{color:var(--accent)}
.nav-links > li > a:hover::after,.nav-links > li > .navlink:hover::after,.nav-links > li.has-drop:hover > .navlink::after{width:100%}
.caret{width:12px;height:12px}
.has-drop{position:relative}
.drop{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); min-width:248px; padding:12px; opacity:0; visibility:hidden; transition:opacity .2s,transform .2s; z-index:60}
/* invisible hover-bridge spanning the 10px gap between the trigger and the
   panel so moving the cursor down into the menu doesn't drop :hover and close
   it. Part of .drop (a child of .has-drop), so it keeps .has-drop:hover true. */
.has-drop > .drop::before{content:""; position:absolute; left:0; right:0; top:-16px; height:16px}
.has-drop:hover .drop{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
/* keep the menu reachable while the cursor is anywhere on the trigger row */
.has-drop:focus-within .drop{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.drop .grp{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:10px 12px 4px}
.drop a{display:block; padding:9px 12px; border-radius:8px; font-size:14.5px; font-weight:500; transition:background .15s,color .15s}
.drop a:hover{background:var(--bg-soft); color:var(--accent)}
.drop a.all{color:var(--accent); font-weight:600}
.nav-right{display:flex; align-items:center; gap:16px}
.cart-btn{position:relative; width:44px; height:44px; border:1px solid var(--line-strong); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:border-color .2s,color .2s}
.cart-btn:hover{border-color:var(--accent); color:var(--accent)}
.cart-btn svg{width:20px;height:20px}
.cart-badge{position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; font-family:var(--fh); display:flex; align-items:center; justify-content:center}
.menu-toggle{display:none; width:44px;height:44px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); cursor:pointer; align-items:center; justify-content:center}
.menu-toggle svg{width:22px;height:22px}
@media(max-width:1080px){ .nav-links{display:none} .menu-toggle{display:flex} .hide-md{display:none} }

/* mobile menu */
.mobile-menu{position:fixed; inset:0 0 0 auto; width:min(360px,86vw); background:var(--surface); z-index:200; transform:translateX(100%); transition:transform .3s; box-shadow:var(--shadow-lg); padding:24px; overflow:auto; display:flex; flex-direction:column; gap:6px}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{font-family:var(--fh); font-weight:600; font-size:17px; padding:13px 6px; border-bottom:1px solid var(--line)}
.mobile-menu a:hover{color:var(--accent)}
.mm-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.mm-close{width:40px;height:40px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center}
.scrim{position:fixed; inset:0; background:rgba(13,27,42,.5); z-index:150; opacity:0; visibility:hidden; transition:opacity .3s}
.scrim.show{opacity:1; visibility:visible}

/* ===================== HERO ===================== */
.hero{position:relative; overflow:hidden; background:radial-gradient(120% 90% at 88% 8%, rgba(239,90,22,.10), transparent 55%),linear-gradient(180deg,#fbfaf7 0%, #f3f0e9 100%); border-bottom:1px solid var(--line)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 70%)}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-top:72px; padding-bottom:72px}
.hero h1{font-size:clamp(40px,6vw,76px); font-weight:900; text-transform:uppercase; letter-spacing:-.02em}
.hero h1 .l1,.hero h1 .accent{display:block}
.hero .lede{margin:22px 0 32px; font-size:clamp(16px,1.4vw,20px); color:var(--muted)}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-visual{position:relative}
.hero-visual .frame{position:relative; background:linear-gradient(160deg,#ffffff,#f4f1ea); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; aspect-ratio:4/4.4}
.hero-visual model-viewer{width:100%; height:100%; background:transparent; --poster-color:transparent}
.hero-visual .frame-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
@media(max-width:980px){ .hero .wrap{grid-template-columns:1fr; gap:36px; padding-top:48px; padding-bottom:48px} .hero-visual{order:-1; max-width:460px; margin:0 auto} }

/* ===================== USP STRIP ===================== */
.usp{position:relative; z-index:5; margin-top:44px}
.usp .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.usp .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--shadow); display:flex; gap:18px; align-items:flex-start; transition:transform .2s,box-shadow .2s,border-color .2s}
.usp .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#efe7d8}
.usp .ico{flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:rgba(239,90,22,.10); color:var(--accent); display:flex; align-items:center; justify-content:center}
.usp .ico svg{width:26px; height:26px}
.usp h3{font-family:var(--fh); font-weight:800; font-size:18px; text-transform:uppercase; letter-spacing:.01em; margin-bottom:6px}
.usp p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.5}
@media(max-width:860px){ .usp{margin-top:28px} .usp .grid{grid-template-columns:1fr} }

/* ===================== SECTION SHELL ===================== */
section.block{padding:104px 0}
.sec-head{max-width:760px; margin:0 auto 60px; text-align:center}
.sec-head .lede{margin:18px auto 0}

/* ===================== PRODUCTS (feature rows) ===================== */
.products{background:var(--bg)}
.pfeature{display:grid; grid-template-columns:1.05fr 1fr; gap:0; align-items:stretch; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); margin-bottom:40px; transition:box-shadow .25s,border-color .25s,transform .25s}
.pfeature:hover{box-shadow:var(--shadow-lg); border-color:#efe2cf; transform:translateY(-3px)}
.pfeature.rev{grid-template-columns:1fr 1.05fr}
.pfeature.rev .pf-media{order:2; border-left:1px solid var(--line); border-right:0}
.pf-media{position:relative; min-height:460px; background:radial-gradient(circle at 50% 45%,#ffffff,#f3f0e9 78%); border-right:1px solid var(--line)}
.pf-media model-viewer{width:100%; height:100%; --poster-color:transparent}
.pf-media .pf-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.pf-cat-badge{position:absolute; top:20px; left:20px; z-index:3; background:var(--navy); color:#fff; font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border-radius:40px}
.pf-seal{position:absolute; top:20px; right:20px; z-index:3; display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px; border-radius:40px; box-shadow:0 4px 14px rgba(13,27,42,.16)}
.pf-seal svg{width:13px; height:13px; flex:none; stroke:currentColor}
[data-mfx-market-only]{display:none}
@media(max-width:980px){ .pf-seal{top:16px; right:16px; font-size:10px; padding:7px 12px} }
.pf-meta{padding:48px 52px; display:flex; flex-direction:column; justify-content:center; gap:18px}
.pf-meta .cat{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.pf-name{font-family:var(--fh); font-weight:900; font-size:clamp(30px,3.4vw,46px); text-transform:uppercase; line-height:1; color:var(--navy)}
.pf-desc{color:var(--muted); font-size:15.5px; line-height:1.6; max-width:48ch; margin:0}
.pf-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:8px; padding-top:24px; border-top:1px solid var(--line)}
.pf-price{font-family:var(--fh)}
.pf-price .v{font-weight:900; font-size:30px; color:var(--navy)}
.pf-price .v .pre{font-size:15px; font-weight:700; color:var(--muted); margin-right:4px}
.pf-price .tax{display:block; font-family:var(--fb); font-size:12px; color:var(--muted); font-weight:400; margin-top:2px}
@media(max-width:980px){ .pfeature,.pfeature.rev{grid-template-columns:1fr} .pfeature.rev .pf-media{order:0; border-left:0; border-bottom:1px solid var(--line)} .pf-media{min-height:330px; border-right:0; border-bottom:1px solid var(--line)} .pf-meta{padding:36px 30px} }

/* ===================== STAT / PROCESS / FOUNDER / TESTI / B2B / CTA ===================== */
.process{background:var(--bg)}
.proc-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:start}
.proc-head{position:sticky; top:120px}
.proc-head .h-section{font-size:clamp(28px,3.4vw,42px)}
.proc-head .lede{margin-top:20px}
.steps{position:relative; display:flex; flex-direction:column}
.proc-line{position:absolute; left:30px; top:6px; height:calc(100% - 12px); width:24px; overflow:visible; pointer-events:none; z-index:0}
.proc-line path{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; opacity:.45}
.step{position:relative; z-index:1; display:grid; grid-template-columns:92px 1fr; gap:26px; padding:30px 0; border-top:1px solid var(--line); align-items:start}
.step:first-child{border-top:0; padding-top:0}
.step .num{font-family:var(--fh); font-weight:900; font-size:clamp(40px,4.6vw,62px); line-height:1; color:var(--accent); opacity:.95}
.step h3{font-family:var(--fh); font-weight:800; font-size:22px; text-transform:uppercase; margin-bottom:10px; color:var(--navy)}
.step p{margin:0; color:var(--muted); font-size:15px; line-height:1.6}
@media(max-width:900px){ .proc-grid{grid-template-columns:1fr; gap:40px} .proc-head{position:static} .proc-line{display:none} }

.founder{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.founder .row{display:grid; grid-template-columns:230px 1fr; gap:56px; align-items:center; max-width:1000px; margin:0 auto}
.founder .portrait{width:230px; height:230px; border-radius:50%; overflow:hidden; border:4px solid #fff; box-shadow:var(--shadow); background:#e9e4da}
.founder .portrait img{width:100%; height:100%; object-fit:cover}
.founder .q{font-family:var(--fh); font-weight:700; font-size:clamp(22px,2.5vw,32px); line-height:1.32; color:var(--navy); margin:0 0 20px; letter-spacing:-.01em}
.founder .q .accent{font-style:italic}
.founder .attr{font-family:var(--fh); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.founder .attr .who{color:var(--accent)}
@media(max-width:760px){ .founder .row{grid-template-columns:1fr; text-align:center; gap:28px} .founder .portrait{margin:0 auto; width:170px; height:170px} }

.testi{background:var(--bg)}
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.t-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:18px; position:relative; transition:transform .2s,box-shadow .2s}
.t-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.t-card .stars{color:var(--accent); letter-spacing:.22em; font-size:16px}
.t-card p{margin:0; font-size:16px; line-height:1.6; color:var(--ink); font-weight:400}
.t-card .who-row{margin-top:auto; font-family:var(--fh); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.t-card .who-row .who{color:var(--navy); font-weight:700}
.t-card .mark{position:absolute; top:22px; right:26px; font-family:var(--fh); font-weight:900; font-size:60px; line-height:1; color:rgba(239,90,22,.12)}
@media(max-width:900px){ .t-grid{grid-template-columns:1fr} }

.b2b{background:var(--bg-soft); border-top:1px solid var(--line)}
.b2b-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.b2b .lede{margin:18px 0 26px}
.b2b-list{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:14px}
.b2b-list li{display:flex; gap:13px; align-items:center; font-size:15.5px; color:var(--ink); font-weight:500}
.b2b-list .check{flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center}
.b2b-list .check svg{width:13px;height:13px}
.b2b-numbers{background:linear-gradient(160deg,var(--navy),#0a1622); border-radius:var(--r-lg); padding:42px 38px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:26px; position:relative; overflow:hidden}
.b2b-numbers::before{content:""; position:absolute; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 90% 0,rgba(0,0,0,.7),transparent 60%)}
.b2b-numbers .bn-item{position:relative; display:flex; flex-direction:column; gap:5px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.12)}
.b2b-numbers .bn-item:last-child{border-bottom:0; padding-bottom:0}
.b2b-numbers .bn-n{font-family:var(--fh); font-weight:900; font-size:clamp(40px,4.5vw,52px); line-height:1; color:var(--accent); letter-spacing:-.02em}
.b2b-numbers .bn-l{font-size:14.5px; color:var(--muted-light)}
@media(max-width:900px){ .b2b-grid{grid-template-columns:1fr; gap:34px} }

.cta-band{position:relative; background:linear-gradient(135deg,var(--accent),#d8480c); color:#fff; overflow:hidden}
.cta-band::before{content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(circle at 15% 100%,rgba(0,0,0,.8),transparent 55%)}
.cta-band .wrap{position:relative; padding:84px 28px; text-align:center}
.cta-band .eyebrow{color:#fff}
.cta-band .eyebrow::before{background:#fff}
.cta-band h2{color:#fff; font-weight:900; font-size:clamp(32px,4.6vw,56px); text-transform:uppercase}
.cta-band h2 .accent{color:#0d1b2a}
.cta-band .lede{color:rgba(255,255,255,.92); margin:18px auto 32px; max-width:54ch}
.cta-band .row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}

/* ===================== FOOTER ===================== */
footer{background:var(--navy); color:var(--muted-light)}
.foot-main{padding:74px 0 50px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px}
.foot-brand .brand{color:#fff; font-size:26px; margin-bottom:18px}
.foot-brand p{font-size:14.5px; line-height:1.6; max-width:34ch; margin:0 0 20px}
.foot-contact{display:flex; flex-direction:column; gap:10px; font-size:14px; margin-bottom:20px}
.foot-contact a,.foot-contact span{display:flex; gap:10px; align-items:flex-start}
.foot-contact svg{width:16px;height:16px;color:var(--accent); flex:0 0 auto; margin-top:3px}
.foot-contact a:hover{color:#fff}
.socials{display:flex; gap:12px}
.socials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s,border-color .2s}
.socials a:hover{background:var(--accent); border-color:var(--accent)}
.socials svg{width:18px;height:18px}
.foot-col h4{font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:20px; position:relative; padding-bottom:12px}
.foot-col h4::after{content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--accent)}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.foot-col a{font-size:14.5px; transition:color .2s,padding-left .2s}
.foot-col a:hover{color:#fff; padding-left:5px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12); padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px}
.country-switch{display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.18); border-radius:40px; padding:9px 16px; font-size:13px; color:#fff; cursor:pointer; transition:border-color .2s}
.country-switch:hover{border-color:var(--accent)}

/* Footer country/language switcher - country-switcher.js populates .fc-list.
   The interactive markup (.fc-trigger + .fc-list) lives inside
   #footerCountrySwitcher, so the wrapper is just a positioning context; the
   .fc-trigger carries the pill look. */
#footerCountrySwitcher{position:relative; display:inline-block; border:0; border-radius:0; padding:0; background:none; cursor:default}
#footerCountrySwitcher:hover{border-color:transparent}
#footerCountrySwitcher .fc-trigger{display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.18); border-radius:40px; padding:9px 16px; font-size:13px; font-family:var(--fb); font-weight:500; line-height:1; color:#fff; background:transparent; cursor:pointer; transition:border-color .2s ease}
#footerCountrySwitcher .fc-trigger:hover{border-color:var(--accent)}
#footerCountrySwitcher .fc-flag{font-size:16px; line-height:1}
#footerCountrySwitcher .fc-caret{width:14px; height:14px; color:currentColor; transition:transform .2s ease}
#footerCountrySwitcher.is-open .fc-caret{transform:rotate(180deg)}
#footerCountrySwitcher .fc-list{position:absolute; bottom:calc(100% + 8px); left:0; z-index:60; width:256px; margin:0; padding:0; list-style:none; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:14px; box-shadow:0 18px 44px rgba(13,27,42,.28); overflow:hidden}
#footerCountrySwitcher .fc-list[hidden]{display:none}
#footerCountrySwitcher .fc-search{padding:8px; border-bottom:1px solid var(--line); background:var(--surface)}
#footerCountrySwitcher .fc-search input{width:100%; box-sizing:border-box; font-family:var(--fb); font-size:13px; padding:8px 12px; background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; color:var(--ink); outline:none; transition:border-color .16s ease}
#footerCountrySwitcher .fc-search input:focus{border-color:var(--accent)}
#footerCountrySwitcher .fc-search input::placeholder{color:var(--muted)}
#footerCountrySwitcher .fc-options{max-height:224px; overflow-y:auto; padding:4px 0; margin:0; list-style:none}
#footerCountrySwitcher .fc-item{margin:0}
#footerCountrySwitcher .fc-item a{display:flex; align-items:center; gap:10px; padding:9px 12px; color:var(--ink); text-decoration:none; font-family:var(--fb); font-size:14px; font-weight:500; transition:background .16s ease, color .16s ease}
#footerCountrySwitcher .fc-item a:hover{background:var(--bg-soft)}
#footerCountrySwitcher .fc-item.is-active a{color:var(--accent); font-weight:600; background:rgba(236,90,28,.08)}
#footerCountrySwitcher .fc-item .fc-flag{font-size:16px; line-height:1; flex-shrink:0; width:20px; text-align:center}
#footerCountrySwitcher .fc-item .fc-name{flex:1}
#footerCountrySwitcher .fc-item .fc-check{width:16px; height:16px; color:var(--accent); display:none}
#footerCountrySwitcher .fc-item.is-active .fc-check{display:block}
#footerCountrySwitcher .fc-empty{padding:9px 12px; font-family:var(--fb); font-size:13px; color:var(--muted)}
.pay{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pay .b{font-family:var(--fh); font-weight:700; font-size:10.5px; letter-spacing:.04em; color:var(--muted-light); border:1px solid rgba(255,255,255,.18); border-radius:5px; padding:5px 9px; text-transform:uppercase}
@media(max-width:980px){ .foot-main{grid-template-columns:1fr 1fr; gap:40px} }
@media(max-width:560px){ .foot-main{grid-template-columns:1fr} .foot-bottom{flex-direction:column; align-items:flex-start} }

/* mockup ribbon */
.mockup-flag{position:fixed; left:0; bottom:0; z-index:300; background:var(--navy); color:#fff; font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:8px 14px; border-top-right-radius:8px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.15); border-left:0; border-bottom:0}
.mockup-flag b{color:var(--accent)}

/* ====================================================================
   CONFIGURATOR PAGE
   ==================================================================== */
.crumbs{font-family:var(--fh); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:20px 0 0}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{margin:0 8px; color:var(--line-strong)}
.crumbs .cur{color:var(--accent)}

.cfg{padding:24px 0 96px}
.cfg-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.95fr); gap:40px; align-items:start}
/* viewer (sticky on desktop) */
.cfg-viewer{position:sticky; top:96px}
.cfg-stage{position:relative; background:radial-gradient(circle at 50% 42%,#ffffff,#eee9df 80%); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; aspect-ratio:1/1}
.cfg-stage model-viewer{width:100%; height:100%; --poster-color:transparent}
.cfg-badge{position:absolute; top:18px; left:18px; z-index:3; background:var(--navy); color:#fff; font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border-radius:40px}
.cfg-tools{position:absolute; top:18px; right:18px; z-index:3; display:flex; gap:8px}
.cfg-tools button{width:40px; height:40px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:color .2s,border-color .2s}
.cfg-tools button:hover{color:var(--accent); border-color:var(--accent)}
.cfg-tools svg{width:18px;height:18px}
.cfg-hint{position:absolute; bottom:16px; left:0; right:0; text-align:center; font-family:var(--fh); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.cfg-thumbs{display:flex; gap:10px; margin-top:14px}
.cfg-thumb{flex:1; aspect-ratio:4/3; border:1px solid var(--line); border-radius:var(--r); background:radial-gradient(circle at 50% 45%,#fff,#eee9df); cursor:pointer; transition:border-color .2s}
.cfg-thumb.active,.cfg-thumb:hover{border-color:var(--accent)}

/* panel */
.cfg-panel{display:flex; flex-direction:column; gap:14px}
.cfg-title{font-family:var(--fh); font-weight:900; font-size:clamp(28px,3vw,40px); text-transform:uppercase; line-height:1; color:var(--navy)}
.cfg-sub{color:var(--muted); font-size:15px; margin:8px 0 6px}
.cfg-rating{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); font-family:var(--fh); font-weight:600}
.cfg-rating .stars{color:var(--accent); letter-spacing:.14em}

/* accordion group */
.cfg-group{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm)}
.cfg-group + .cfg-group{margin-top:0}
.cfg-group-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; cursor:pointer; background:none; border:0; font-family:var(--fh); font-weight:800; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); text-align:left}
.cfg-group-head .gi{display:flex; align-items:center; gap:12px}
.cfg-group-head .gi .gnum{width:26px; height:26px; border-radius:50%; background:rgba(239,90,22,.12); color:var(--accent); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center}
.cfg-group-head .chev{width:18px; height:18px; color:var(--muted); transition:transform .25s}
.cfg-group.open .cfg-group-head .chev{transform:rotate(180deg)}
.cfg-group-body{padding:0 22px; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease}
.cfg-group.open .cfg-group-body{padding:4px 22px 24px; max-height:1200px}
.cfg-row{padding:14px 0; border-top:1px solid var(--line)}
.cfg-row:first-child{border-top:0}
.cfg-label{display:flex; align-items:center; justify-content:space-between; font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--ink); margin-bottom:12px}
.cfg-label .val{color:var(--accent); font-weight:700}

/* segmented / button group */
.seg{display:flex; gap:8px; flex-wrap:wrap}
.seg button{flex:1; min-width:90px; padding:11px 12px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); font-family:var(--fh); font-weight:700; font-size:13px; color:var(--ink); cursor:pointer; transition:all .18s}
.seg button:hover{border-color:var(--accent); color:var(--accent)}
.seg button.on{background:var(--navy); border-color:var(--navy); color:#fff}

/* slider */
.slider{display:flex; align-items:center; gap:14px}
.slider input[type=range]{flex:1; -webkit-appearance:none; appearance:none; height:5px; border-radius:5px; background:linear-gradient(90deg,var(--accent) 0 55%,var(--line-strong) 55% 100%); outline:none}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); box-shadow:var(--shadow-sm); cursor:pointer}
.slider input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); cursor:pointer}
.slider .num{font-family:var(--fh); font-weight:800; font-size:15px; color:var(--navy); min-width:74px; text-align:right}
.slider .num small{color:var(--muted); font-weight:600}

/* swatches */
.swatches{display:flex; gap:10px; flex-wrap:wrap}
.swatch{width:44px; height:44px; border-radius:50%; border:2px solid var(--line); cursor:pointer; position:relative; transition:transform .15s,border-color .15s}
.swatch:hover{transform:scale(1.06)}
.swatch.on{border-color:var(--accent)}
.swatch.on::after{content:""; position:absolute; inset:-6px; border:1px solid var(--accent); border-radius:50%}
.swatch-row{display:flex; gap:12px; flex-wrap:wrap}
.swatch-tile{width:72px; cursor:pointer}
.swatch-tile .chip{display:block; width:72px; height:54px; border-radius:var(--r); border:2px solid var(--line); background-color:#eee9df; background-size:cover; background-position:center; transition:border-color .15s,transform .15s}
.swatch-tile:hover .chip{transform:translateY(-2px)}
.swatch-tile.on .chip{border-color:var(--accent)}
.swatch-tile .nm{display:block; text-align:center; font-family:var(--fh); font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.swatch-tile.on .nm{color:var(--accent)}
.swatch-tile .chip.hdl{display:flex; align-items:center; justify-content:center; background-color:var(--bg-soft)}
.swatch-tile .chip.hdl svg{width:40px; height:46px}

/* toggle row */
.cfg-toggle{display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line)}
.cfg-toggle .lab{font-family:var(--fh); font-weight:700; font-size:13px; color:var(--ink)}
.cfg-toggle .lab small{display:block; font-family:var(--fb); font-weight:400; font-size:12px; color:var(--muted); margin-top:2px}
.switch{width:46px; height:26px; border-radius:20px; background:var(--line-strong); position:relative; cursor:pointer; flex:0 0 auto; transition:background .2s}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:left .2s}
.switch.on{background:var(--accent)}
.switch.on::after{left:23px}

/* price / buy box (sticky bottom of panel) */
.cfg-buy{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); padding:24px 24px 22px}
.cfg-price-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.cfg-price{font-family:var(--fh); font-weight:900; font-size:34px; color:var(--navy); line-height:1}
.cfg-price .pre{font-size:15px; font-weight:700; color:var(--muted); margin-right:4px}
.cfg-tax{font-size:12px; color:var(--muted)}
.cfg-deliv{display:flex; align-items:center; gap:8px; margin:12px 0 16px; font-size:13px; color:var(--muted)}
.cfg-deliv svg{width:16px; height:16px; color:var(--accent)}
.cfg-buy .links{display:flex; flex-wrap:wrap; gap:14px 20px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.cfg-buy .links a{display:inline-flex; align-items:center; gap:7px; font-family:var(--fh); font-weight:600; font-size:12.5px; color:var(--muted); transition:color .2s}
.cfg-buy .links a:hover{color:var(--accent)}
.cfg-buy .links svg{width:15px; height:15px; color:var(--accent)}

@media(max-width:980px){ .cfg-grid{grid-template-columns:1fr; gap:24px} .cfg-viewer{position:static} .cfg-buy{position:static} }

/* product info sections below configurator */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s}
.feat:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.feat .ico{width:52px; height:52px; border-radius:50%; background:rgba(239,90,22,.10); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.feat .ico svg{width:24px; height:24px}
.feat h3{font-family:var(--fh); font-weight:800; font-size:18px; text-transform:uppercase; margin-bottom:8px; color:var(--navy)}
.feat p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55}
@media(max-width:860px){ .feat-grid{grid-template-columns:1fr} }

.spec-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.spec-table th,.spec-table td{text-align:left; padding:15px 20px; border-bottom:1px solid var(--line); font-size:14.5px}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{font-family:var(--fh); font-weight:700; color:var(--navy); width:38%; background:var(--bg-soft)}
.spec-table td{color:var(--muted)}

/* FAQ accordion */
.faq{max-width:880px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; background:none; border:0; cursor:pointer; font-family:var(--fh); font-weight:700; font-size:17px; color:var(--navy); text-align:left}
.faq-q .pm{width:22px; height:22px; flex:0 0 auto; color:var(--accent); transition:transform .25s}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq-a .inner{padding:0 4px 22px; color:var(--muted); font-size:15px; line-height:1.65; max-width:70ch}
.faq-item.open .faq-a{max-height:400px}

/* ====================================================================
   PRODUCT INFO / GUIDE  (full content below the configurator)
   ==================================================================== */
.info-cards{column-count:2; column-gap:24px}
.info-cards > .info-card{break-inside:avoid; margin-bottom:24px}
@media(max-width:900px){ .info-cards{grid-template-columns:1fr} }
.info-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 34px; box-shadow:var(--shadow-sm)}
.info-card h3{font-family:var(--fh); font-weight:800; font-size:21px; text-transform:uppercase; color:var(--navy); margin-bottom:14px}
.info-card > p{color:var(--muted); font-size:15px; line-height:1.65; margin:0 0 16px}
.info-card h4{font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.02em; color:var(--navy); margin:22px 0 10px}

.xlist{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px}
.xlist li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink); line-height:1.5}
.xlist li svg{flex:0 0 auto; width:18px; height:18px; color:var(--accent); margin-top:2px}

.meta-rows{display:flex; flex-direction:column; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.meta-rows .mr{font-size:14px; color:var(--muted); line-height:1.55}
.meta-rows .mr b{font-family:var(--fh); color:var(--navy); font-weight:700; display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px}

.steps-ol{counter-reset:s; display:flex; flex-direction:column; gap:22px; margin:0}
.steps-ol .so{display:grid; grid-template-columns:40px 1fr; gap:16px}
.steps-ol .so .n{counter-increment:s; width:40px; height:40px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--fh); font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center}
.steps-ol .so .n::before{content:counter(s)}
.steps-ol .so h4{font-family:var(--fh); font-weight:800; font-size:15px; color:var(--navy); margin:8px 0 8px; text-transform:uppercase}
.steps-ol .so ul{margin:0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.6; display:flex; flex-direction:column; gap:5px}

.callout{background:rgba(236,90,28,.07); border:1px solid rgba(236,90,28,.22); border-radius:var(--r); padding:16px 18px; font-size:14px; line-height:1.6; color:var(--ink); margin:18px 0}
.callout b{font-family:var(--fh); color:var(--accent-ink)}
.inline-links{display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:18px}
.inline-links a{display:inline-flex; align-items:center; gap:7px; font-family:var(--fh); font-weight:700; font-size:13px; color:var(--accent); transition:color .2s}
.inline-links a:hover{color:var(--accent-ink)}
.inline-links svg{width:15px; height:15px}

/* guide */
.guide-toc{position:sticky; top:78px; z-index:20; background:rgba(250,247,241,.92); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px; display:flex; gap:8px; flex-wrap:wrap; box-shadow:var(--shadow-sm); margin-bottom:48px}
.guide-toc a{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:8px 13px; border-radius:40px; transition:background .2s,color .2s}
.guide-toc a:hover{background:var(--bg-soft); color:var(--accent)}
.guide-sub{scroll-margin-top:96px; padding:54px 0; border-top:1px solid var(--line)}
.guide-sub:first-of-type{border-top:0}
.guide-sub > .h-section{font-size:clamp(26px,3vw,40px); margin-bottom:14px}
.guide-sub > .lede{margin-bottom:28px}

.glass-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:900px){ .glass-cards{grid-template-columns:1fr} }
.glass-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.glass-card .chip{height:120px; background-color:#eee9df; background-size:cover; background-position:center; border-bottom:1px solid var(--line)}
.glass-card .gc-body{padding:22px 22px 24px}
.glass-card h3{font-family:var(--fh); font-weight:800; font-size:18px; text-transform:uppercase; color:var(--navy); margin-bottom:8px}
.glass-card p{margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.55}
.glass-card .uses{font-size:12px; color:var(--muted)}
.glass-card .uses b{font-family:var(--fh); display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:5px}

.safety-cards{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media(max-width:900px){ .safety-cards{grid-template-columns:1fr} }
.safety-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-sm)}
.safety-card .tagx{display:inline-block; font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--navy); border-radius:40px; padding:6px 13px; margin-bottom:14px}
.safety-card h3{font-family:var(--fh); font-weight:800; font-size:18px; color:var(--navy); margin-bottom:10px}
.safety-card p{color:var(--muted); font-size:14.5px; line-height:1.6; margin:0 0 14px}
.safety-card .lbl{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:14px 0 6px}
.safety-card ul{margin:0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.55}

.cmp-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.cmp-table th,.cmp-table td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top}
.cmp-table thead th{font-family:var(--fh); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:13px; color:#fff; background:var(--navy)}
.cmp-table tbody th{font-family:var(--fh); font-weight:700; color:var(--navy); width:24%; background:var(--bg-soft)}
.cmp-table td{color:var(--muted)}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:0}

.ral-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:760px){ .ral-grid{grid-template-columns:repeat(2,1fr)} }
.ral-tile{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; box-shadow:var(--shadow-sm)}
.ral-tile .sw{width:38px; height:38px; border-radius:6px; border:1px solid rgba(0,0,0,.12); flex:0 0 auto}
.ral-tile .rt{font-family:var(--fh); font-weight:700; font-size:12px; color:var(--navy); line-height:1.3}
.ral-tile .rt small{display:block; font-family:var(--fb); font-weight:400; color:var(--muted)}

.photo-rail{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; -webkit-overflow-scrolling:touch}
.photo-rail figure{flex:0 0 clamp(280px,40%,420px); scroll-snap-align:start; margin:0}
.photo-rail .ph{aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); background:#e9e4da}
.photo-rail .ph img{width:100%; height:100%; object-fit:cover}
.photo-rail figcaption{margin-top:12px; font-size:13px; color:var(--muted); line-height:1.5; max-width:38ch}

.media-video{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--navy); margin-top:8px}
.media-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
@media(max-width:900px){ .two-col{grid-template-columns:1fr; gap:28px} }
.prose p{color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 14px}

/* ====================================================================
   INNER PAGES (catalog, projects, partners, about, contact, sketch, faq)
   ==================================================================== */
.page-hero{position:relative; overflow:hidden; background:radial-gradient(120% 90% at 88% 8%, rgba(239,90,22,.08), transparent 55%),linear-gradient(180deg,#fbfaf7,#f3f0e9); border-bottom:1px solid var(--line); padding:60px 0 54px}
.page-hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(180deg,rgba(0,0,0,.35),transparent 75%)}
.page-hero .wrap{position:relative; z-index:2}
.page-hero .meta{font-family:var(--fh); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.page-hero h1{font-size:clamp(34px,5vw,58px); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; margin-bottom:18px}
.page-hero .foot{margin-top:18px; font-size:12px; color:var(--muted)}

.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media(max-width:980px){ .cat-grid{grid-template-columns:1fr} }
.cat-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s,border-color .2s; color:inherit}
.cat-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:#efe2cf}
.cat-card .media{position:relative; aspect-ratio:4/3.4; background:radial-gradient(circle at 50% 45%,#fff,#eee9df 80%); border-bottom:1px solid var(--line)}
.cat-card .media model-viewer{width:100%; height:100%; --poster-color:transparent}
.cat-card .tag{position:absolute; top:14px; left:14px; z-index:2; background:var(--accent); color:#fff; font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:40px}
.cat-card .body{padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.cat-card .cat{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.cat-card h3{font-family:var(--fh); font-weight:900; font-size:24px; text-transform:uppercase; color:var(--navy)}
.cat-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.55; flex:1}
.cat-card .row{display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:16px; border-top:1px solid var(--line)}
.cat-card .price{font-family:var(--fh); font-weight:900; font-size:22px; color:var(--navy)}
.cat-card .price .pre{font-size:12px; font-weight:700; color:var(--muted)}
.cat-card .go{font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); display:inline-flex; gap:6px; align-items:center}
.cat-card:hover .go .arrow{transform:translateX(3px)} .cat-card .go .arrow{transition:transform .2s}

/* project gallery */
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:980px){ .proj-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .proj-grid{grid-template-columns:1fr} }
.proj-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s}
.proj-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.proj-card .pi{aspect-ratio:4/3; overflow:hidden; background:#e9e4da}
.proj-card .pi img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.proj-card:hover .pi img{transform:scale(1.04)}
.proj-card .pb{padding:20px 22px 22px}
.proj-card .pc{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:7px}
.proj-card h3{font-family:var(--fh); font-weight:800; font-size:18px; color:var(--navy); margin-bottom:8px}
.proj-card p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.55}

/* forms */
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:34px}
.form-card > h2{font-family:var(--fh); font-weight:800; text-transform:uppercase; font-size:22px; color:var(--navy); margin-bottom:22px}
.field{margin-bottom:18px}
.field label{display:block; font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); margin-bottom:8px}
.field input,.field textarea{width:100%; font-family:var(--fb); font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--line-strong); border-radius:var(--r); padding:13px 15px; transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.12)}
.field textarea{min-height:130px; resize:vertical}
.field-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:560px){ .field-2{grid-template-columns:1fr} }
.file-drop{border:2px dashed var(--line-strong); border-radius:var(--r-lg); padding:34px; text-align:center; cursor:pointer; transition:border-color .2s,background .2s}
.file-drop:hover{border-color:var(--accent); background:rgba(236,90,28,.04)}
.file-drop .fi{width:46px;height:46px;border-radius:50%;background:rgba(236,90,28,.1);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.file-drop .fi svg{width:22px;height:22px}
.file-drop .ft{font-family:var(--fh); font-weight:700; color:var(--navy)}
.file-drop .fh{font-size:12px; color:var(--muted); margin-top:6px}
.form-note{font-size:12px; color:var(--muted); margin-top:14px}
.form-2col{display:grid; grid-template-columns:1.3fr .9fr; gap:36px; align-items:start}
@media(max-width:900px){ .form-2col{grid-template-columns:1fr} }

/* contact info */
.info-stack{display:flex; flex-direction:column; gap:14px}
.info-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-sm)}
.info-card .lbl{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:5px}
.info-card .val{font-size:15px; color:var(--ink); line-height:1.5}
.info-card .val a:hover{color:var(--accent)}
.owner-card{display:flex; align-items:center; gap:14px}
.owner-card .av{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--fh);font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}

/* partner cards */
.partner-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media(max-width:760px){ .partner-grid{grid-template-columns:1fr} }
.partner-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s}
.partner-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.partner-card .ph{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.partner-card .pbadge{width:48px;height:48px;border-radius:var(--r);background:linear-gradient(150deg,var(--navy),#1c3450);color:#fff;font-family:var(--fh);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.partner-card h3{font-family:var(--fh); font-weight:800; font-size:18px; color:var(--navy)}
.partner-card .city{font-family:var(--fh); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-top:3px}
.partner-card p{margin:0 0 14px; color:var(--muted); font-size:13.5px; line-height:1.55}
.partner-card a.web{font-family:var(--fh); font-weight:700; font-size:13px; color:var(--accent)}

/* about advantages + mvv + tagline */
.adv-grid,.mvv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:860px){ .adv-grid,.mvv-grid{grid-template-columns:1fr} }
.adv-card,.mvv-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s}
.adv-card:hover,.mvv-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.adv-card .num{font-family:var(--fh); font-weight:900; font-size:34px; color:var(--accent); line-height:1; margin-bottom:12px}
.adv-card h3,.mvv-card h3{font-family:var(--fh); font-weight:800; font-size:19px; text-transform:uppercase; color:var(--navy); margin-bottom:8px}
.adv-card p,.mvv-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.6}
.mvv-card .lbl{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.tagline-strip{background:linear-gradient(180deg,var(--navy),#0a1622); color:#fff; text-align:center; padding:70px 28px}
.tagline-strip blockquote{margin:0; font-family:var(--fh); font-weight:800; font-size:clamp(24px,3.4vw,42px); text-transform:uppercase; letter-spacing:-.01em}
.prose-narrow{max-width:760px; margin:0 auto}
.prose-narrow p{color:var(--muted); font-size:16px; line-height:1.75; margin:0 0 18px}
.prose-narrow p strong{color:var(--ink)}

/* faq */
.faq-chips{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:44px}
.faq-chips .chip{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-strong); border-radius:40px; padding:9px 16px; cursor:pointer; transition:all .2s}
.faq-chips .chip.on,.faq-chips .chip:hover{background:var(--navy); border-color:var(--navy); color:#fff}
.faq-group{margin-bottom:40px}
.faq-group .gt{display:flex; align-items:baseline; gap:14px; margin-bottom:10px}
.faq-group .gt .n{font-family:var(--fh); font-weight:900; font-size:20px; color:var(--accent)}
.faq-group .gt h3{font-family:var(--fh); font-weight:800; font-size:17px; text-transform:uppercase; color:var(--navy)}
.still-panel{background:linear-gradient(160deg,var(--navy),#0a1622); color:#fff; border-radius:var(--r-lg); padding:52px 40px; text-align:center; margin-top:48px; box-shadow:var(--shadow-lg)}
.still-panel h2{color:#fff; font-weight:900; text-transform:uppercase; font-size:clamp(26px,3.4vw,40px)}
.still-panel p{color:var(--muted-light); max-width:48ch; margin:14px auto 24px}
.still-panel .row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ====================================================================
   LEGAL / PROSE / PRODUCT-DETAIL / CART / CHECKOUT / BLOG
   ==================================================================== */
.legal-prose{max-width:820px; margin:0 auto}
.legal-prose h2{font-family:var(--fh); font-weight:800; font-size:21px; text-transform:uppercase; color:var(--navy); margin:36px 0 14px; letter-spacing:-.01em}
.legal-prose h3{font-family:var(--fh); font-weight:700; font-size:17px; color:var(--navy); margin:24px 0 10px}
.legal-prose h4{font-family:var(--fh); font-weight:700; font-size:15px; color:var(--navy); margin:18px 0 8px}
.legal-prose p,.legal-prose li{color:var(--muted); font-size:15.5px; line-height:1.75}
.legal-prose p{margin:0 0 14px}
.legal-prose ul,.legal-prose ol{margin:0 0 16px; padding-left:20px}
.legal-prose li{margin-bottom:6px}
.legal-prose a{color:var(--accent); font-weight:600}
.legal-prose strong{color:var(--ink)}
.legal-prose table{width:100%; border-collapse:collapse; margin:18px 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.legal-prose th,.legal-prose td{border-bottom:1px solid var(--line); padding:12px 16px; text-align:left; font-size:14px}
.legal-prose th{font-family:var(--fh); font-weight:700; color:var(--navy); background:var(--bg-soft)}
.legal-prose td{color:var(--muted)}
.legal-prose section{margin-bottom:8px}

/* product detail (info pages) */
.pd-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
@media(max-width:900px){ .pd-grid{grid-template-columns:1fr; gap:30px} }
.pd-media{position:relative; aspect-ratio:4/4; border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; display:flex; align-items:center; justify-content:center}
.pd-media .ic{color:rgba(255,255,255,.92)}
.pd-media .ic svg{width:96px; height:96px}
.pd-media .tag{position:absolute; top:16px; left:16px; background:var(--accent); color:#fff; font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:40px}
.pd-info .cat{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.pd-info h1{font-family:var(--fh); font-weight:900; font-size:clamp(32px,4vw,52px); text-transform:uppercase; color:var(--navy); margin:10px 0 16px; line-height:1}
.pd-info .desc{color:var(--muted); font-size:16px; line-height:1.65; margin:0 0 22px}
.pd-price{font-family:var(--fh); font-weight:900; font-size:34px; color:var(--navy); margin-bottom:4px}
.pd-price .pre{font-size:15px; font-weight:700; color:var(--muted); margin-right:4px}
.pd-tax{font-size:12px; color:var(--muted); margin-bottom:22px}
.pd-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px}
.pd-meta{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.pd-meta .m{background:var(--surface); padding:16px 18px}
.pd-meta .mk{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:4px}
.pd-meta .mv{font-size:14px; color:var(--ink)}

/* cart */
.cart-grid{display:grid; grid-template-columns:1.6fr .9fr; gap:36px; align-items:start}
@media(max-width:900px){ .cart-grid{grid-template-columns:1fr} }
.cart-item{display:grid; grid-template-columns:96px 1fr auto; gap:20px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow-sm); margin-bottom:16px}
.cart-item .thumb{width:96px; height:96px; border-radius:var(--r); background:radial-gradient(circle at 50% 45%,#fff,#eee9df); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent)}
.cart-item .thumb svg{width:34px;height:34px}
.cart-item h3{font-family:var(--fh); font-weight:800; font-size:18px; color:var(--navy)}
.cart-item .cfgline{font-size:13px; color:var(--muted); margin-top:5px; line-height:1.5}
.cart-item .qty{display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden; margin-top:10px}
.cart-item .qty button{width:30px;height:30px;border:0;background:var(--surface);cursor:pointer;font-size:16px;color:var(--ink)}
.cart-item .qty span{width:36px;text-align:center;font-family:var(--fh);font-weight:700;font-size:14px}
.cart-item .price{font-family:var(--fh); font-weight:900; font-size:20px; color:var(--navy); text-align:right}
.cart-sum{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow); position:sticky; top:96px}
.cart-sum h3{font-family:var(--fh); font-weight:800; font-size:16px; text-transform:uppercase; color:var(--navy); margin-bottom:18px}
.cart-sum .l{display:flex; justify-content:space-between; font-size:14.5px; color:var(--muted); margin-bottom:12px}
.cart-sum .l.total{font-family:var(--fh); font-weight:900; font-size:22px; color:var(--navy); border-top:1px solid var(--line); padding-top:16px; margin-top:6px}
.cart-sum .l.total span:first-child{font-size:14px; align-self:center}

/* checkout / payment */
.co-grid{display:grid; grid-template-columns:1.4fr .9fr; gap:36px; align-items:start}
@media(max-width:900px){ .co-grid{grid-template-columns:1fr} }
.pay-methods{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.pay-methods .pm-opt{display:flex; align-items:center; gap:8px; border:1px solid var(--line-strong); border-radius:var(--r); padding:11px 14px; font-family:var(--fh); font-weight:700; font-size:13px; color:var(--ink); cursor:pointer; transition:border-color .2s,color .2s}
.pay-methods .pm-opt.on,.pay-methods .pm-opt:hover{border-color:var(--accent); color:var(--accent)}
.co-step{font-family:var(--fh); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin:0 0 16px; display:flex; align-items:center; gap:10px}
.co-step .n{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}

/* success */
.success-box{max-width:620px; margin:0 auto; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:56px 40px}
.success-box .ck{width:74px;height:74px;border-radius:50%;background:rgba(236,90,28,.12);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.success-box .ck svg{width:38px;height:38px}
.success-box h1{font-family:var(--fh);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,40px);color:var(--navy);margin-bottom:14px}
.success-box p{color:var(--muted);font-size:16px;line-height:1.65;margin:0 auto 12px;max-width:46ch}
.success-box .ordno{font-family:var(--fh);font-weight:800;color:var(--accent);font-size:18px;margin:18px 0}

/* blog / research */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media(max-width:980px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .blog-grid{grid-template-columns:1fr} }
.blog-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.blog-card .bimg{aspect-ratio:16/10; background:linear-gradient(135deg,var(--navy),#1c3450); position:relative; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5)}
.blog-card .bimg svg{width:40px;height:40px}
.blog-card .bcat{position:absolute; top:12px; left:12px; background:var(--accent); color:#fff; font-family:var(--fh); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:40px}
.blog-card .bb{padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.blog-card .bm{font-family:var(--fh); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.blog-card h3{font-family:var(--fh); font-weight:800; font-size:19px; color:var(--navy); line-height:1.15}
.blog-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.55; flex:1}
.blog-card .more{font-family:var(--fh); font-weight:700; font-size:13px; text-transform:uppercase; color:var(--accent)}
.article{max-width:760px; margin:0 auto}
.article .amETA{font-family:var(--fh); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.article .ahero{aspect-ratio:16/8; border-radius:var(--r-lg); background:linear-gradient(135deg,var(--navy),#1c3450); margin:24px 0 32px; border:1px solid var(--line)}
.article p{color:var(--muted); font-size:17px; line-height:1.8; margin:0 0 20px}
.article h2{font-family:var(--fh); font-weight:800; font-size:24px; text-transform:uppercase; color:var(--navy); margin:36px 0 14px}
.article p strong{color:var(--ink)}

/* reveal - hidden ONLY when motion enabled; anime.js animates them in */
html.anim .reveal{opacity:0; will-change:opacity,transform}
/* API-injected cards (research-api.js / blog-api.js) carry `is-in` instead of
   being observed by bright.js's IntersectionObserver (which already ran on the
   static cards they replace). Without this rule they stay opacity:0 forever -
   the empty research/blog grid. Restores the old styles.css contract. */
html.anim .reveal.is-in{opacity:1}
html.anim .hero-anim{opacity:0; will-change:opacity,transform}

/* ---------- cool effects ---------- */
/* Scroll-progress bar: thin accent gradient tracking page scroll */
.scroll-progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:300; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); pointer-events:none}

/* Section-title accent underline: draws in when its .reveal block enters view */
.h-section .accent{position:relative}
.h-section .accent::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:scaleX(0); transform-origin:0 50%}
html.anim .reveal.lit .h-section .accent::after{transform:scaleX(1); transition:transform .8s cubic-bezier(.22,.61,.36,1) .18s}
/* Keep the accent clean where an underline would clash (italic body quote, navy-on-orange CTA) */
.founder .accent::after,.cta-band .accent::after{display:none}

/* Hero 3D product showcase: one framed model-viewer that cycles all products,
   with a small pill switcher overlaid at the bottom of the frame. */
.hero-mv{width:100%; height:100%; opacity:1; transition:opacity .3s ease; --poster-color:transparent}
.hero-mv.fading{opacity:0}
/* Hide model-viewer's default loading bar (the grey strip that flashes at the
   top of the frame each time a new product GLB loads - hero switch + cards). */
model-viewer::part(default-progress-bar){display:none}
.hero-switch{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:4; display:flex; gap:4px; padding:5px;
  background:rgba(13,27,42,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); border-radius:999px}
.hs-pill{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background:transparent; border:0; padding:7px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:background .25s,color .25s}
.hs-pill:hover{background:rgba(255,255,255,.14)}
.hs-pill.on{background:var(--accent)}

/* Product-card cursor spotlight: soft accent glow follows the pointer over the 3D model.
   pointer-events:none keeps model-viewer drag fully interactive. */
.pf-media::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,42%), rgba(236,90,28,.14), transparent 62%)}
.pf-media.is-hot::after{opacity:1}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .btn:hover,.usp .card:hover,.pfeature:hover,.t-card:hover,.feat:hover{transform:none !important}
  .h-section .accent::after{display:none}
  .pf-media::after{display:none}
}