/* =====================================================================
   SHAMIR LENS EXPERIENCE — design system
   ===================================================================== */
:root{
  --red:        #E8112D;
  --red-deep:   #C20E26;
  --red-soft:   #FCE9EC;
  --ink:        #16171A;
  --ink-2:      #3A3D44;
  --ink-3:      #6B6F78;
  --line:       #E7E5E2;
  --line-2:     #D7D4CF;
  --paper:      #FBFAF8;
  --paper-2:    #F3F1ED;
  --white:      #FFFFFF;
  --shadow-sm:  0 1px 2px rgba(20,20,25,.06), 0 2px 8px rgba(20,20,25,.05);
  --shadow-md:  0 6px 18px rgba(20,20,25,.08), 0 2px 6px rgba(20,20,25,.05);
  --shadow-lg:  0 24px 60px rgba(20,20,25,.16), 0 6px 18px rgba(20,20,25,.08);
  --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --r-xl: 34px;
  --nav-h: 64px;
  --maxw: 1240px;
  --sans: "Inter","Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif: "Noto Serif TC",Georgia,serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2.5px solid var(--red); outline-offset:3px; border-radius:4px; }

/* lang visibility helper */
[data-lang="zh"] .en{ display:none; }
[data-lang="en"] .zh{ display:none; }

/* ====================== NAV ====================== */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center; gap:24px; padding:0 clamp(16px,4vw,40px);
  background:rgba(251,250,248,.82); backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s;
}
.nav.is-scrolled{ border-color:var(--line); box-shadow:var(--shadow-sm); }
.nav__brand{ display:flex; align-items:center; gap:9px; color:var(--red); }
.nav__mark{ display:grid; place-items:center; }
.nav__word{ font-weight:800; letter-spacing:-.02em; font-size:1.35rem; color:var(--ink); }
.nav__links{ display:flex; gap:4px; margin-left:6px; flex:1; }
.nav__links a{
  position:relative; padding:9px 14px; border-radius:999px; font-weight:500; font-size:.94rem;
  color:var(--ink-2); transition:color .2s, background .2s;
}
.nav__links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav__links a.is-active{ color:var(--red); background:var(--red-soft); }
.nav__actions{ display:flex; align-items:center; gap:12px; }
.lang-toggle{
  display:flex; align-items:center; gap:5px; background:var(--white); border:1px solid var(--line-2);
  padding:6px 12px; border-radius:999px; font-size:.84rem; font-weight:600; color:var(--ink-3);
}
.lang-toggle__opt.is-active{ color:var(--red); }
.lang-toggle__sep{ opacity:.4; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.nav__burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:920px){
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:2px; padding:14px;
    background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    transform:translateY(-130%); transition:transform .35s var(--ease); margin:0;
  }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__links a{ padding:14px 16px; font-size:1.05rem; }
  .nav__burger{ display:flex; }
}

/* ====================== LAYOUT PRIMITIVES ====================== */
main{ min-height:100vh; }
.view{ animation:viewIn .5s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.section{ padding:clamp(56px,8vw,110px) 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--red); display:inline-block; }
h1,h2,h3{ line-height:1.12; letter-spacing:-.02em; margin:0; font-weight:800; }
.h-display{ font-size:clamp(2.4rem,6vw,4.6rem); font-weight:900; letter-spacing:-.035em; }
.h-1{ font-size:clamp(1.9rem,4.4vw,3rem); }
.h-2{ font-size:clamp(1.45rem,3vw,2.1rem); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--ink-2); }

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:1rem; border:1.5px solid transparent; transition:.25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--red); color:#fff; box-shadow:0 8px 22px rgba(232,17,45,.28); }
.btn--primary:hover{ background:var(--red-deep); transform:translateY(-2px); box-shadow:0 12px 30px rgba(232,17,45,.34); }
.btn--ghost{ background:var(--white); color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; transform:translateY(-2px); }

/* ====================== HOME / HERO ====================== */
.hero{
  position:relative; padding-top:calc(var(--nav-h) + clamp(40px,7vw,90px));
  padding-bottom:clamp(40px,7vw,80px); overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(232,17,45,.10), transparent 60%),
    radial-gradient(700px 500px at -5% 30%, rgba(232,17,45,.06), transparent 55%),
    var(--paper);
}
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,60px); align-items:center; }
.hero__title{ margin:18px 0 0; }
.hero__title .accent{ color:var(--red); }
.hero__sub{ margin:22px 0 30px; max-width:30ch; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:30px; margin-top:42px; flex-wrap:wrap; }
.hero__stat b{ display:block; font-size:1.9rem; font-weight:900; letter-spacing:-.03em; }
.hero__stat span{ font-size:.86rem; color:var(--ink-3); }

/* staggered entrance — `backwards` fill only, so hover/float transforms still apply after */
@keyframes riseIn{ from{ opacity:0; transform:translateY(16px); } }
@keyframes visIn{ from{ opacity:0; transform:scale(.965); } }
.hero .eyebrow{ animation:riseIn .65s var(--ease) backwards; }
.hero__title{ animation:riseIn .65s var(--ease) .08s backwards; }
.hero__sub{ animation:riseIn .65s var(--ease) .16s backwards; }
.hero .ela{ animation:riseIn .65s var(--ease) .24s backwards; }
.hero__visual{ animation:visIn .9s var(--ease) .12s backwards; }
.htile{ animation:riseIn .55s var(--ease) backwards; }
.htile:nth-child(2){ animation-delay:.06s; }
.htile:nth-child(3){ animation-delay:.12s; }
.htile:nth-child(4){ animation-delay:.18s; }
.htile:nth-child(5){ animation-delay:.24s; }

/* hero visual: real PhotoGlamour lenses on the light table — the main lens
   "activates" through the true catalogue colours; two companions sit behind */
.hero__visual{ position:relative; aspect-ratio:1/1; }
.heroTray__lens{ position:absolute; border-radius:50%; width:42%; aspect-ratio:1; opacity:.6; filter:saturate(.95);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65), inset 0 2px 10px rgba(255,255,255,.5), inset 0 -10px 24px rgba(35,30,45,.14), 0 12px 28px rgba(35,28,40,.16); }
.heroTray__lens--b1{ left:0; top:7%; animation:lensDrift 9s ease-in-out infinite; }
.heroTray__lens--b2{ right:0; bottom:3%; width:34%; opacity:.5; animation:lensDrift 11.5s ease-in-out -3s infinite; }
@keyframes lensDrift{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }
.heroTray__shadow{ position:absolute; left:18%; right:12%; bottom:1.5%; height:6%; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(40,28,40,.26), transparent 72%); filter:blur(7px); }
.heroTray__main{ position:absolute; left:13%; top:10%; width:78%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.75), inset 0 0 0 9px rgba(255,255,255,.16), inset 0 -20px 48px rgba(35,30,45,.12), inset 0 4px 14px rgba(255,255,255,.5), 0 26px 56px rgba(35,28,40,.2); }
.heroTray__fill{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.heroTray__gloss{ position:absolute; inset:0;
  background:radial-gradient(58% 42% at 32% 24%, rgba(255,255,255,.72), rgba(255,255,255,0) 62%),
             linear-gradient(215deg, rgba(255,255,255,.3), rgba(255,255,255,0) 40%); }
.hero__chip{
  position:absolute; background:var(--white); box-shadow:var(--shadow-md); border:1px solid var(--line);
  border-radius:14px; padding:10px 14px; font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap;
  animation:float 5s ease-in-out infinite;
}
.hero__chip i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.hero__chip--1{ top:6%; left:-4%; }
.hero__chip--2{ bottom:14%; right:-6%; animation-delay:1.4s; }
.hero__chip--3{ bottom:-2%; left:18%; animation-delay:.7s; }
.hero__chip small{ color:var(--ink-2); font-weight:600; }
.hero__chip-tr{ font-style:italic; font-weight:700; letter-spacing:.01em; color:var(--ink-2); }
.hero__chip-tr sup{ font-size:.55em; font-style:normal; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* EssilorLuxottica line */
.ela{ display:inline-flex; align-items:center; gap:9px; margin-top:28px; font-size:.95rem; font-weight:600; color:var(--ink-2); padding:9px 16px; border:1px solid var(--line-2); border-radius:999px; background:var(--white); transition:.2s; }
.ela:hover{ border-color:var(--ink-3); }

/* home action tiles — the choosing menu: numbered editorial rows on hairlines
   (frames control groups / glamour tasting menu), each experience carried by a
   glassy lens disc; whole row is one big tap target */
.home-tiles{ border-top:1px solid var(--line-2); }
.htile{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center;
  column-gap:clamp(14px,2.6vw,30px); padding:clamp(17px,2.6vw,25px) clamp(2px,.8vw,10px);
  border-bottom:1px solid var(--line); transition:background .3s var(--ease); }
.htile:hover{ background:var(--white); }
.htile__no{ font-family:var(--serif); font-size:clamp(.8rem,1.2vw,.9rem); letter-spacing:.14em;
  color:var(--ink-3); font-variant-numeric:tabular-nums; transition:color .3s; }
.htile:hover .htile__no{ color:var(--red); }
.htile__ico{ width:clamp(58px,7.4vw,74px); aspect-ratio:1; border-radius:clamp(17px,2.2vw,22px);
  background:var(--red-soft); color:var(--red); display:grid; place-items:center;
  transition:transform .3s var(--ease), background .3s, color .3s; }
.htile__ico svg{ width:51%; height:51%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.htile:hover .htile__ico{ transform:scale(1.05); background:var(--red); color:#fff; }
.htile__txt{ min-width:0; }
.htile__names{ display:flex; align-items:baseline; gap:5px 13px; flex-wrap:wrap; }
.htile__names b{ font-size:clamp(1.14rem,1.9vw,1.42rem); font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.htile__names small{ font-size:.64rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.htile__sub{ display:block; margin-top:4px; font-size:.9rem; color:var(--ink-3); line-height:1.5; }
.htile__go{ width:clamp(40px,4.6vw,46px); aspect-ratio:1; border:1px solid var(--line-2); border-radius:50%;
  display:grid; place-items:center; color:var(--ink-2); transition:.28s var(--ease); }
.htile__go svg{ width:20px; height:20px; }
.htile:hover .htile__go{ background:var(--red); border-color:var(--red); color:#fff;
  transform:translateX(4px); box-shadow:0 8px 18px rgba(232,17,45,.3); }
@media (max-width:720px){
  .htile{ column-gap:13px; padding:15px 2px; }
  .htile__ico{ width:52px; border-radius:15px; }
  .htile__names b{ font-size:1.08rem; }
  .htile__sub{ font-size:.84rem; }
  .htile__go{ width:38px; }
  .htile__go svg{ width:18px; }
}

/* feature cards */
.feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.fcard{
  position:relative; border-radius:var(--r-lg); padding:30px; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow-sm);
  transition:.3s var(--ease); display:flex; flex-direction:column; min-height:280px;
}
.fcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-2); }
.fcard--hero{ grid-column:1/-1; }
.fcard__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--red),var(--red-deep)); margin-bottom:18px;
}
.fcard__icon svg{ width:26px; height:26px; }
.fcard h3{ font-size:1.3rem; margin-bottom:8px; }
.fcard p{ color:var(--ink-2); font-size:.98rem; margin:0 0 18px; }
.fcard__go{ margin-top:auto; color:var(--red); font-weight:700; display:inline-flex; align-items:center; gap:7px; }
.fcard__go svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.fcard:hover .fcard__go svg{ transform:translateX(4px); }
.fcard__demo{ position:absolute; inset:auto -10% -20% auto; width:60%; opacity:.16; z-index:-1; }

/* section header */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:38px; flex-wrap:wrap; }
.sec-head p{ max-width:46ch; margin:12px 0 0; color:var(--ink-2); }

/* tech strip */
.tech-strip{ background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:clamp(30px,5vw,56px); }
.tech-strip .eyebrow{ color:#ff8a99; }
.tech-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:30px; }
.tech-item h4{ font-size:1.08rem; margin:0 0 6px; color:#fff; }
.tech-item p{ font-size:.9rem; color:rgba(255,255,255,.66); margin:0; }
.tech-item{ padding-top:18px; border-top:2px solid rgba(255,255,255,.16); }

/* ============ printed-catalogue entry card (about page) ============ */
.flipbook-cta{
  position:relative; overflow:hidden; margin-top:clamp(20px,3vw,28px); border-radius:var(--r-lg);
  background:radial-gradient(130% 170% at 88% -30%, #2c2e36, transparent 56%), linear-gradient(120deg,#1b1c21,#0d0e12 76%);
  color:#fff; padding:clamp(26px,4.5vw,52px); display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap; box-shadow:var(--shadow-md);
}
.flipbook-cta h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:900; letter-spacing:-.01em; }
.flipbook-cta p{ color:rgba(255,255,255,.68); margin:10px 0 0; max-width:46ch; line-height:1.7; }
.flipbook-cta__txt{ position:relative; z-index:2; max-width:560px; }
.flipbook-cta__fan{ position:relative; z-index:1; flex:none; height:clamp(170px,17vw,225px); aspect-ratio:11/8; pointer-events:none; }
.flipbook-cta__fan img{ position:absolute; height:88%; width:auto; border-radius:5px;
  box-shadow:0 2px 0 rgba(255,255,255,.14), 0 18px 38px rgba(0,0,0,.55); }
.flipbook-cta__fan img:nth-child(1){ right:0; top:9%; transform:rotate(8deg); }
.flipbook-cta__fan img:nth-child(2){ left:50%; top:2%; transform:translateX(-50%) rotate(-1deg); }
.flipbook-cta__fan img:nth-child(3){ left:0; top:6%; transform:rotate(-8deg); }
@media (max-width:880px){ .flipbook-cta__fan{ display:none; } }



/* flipbook viewer */
/* manipulation: quick repeated taps on ‹ › turn pages instead of triggering
   double-tap zoom (iOS ignores maximum-scale); pinch-zoom still works */
.flip{ position:fixed; inset:0; z-index:210; background:#0c0d0f; display:none; flex-direction:column; touch-action:manipulation; }
.flip.is-open{ display:flex; }
.flip__bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; color:#fff; gap:12px; }
.flip__bar b{ font-weight:700; }
.flip__stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:0 8px 14px; overflow:hidden; container-type:size; }
.flip__img{ max-height:100%; max-width:100%; object-fit:contain; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff; }
/* Every page sits in the same A4-shaped sheet, so turning pages never
   resizes it: 12 of the 74 scans are a little shorter (1100×1485 vs
   1100×1555) and just get white margins inside the sheet. */
@supports (width:1cqw){
  .flip__img{ width:min(100cqw, 100cqh * 1100 / 1555); height:auto; aspect-ratio:1100 / 1555; max-width:none; max-height:none; }
}
.flip__nav{ display:flex; gap:10px; align-items:center; -webkit-user-select:none; user-select:none; }
.flip__btn{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-size:1.2rem; display:grid; place-items:center; -webkit-tap-highlight-color:transparent; }
@media (max-width:640px){
  .flip__nav{ gap:18px; }
  .flip__nav .flip__btn{ width:56px; height:56px; font-size:1.5rem; }
  .flip__bar:last-child{ padding-bottom:max(14px, env(safe-area-inset-bottom)); }
}
.flip__btn:hover{ background:rgba(255,255,255,.18); }
.flip__btn:disabled{ opacity:.3; }
.flip__count{ color:#fff; font-variant-numeric:tabular-nums; min-width:64px; text-align:center; }
/* fixed two-line slot: a caption that wraps (or a page without one) must
   not change the height left for the page above it */
.flip__caption{ color:rgba(255,255,255,.82); text-align:center; padding:2px 18px 10px; font-size:.9rem; line-height:1.45; max-width:680px; margin:0 auto;
  box-sizing:border-box; height:calc(2.9em + 12px); flex:none; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
.flip__caption b{ color:#fff; font-weight:700; }

/* ====================== SIMULATOR (shared) ====================== */
.sim{ position:fixed; inset:var(--nav-h) 0 0 0; background:#0a0b0d; display:flex; flex-direction:column; }
.sim__stage{ position:relative; flex:1; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.sim__canvas{ width:100%; height:100%; object-fit:cover; display:block; }
.sim__video{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.sim__hint{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; color:#fff; padding:30px; background:radial-gradient(circle at 50% 40%,#1b1d22,#0a0b0d);
}
.sim__hint svg{ width:64px; height:64px; color:var(--red); }
.sim__hint h2{ font-size:1.6rem; }
.sim__hint p{ color:rgba(255,255,255,.66); max-width:40ch; }
.sim__err{ color:#ffb4b4; font-size:.9rem; max-width:42ch; }

/* split before/after divider */
.sim__split{ position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.5); display:none; cursor:ew-resize; z-index:6; }
.sim__split.is-on{ display:block; }
.sim__split-grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:#fff; box-shadow:var(--shadow-md); display:grid; place-items:center; color:var(--ink); font-size:.9rem; }
.sim__split-label{ position:absolute; top:16px; padding:5px 12px; border-radius:999px; background:rgba(16,17,20,.6); color:#fff; font-size:.78rem; font-weight:700; backdrop-filter:blur(6px); }

/* top status pills */
.sim__topbar{ position:absolute; top:14px; left:14px; right:14px; display:flex; gap:10px; align-items:center; z-index:6; pointer-events:none; }
.sim__pill{ pointer-events:auto; background:rgba(16,17,20,.55); backdrop-filter:blur(10px); color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:9px 15px; font-size:.84rem; font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.sim__pill svg{ flex:none; }
.sim__pill b{ color:#ff8a99; }
.sim__iconbtn{ pointer-events:auto; margin-left:auto; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(16,17,20,.5); backdrop-filter:blur(10px); color:#fff; display:grid; place-items:center; }
.sim__iconbtn svg{ width:20px; height:20px; }

/* bottom control sheet */
.sim__panel{
  background:linear-gradient(180deg, rgba(18,19,22,.0), rgba(18,19,22,.86) 14%, #121316 26%);
  color:#fff; padding:18px 18px max(16px,env(safe-area-inset-bottom));
  flex-shrink:0; max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.sim__panel-inner{ max-width:680px; margin:0 auto; }
.sim__paneltitle{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sim__paneltitle h3{ font-size:1.1rem; }
.sim__paneltitle .sub{ font-size:.82rem; color:rgba(255,255,255,.55); }

/* group tabs */
.gtabs{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:none; }
.gtabs::-webkit-scrollbar{ height:0; }
.gtab{ flex:none; padding:9px 16px; border-radius:999px; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:rgba(255,255,255,.82); font-size:.84rem; font-weight:600; white-space:nowrap; letter-spacing:.02em; transition:.22s var(--ease); }
.gtab:hover{ border-color:rgba(255,255,255,.4); color:#fff; }
.gtab.is-active{ background:rgba(216,188,134,.16); color:#ffe9c4; border-color:#d8bc86; box-shadow:0 0 14px rgba(216,188,134,.22); }

/* fixed-depth selector (gradient lenses) */
.depthrow{ display:flex; align-items:center; gap:9px; padding:2px 2px 12px; }
.depthrow__label{ font-size:.84rem; font-weight:600; color:rgba(255,255,255,.7); margin-right:2px; }

/* swatch picker */
/* colour options rendered as the lenses themselves — glassy discs with a
   thin rim; the chosen one wears a gold ring (selection = gold, actions = red) */
.swatch-row{ display:flex; gap:14px; overflow-x:auto; padding:6px 2px 14px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.swatch-row::-webkit-scrollbar{ height:0; }
.swatch{ flex:none; width:80px; scroll-snap-align:start; text-align:center; background:none; border:0; color:#fff; opacity:.72; transition:.22s var(--ease); padding:0; }
.swatch:hover{ opacity:1; }
.swatch.is-active{ opacity:1; }
.swatch__disc{ display:block; width:60px; height:60px; border-radius:50%; margin:0 auto 8px; position:relative;
  border:1px solid rgba(255,255,255,.38);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.45), inset 0 -7px 14px rgba(0,0,0,.30), 0 5px 12px rgba(0,0,0,.38);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.swatch.is-active .swatch__disc{ transform:scale(1.07);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.5), inset 0 -7px 14px rgba(0,0,0,.30),
             0 0 0 2.5px rgba(255,224,170,.9), 0 0 20px 2px rgba(216,188,134,.35), 0 5px 14px rgba(0,0,0,.42); }
.swatch__disc::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(46% 34% at 33% 24%,rgba(255,255,255,.6),transparent 55%); }
.swatch__name{ font-size:.76rem; font-weight:700; line-height:1.3; display:block; letter-spacing:.02em;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.swatch__en{ font-size:.64rem; color:rgba(255,255,255,.52); display:block; margin-top:1px; }
.swatch.is-active .swatch__name{ color:#ffe9c4; }

/* design selector cards (progressive) */
.design-row{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x mandatory; }
.design-card{ flex:none; width:134px; scroll-snap-align:start; text-align:left; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.12); border-radius:14px; padding:10px; color:#fff; transition:.2s; }
.design-card.is-active{ border-color:var(--red); background:rgba(232,17,45,.14); }
.design-card b{ font-size:.88rem; display:block; }
.design-card small{ font-size:.7rem; color:rgba(255,255,255,.6); display:block; margin-top:3px; line-height:1.3; }
.design-card .mini-map{ width:100%; aspect-ratio:4/3; border-radius:8px; margin-bottom:8px; background:#0c0d10; position:relative; overflow:hidden; }

/* sliders */
.ctrl{ display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.ctrl__head{ display:flex; justify-content:space-between; font-size:.84rem; }
.ctrl__head b{ font-weight:600; }
.ctrl__head span{ color:#ff8a99; font-variant-numeric:tabular-nums; }
.range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:rgba(255,255,255,.18); outline:none; }
.range::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4); border:3px solid var(--red); }
.range::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--red); }
.ctrl-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }

/* toggles */
.toggles{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.toggle{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#fff; font-size:.86rem; font-weight:600; }
.toggle.is-on{ border-color:var(--red); background:rgba(232,17,45,.16); }
.toggle i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); }
.toggle.is-on i{ background:var(--red); box-shadow:0 0 8px var(--red); }

.sim__actions{ display:flex; gap:10px; margin-top:18px; }
.sim__actions .btn{ flex:1; justify-content:center; }
.btn--cam{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.2); }
.btn--cam:hover{ background:rgba(255,255,255,.18); }

/* product context strip in sim */
.sim__ctx{ display:flex; gap:10px; align-items:center; font-size:.82rem; color:rgba(255,255,255,.7); margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); }
.sim__ctx svg{ width:16px; height:16px; flex:none; color:#ff8a99; }

/* about page */
.timeline{ display:grid; gap:0; margin-top:30px; }
.tl-item{ display:grid; grid-template-columns:90px 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
.tl-item b{ color:var(--red); font-size:1.1rem; font-weight:800; }
.tl-item h4{ margin:0 0 4px; font-size:1.08rem; }
.tl-item p{ margin:0; color:var(--ink-2); font-size:.95rem; }

/* ====================== FOOTER ====================== */
.footer{ background:var(--ink); color:#fff; padding:clamp(40px,6vw,70px) 0; }
.footer__inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px); text-align:center; }
.footer__brand{ display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:1.6rem; }
.footer__brand svg{ color:var(--red); }
.footer__tag{ font-size:1.1rem; margin:14px 0 8px; }
.footer__legal{ font-size:.8rem; color:rgba(255,255,255,.45); max-width:64ch; margin:18px auto 0; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:13px 22px; border-radius:999px; box-shadow:var(--shadow-lg); font-weight:600; font-size:.9rem; opacity:0; pointer-events:none; transition:.3s var(--ease); z-index:300; }
.toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* responsive */
@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ width:min(380px,78vw); max-width:380px; margin:0 auto; order:-1; }
  .feature-grid{ grid-template-columns:1fr; }
  .tech-grid{ grid-template-columns:repeat(2,1fr); }
  .ctrl-row{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .tech-grid{ grid-template-columns:1fr; }
  .tl-item{ grid-template-columns:64px 1fr; gap:12px; }
}

/* ====================== GLAMOUR PALETTE ====================== */
.gpal__grouplabel{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:16px 2px 9px; font-weight:700; }
.gpal__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gsw{ background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.12); border-radius:14px; padding:8px; color:#fff; text-align:left; transition:.18s var(--ease); display:flex; flex-direction:column; gap:8px; cursor:pointer; }
.gsw:hover{ border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.gsw.is-active{ border-color:var(--red); background:rgba(232,17,45,.14); box-shadow:0 6px 18px rgba(232,17,45,.22); }
.gsw__chip{ display:block; height:46px; border-radius:9px; box-shadow:inset 0 -8px 16px rgba(0,0,0,.28), inset 0 2px 4px rgba(255,255,255,.18); position:relative; overflow:hidden; }
.gsw__chip::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 26% 22%, rgba(255,255,255,.5), transparent 44%); }
.gsw.is-active .gsw__chip{ transform:scale(1.02); }
.gsw__name b{ font-size:.8rem; font-weight:700; display:block; letter-spacing:.01em; }
.gsw__name small{ font-size:.68rem; color:rgba(255,255,255,.55); display:block; margin-top:1px; }

/* darkening timer / progress */
.gpal__timer{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:12px 13px; margin-bottom:6px; }
.gpal__bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
.gpal__bar i{ display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#ffd98a,#ff8a3a,var(--red)); }
.gpal__state{ font-size:.82rem; color:rgba(255,255,255,.8); margin-top:8px; font-variant-numeric:tabular-nums; }
.gpal__btns{ display:flex; gap:8px; margin-top:10px; }
.gpal__btn{ flex:1; justify-content:center; padding:9px 10px; font-size:.82rem; background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.18); }
.gpal__btn:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); transform:translateY(-1px); }
.gpal__btn svg{ width:15px; height:15px; }
@media (max-width:520px){ .gpal__grid{ grid-template-columns:repeat(2,1fr); } }

/* ====================== GLAMOUR CHOOSER (orbit + cocktail bar) ====================== */
.gchoose{
  position:relative; overflow:hidden; min-height:100vh; color:#fff;
  padding:calc(var(--nav-h) + clamp(28px,6vw,56px)) 0 clamp(40px,6vw,72px);
  background:
    radial-gradient(1200px 820px at 50% -12%, #271b40, transparent 62%),
    radial-gradient(900px 700px at 82% 16%, rgba(232,17,45,.12), transparent 55%),
    radial-gradient(760px 620px at 12% 40%, rgba(70,90,190,.14), transparent 60%),
    #07070c;
}
/* faint starfield */
.gchoose::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 74% 12%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 88% 62%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 32% 72%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 52% 34%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 22% 52%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 64% 82%, rgba(255,255,255,.7), transparent);
  animation:twinkle 6s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.42 } 50%{ opacity:.72 } }
.gchoose > *{ position:relative; z-index:1; }
.gchoose__intro{ max-width:820px; margin:0 auto; padding:0 clamp(18px,5vw,40px); text-align:center; }
.gchoose__title{ font-size:clamp(2rem,5vw,3.3rem); font-weight:900; letter-spacing:-.035em; text-wrap:balance; }
.gchoose__sub{ margin:16px auto 0; max-width:58ch; color:rgba(255,255,255,.74); font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.62; text-wrap:pretty; }

.gsec__inner{ max-width:980px; margin:0 auto; padding:clamp(32px,6vw,68px) clamp(18px,5vw,40px); }
.gsec__head{ text-align:center; max-width:62ch; margin:0 auto; }
.gsec__badge{ display:inline-flex; align-items:center; gap:8px; font-size:.7rem; font-weight:800; letter-spacing:.16em; color:#ffce7a; padding:5px 13px; border:1px solid rgba(255,206,122,.32); border-radius:999px; }
.gsec__badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:#ffce7a; box-shadow:0 0 9px #ffce7a; }
.gsec__badge--bar{ color:#86d2ff; border-color:rgba(134,210,255,.32); }
.gsec__badge--bar::before{ background:#86d2ff; box-shadow:0 0 9px #86d2ff; }
.gsec__title{ font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:900; letter-spacing:-.03em; margin:15px 0 0; text-wrap:balance; }
.gsec__desc{ margin:13px auto 0; color:rgba(255,255,255,.68); line-height:1.6; text-wrap:pretty; }
.gsec__hint{ display:flex; align-items:center; justify-content:center; gap:9px; margin:28px 0 0; color:rgba(255,255,255,.72); font-size:.92rem; font-weight:600; }
.gsec__hint svg{ width:17px; height:17px; color:#ffce7a; }
.gsec__hint-emoji{ font-size:1.15em; line-height:1; }

/* --- orbiting solar system --- */
.solar__stage{ position:relative; width:min(94vw,780px); aspect-ratio:16/10; margin:clamp(16px,3vw,30px) auto 0; overflow:visible; }
.solar__orbit{ position:absolute; top:50%; left:50%; border-radius:50%; border:1px solid rgba(255,255,255,.08); z-index:0; pointer-events:none; }
/* the sun glow sits BEHIND the planets (z-index 0) so planets passing behind the
   sun are never tinted orange by it — keeps Mercury/Saturn their own fixed colour */
.solar__glow{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:13%; aspect-ratio:1; border-radius:50%; z-index:0; pointer-events:none; }
.solar__glow::before{ content:""; position:absolute; inset:-260%; border-radius:50%; background:radial-gradient(circle, rgba(240,138,58,.3), rgba(216,108,42,.11) 34%, transparent 64%); }
.solar__corona{ position:absolute; inset:-200%; border-radius:50%; background:radial-gradient(circle, rgba(244,164,84,.22), transparent 60%); animation:sunpulse 5s ease-in-out infinite; }
.solar__sun{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:13%; aspect-ratio:1; z-index:2; }
/* photoreal sun render (limb darkening, granulation, chromosphere, corona);
   the PNG is 175% of the disc so its corona haze spills naturally */
.solar__sun img{ position:absolute; left:-37.5%; top:-37.5%; width:175%; height:175%; max-width:none; pointer-events:none; display:block; }
@keyframes sunpulse{ 0%,100%{ transform:scale(1); opacity:.75 } 50%{ transform:scale(1.16); opacity:1 } }
.solar__label{ position:absolute; top:61%; left:50%; transform:translateX(-50%); z-index:5; pointer-events:none;
  white-space:nowrap; font-size:.56rem; font-weight:700; letter-spacing:.14em; color:rgba(255,231,178,.92);
  text-shadow:0 1px 5px rgba(0,0,0,.92), 0 0 3px rgba(0,0,0,.7); }
.planet{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); border:0; background:none; padding:0; cursor:pointer; z-index:3; will-change:transform; }
.planet--deco{ pointer-events:none; }
/* Saturn's ring — a filled, banded annulus at a shallow tilt (the classic look):
   bright B ring, dark Cassini gap, fainter A ring. Both halves draw the same
   geometry, so the seam is invisible — the far half sits behind the planet,
   the near half passes in front of its lower edge. */
.planet--saturn::before, .planet--saturn::after{ content:""; position:absolute; left:50%; top:50%; width:250%; height:86%;
  transform:translate(-50%,-50%) rotate(-14deg);
  background:radial-gradient(closest-side,
    transparent 0 43%,
    rgba(206,182,128,.38) 44% 52%,
    rgba(240,220,168,.92) 53% 69%,
    transparent 70% 73%,
    rgba(228,206,152,.85) 74% 88%,
    rgba(228,206,152,.3) 89% 95%,
    transparent 96% 100%); }
.planet--saturn::before{ z-index:0; }
.planet--saturn::after{ z-index:2; clip-path:inset(50% 0 0 0); }
.planet__disc{ position:relative; display:block; width:100%; height:100%; border-radius:50%; background:#7c7c86; z-index:1;
  border:1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.55), inset 0 -3px 9px rgba(0,0,0,.26),
              inset 0 0 12px rgba(255,255,255,.16), 0 5px 15px rgba(0,0,0,.5);
  transition:box-shadow .25s var(--ease); }
.planet__disc::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(42% 32% at 32% 22%, rgba(255,255,255,.78), rgba(255,255,255,0) 66%),
    radial-gradient(12% 9% at 63% 42%, rgba(255,255,255,.62), rgba(255,255,255,0) 74%),
    radial-gradient(64% 54% at 50% 106%, rgba(255,255,255,.16), transparent 58%); }
/* decorative planets (Mercury, Saturn) stay solid, opaque & matte — no lens/glass,
   never change colour; a single soft highlight (not the bright glass reflections) */
.planet--deco .planet__disc{ border-color:transparent;
  box-shadow: inset -2px -3px 7px rgba(0,0,0,.45), inset 2px 2px 5px rgba(255,255,255,.28), 0 4px 12px rgba(0,0,0,.45); }
.planet--deco .planet__disc::after{ background:radial-gradient(38% 30% at 34% 28%, rgba(255,255,255,.42), transparent 64%); }
.planet:hover .planet__disc, .planet.is-hi .planet__disc{ box-shadow: inset 0 2px 4px rgba(255,255,255,.5), inset 0 0 13px rgba(255,255,255,.14), 0 0 0 2px rgba(255,255,255,.9), 0 0 24px 6px rgba(255,255,255,.45); }
.planet__name{ position:absolute; top:100%; left:50%; transform:translateX(-50%); transform-origin:top center; margin-top:5px;
  white-space:nowrap; font-size:.52rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,231,178,.9);
  text-shadow:0 1px 5px rgba(0,0,0,.92), 0 0 3px rgba(0,0,0,.7); pointer-events:none; z-index:4; }
.planet:focus-visible{ outline:none; }
.planet:focus-visible .planet__disc{ box-shadow:0 0 0 3px var(--red), 0 0 18px 4px rgba(232,17,45,.55); }

/* photoreal planets: canvas texture + sun-facing light overlay (rotated live) */
.planet__disc{ border:none; box-shadow:0 6px 18px rgba(0,0,0,.6); }
.planet__disc::after, .planet--deco .planet__disc::after{ content:none; }
.planet--deco .planet__disc{ box-shadow:0 5px 14px rgba(0,0,0,.55); }
.planet__tex{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; display:block; pointer-events:none; z-index:1; }
.planet__shade{ position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2;
  background:
    radial-gradient(circle at 84% 50%, rgba(255,244,214,.38), rgba(255,244,214,.08) 30%, rgba(255,244,214,0) 52%),
    radial-gradient(circle at 4% 50%, rgba(3,5,10,.8), rgba(3,5,10,.48) 34%, rgba(3,5,10,0) 66%); }
/* the six lens planets get a glassy finish: crisp specular kiss on the lit edge
   (the shade rotates with the sun, so it always sits sun-side) + glass rim ring */
.planet:not(.planet--deco) .planet__shade{
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), inset 0 0 9px rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 88% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 20%),
    radial-gradient(circle at 84% 50%, rgba(255,248,224,.4), rgba(255,248,224,.08) 32%, rgba(255,248,224,0) 54%),
    radial-gradient(circle at 4% 50%, rgba(3,5,10,.76), rgba(3,5,10,.42) 34%, rgba(3,5,10,0) 66%); }

/* legend redesigned as a lens sample tray: big glassy discs (live lens colour),
   names beneath — 6 across on desktop, a tidy 3×2 grid on phones where these
   chips (not the small moving planets) are the primary tap targets */
.plegend{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(6px,1.4vw,14px); margin:clamp(26px,4vw,40px) auto 0; max-width:820px; }
.plegend__chip{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:12px 4px 10px; border-radius:16px; border:1px solid transparent; background:none; color:#fff; cursor:pointer; transition:.2s var(--ease); }
.plegend__chip:hover, .plegend__chip.is-hi{ border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06); transform:translateY(-3px); }
.plegend__dot{ position:relative; width:clamp(38px,5.4vw,48px); height:clamp(38px,5.4vw,48px); border-radius:50%; background:#7c7c86; flex:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24), inset 0 0 9px rgba(255,255,255,.1), inset 0 -6px 12px rgba(3,5,10,.45), 0 6px 14px rgba(0,0,0,.5); }
.plegend__dot::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 24%, rgba(255,255,255,.5), rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 55%); }
.plegend__txt{ display:flex; flex-direction:column; line-height:1.2; text-align:center; gap:2px; }
.plegend__txt b{ font-size:clamp(.66rem,1.1vw,.76rem); font-weight:800; letter-spacing:.14em; text-indent:.14em; }
.plegend__txt small{ font-size:.68rem; color:#d8bc86; letter-spacing:.26em; text-indent:.26em; }
@media (max-width:700px){
  .plegend{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; max-width:420px; }
  .plegend__chip{ padding:10px 2px 8px; }
}

/* --- the tasting bar: one spot-lit pour on stage + a numbered menu --- */
/* registered so the room's ambient light glides between lens colours */
@property --luxc{ syntax:'<color>'; inherits:true; initial-value:#4a9ecd; }
.cbar{ position:relative; overflow:hidden; border-top:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(255,150,60,.045), transparent 60%),
    linear-gradient(180deg, #080608 0%, #050406 30%, #050406 100%); }
.cbar__inner{ max-width:1120px; }
.lux{ --luxc:#4a9ecd; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center; gap:clamp(28px,5vw,74px); margin-top:clamp(26px,4vw,50px); transition:--luxc 1.2s ease; }

/* stage — the photograph floats in the dark; its edges dissolve into the room */
.lux__stage{ position:relative; margin:0; width:100%; max-width:470px; aspect-ratio:3/4; justify-self:end; cursor:pointer; }
.lux__halo{ position:absolute; inset:-10% -22%; z-index:0; pointer-events:none; filter:blur(12px);
  background:radial-gradient(56% 44% at 50% 62%, color-mix(in srgb, var(--luxc) 30%, transparent), transparent 72%); }
.lux__img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.03);
  transition:opacity 1.15s ease, transform 1.7s var(--ease);
  /* two-axis vignette (intersected) — every edge dissolves into the room
     while the spot-lit subject in the middle stays untouched */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 15%, #000 87%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 15%, #000 87%, transparent 100%);
          mask-composite:intersect; }
.lux__img.is-front{ opacity:1; transform:scale(1); }
.lux__stage:hover .lux__img.is-front{ transform:scale(1.02); }
.lux__stage:focus-visible{ outline:none; }
.lux__stage:focus-visible::after{ content:""; position:absolute; inset:5%; z-index:2; border:1.5px solid rgba(255,255,255,.7); border-radius:16px; }

/* menu — editorial numbered list on gold hairlines */
.lux__side{ min-width:0; padding-bottom:clamp(4px,1vw,12px); }
.lux__menuhead{ margin:0 0 10px; font-size:.68rem; font-weight:700; letter-spacing:.42em; text-transform:uppercase; color:#cfa96b; }
.lux__menu{ border-top:1px solid rgba(255,214,150,.18); }
.lux__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(14px,2vw,22px);
  width:100%; padding:clamp(13px,1.7vw,19px) 4px; background:none; border:0; border-bottom:1px solid rgba(255,214,150,.14);
  color:#fff; text-align:left; cursor:pointer; transition:background .35s var(--ease); }
.lux__no{ font-family:var(--serif); font-size:.78rem; letter-spacing:.14em; color:rgba(255,255,255,.32); font-variant-numeric:tabular-nums; transition:color .4s; }
.lux__names{ display:flex; align-items:baseline; gap:13px; min-width:0; flex-wrap:wrap; }
.lux__names b{ font-family:var(--serif); font-weight:600; font-size:clamp(1.04rem,1.6vw,1.28rem); letter-spacing:.2em; color:rgba(255,255,255,.6); white-space:nowrap; transition:color .4s; }
.lux__names small{ font-size:.72rem; letter-spacing:.3em; color:rgba(255,255,255,.32); transition:color .4s; }
/* the lens — each row carries the actual gradient lens as a small round
   sample (deep top, clearing below) with a glassy face and thin rim */
.lux__lens{ position:relative; width:38px; height:38px; margin-right:4px; border-radius:50%; opacity:.62; transform:scale(.9);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.45), inset 0 -5px 10px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.45);
  transition:opacity .5s, transform .5s var(--ease), box-shadow .5s; }
.lux__lens::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(46% 34% at 32% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); }
.lux__row:hover .lux__lens, .lux__row.is-active .lux__lens{ opacity:1; transform:scale(1);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.5), inset 0 -5px 10px rgba(0,0,0,.22),
             0 0 0 2px rgba(255,224,170,.75), 0 0 18px 2px var(--pourc, transparent); }
.lux__row:hover .lux__no, .lux__row.is-active .lux__no{ color:#d8bc86; }
.lux__row:hover .lux__names b, .lux__row.is-active .lux__names b{ color:#fff; }
.lux__row.is-active .lux__names small{ color:#d8bc86; }
.lux__row:focus-visible{ outline:none; background:rgba(255,255,255,.05); }
.lux__cta{ display:inline-flex; align-items:center; gap:11px; margin-top:clamp(18px,2.6vw,28px); padding:13px 30px;
  border:1px solid rgba(255,214,150,.38); border-radius:999px; font-size:.78rem; font-weight:700;
  letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:#e9d9b8; transition:.3s var(--ease); }
.lux__cta::after{ content:"→"; text-indent:0; transition:transform .3s var(--ease); }
.lux__cta:hover{ background:rgba(255,214,150,.09); border-color:rgba(255,224,170,.72); transform:translateY(-1px); }
.lux__cta:hover::after{ transform:translateX(4px); }

@media (max-width:860px){
  .lux{ grid-template-columns:1fr; gap:12px; }
  .lux__stage{ justify-self:center; max-width:min(400px,88vw); }
  .lux__cta{ display:flex; justify-content:center; }
}

/* ---- LOOK & TRY — the campaign portraits, clear / medium / dark ---- */
.lookt{ position:relative; border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, #050406 0%, #0a0809 60%, #0b0809 100%); }
.gsec__badge--look{ color:#e8b6a2; border-color:rgba(232,182,162,.32); }
.gsec__badge--look::before{ background:#e8b6a2; box-shadow:0 0 9px #e8b6a2; }
.lookt__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center; gap:clamp(26px,5vw,60px); margin-top:clamp(26px,4vw,48px); }

.lookt__stage{ position:relative; margin:0; width:100%; max-width:430px; aspect-ratio:720/1058;
  justify-self:end; border-radius:18px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.5); }
.lookt__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .55s var(--ease); }
.lookt__img.is-front{ opacity:1; }
/* sits at the TOP — the catalogue photo carries Shamir's own colour/state
   caption baked into its lower edge, and the two would collide */
.lookt__cap{ position:absolute; left:0; right:0; top:0; z-index:2; display:flex; flex-direction:column; gap:3px;
  padding:15px 18px 34px; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.58), transparent); }
.lookt__cap b{ font-size:.94rem; letter-spacing:.06em; }
.lookt__cap span{ font-size:.72rem; letter-spacing:.1em; color:rgba(255,255,255,.62); }

.lookt__side{ min-width:0; }
.lookt__states{ display:inline-flex; padding:4px; gap:4px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
.lookt__st{ appearance:none; cursor:pointer; border:0; background:transparent; border-radius:999px;
  padding:9px 16px; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.56); transition:background .3s var(--ease), color .3s var(--ease); }
.lookt__st:hover{ color:#fff; }
.lookt__st.is-active{ background:#fff; color:#111; }
.lookt__note{ margin:14px 0 0; font-size:.86rem; line-height:1.6; color:rgba(255,255,255,.6); }

/* gradient tint depth — 25% and 50% are separate products, so each option
   previews the CURRENT colour at that depth rather than a generic swatch */
.gdepth{ margin-top:18px; }
.gdepth__label{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:9px; }
.gdepth__opts{ display:flex; gap:10px; }
.gdepth__opt{ appearance:none; cursor:pointer; flex:1; min-width:0; display:flex; align-items:center; gap:12px;
  padding:10px 14px 10px 10px; border-radius:14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.62);
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
/* tall enough that the falloff itself is the tell: 50% carries its colour
   much further down the lens than 25% does */
.gdepth__lens{ width:46px; height:56px; flex:none; border-radius:10px 10px 13px 13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); transition:transform .25s var(--ease); }
.gdepth__opt b{ font-size:1.05rem; font-variant-numeric:tabular-nums; }
.gdepth__opt small{ font-size:.7rem; letter-spacing:.08em; color:rgba(255,255,255,.42); margin-left:auto; }
.gdepth__opt:hover{ border-color:rgba(255,255,255,.34); color:#fff; }
.gdepth__opt.is-active{ background:rgba(255,255,255,.10); border-color:#fff; color:#fff; }
.gdepth__opt.is-active .gdepth__lens{ transform:scale(1.06); }
.gdepth__opt.is-active small{ color:rgba(255,255,255,.72); }

/* Side column reads top-down as the actual decision order: which state you
   want to see, then which colour, then (gradients) which depth. */
.lookt__eyebrow{ display:flex; align-items:baseline; gap:8px; margin:22px 0 10px;
  font-size:.66rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.42); }
.lookt__eyebrow:first-child{ margin-top:0; }
.lookt__eyebrow i{ font-style:normal; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.28); }

/* state buttons — plain labels, no imagery */
.lookt__steps{ display:inline-flex; padding:4px; gap:4px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
.lookt__step{ appearance:none; cursor:pointer; border:0; background:transparent; border-radius:999px;
  padding:9px 16px; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.56); transition:background .3s var(--ease), color .3s var(--ease); }
.lookt__step:hover{ color:#fff; }
.lookt__step.is-active{ background:#fff; color:#111; }

/* colour buttons sit directly under the state buttons */
.lookt__colors{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:9px; }
.lookt__sw{ appearance:none; cursor:pointer; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);
  border-radius:13px; padding:11px 7px 9px;
  display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.lookt__disc{ width:38px; height:38px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:transform .3s var(--ease); }
.lookt__sw b{ font-size:.63rem; font-weight:800; letter-spacing:.08em; color:rgba(255,255,255,.62);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; transition:color .3s; }
.lookt__sw small{ font-size:.58rem; letter-spacing:.04em; color:rgba(255,255,255,.3); transition:color .3s; }
.lookt__sw:hover{ border-color:rgba(255,255,255,.26); transform:translateY(-2px); }
.lookt__sw:hover .lookt__disc{ transform:scale(1.06); }
.lookt__sw.is-active{ background:rgba(255,255,255,.09); border-color:#fff; }
.lookt__sw.is-active .lookt__disc{ transform:scale(1.08); }
.lookt__sw.is-active b{ color:#fff; }
.lookt__sw.is-active small{ color:rgba(255,255,255,.6); }

@media (max-width:860px){
  .lookt__grid{ grid-template-columns:1fr; gap:20px; }
  .lookt__stage{ justify-self:center; max-width:min(370px,84vw); }
  .lookt__side{ width:100%; }
  .lookt__side .lux__cta{ display:flex; justify-content:center; }
  .lookt__colors{ grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); }
}

/* ====================== 3D FRAMES — sport tint studio (Shamir red & white) ====================== */
/* registered so swatch glow / slider fill glide between lens colours */
@property --fatc{ syntax:'<color>'; inherits:true; initial-value:#6f7268; }
.fatel{ --fatc:#6f7268; transition:--fatc .8s ease; }

/* control panel — one light card, four numbered groups */
.fpanel{ margin-top:26px; padding:6px clamp(18px,3vw,30px); border:1px solid var(--line); border-radius:20px;
  background:var(--white); box-shadow:var(--shadow-md);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,4vw,54px); }
.fgrp{ border-top:1px solid var(--line); padding:clamp(14px,1.8vw,18px) 0 clamp(16px,2vw,20px); }
.fpanel .fgrp:nth-child(-n+2){ border-top:0; }
/* frame row leads the panel and spans both columns: pick the frame first, then
   the lens. The following pair sit back on the hairline. */
.fpanel--wide .fgrp--frames{ grid-column:1 / -1; border-top:0; }
.fpanel--wide .fgrp:nth-child(-n+3){ border-top:1px solid var(--line); }
.fpanel--wide .fgrp--frames{ border-top:0; }
/* lens-type menu — one full-width row of tabs above the colour controls */
.fpanel--wide .fgrp--mode{ grid-column:1 / -1; }
.fmodes{ display:flex; flex-wrap:wrap; gap:8px; }
.fmode{ flex:1 1 auto; padding:11px 16px; border-radius:12px; border:1px solid var(--line-2); background:var(--white);
  color:var(--ink-2); font:inherit; font-size:.9rem; font-weight:700; letter-spacing:.04em; cursor:pointer;
  transition:border-color .18s, color .18s, background .18s; }
.fmode:hover{ border-color:var(--ink); color:var(--ink); }
.fmode.is-active{ background:var(--red); border-color:var(--red); color:#fff; }
.fmode:focus-visible{ outline:none; box-shadow:0 0 0 2.5px var(--red); }
.fmirrors__row[hidden], .frange[hidden]{ display:none; }
.fgrp__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.fgrp__no{ font-family:var(--serif); font-size:.76rem; letter-spacing:.14em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.fgrp__label{ font-size:.68rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--red); }
.fgrp__val{ margin-left:auto; font-weight:800; font-size:.9rem; color:var(--ink); letter-spacing:.02em; white-space:nowrap; }
.fswatches{ display:flex; flex-wrap:wrap; gap:10px; }
.fsw{ position:relative; width:42px; height:42px; border-radius:50%; border:0; padding:0; cursor:pointer;
  box-shadow:inset 0 -7px 12px rgba(0,0,0,.30), inset 0 2px 4px rgba(255,255,255,.35), 0 0 0 1px rgba(20,20,26,.10), 0 3px 8px rgba(20,20,26,.18);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.fsw::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.5), transparent 46%); }
.fsw:hover{ transform:translateY(-2px); }
.fsw:focus-visible{ outline:none; box-shadow:0 0 0 2.5px var(--red), 0 3px 8px rgba(20,20,26,.2); }
.fsw.is-active{ transform:scale(1.09);
  box-shadow:inset 0 -7px 12px rgba(0,0,0,.30), inset 0 2px 4px rgba(255,255,255,.35), 0 0 0 2.5px var(--red), 0 0 16px 2px color-mix(in srgb, var(--fatc) 45%, transparent); }
.fmirrors{ display:flex; flex-direction:column; gap:12px; }
.fmirrors__row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.fmir{ position:relative; width:38px; height:38px; border-radius:50%; border:0; padding:0; cursor:pointer;
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.4), 0 0 0 1px rgba(20,20,26,.10), 0 3px 8px rgba(20,20,26,.18);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.fmir::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), transparent 44%); }
.fmir:hover{ transform:translateY(-2px); }
.fmir:focus-visible{ outline:none; box-shadow:0 0 0 2.5px var(--red), 0 3px 8px rgba(20,20,26,.2); }
.fmir.is-active{ transform:scale(1.1);
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.35), 0 0 0 2.5px var(--red), 0 4px 10px rgba(20,20,26,.22); }

/* depth slider — light track filled with the live lens colour */
.frange{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:8px; border-radius:99px; outline:none; margin:4px 0 10px; cursor:pointer;
  background:linear-gradient(90deg, var(--fillc,#888) 0 var(--fill,50%), var(--paper-2) var(--fill,50%) 100%); border:1px solid var(--line-2); }
.frange::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--red);
  box-shadow:0 2px 6px rgba(20,20,26,.3); cursor:pointer; }
.frange::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--red); box-shadow:0 2px 6px rgba(20,20,26,.3); cursor:pointer; }
.frange:focus-visible{ box-shadow:0 0 0 3px rgba(232,17,45,.35); }
.fdq{ display:flex; gap:7px; flex-wrap:wrap; }
.fdq__b{ padding:8px 13px; border-radius:999px; border:1px solid var(--line-2); background:var(--white); color:var(--ink-2);
  font-weight:700; font-size:.76rem; font-variant-numeric:tabular-nums; cursor:pointer; transition:.2s var(--ease); }
.fdq__b:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-1px); }
.fdq__b.is-active{ background:var(--red-soft); border-color:var(--red); color:var(--red); }
.fdq__b:focus-visible{ outline:none; box-shadow:0 0 0 2.5px var(--red); }

/* applied environments (catalogue usage pictograms + note) */
.fenv__icons{ display:flex; gap:8px; flex-wrap:wrap; }
.fenv__ic{ width:38px; height:38px; border:1px solid var(--line-2); border-radius:10px; display:grid; place-items:center; color:var(--ink-2); background:var(--white); }
.fenv__ic svg{ width:21px; height:21px; display:block; }
.fenv__note{ margin:11px 0 0; font-size:.84rem; font-weight:600; color:var(--ink-2); letter-spacing:.04em; }

/* stage — FRONT and BACK side by side on white light-table cards; the
   pure-white sets dissolve seamlessly inside each card */
.fatel__stage{ display:grid; grid-template-columns:1fr; gap:20px; margin:22px 0 0; }
@media (min-width:760px){ .fatel__stage{ grid-template-columns:1fr 1fr; } }
.fview{ position:relative; isolation:isolate; aspect-ratio:1280/714; border-radius:20px; overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%, #ffffff 0%, #f5f3ef 74%, #ece9e3 100%);
  border:1px solid var(--line); box-shadow:var(--shadow-md); }
/* two-axis vignette (intersected) — the pure-white set dissolves into the card */
.fview__base{ position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 10%, #000 87%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 10%, #000 87%, transparent 100%);
          mask-composite:intersect; }
/* lens layers — clipped to the lens mask (white = lens) */
.fview__tint, .fview__mir{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
/* multiply: colour × bright lens = true dyed glass; streak highlights survive */
.fview__tint{ opacity:0; mix-blend-mode:multiply; transition:background-color .5s ease, opacity .5s ease; }
.fview__mir{ opacity:0; overflow:hidden; transition:opacity .55s ease; }
/* travelling reflection over the coating */
.fview__sweep{ position:absolute; top:-12%; bottom:-12%; left:0; width:20%; transform:skewX(-16deg) translateX(-150%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.32) 50%, rgba(255,255,255,0));
  animation:fsweep 5.2s ease-in-out infinite; }
@keyframes fsweep{ 0%{ transform:skewX(-16deg) translateX(-150%); } 34%{ transform:skewX(-16deg) translateX(650%); } 100%{ transform:skewX(-16deg) translateX(650%); } }
@media (prefers-reduced-motion: reduce){ .fview__sweep{ animation:none; opacity:0; } }
.fview__tag{ position:absolute; top:14px; left:16px; z-index:2; font-size:.7rem; font-weight:800; letter-spacing:.16em;
  color:var(--ink-2); background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:999px; padding:6px 12px; }

/* under-stage deck: editorial readout + disclaimer */
.fatel__deck{ display:flex; align-items:baseline; justify-content:space-between; gap:10px 24px; flex-wrap:wrap; margin-top:16px; }
.fatel__meta{ margin:0; font-family:var(--serif); font-size:.94rem; letter-spacing:.12em; color:var(--ink-2); }
.fatel__meta-no{ color:var(--red); margin-right:10px; font-size:.8rem; letter-spacing:.14em; font-variant-numeric:tabular-nums; font-weight:700; }

/* built for sport — red activity marquee + campaign break */
.fsport{ margin-top:clamp(36px,5.5vw,58px); }
.fsport__band{ margin-top:18px; background:var(--red); border-radius:14px; overflow:hidden; padding:12px 0;
  box-shadow:0 8px 22px rgba(232,17,45,.24); }
.fsport__track{ display:inline-flex; align-items:center; gap:26px; white-space:nowrap; will-change:transform;
  animation:fsportScroll 32s linear infinite; padding-left:26px; }
.fsport__it{ display:inline-flex; align-items:center; gap:9px; color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.22em; }
.fsport__it svg{ width:19px; height:19px; flex:none; }
.fsport__sep{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55); flex:none; }
@keyframes fsportScroll{ to{ transform:translateX(-50%); } }
.fsport__grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:20px; }
@media (min-width:760px){ .fsport__grid{ grid-template-columns:1fr 1fr; } }
.fsport__ph{ position:relative; margin:0; aspect-ratio:16/9; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-md); }
.fsport__ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.fsport__ph:hover img{ transform:scale(1.03); }
.fsport__tag{ position:absolute; bottom:14px; left:16px; font-size:.7rem; font-weight:800; letter-spacing:.16em;
  color:var(--ink-2); background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:999px; padding:6px 12px; }
@media (prefers-reduced-motion: reduce){ .fsport__track{ animation:none; } }
.fatel__note{ margin:0; font-size:.76rem; color:var(--ink-3); }

/* product info under the stage — materials/designs on the left, who to ask on the right */
.finfo{ display:flex; flex-wrap:wrap; gap:18px 40px; margin-top:26px; padding:20px 0 0;
  border-top:1px solid rgba(22,23,26,.12); }
.finfo__col{ flex:1 1 320px; min-width:0; }
.finfo__col--ask{ flex:0 1 300px; }
.finfo__h{ margin:0; font-size:1rem; font-weight:800; color:var(--ink); }
.finfo__spec{ margin:8px 0 0; font-family:var(--serif); font-size:.94rem; letter-spacing:.08em; color:var(--ink); }
.finfo__spec i{ display:inline-block; width:1px; height:.9em; margin:0 12px; background:var(--red); vertical-align:-1px; }
.finfo__p{ margin:6px 0 0; font-size:.88rem; line-height:1.6; color:var(--ink-2); }
.finfo__col--ask .finfo__p:first-child{ margin-top:0; }
.finfo__tel{ display:inline-block; margin-top:4px; font-size:1.3rem; font-weight:800; letter-spacing:.04em;
  color:var(--red); text-decoration:none; font-variant-numeric:tabular-nums; }

/* ---- frame picker + 3D stage ---- */
.fstages{ margin-top:22px; }
.fstages > [hidden]{ display:none !important; }

.f3d__stage{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-md); background:
    radial-gradient(120% 90% at 50% 8%, #fff 0%, #f4f5f7 58%, #e9ebee 100%);
  aspect-ratio:16/11; min-height:320px; }

.f3d__badges{ position:absolute; top:14px; left:16px; z-index:2; display:flex; gap:8px; flex-wrap:wrap; }
.f3d__badge{ font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); background:rgba(255,255,255,.92); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; }
.f3d__badge--curve{ color:var(--ink-3); }
.f3d__badge--curve.is-wrap{ color:#fff; background:var(--red); border-color:transparent; }
.f3d__hint{ position:absolute; right:16px; bottom:14px; z-index:2; margin:0; pointer-events:none;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  background:rgba(255,255,255,.86); border:1px solid var(--line); border-radius:999px; padding:6px 12px; }

.fmeta{ min-width:0; }
.fatel__meta b{ font-weight:800; letter-spacing:.01em; }
.fatel__meta i{ font-style:normal; margin-left:8px; font-size:.8rem; letter-spacing:.12em; color:var(--red); }
.f3d__shape{ margin:8px 0 0; font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); }
.f3d__note{ margin:6px 0 0; font-size:.88rem; line-height:1.6; color:var(--ink-2); max-width:56ch; }
.f3d__col{ display:block; margin-top:4px; font-size:.76rem; color:var(--ink-3); }
.f3d__warn{ display:block; margin-top:6px; font-size:.76rem; line-height:1.5; color:var(--ink-3);
  padding-left:11px; border-left:2px solid var(--red); }

/* horizontal rail inside the control panel — the frames read as a shelf */
.f3d__picker{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.f3d__chip{ display:flex; align-items:center; gap:9px; text-align:left; cursor:pointer; flex:none;
  scroll-snap-align:start; padding:7px 12px 7px 8px; border:1px solid var(--line); border-radius:14px; background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.f3d__chip img{ width:64px; height:auto; flex:none; display:block; mix-blend-mode:multiply; }
.f3d__chipname{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.f3d__chipname b{ font-size:.86rem; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.f3d__chipname small{ font-family:var(--serif); font-size:.7rem; letter-spacing:.12em; color:var(--ink-3); }
.f3d__chip:hover{ border-color:var(--ink-3); transform:translateY(-1px); }
.f3d__chip.is-active{ border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset, 0 6px 16px rgba(232,17,45,.14); }
.f3d__chip.is-active .f3d__chipname small{ color:var(--red); }

@media (max-width:700px){
  .fpanel{ grid-template-columns:1fr; }
  .fpanel .fgrp:nth-child(2){ border-top:1px solid var(--line); }
  .fsw{ width:46px; height:46px; }
  .fmir{ width:44px; height:44px; }
  .f3d__stage{ aspect-ratio:4/3; min-height:0; }
  .f3d__chip img{ width:54px; }
  .fpanel--wide{ grid-template-columns:minmax(0,1fr); }
  .fpanel--wide .fgrp:nth-child(2){ border-top:1px solid var(--line); }
}

/* ====================== GLAMOUR LIVE (camera + darkness slider) ====================== */
.glive__hintchip{ width:76px; height:76px; border-radius:50%; border:2px solid rgba(255,255,255,.32); box-shadow:inset 0 -9px 20px rgba(0,0,0,.42), 0 8px 26px rgba(0,0,0,.42); }
.sim__hint h2 span{ display:block; font-size:1rem; font-weight:600; color:rgba(255,255,255,.62); margin-top:5px; }
.gdark__range{ height:12px; border:1px solid rgba(255,255,255,.22); }
.gdark__range::-webkit-slider-thumb{ width:24px; height:24px; }
.gdark__range::-moz-range-thumb{ width:24px; height:24px; }
.gdark__scale{ display:flex; justify-content:space-between; font-size:.72rem; color:rgba(255,255,255,.55); margin-top:7px; }
/* published figures, live at the current activation (catalogue p.4 / p.8) */
.gspec{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.gspec__it{ display:flex; flex-direction:column; gap:3px; padding:9px 10px; border-radius:11px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); }
.gspec__it b{ font-size:1.02rem; font-weight:800; letter-spacing:.01em; font-variant-numeric:tabular-nums; color:#fff; }
.gspec__it small{ font-size:.62rem; letter-spacing:.06em; line-height:1.3; color:rgba(255,255,255,.55); }
.glive__more{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:18px 2px 10px; font-weight:700; }
/* colour options as lenses (matches the tint-sim swatches): glassy round
   discs, gold ring on the chosen one */
.gstrip{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:none; }
.gstrip::-webkit-scrollbar{ height:0; }
.gstrip__sw{ flex:none; width:82px; background:none; border:0; color:#fff; opacity:.72; transition:.22s var(--ease); padding:0; }
.gstrip__sw:hover, .gstrip__sw.is-active{ opacity:1; }
.gstrip__disc{ display:block; position:relative; width:52px; height:52px; border-radius:50%; margin:0 auto 6px;
  border:1px solid rgba(255,255,255,.38);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.45), inset 0 -6px 12px rgba(0,0,0,.30), 0 4px 10px rgba(0,0,0,.36);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.gstrip__disc::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(46% 34% at 33% 24%, rgba(255,255,255,.55), transparent 55%); }
.gstrip__sw.is-active .gstrip__disc{ transform:scale(1.07);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.5), inset 0 -6px 12px rgba(0,0,0,.30),
             0 0 0 2.5px rgba(255,224,170,.9), 0 0 18px 2px rgba(216,188,134,.32), 0 4px 12px rgba(0,0,0,.4); }
.gstrip__sw small{ display:block; text-align:center; font-size:.62rem; font-weight:700; letter-spacing:.01em; color:rgba(255,255,255,.78); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gstrip__sw small.gstrip__zh{ font-weight:600; font-size:.6rem; letter-spacing:.14em; color:rgba(255,255,255,.5); }
.gstrip__sw.is-active small{ color:#ffe9c4; }
.gstrip__sw.is-active small.gstrip__zh{ color:rgba(255,233,196,.75); }

@media (prefers-reduced-motion: reduce){
  .gchoose::before, .solar__corona{ animation:none; }
  .hero .eyebrow, .hero__title, .hero__sub, .hero .ela, .hero__visual, .htile,
  .heroTray__lens--b1, .heroTray__lens--b2{ animation:none; }
  .lux{ transition:none; }
  .lux__img{ transition:opacity .3s ease; transform:none; }
  .lux__stage:hover .lux__img.is-front{ transform:none; }
}
@media (max-width:520px){
  .plegend{ gap:8px; }
  .plegend__chip{ padding:7px 12px 7px 8px; }
}

/* utility */
.center{ text-align:center; }
.mt-l{ margin-top:42px; }
.hidden{ display:none !important; }


/* ====================== DRIVE — Shamir × BWT Alpine F1® Team ====================== */
/* full-bleed night-race hero */
.drv-hero{ position:relative; overflow:hidden; color:#fff; background:#070a14; }
.drv-hero__bg{ position:absolute; inset:0;
  background:url("../assets/drive/hero-night.jpg") 66% 38%/cover no-repeat,
             linear-gradient(150deg,#0e1322,#060912); }
.drv-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(94deg, rgba(4,6,12,.92) 4%, rgba(4,6,12,.6) 44%, rgba(4,6,12,.08) 84%),
             linear-gradient(0deg, rgba(4,6,12,.88) 0%, rgba(4,6,12,.1) 46%);
}
.drv-hero__streaks{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.drv-hero__streaks i{ position:absolute; top:-10%; bottom:-10%; left:-140px; width:120px; transform:skewX(-20deg); opacity:0;
  background:linear-gradient(90deg, rgba(110,150,255,0), rgba(110,150,255,.13), rgba(110,150,255,0));
  animation:drvStreak 10s linear infinite; }
.drv-hero__streaks i:nth-child(2){ width:70px; animation-delay:3.4s; animation-duration:12s;
  background:linear-gradient(90deg, rgba(232,17,45,0), rgba(232,17,45,.17), rgba(232,17,45,0)); }
.drv-hero__streaks i:nth-child(3){ width:46px; animation-delay:6.8s; animation-duration:14s;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0)); }
@keyframes drvStreak{
  0%{ transform:translateX(0) skewX(-20deg); opacity:0; }
  6%{ opacity:1; }
  46%{ transform:translateX(120vw) skewX(-20deg); opacity:0; }
  100%{ transform:translateX(120vw) skewX(-20deg); opacity:0; } }
.drv-hero__in{ position:relative; z-index:2; padding-top:calc(var(--nav-h) + clamp(46px,8vw,102px)); padding-bottom:clamp(46px,7vw,86px); }
.drv-brkt{ position:relative; display:inline-flex; align-items:center; padding:9px 16px;
  font-size:.73rem; font-weight:800; letter-spacing:.24em; color:#e6ecfa; }
.drv-brkt::before,.drv-brkt::after{ content:""; position:absolute; top:0; bottom:0; width:9px; border:1.5px solid rgba(255,255,255,.62); }
.drv-brkt::before{ left:0; border-right:0; }
.drv-brkt::after{ right:0; border-left:0; }
.drv-hero__di{ margin:clamp(20px,3vw,30px) 0 0; font-style:italic; font-weight:800; letter-spacing:.04em;
  font-size:clamp(.95rem,1.6vw,1.15rem); color:#ff3b55; }
.drv-hero__title{ margin:10px 0 0; font-size:clamp(2.05rem,5vw,3.7rem); font-weight:900; line-height:1.12; letter-spacing:.005em; max-width:14em; }
.drv-hero__sub{ margin:16px 0 0; max-width:52ch; line-height:1.8; color:rgba(226,232,246,.86); font-size:clamp(.98rem,1.4vw,1.12rem); }
.drv-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(26px,4vw,38px); }
.drv-btnghost{ background:rgba(10,13,22,.42); color:#fff; border-color:rgba(255,255,255,.42); backdrop-filter:blur(5px); }
.drv-btnghost:hover{ border-color:#fff; transform:translateY(-2px); }
.drv-hero__foot{ position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.16); background:rgba(4,6,11,.55); backdrop-filter:blur(8px); }
.drv-hero__foot::before{ content:""; position:absolute; left:0; right:0; top:-9px; height:8px; opacity:.32; pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.9) 0% 25%, rgba(255,255,255,0) 0% 50%) 0 0/8px 8px; }
.drv-hero__foot-in{ display:flex; align-items:center; justify-content:space-between; gap:10px 26px; flex-wrap:wrap; padding-top:13px; padding-bottom:13px; }
.drv-hero__role{ font-size:.64rem; font-weight:800; letter-spacing:.3em; color:rgba(226,232,246,.62); }
.drv-tele{ display:inline-flex; gap:clamp(14px,2.6vw,30px); flex-wrap:wrap; }
.drv-tele span{ display:inline-flex; align-items:center; gap:8px; font-size:.68rem; font-weight:800; letter-spacing:.12em;
  color:rgba(226,232,246,.78); font-variant-numeric:tabular-nums; white-space:nowrap; }
.drv-tele i{ width:7px; height:7px; background:var(--red); }

/* section scaffolding */
.drv-sec{ padding:clamp(52px,7vw,92px) 0 0; }
.drv-head{ max-width:780px; }
.drv-head .h-2{ margin-top:12px; }
.drv-head .lead{ margin-top:12px; }
.drv-chev{ width:26px; height:12px; color:var(--red); flex:none; }

/* 01 — partnership */
.drv-part{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(22px,4vw,54px); align-items:stretch; margin-top:clamp(26px,4vw,42px); }
@media (max-width:880px){ .drv-part{ grid-template-columns:1fr; } }
.drv-fact{ display:grid; grid-template-columns:34px 1fr; gap:4px 16px; align-items:start; padding:clamp(16px,2.4vw,24px) 2px; border-top:1px solid var(--line); }
.drv-fact:last-child{ border-bottom:1px solid var(--line); }
.drv-fact .drv-chev{ margin-top:7px; }
.drv-fact b{ font-size:clamp(1.02rem,1.5vw,1.14rem); font-weight:800; }
.drv-fact small{ grid-column:2; color:var(--ink-2); font-size:.92rem; line-height:1.7; }
.drv-lockup{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center;
  border:1px solid var(--line); border-radius:20px; background:var(--white); box-shadow:var(--shadow-sm);
  padding:clamp(30px,4vw,48px) clamp(38px,5vw,58px); min-height:250px; }
.drv-lockup::before,.drv-lockup::after{ content:""; position:absolute; top:16px; bottom:16px; width:12px; border:2px solid var(--ink); }
.drv-lockup::before{ left:16px; border-right:0; }
.drv-lockup::after{ right:16px; border-left:0; }
.drv-lockup__amp{ position:absolute; right:9%; bottom:-12%; font-family:var(--serif); font-weight:600; font-size:clamp(8.5rem,12vw,11.5rem); line-height:1; color:var(--paper-2); pointer-events:none; user-select:none; }
.drv-lockup__team{ position:relative; font-weight:900; font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:.08em; line-height:1.1; display:flex; flex-direction:column; gap:4px; }
.drv-lockup__team small{ font-size:.56em; letter-spacing:.32em; font-weight:800; color:var(--ink-3); }
.drv-lockup__x{ position:relative; width:44px; height:1px; background:var(--line-2); }
.drv-lockup__shamir{ position:relative; display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.01em; color:var(--ink); }
.drv-lockup__shamir svg{ color:var(--red); }
.drv-lockup__role{ position:relative; font-size:.62rem; font-weight:800; letter-spacing:.3em; color:var(--ink-3); }
.drv-break{ position:relative; margin:clamp(22px,3.5vw,40px) 0 0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); background:#000; }
.drv-break img{ width:100%; height:clamp(230px,36vw,430px); object-fit:cover; }
.drv-break::after{ content:""; position:absolute; inset:auto 0 0 0; height:55%; background:linear-gradient(0deg, rgba(2,3,7,.72), rgba(2,3,7,0)); }
.drv-break figcaption{ position:absolute; left:clamp(18px,3vw,30px); bottom:clamp(16px,2.6vw,26px); z-index:2;
  color:#fff; font-weight:700; font-size:clamp(.88rem,1.4vw,1.02rem); letter-spacing:.04em;
  border-left:3px solid var(--red); padding-left:14px; }

/* 02 — real-photo comparator */
#drvCmpSec{ scroll-margin-top:calc(var(--nav-h) + 8px); }
.drv-cmp{ margin-top:clamp(22px,3.5vw,38px); border-radius:var(--r-lg); color:#fff;
  background:linear-gradient(165deg,#14161f,#0a0c12 72%); box-shadow:var(--shadow-md);
  padding:clamp(14px,2.2vw,22px); }
.drv-cmp__top{ display:flex; align-items:center; justify-content:space-between; gap:10px 18px; flex-wrap:wrap; padding:4px 4px 14px; }
.drv-tabs{ display:flex; gap:8px; }
.drv-tab{ padding:9px 18px; border-radius:999px; border:1.5px solid rgba(255,255,255,.2); background:none; color:rgba(255,255,255,.78);
  font-size:.86rem; font-weight:700; letter-spacing:.03em; transition:.2s var(--ease); }
.drv-tab:hover{ border-color:rgba(255,255,255,.55); color:#fff; }
.drv-tab.is-active{ background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 4px 16px rgba(232,17,45,.4); }
.drv-seg{ display:flex; gap:2px; border:1.5px solid rgba(255,255,255,.2); border-radius:999px; padding:3px; }
.drv-seg__b{ border:0; background:none; color:rgba(255,255,255,.72); padding:7px 15px; border-radius:999px; font-size:.83rem; font-weight:700; transition:.2s var(--ease); white-space:nowrap; }
.drv-seg__b.is-active{ background:#fff; color:#0d0f16; }
.drv-cmp__stage{ position:relative; aspect-ratio:3/2; border-radius:14px; overflow:hidden; cursor:pointer; background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.drv-cmp__stage:focus-visible{ outline:2.5px solid var(--red); outline-offset:3px; }
.drv-cmp__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.drv-cmp__img--lens{ transition:opacity .45s var(--ease); }
.drv-cmp__tag{ position:absolute; left:14px; bottom:12px; z-index:2; font-size:.76rem; font-weight:700; letter-spacing:.05em;
  color:#fff; background:rgba(8,9,14,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:7px 14px; pointer-events:none; }
.drv-cmp__hint{ position:absolute; right:14px; top:12px; z-index:2; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  color:rgba(255,255,255,.85); background:rgba(8,9,14,.55); backdrop-filter:blur(6px); border-radius:999px; padding:6px 12px; pointer-events:none; }
.drv-cmp__bar{ display:flex; align-items:center; gap:12px 22px; flex-wrap:wrap; padding:14px 6px 6px; }
.drv-cmp__lbl{ font-size:.66rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.drv-cmp__chips{ display:flex; gap:clamp(12px,2.6vw,20px); }
.drv-chip{ display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:0; color:#fff; padding:2px; opacity:.7; transition:.2s var(--ease); }
.drv-chip:hover{ opacity:1; }
.drv-chip__lens{ position:relative; display:block; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.45), inset 0 -6px 12px rgba(0,0,0,.34), 0 4px 12px rgba(0,0,0,.4);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
.drv-chip__lens::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(46% 34% at 32% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); }
.drv-chip small{ font-size:.74rem; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.72); }
.drv-chip.is-active{ opacity:1; }
.drv-chip.is-active .drv-chip__lens{ transform:scale(1.07);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.5), inset 0 -6px 12px rgba(0,0,0,.34), 0 0 0 2.5px var(--red), 0 5px 14px rgba(0,0,0,.45); }
.drv-chip.is-active small{ color:#fff; }

/* live camera band */
.drv-live{ position:relative; overflow:hidden; margin-top:clamp(20px,3vw,32px); border-radius:var(--r-lg); color:#fff;
  background:linear-gradient(115deg, var(--red) 4%, var(--red-deep) 82%);
  box-shadow:0 18px 44px rgba(232,17,45,.28), var(--shadow-sm);
  display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap;
  padding:clamp(24px,4vw,42px) clamp(22px,4vw,46px); }
.drv-live::after{ content:""; position:absolute; top:-30%; bottom:-30%; right:-70px; width:min(44%,360px); transform:skewX(-16deg); opacity:.5; pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.16) 0% 25%, rgba(255,255,255,0) 0% 50%) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 45%); mask-image:linear-gradient(90deg, transparent, #000 45%); }
.drv-live__txt{ position:relative; z-index:1; max-width:640px; }
.drv-live__cap{ display:inline-flex; align-items:center; gap:9px; font-size:.7rem; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.88); }
.drv-live__cap i{ width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.9); animation:drvBlink 1.8s ease-in-out infinite; }
@keyframes drvBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.drv-live h2{ margin:12px 0 0; font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:900; letter-spacing:.01em; }
.drv-live p{ margin:10px 0 0; line-height:1.75; color:rgba(255,255,255,.92); font-size:.95rem; }
.drv-live__btn{ position:relative; z-index:1; background:#fff; color:var(--red); font-weight:700; box-shadow:0 10px 26px rgba(120,6,20,.35); }
.drv-live__btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(120,6,20,.42); }

/* 03 — SUN / MOON duo */
.drv-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,24px); margin-top:clamp(26px,4vw,42px); }
@media (max-width:820px){ .drv-duo{ grid-template-columns:1fr; } }
.drv-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; border-radius:var(--r-lg); padding:clamp(24px,3.4vw,38px); }
.drv-card--sun{ color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  background:radial-gradient(90% 70% at 88% -18%, rgba(244,178,74,.4), rgba(244,178,74,0) 60%),
             linear-gradient(165deg, #fffdf9, #faf3e6 70%); }
.drv-card--moon{ color:#fff; box-shadow:var(--shadow-md);
  background:radial-gradient(90% 70% at 88% -18%, rgba(96,130,235,.34), rgba(96,130,235,0) 62%),
             linear-gradient(165deg, #131a30, #080b16 74%); }
.drv-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.drv-ic{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; }
.drv-card--sun .drv-ic{ border:1.5px solid rgba(180,120,30,.4); color:#b06a10; background:rgba(255,255,255,.6); }
.drv-card--moon .drv-ic{ border:1.5px solid rgba(160,185,255,.4); color:#aecbff; background:rgba(255,255,255,.05); }
.drv-ic svg{ width:24px; height:24px; }
.drv-tags{ display:flex; gap:7px; flex-wrap:wrap; }
.drv-tags span{ border:1.5px solid currentColor; border-radius:999px; padding:4px 12px; font-size:.72rem; font-weight:800; letter-spacing:.05em; opacity:.72; }
.drv-card__name{ margin:clamp(18px,3vw,28px) 0 0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  font-size:clamp(2.3rem,4.4vw,3.2rem); font-weight:900; letter-spacing:.06em; line-height:1; }
.drv-card__name small{ font-size:.98rem; font-weight:700; letter-spacing:.03em; opacity:.82; }
.drv-card p{ margin:14px 0 0; line-height:1.8; font-size:.95rem; }
.drv-card--sun p{ color:var(--ink-2); }
.drv-card--moon p{ color:rgba(230,236,250,.85); }
.drv-card ul{ margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.drv-card li{ position:relative; padding-left:24px; line-height:1.65; font-size:.92rem; font-weight:600; }
.drv-card li::before{ content:""; position:absolute; left:2px; top:.5em; width:8px; height:8px; transform:rotate(45deg); background:var(--red); }
.drv-card--moon li::before{ background:#ff3b55; }
.drv-dots{ display:flex; align-items:center; gap:clamp(12px,2vw,18px); flex-wrap:wrap; margin-top:auto; padding-top:clamp(20px,3vw,28px); }
.drv-dot{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.72rem; font-weight:700; }
.drv-dot i{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(0,0,0,.14);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.5), inset 0 -5px 9px rgba(0,0,0,.28), 0 3px 8px rgba(20,20,25,.18); }
.drv-card--moon .drv-dot i{ border-color:rgba(255,255,255,.32); }
.drv-dot--clear{ background:linear-gradient(165deg, rgba(255,255,255,.18), rgba(190,214,255,.08) 55%, rgba(120,160,255,.18)); }
.drv-dots > small{ font-size:.76rem; opacity:.72; font-weight:600; margin-left:4px; }

/* 04 — telemetry board */
.drv-board{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:20px; overflow:hidden; margin-top:clamp(26px,4vw,42px); box-shadow:var(--shadow-sm); }
@media (max-width:940px){ .drv-board{ grid-template-columns:repeat(2,1fr); } }
.drv-stat{ background:var(--white); padding:clamp(18px,2.6vw,30px) clamp(16px,2.2vw,28px); }
.drv-stat b{ display:block; margin-top:12px; font-size:clamp(1.55rem,2.4vw,2.05rem); font-weight:900; color:var(--red);
  letter-spacing:-.01em; line-height:1.12; font-variant-numeric:tabular-nums; }
.drv-stat b.drv-stat--txt{ font-size:clamp(1.2rem,2vw,1.65rem); }
.drv-stat span{ display:block; margin-top:9px; font-weight:800; font-size:.95rem; letter-spacing:.01em; }
.drv-stat small{ display:block; margin-top:5px; color:var(--ink-3); font-size:.84rem; line-height:1.6; }
.drv-src{ margin:14px 4px 0; font-size:.8rem; color:var(--ink-3); }

/* 05 — five benefits */
.drv-benlist{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(18px,2.4vw,28px); margin-top:clamp(26px,4vw,40px); }
@media (max-width:1080px){ .drv-benlist{ grid-template-columns:repeat(2,1fr); gap:22px; } }
@media (max-width:560px){ .drv-benlist{ grid-template-columns:1fr; gap:0; } .drv-ben{ padding:16px 0 18px; } }
.drv-ben{ border-top:2px solid var(--ink); padding-top:14px; }
.drv-ben i{ display:block; font-style:normal; font-family:var(--serif); font-weight:700; font-size:.88rem; letter-spacing:.12em; color:var(--red); font-variant-numeric:tabular-nums; }
.drv-ben b{ display:block; margin-top:9px; font-size:1rem; letter-spacing:.01em; }
.drv-ben small{ display:block; margin-top:6px; color:var(--ink-2); line-height:1.65; font-size:.86rem; }

/* finish line */
.drv-fin{ padding:clamp(64px,9vw,110px) 0 clamp(70px,9vw,116px); text-align:center; }
.drv-fin__check{ display:block; width:112px; height:8px; margin:0 auto 28px;
  background:repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%) 0 0/8px 8px; opacity:.9; }
.drv-fin .lead{ max-width:52ch; margin:12px auto 0; }
.drv-fin__btns{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:28px; }

@media (max-width:640px){
  .drv-cmp__stage{ aspect-ratio:4/3; }
  .drv-cmp__top{ flex-direction:column; align-items:stretch; }
  .drv-tabs .drv-tab{ flex:1; }
  .drv-seg__b{ flex:1; }
  .drv-cmp__bar{ justify-content:center; }
  .drv-hero__foot-in{ justify-content:center; text-align:center; }
  .drv-tele{ justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .drv-hero__streaks i{ animation:none; opacity:0; }
  .drv-live__cap i{ animation:none; }
}


/* ---- 2D photo studio: the real product shot, lens tinted live ---- */
.f2d__stage{ display:flex; align-items:center; justify-content:center; padding:clamp(18px,3vw,40px); }
.f2d__canvas{ width:100%; height:auto; max-height:100%; object-fit:contain; display:block;
  mix-blend-mode:multiply; }
.fstages{ position:relative; }