/* ============================================================
   USA Online Peptides shared stylesheet
   ============================================================ */
:root{
  --bg:#05070E;
  --bg-2:#0A0E1A;
  --panel:#0E1322;
  --panel-2:#131A2C;
  --line:#1B2338;
  --line-lt:#2A3550;
  --accent:#2E6FE8;
  --accent-lt:#7FB0FF;
  --accent-dk:#16407F;
  --silver:#C3CBD6;
  --text:#EEF1F7;
  --muted:#8A93A6;
  --muted-dk:#5F6E8A;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1240px;
  --gut:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,.68,.28,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.015em}

.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-lt),transparent)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{display:none}
.eyebrow.center::before{content:"";width:44px;height:1px;background:var(--accent-dk)}

.accent{
  background:linear-gradient(96deg,#16407F 0%,#7FB0FF 34%,#2E6FE8 62%,#C7DDFF 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:15px 30px;cursor:pointer;border:1px solid transparent;
  transition:all .25s var(--ease);background:none;color:inherit;
}
.btn-accent{
  background:linear-gradient(100deg,#1E55B5,#7FB0FF 55%,#2E6FE8);
  color:#0A0E1A;font-weight:500;
}
.btn-accent:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-line{border-color:var(--line-lt);color:var(--text)}
.btn-line:hover{border-color:var(--accent);color:var(--accent-lt)}

/* ---------------- header ---------------- */
.hdr{
  position:sticky;top:0;z-index:90;
  background:rgba(5,7,14,.82);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.hdr-logo img{height:34px;width:auto;object-fit:contain}
.hdr-nav{display:flex;align-items:center;gap:38px}
.hdr-nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:color .22s;position:relative;padding:6px 0;
}
.hdr-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width .3s var(--ease);
}
.hdr-nav a:hover{color:var(--text)}
.hdr-nav a:hover::after,.hdr-nav a.on::after{width:100%}
.hdr-nav a.on{color:var(--accent-lt)}
.burger{display:none;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer;padding:8px}

@media(max-width:900px){
  .hdr-nav{
    position:fixed;inset:76px 0 auto 0;flex-direction:column;gap:0;align-items:stretch;
    background:var(--bg-2);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
  }
  .hdr-nav.open{max-height:340px}
  .hdr-nav a{padding:17px var(--gut);border-bottom:1px solid var(--line)}
  .hdr-nav a::after{display:none}
  .hdr-nav .btn{margin:16px var(--gut);text-align:center}
  .burger{display:block}
}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;min-height:clamp(420px,66vh,645px);display:flex;align-items:center}
.hero-glow{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(900px,120vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(46,111,232,.16) 0%,rgba(46,111,232,.05) 38%,transparent 68%);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.24;
  background-image:var(--marble);
  background-size:cover;
  background-position:center;
  mask-image:radial-gradient(ellipse 78% 72% at 50% 45%,#000 34%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 45%,#000 34%,transparent 88%);
}
.hero-in{position:relative;z-index:3;text-align:center;width:100%;padding:64px 0 58px}
.hero-logo{width:min(390px,66vw);height:auto;aspect-ratio:4/1;object-fit:contain;margin:0 auto 24px;filter:drop-shadow(0 12px 40px rgba(46,111,232,.22))}
.hero h1{font-size:clamp(24px,3.1vw,38px);max-width:20ch;margin:0 auto 15px;font-weight:600}
.hero p{max-width:58ch;margin:0 auto 27px;color:var(--muted);font-size:clamp(14px,1.5vw,16px)}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* floating vials */
.floaters{position:absolute;inset:0;z-index:2;pointer-events:none}
.fv{
  position:absolute;opacity:0;
  animation:fvIn .9s var(--ease) forwards;
  will-change:transform;
}
.fv img{
  width:100%;height:auto;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(46,111,232,.14));
}
.fv-i{animation:bob var(--dur,9s) ease-in-out infinite;animation-delay:var(--del,0s)}
@keyframes fvIn{to{opacity:var(--op,.92)}}
@keyframes bob{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  50%{transform:translate3d(0,var(--amp,-24px),0) rotate(calc(var(--rot,0deg) + var(--spin,3deg)))}
}
@media(max-width:820px){.fv.hide-sm{display:none}}

/* ---------------- sections ---------------- */
.sec{padding:clamp(36px,4.5vw,60px) 0;position:relative}
.sec-alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:64ch;margin-bottom:26px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,4.2vw,46px);margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:clamp(15px,1.7vw,17px)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------- spotlight ---------------- */
.spot{display:grid;grid-template-columns:1fr minmax(190px,250px) 1fr;gap:clamp(18px,2.6vw,40px);align-items:center}
.spot-stage{position:relative;display:flex;align-items:center;justify-content:center}
.spot-halo{
  position:absolute;width:118%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(46,111,232,.2),transparent 62%);
}
.spot-vial{position:relative;width:100%;max-width:230px;margin:0 auto;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.spot-vial.swap{opacity:0;transform:scale(.94)}
.spot-vial img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 40px rgba(0,0,0,.8))}

.spot-col{display:flex;flex-direction:column;gap:22px}
.spot-col.right{align-items:flex-start}
.spot-col.left{align-items:flex-end;text-align:right}
.note{max-width:300px;position:relative;transition:opacity .45s var(--ease)}
.note.swap{opacity:0}
.note-k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px;display:block;
}
.note h4{font-size:15.5px;font-family:var(--body);font-weight:600;letter-spacing:0;margin-bottom:5px}
.note p{font-size:13.5px;color:var(--muted);line-height:1.6}
.note::before{
  content:"";position:absolute;top:8px;width:26px;height:1px;
  background:linear-gradient(90deg,var(--accent-dk),transparent);
}
.spot-col.right .note{padding-left:40px}
.spot-col.right .note::before{left:0}
.spot-col.left .note{padding-right:40px}
.spot-col.left .note::before{right:0;background:linear-gradient(270deg,var(--accent-dk),transparent)}

.spot-name{text-align:center;margin-top:20px}
.spot-name h3{font-size:clamp(24px,3.2vw,34px);margin-bottom:5px}
.spot-name span{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--muted-dk);text-transform:uppercase}

.spot-tabs{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.spot-tab{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--line-lt);background:transparent;color:var(--muted);
  cursor:pointer;transition:all .22s;
}
.spot-tab:hover{color:var(--text);border-color:var(--muted-dk)}
.spot-tab.on{border-color:var(--accent);color:var(--accent-lt);background:rgba(46,111,232,.07)}

@media(max-width:900px){
  .spot{grid-template-columns:1fr;gap:30px}
  .spot-col.left,.spot-col.right{align-items:flex-start;text-align:left;order:3}
  .spot-col.left .note{padding:0 0 0 40px}
  .spot-col.left .note::before{left:0;right:auto;background:linear-gradient(90deg,var(--accent-dk),transparent)}
  .spot-stage{order:1}
  .spot-vial{max-width:190px}
}

/* ---------------- pillar cards ---------------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pillar{background:var(--bg);padding:24px 24px;transition:background .3s}
.pillar:hover{background:var(--panel)}
.pillar-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--accent-dk);margin-bottom:20px;display:block}
.pillar h3{font-size:19px;font-family:var(--body);font-weight:600;letter-spacing:0;margin-bottom:11px}
.pillar p{color:var(--muted);font-size:14.5px}
@media(max-width:860px){.pillars{grid-template-columns:1fr}}

/* ---------------- strip ---------------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip div{padding:18px 20px;border-right:1px solid var(--line);text-align:center}
.strip div:last-child{border-right:none}
.strip b{display:block;font-family:var(--display);font-size:15px;letter-spacing:.02em;margin-bottom:6px}
.strip span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dk)}
@media(max-width:760px){
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip div:nth-child(2n){border-right:none}
  .strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------------- products ---------------- */
.pfilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;justify-content:center}
.pgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.pcard{
  background:var(--bg);padding:22px 18px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transition:background .3s var(--ease),border-color .3s;position:relative;
  border:1px solid var(--line);flex:0 0 calc(25% - 10.5px);
}
/* --- fixed baselines: every element aligns across every card --- */
.pcard h3{
  min-height:38px;display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.pcard .comp{
  min-height:26px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;padding:0 4px;
}
.pcard .mgs{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px;width:100%;margin:0 auto 16px;
  min-height:60px;align-content:flex-start;
}
.mg{
  flex:0 0 calc(25% - 4.5px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  padding:5px 2px;border:1px solid var(--line-lt);color:var(--muted);
  min-height:26px;
}
.pcard .buy{
  margin-top:auto;width:100%;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 8px;cursor:pointer;
  border:1px solid var(--line-lt);background:transparent;color:var(--muted);
  transition:all .24s var(--ease);
}
.pcard:hover .buy{border-color:var(--accent);color:var(--accent-lt)}
.pcard .buy:hover{
  background:linear-gradient(100deg,#1E55B5,#7FB0FF 55%,#2E6FE8);
  color:#0A0E1A;border-color:var(--accent);font-weight:600;
}
.pcard:hover{background:var(--panel);border-color:var(--line-lt)}
.pcard-img{height:170px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:16px}
.pcard-img img{
  max-height:180px;width:auto;height:auto;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.7));
  transition:transform .4s var(--ease);
}
.pcard:hover .pcard-img img{transform:translateY(-8px) scale(1.04)}
.pcard h3{font-size:15.5px;font-family:var(--body);font-weight:600;letter-spacing:.01em;margin-bottom:5px}
.pcard .comp{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted-dk);margin-bottom:12px;min-height:14px}

.pcat{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-dk);position:absolute;top:14px;left:16px;
}

/* ---------------- modal ---------------- */
.modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:flex-start;justify-content:center;padding:clamp(16px,4vw,56px);
  background:rgba(3,4,10,.86);backdrop-filter:blur(8px);overflow-y:auto;
}
.modal.open{display:flex}
.modal-card{
  background:var(--panel);border:1px solid var(--line-lt);max-width:640px;width:100%;
  padding:clamp(26px,4vw,44px);position:relative;
  animation:pop .32s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal-x{
  position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);
  font-size:26px;line-height:1;cursor:pointer;padding:6px;
}
.modal-x:hover{color:var(--text)}
.modal-card h2{font-size:clamp(24px,3.4vw,32px);margin-bottom:10px}
.modal-card>p{color:var(--muted);font-size:14.5px;margin-bottom:26px}

form{display:block}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fw{grid-column:1/-1}
label{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-dk);margin-bottom:7px;
}
input,select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line-lt);color:var(--text);
  padding:12px 14px;font-family:var(--body);font-size:14.5px;transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
textarea{resize:vertical;min-height:90px}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 53%,calc(100% - 14px) 53%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.fnote{font-size:12px;color:var(--muted-dk);line-height:1.6;margin:18px 0 20px}
form .btn-accent{width:100%}
@media(max-width:560px){.fg{grid-template-columns:1fr}}

/* ---------------- page hero (inner pages) ---------------- */
.phero{padding:clamp(32px,4.5vw,55px) 0 clamp(22px,2.6vw,32px);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phero-glow{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1000px,130vw);height:420px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(46,111,232,.13),transparent 66%);
}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(34px,5.6vw,62px);margin-bottom:14px}
.phero p{max-width:60ch;color:var(--muted);font-size:clamp(15px,1.8vw,18px)}

/* ---------------- prose ---------------- */
.prose{max-width:68ch}
.prose p{margin-bottom:14px;color:var(--muted);font-size:15.5px}
.prose p.lead{font-size:19px;color:var(--text);line-height:1.6}
.prose h3{font-size:20px;margin:24px 0 10px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,48px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split-vial{position:relative;display:flex;justify-content:center;align-items:center;min-height:260px}
.split-vial::before{
  content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(46,111,232,.15),transparent 64%);
}
.split-vial img{position:relative;max-height:330px;width:auto;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.8))}

/* ---------------- cta band ---------------- */
.band{
  border:1px solid var(--line-lt);background:var(--panel);
  padding:clamp(22px,2.8vw,34px);text-align:center;position:relative;overflow:hidden;
}
.band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(46,111,232,.1),transparent 62%);
}
.band>*{position:relative}
.band h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:10px}
.band p{color:var(--muted);max-width:52ch;margin:0 auto 20px}

/* ---------------- footer ---------------- */
.ftr{border-top:1px solid var(--line);padding:28px 0 26px;margin-top:0}
.ftr-top{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:20px}
.ftr-logo img{height:40px;width:auto;object-fit:contain;margin-bottom:14px}
.ftr-contact{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.ftr-contact a:hover{color:var(--accent-lt)}
.ftr-contact div{margin-bottom:7px}
.ftr-nav{display:flex;flex-direction:column;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ftr-nav a:hover{color:var(--text)}
.legal{border-top:1px solid var(--line);padding-top:16px;font-size:11.5px;color:var(--muted-dk);line-height:1.75;max-width:110ch}
.legal b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);font-weight:500}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .fv{opacity:.92}
  html{scroll-behavior:auto}
}


/* ===== product card responsive widths ===== */
@media(max-width:1040px){.pcard{flex-basis:calc(33.333% - 9.34px)}}
@media(max-width:780px){.pcard{flex-basis:calc(50% - 7px)}}
@media(max-width:470px){.pcard{flex-basis:100%}}

/* ===== accent filter chip (signature blends) ===== */
.spot-tab.accent-tab{
  border-color:var(--accent);
  background:linear-gradient(100deg,#1E55B5,#7FB0FF 55%,#2E6FE8);
  color:#0A0E1A;font-weight:600;
}
.spot-tab.accent-tab:hover{filter:brightness(1.1);color:#0A0E1A;border-color:var(--accent-lt)}
.spot-tab.accent-tab.on{filter:brightness(1.12);color:#0A0E1A}

/* ===== bullet lists (about) ===== */
.blist{list-style:none;margin:0 0 6px}
.blist li{
  position:relative;padding-left:20px;margin-bottom:9px;
  color:var(--muted);font-size:15px;line-height:1.55;
}
.blist li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  background:var(--accent);transform:rotate(45deg);
}

/* ===== rotating twin vials ===== */
.twin{position:relative;height:330px;display:flex;align-items:center;justify-content:center}
.twin::before{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,111,232,.17),transparent 64%);
}
.twin img{
  position:absolute;height:290px;width:auto;
  filter:drop-shadow(0 22px 38px rgba(0,0,0,.85));
  animation:orbit 11s var(--ease) infinite;
}
.twin img:nth-child(2){animation-delay:-5.5s}
@keyframes orbit{
  0%   {transform:translateX(-62px) scale(.80);opacity:.62;z-index:1}
  25%  {transform:translateX(0)     scale(.90);opacity:.80;z-index:1}
  50%  {transform:translateX(62px)  scale(1);  opacity:1;  z-index:3}
  75%  {transform:translateX(0)     scale(.90);opacity:.80;z-index:1}
  100% {transform:translateX(-62px) scale(.80);opacity:.62;z-index:1}
}
@media(max-width:560px){
  .twin{height:270px}
  .twin img{height:225px}
  @keyframes orbit{
    0%{transform:translateX(-44px) scale(.80);opacity:.62;z-index:1}
    50%{transform:translateX(44px) scale(1);opacity:1;z-index:3}
    100%{transform:translateX(-44px) scale(.80);opacity:.62;z-index:1}
  }
}

/* ===== logo banner (why usaop) ===== */
.logoband{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);padding:34px 0;text-align:center;position:relative;overflow:hidden;
}
.logoband::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(46,111,232,.11),transparent 66%);
}
.logoband img{position:relative;height:64px;width:auto;margin:0 auto;
  filter:drop-shadow(0 8px 26px rgba(46,111,232,.2))}
@media(max-width:600px){.logoband{padding:24px 0}.logoband img{height:46px}}

/* ===== why-us hero copy ===== */
.why-copy{max-width:62ch;margin-top:16px}
.why-copy p{color:var(--muted);font-size:clamp(15px,1.7vw,17.5px);margin-bottom:14px}
.why-copy .punch{color:var(--text);font-weight:500}
.why-copy .quote{
  font-family:var(--display);font-size:clamp(17px,2.1vw,21px);
  color:var(--accent-lt);letter-spacing:.01em;margin-top:16px;
}
.why-copy .quote span{color:var(--muted-dk);font-family:var(--mono);font-size:12px;letter-spacing:.16em}


/* ===== AGE / ACCESS GATE ===== */
#agegate{
  position:fixed;inset:0;z-index:300;
  background:rgba(5,7,14,.975);backdrop-filter:blur(10px) saturate(1.1);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
#agegate.gone{display:none}
#agegate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 42%,rgba(46,111,232,.12),transparent 70%);
}
.ag-box{
  position:relative;max-width:470px;width:100%;text-align:center;
  border:1px solid var(--line-lt);background:var(--panel);
  padding:clamp(30px,4.4vw,46px) clamp(24px,3.4vw,40px);
  animation:agIn .45s var(--ease);
}
@keyframes agIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ag-box>img{height:44px;width:auto;margin:0 auto 22px}
.ag-box h2{font-size:clamp(22px,3vw,28px);margin-bottom:12px}
.ag-box>p{color:var(--muted);font-size:14.5px;margin-bottom:26px}
.ag-btns{display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.ag-btns .btn{width:100%}
.ag-fine{
  border-top:1px solid var(--line);padding-top:16px;
  font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.04em;
  color:var(--muted-dk);text-transform:uppercase;
}


/* ===== product card: responsive chip columns ===== */
@media(max-width:1040px){.mg{flex-basis:calc(33.333% - 4px)}}
@media(max-width:780px){.mg{flex-basis:calc(25% - 4.5px)}}
@media(max-width:470px){.mg{flex-basis:calc(25% - 4.5px)}}

:root{--marble:url(/assets/marble.webp)}
.crumbs{padding:16px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dk)}
.crumbs a:hover{color:var(--accent-lt)}
.crumbs span{margin:0 8px;color:var(--line-lt)}
.pd{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(24px,3.2vw,48px);align-items:center;padding:clamp(16px,2vw,26px) 0 clamp(24px,3vw,36px)}
.pd-vis{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.pd-vis::before{content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(46,111,232,.16),transparent 64%)}
.pd-vis img{position:relative;max-height:400px;width:auto;height:auto;filter:drop-shadow(0 26px 44px rgba(0,0,0,.8))}
.pd-cat{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;text-align:center}
.pd h1{font-size:clamp(34px,4.6vw,54px);margin-bottom:8px;text-align:center}
.pd-sub{font-family:var(--mono);font-size:13.5px;color:var(--muted);margin-bottom:18px;text-align:center}
.sizes{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;justify-content:center}
.sz{font-family:var(--mono);font-size:12.5px;padding:9px 15px;border:1px solid var(--line-lt);color:var(--muted)}
.pd-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.cta-note{font-size:13px;color:var(--muted-dk);margin:0 auto 22px;max-width:56ch;line-height:1.55;text-align:center}
.spec{border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:172px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.spec-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dk);padding-top:2px}
.spec-v{font-size:14.5px;color:var(--text)}
.spec-v small{display:block;color:var(--muted-dk);font-size:12.5px;margin-top:3px}
@media(max-width:900px){.pd{grid-template-columns:1fr}.pd-vis{min-height:0;order:-1;padding:8px 0 4px}.pd-vis img{max-height:290px}.spec-row{grid-template-columns:1fr;gap:4px}}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel a{border:1px solid var(--line);background:var(--bg);padding:16px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:all .3s var(--ease)}
.rel a:hover{background:var(--panel);border-color:var(--line-lt)}
.rel img{height:132px;width:auto;margin-bottom:14px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.7));transition:transform .35s var(--ease)}
.rel a:hover img{transform:translateY(-6px)}
.rel h3{font-size:15px;font-family:var(--body);font-weight:600;letter-spacing:0;margin-bottom:4px}
.rel span{font-family:var(--mono);font-size:10.5px;color:var(--muted-dk)}
@media(max-width:620px){.rel{grid-template-columns:1fr}.rel img{height:120px}}
.notice{border:1px solid var(--line-lt);background:var(--panel);padding:18px 22px}
.notice b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:8px}
.notice p{font-size:13px;color:var(--muted);line-height:1.6}
.pcard a.buy{text-decoration:none;display:block}
.faq{border-top:1px solid var(--line);max-width:74ch}
.faq details{border-bottom:1px solid var(--line);padding:15px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--mono)}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--muted);font-size:14.5px;margin-top:11px;line-height:1.65}
.catgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.catcard{flex:0 0 calc(25% - 10.5px)}
@media(max-width:1100px){.catcard{flex-basis:calc(33.333% - 9.34px)}}
@media(max-width:820px){.catcard{flex-basis:calc(50% - 7px)}}
@media(max-width:520px){.catcard{flex-basis:100%}}
.catcard{border:1px solid var(--line);background:var(--bg);padding:24px 22px;transition:all .3s var(--ease);display:block}
.catcard:hover{background:var(--panel);border-color:var(--line-lt)}
.catcard h3{font-size:19px;font-family:var(--body);font-weight:600;letter-spacing:0;margin-bottom:8px}
.catcard p{color:var(--muted);font-size:14px;margin-bottom:12px}
.catcard span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}


/* ---------------- account request layout ---------------- */
.acct{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:880px){.acct{grid-template-columns:1fr}}
.acct-info h2{letter-spacing:-.015em}
.acct-info .blist{margin-top:4px}
.acct-contact{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  display:grid;gap:9px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dk);
}
.acct-contact a{
  color:var(--accent);letter-spacing:.06em;text-transform:none;font-size:13px;
  margin-left:10px;border-bottom:1px solid transparent;transition:border-color .25s var(--ease);
}
.acct-contact a:hover{border-bottom-color:var(--accent)}

/* ---------------- fixes carried over from source ---------------- */
/* .hdr-nav a (0,1,1) was beating .btn-accent (0,1,0), so the header
   CTA rendered muted-grey on a light fill. Also kills the underline
   pseudo-element that ran across the button face. */
.hdr-nav a.btn-accent{color:#0A0E1A;font-weight:600}
.hdr-nav a.btn-accent:hover{color:#05070E}
.hdr-nav a.btn::after{display:none}


/* ---------------- request list ---------------- */
.sizes .sz{cursor:pointer;user-select:none;background:none;font:inherit;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.sizes .sz:hover{border-color:var(--accent-dk);color:var(--text)}
.sizes .sz.sel{border-color:var(--accent);color:var(--accent-lt);
  background:rgba(46,111,232,.10)}

.pd-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.rfq-add[disabled]{opacity:.55;cursor:default}

.rfq-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 6px;margin-left:8px;
  border-radius:10px;background:var(--accent);color:#0A0E1A;
  font-family:var(--mono);font-size:11px;font-weight:700;line-height:1;
}
.rfq-badge[hidden]{display:none}

.rfq-link{
  display:inline-flex;align-items:center;color:var(--muted);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;transition:color .25s var(--ease)}
.rfq-link:hover{color:var(--text)}
.rfq-link::after{display:none}
@media(max-width:900px){
  .hdr-nav .rfq-link{padding:17px var(--gut);border-bottom:1px solid var(--line)}
}

.rfq-wrap{display:grid;grid-template-columns:1.15fr .95fr;gap:clamp(28px,4vw,58px);align-items:start}
@media(max-width:940px){.rfq-wrap{grid-template-columns:1fr}}

.rfq-row{
  display:grid;grid-template-columns:64px 1fr auto auto;gap:16px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.rfq-row img{width:64px;height:auto;display:block}
.rfq-nm{font-weight:600;font-size:15.5px}
.rfq-sz{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:3px}
.rfq-qty{display:flex;align-items:center;gap:2px}
.rfq-qty button{
  width:30px;height:30px;border:1px solid var(--line-lt);background:none;
  color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.rfq-qty button:hover{border-color:var(--accent);color:var(--accent-lt)}
.rfq-qty input{
  width:46px;height:30px;text-align:center;background:var(--bg-2);
  border:1px solid var(--line-lt);color:var(--text);
  font-family:var(--mono);font-size:13px}
.rfq-del{background:none;border:0;color:var(--muted-dk);font-size:19px;
  line-height:1;cursor:pointer;padding:4px 6px}
.rfq-del:hover{color:#C8354A}

.rfq-empty{padding:52px 0;text-align:center;color:var(--muted)}
.rfq-empty p{margin-bottom:22px}

.rfq-panel{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(22px,3vw,32px);position:sticky;top:96px}
@media(max-width:940px){.rfq-panel{position:static}}
.rfq-panel h2{font-size:20px;margin-bottom:6px}
.rfq-count{font-family:var(--mono);font-size:12px;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px}

.rfq-note{
  margin-top:20px;padding:14px 16px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--muted);font-size:12.5px;line-height:1.6}
.rfq-err{margin-top:14px;color:#E06A7C;font-size:13px}
.rfq-err[hidden]{display:none}

.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,14px);
  background:var(--panel-2);border:1px solid var(--accent-dk);
  color:var(--text);padding:12px 20px;font-size:14px;z-index:900;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}


/* ================= light hero =================
   The hero is the only light region on the site. Everything is scoped
   under .hero so no other section inherits these values. */
.hero{
  background:
    radial-gradient(ellipse 70% 90% at 50% 8%, #FFFFFF 0%, transparent 62%),
    linear-gradient(180deg, #F2F4F8 0%, #E7EBF1 100%);
  border-bottom:1px solid #D3D9E3;
}

/* marble field removed */
.hero .hero-grid{display:none}

/* keep a trace of the blue glow so the hero is not flat, but light */
.hero .hero-glow{
  background:radial-gradient(circle,
    rgba(46,111,232,.10) 0%,
    rgba(46,111,232,.04) 40%,
    transparent 70%);
}

.hero h1{color:#0E1322}
.hero p{color:#5F6E8A}

.hero .hero-logo{filter:drop-shadow(0 10px 26px rgba(14,19,34,.10))}

/* outline button needs dark ink on a light field */
.hero .btn-line{border-color:#D3D9E3;color:#0E1322}
.hero .btn-line:hover{border-color:var(--accent);color:var(--accent-dk);
  background:rgba(46,111,232,.06)}

/* the dark drop shadow behind the floating vials is far too heavy on
   light; replace it with a soft contact shadow. Slightly deeper than a
   pure cast shadow so the vials read as solid objects, not decals. */
.hero .fv img{
  filter:drop-shadow(0 20px 30px rgba(14,19,34,.26))
         drop-shadow(0 3px 6px rgba(14,19,34,.18));
}

/* Floater opacity.
   usaop.js writes --op inline per vial from its depth value:
   0.62 + (50 - depth)/130, so the back row lands near .67 and the
   front near .90. That was tuned for the dark hero, where a faded
   vial still had the dark field behind it for contrast. On light it
   just reads washed out. Redefining the keyframe is the only place to
   lift it without editing the shared usaop.js. Values above 1 clamp.

   +.24 puts the back row at ~.91 and takes everything else to 1. Depth
   still reads, because it is carried by size, blur-free shadow spread
   and vertical position, not by fading the object out. */
@keyframes fvIn{to{opacity:calc(var(--op,.92) + .24)}}

/* Readability scrim.
   The floating vials sit at z-index 2 and .hero-in at 3. A ::before on
   .hero-in at z-index -1 lands inside that stacking context, so it
   covers the vials but stays under the copy. On the dark hero the vials
   were dim enough to read through; on light they are not. */
.hero .hero-in::before{
  content:"";position:absolute;z-index:-1;
  inset:-20px -28px;
  background:radial-gradient(ellipse 54% 68% at 50% 50%,
    rgba(246,248,251,.90) 0%,
    rgba(246,248,251,.60) 44%,
    rgba(246,248,251,0) 74%);
  pointer-events:none;
}

@media(max-width:820px){
  /* narrow column, vials sit directly behind the headline */
  .hero .hero-in::before{
    inset:-14px -20px;
    background:radial-gradient(ellipse 86% 56% at 50% 50%,
      rgba(246,248,251,.95) 0%,
      rgba(246,248,251,.86) 52%,
      rgba(246,248,251,0) 86%);
  }
  /* tighter scrim, so the vials outside the text column keep their weight */
  .hero .fv img{opacity:.94}
}

/* the strip below the hero is dark, so give the seam a definite edge */
.hero + .strip{border-top:0}