/* Shared base styles: reset, layout primitives, typography, buttons, and the
   decorative bloom/plus marks used across multiple pages. Page-specific
   sections (hero, coverage timeline, etc.) stay in each page's own <style>
   block — this file is only for what's genuinely shared. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',-apple-system,'Segoe UE',sans-serif;
  background:var(--white);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"ss01";overflow-x:hidden;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
a{color:inherit}

/* ---------- LAYOUT ---------- */
.inner{max-width:1180px;margin:0 auto;padding:0 30px;position:relative;z-index:2}
.section{padding:118px 0;position:relative;overflow:hidden}
.sec-white{background:var(--white)}
.sec-mist{background:var(--mist)}
.sec-gray{background:var(--gray)}
.sec-dark{background:var(--dark);color:#F3F5F4}

/* ---------- LABELS ---------- */
.kicker{
  font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:26px;
}
.sec-dark .kicker{color:#F3F5F4}
.sec-dark .mlabel{color:var(--muted-d)}
.mlabel{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
}
.mlabel .sl{color:var(--sky)}

/* ---------- TWO-TONE HEADLINES ---------- */
h1,h2,h3{letter-spacing:-0.03em;font-weight:500;line-height:1.02}
.h-xl{font-size:clamp(40px,6.4vw,80px);letter-spacing:-0.04em;line-height:0.98}
.h-lg{font-size:clamp(32px,4.8vw,58px);letter-spacing:-0.035em;line-height:1.02}
.mut{color:inherit;font-weight:600}
.lead{font-size:19px;line-height:1.5;color:var(--body);max-width:52ch}
.sec-dark .lead{color:var(--muted-d)}

/* ---------- BUTTONS (pill + o) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:15px 26px;border-radius:999px;
  font:inherit;font-size:16px;font-weight:500;letter-spacing:-0.01em;
  cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(18,32,29,0.22)}
.btn .o{width:16px;height:16px;flex-shrink:0}
/* Icons: Lucide (https://lucide.dev), ISC License */
.btn-white{background:#fff;color:var(--ink);border-color:#fff}
.btn-white:hover{box-shadow:0 10px 30px rgba(0,0,0,0.18)}
.btn-outline{background:transparent;color:currentColor;border-color:rgba(255,255,255,0.35)}
.btn-outline:hover{background:rgba(255,255,255,0.08);box-shadow:none}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{background:rgba(18,32,29,0.04);box-shadow:none}

/* ---------- CORNER MARKS + CONTOUR LINES ---------- */
.plus{position:absolute;width:18px;height:18px;opacity:0.5;pointer-events:none}
.plus::before,.plus::after{content:"";position:absolute;background:currentColor}
.plus::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.plus::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.contour{position:absolute;pointer-events:none;opacity:0.8}

/* ---------- LOGO-BLOOM PASSIVE BACKGROUND ---------- */
.bloom{position:absolute;pointer-events:none;z-index:0}
.bloom svg{display:block;width:100%;height:100%}
.bloom rect{fill:var(--accent)}
.bloom--ink rect{fill:#ffffff}
@keyframes bloomspin{to{transform:rotate(360deg)}}
.bloom--spin{animation:bloomspin 120s linear infinite}
.bloom--spin-rev{animation:bloomspin 150s linear infinite reverse}
.bloom--spin-slow{animation:bloomspin 260s linear infinite}
.hero .inner,.section .inner{position:relative;z-index:2}

/* ---------- SCROLL-REVEAL (only hides when JS is active) ---------- */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-l{opacity:0;transform:translateX(-34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal-l.in{opacity:1;transform:none}
.js .reveal-s{opacity:0;transform:scale(.96);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal-s.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-l,.reveal-s{opacity:1!important;transform:none!important}
}

/* ---------- RESPONSIVE (shared) ---------- */
@media(max-width:600px){
  .inner{padding:0 20px}
  .section{padding:80px 0}
}