/* =====================================================================
   MicroAmino — Peptide Science
   Design system: deep navy + metallic gold, 3D depth, fully responsive.
   ===================================================================== */

/* ------------------------------------------------------------- Fonts */
@font-face{font-family:'Fraunces';src:local('Fraunces');font-display:swap}
/* Google fonts loaded via <link> in each page; graceful websafe fallback below. */

/* ------------------------------------------------------------- Tokens */
:root{
  /* navy scale */
  --navy-950:#060d18; --navy-900:#0a1628; --navy-850:#0d1b2a; --navy-800:#101f33;
  --navy-700:#14263f; --navy-600:#1b3350; --navy-500:#24405f; --navy-400:#2f4d6e;
  /* gold scale */
  --gold-deep:#9a7b1e; --gold-base:#c9a227; --gold:#d4af37; --gold-bright:#e8c75a; --gold-pale:#f4e3a1;
  /* text */
  --text-primary:#f2f5fa; --text-secondary:#c3ccd9; --text-muted:#8a97a8;
  --text-inverse:#0a1628; --text-gold:#e8c75a;
  /* status */
  --success:#3fae7a; --success-bg:rgba(63,174,122,.12);
  --warn:#d9a441; --warn-bg:rgba(217,164,65,.12);
  --error:#e0554e; --error-bg:rgba(224,85,78,.12);
  --info:#4a90d9; --info-bg:rgba(74,144,217,.12);
  --new:#4fc48c; --new-bg:rgba(79,196,140,.13); --new-border:rgba(79,196,140,.42);
  /* gradients */
  --grad-gold:linear-gradient(135deg,#f4e3a1 0%,#e8c75a 22%,#d4af37 50%,#c9a227 74%,#9a7b1e 100%);
  --grad-gold-metal:linear-gradient(180deg,#f4e3a1 0%,#d4af37 45%,#b8901f 55%,#e8c75a 100%);
  --grad-gold-sheen:linear-gradient(115deg,transparent 35%,rgba(244,227,161,.55) 50%,transparent 65%);
  --grad-navy-depth:radial-gradient(120% 120% at 50% 0%,#14263f 0%,#0a1628 55%,#060d18 100%);
  /* borders / glass */
  --border-subtle:rgba(255,255,255,.06); --border-default:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.16); --border-gold:rgba(212,175,55,.45);
  --glass-fill:rgba(16,31,51,.55); --glass-fill-strong:rgba(10,22,40,.72);
  --glass-blur:blur(14px) saturate(140%);
  /* shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.45);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --shadow-gold-glow:0 0 0 1px rgba(212,175,55,.35),0 8px 30px rgba(201,162,39,.28);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.08);
  /* type */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.25rem; --fs-lg:1.563rem;
  --fs-xl:1.953rem; --fs-2xl:2.441rem; --fs-3xl:3.052rem; --fs-hero:clamp(2.5rem,6vw,4.7rem);
  --ls-tight:-0.02em; --ls-wide:.08em; --ls-caps:.14em;
  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --sp-12:48px; --sp-16:64px; --sp-24:96px;
  --section-pad:clamp(48px,8vw,96px); --container:1200px;
  /* radius */
  --r-sm:8px; --r-md:10px; --r-lg:16px; --r-xl:18px; --r-pill:999px;
  /* motion */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:400ms;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-standard:cubic-bezier(.2,0,0,1);
}

/* ------------------------------------------------------------- Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:1.65;
  color:var(--text-primary);background:var(--navy-900);
  background-image:var(--grad-navy-depth);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--text-gold);text-decoration:none}
a:hover{color:var(--gold-bright)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:var(--ls-tight);margin:0 0 .5em}
h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-xl)} h4{font-size:var(--fs-lg)}
p{margin:0 0 1em;max-width:70ch}
::selection{background:rgba(212,175,55,.3);color:#fff}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px;border-radius:inherit}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--text-inverse);padding:10px 16px;border-radius:var(--r-md);z-index:200;font-weight:600}
.skip-link:focus{left:8px}

/* ------------------------------------------------------------- Layout */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.section{padding-block:var(--section-pad)}
.section--tight{padding-block:clamp(32px,5vw,56px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-gold);margin-bottom:14px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--grad-gold)}
.lead{font-size:var(--fs-md);color:var(--text-secondary);max-width:60ch}
.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono)}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:goldPan 6s linear infinite}
@keyframes goldPan{to{background-position:200% 0}}
.center{text-align:center} .center .lead,.center p{margin-inline:auto}
.grid{display:grid;gap:clamp(16px,2.5vw,28px)}
.section-head{max-width:64ch}
.section-head.center{margin-inline:auto}

/* ------------------------------------------------------------- Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:var(--fs-base);min-height:48px;
  padding:14px 26px;border-radius:var(--r-md);border:1px solid transparent;position:relative;
  overflow:hidden;transition:transform var(--dur-fast) var(--ease-standard),
  box-shadow var(--dur-base),filter var(--dur-fast);text-align:center;line-height:1.1}
.btn--primary{background:var(--grad-gold-metal);color:var(--text-inverse);
  box-shadow:var(--shadow-gold-glow),var(--shadow-inset-top);border-color:rgba(154,123,30,.6);font-weight:600}
.btn--primary:hover{filter:brightness(1.06);transform:translateY(-1px);color:var(--text-inverse)}
.btn--primary:active{transform:translateY(0);filter:brightness(.96)}
.btn--primary::after{content:"";position:absolute;inset:0;background:var(--grad-gold-sheen);
  background-size:250% 100%;background-position:150% 0;transition:background-position .7s var(--ease-out)}
.btn--primary:hover::after{background-position:-120% 0}
.btn--ghost{background:transparent;color:var(--text-gold);border-color:var(--border-gold)}
.btn--ghost:hover{background:rgba(212,175,55,.08);border-color:var(--gold);color:var(--gold-bright)}
.btn--lg{min-height:54px;padding:16px 32px;font-size:var(--fs-md)}
.btn--sm{min-height:40px;padding:9px 16px;font-size:var(--fs-sm)}
.btn--block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ------------------------------------------------------------- Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wide);white-space:nowrap}
.badge--gold{background:rgba(212,175,55,.14);border:1px solid var(--border-gold);color:var(--gold-bright)}
.badge--neutral{background:var(--navy-600);border:1px solid var(--border-default);color:var(--text-secondary)}
.badge--success{background:var(--success-bg);color:var(--success)}
.badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--new{background:var(--new-bg);border:1px solid var(--new-border);color:var(--new)}

/* "Just added" flag. Sits top-RIGHT so it never collides with the gold
   .card__form-tag at top-left, and reads as a different class of information
   from the gold cGMP / Stasis ION badges. */
.card__new-tag{position:absolute;top:10px;right:10px;z-index:3;
  background:var(--new-bg);border:1px solid var(--new-border);color:var(--new);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------------------------------------------------- New-additions band */
.newband{position:relative;border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);
  background:linear-gradient(135deg,rgba(79,196,140,.07) 0%,rgba(16,31,51,.55) 55%);
  border:1px solid var(--new-border)}
.newband__head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;flex-wrap:wrap;margin-bottom:24px}
.newband__head h2{margin:0}
.newband .eyebrow{color:var(--new)}
.newband .eyebrow::before{background:var(--new)}
.newband__grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.newband__note{margin:16px 0 0;color:var(--text-secondary);font-size:var(--fs-sm)}

/* One new product reads as a feature, not a lonely card in a wide band.
   Two or more fall back to .newband__grid. */
.newband__solo{display:grid;gap:clamp(20px,4vw,40px);align-items:center;
  grid-template-columns:minmax(0,240px) minmax(0,1fr)}
.newband__solo figure{margin:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--navy-800);border:1px solid var(--border-default)}
.newband__solo img{display:block;width:100%;height:auto}
.newband__solo h3{font-family:var(--font-display);font-size:var(--fs-lg);margin:0 0 6px}
.newband__solo .meta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.newband__solo p{color:var(--text-secondary);max-width:60ch;margin:0 0 16px}
@media (max-width:760px){ .newband__solo{grid-template-columns:1fr} }

/* ------------------------------------------------------------- Glass / cards */
.glass{background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-default);box-shadow:var(--shadow-inset-top),var(--shadow-md)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--navy-700)} }
.panel{background:var(--navy-800);border:1px solid var(--border-default);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.rim{position:relative}
.rim::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,var(--gold-pale),rgba(212,175,55,0) 40%,rgba(212,175,55,0) 60%,var(--gold-base));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}

/* ------------------------------------------------------------- Nav */
.nav{position:sticky;top:0;z-index:100;height:76px;transition:height var(--dur-slow)}
.nav__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav.glass{border-left:0;border-right:0;border-top:0}
.nav.is-scrolled{height:66px;background:var(--glass-fill-strong);border-bottom:1px solid var(--border-gold)}
.nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;
  font-size:1.35rem;color:var(--text-primary);letter-spacing:var(--ls-tight)}
.nav__brand img{height:34px;width:auto}
.nav__mark{flex:none}
.nav__wm{font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:var(--ls-tight)}
.nav__brand b{color:var(--text-primary);font-weight:600} .nav__brand .nav__wm span{color:var(--text-gold)}
.nav__links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
@media(min-width:861px) and (max-width:1180px){.nav__links{gap:16px}.nav__links a{font-size:.82rem}}
.nav__links a{color:var(--text-secondary);font-size:var(--fs-sm);font-weight:500;position:relative;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad-gold);transition:width var(--dur-base) var(--ease-out)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--text-primary)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%}
.nav__right{display:flex;align-items:center;gap:12px}
.cart-btn{position:relative}
.cart-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--grad-gold-metal);color:var(--text-inverse);font-size:11px;font-weight:700;display:none;
  align-items:center;justify-content:center;line-height:1}
.cart-count.is-visible{display:inline-flex}
.nav__toggle{display:none;background:none;border:1px solid var(--border-default);border-radius:var(--r-sm);
  width:44px;height:44px;color:var(--text-primary);cursor:pointer;font-size:20px}
@media(max-width:860px){
  .nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--navy-850);box-shadow:var(--shadow-lg);
    padding:8px 24px 20px;border-bottom:1px solid var(--border-gold);transform:translateY(-8px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--dur-base),transform var(--dur-base),visibility var(--dur-base);height:auto}
  .nav__links.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .nav__links a{width:100%;padding:14px 0;border-bottom:1px solid var(--border-subtle);font-size:var(--fs-base)}
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center}
}

/* ------------------------------------------------------------- Hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;perspective:1200px;
  transform-style:preserve-3d;overflow:hidden;padding-block:clamp(48px,9vw,110px)}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg .molecule{position:absolute;top:50%;left:50%;width:min(760px,90vw);opacity:.5;
  transform:translate(-50%,-50%) translateZ(-120px) scale(1.12)}
.hero__glow{position:absolute;width:60vmax;height:60vmax;top:-20vmax;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(201,162,39,.16),transparent 62%);filter:blur(10px)}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;width:100%}
.hero h1{font-size:var(--fs-hero);margin-bottom:.35em}
.hero .lead{margin-bottom:28px}
.hero__spec{transform:translateZ(60px)}
.spec-card{border-radius:var(--r-xl);padding:24px;display:grid;gap:16px;animation:float 6s var(--ease-inout) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.spec-card__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}
.spec-card__row:last-child{border-bottom:0;padding-bottom:0}
.spec-card__k{font-size:var(--fs-sm);color:var(--text-muted)}
.spec-card__v{font-family:var(--font-mono);color:var(--text-gold);font-size:var(--fs-sm)}
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
.trust-strip span{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-secondary);font-family:var(--font-mono)}
.trust-strip svg{width:16px;height:16px;color:var(--gold)}
@media(max-width:860px){.hero__inner{grid-template-columns:1fr}.hero__spec{order:-1;transform:none;max-width:420px}
  /* the hero art is .hero__media (there is no .hero__spec in the markup) — pull it
     above the copy so it is actually visible above the fold on phones */
  .hero__media{order:-1;max-width:420px;margin-inline:auto}}

/* hero video frame */
.hero__media{transform:translateZ(50px)}
.hero__media .frame{position:relative;border-radius:20px;padding:6px;
  background:linear-gradient(145deg,var(--gold-pale),rgba(212,175,55,.35) 45%,rgba(154,123,30,.55));
  box-shadow:var(--shadow-lg),0 0 70px rgba(201,162,39,.28)}
.hero__media video{display:block;width:100%;border-radius:15px;background:#eef1f5}
.hero__media .cap{text-align:center;margin-top:14px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted)}

/* brand banner (light) */
.brand-banner{background:#f3f5f8;border-top:1px solid var(--border-gold);border-bottom:1px solid var(--border-gold)}
.brand-banner .container{padding-block:clamp(26px,5vw,44px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.brand-banner img{width:min(520px,82%);height:auto}
.brand-banner .tag{display:flex;align-items:center;gap:14px;text-transform:uppercase;letter-spacing:var(--ls-caps);
  font-size:var(--fs-sm);font-weight:600;color:#5a6b7d}
.brand-banner .tag::before,.brand-banner .tag::after{content:"";width:32px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}

/* ------------------------------------------------------------- Category tiles */
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cat-tile{position:relative;border-radius:var(--r-lg);padding:24px;min-height:150px;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--navy-700);border:1px solid var(--border-default);overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base);color:var(--text-primary)}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--text-primary)}
.cat-tile__art{position:absolute;inset:0;opacity:.9}
.cat-tile__motif{position:absolute;top:14px;right:14px;z-index:2;opacity:.5;
  transition:opacity var(--dur-base),transform var(--dur-base) var(--ease-out)}
.cat-tile__motif svg{width:64px;height:64px}
.cat-tile:hover .cat-tile__motif{opacity:.95;transform:translateY(-2px) scale(1.04)}
@media(max-width:520px){.cat-tile__motif svg{width:48px;height:48px}}
.cat-tile__label{position:relative;z-index:2;font-family:var(--font-display);font-size:var(--fs-lg)}
.cat-tile__count{position:relative;z-index:2;font-size:var(--fs-sm);color:var(--text-muted);font-family:var(--font-mono)}

/* ------------------------------------------------------------- Product cards */
.product-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{border-radius:var(--r-lg);background:var(--navy-700);border:1px solid var(--border-default);
  overflow:hidden;transform-style:preserve-3d;transition:transform .18s ease,box-shadow .18s;
  box-shadow:var(--shadow-md);display:flex;flex-direction:column;will-change:transform}
.card:hover{box-shadow:var(--shadow-lg)}
.card__media{position:relative;aspect-ratio:4/3;background:linear-gradient(180deg,#ffffff 0%,#e9edf2 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--border-default)}
.card__media svg{width:78%;height:auto;transform:translateZ(40px);filter:drop-shadow(0 10px 16px rgba(20,40,60,.22))}
.product-photo{display:block;max-width:100%;height:auto}
/* Real product renders: the photo IS the media panel — it carries its own studio
   backdrop, so it fills edge-to-edge rather than floating on a plate. Portrait
   3:4 matches the 129 vial/nasal/cartridge renders exactly (zero crop); the 11
   landscape pen renders letterbox on their own white instead of being cut. */
.card__media:has(.product-photo){aspect-ratio:3/4;background:#fff;padding:0}
.card__media .product-photo{width:100%;height:100%;object-fit:cover;object-position:center;
  max-width:none;max-height:none;border-radius:0;box-shadow:none;transform:none}
.card__media .product-photo--wide{object-fit:contain;background:#fff}
.cart-line .product-photo{width:48px;border-radius:4px;box-shadow:0 2px 5px rgba(20,40,60,.18)}
/* Sits on top of the white studio photo — needs its own solid backing to stay
   legible in BOTH themes (was ~1.6:1 gold-on-white in dark). */
.card__form-tag{position:absolute;top:10px;left:10px;z-index:3;
  background:rgba(10,22,40,.92);color:var(--gold-pale);border:1px solid rgba(201,162,39,.55);
  text-shadow:none}
.card__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__sku{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.card__title{font-family:var(--font-display);font-size:1.15rem;line-height:1.2;margin:0}
.card__meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:var(--fs-xs);color:var(--text-muted);font-family:var(--font-mono)}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px}
.card__price{font-size:var(--fs-lg);color:var(--gold-bright);font-weight:600;font-family:var(--font-body)}
.card__price small{font-size:var(--fs-xs);color:var(--text-muted);font-weight:400;display:block;line-height:1}

/* ------------------------------------------------------------- Filters bar */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:28px}
.filters .field{margin:0}
.search-input{min-width:200px;flex:1}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--border-default);background:var(--navy-700);
  color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;transition:all var(--dur-fast);white-space:nowrap}
.chip:hover{border-color:var(--border-gold);color:var(--text-primary)}
.chip.is-active{background:rgba(212,175,55,.14);border-color:var(--gold);color:var(--gold-bright);font-weight:600}

/* ------------------------------------------------------------- Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label,.form-label{font-weight:600;font-size:var(--fs-sm);color:var(--text-secondary)}
.field .req{color:var(--gold)}
input,select,textarea{width:100%;background:var(--navy-800);border:1px solid var(--border-strong);
  border-radius:var(--r-md);padding:12px 14px;color:var(--text-primary);font-family:var(--font-body);
  font-size:var(--fs-base);min-height:48px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}
textarea{min-height:110px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);background:var(--navy-700);
  box-shadow:0 0 0 3px rgba(212,175,55,.25)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--error)}
.field__error{color:var(--error);font-size:var(--fs-sm);min-height:0}
.field__hint{color:var(--text-muted);font-size:var(--fs-sm)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:600px){.grid-2{grid-template-columns:1fr}}
/* custom checkbox */
.check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer;
  font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.5;padding:4px 0}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{width:22px;height:22px;border-radius:6px;border:1px solid var(--border-strong);background:var(--navy-800);
  display:grid;place-items:center;transition:all var(--dur-fast);margin-top:2px}
.check__box svg{width:14px;height:14px;opacity:0;transform:scale(.6);transition:all var(--dur-fast);color:var(--text-inverse)}
.check input:checked+.check__box{background:var(--grad-gold-metal);border-color:var(--gold)}
.check input:checked+.check__box svg{opacity:1;transform:scale(1)}
.check input:focus-visible+.check__box{outline:3px solid var(--gold-bright);outline-offset:2px}

/* ------------------------------------------------------------- Payment chips */
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media(max-width:420px){.pay-grid{grid-template-columns:1fr 1fr;gap:8px}
  .pay-chip{padding:10px;gap:8px}.pay-chip__dot{width:22px;height:22px}}
.pay-chip{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);cursor:pointer;
  background:var(--navy-700);border:1px solid var(--border-default);transition:all var(--dur-fast);position:relative}
.pay-chip:hover{border-color:var(--border-gold)}
.pay-chip input{position:absolute;opacity:0}
.pay-chip__dot{width:26px;height:26px;border-radius:6px;flex:none;display:grid;place-items:center;font-weight:700;color:#fff;font-size:12px}
.pay-chip__name{font-size:var(--fs-sm);font-weight:500;line-height:1.2;display:block;
  overflow-wrap:anywhere;hyphens:auto}
.pay-chip__type{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);display:block;
  overflow-wrap:anywhere}
.pay-chip>span:last-child{min-width:0;flex:1}
.pay-chip.is-selected{border-color:var(--gold);box-shadow:var(--shadow-gold-glow)}
.pay-chip.is-selected::after{content:"✓";position:absolute;top:8px;right:10px;color:var(--gold-bright);font-weight:700}

/* ------------------------------------------------------------- Modal / gate */
.modal-backdrop{position:fixed;inset:0;z-index:300;background:rgba(6,13,24,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.is-open{display:flex}
.modal{max-width:520px;width:100%;border-radius:var(--r-xl);padding:clamp(24px,4vw,36px);
  background:var(--glass-fill-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-default);box-shadow:var(--shadow-lg);animation:modalIn .2s var(--ease-out);max-height:90vh;overflow:auto}
.modal--wide{max-width:720px}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.modal__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(212,175,55,.12);border:1px solid var(--border-gold);color:var(--gold-bright)}
.modal__icon svg{width:26px;height:26px}
.gate-body{font-size:var(--fs-sm);color:var(--text-secondary);max-height:38vh;overflow:auto;margin:0 -6px 18px;
  padding:0 6px;white-space:pre-line;line-height:1.6}

/* ------------------------------------------------------------- Steps / how it works */
.steps{counter-reset:step;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{position:relative;padding:26px 22px;border-radius:var(--r-lg);background:var(--navy-800);border:1px solid var(--border-default)}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-mono);font-size:var(--fs-md);
  color:var(--gold-bright);display:block;margin-bottom:10px}
.step h4{margin-bottom:6px}

/* ------------------------------------------------------------- Feature / quality list */
.feature-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feature{padding:24px;border-radius:var(--r-lg);background:var(--navy-800);border:1px solid var(--border-default)}
.feature__ico{width:44px;height:44px;border-radius:12px;background:rgba(212,175,55,.1);border:1px solid var(--border-gold);
  color:var(--gold-bright);display:grid;place-items:center;margin-bottom:14px}
.feature__ico svg{width:22px;height:22px}

/* ------------------------------------------------------------- RUO band */
.ruo-band{background:var(--navy-950);border-top:1px solid var(--border-gold);border-bottom:1px solid var(--border-subtle)}
.ruo-band .container{display:flex;gap:16px;align-items:flex-start;padding-block:20px}
.ruo-band svg{width:22px;height:22px;color:var(--gold);flex:none;margin-top:2px}
.ruo-band p{font-size:var(--fs-sm);color:var(--text-muted);margin:0;max-width:none}

/* ------------------------------------------------------------- Tables (CRM / pricing) */
.table-wrap{overflow-x:auto;border:1px solid var(--border-default);border-radius:var(--r-lg)}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:620px}
table.data th,table.data td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-subtle);white-space:nowrap}
table.data th{background:var(--navy-800);color:var(--text-secondary);font-weight:600;position:sticky;top:0}
table.data tr:hover td{background:var(--navy-800)}
.status-pill{padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;text-transform:capitalize}

/* ------------------------------------------------- Intro offer / partner bands */
.offer-band{background:linear-gradient(135deg,rgba(201,162,39,.14),rgba(13,27,42,.5) 55%);
  border-block:1px solid var(--border-gold)}
.offer-band .container{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  padding-block:var(--sp-8)}
.offer-band__amt{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.offer-band__amt small{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
  -webkit-text-fill-color:var(--text-muted);margin-top:6px}
.offer-band h2{font-size:var(--fs-xl);margin:0 0 6px}
.offer-band p{margin:0;max-width:70ch}
@media(max-width:860px){
  .offer-band .container{grid-template-columns:1fr;gap:16px;text-align:left}
  .offer-band__amt{font-size:2.6rem}
}
/* Form + sidebar layout (contact, clinics) — must collapse on phones */
.form-aside{display:grid;grid-template-columns:1fr 340px;gap:36px;align-items:start}
@media(max-width:900px){.form-aside{grid-template-columns:1fr;gap:24px}}
.partner-card{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start}
.partner-card__mark--logo{background:#fff!important;border-color:var(--border-default)!important;padding:18px!important}
.partner-card__mark--logo img{width:100%;height:auto;max-height:76px;object-fit:contain}
.partner-card__mark{display:grid;place-items:center;min-height:120px;border-radius:var(--r-lg);
  border:1px solid var(--border-gold);background:linear-gradient(160deg,var(--navy-800),var(--navy-900));
  font-family:var(--font-display);font-size:1.5rem;line-height:1.1;text-align:center;padding:14px}
@media(max-width:700px){.partner-card{grid-template-columns:1fr}}

/* ------------------------------------------------------------- Footer */
.footer{background:var(--navy-950);border-top:1px solid var(--border-gold);margin-top:var(--sp-16)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px;padding-block:var(--sp-16) var(--sp-8)}
@media(max-width:1100px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}}
.footer__brand .nav__brand{margin-bottom:14px}
.footer h5{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--text-gold);margin:0 0 14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer ul a{color:var(--text-muted);font-size:var(--fs-sm)}
.footer ul a:hover{color:var(--text-gold)}
.footer__bottom{border-top:1px solid var(--border-subtle);padding-block:24px;display:flex;flex-wrap:wrap;gap:16px;
  justify-content:space-between;align-items:center;font-size:var(--fs-xs);color:var(--text-muted)}
.footer__disclaimer{max-width:640px;line-height:1.5}
@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------- Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

/* ------------------------------------------------------------- Helpers */
.stack>*+*{margin-top:var(--sp-4)}
.hr{height:1px;background:var(--border-subtle);border:0;margin-block:var(--sp-8)}
.notice{padding:14px 16px;border-radius:var(--r-md);background:var(--info-bg);border:1px solid rgba(74,144,217,.3);
  color:var(--text-secondary);font-size:var(--fs-sm);display:flex;gap:10px}
.notice--warn{background:var(--warn-bg);border-color:rgba(217,164,65,.35)}
.notice--gold{background:rgba(212,175,55,.08);border-color:var(--border-gold)}
.empty{padding:48px 24px;text-align:center;color:var(--text-muted)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:400;
  background:var(--navy-700);border:1px solid var(--border-gold);color:var(--text-primary);padding:14px 22px;
  border-radius:var(--r-pill);box-shadow:var(--shadow-lg);opacity:0;transition:all var(--dur-base) var(--ease-out);pointer-events:none;font-size:var(--fs-sm)}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ------------------------------------------------------------- Reduced motion / touch */
@media (hover:none),(max-width:860px){
  .card{transform:none!important}
  .hero__spec{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .spec-card{animation:none}
  .gold-text{animation:none}
}

/* ============================ LIGHT THEME ============================ */
:root[data-theme="light"]{
  --navy-950:#e6ecf3; --navy-900:#f3f6f9; --navy-850:#eef2f6; --navy-800:#ffffff;
  --navy-700:#ffffff; --navy-600:#eff3f7; --navy-500:#d3dce6; --navy-400:#bcc8d6;
  --grad-navy-depth:radial-gradient(120% 120% at 50% 0%,#ffffff 0%,#eef2f7 55%,#e2e8f1 100%);
  --text-primary:#0c1a33; --text-secondary:#33465c; --text-muted:#5f7186;
  --text-gold:#8a6d15;
  --border-subtle:rgba(12,26,51,.07); --border-default:rgba(12,26,51,.13);
  --border-strong:rgba(12,26,51,.20); --border-gold:rgba(154,123,30,.5);
  --glass-fill:rgba(255,255,255,.72); --glass-fill-strong:rgba(255,255,255,.9);
  --shadow-sm:0 1px 2px rgba(20,40,70,.10); --shadow-md:0 6px 18px rgba(20,40,70,.12);
  --shadow-lg:0 18px 48px rgba(20,40,70,.16);
  --shadow-gold-glow:0 0 0 1px rgba(154,123,30,.28),0 8px 24px rgba(201,162,39,.22);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.6);
}
:root[data-theme="light"] .gold-text{background:linear-gradient(135deg,#b8901f,#9a7b1e 40%,#c9a227 70%,#8a6d15);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .nav.glass,:root[data-theme="light"] .nav.is-scrolled{background:rgba(255,255,255,.82)}
:root[data-theme="light"] .card{box-shadow:var(--shadow-md)}
:root[data-theme="light"] .ruo-band,:root[data-theme="light"] .footer{background:#eaeff4}
:root[data-theme="light"] .card__price,:root[data-theme="light"] .badge--gold{color:#8a6d15}
:root[data-theme="light"] .hero__glow{opacity:.45}
:root[data-theme="light"] .molecule{opacity:.12}
:root[data-theme="light"] .toast{background:#fff}
:root[data-theme="light"] .qty button{background:#eef2f7}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{background:#fff}

/* theme toggle */
.theme-toggle{width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--border-default);
  background:transparent;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;transition:all var(--dur-fast);flex:none}
.theme-toggle:hover{border-color:var(--border-gold);color:var(--text-gold)}
.theme-toggle svg{width:18px;height:18px}

/* ------------------------------------------------------------- Split + stats */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,44px);align-items:center}
@media(max-width:768px){.split{grid-template-columns:1fr}}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:var(--navy-800);border:1px solid var(--border-default);border-radius:var(--r-lg);padding:16px 18px}
.stat b{display:block;font-family:var(--font-display);font-size:var(--fs-lg);color:var(--text-gold);line-height:1.1;margin-bottom:2px}
.stat span{font-size:var(--fs-sm);color:var(--text-muted)}

/* ------------------------------------------------------------- Nav logo chip */
.nav__logo{position:relative;overflow:hidden;display:inline-flex;align-items:center;background:#ffffff;
  border:1px solid rgba(12,26,51,.10);border-radius:11px;padding:5px 14px;box-shadow:0 2px 12px rgba(0,0,0,.22)}
.nav__logo img{height:48px;width:auto;display:block}
.nav.is-scrolled .nav__logo img{height:40px}
.nav__logo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%);
  transform:translateX(-200%) skewX(-14deg);animation:logoSheen 6.5s ease-in-out infinite}
@keyframes logoSheen{0%{transform:translateX(-200%) skewX(-14deg)}60%,100%{transform:translateX(360%) skewX(-14deg)}}
:root[data-theme="light"] .nav__logo{box-shadow:var(--shadow-sm);border-color:var(--border-default)}
@media(max-width:600px){.nav__logo img{height:38px}.nav__logo{padding:4px 10px}}

/* ------------------------------------------------------------- PDP modal grid (mobile) */
/* Detail view: the render is the product — give it real size and let it zoom. */
.pdp-grid{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:32px;align-items:start}
.pdp-media{position:relative;border:0;padding:0;cursor:zoom-in;width:100%;border-radius:var(--r-lg);
  overflow:hidden;background:#fff}
.pdp-media .zoom-hint{position:absolute;right:10px;bottom:10px;z-index:3;
  background:rgba(10,22,40,.86);color:var(--gold-pale);border:1px solid rgba(201,162,39,.5);
  border-radius:var(--r-pill);padding:5px 12px;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.04em;pointer-events:none;transition:opacity var(--dur-base)}
.pdp-media:hover .zoom-hint{background:rgba(10,22,40,.96)}
@media(max-width:900px){.pdp-grid{grid-template-columns:minmax(240px,300px) 1fr;gap:22px}}

/* ---- full-screen zoom overlay ---- */
.zoom-overlay{position:fixed;inset:0;z-index:400;background:rgba(4,9,18,.94);
  backdrop-filter:blur(6px);display:grid;place-items:center;padding:clamp(12px,4vw,48px);
  animation:zoomIn var(--dur-base) var(--ease-out);cursor:zoom-out}
@keyframes zoomIn{from{opacity:0}to{opacity:1}}
.zoom-figure{margin:0;display:grid;gap:12px;justify-items:center;max-height:100%}
.zoom-figure img{max-width:min(92vw,900px);max-height:82vh;width:auto;height:auto;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);background:#fff;
  transition:transform var(--dur-slow) var(--ease-out)}
.zoom-figure img.is-mag{transform:scale(2.1);cursor:zoom-out}
.zoom-figure figcaption{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-secondary);text-align:center}
.zoom-close{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:19px;
  background:rgba(16,31,51,.9);border:1px solid var(--border-gold);color:var(--text-gold)}
.zoom-close:hover{background:var(--navy-700);color:var(--gold-bright)}
@media(max-width:560px){
  .pdp-grid{grid-template-columns:1fr;gap:16px}
  /* Was 190px — smaller than the card thumbnail that opened it. Let the detail
     view actually be a detail view. */
  .pdp-grid .card__media{max-width:300px;margin-inline:auto;border-radius:var(--r-lg)}
  .modal{padding:22px 18px}
}

/* ------------------------------------------------------------- Card description + cGMP premium band */
.card__desc{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.45;margin:2px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.premium-band{background:var(--navy-950);border-block:1px solid var(--border-gold)}
.premium-band .container{display:grid;grid-template-columns:300px 1fr;gap:clamp(20px,4vw,40px);align-items:center;padding-block:28px}
.premium-band img{border-radius:var(--r-lg);width:100%;box-shadow:var(--shadow-lg)}
@media(max-width:700px){.premium-band .container{grid-template-columns:1fr;text-align:center}.premium-band img{max-width:260px;margin-inline:auto}.premium-band .btn-row{justify-content:center}}

/* ------------------------------------------------- COA specimen thumbnail */
.coa-thumb{position:relative;display:block;width:100%;max-width:330px;margin-inline:auto;
  padding:0;border:1px solid #d6dee6;border-radius:var(--r-md);overflow:hidden;
  background:#fff;cursor:zoom-in;box-shadow:var(--shadow-md)}
.coa-thumb img{width:100%;height:auto;display:block}
.coa-thumb .zoom-hint{position:absolute;right:8px;bottom:8px;background:rgba(10,22,40,.86);
  color:var(--gold-pale);border:1px solid rgba(201,162,39,.5);border-radius:var(--r-pill);
  padding:4px 11px;font-size:var(--fs-xs);font-weight:600;pointer-events:none}
.coa-thumb:hover{border-color:var(--gold)}

/* ------------------------------------------------- COA document illustration (legacy) */
.coa-doc{background:#fdfefe;color:#0c1a33;border-radius:var(--r-md);padding:18px 18px 12px;
  text-align:left;box-shadow:var(--shadow-md);max-width:320px;margin-inline:auto;
  border:1px solid #d6dee6}
.coa-doc__head{border-bottom:2px solid var(--gold-base);padding-bottom:10px;margin-bottom:12px}
.coa-doc__brand{display:block;font-family:var(--font-display);font-size:1.15rem;color:#0c1a33}
.coa-doc__brand b{color:#0c1a33}
.coa-doc__title{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#5a6b7d;margin-top:3px}
.coa-doc__rows{display:grid;gap:7px}
.coa-doc__rows div{display:flex;justify-content:space-between;gap:12px;font-size:.72rem;
  border-bottom:1px dashed #e2e8ee;padding-bottom:5px}
.coa-doc__rows span{color:#5a6b7d;font-family:var(--font-mono)}
.coa-doc__rows b{color:#0c1a33;text-align:right}
.coa-doc__foot{margin-top:12px;text-align:center;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.16em;color:#8a97a8}

/* ------------------------------------------------- Clinic value stack + pathways */
.value-stack{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.value-stack li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;
  border:1px solid var(--border-default);border-left:3px solid var(--gold-base);
  border-radius:var(--r-sm);background:rgba(255,255,255,.02)}
.value-stack b{font-family:var(--font-display);font-size:1.06rem;color:var(--text-primary)}
.value-stack span{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45}

.pathways{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
@media(max-width:860px){.pathways{grid-template-columns:1fr}}
.pathway{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px;
  border:1px solid var(--border-default);border-radius:var(--r-lg);background:var(--navy-850)}
.pathway--gold{border-color:var(--border-gold);
  background:linear-gradient(160deg,rgba(201,162,39,.10),var(--navy-850) 62%);
  box-shadow:var(--shadow-gold-glow)}
.pathway__tag{display:inline-block;align-self:flex-start;font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-gold);
  border:1px solid var(--border-gold);border-radius:var(--r-pill);padding:3px 11px}
.pathway h3{font-size:var(--fs-lg);margin:4px 0 0}
.pathway p{margin:0}
.pathway__note{margin-top:auto!important;padding-top:14px;border-top:1px solid var(--border-subtle);
  font-size:var(--fs-xs);color:var(--text-muted);line-height:1.55}
.pathway .btn{align-self:flex-start;margin-top:6px}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:4px;top:7px;width:9px;height:5px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}

/* ------------------------------------------------- FAQ */
.faq{display:grid;gap:10px;margin-top:24px}
.faq details{border:1px solid var(--border-default);border-radius:var(--r-md);
  background:var(--navy-850);overflow:hidden}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:1.25rem;
  color:var(--text-gold);transition:transform var(--dur-base)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--border-subtle)}
.faq p{margin:0;padding:14px 20px 18px;color:var(--text-secondary);font-size:var(--fs-sm);max-width:none}

/* ------------------------------------------------------------- Stasis ION lockup */
/* Supplier-brand mark for the delivery platform. Two rasters, swapped by theme:
   .on-dark is white ink (default dark theme), .on-light is black ink. */
.stasis-logo{display:flex;align-items:center;width:max-content;line-height:0}
.stasis-logo img{height:var(--stasis-h,32px);width:auto;display:block}
.stasis-logo .on-light{display:none}
:root[data-theme="light"] .stasis-logo .on-dark{display:none}
:root[data-theme="light"] .stasis-logo .on-light{display:block}
.stasis-logo--lg{--stasis-h:46px}
.stasis-logo--center{justify-content:center;width:100%}
@media(max-width:600px){.stasis-logo{--stasis-h:26px}.stasis-logo--lg{--stasis-h:34px}}

/* Price shown for catalog items that have no published price yet. Reads as a
   label, not a number — it must never be mistaken for a figure. */
.card__price--quote{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.01em;color:var(--text-gold);white-space:nowrap}
:root[data-theme="light"] .card__price--quote{color:#8a6d15}

/* The display face (Fraunces) draws U+2122 at almost cap height, so an untouched
   ™ in a heading reads as the letters "TM" welded to the word. Scale it back to a
   proper trademark mark. Body copy (Inter) already renders it correctly, so this
   is scoped to headings only. */
.tm{font-size:.5em;vertical-align:.5em;line-height:0;letter-spacing:.02em;font-weight:inherit}

/* ------------------------------------------------------------- product card: slow zoom on hover */
/* .card and .card__media both already clip with overflow:hidden, so the art can
   scale without escaping its box and without shifting layout.
   Scoped under .card on purpose: products.html reuses .card__media for the PDP
   hero WITHOUT a .card ancestor, and that one must not zoom.
   Composes with the 3D tilt, which writes an inline transform on .card itself —
   different element, so the two never fight. */
.card .card__media .product-photo,
.card .card__media > svg{transition:transform 760ms var(--ease-out);will-change:transform}
/* 0,4,0 — has to outrank `.card__media .product-photo{transform:none}` at 0,2,0 */
.card:hover .card__media .product-photo,
.card:focus-within .card__media .product-photo{transform:scale(1.08)}
/* the generated SVG art sits on a 3D layer; re-state translateZ or it flattens */
.card:hover .card__media > svg,
.card:focus-within .card__media > svg{transform:translateZ(40px) scale(1.08)}

@media (prefers-reduced-motion: reduce){
  .card .card__media .product-photo,
  .card .card__media > svg{transition:none}
  .card:hover .card__media .product-photo,
  .card:focus-within .card__media .product-photo{transform:none}
  .card:hover .card__media > svg,
  .card:focus-within .card__media > svg{transform:translateZ(40px)}
}

/* ═══════════════════════════════════════════════════════════════════════
   CINEMA LAYER
   Atmosphere, depth and choreography on top of the existing system.
   Everything here is additive and degrades to the previous look if the
   stylesheet is truncated or JS never runs. All motion is opt-out via
   prefers-reduced-motion at the end of this block.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- 1. Film grain -------------------------------------------------------
   The single biggest reason flat dark UIs read as "cheap": pure gradients
   band and feel synthetic. A 3% noise field over everything unifies the
   panels and gives the darks a photographic quality. Fixed, so it never
   scrolls with content, and inert to pointers. */
.grain-layer{position:fixed;inset:-60%;z-index:9998;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform;animation:grainDrift 6s steps(6) infinite}
@keyframes grainDrift{
  0%{transform:translate(0,0)}     20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}  100%{transform:translate(0,0)}}
:root[data-theme="light"] .grain-layer{opacity:.02;mix-blend-mode:multiply}

/* --- 2. Ambient light ----------------------------------------------------
   Two slow-drifting light bodies behind the hero. They are what makes the
   background feel lit rather than filled. Long, prime-ish durations so the
   two never visibly sync into a pattern. */
.amb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.amb--gold{width:52vmax;height:52vmax;top:-18vmax;left:52%;
  background:radial-gradient(circle,rgba(201,162,39,.20),transparent 64%);
  animation:ambA 23s var(--ease-inout) infinite}
.amb--cool{width:40vmax;height:40vmax;top:14vmax;left:6%;
  background:radial-gradient(circle,rgba(74,144,217,.13),transparent 66%);
  animation:ambB 31s var(--ease-inout) infinite}
@keyframes ambA{0%,100%{transform:translate(-50%,0) scale(1)}
  50%{transform:translate(-44%,5vmax) scale(1.10)}}
@keyframes ambB{0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(5vmax,-4vmax) scale(1.14)}}
:root[data-theme="light"] .amb--gold{opacity:.5}
:root[data-theme="light"] .amb--cool{opacity:.4}

/* --- 3. Headline choreography -------------------------------------------
   Words rise in sequence instead of the whole line appearing at once. The
   overflow:clip wrapper is what sells it — each word emerges from behind a
   mask rather than fading in mid-air. */
/* Per-word mask, not per-line: the headline wraps, so a single line-level
   clip would make words on later lines rise from behind the line above.
   Clipping each word in its own box keeps the effect correct at any width.
   The padding/negative-margin pair stops clip from shaving descenders (p, g). */
.h-mask{display:inline-block;overflow:clip;vertical-align:bottom;
  padding-bottom:.12em;margin-bottom:-.12em}
.h-word{display:inline-block;will-change:transform;
  transform:translateY(105%) rotate(2.5deg);opacity:0}
.is-lit .h-word{transform:none;opacity:1;
  transition:transform .95s var(--ease-out),opacity .7s var(--ease-out);
  transition-delay:calc(var(--w,0) * 62ms)}

/* --- 4. Staggered reveals ------------------------------------------------
   Extends the existing .reveal rather than replacing it: a child index sets
   a small delay so grids resolve in a wave instead of a slab. Capped in JS
   so a 140-card grid never waits seconds for the tail. */
.reveal[style*="--i"]{transition-delay:calc(var(--i,0) * 55ms)}

/* --- 5. Scroll progress --------------------------------------------------
   A hairline of the brand gold showing depth through the page. */
.scroll-rail{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9997;
  background:transparent;pointer-events:none}
.scroll-rail__fill{height:100%;width:0;background:var(--grad-gold);
  box-shadow:0 0 12px rgba(201,162,39,.65);transform-origin:left center}

/* --- 6. Section seams ----------------------------------------------------
   Hard colour changes between sections read as "stacked divs". A hairline
   that fades in from both edges reads as craft. */
.section+.section::before,.section--tight+.section::before{content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-gold) 22%,var(--border-gold) 78%,transparent)}
.section{position:relative}

/* --- 7. Card craft -------------------------------------------------------
   Top-edge sheen (light catching a physical card), a gold rim on hover, and
   a press state. Press feedback is the detail most sites skip and it is what
   makes a card feel like an object rather than a rectangle. */
.card::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);pointer-events:none;z-index:4}
.card:hover::after{opacity:1}
.card{position:relative}
.card:hover{border-color:var(--border-gold)}
.card:active{transform:scale(.985)}
.btn:active{transform:scale(.97)}

/* Gold glow behind the primary CTA — the "this is the action" cue. */
.btn--primary{position:relative}
.btn--primary::before{content:"";position:absolute;inset:-2px;border-radius:inherit;
  background:var(--grad-gold);filter:blur(13px);opacity:.30;z-index:-1;
  transition:opacity var(--dur-base) var(--ease-out)}
.btn--primary:hover::before{opacity:.55}

/* Prices as tabular figures so columns of numbers stop dancing. */
.card__price,.spec-card__v{font-variant-numeric:tabular-nums}

/* --- 8. Hero frame lift -------------------------------------------------- */
.hero__media .frame{transition:transform 1.1s var(--ease-out),box-shadow 1.1s var(--ease-out)}
.hero__media .frame:hover{transform:translateY(-6px) scale(1.012);
  box-shadow:var(--shadow-lg),0 0 110px rgba(201,162,39,.42)}

/* --- 9. Reduced motion ---------------------------------------------------
   Everything above resolves to its final state. Nothing is left invisible:
   .h-word in particular must never be stuck at opacity 0 if motion is off. */
@media (prefers-reduced-motion: reduce){
  .grain-layer{animation:none}
  .amb--gold,.amb--cool{animation:none}
  .h-word{transform:none;opacity:1;transition:none}
  .reveal[style*="--i"]{transition-delay:0ms}
  .card:active,.btn:active{transform:none}
  .hero__media .frame{transition:none}
  .hero__media .frame:hover{transform:none}
}