/* ============================================================
   PREMIUM LAB EC — Design System
   Monocromo clinico · DM Sans + IBM Plex Mono
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#0A0A0A;
  --ink-80:rgba(10,10,10,.80);
  --ink-60:rgba(10,10,10,.60);
  --ink-40:rgba(10,10,10,.40);
  --ink-12:rgba(10,10,10,.12);
  --ink-06:rgba(10,10,10,.06);

  --paper:#FFFFFF;
  --paper-2:#FAFAFA;
  --paper-3:#F4F4F3;
  --paper-4:#ECECEA;

  --line:#E4E4E1;
  --line-soft:#EFEFED;
  --muted:#6E6E6B;
  --muted-2:#9C9C98;

  --font-display:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',SFMono-Regular,Consolas,monospace;

  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;
  --s5:24px;  --s6:32px;  --s7:48px;  --s8:64px;
  --s9:96px;  --s10:128px; --s11:160px;

  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:40px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(10,10,10,.04), 0 2px 8px rgba(10,10,10,.03);
  --sh-2:0 2px 4px rgba(10,10,10,.04), 0 12px 32px rgba(10,10,10,.06);
  --sh-3:0 4px 8px rgba(10,10,10,.05), 0 24px 56px rgba(10,10,10,.10);
  --sh-ink:0 8px 24px rgba(10,10,10,.24);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms;
  --t-mid:320ms;
  --t-slow:640ms;

  --maxw:1280px;
  --gutter:clamp(20px,5vw,64px);
  --header-h:76px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{
  font-family:var(--font-body);
  background:var(--paper-2);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ---------- 3. TYPOGRAPHY ---------- */
.display-xl,.display-lg,.display-md,.display-sm,h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:1.04;
}
.display-xl{font-size:clamp(46px,7.2vw,100px)}
.display-lg{font-size:clamp(36px,5.2vw,72px)}
.display-md{font-size:clamp(29px,3.7vw,50px);line-height:1.08}
.display-sm{font-size:clamp(23px,2.5vw,34px);line-height:1.14;letter-spacing:-0.028em}

.lede{
  font-size:clamp(16px,1.25vw,18.5px);
  line-height:1.62;
  color:var(--muted);
  max-width:52ch;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted-2);
  display:flex;
  align-items:center;
  gap:var(--s3);
}
.eyebrow--ink{color:var(--ink-60)}
.eyebrow::before{
  content:'';
  width:24px;height:1px;
  background:currentColor;
  opacity:.5;
  flex:none;
}
.eyebrow--bare::before{display:none}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,var(--s11))}
.section--tight{padding-block:clamp(56px,7vw,var(--s9))}
.section--ink{background:var(--ink);color:var(--paper)}
.section--paper{background:var(--paper)}

.sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s6);
  flex-wrap:wrap;
  margin-bottom:clamp(36px,4.4vw,var(--s8));
}
.sec-head__text{max-width:64ch}
.sec-head .display-md{margin-top:var(--s4)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s3);
  padding:17px 28px;
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-weight:700;
  font-size:14.5px;
  line-height:1;
  white-space:nowrap;
  border:1.5px solid transparent;
  transition:transform var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             box-shadow var(--t-mid) var(--ease);
  will-change:transform;
}
.btn svg{flex:none;transition:transform var(--t-mid) var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.975)}
.btn--primary{background:var(--ink);color:var(--paper);box-shadow:var(--sh-ink)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(10,10,10,.30)}
.btn--ghost{border-color:var(--ink-12);color:var(--ink);background:var(--paper)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn--invert{background:var(--paper);color:var(--ink)}
.btn--invert:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,255,255,.16)}
.btn--outline-invert{border-color:rgba(255,255,255,.24);color:var(--paper)}
.btn--outline-invert:hover{border-color:var(--paper);background:rgba(255,255,255,.06)}
.btn--sm{padding:12px 20px;font-size:13px}
.btn--block{width:100%}

.link-u{
  position:relative;
  font-weight:700;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  padding-bottom:3px;
}
.link-u::after{
  content:'';
  position:absolute;left:0;bottom:0;
  width:100%;height:1.5px;
  background:currentColor;
  transform-origin:right;
  transition:transform var(--t-mid) var(--ease-out);
}
.link-u:hover::after{transform:scaleX(0);transform-origin:left}

/* ---------- 6. PILLS ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  padding:6px 13px;
  border:1.5px solid var(--ink);
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-weight:700;
  font-size:12.5px;
  line-height:1;
  white-space:nowrap;
}
.pill--soft{border-color:var(--line);color:var(--muted);font-weight:500}
.pill--mono{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 12px;
}
.pill--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.stripe{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  text-align:center;
  padding:9px var(--s4);
}

/* ---------- 7. ANIMATIONS ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes slowZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sweep{0%{transform:translateX(-130%)}100%{transform:translateX(240%)}}
@keyframes gridPan{from{background-position:0 0}to{background-position:60px 60px}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:80ms}
.reveal[data-d="2"]{transition-delay:160ms}
.reveal[data-d="3"]{transition-delay:240ms}
.reveal[data-d="4"]{transition-delay:320ms}
.reveal[data-d="5"]{transition-delay:400ms}
.reveal[data-d="6"]{transition-delay:480ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}