/* ===== base.css — reset, tokens, typography ===== */
:root{
  --red:#e10600;
  --red-deep:#b00500;
  --red-soft:#ff2b24;
  --black:#0a0a0c;
  --ink:#141417;
  --ink-2:#1c1c21;
  --line:#2a2a30;
  --muted:#9a9aa4;
  --text:#ececf1;
  --text-dim:#c4c4cd;
  --white:#ffffff;
  --bg:#0c0c0f;
  --radius:16px;
  --radius-sm:10px;
  --maxw:1200px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --shadow-red:0 12px 40px rgba(225,6,0,.25);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ff-head:"Onest",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
ul{list-style:none}

h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--white)}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
h4{font-size:1.05rem}
p{color:var(--text-dim)}
strong{color:var(--white);font-weight:600}

::selection{background:var(--red);color:#fff}

/* focus accessibility */
a:focus-visible,button:focus-visible{outline:2px solid var(--red-soft);outline-offset:3px;border-radius:6px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-head);font-weight:700;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-soft);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);display:inline-block}

.section{padding:clamp(56px,8vw,110px) 0}
.section-head{max-width:680px;margin-bottom:clamp(32px,5vw,56px)}
.section-head p{margin-top:.85rem;font-size:1.05rem}

.lead{font-size:1.2rem;color:var(--text);line-height:1.7}

.scroll-fade{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.scroll-fade.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .scroll-fade{opacity:1;transform:none}
}