/* Scientific Integrity Peptide Research — draft storefront.
   Palette and layout modeled on a monochrome, high-contrast research catalog
   (sampled from VIRX Research: off-white paper, near-black bands, white type,
   IBM Plex Mono labels, generous spacing). Typography is Montserrat (geometric
   sans) plus IBM Plex Mono. SI chrome lockups from logo-vector/v3; blue is
   reserved as a tiny accent from the logo itself. Not for launch. */

@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#F6F6F5;
  --paper-2:#EFEFEA;
  --white:#FFFFFF;
  --ink:#111114;
  --black:#070707;
  --charcoal:#2A2A2C;
  --muted:#5C5C60;
  --muted-2:#8A8A8E;
  --line:#E2E2DE;
  --line-dark:rgba(255,255,255,.12);
  --silver:#C8C8C4;
  --accent:#1E90FF; /* SI logo only — do not use as a fill */
  --header-h:72px;
  --radius:4px;
  --max:1160px;
  --shadow:0 20px 50px rgba(0,0,0,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:"Montserrat",system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{opacity:.7}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.draft-banner{
  background:var(--black);
  color:var(--silver);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:8px 16px;
  position:relative;z-index:50;
}
.ruo-banner{
  background:var(--ink);
  color:var(--white);
  border-bottom:1px solid var(--line-dark);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  padding:8px 16px;
  position:sticky;top:0;z-index:40;
}
.ruo-banner span{color:var(--silver)}

.site-header{
  background:var(--black);
  color:var(--white);
  position:sticky;top:33px;z-index:39;
  border-bottom:1px solid var(--line-dark);
}
.header-inner,.wrap{
  width:min(var(--max),calc(100% - 48px));
  margin:0 auto;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--white)}
.brand img,.brand img.logo-horizontal{height:44px;width:auto;max-width:min(360px,55vw)}
.brand .word{display:none}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-family:"Montserrat",sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--silver);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white);opacity:1}
.nav-cta{
  border:1px solid var(--white);
  color:var(--white)!important;
  padding:7px 14px;
}
.nav-toggle{display:none;background:none;border:1px solid var(--line-dark);color:var(--white);padding:8px 10px;border-radius:var(--radius);cursor:pointer;font-family:"Montserrat",sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:11px}

.hero{
  background:var(--black);
  color:var(--white);
  padding:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:min(92vh,820px);
  display:flex;
  align-items:center;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:3;padding:72px 0 64px}
.kicker{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--silver);
  margin:0 0 18px;
}
h1,h2,h3{font-family:"Montserrat",sans-serif;font-weight:600;letter-spacing:-.03em;color:inherit;margin:0 0 14px;line-height:1.08}
h1{font-size:clamp(40px,6vw,64px);font-weight:500}
h2{font-size:clamp(28px,4vw,44px);font-weight:500}
h3{font-size:22px}
.hero h1,.hero .lede,.footer-grid h3,.section-navy h2,.section-navy .kicker{color:var(--white)}
.lede{font-size:17px;color:var(--muted);max-width:38em;margin:0 0 28px;font-weight:400}
.hero .lede{color:var(--silver)}
.hero-logo{display:flex;justify-content:center}
.hero-logo img{width:min(340px,100%);filter:drop-shadow(0 12px 30px rgba(0,0,0,.45))}

.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Montserrat",sans-serif;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:12px;border-radius:999px;padding:13px 22px;
  border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--black);color:var(--white)!important;border-color:var(--black)}
.btn-primary:hover{background:var(--charcoal);opacity:1}
.hero .btn-primary,.section-navy .btn-primary,.site-footer .btn-primary{
  background:var(--white);color:var(--black)!important;border-color:var(--white)
}
.hero .btn-primary:hover,.section-navy .btn-primary:hover{background:var(--paper);opacity:1}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)!important}
.hero .btn-ghost,.section-navy .btn-ghost,.site-footer .btn-ghost{border-color:var(--silver);color:var(--white)!important}
.btn-ghost:hover{opacity:1;border-color:currentColor}
.btn-add{padding:7px 12px;font-size:11px}
.btn-disabled,.btn[disabled]{opacity:.4;pointer-events:none}

.coa-strip{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
.coa-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.coa-strip h2{font-size:22px;margin:0 0 4px;color:var(--ink)}
.coa-strip p{margin:0;color:var(--muted);font-size:14px}

.section{padding:80px 0}
.section-navy,.section-dark{background:var(--black);color:var(--white);border:0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.muted{color:var(--muted)}
.section-dark .muted,.section-navy .muted{color:var(--silver)}
.small{font-size:14px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.card:hover{border-color:var(--ink)}
.card-art{
  background:#07070A;
  padding:16px 16px 8px;
  min-height:300px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.card-art img{width:100%;height:290px;object-fit:contain}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:22px;margin:0;color:var(--ink);letter-spacing:-.02em}
.card-desc{font-size:13px;color:var(--muted);margin:0}
.sizes{display:flex;flex-wrap:wrap;gap:6px}
.pill{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  border:1px solid var(--line);color:var(--muted);padding:3px 8px;border-radius:999px;
  background:transparent;
}
.pill.best{border-color:var(--ink);color:var(--ink)}
.price,.price-row{font-family:"IBM Plex Mono",monospace;color:var(--ink);margin:8px 0 0}
.price .amt,.card .from-price{font-size:20px;font-weight:500;letter-spacing:-.02em}
.price .per,.from-price .per{font-size:12px;color:var(--muted);letter-spacing:0}
.price-note,.card-more{font-size:13px;color:var(--muted);margin:8px 0 0}
.card-more{margin-top:auto;padding-top:10px}
.card-more a{letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:600}

.size-prices{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.size-prices li{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0}
.size-prices .sz{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink)}
.size-prices .price{margin:0;font-size:13px}
.size-prices .btn-add{flex-shrink:0}

.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.product-art{
  background:#07070A;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}
.product-art img{width:100%;max-width:560px;margin:0 auto}
.size-table{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0}
.size-table th,.size-table td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}
.size-table th{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;font-weight:400}
.size-table td.lot,.size-table td.price{font-family:"IBM Plex Mono",monospace}
.size-table tr.is-best td{background:rgba(0,0,0,.03)}
.size-btn{cursor:pointer;font-family:inherit}
.size-btn[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.notice{
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:14px 16px;font-size:14px;color:var(--ink);margin:18px 0;
}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.section-dark .feature,.section-navy .feature{background:#111114;border-color:var(--line-dark);color:var(--silver)}
.feature h3{color:var(--ink)}
.section-dark .feature h3,.section-navy .feature h3{color:var(--white)}

form{display:grid;gap:14px;max-width:640px}
label{font-family:"Montserrat",sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--muted)}
input,textarea,select{
  width:100%;background:var(--white);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--radius);padding:12px 14px;font-family:"Montserrat",sans-serif;font-size:15px;
}
input:focus,textarea:focus,select:focus{border-color:var(--ink);outline:none}
textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-size:13px;color:var(--muted)}
.coa-box{display:flex;gap:10px;flex-wrap:wrap;max-width:720px}
.coa-box input{flex:1;min-width:240px}
.coa-result{margin-top:24px;max-width:720px}
.lot-list{display:grid;grid-template-columns:1fr;gap:0;margin-top:16px;font-size:14px}
.coa-library{width:100%;border-collapse:collapse;margin-top:12px}
.coa-library th,.coa-library td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.coa-library th{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400}
.coa-library .lot{font-family:"IBM Plex Mono",monospace;font-size:13px}
.coa-pending{color:var(--muted);font-size:13px}

.site-footer{background:var(--black);color:var(--silver);padding:56px 0 32px;border:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-logo,.footer-logo.logo-stacked{height:80px;width:auto;margin-bottom:14px}
.site-footer a{color:var(--white)}
.site-footer h3{color:var(--white);font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.disclaimer{font-size:12px;line-height:1.65;color:var(--muted-2);border-top:1px solid var(--line-dark);padding-top:20px}
.legal-meta{margin-top:16px;font-size:12px;color:var(--muted-2)}
.contact-block{margin:6px 0}
hr.line{border:0;border-top:1px solid var(--line);margin:32px 0}

.stock{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stock.in_stock{color:var(--ink)}
.badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line);color:var(--muted)}

.gate[hidden]{display:none !important}

.quote-tray{
  position:fixed;right:20px;bottom:20px;z-index:45;
  background:var(--black);color:var(--white);
  border:1px solid var(--line-dark);border-radius:8px;
  padding:12px 16px;min-width:260px;max-width:360px;
  box-shadow:0 16px 40px rgba(0,0,0,.3);
}
.quote-tray[hidden]{display:none}
.quote-tray-inner{display:flex;flex-direction:column;gap:10px}
.quote-toggle{background:none;border:0;color:var(--white);font-family:"Montserrat",sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:600;cursor:pointer;text-align:left}
.quote-panel h2{font-size:16px;color:var(--white)}
.quote-panel ul{list-style:none;margin:0;padding:0;font-size:13px}
.quote-panel li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-dark)}
.quote-remove{background:none;border:0;color:var(--silver);cursor:pointer;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.quote-total{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--silver)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media (max-width:900px){
  .hero-grid,.product-hero,.grid,.features,.footer-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;background:var(--black);padding:16px 20px 20px;border-bottom:1px solid var(--line-dark);gap:14px}
  .site-header.open .nav{display:flex}
  .header-inner{position:relative}
  .hero{padding:48px 0 48px}
  .section{padding:56px 0}
  .site-header{top:40px}
  .coa-strip-inner{align-items:flex-start}
}
@media (max-width:600px){
  .wrap,.header-inner{width:min(var(--max),calc(100% - 32px))}
  .draft-banner,.ruo-banner{font-size:10px;letter-spacing:.08em}
}


/* ------------------------------------------------------------------
   Entrance gate, hero motion, bottle cards, gift-box feature.
   Original SI motion (not a copy of any third-party assets).
   ------------------------------------------------------------------ */

html:not(.gate-ok){overflow:hidden}
html:not(.gate-ok) body{overflow:hidden}

.gate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(40,48,58,.55), transparent 60%),
    #070707;
  color:var(--silver);
  opacity:1;
  visibility:visible;
  transition:opacity .7s ease, visibility .7s ease;
}
html.gate-ok .gate{
  opacity:0;visibility:hidden;pointer-events:none;
}
.gate-card{
  width:min(560px,100%);
  background:#0B0B0C;
  color:var(--silver);
  border:1px solid var(--line-dark);
  border-radius:8px;
  padding:40px 36px 36px;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.gate-logo{display:block;height:52px;width:auto;max-width:min(360px,100%);margin:0 auto 22px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.gate-card h2{color:var(--white);font-size:clamp(28px,5vw,40px);text-align:center}
.gate-card .kicker,.gate-card p{text-align:center}
.gate-card .actions{margin-top:22px;justify-content:center}
.gate-checks{display:flex;flex-direction:column;gap:12px;margin:22px 0 4px;text-align:left}
.gate-check{
  display:flex;align-items:flex-start;gap:12px;
  font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:0;
  text-transform:none;font-size:14px;color:var(--silver);
  line-height:1.45;cursor:pointer;
}
.gate-check input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin-top:1px;flex:0 0 20px;
  border:1px solid var(--silver);border-radius:3px;background:transparent;
  cursor:pointer;position:relative;
}
.gate-check input:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.gate-check input:checked{background:var(--white);border-color:var(--white)}
.gate-check input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #070707;border-width:0 2px 2px 0;transform:rotate(45deg);
}
#gate-accept:disabled,.btn[disabled]{opacity:.38;pointer-events:none;cursor:not-allowed}

/* Hero atmosphere + opening motion */
.hero-atmos,.hero-shade{position:absolute;inset:0;pointer-events:none}
.hero-atmos{z-index:0;transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-8px),0);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.hero-shade{z-index:2;background:linear-gradient(90deg,rgba(7,7,7,.72) 0%,rgba(7,7,7,.35) 42%,transparent 68%)}
.hero-word{
  position:absolute;right:-2vw;bottom:-6%;
  font-family:"Montserrat",sans-serif;font-weight:600;
  font-size:clamp(180px,28vw,460px);line-height:.8;letter-spacing:-.07em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
  user-select:none;
}
.hero-cloud{
  position:absolute;border-radius:50%;
  background:radial-gradient(closest-side,rgba(200,210,220,.18),rgba(200,210,220,.08) 40%,transparent 70%);
  will-change:transform;
}
.hero-cloud.c1{width:75vw;height:55vh;left:-18vw;top:-8%;animation:si-drift-a 42s ease-in-out infinite alternate}
.hero-cloud.c2{width:65vw;height:50vh;right:-16vw;top:28%;animation:si-drift-b 54s ease-in-out infinite alternate}
.hero-particles{position:absolute;inset:0;overflow:hidden}
.hero-particles::before{
  content:"";position:absolute;left:0;top:100%;width:2px;height:2px;border-radius:50%;
  animation:si-rise 48s linear infinite;
  box-shadow:
    6vw 80px rgba(200,210,220,.55), 14vw 300px rgba(200,210,220,.35),
    22vw 140px rgba(200,210,220,.5), 31vw 520px rgba(200,210,220,.4),
    40vw 240px rgba(200,210,220,.35), 49vw 400px rgba(200,210,220,.45),
    58vw 60px rgba(200,210,220,.5), 67vw 360px rgba(200,210,220,.55),
    76vw 500px rgba(200,210,220,.4), 85vw 180px rgba(200,210,220,.5),
    93vw 620px rgba(200,210,220,.4);
}
.hero-mol{
  position:absolute;inset:0;z-index:1;opacity:.18;pointer-events:none;
}
.hero-copy{position:relative;z-index:3}
.hero-stage{
  position:relative;z-index:3;min-height:520px;
  display:flex;align-items:center;justify-content:center;
  transform:translate3d(calc(var(--mx,0)*18px),calc(var(--my,0)*10px),0);
  transition:transform 1s cubic-bezier(.2,.8,.2,1);
}
.hero-dial{position:absolute;inset:8% 6%;pointer-events:none}
.hero-halo{
  position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(200,210,220,.16),transparent 68%);
  animation:si-breathe 6s ease-in-out infinite;
}
.hero-ring{
  position:absolute;inset:14%;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  animation:si-spin 80s linear infinite;
}
.hero-orbit{
  position:absolute;inset:4%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.1);
  animation:si-spin 50s linear infinite reverse;
}
.hero-vials{position:relative;width:min(420px,100%);aspect-ratio:3/4;animation:si-float 6.5s ease-in-out infinite}
.hero-vial{
  margin:0;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translate3d(0,36px,0) scale(.96);
  animation:si-vial-swap 12s cubic-bezier(.4,0,.2,1) infinite;
}
.hero-vial:nth-child(1){animation-delay:0s}
.hero-vial:nth-child(2){animation-delay:4s}
.hero-vial:nth-child(3){animation-delay:8s}
.hero-vial img{width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));position:relative}
.hero-shine{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:8px;
}
.hero-shine::before{
  content:"";position:absolute;top:-30%;left:-40%;width:36%;height:160%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.16) 48%,transparent 100%);
  animation:si-sweep 5.5s ease-in-out infinite;
  transform:translate3d(-120%,0,0) rotate(18deg);
}

/* Staggered text reveal — plays after the gate fades, or immediately if already accepted */
.hero .reveal{opacity:0;transform:translate3d(0,22px,0)}
html.gate-ok .hero.is-playing .reveal{animation:si-in .9s cubic-bezier(.2,.8,.2,1) forwards}
html.gate-ok .hero.is-playing .reveal:nth-child(1){animation-delay:.05s}
html.gate-ok .hero.is-playing .reveal:nth-child(2){animation-delay:.18s}
html.gate-ok .hero.is-playing .reveal:nth-child(3){animation-delay:.32s}
html.gate-ok .hero.is-playing .reveal:nth-child(4){animation-delay:.46s}

.hero.is-paused *,.hero.is-paused *::before,.hero.is-paused *::after{animation-play-state:paused !important}

/* Gift box / RESEARCH WITH INTEGRITY */
.feature-box{background:var(--black);color:var(--white);padding:80px 0}
.feature-box-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.feature-box-photo{margin:0;border-radius:6px;overflow:hidden;background:#07070A}
.feature-box-photo img{width:100%;height:auto;display:block}
.feature-box h2{color:var(--white);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.feature-box .lede{color:var(--silver)}

/* Scroll reveals + card hover lift/shine */
.js-reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js-reveal.is-in{opacity:1;transform:none}
.card{transition:transform .35s ease,border-color .25s ease,box-shadow .35s ease;position:relative}
.card:hover{transform:translateY(-8px);border-color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.12);opacity:1}
.card-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s ease;
}
.card:hover .card-art::after{transform:translateX(120%)}

.size-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
.size-btn{cursor:pointer;background:transparent}
.size-btn[aria-pressed="true"],.size-table tr.is-active td{outline:1px solid var(--ink)}

@keyframes si-drift-a{to{transform:translate3d(16vw,-6vh,0) scale(1.12)}}
@keyframes si-drift-b{to{transform:translate3d(-18vw,-5vh,0) scale(.96)}}
@keyframes si-rise{to{transform:translate3d(0,-1800px,0)}}
@keyframes si-float{50%{transform:translate3d(0,-12px,0)}}
@keyframes si-breathe{50%{opacity:.55;transform:scale(1.07)}}
@keyframes si-spin{to{transform:rotate(360deg)}}
@keyframes si-sweep{
  0%{transform:translate3d(-140%,0,0) rotate(18deg);opacity:0}
  12%{opacity:1}
  40%{opacity:1}
  55%,100%{transform:translate3d(280%,0,0) rotate(18deg);opacity:0}
}
@keyframes si-in{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes si-vial-swap{
  0%{opacity:0;transform:translate3d(0,36px,0) scale(.96)}
  8%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  28%{opacity:1;transform:translate3d(0,-6px,0) scale(1.01)}
  33.33%{opacity:0;transform:translate3d(0,-30px,0) scale(1.05)}
  100%{opacity:0;transform:translate3d(0,-30px,0) scale(1.05)}
}

@media (prefers-reduced-motion:reduce){
  .hero-cloud,.hero-particles::before,.hero-halo,.hero-ring,.hero-orbit,
  .hero-vials,.hero-vial,.hero-shine::before,.hero .reveal,.js-reveal,.card,
  .card-art::after,.gate{animation:none !important;transition:none !important}
  .hero .reveal,.js-reveal{opacity:1;transform:none}
  .hero-vial{position:relative;opacity:0}
  .hero-vial:first-child{opacity:1;transform:none;position:relative}
  .hero-atmos,.hero-stage{transform:none}
  .card:hover{transform:none}
}
@media (max-width:900px){
  .hero{min-height:0}
  .hero-grid{padding:48px 0 40px;grid-template-columns:1fr}
  .hero-stage{min-height:380px;order:-1}
  .hero-vials{width:min(300px,80%)}
  .feature-box-grid{grid-template-columns:1fr}
  .hero-shade{background:linear-gradient(180deg,rgba(7,7,7,.15) 0%,rgba(7,7,7,.55) 70%)}
  .card-art,.card-art img{min-height:240px;height:240px}
  .gate-card{padding:28px 22px}
}