/* ============================================================
   EXPERIMENTAL PIXELS — shared stylesheet
   One file, loaded by every page, cached after first visit.
   Order:  tokens → base → layout → shared components →
           home page → contact page → motion / responsive.

   NOTE ON BUTTONS: per the brief, every primary button uses the
   teal→blue→purple gradient from the supplied reference image
   (see .btn--primary). This intentionally overrides the dark
   "Send message" button shown in the rough contact mock-up.
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  --cream:#FFFFFF; --white:#FFFFFF; --warm:#F6F7F9;
  --ink:#18282A; --text2:#566061; --muted:#8C918C;
  --hair:#E4E7EC; --hair2:#EEF0F4;
  --blue:#246FA8; --teal:#2A9DA1; --purple:#7E55BE; --darkteal:#1E4D50;
  --tint-blue:#E4EEF6; --tint-teal:#E2F2F1; --tint-purple:#F0E9F8;

  /* the signature button gradient — left→right: teal, blue, purple */
  --grad:linear-gradient(90deg,var(--teal) 0%,var(--blue) 52%,var(--purple) 100%);

  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --wrap:1180px; --gutter:clamp(20px,5vw,64px);
  --radius:18px; --ease:cubic-bezier(.2,.7,.2,1);
}

/* ============ BASE ============ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:clamp(16px,1.05vw,17px);line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--purple);color:#fff;}

/* visually-hidden but available to screen readers */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;}

/* keyboard focus — visible for everyone, not just :focus-visible fallbacks */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;}

/* skip link */
.skip{position:absolute;left:12px;top:-48px;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:10px;z-index:200;transition:top .2s var(--ease);}
.skip:focus{top:12px;}

/* ============ LAYOUT ============ */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(56px,8vw,116px);position:relative;}
.section--tight{padding-block:clamp(40px,5vw,72px);}

/* ============ SHARED COMPONENTS ============ */

/* eyebrow label */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.eyebrow .idx{color:var(--ink);}
.eyebrow .sq{width:8px;height:8px;border-radius:1.5px;background:var(--teal);flex:none;}
.eyebrow .sq.b{background:var(--blue);}
.eyebrow .sq.p{background:var(--purple);}

/* pixel spectrum + divider */
.pixel-spectrum{display:flex;gap:5px;align-items:center;}
.pixel-spectrum i{width:11px;height:11px;border-radius:2px;display:block;}
.pixel-spectrum i:nth-child(1){background:var(--teal);}
.pixel-spectrum i:nth-child(2){background:var(--blue);}
.pixel-spectrum i:nth-child(3){background:var(--purple);}
.pixel-spectrum i:nth-child(4){background:var(--teal);opacity:.55;}
.pixel-spectrum i:nth-child(5){background:var(--blue);opacity:.32;}
.pixel-divider{display:flex;align-items:center;gap:14px;padding-inline:var(--gutter);max-width:var(--wrap);margin-inline:auto;}
.pixel-divider .line{height:1px;background:var(--hair);flex:1;}
.pixel-divider .dots{display:flex;gap:6px;}
.pixel-divider .dots i{width:9px;height:9px;border-radius:2px;}
.pixel-divider .dots i:nth-child(1){background:var(--teal);}
.pixel-divider .dots i:nth-child(2){background:var(--blue);}
.pixel-divider .dots i:nth-child(3){background:var(--purple);}

/* headings */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.018em;margin:0;}
.h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.02em;line-height:1.04;}
.lede{color:var(--text2);font-size:clamp(17px,1.4vw,20px);line-height:1.55;max-width:48ch;}
.section-head{margin-bottom:clamp(30px,4vw,52px);max-width:64ch;}
.section-head .eyebrow{margin-bottom:18px;}

/* ---------- buttons ----------
   .btn--primary is the gradient reference button (Image 1).
   The gradient is over-sized (200%) so it can glide on hover. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);
  font-weight:700;font-size:15px;padding:14px 24px;border-radius:14px;border:1px solid transparent;
  cursor:pointer;line-height:1;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),
             background-position .5s var(--ease),border-color .25s var(--ease);}
.btn .arr{transition:transform .3s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}

.btn--primary{
  color:#fff;background:var(--grad);background-size:200% 100%;background-position:0 0;
  box-shadow:0 10px 24px -14px rgba(36,111,168,.7);}
.btn--primary:hover{transform:translateY(-2px);background-position:100% 0;
  box-shadow:0 16px 32px -14px rgba(126,85,190,.6);}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hair);}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--ink);background:var(--warm);}

/* larger hero variant — a touch more rounded, like the reference image */
.btn--lg{padding:16px 28px;font-size:16px;border-radius:16px;}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);background:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease);}
.nav.is-stuck{border-bottom-color:var(--hair);background:rgba(255,255,255,.9);}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  font-size:18px;letter-spacing:.02em;text-transform:uppercase;}
.brand svg{width:32px;height:32px;flex:none;}
.nav__links{display:flex;align-items:center;gap:6px;}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--text2);padding:9px 14px;border-radius:9px;
  transition:color .2s,background .2s;}
.nav__links a:hover{color:var(--ink);background:var(--warm);}
.nav__links a.active{color:var(--ink);font-weight:600;}
.nav__burger{display:none;background:none;border:1px solid var(--hair);border-radius:9px;padding:9px;cursor:pointer;}
.nav__burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;}
.nav__burger span+span{margin-top:4px;}
@media(max-width:820px){
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--cream);border-bottom:1px solid var(--hair);padding:12px var(--gutter) 20px;gap:2px;}
  .nav__links.open{display:flex;}
  .nav__links a{padding:13px;font-size:16px;}
  .nav__burger{display:block;}
}

/* ---------- LEDGER (How we build) ---------- */
.ledger{border-top:1px solid var(--hair);}
.ledger__row{display:grid;grid-template-columns:64px 1.1fr 2fr;gap:clamp(14px,3vw,40px);align-items:baseline;
  padding:26px 8px;border-bottom:1px solid var(--hair);position:relative;
  transition:background .3s var(--ease),padding-left .3s var(--ease);}
.ledger__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--teal);
  transition:width .3s var(--ease);}
.ledger__row:hover{background:var(--warm);padding-left:18px;}
.ledger__row:hover::before{width:3px;}
.ledger__row:nth-child(2)::before{background:var(--blue);}
.ledger__row:nth-child(3)::before{background:var(--purple);}
.ledger__row:nth-child(4)::before{background:var(--teal);}
.ledger__row:nth-child(5)::before{background:var(--blue);}
.ledger__no{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.05em;}
.ledger__name{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;}
.ledger__desc{color:var(--text2);font-size:15.5px;line-height:1.55;}
@media(max-width:720px){.ledger__row{grid-template-columns:48px 1fr;}.ledger__desc{grid-column:1/-1;}}

/* ---------- FOOTER ---------- */
.footer{padding-block:clamp(48px,6vw,80px) 36px;border-top:1px solid var(--hair2);}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px;}
.footer__brand .brand{margin-bottom:16px;}
.footer__brand p{color:var(--text2);font-size:14.5px;max-width:34ch;}
.footer__col h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;font-weight:500;}
.footer__col a{display:block;color:var(--text2);font-size:14.5px;padding:5px 0;transition:color .2s;}
.footer__col a:hover{color:var(--ink);}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding-top:26px;border-top:1px solid var(--hair);}
.footer__bottom small{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em;}
.footer__bottom nav{display:flex;gap:14px;align-items:center;}
.footer__bottom nav a{font-size:13.5px;color:var(--text2);transition:color .2s;}
.footer__bottom nav a:hover{color:var(--ink);}
.footer__bottom nav .sep{color:var(--hair);}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr 1fr;}}

/* ---------- REVEALS + LOAD STAGGER ---------- */
html.js:not(.reduced) .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);}
html.js:not(.reduced) .reveal.is-in{opacity:1;transform:none;}
html.js:not(.reduced) [data-stagger]>*{opacity:0;transform:translateY(12px);
  transition:opacity .38s var(--ease),transform .38s var(--ease);}
html.js:not(.reduced) [data-stagger].is-in>*{opacity:1;transform:none;}
html.js:not(.reduced) .load{opacity:0;transform:translateY(18px);animation:loadup .8s var(--ease) forwards;}
@keyframes loadup{to{opacity:1;transform:none;}}
html.js:not(.reduced) .load.d1{animation-delay:.05s;}
html.js:not(.reduced) .load.d2{animation-delay:.16s;}
html.js:not(.reduced) .load.d3{animation-delay:.27s;}
html.js:not(.reduced) .load.d4{animation-delay:.40s;}
html.js:not(.reduced) .load.d5{animation-delay:.52s;}

/* =====================================================================
   HOME PAGE (index.html)
   ===================================================================== */

/* hero — two columns: copy left, bubbling flask right */
.hero{padding-block:clamp(8px,2vw,24px) clamp(40px,6vw,90px);position:relative;overflow:hidden;}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;}
.hero__title{font-family:var(--display);font-weight:600;font-size:clamp(38px,6vw,66px);
  line-height:1.02;letter-spacing:-.025em;color:var(--ink);}
.hero__sub{color:var(--text2);font-size:clamp(17px,1.7vw,21px);line-height:1.55;
  max-width:38ch;margin:22px 0 32px;}
.hero__sub b{color:var(--ink);font-weight:600;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;}

/* flask art + bubble canvas.
   The PNG (764×1080) sits at the BOTTOM of a taller 764×1447 box; the
   canvas fills the whole box so escaping pixels can rise into the space
   above the flask mouth. Keep this aspect ratio — the bubble geometry
   is calibrated to it. */
.flask-hero{position:relative;width:min(46vmin,300px);aspect-ratio:764/1447;
  margin-inline:auto;justify-self:center;}
.flask-hero__art{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;}
.flask-hero__cv{position:absolute;inset:0;width:100%;height:100%;cursor:grab;}
.flask-hero__cv:active{cursor:grabbing;}
/* no-JS / reduced-motion → show the static flask only, hide the canvas */
html:not(.js) .flask-hero__cv,
html.reduced .flask-hero__cv{display:none;}

.hint{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;}
.hint .dot{width:7px;height:7px;border-radius:2px;background:var(--purple);}
html.reduced .hint{display:none;}

@media(max-width:820px){
  .hero__grid{grid-template-columns:1fr;gap:24px;text-align:left;}
  .flask-hero{order:-1;width:min(54vmin,240px);margin-inline:0;justify-self:start;}
}

/* in the lab (future app slot) */
.lab__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.labcard{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;min-height:230px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);}
.labcard:hover{transform:translateY(-4px);box-shadow:0 24px 48px -30px rgba(24,40,42,.32);border-color:var(--hair2);}
.labcard__icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;}
.labcard__flask{width:30px;height:30px;display:block;}
.lc-glass{fill:var(--white);}
.lc-liquid{fill:currentColor;}
.lc-bub{fill:var(--white);opacity:.78;}
.lc-stroke{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;}
.lc-cap{fill:var(--ink);}
.labcard:nth-child(1) .labcard__icon{background:var(--tint-teal);color:var(--teal);}
.labcard:nth-child(2) .labcard__icon{background:var(--tint-blue);color:var(--blue);}
.labcard:nth-child(3) .labcard__icon{background:var(--tint-purple);color:var(--purple);}
.labcard__badge{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--warm);border:1px solid var(--hair2);padding:5px 9px;border-radius:7px;align-self:flex-start;}
.labcard__name{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink);}
.labcard__desc{color:var(--text2);font-size:14.5px;line-height:1.5;flex:1;}
.labcard__deco{position:absolute;right:-8px;bottom:-8px;display:grid;grid-template-columns:repeat(3,11px);gap:5px;opacity:.5;}
.labcard__deco i{width:11px;height:11px;border-radius:2px;background:var(--hair);}
@media(max-width:820px){.lab__grid{grid-template-columns:1fr;}}

/* notify / waitlist band — light gray card on the white page */
.notify{background:#EEF0F3;color:var(--ink);border:1px solid var(--hair);border-radius:28px;
  padding:clamp(40px,6vw,76px);position:relative;overflow:hidden;text-align:center;}
.notify__pix{position:absolute;inset:0;pointer-events:none;}
.notify__pix i{position:absolute;border-radius:4px;}
html.js:not(.reduced) .notify__pix i{animation:nbob 14s var(--ease) infinite alternate;animation-delay:var(--del,0s);}
@keyframes nbob{0%{transform:translateY(0) rotate(0);}100%{transform:translateY(-22px) rotate(10deg);}}
.notify h2{font-size:clamp(28px,4.2vw,48px);color:var(--ink);margin:0 0 14px;position:relative;}
.notify p{color:var(--text2);max-width:46ch;margin:0 auto 28px;position:relative;}
.notify__form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:480px;margin:0 auto;position:relative;}
.notify__form input[type=email]{flex:1;min-width:220px;font-family:var(--body);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--hair);border-radius:12px;padding:14px 16px;outline:none;transition:box-shadow .2s,border-color .2s;}
.notify__form input[type=email]:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(42,157,161,.25);}
.notify__form .btn{flex:none;}
.notify__msg{min-height:22px;margin-top:14px;font-size:14px;color:var(--darkteal);font-weight:600;position:relative;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.notify__msg.show{opacity:1;transform:none;}
.notify__fine{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--muted);position:relative;}

/* =====================================================================
   CONTACT PAGE (contact.html)
   ===================================================================== */
.contact{padding-block:clamp(40px,6vw,90px);}
.contact__head{margin-bottom:clamp(32px,5vw,56px);}
.contact__head h1{font-family:var(--display);font-weight:700;font-size:clamp(44px,7vw,84px);
  line-height:.98;letter-spacing:-.035em;}
.contact__head p{color:var(--text2);font-size:clamp(17px,1.6vw,21px);line-height:1.5;
  margin:18px 0 0;max-width:50ch;}

.contact__grid{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(36px,7vw,90px);align-items:start;}

/* form */
.form__field{margin-bottom:22px;}
.form__field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:9px;color:var(--ink);}
.form__field label .req{color:var(--blue);margin-left:2px;}
.form__field input,
.form__field textarea{width:100%;font-family:var(--body);font-size:15.5px;color:var(--ink);
  background:var(--warm);border:1px solid var(--hair);border-radius:14px;padding:15px 16px;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;}
.form__field input::placeholder,
.form__field textarea::placeholder{color:var(--muted);}
.form__field input:focus,
.form__field textarea:focus{background:#fff;border-color:var(--teal);box-shadow:0 0 0 3px rgba(42,157,161,.18);}
.form__field textarea{min-height:170px;resize:vertical;line-height:1.55;}
.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"]{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.14);}
.form__error{display:block;min-height:1em;margin-top:7px;font-size:13px;color:#C0392B;font-weight:500;}

.form__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px;}
.form__fine{color:var(--text2);font-size:13.5px;margin:16px 0 0;}
.form__status{margin-top:16px;font-size:14.5px;font-weight:600;color:var(--darkteal);
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.form__status.show{opacity:1;transform:none;}

/* side meta panel */
.contact__meta{border-left:1px solid var(--hair);padding-left:clamp(24px,3vw,40px);}
.contact__meta dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;}
.contact__meta dd{margin:0 0 32px;font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:-.01em;color:var(--ink);}
.contact__meta dd:last-child{margin-bottom:0;}

@media(max-width:860px){
  .contact__grid{grid-template-columns:1fr;gap:40px;}
  .contact__meta{border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-top:32px;}
}

/* =====================================================================
   REDUCED MOTION — belt & suspenders
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .reveal,[data-stagger]>*,.load{opacity:1!important;transform:none!important;}
}