/* ==========================================================================
   ZWORKS MARKETING SITE — shared styles
   Light: Stone Olive editorial · Dark: Obsidian Minimal
   Tokens follow §6 of the marketing handoff. No gradients, no neon,
   no glassmorphism. Borders over shadows. One olive accent per screen.
   ========================================================================== */

/* ─── 1. Tokens ─────────────────────────────────────────────────────── */
:root{
  --font-ui: Inter, Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-panel:10px; --r-pill:999px;
  --touch:44px;
  --wrap:1180px;
  --topbar:64px;
  --fast:120ms; --base:180ms; --slow:300ms; --ease:cubic-bezier(.2,0,.13,1);
}
:root, [data-theme="light"]{
  color-scheme: light;
  --bg:#F8F8F6; --surface:#FFFFFF; --subtle:#F2F3EF; --strong:#ECEEE8;
  --border:#E3E5DF; --border-strong:#D5D8D1;
  --text:#20231F; --text-2:#666B63; --text-3:#6E7370; /* handoff #92968E (3.3:1) darkened for ≥4.5:1 */
  --on-accent:#FFFFFF;
  --accent:#67735C; --accent-hover:#58634F; --accent-subtle:#E8ECE3;
  --accent-text:#525D46; /* olive as text on light — 5.9:1 */
  --success:#4F7157; --warning:#8C6628; --danger:#A64B43; --info:#546F86;
  --header-bg:rgba(248,248,246,.88);
  --scrim:rgba(32,35,31,.42);
  --shadow:0 1px 2px rgba(32,35,31,.06), 0 10px 28px rgba(32,35,31,.08);
}
[data-theme="dark"]{
  color-scheme: dark;
  --bg:#121411; --surface:#181B17; --subtle:#1D201C; --strong:#222620;
  --border:#2D312B; --border-strong:#3A4037;
  --text:#F0F1ED; --text-2:#A7ACA3; --text-3:#858B82; /* handoff #777D74 (3.9:1) lifted for ≥4.5:1 */
  --on-accent:#121411;
  --accent:#8E9A7A; --accent-hover:#9FAA8B; --accent-subtle:#242A21;
  --accent-text:#A9B58F; /* olive as text on dark — 7.1:1 */
  --success:#83A98A; --warning:#C9A45F; --danger:#CF746C; --info:#82A3BD;
  --header-bg:rgba(18,20,17,.88);
  --scrim:rgba(0,0,0,.62);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.45);
}

/* ─── 2. Base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:-.015em; text-wrap:balance; line-height:1.12}
p{margin:0; text-wrap:pretty}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
img,svg{display:block; max-width:100%}
::selection{background:var(--accent-subtle)}
:where(a,button,input,[tabindex],summary):focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)} .faint{color:var(--text-3)}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:32px}
.section{padding-block:clamp(56px,8vw,104px)}
.section + .section{border-top:1px solid var(--border)}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); margin:0 0 16px}
h1{font-size:clamp(40px,5.4vw,68px); max-width:16ch}
h2{font-size:clamp(28px,3.4vw,44px); max-width:22ch}
h3{font-size:clamp(20px,2vw,26px)}
.lead{font-size:18px; color:var(--text-2); max-width:60ch; margin-top:16px}
.meta{font-size:13px; color:var(--text-2)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:32px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}

/* ─── 3. Buttons ────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--touch); padding:0 22px; border-radius:var(--r-md); font-weight:600; font-size:15px; border:1px solid transparent; transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease)}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent-text)}
.btn-ghost{background:transparent; color:var(--accent-text); padding-inline:12px}
.btn-ghost:hover{background:var(--accent-subtle)}

/* ─── 4. Header ─────────────────────────────────────────────────────── */
.site-header{position:sticky; top:0; z-index:50; height:var(--topbar); background:var(--header-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color var(--base) var(--ease)}
.site-header.scrolled{border-bottom-color:var(--border)}
.header-in{max-width:var(--wrap); margin-inline:auto; padding-inline:32px; height:var(--topbar); display:flex; align-items:center; gap:28px}
.brandmark{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:-.01em}
.brandmark svg{width:26px; height:26px}
.mainnav{display:flex; align-items:center; gap:4px; margin-inline:auto}
.mainnav > div{position:relative}
.mainnav button.nl, .mainnav a.nl{display:inline-flex; align-items:center; gap:5px; min-height:var(--touch); padding:0 13px; background:none; border:0; color:var(--text-2); font-size:14.5px; font-weight:500; border-radius:var(--r-md)}
.mainnav button.nl:hover, .mainnav a.nl:hover{color:var(--text); background:var(--subtle)}
.mainnav button.nl svg{width:12px; height:12px}
.header-cta{display:flex; align-items:center; gap:8px}
.header-cta .btn{min-height:38px; padding:0 16px; font-size:14px}
.megamenu{position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); min-width:480px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel); box-shadow:var(--shadow); padding:12px; display:none; z-index:60}
.mainnav > div:hover .megamenu, .mainnav > div:focus-within .megamenu{display:block}
.megamenu .mm-group{padding:8px 12px 4px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.megamenu a.mm-item{display:flex; gap:12px; padding:10px 12px; border-radius:var(--r-md)}
.megamenu a.mm-item:hover{background:var(--subtle)}
.megamenu a.mm-item b{display:block; font-size:14.5px}
.megamenu a.mm-item span{display:block; font-size:13px; color:var(--text-2)}
.burger{display:none}
.drawer{display:none}

/* ─── 5. Hero + workflow visual ─────────────────────────────────────── */
.hero{padding-block:clamp(64px,9vw,120px)}
.hero-split{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.hero-cta{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.flow{border:1px solid var(--border); border-radius:var(--r-panel); background:var(--surface); padding:20px; display:flex; flex-direction:column; gap:0; position:relative}
/* character intro — single Nim dot travels the rail, JS-driven per §12. Opacity + transform only: no pulse, no glow, no particles. */
.flow-agent{position:absolute; left:46px; top:33px; width:14px; height:14px; border-radius:var(--r-pill); background:var(--accent); box-shadow:0 0 0 4px var(--accent-subtle); z-index:2; transition:top 1s var(--ease), opacity var(--slow) var(--ease)}
.flow-step{display:grid; grid-template-columns:28px 1fr; gap:12px; position:relative; padding:10px 0; opacity:.38; transition:opacity var(--slow) var(--ease)}
.flow-step .dot{width:26px; height:26px; border-radius:var(--r-pill); border:1.5px solid var(--border-strong); background:var(--surface); display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; color:var(--text-2); z-index:1}
.flow-step:not(:last-child)::before{content:""; position:absolute; left:32px; top:38px; bottom:-6px; width:1.5px; background:var(--border-strong)}
.flow-step .body b{display:block; font-size:14.5px}
.flow-step .body span{font-size:12.5px; color:var(--text-2); font-family:var(--font-mono)}
.flow-step.on{opacity:1}
.flow-step.on .dot{border-color:var(--accent); color:var(--on-accent); background:var(--accent)}
.flow-step.done{opacity:.85}
.flow-step.done .dot{border-color:var(--accent); color:var(--accent-text)}

/* ─── 6. Content blocks ─────────────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.vs{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px}
.vs-col{border:1px solid var(--border); border-radius:var(--r-panel); background:var(--surface); padding:24px}
.vs-col.zworks{border-color:var(--accent)}
.vs-col h3{font-size:18px; margin-bottom:12px}
.vs-col .mono{font-size:13px; color:var(--text-2); line-height:2}
.timeline{display:flex; gap:0; margin-top:36px; border-top:1.5px solid var(--border-strong); position:relative}
.timeline .tstep{flex:1; padding:20px 16px 0 0; position:relative}
.timeline .tstep::before{content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:var(--r-pill); background:var(--accent)}
.timeline .tstep b{display:block; font-size:15px}
.timeline .tstep span{font-size:13px; color:var(--text-2)}
.prod-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px}
.prod{border:1px solid var(--border); border-radius:var(--r-panel); background:var(--surface); padding:28px}
.prod .mark{width:38px; height:38px; border-radius:var(--r-md); background:var(--accent-subtle); color:var(--accent-text); display:grid; place-items:center; margin-bottom:16px}
.prod .mark svg{width:20px; height:20px}
.prod h3{margin-bottom:8px}
.prod p{font-size:14.5px; color:var(--text-2)}
.prod a.more{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:600; font-size:14.5px; color:var(--accent-text); min-height:var(--touch)}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px}
.stat-num{font-family:var(--font-mono); font-size:clamp(30px,3vw,42px); letter-spacing:-.02em}
.stat-label{font-size:14px; color:var(--text-2); margin-top:8px}
.quote{max-width:760px; margin-inline:auto; text-align:center}
.quote blockquote{font-family:var(--font-display); font-size:clamp(22px,2.6vw,30px); line-height:1.4; margin:0 0 16px}
.role-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px}
.role{border-top:1.5px solid var(--border-strong); padding-top:16px}
.role b{display:block; font-size:16px; margin-bottom:6px}
.role p{font-size:14px; color:var(--text-2)}
.checklist{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px}
.checklist li{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15px; align-items:start}
.checklist svg{width:18px; height:18px; color:var(--accent-text); margin-top:3px}
.cta-strip{text-align:center; max-width:640px; margin-inline:auto}
.cta-strip .btn{margin-top:28px}
table.spec{width:100%; border-collapse:collapse; margin-top:28px; font-size:14.5px}
table.spec th, table.spec td{text-align:left; padding:12px 16px; border-top:1px solid var(--border)}
table.spec th{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); font-weight:400}
table.spec td.num, table.spec th.num{font-family:var(--font-mono); text-align:right}
.log-row{display:grid; grid-template-columns:130px 1fr auto; gap:20px; padding:20px 0; border-top:1px solid var(--border); align-items:baseline}
.log-row h3{font-size:18px}
.log-row p{font-size:14px; color:var(--text-2); margin-top:4px}

/* ─── 7. Footer ─────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--border); padding:56px 0 32px; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px}
.foot-grid h4{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); font-weight:400; margin:0 0 14px}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px}
.foot-grid ul a{color:var(--text-2); display:inline-block; min-height:32px}
.foot-grid ul a:hover{color:var(--text)}
.foot-base{display:flex; align-items:center; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); font-size:13px; color:var(--text-3)}
.foot-base .spacer{flex:1}
.themetoggle{display:inline-flex; gap:2px; padding:2px; background:var(--subtle); border:1px solid var(--border); border-radius:var(--r-md)}
.themetoggle button{min-height:30px; padding:0 12px; border:0; background:transparent; border-radius:var(--r-sm); color:var(--text-2); font-size:12.5px; font-weight:500}
.themetoggle button[aria-pressed="true"]{background:var(--surface); color:var(--text)}

/* ─── 8. Responsive ─────────────────────────────────────────────────── */
/* scroll reveal — single flourish, JS adds .in once */
.rv{opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (max-width: 960px){
  .mainnav{display:none}
  .header-cta .btn-ghost, .header-cta .hide-sm{display:none}
  .burger{display:inline-grid; place-items:center; width:var(--touch); height:var(--touch); background:none; border:1px solid var(--border); border-radius:var(--r-md); margin-left:auto}
  .drawer{display:block; position:fixed; inset:0 0 0 auto; width:min(340px,88vw); background:var(--surface); border-left:1px solid var(--border); z-index:70; padding:20px; transform:translateX(100%); transition:transform var(--slow) var(--ease); overflow-y:auto}
  .drawer.open{transform:none}
  .drawer a{display:block; padding:12px 8px; font-size:16px; font-weight:500; border-bottom:1px solid var(--border); min-height:var(--touch)}
  .scrim{position:fixed; inset:0; background:var(--scrim); z-index:65; display:none}
  .scrim.open{display:block}
  .hero-split, .split, .vs, .prod-row{grid-template-columns:1fr}
  .grid-3, .role-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr; gap:20px}
  .timeline{flex-direction:column; border-top:0; border-left:1.5px solid var(--border-strong); padding-left:20px; gap:20px}
  .timeline .tstep{padding:0}
  .timeline .tstep::before{left:-25px; top:4px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .log-row{grid-template-columns:1fr; gap:6px}
}
@media (max-width: 600px){
  .wrap, .header-in{padding-inline:24px}
  h1{font-size:40px}
  .grid-3, .grid-4, .role-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .header-cta .btn-primary{min-height:var(--touch)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .flow-agent{display:none}
  *{transition-duration:.01ms !important}
}