/* Scientific Integrity Peptide Research — Launching December 1, 2026 landing page.
   Black + brushed-silver, SI chrome/blue lockup. No third-party trackers. */

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

:root{
  --black:#070707;
  --ink:#0B0B0C;
  --charcoal:#141416;
  --panel:#101012;
  --white:#F6F6F5;
  --silver:#C8C8C4;
  --silver-hi:#F5F7FA;
  --silver-mid:#C5C9D0;
  --muted:#8A8A8E;
  --line:rgba(255,255,255,.12);
  --accent:#1E90FF;
  --dmt:#58ACFF;
  --max:1080px;
  --ruo-h:38px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark;background:var(--black)}
html,body{margin:0;padding:0;background:var(--black);color:var(--silver);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(--white);text-decoration:none}
a:hover{opacity:.78}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.wrap{width:min(var(--max),calc(100% - 48px));margin:0 auto}

/* ---------- Entrance gate ---------- */
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% 55% at 50% 0%, rgba(48,58,72,.5), transparent 62%),
    #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[hidden]{display:none !important}

.gate-card{
  width:min(540px,100%);
  background:#0B0B0C;
  border:1px solid var(--line);
  border-radius:8px;
  padding:36px 34px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  text-align:center;
}
.gate-logo{display:block;width:min(280px,78%);height:auto;margin:0 auto 20px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.gate-card .kicker{margin-bottom:10px}
.gate-card h2{color:var(--white);font-size:clamp(26px,5vw,36px);font-weight:500;letter-spacing:-.03em;margin:0 0 12px;line-height:1.15}
.gate-card p{margin:0 0 8px;font-size:14.5px;color:var(--silver)}
.gate-checks{display:flex;flex-direction:column;gap:12px;margin:22px 0 6px;text-align:left}
.gate-check{
  display:flex;align-items:flex-start;gap:12px;
  font-weight:500;font-size:14px;color:var(--silver);
  line-height:1.45;cursor:pointer;text-transform:none;letter-spacing:0;
}
.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-card .actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn[disabled],#gate-accept:disabled{opacity:.38;pointer-events:none;cursor:not-allowed}

/* ---------- Shared type & buttons ---------- */
.kicker{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--silver);margin:0 0 14px;
}
h1,h2,h3{font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.03em;color:var(--white);margin:0 0 14px;line-height:1.12}
h2{font-size:clamp(22px,3vw,32px)}
.lede{font-size:17px;color:var(--silver);max-width:34em;margin:0 auto 0;font-weight:400}

.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;background:transparent;color:var(--white);
}
.btn-primary{background:var(--white);color:#070707 !important;border-color:var(--white)}
.btn-primary:hover{background:#E8E8E4;opacity:1}
.btn-ghost{border-color:var(--silver);color:var(--white)!important;background:transparent}
.btn-ghost:hover{border-color:var(--white);opacity:1}

/* ---------- Sticky research-use banner ---------- */
.ruo-banner{
  background:#0A0A0B;
  color:var(--white);
  border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;padding:10px 16px;min-height:var(--ruo-h);
  position:sticky;top:0;z-index:40;
}
.ruo-banner span{color:var(--silver)}

/* ---------- Molecule field ---------- */
.mol-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mol{
  position:absolute;opacity:.22;user-select:none;
  will-change:transform;
  filter:drop-shadow(0 0 16px rgba(200,210,220,.12));
}
.mol-dmt{opacity:.26;filter:drop-shadow(0 0 18px rgba(88,172,255,.2))}
.mol-caf2{opacity:.14 !important}
.mol-caf{width:min(420px,46vw);left:-4%;top:8%;transform:rotate(-14deg);animation:mol-a 72s ease-in-out infinite alternate}
.mol-dmt{width:min(380px,42vw);right:-3%;top:4%;transform:rotate(10deg);animation:mol-b 84s ease-in-out infinite alternate}
.mol-dop{width:min(340px,40vw);left:-6%;top:52%;transform:rotate(16deg);animation:mol-c 66s ease-in-out infinite alternate}
.mol-ghk{width:min(520px,56vw);right:-8%;top:46%;transform:rotate(-8deg);animation:mol-d 90s ease-in-out infinite alternate}
.mol-trp{width:min(320px,38vw);left:18%;bottom:-6%;transform:rotate(-6deg);animation:mol-e 78s ease-in-out infinite alternate}
.mol-caf2{width:min(280px,32vw);right:18%;bottom:4%;opacity:.09;transform:rotate(22deg);animation:mol-a 96s ease-in-out infinite alternate-reverse}

@keyframes mol-a{to{transform:translate3d(7vw,-5vh,0) rotate(-10deg)}}
@keyframes mol-b{to{transform:translate3d(-6vw,6vh,0) rotate(16deg)}}
@keyframes mol-c{to{transform:translate3d(8vw,-4vh,0) rotate(10deg)}}
@keyframes mol-d{to{transform:translate3d(-5vw,-6vh,0) rotate(-14deg)}}
@keyframes mol-e{to{transform:translate3d(5vw,4vh,0) rotate(2deg)}}

/* ---------- Hero ---------- */
.hero{
  position:relative;z-index:1;
  isolation:isolate;
  min-height:calc(100svh - var(--ruo-h));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:32px 0 40px;
  overflow:hidden;
  background:radial-gradient(ellipse 55% 40% at 50% 22%, rgba(90,110,130,.16), transparent 70%);
}
.hero-inner{width:100%;display:flex;flex-direction:column;align-items:center}
.hero-logo{
  position:relative;
  width:min(520px,72vw);
  margin:0 auto 8px;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.hero-logo picture,.hero-logo img{width:100%;height:auto;display:block}
.logo-shine{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:2px;
}
.logo-shine::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.3) 50%,transparent 64%);
  mix-blend-mode:soft-light;
  transform:translate3d(-120%,0,0);
  animation:si-shimmer 8s ease-in-out 1.2s infinite;
}
.launch-kicker{margin:4px 0 8px;color:var(--silver-mid);text-wrap:balance}
.launch-title{
  font-size:clamp(28px,4.6vw,48px);
  font-weight:500;
  letter-spacing:-.03em;
  margin:0 24px 22px;
  background:linear-gradient(180deg,#FFFFFF 0%,#C8CCD4 55%,#9AA0A8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  text-wrap:balance;
}

/* Brushed-silver service banner */
.service-banner{
  width:100%;
  margin:0 0 28px;
  position:relative;
  overflow:hidden;
  padding:13px 28px;
  color:#161618;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.5);
  border-bottom:1px solid rgba(0,0,0,.55);
  box-shadow:
    0 10px 28px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.08) 24%, rgba(0,0,0,.10) 52%, rgba(255,255,255,.22) 80%, rgba(0,0,0,.16) 100%),
    repeating-linear-gradient(90deg,
      #d8d8d3 0px, #ecece6 14px, #c4c4be 28px, #deded8 42px, #d8d8d3 56px),
    linear-gradient(180deg, #f2f2ec, #c2c2bc 50%, #d8d8d2);
}
.service-banner::before,
.service-banner::after{
  content:"";position:absolute;top:0;bottom:0;width:72px;pointer-events:none;z-index:2;
}
.service-banner::before{left:0;background:linear-gradient(90deg, rgba(7,7,7,.28), transparent)}
.service-banner::after{
  right:0;left:auto;width:auto;inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform:translate3d(-120%,0,0);
  animation:si-shimmer 7.5s ease-in-out 2s infinite;
  box-shadow:none;border:0;
}
.service-banner-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:18px;
}
.service-banner-text{
  font-family:"Montserrat",sans-serif;
  font-weight:500;
  font-size:clamp(13px,1.7vw,16px);
  letter-spacing:.06em;
  line-height:1.4;
  color:#161618;
  margin:0;
}
.service-ornament{
  flex:0 0 auto;
  width:44px;height:1px;
  background:linear-gradient(90deg, transparent, #3a3a3c, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.35);
}
@media (max-width:560px){
  .service-ornament{display:none}
  .service-banner{padding:12px 20px}
}

/* Countdown */
.countdown{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin:0 16px 22px;
}
.count-cell{
  min-width:86px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px 12px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.count-num{
  font-family:"IBM Plex Mono",monospace;
  font-weight:500;
  font-size:clamp(28px,4vw,40px);
  line-height:1;
  color:var(--white);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.count-label{
  display:block;margin-top:8px;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.hero-lede{margin:0 24px 14px;max-width:36em;text-wrap:balance}
.hero-ruo{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver-hi);
  margin:0 20px;
  padding:8px 14px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Reveals after the gate */
.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:.06s}
html.gate-ok .hero.is-playing .reveal:nth-child(2){animation-delay:.16s}
html.gate-ok .hero.is-playing .reveal:nth-child(3){animation-delay:.26s}
html.gate-ok .hero.is-playing .reveal:nth-child(4){animation-delay:.36s}
html.gate-ok .hero.is-playing .reveal:nth-child(5){animation-delay:.46s}
html.gate-ok .hero.is-playing .reveal:nth-child(6){animation-delay:.56s}
html.gate-ok .hero.is-playing .reveal:nth-child(7){animation-delay:.66s}
html.gate-ok .hero.is-playing .reveal:nth-child(8){animation-delay:.76s}

@keyframes si-in{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes si-shimmer{
  0%{transform:translate3d(-140%,0,0)}
  35%{transform:translate3d(140%,0,0)}
  100%{transform:translate3d(140%,0,0)}
}

/* ---------- About / contact ---------- */
.section{position:relative;z-index:1;padding:64px 0}
.section-alt{
  background:linear-gradient(180deg, rgba(10,10,12,.88), rgba(16,16,20,.92) 40%, rgba(10,10,12,.9));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.section .kicker{margin-bottom:10px}
.lower-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:48px 64px;
  align-items:start;max-width:980px;margin:0 auto;
}
.lower-grid .about-col,.lower-grid .contact-block{text-align:left}
.about-col p{margin:0;color:var(--silver);font-size:16.5px;line-height:1.7}
.contact-block{text-align:left;max-width:none;margin:0}
.contact-block address{font-style:normal;color:var(--silver);line-height:1.8;margin:0 0 28px}
.contact-block .org{display:block;color:var(--white);font-weight:600;letter-spacing:.02em;margin-bottom:8px}
.contact-block a{color:var(--white)}
.tel,.email{font-family:"IBM Plex Mono",monospace;font-size:14px}

.notify{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;align-items:center;
  margin:0;max-width:520px;
}
.notify input[type="email"]{
  flex:1 1 240px;
  min-height:46px;
  background:#0B0B0C;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--white);
  font-family:"Montserrat",sans-serif;
  font-size:14px;
  padding:12px 18px;
}
.notify input::placeholder{color:var(--muted)}
.notify input:focus-visible{outline:2px solid var(--white);outline-offset:2px;border-color:var(--white)}
.notify-note{margin:12px 0 0;font-size:12px;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;z-index:1;
  background:#050505;
  color:var(--silver);
  border-top:1px solid var(--line);
  padding:48px 0 36px;
  text-align:center;
}
.footer-ruo{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);
  margin:0 0 18px;
}
.footer-legal{max-width:46em;margin:0 auto 22px;font-size:13px;color:var(--muted);line-height:1.7}
.footer-copy{font-size:12px;color:var(--muted);margin:0 0 14px}
.footer-nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.footer-nav a{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.legal-block{
  max-width:46em;margin:0 auto 18px;text-align:left;
  border-top:1px solid var(--line);padding-top:22px;
}
.legal-block h2{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin:0 0 8px}
.legal-block p{font-size:13px;color:var(--muted);margin:0 0 8px;line-height:1.7}

.js-reveal{opacity:0;transform:translate3d(0,20px,0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js-reveal.is-in{opacity:1;transform:none}

@media (max-width:800px){
  .lower-grid{grid-template-columns:1fr;gap:48px}
  .lower-grid .about-col,.lower-grid .contact-block{text-align:center}
  .notify{justify-content:center}
}
@media (max-width:700px){
  .wrap{width:min(var(--max),calc(100% - 32px))}
  .hero{padding:24px 0 32px}
  .hero-logo{width:min(420px,84vw)}
  .count-cell{min-width:68px;padding:12px 8px 10px}
  .ruo-banner{font-size:10px;letter-spacing:.1em;padding:9px 12px}
  .section{padding:48px 0}
}
@media (max-height:980px) and (min-width:800px){
  .hero{padding:20px 0 28px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .mol,.logo-shine::after,.service-banner::after,.hero .reveal,.js-reveal,.gate{
    animation:none !important;transition:none !important;
  }
  .hero .reveal,.js-reveal{opacity:1;transform:none}
  .mol{opacity:.1}
}