@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#15171c;
  --paper:#f4f5f7;
  --surface:#eaecf0;
  --surface-2:#dee2e8;
  --line:#d3d8e0;
  --muted:#565f6c;
  --indigo:#4633c9;
  --indigo-soft:#ecebfa;
  --amber:#a8611f;
  --amber-soft:#f4e3ca;
  --amber-deep:#6b3a12;
  /* fixed-dark band tokens — same on every viewer, by design, for the hero/agents bands */
  --band-ink:#0c0e12;
  --band-text:#f3f4f7;
  --band-muted:#9aa1af;
  --band-line:#232838;
  --indigo-bright:#7b6ff5;
  --amber-bright:#e3a15a;
  --amber-bright-deep:#c97a3a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8e9ee;
    --paper:#0d0e12;
    --surface:#16181d;
    --surface-2:#1f232a;
    --line:#2b3038;
    --muted:#9aa2ad;
    --indigo:#9188f2;
    --indigo-soft:#221d42;
    --amber:#e0a266;
    --amber-soft:#3a2916;
    --amber-deep:#f6c78f;
  }
}
:root[data-theme="dark"]{
  --ink:#e8e9ee;
  --paper:#0d0e12;
  --surface:#16181d;
  --surface-2:#1f232a;
  --line:#2b3038;
  --muted:#9aa2ad;
  --indigo:#9188f2;
  --indigo-soft:#221d42;
  --amber:#e0a266;
  --amber-soft:#3a2916;
  --amber-deep:#f6c78f;
}

@keyframes drawLoop{ to{ stroke-dashoffset:0; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.loop-path{ stroke-dasharray:900; stroke-dashoffset:900; animation:drawLoop 2.2s cubic-bezier(.4,0,.2,1) .2s forwards; }
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{ animation:fadeUp .6s ease forwards; }
@media (prefers-reduced-motion: reduce){
  .loop-path{ animation:none; stroke-dashoffset:0; }
  .reveal{ opacity:1; transform:none; }
  .reveal.in{ animation:none; }
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  font-size:16px; line-height:1.6;
}
::selection{ background:var(--indigo); color:#fff; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

h1,h2,h3{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}

a{ color:inherit; }

.lang-block[hidden]{ display:none; }

/* LANGUAGE SWITCH ----------------------------------------------- */
.lang-switch{ display:flex; gap:4px; flex-wrap:nowrap; }
.lang-switch button{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:3px 9px; border-radius:2px; cursor:pointer; text-transform:uppercase;
}
.lang-switch button[aria-pressed="true"]{ background:var(--indigo); color:#fff; border-color:var(--indigo); }

/* NAV ------------------------------------------------------------ */
nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; text-decoration:none; color:inherit; }
.brand svg{ width:26px; height:26px; color:var(--indigo); }
.navlinks{ display:flex; gap:28px; font-size:.92rem; font-weight:500; }
.navlinks a{ text-decoration:none; color:var(--muted); }
.navlinks a:hover{ color:var(--ink); }
.navcta{
  font-size:.88rem; font-weight:600; padding:9px 18px;
  background:var(--indigo); color:#fff; border-radius:3px; text-decoration:none;
}
@media (max-width:720px){ .navlinks{ display:none; } }

section{ padding:clamp(56px,9vw,104px) clamp(20px,5vw,56px); }
.wrap{ max-width:780px; margin:0 auto; }
.wrap-wide{ max-width:1120px; margin:0 auto; }
.band{ background:var(--surface); }

/* HERO ------------------------------------------------------------ */
.hero{
  padding-top:clamp(72px,11vw,140px); padding-bottom:clamp(72px,10vw,120px);
  text-align:left; position:relative; overflow:hidden;
  background:var(--band-ink);
}
.hero .wrap-wide{ position:relative; z-index:1; }
.hero-loop{
  position:absolute; right:-200px; top:50%; transform:translateY(-50%);
  width:760px; height:760px; opacity:.55; pointer-events:none;
}
@media (max-width:900px){ .hero-loop{ display:none; } }
.hero .tag{
  display:inline-block; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber-bright); background:rgba(227,161,90,.14);
  padding:5px 12px; border-radius:2px; margin-bottom:26px;
}
.hero h1{ font-size:clamp(2.6rem,7vw,5rem); line-height:.99; max-width:16ch; color:var(--band-text); }
.hero p.lede{ margin:26px 0 0; max-width:60ch; font-size:1.2rem; color:var(--band-muted); }
.hero .ctas{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.btn{
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:.95rem;
  padding:14px 26px; border-radius:3px; text-decoration:none; display:inline-block;
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease;
}
.btn.primary{ background:var(--indigo); color:#fff; }
.btn.ghost{ border-color:var(--line); color:var(--ink); }
.hero .btn.primary{ background:var(--amber-bright-deep); color:var(--band-ink); }
.hero .btn.primary:hover{ background:var(--amber-bright); }
.hero .btn.ghost{ border-color:rgba(243,244,247,.3); color:var(--band-text); }
.hero .btn.ghost:hover{ border-color:var(--band-text); }
.hero .proof-line{
  margin-top:30px; font-size:.9rem; color:#6b7280;
  display:flex; align-items:center; gap:10px;
}
.hero .proof-line::before{ content:''; width:16px; height:1px; background:var(--amber-bright); }

/* DARK BAND (hero + agents) ---------------------------------------- */
.dark-band{ background:var(--band-ink); }
.dark-band .head .eyebrow{ color:var(--amber-bright); }
.dark-band .head h2{ color:var(--band-text); }
.dark-band .head p{ color:var(--band-muted); }
.dark-band .prose p{ color:var(--band-muted); }

/* SECTION HEADS ----------------------------------------------------- */
.head{ max-width:56ch; margin-bottom:44px; }
.head .eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber); font-weight:600; margin:0 0 14px;
}
.head h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.05; }
.head p{ margin:16px 0 0; color:var(--muted); font-size:1.02rem; max-width:58ch; }

/* COMPARISON DIAGRAM -------------------------------------------------- */
figure.diagram{ margin:0; }
figure.diagram svg{ width:100%; height:auto; display:block; }
figure.diagram figcaption{ margin-top:16px; font-size:.9rem; color:var(--muted); max-width:64ch; }
.diagram-scroll{ overflow-x:auto; }

/* PILLARS ------------------------------------------------------------ */
.pillars{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.pillar{ background:var(--paper); padding:34px 30px; transition:transform .15s ease, box-shadow .15s ease; }
.pillar:hover{ transform:translateY(-3px); box-shadow:0 0 0 1.5px var(--indigo) inset; }
.pillar .idx{ font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--indigo); font-weight:600; }
.pillar h3{
  font-family:'IBM Plex Sans',sans-serif; font-weight:700; letter-spacing:0;
  font-size:1.18rem; margin-top:12px;
}
.pillar p{ margin-top:10px; font-size:.95rem; color:var(--muted); }
@media (max-width:600px){ .pillars{ grid-template-columns:1fr; } }
.not-a-fit{
  margin-top:24px; font-size:.9rem; color:var(--muted); max-width:70ch;
  padding-top:20px; border-top:1px solid var(--line);
}
.not-a-fit b{ color:var(--ink); }

/* SCANNABLE STRIP ------------------------------------------------- */
.strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border-bottom:1px solid var(--line);
}
.strip-item{
  background:var(--paper); padding:22px clamp(20px,4vw,32px);
  font-size:.94rem; color:var(--ink); font-weight:500; line-height:1.45;
}
.strip-item b{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--indigo); margin-bottom:6px; }
@media (max-width:800px){ .strip{ grid-template-columns:1fr; } }

/* DATA GUARANTEE ---------------------------------------------------- */
.guarantee{
  margin-top:28px; padding:22px 24px; border:1px solid var(--indigo);
  background:var(--indigo-soft); max-width:640px;
}
.guarantee b{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--indigo); margin-bottom:8px;
}
.guarantee p{ margin:0; font-size:.92rem; color:var(--ink); }

/* ENGAGEMENT TIERS ---------------------------------------------------- */
.tiers{ display:flex; gap:0; margin-top:32px; border:1px solid var(--line); flex-wrap:wrap; }
.tier{ flex:1 1 200px; padding:20px 22px; border-right:1px solid var(--line); }
.tier:last-child{ border-right:none; }
.tier .idx{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--indigo); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.tier h4{ font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:.98rem; margin:8px 0 0; }
.tier p{ font-size:.85rem; color:var(--muted); margin-top:6px; }
.contact-placeholder{
  margin-top:18px; font-size:.85rem; color:var(--muted);
  border:1px dashed var(--line); display:inline-block; padding:8px 14px;
}

/* HERITAGE ------------------------------------------------------------ */
.heritage-flow{
  display:flex; align-items:center; gap:0; margin:36px 0 40px; flex-wrap:wrap;
}
.heritage-box{
  flex:1 1 220px; border:1px solid var(--line); background:var(--surface);
  padding:20px 22px; font-size:.92rem;
}
.heritage-box b{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--indigo); margin-bottom:8px; }
.heritage-arrow{ flex:0 0 auto; padding:0 18px; color:var(--muted); font-size:1.4rem; }
@media (max-width:700px){ .heritage-arrow{ transform:rotate(90deg); padding:10px 0; } .heritage-flow{ flex-direction:column; } }

.prose p{ margin:14px 0 0; color:var(--muted); font-size:1.02rem; max-width:66ch; }
.prose p:first-child{ margin-top:0; }

/* CASE ------------------------------------------------------------ */
.case-card{
  border:1px solid var(--line); background:var(--paper);
  padding:clamp(28px,4vw,40px);
}
.case-card .kicker{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--amber); font-weight:600;
}
.case-card h3{ font-size:1.5rem; margin-top:10px; }
.case-card p{ margin-top:14px; color:var(--muted); font-size:1rem; max-width:68ch; }
.case-tags{ display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }
.case-tags span{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.04em;
  border:1px solid var(--line); padding:5px 10px; color:var(--muted);
}
/* CLOSING ------------------------------------------------------------ */
.closing{ text-align:left; }
.closing h2{ font-size:clamp(1.9rem,3.6vw,2.8rem); max-width:18ch; }
.closing p{ margin:18px 0 0; max-width:56ch; color:var(--muted); font-size:1.05rem; }
.closing .ctas{ margin-top:30px; }

footer{
  padding:26px clamp(20px,5vw,56px) 34px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-top:1px solid var(--line);
  font-size:.85rem; color:var(--muted);
}
.footer-brand{ display:flex; align-items:center; gap:8px; }
.footer-brand svg{ width:20px; height:20px; color:var(--indigo); }