/* ================= Tokens ================= */
:root{
  --bg:#f6f8f7;
  --surface:#ffffff;
  --line:#e1e8e4;
  --ink:#10201a;
  --ink-soft:#43564d;
  --muted:#5c6b64;
  --brand:#254d42;
  --brand-ink:#ffffff;
  --logo-plate:#ffffff;
  --shadow: 0 1px 2px rgba(16,32,26,.05), 0 10px 28px -14px rgba(16,32,26,.18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1512;
    --surface:#121e19;
    --line:#1f2f28;
    --ink:#e8efec;
    --ink-soft:#b7c6bf;
    --muted:#8ea299;
    --brand:#5fb395;
    --brand-ink:#08130f;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 34px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1512;
  --surface:#121e19;
  --line:#1f2f28;
  --ink:#e8efec;
  --ink-soft:#b7c6bf;
  --muted:#8ea299;
  --brand:#5fb395;
  --brand-ink:#08130f;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 34px -14px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ================= Base ================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{ max-width:1120px; margin:0 auto; padding-inline:24px; }
@media (min-width:760px){ .wrap{ padding-inline:40px; } }

h1,h2,h3{
  font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight:800;
  line-height:1.06;
  letter-spacing:-0.012em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
p{ margin:0; }
a{ color:inherit; }
::selection{ background:color-mix(in srgb, var(--brand) 30%, transparent); }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }

.lede{ color:var(--muted); font-size:1.05rem; max-width:60ch; }

.eyebrow{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:12.5px; font-weight:500; letter-spacing:.04em;
  color:var(--brand);
  display:inline-flex; align-items:center; gap:.5em;
}
.eyebrow .bk{ opacity:.55; }

/* ================= Buttons ================= */
.btn{
  font-family:"JetBrains Mono", monospace;
  font-weight:500; font-size:.85rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.55em;
  padding:11px 20px; border-radius:9px;
  background:var(--brand); color:var(--brand-ink);
  text-decoration:none; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space:nowrap;
}
.btn:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--brand); background:transparent; filter:none; transform:none; }
.btn.small{ padding:8px 15px; font-size:.78rem; }

/* ================= Nav ================= */
header.nav{
  position:sticky; top:0; z-index:40;
  padding-top:env(safe-area-inset-top, 0px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.brand img{ height:30px; width:auto; display:block; }
.brand span{
  font-family:"Archivo", sans-serif; font-weight:800; font-size:1.02rem;
  letter-spacing:-0.01em; color:var(--ink);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand img{ filter:brightness(2.2) saturate(1.1); }
}
:root[data-theme="dark"] .brand img{ filter:brightness(2.2) saturate(1.1); }

nav.links{ display:none; gap:28px; font-size:.92rem; color:var(--muted); }
nav.links a{ text-decoration:none; transition:color .15s ease; }
nav.links a:hover{ color:var(--ink); }
@media (min-width:760px){ nav.links{ display:flex; } .nav-toggle{ display:none; } }

.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px; border:1px solid var(--line);
  background:transparent; cursor:pointer; color:var(--ink);
}
.nav-toggle svg{ width:18px; height:18px; }

.mobile-menu{
  display:none; flex-direction:column; gap:2px;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  padding:14px 24px; text-decoration:none; color:var(--ink-soft);
  font-size:.95rem; border-bottom:1px solid var(--line);
}
@media (min-width:760px){ .mobile-menu{ display:none !important; } }

/* ================= Hero ================= */
.hero{ position:relative; padding-block:64px 84px; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-grid{ position:absolute; inset:0; pointer-events:none; }
.hero-grid svg{ width:100%; height:100%; display:block; }
.hero-content{ position:relative; z-index:1; display:grid; gap:40px; }
@media (min-width:900px){ .hero-content{ grid-template-columns:1.25fr .75fr; align-items:center; } }

.hero h1{ font-size:clamp(2rem, 5vw, 3.3rem); margin-block:18px 20px; max-width:16ch; }
.hero h1 .accent{ color:var(--brand); }
.hero .lede{ font-size:1.1rem; margin-bottom:30px; }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.hero-mail{ font-family:"JetBrains Mono", monospace; font-size:.85rem; color:var(--muted); }

.hero-mark{
  justify-self:center;
  width:min(260px, 62vw);
  aspect-ratio:1;
  border-radius:28px;
  background:var(--logo-plate);
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  padding:28px;
}
.hero-mark img{ width:100%; height:auto; display:block; }

.trace-draw{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 2.2s ease-out .1s forwards; }
@media (prefers-reduced-motion: reduce){ .trace-draw{ animation:none; stroke-dashoffset:0; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ================= Sections ================= */
section{ padding-block:72px; border-bottom:1px solid var(--line); }
.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:44px; max-width:64ch; }
.section-head h2{ font-size:clamp(1.55rem, 3vw, 2.05rem); }

/* ---- About ---- */
.about-body{ display:grid; gap:36px; }
@media (min-width:880px){ .about-body{ grid-template-columns:1.1fr .9fr; align-items:start; } }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.stat{ background:var(--surface); padding:22px 16px; }
.stat b{ display:block; font-family:"Archivo", sans-serif; font-weight:900; font-size:1.85rem; color:var(--brand); letter-spacing:-0.02em; }
.stat span{ font-size:.8rem; color:var(--muted); }

/* ---- Services ---- */
.service-list{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
@media (min-width:860px){ .service-list{ grid-template-columns:1fr 1fr; } }
.service{ background:var(--surface); padding:30px 28px; display:flex; flex-direction:column; gap:14px; }
.service .icon{
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--brand) 14%, transparent);
  color:var(--brand); flex:none;
}
.service .icon svg{ width:21px; height:21px; }
.service h3{ font-size:1.12rem; font-weight:700; }
.service p{ color:var(--muted); font-size:.95rem; max-width:42ch; }
.service .tag{ font-family:"JetBrains Mono", monospace; font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft); }

/* ---- Clients ---- */
.clients-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
@media (min-width:640px){ .clients-grid{ grid-template-columns:repeat(3,1fr); } }
.client{
  background:var(--surface); min-height:112px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:20px 14px; text-align:center;
}
.client .name{ font-family:"Archivo", sans-serif; font-weight:800; font-size:1.22rem; letter-spacing:-0.01em; color:var(--ink); }
.client .sub{ font-family:"JetBrains Mono", monospace; font-size:.66rem; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; }

/* ---- Closing ---- */
.closing-inner{
  display:flex; flex-direction:column; gap:22px;
  padding:44px; border-radius:18px;
  background:linear-gradient(155deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface));
  border:1px solid var(--line);
}
@media (min-width:760px){ .closing-inner{ flex-direction:row; align-items:center; justify-content:space-between; gap:32px; } }
.closing h2{ font-size:clamp(1.45rem, 3vw, 1.95rem); max-width:17ch; }
.closing-cta{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; flex:none; }

/* ================= Footer ================= */
footer{ padding-block:32px calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; font-size:.82rem; color:var(--muted); }
.footer-row .brand span{ font-size:.9rem; }
.footer-row .brand img{ height:24px; }