/* ===========================================================================
   Arizen Bio Labs — landing page
   Clean white + blue, geometric sans, centered editorial column.
   =========================================================================== */

:root{
  --blue:#2563eb; --blue-600:#1d4ed8; --blue-700:#1b45c4;
  --blue-50:#eff4ff; --blue-100:#dce7fe; --blue-200:#c3d6fd;
  --ink:#0d1424; --ink-2:#4b566b; --muted:#78839a;
  --line:#e9edf4; --line-2:#f2f5fa;
  --radius:14px; --pill:999px;
  --col:560px;              /* centered hero column */
  --maxw:1140px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-sm:0 1px 2px rgba(13,20,36,.05);
  --shadow-blue:0 12px 26px -10px rgba(37,99,235,.5);
  --ff:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ff); color:var(--ink); background:#fff;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{list-style:none; padding:0}
svg{flex:none}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem)}
.col{max-width:var(--col); margin-inline:auto}

/* ---------- Header ---------- */
.hdr{position:sticky; top:0; z-index:70; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; height:74px}
.mark{font-weight:800; font-size:1.18rem; letter-spacing:.06em; white-space:nowrap}
.mark em{font-style:normal; color:var(--blue)}

/* ---------- Button ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-weight:700;
  font-size:1rem; padding:1rem 2rem; border-radius:var(--pill);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s}
.btn svg{width:1.05em; height:1.05em; transition:transform .25s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue); color:#fff; box-shadow:var(--shadow-blue)}
.btn--primary:hover{background:var(--blue-600); transform:translateY(-2px)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--lg{padding:1.1rem 2.4rem; font-size:1.05rem}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2.6rem,6vw,4.4rem) clamp(3rem,7vw,5rem)}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.1rem); font-weight:800; line-height:1.12;
  letter-spacing:-.025em}
.hero h1 em{font-style:normal; color:var(--blue)}
.hero__sub{margin-top:1.1rem; color:var(--ink-2); font-size:1.02rem; max-width:46ch}

.promo{margin-top:1.8rem; background:var(--blue-50); border-radius:var(--radius); padding:1.1rem 1.3rem}
.promo b{display:block; color:var(--blue); font-size:1.08rem; font-weight:800; letter-spacing:-.01em}
.promo span{display:block; margin-top:.3rem; font-size:.88rem; color:var(--ink-2); line-height:1.5}

.hero .btn{margin-top:1.8rem}
.hero__note{margin-top:.8rem; font-size:.85rem; font-weight:600; color:var(--blue);
  opacity:0; transition:opacity .25s var(--ease)}
.hero__note.show{opacity:1}

.trust{margin-top:2.6rem; display:grid; gap:.1rem}
.trust li{display:flex; align-items:center; gap:.9rem; padding:.55rem 0}
.trust__ic{width:38px; height:38px; flex:none; display:grid; place-items:center;
  background:var(--blue-50); border-radius:11px; color:var(--blue)}
.trust__ic svg{width:18px; height:18px}
.trust span{font-size:.79rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase;
  line-height:1.35}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--line); padding-block:2.6rem; font-size:.88rem; color:var(--muted)}
.ftr__in{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.8rem; justify-content:space-between}
.ftr__in a{font-weight:600}
.ftr__in a:hover{color:var(--blue)}
.ftr__legal{font-size:.8rem; line-height:1.6; color:var(--muted); padding-top:1.4rem;
  margin-top:1.4rem; border-top:1px solid var(--line-2)}

/* ---------- Reveal ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
}