/* =============================================================
   EchoSignal — shared base stylesheet
   Tokens, reset, layout helpers, header/footer, buttons,
   signal-baseline motif, scroll-reveal.
   Page-specific selectors stay in each page's own <style> block.
   ============================================================= */

/* ---------- self-hosted fonts (Latin subset, woff2) ---------- */
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- palette + design tokens ---------- */
:root{
  --ink:#15181D;            /* near-black body text */
  --ink-soft:#3A4048;       /* secondary text */
  --paper:#FFFFFF;          /* light base */
  --paper-warm:#F7F8FA;     /* faint panel */
  --structure:#1B2A3A;      /* deep ink-blue: structural / dark sections */
  --structure-2:#22364A;
  --line:#E2E6EB;           /* hairlines on light */
  --line-dark:#33485E;      /* hairlines on dark */
  --on-dark:#EEF2F6;        /* text on dark */
  --on-dark-soft:#9DB0C2;
  --red:#FC0030;            /* brand */
  --orange:#FC6000;         /* brand */
  --focus:#FC6000;
  --maxw:1140px;
  --gut:clamp(20px,5vw,64px);
}

/* ---------- reset + base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.display{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-0.02em;line-height:1.08}
.mono{font-family:'JetBrains Mono',monospace}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.screen{padding-block:clamp(72px,11vw,150px)}
.eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:.7em;margin-bottom:1.6rem;
}
.eyebrow .tick{width:26px;height:1px;background:var(--ink-soft);display:inline-block}
.dark .eyebrow{color:var(--on-dark-soft)}
.dark .eyebrow .tick{background:var(--on-dark-soft)}

.lede{font-size:clamp(1.05rem,1.05rem + .3vw,1.22rem);color:var(--ink-soft);max-width:60ch}
.lede + .lede{margin-top:1.1rem}
.dark .lede{color:var(--on-dark-soft)}
.accent-red{color:var(--red)}
.accent-orange{color:var(--orange)}

h1.headline{font-weight:700;font-size:clamp(2.1rem,1.4rem + 3.6vw,4.1rem);max-width:18ch}
h2.headline{font-weight:700;font-size:clamp(1.8rem,1.2rem + 2.6vw,3.1rem);max-width:20ch}
.headline .soft{color:var(--ink-soft)}
.dark .headline{color:var(--on-dark)}
.dark .headline .soft{color:var(--on-dark-soft)}

/* ---------- dark sections ---------- */
section.dark{background:var(--structure);color:var(--on-dark);position:relative}
section.dark .transition{
  font-family:'Space Grotesk',sans-serif;font-weight:500;color:var(--on-dark-soft);
  font-size:clamp(1rem,.9rem + .4vw,1.2rem);margin-bottom:1.3rem;max-width:48ch;
}

/* ---------- top bar ---------- */
header.bar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.bar .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.bar .logo img{height:22px;display:block}
.bar .logo .nm{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.01em}
.bar nav{display:flex;gap:26px;align-items:center}
.bar nav a{font-size:.85rem;color:var(--ink-soft);text-decoration:none;font-weight:500}
.bar nav a:hover{color:var(--ink)}
.bar nav a.active{color:var(--ink)}
.bar .navcta{
  font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:600;
  padding:8px 16px;border:1px solid var(--ink);border-radius:2px;color:var(--ink);text-decoration:none;
}
.bar .navcta:hover{background:var(--ink);color:#fff}
.bar .login{
  display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-soft);
  border:1px solid var(--line);padding:7px 13px;border-radius:2px;text-decoration:none;
}
.bar .login:hover{border-color:var(--ink-soft);color:var(--ink)}
.bar .login .lk{width:11px;height:11px;opacity:.7}
@media(max-width:780px){.bar nav .navlink{display:none}}

/* ---------- buttons ---------- */
.btn{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;
  display:inline-flex;align-items:center;gap:.7em;text-decoration:none;cursor:pointer;
  padding:15px 26px;border-radius:2px;border:1px solid transparent;
}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#d80029}
.btn-primary .arrow{transition:transform .2s}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.cta-wrap{display:flex;flex-wrap:wrap;gap:16px;margin-top:2.2rem;align-items:center}

/* ---------- signature: baseline + deviation ---------- */
.sig{width:100%;height:74px;overflow:visible;display:block}
.sig .base{fill:none;stroke:var(--line);stroke-width:2}
.dark .sig .base{stroke:var(--line-dark)}
.sig .sig-path{fill:none;stroke:var(--ink-soft);stroke-width:2;stroke-dasharray:1400;stroke-dashoffset:1400}
.dark .sig .sig-path{stroke:var(--on-dark-soft)}
.sig .dev{stroke:var(--red);stroke-width:2.4}
.sig .marker{fill:none;stroke:var(--orange);stroke-width:2.2;opacity:0}
.sig .pt{fill:var(--red);opacity:0}
.reveal .sig .sig-path{animation:draw 2.6s cubic-bezier(.6,.05,.2,1) forwards}
.reveal .sig .marker{animation:pop .5s ease .2s forwards}
.reveal .sig .pt{animation:pop .5s ease 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:38px;background:var(--paper-warm)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer .sign{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:.9rem}
footer .sign img{height:18px;opacity:.9;width:auto}
footer .sign .by{font-family:'Space Grotesk',sans-serif}
footer .meta{color:var(--ink-soft);font-size:.8rem}

/* ---------- scroll-reveal ---------- */
.obs{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.obs.reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .obs{opacity:1;transform:none;transition:none}
  .sig .sig-path{stroke-dashoffset:0;animation:none}
  .sig .marker,.sig .pt{opacity:1;animation:none}
  html{scroll-behavior:auto}
}