/* ============================================================
   CRST Design System — tokens + primitives
   Black × Safety Yellow #FFD100 · industrial tool aesthetic
   ============================================================ */
:root{
  /* color tokens — aligned to CRST design-system spec */
  --black:#0A0A0B;
  --ink:#1B1B1F;        /* bg-2 · cards / panels */
  --ink-2:#26262C;      /* bg-3 · raised / inputs */
  --bg-1:#131316;       /* sections */
  --bg-4:#32323A;       /* hover surfaces */
  --yellow:#FFD400;
  --yellow-bright:#FFE34D;
  --yellow-press:#E6BE00;
  --amber:#FFB020;
  --paper:#F4F4F2;
  --paper-1:#FFFFFF;
  --white:#FFFFFF;
  --steel:#9B9BA8;      /* fg-2 · secondary text */
  --steel-2:#6C6C78;    /* fg-3 · faint text */
  --line:#34343C;       /* hairline borders */
  --line-2:#45454F;     /* stronger dividers */
  --line-light:#E5E7EA;
  --ok:#36D27A;
  --info:#45A6FF;
  --danger:#FF4438;

  /* type */
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --maxw:1240px;
  --radius:6px;
  --radius-lg:10px;

  /* elevation */
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 4px 16px rgba(0,0,0,.45);
  --shadow-3:0 12px 40px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(255,212,0,.35),0 0 28px rgba(255,212,0,.22);
  --inset:inset 0 1px 0 rgba(255,255,255,.05);

  /* motion */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-snap:cubic-bezier(0.4,0,0.2,1);
  --dur-fast:120ms;
  --dur:220ms;
  --dur-slow:420ms;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--black);
  color:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---- typographic primitives ---- */
.display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:0.98;
  text-wrap:balance;
}
.h1{font-family:var(--font-display);font-weight:800;letter-spacing:-0.02em;line-height:1.02;font-size:clamp(38px,5.2vw,68px);text-wrap:balance;margin:0;}
.h2{font-family:var(--font-display);font-weight:700;letter-spacing:-0.015em;line-height:1.05;font-size:clamp(28px,3.6vw,44px);text-wrap:balance;margin:0;}
.h3{font-family:var(--font-display);font-weight:700;letter-spacing:-0.01em;line-height:1.1;font-size:clamp(20px,2vw,26px);margin:0;}
.eyebrow{
  font-family:var(--font-mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:12px;
  color:var(--yellow);
}
.eyebrow .hi{color:var(--yellow)}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1;letter-spacing:-0.01em;}
.lead{font-size:clamp(16px,1.3vw,19px);color:var(--steel);line-height:1.6;}
.muted{color:var(--steel)}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:clamp(56px,7vw,104px) 0;}
.paper{background:var(--paper);color:var(--ink);}
.paper .muted,.paper .lead{color:var(--steel-2);}
.paper .eyebrow{color:var(--ink);}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  padding:14px 24px;border-radius:var(--radius);border:1.5px solid transparent;
  cursor:pointer;transition:transform var(--dur-fast) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  line-height:1;white-space:nowrap;text-decoration:none;
}
.btn:active{transform:translateY(1px)}
.btn-yellow{background:var(--yellow);color:#000;}
.btn-yellow:hover{background:var(--yellow-bright);transform:translateY(-1px);box-shadow:var(--glow);}
.btn-yellow:active{background:var(--yellow-press);transform:translateY(1px);box-shadow:none;}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow);background:var(--ink-2);}
.btn-ghost-dark{background:transparent;color:var(--ink);border-color:#cfd3d8;}
.btn-ghost-dark:hover{border-color:#000;}
.btn-dark{background:#000;color:#fff;}
.btn-dark:hover{background:#1c1c1c}
.btn-lg{padding:17px 30px;font-size:16px;}
.btn .arw{transition:transform .15s ease}
.btn:hover .arw{transform:translateX(3px)}

/* ---- spec chips ---- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  padding:5px 9px;border-radius:4px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:#cfd4da;
  white-space:nowrap;letter-spacing:0;
}
.paper .chip{background:#fff;border-color:var(--line-light);color:#3a3f45;}
.chip-yellow{background:var(--yellow);border-color:var(--yellow);color:#000;font-weight:600;}

/* ---- cert badge ---- */
.cert-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:0.02em;
  padding:9px 14px;border:1.5px solid currentColor;border-radius:5px;
  color:var(--steel);background:transparent;text-transform:uppercase;
}
.paper .cert-badge{color:var(--steel-2)}

/* ---- hazard stripe ---- */
.hazard{
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 18px,#0A0A0A 18px 36px);
}
.hazard-thin{height:6px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,#0A0A0A 12px 24px);}

/* ---- divider ---- */
.rule{height:1px;background:var(--line);border:0;}
.paper .rule{background:var(--line-light)}

/* ---- spec ticker (marquee) ---- */
.ticker{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.ticker-track{display:inline-flex;gap:0;animation:marquee 38s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- cards ---- */
.card{background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--inset);}
.paper .card{background:#fff;border-color:var(--line-light);box-shadow:none;}

/* ---- focus ---- */
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;}

/* scrollbar for product rails */
.no-scrollbar::-webkit-scrollbar{height:8px}
.no-scrollbar::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}