:root {
  --accent: #0ea5e9;
  --accent-soft: color-mix(in srgb, #0ea5e9 12%, #fff);
  --accent-line: color-mix(in srgb, #0ea5e9 28%, #fff);
  --ink: #0f172a;
  --ink-2: #475569;
  --muted: #64748b;
  --line: #e8edf3;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow: 0 10px 30px -12px rgba(15,23,42,.18);
  /* Chrome tokens — overridable per template so dark/tinted identities work
     without touching the markup. */
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --nav-bg: rgba(255,255,255,.82);
  --footer-bg: #fafbfd;
  --btn-fg: #ffffff;
  --heading-font: inherit;
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body-font); color: var(--ink); line-height: 1.55; background: #0b0b0f; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1,h2,h3 { letter-spacing: -0.02em; line-height: 1.15; font-family: var(--heading-font); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wrap-tight { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.btn { display: inline-flex; align-items: center; justify-content:center; gap: 8px; background: var(--accent); color: var(--btn-fg); padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 14px; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px var(--accent); }
.btn.alt { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.alt:hover { box-shadow: var(--shadow-sm); border-color: #cbd5e1; }
.btn.ghost { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; }
.btn.ghost:hover { box-shadow: none; }
.btn.sm { padding: 8px 14px; font-size: 13px; }
.muted { color: var(--muted); }
.eyebrow { display:inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: 18px; color: var(--ink-2); }
.center { text-align: center; }
.stack { display:flex; flex-direction:column; }
.row { display:flex; align-items:center; }
.gap8 { gap:8px; } .gap12 { gap:12px; } .gap16 { gap:16px; }
.grid2 { display:grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.grid3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid4 { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background:var(--surface); box-shadow: var(--shadow-sm); }
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent-line); }
.icon { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; background: var(--accent-soft); color: var(--accent); }
.stars { color:#f59e0b; font-size:13px; letter-spacing:1px; }
.section-head { text-align:center; max-width:620px; margin:0 auto 40px; }
.section-head h2 { font-size:32px; margin-top:10px; }
.section-head p { margin-top:10px; }
.badge { display:inline-flex; align-items:center; gap:8px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px; }
.tag { display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
.divider { height:1px; background:var(--line); border:0; margin:0; }

body{background:#0b0b0f;color:#e7e7ea;}
.wrap,.wrap-tight{max-width:1000px;}
.card{background:#15151b;border-color:#23232c;box-shadow:none;}
.card-hover:hover{border-color:var(--accent);box-shadow:0 14px 40px -18px var(--accent);}
.muted{color:#9a9aa6;}.lead{color:#bdbdc6;}
.btn.alt{background:transparent;color:#e7e7ea;border-color:#2a2a35;}
.btn.alt:hover{border-color:var(--accent);}
.divider{background:#23232c;}
.hero{padding:88px 0 56px;max-width:760px;}
.hero h1{font-size:58px;margin:16px 0 16px;}
.avatar{width:72px;height:72px;border-radius:999px;background:linear-gradient(140deg,var(--accent),#0b0b0f);margin-bottom:8px;}
.work .thumb{height:230px;border-radius:14px;margin-bottom:16px;position:relative;overflow:hidden;}
.work .thumb:after{content:"View case study →";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,11,15,.55);color:#fff;font-weight:600;opacity:0;transition:opacity .2s;}
.work:hover .thumb:after{opacity:1;}
.work h3{font-size:18px;}
a.link{color:var(--accent);font-weight:600;}
.exp-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid #23232c;}
.chip{display:inline-block;border:1px solid #2a2a35;border-radius:999px;padding:8px 16px;font-size:13px;margin:0 8px 10px 0;color:#cfcfd6;}
.section-head h2{color:#e7e7ea;}
@media(max-width:768px){.hero h1{font-size:38px;}.exp-row{flex-direction:column;align-items:flex-start;gap:4px;}}

@media (max-width: 900px) { .grid4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) {
  .grid2,.grid3,.grid4 { grid-template-columns: 1fr; }
  .hide-sm { display:none !important; }
  .section { padding: 44px 0; }
  .section-head h2 { font-size: 26px; }
}
/* ── Per-template identity (wins the cascade) ─────────────────── */

:root{--ink:#e8edf2;--ink-2:#9aa7b4;--muted:#7c8896;--line:rgba(120,180,255,.14);--accent:#38bdf8;--radius:8px;--body-font:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--heading-font:ui-monospace,'SF Mono',Menlo,Consolas,monospace;}
body{background:#080b10!important;color:var(--ink)!important;}
.card{background:#0d141d!important;border-color:var(--line)!important;}
.card-hover:hover{border-color:var(--accent)!important;box-shadow:0 14px 40px -18px var(--accent)!important;}
h1,h2,h3{letter-spacing:-.01em;font-weight:700;}
.eyebrow{text-transform:none;letter-spacing:.02em;color:var(--accent);}
.eyebrow:before{content:"// ";}
.chip{border-color:var(--line)!important;color:#aebccb!important;}
.exp-row{border-bottom:1px solid var(--line)!important;}
.muted{color:var(--muted)!important;}.lead{color:#b6c2cf!important;}
.divider{background:var(--line)!important;}