/* ============================================================
   EPITOPE — shared design system
   Light theme · Helvetica · navy-slate ink · coral accent
   ============================================================ */

:root{
  /* ===== Brand palette (from the deck) =====
     Blue Slate  #495867 · Glaucous #577399 · Pale Sky #BDD5EA
     Ghost White #F7F7FF · Vibrant Coral #FE5F55                */

  /* surfaces */
  --bg:            #f7f7ff;   /* Ghost White — page base */
  --bg-card:       #ffffff;   /* white cards on ghost-white */
  --bg-tint:       #e7eef6;   /* pale-sky wash */
  --bg-tint-2:     #dbe7f1;
  --bg-deep:       #495867;   /* Blue Slate — inverted sections */
  --bg-deep-2:     #3b4856;

  /* ink — Blue Slate family */
  --ink:           #2f3b47;   /* headings */
  --ink-2:         #495867;   /* Blue Slate body */
  --ink-3:         #647689;   /* muted */
  --ink-4:         #94a4b5;   /* faint / captions */

  /* lines */
  --line:          #dde6f0;
  --line-2:        #c8d5e3;
  --line-deep:     #5a6b7c;

  /* accent — Vibrant Coral */
  --coral:         #fe5f55;
  --coral-2:       #ff7e79;
  --coral-soft:    #ffe9e7;
  --coral-deep:    #e84b41;

  /* support — Glaucous / Pale Sky */
  --blue:          #577399;   /* Glaucous */
  --blue-soft:     #bdd5ea;   /* Pale Sky */
  --blue-faint:    #e3edf6;
  --green:         #2f8f6b;
  --green-soft:    #e2f1ea;

  /* type */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;

  /* metrics */
  --maxw: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(26,34,44,.04), 0 2px 8px rgba(26,34,44,.05);
  --shadow:    0 4px 14px rgba(26,34,44,.07), 0 18px 50px -22px rgba(26,34,44,.22);
  --shadow-lg: 0 8px 24px rgba(26,34,44,.10), 0 40px 90px -40px rgba(26,34,44,.32);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* accent driven by tweaks */
  --accent: var(--coral);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--coral); color:#fff; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:880px; margin:0 auto; padding:0 32px; }
section{ position:relative; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--accent); display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.muted{ color:var(--ink-4); }
.eyebrow.muted::before{ background:var(--ink-4); }

h1,h2,h3,h4{ font-weight:600; letter-spacing:-.02em; line-height:1.08; color:var(--ink); margin:0; text-wrap:balance; }
h1{ font-size:clamp(40px, 6.2vw, 76px); letter-spacing:-.035em; }
h2{ font-size:clamp(30px, 4.2vw, 50px); letter-spacing:-.03em; }
h3{ font-size:clamp(22px, 2.4vw, 30px); }
p{ margin:0 0 1em; color:var(--ink-2); }
p.lead{ font-size:clamp(18px,1.7vw,22px); line-height:1.5; color:var(--ink-2); }
.muted{ color:var(--ink-3); }
strong{ font-weight:600; color:var(--ink); }
.coral{ color:var(--accent); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:500; letter-spacing:-.01em;
  padding:13px 22px; border-radius:100px; border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .2s;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 8px 22px -10px var(--accent); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px var(--accent); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ transform:translateY(-2px); background:#000; }
.btn-lg{ padding:16px 28px; font-size:16px; }
.btn .arrow{ transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(247,247,255,.82);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{ border-bottom-color:var(--line); }
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:0 32px; height:68px; display:flex; align-items:center; gap:36px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.04em; color:var(--ink-2); }
.brand .mark{ width:31px; height:31px; flex:none; }
.nav-links{ display:flex; align-items:center; gap:6px; margin-left:8px; }
.nav-links a{
  font-size:14.5px; color:var(--ink-3); padding:8px 13px; border-radius:8px;
  transition:color .2s, background .2s; font-weight:450; white-space:nowrap;
}
.nav-links a:hover{ color:var(--ink); background:var(--bg-tint); }
.nav-links a.active{ color:var(--ink); font-weight:550; }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.nav-burger{ display:none; }

/* ---------- footer ---------- */
.footer{ background:var(--bg-deep); color:#aeb9c6; padding:74px 0 38px; margin-top:0; }
.footer h4{ color:#fff; font-size:15px; font-weight:600; margin-bottom:16px; letter-spacing:-.01em; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; }
.footer a{ color:#aeb9c6; font-size:14.5px; display:block; padding:5px 0; transition:color .2s; }
.footer a:hover{ color:#fff; }
.footer .brand{ color:#fff; margin-bottom:16px; }
.footer .brand .mark{ color:var(--accent); }
.footer-blurb{ font-size:14.5px; color:#8895a4; max-width:300px; line-height:1.6; }
.footer-bottom{ border-top:1px solid var(--line-deep); margin-top:54px; padding-top:26px; display:flex; justify-content:space-between; align-items:center; gap:18px; font-size:13px; color:#76828f; flex-wrap:wrap; }
.footer-col-links{ display:flex; flex-direction:column; }

/* ---------- reveal on scroll (JS-tween driven) ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- generic cards / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  padding:5px 11px; border-radius:100px; background:var(--bg-tint); color:var(--ink-3);
  border:1px solid var(--line);
}
.tag{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:500;
  padding:4px 10px; border-radius:7px; background:var(--blue-faint); color:var(--blue);
}
.tag.coral{ background:var(--coral-soft); color:var(--coral-deep); }
.tag.green{ background:var(--green-soft); color:var(--green); }

/* section paddings */
.pad{ padding:108px 0; }
.pad-sm{ padding:72px 0; }
.tint{ background:var(--bg-tint); }
.deep{ background:var(--bg-deep); color:#cdd6e0; }
.deep h1,.deep h2,.deep h3{ color:#fff; }
.deep p{ color:#aab6c3; }

/* divider label */
.kicker-row{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }

/* network canvas backdrop */
.net-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* responsive */
@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-burger{ display:inline-flex; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .pad{ padding:74px 0; }
  body{ font-size:16px; }
  .wrap, .wrap-narrow{ padding:0 22px; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; }
}