/* ============================================================
   ClickSolutions — design system
   Hand-authored. No framework. Tokens first, components second.
   ============================================================ */

/* ---------- 1. Fonts (self-hosted, subset to latin) ---------- */
@font-face{font-family:"Instrument Sans";src:url(/fonts/sans-latin.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url(/fonts/sans-latin-ext.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/mono-500-latin.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/mono-500-latin-ext.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/mono-400-latin.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}

/* ---------- 2. Tokens ---------- */
:root{
  --ink:#0B0D10; --ink-raise:#13171C; --ink-sunk:#07090B;
  --bone:#F5F2EA; --bone-raise:#EEEADE;
  --white:#FFFFFF;
  --cobalt:#2457FF; --cobalt-soft:#4E75FF;
  --grey:#8A9099;
  --amber:#D9A441;   /* transient retry state only */

  /* Fluid type. Deliberate ceilings — headlines are strong, not cartoonish. */
  --t-display:clamp(2.45rem,1.55rem + 3.9vw,4.75rem);
  --t-h2:clamp(1.95rem,1.42rem + 2.25vw,3.15rem);
  --t-h3:clamp(1.28rem,1.12rem + 0.75vw,1.72rem);
  --t-h4:clamp(1.06rem,1rem + 0.3vw,1.22rem);
  --t-lead:clamp(1.06rem,0.99rem + 0.36vw,1.28rem);
  --t-body:1.0rem;
  --t-sm:0.9rem;
  --t-mono:0.6875rem;

  --lh-display:1.02; --lh-h2:1.06; --lh-body:1.62;
  --tr-display:-0.035em; --tr-h2:-0.028em; --tr-h3:-0.018em; --tr-mono:0.11em;

  --gut:clamp(1.25rem,4.2vw,4.5rem);
  --maxw:1440px;
  --sec-y:clamp(4.5rem,9vw,9.5rem);
  --rule:1px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.22s; --slow:.6s;

  /* Section-level theme vars, overridden per section */
  --bg:var(--bone); --fg:var(--ink); --muted:#5C626B;
  --line:rgba(11,13,16,.14); --line-strong:rgba(11,13,16,.32);
  --panel:rgba(11,13,16,.025);
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bone);color:var(--ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--t-body);line-height:var(--lh-body);
  font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
::selection{background:var(--cobalt);color:#fff}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{background:var(--bg);color:var(--fg);padding-block:var(--sec-y);position:relative}
.section--ink{--bg:var(--ink);--fg:var(--bone);--muted:#9AA1AB;
  --line:rgba(245,242,234,.15);--line-strong:rgba(245,242,234,.34);--panel:rgba(245,242,234,.035)}
.section--bone{--bg:var(--bone);--fg:var(--ink);--muted:#5C626B;
  --line:rgba(11,13,16,.14);--line-strong:rgba(11,13,16,.32);--panel:rgba(11,13,16,.025)}
.section--white{--bg:var(--white);--fg:var(--ink);--muted:#5C626B;
  --line:rgba(11,13,16,.12);--line-strong:rgba(11,13,16,.3);--panel:rgba(11,13,16,.022)}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.rule{height:var(--rule);background:var(--line);border:0;width:100%}

/* ---------- 5. Type ---------- */
.display{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  font-weight:500;text-wrap:balance}
.h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-weight:500;text-wrap:balance}
.h3{font-size:var(--t-h3);line-height:1.18;letter-spacing:var(--tr-h3);font-weight:500}
.h4{font-size:var(--t-h4);line-height:1.3;letter-spacing:-0.012em;font-weight:600}
.lead{font-size:var(--t-lead);line-height:1.48;color:var(--muted);text-wrap:pretty}
.body{font-size:var(--t-body);color:var(--muted)}
.small{font-size:var(--t-sm);color:var(--muted)}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-mono);font-weight:500;letter-spacing:var(--tr-mono);text-transform:uppercase}
.mono--plain{text-transform:none;letter-spacing:.02em}
.cobalt{color:var(--cobalt)}
.section--ink .cobalt{color:var(--cobalt-soft)}

/* Section label: 01 / Build  ------------------------------- */
.seclabel{display:flex;align-items:center;gap:.7rem;color:var(--muted)}
.seclabel__n{color:var(--cobalt)}
.section--ink .seclabel__n{color:var(--cobalt-soft)}
.seclabel__bar{flex:1;height:var(--rule);background:var(--line);min-width:2rem}

/* ---------- 6. Links & buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.5rem;
  font-size:.94rem;font-weight:600;letter-spacing:-0.006em;border:var(--rule) solid transparent;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.btn--primary{background:var(--cobalt);color:#fff}
.btn--primary:hover{background:#1743D9}
.btn--ghost{border-color:var(--line-strong);color:var(--fg);background:transparent}
.btn--ghost:hover{border-color:var(--fg);background:var(--panel)}
.btn__arrow{transition:transform var(--fast) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

.tlink{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.94rem;
  padding-bottom:.22rem;border-bottom:var(--rule) solid var(--line-strong);
  transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.tlink:hover{border-color:var(--cobalt);color:var(--cobalt)}
.section--ink .tlink:hover{color:var(--cobalt-soft);border-color:var(--cobalt-soft)}
.tlink svg{transition:transform var(--fast) var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ---------- 7. Navigation (integrated, not a floating capsule) ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--ink);color:var(--bone);
  border-bottom:var(--rule) solid rgba(245,242,234,.13)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:74px}
.brand{display:inline-flex;align-items:baseline;gap:.06em;font-weight:600;font-size:1.06rem;
  letter-spacing:-0.028em;white-space:nowrap}
.brand__b{color:var(--bone)}
.brand__slash{color:var(--cobalt-soft);margin-inline:.12em;font-weight:500}
.brand__c{color:#C9CDD4;font-weight:500}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2.1rem)}
.nav__link{font-size:.9rem;font-weight:500;color:#C4C9D1;position:relative;padding-block:.35rem;
  transition:color var(--fast) var(--ease)}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--bone)}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--cobalt-soft);
  transition:width var(--fast) var(--ease)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{width:100%}
.nav__right{display:flex;align-items:center;gap:1.4rem}
.nav__cta{font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  padding:.55rem .95rem;border:var(--rule) solid rgba(245,242,234,.3);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.nav__cta:hover{background:var(--cobalt);border-color:var(--cobalt)}
.lang{display:flex;align-items:center;gap:.4rem;color:#8A9099}
.lang a{padding:.1rem .05rem;transition:color var(--fast) var(--ease)}
.lang a:hover{color:var(--bone)}
.lang a[aria-current="true"]{color:var(--bone)}
.lang__sep{opacity:.45}
.navtoggle{display:none;background:none;border:var(--rule) solid rgba(245,242,234,.3);
  padding:.5rem .7rem;cursor:pointer;color:var(--bone)}
.navtoggle span{display:block;width:17px;height:1.5px;background:currentColor;margin:3.5px 0;
  transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease)}
.nav[data-open="true"] .navtoggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav[data-open="true"] .navtoggle span:nth-child(2){opacity:0}
.nav[data-open="true"] .navtoggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav__panel{display:none}
.nav__panel .btn{width:100%;justify-content:center;margin-top:1.2rem}

/* ---------- 8. Hero ---------- */
.hero{background:var(--ink);color:var(--bone);position:relative;overflow:hidden;
  --bg:var(--ink);--fg:var(--bone);--muted:#9AA1AB;
  --line:rgba(245,242,234,.15);--line-strong:rgba(245,242,234,.34);--panel:rgba(245,242,234,.035)}
.hero__in{padding-block:clamp(3.5rem,7vw,6.5rem) clamp(3rem,6vw,5.5rem)}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.6rem;color:#767D87;padding-bottom:1.6rem;
  border-bottom:var(--rule) solid rgba(245,242,234,.13);margin-bottom:clamp(2.2rem,4.5vw,3.6rem)}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:start}
.hero__head{grid-column:1/7;grid-row:1}
.hero__act{grid-column:1/7;grid-row:2}
.hero__aside{grid-column:8/13;grid-row:1/span 2;padding-top:.4rem}
.hero h1{margin-bottom:1.6rem}
.hero__lead{max-width:44ch;margin-bottom:2.4rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__note{margin-top:2.6rem;padding-top:1.4rem;border-top:var(--rule) solid rgba(245,242,234,.13);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;color:#767D87}

/* ---------- 9. System map (hero) ---------- */
.sysmap{border:var(--rule) solid rgba(245,242,234,.17);background:rgba(245,242,234,.028)}
.sysmap__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem .9rem;border-bottom:var(--rule) solid rgba(245,242,234,.14);color:#767D87}
.sysmap__dot{width:6px;height:6px;background:var(--cobalt-soft);border-radius:50%;
  box-shadow:0 0 0 3px rgba(36,87,255,.16)}
.sysmap__live{display:inline-flex;align-items:center;gap:.45rem}
.sysmap__body{padding:1.1rem .9rem 1.2rem}
.sysrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.9rem;align-items:center;
  padding:.62rem .2rem;border-bottom:var(--rule) solid rgba(245,242,234,.09)}
.sysrow:last-child{border-bottom:0}
.sysrow__name{font-size:.88rem;font-weight:500;color:#DDE0E5}
.sysrow__tag{color:#6E757F}
.sysrow__pipe{display:flex;align-items:center;gap:.35rem;color:var(--cobalt-soft)}
.sysrow__pipe b{width:4px;height:4px;background:currentColor;border-radius:50%;opacity:.35;
  animation:pulse 2.4s var(--ease) infinite}
.sysrow__pipe b:nth-child(2){animation-delay:.25s}
.sysrow__pipe b:nth-child(3){animation-delay:.5s}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.sysmap__hub{margin-top:.9rem;padding:.8rem .9rem;border:var(--rule) dashed rgba(245,242,234,.24);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sysmap__hub strong{font-size:.86rem;font-weight:600;color:var(--bone)}

/* ---------- 9b. Hero system diagram (animated) ---------- */
.sysd{border:var(--rule) solid rgba(245,242,234,.17);background:rgba(245,242,234,.028);
  margin:0;position:relative;overflow:hidden}
.sysd__bar,.sysd__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem .9rem;color:#767D87}
.sysd__bar{border-bottom:var(--rule) solid rgba(245,242,234,.14)}
.sysd__foot{border-top:var(--rule) solid rgba(245,242,234,.14)}
.sysd__ok{color:var(--cobalt-soft)}
.sysd__num{color:var(--bone);font-variant-numeric:tabular-nums}
.sysd__foot>span:first-child{white-space:nowrap}
.sysd__foot{gap:.6rem 1.2rem;flex-wrap:wrap}
.sysd__live{display:inline-flex;align-items:center;gap:.45rem}
.sysd__dot{width:6px;height:6px;background:var(--cobalt-soft);border-radius:50%;
  box-shadow:0 0 0 0 rgba(36,87,255,.5);animation:sysd-beacon 2.6s var(--ease) infinite}
@keyframes sysd-beacon{
  0%{box-shadow:0 0 0 0 rgba(36,87,255,.45)}
  70%{box-shadow:0 0 0 7px rgba(36,87,255,0)}
  100%{box-shadow:0 0 0 0 rgba(36,87,255,0)}}
.sysd__svg{display:block;width:100%;height:auto;padding:.6rem .3rem}
.sysd__svg--tall{display:none}

.sysd__col{fill:#5E6570;font-size:10px;font-family:"JetBrains Mono",monospace;letter-spacing:.11em}
.sysd__node rect{fill:#101317;stroke:rgba(245,242,234,.16);stroke-width:1}
.sysd__name{fill:#DDE0E5;font-size:13.5px;font-weight:500;letter-spacing:-.014em}
.sysd__tag{fill:#6E757F;font-size:8.5px;letter-spacing:.04em}
.sysd__led{fill:var(--cobalt-soft);animation:sysd-led 3.4s var(--ease) infinite}
@keyframes sysd-led{0%,88%,100%{opacity:.28}92%{opacity:1}}

.sysd__hubbox{fill:#0E1218;stroke:var(--cobalt);stroke-width:1.2}
.sysd__hubring{fill:none;stroke:var(--cobalt);stroke-width:1;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:sysd-ring 3.6s var(--ease) infinite}
@keyframes sysd-ring{
  0%{opacity:.5;transform:scale(.92)}
  60%{opacity:0;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.12)}}
.sysd__hubt{fill:#F5F2EA;font-size:15px;font-weight:600;letter-spacing:-.02em}
.sysd__hubs{fill:var(--cobalt-soft);font-size:9.5px;letter-spacing:.08em}

/* Wires draw themselves once, then a short dash travels each one on a loop.
   pathLength="100" lets one dash pattern serve paths of different lengths. */
.sysd__wire{fill:none;stroke:rgba(245,242,234,.22);stroke-width:1;
  stroke-dasharray:100;stroke-dashoffset:100;animation:sysd-draw .9s var(--ease) forwards}
@keyframes sysd-draw{to{stroke-dashoffset:0}}
.sysd__pulse{fill:none;stroke:var(--cobalt-soft);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:4 100;stroke-dashoffset:4;opacity:.95;
  animation:sysd-flow 2.6s cubic-bezier(.55,.1,.45,.9) infinite}
.sysd__pulse--out{stroke:#7EA0FF}
@keyframes sysd-flow{
  0%{stroke-dashoffset:4;opacity:0}
  8%{opacity:1}
  85%{opacity:1}
  100%{stroke-dashoffset:-100;opacity:0}}

/* Nodes are visible from the first paint. An opacity animation on the <g>
   wrapping them intermittently left the group laid out but unpainted, with
   getComputedStyle still reporting opacity:1 — a compositing bug that is not
   worth a fade-in nobody asked for. The wires still draw themselves. */
.sysd__node,.sysd__hub{opacity:1}

/* Hero typography reveal. Transform only: the h1 paints immediately (it is the
   LCP element) and transforms never trigger layout shift. */
.hero__head .display{animation:hero-rise .85s var(--ease) both}
.hero__lead{animation:hero-rise .85s var(--ease) .08s both}
.hero__ctas{animation:hero-rise .85s var(--ease) .16s both}
@keyframes hero-rise{from{transform:translateY(14px)}to{transform:none}}
.hero__eyebrow{position:relative;display:inline-block}
.hero__eyebrow::after{content:"";position:absolute;left:0;right:0;bottom:-.55rem;height:1px;
  background:var(--cobalt-soft);transform:scaleX(0);transform-origin:left;
  animation:hero-keyline .9s var(--ease) .25s forwards}
@keyframes hero-keyline{to{transform:scaleX(1)}}

@media (max-width:1180px){ .sysd{max-width:660px} }
/* On a phone the SVG scales to roughly 0.58, so type must start much larger.
   The protocol tags are dropped rather than shrunk: at this size they are
   noise, and keeping them collides with the node names. */
@media (max-width:640px){
  .sysd__svg--wide{display:none}
  .sysd__svg--tall{display:block;padding:.5rem .75rem .8rem}
  .sysd__tag{display:none}
  .sysd__name{font-size:15px;letter-spacing:-.014em}
  .sysd__col{font-size:9.5px}
  .sysd__hubt{font-size:16px}
  .sysd__hubs{font-size:9.5px}
  .sysd__foot,.sysd__bar{padding:.6rem .75rem}
  .sysd__console{padding:.6rem .75rem .4rem}
  .sysd__row{font-size:10px;gap:.5rem}
  .sysd__log{min-height:5.2rem}
}

/* ---------- 9c. Live event console ---------- */
.sysd__console{border-top:var(--rule) solid rgba(245,242,234,.14);padding:.7rem .9rem .5rem}
.sysd__ctitle{display:flex;align-items:center;justify-content:space-between;
  color:#5E6570;padding-bottom:.5rem}
.sysd__rate{color:var(--cobalt-soft)}
.sysd__log{display:flex;flex-direction:column;gap:2px;min-height:6.4rem}
.sysd__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;
  align-items:baseline;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  line-height:1.85;white-space:nowrap;
  /* transform only: opacity is owned by the age ramp set in JS */
  animation:log-in .32s var(--ease) both}
@keyframes log-in{from{transform:translateY(7px)}to{transform:none}}
.sysd__t{font-style:normal;color:#5A616B}
.sysd__row b{font-weight:400;color:#D3D7DD;overflow:hidden;text-overflow:ellipsis;
  font-family:"Instrument Sans",sans-serif;font-size:12.5px;letter-spacing:-.01em}
.sysd__row s{text-decoration:none;color:#6E757F}
.sysd__row em{font-style:normal;color:var(--cobalt-soft);font-variant-numeric:tabular-nums}
.sysd__row .res{font-family:"Instrument Sans",sans-serif;font-size:12px;color:#7C838D;
  overflow:hidden;text-overflow:ellipsis}
.sysd__row em.retry{color:var(--amber)}
.sysd__row.is-retry b{color:var(--amber)}

/* Hover/focus a source node: its wire lights, the rest recede. */
.sysd__node[data-n]{cursor:default}
.sysd__node[data-n] rect{transition:stroke .25s var(--ease),fill .25s var(--ease)}
.sysd:has(.sysd__node[data-n]:hover) .sysd__wire,
.sysd:has(.sysd__node[data-n]:focus-visible) .sysd__wire{opacity:.35;transition:opacity .25s var(--ease)}
.sysd__node[data-n]:hover rect,.sysd__node[data-n]:focus-visible rect{stroke:var(--cobalt);fill:#131A28}
.sysd__wire.is-hot{opacity:1!important;stroke:var(--cobalt);stroke-width:1.4}
.sysd__node.is-hot rect{stroke:var(--cobalt);fill:#131A28}
.sysd__node.is-hot .sysd__led{fill:var(--cobalt);r:3.4}
.sysd__node.is-warn rect{stroke:var(--amber)}
.sysd__node.is-warn .sysd__led{fill:var(--amber);r:3.4}
.sysd__led{transition:r .2s var(--ease),fill .2s var(--ease)}
.sysd__node rect{transition:stroke .3s var(--ease),fill .3s var(--ease)}
.sysd__wire{transition:opacity .3s var(--ease),stroke .3s var(--ease)}
.sysd__hubbox.is-busy{animation:hub-busy .5s var(--ease)}
@keyframes hub-busy{50%{fill:#16203A}}
.sysd__state.is-warn{color:var(--amber)}
.sysd__dot.is-warn{background:var(--amber);box-shadow:0 0 0 3px rgba(217,164,65,.18)}

/* A single burst travelling a wire, fired per logged event. */
.sysd__burst{fill:none;stroke:var(--cobalt);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:5 100;stroke-dashoffset:5;pointer-events:none;
  animation:sysd-flow 1.05s cubic-bezier(.4,0,.5,1) forwards}
.sysd__burst--warn{stroke:var(--amber)}

/* ---------- 9d. The click ---------- */
/* A pointer travels to a box, presses it, and that press is what sends the
   information through. The brand is ClickSolutions; the hero should show a click. */
.sysd{position:relative}
.sysd__cursor{position:absolute;top:0;left:0;width:14px;height:18px;z-index:3;
  pointer-events:none;opacity:0;
  transform:translate3d(-40px,-40px,0);
  transition:transform .62s cubic-bezier(.5,.05,.2,1),opacity .3s var(--ease);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.sysd__cursor.is-on{opacity:1}
.sysd__cursor.is-press svg{transform:scale(.82)}
.sysd__cursor svg{transition:transform .12s var(--ease);transform-origin:top left}

/* the ring that expands out of the click point */
.sysd__ring{position:absolute;left:-3px;top:-3px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--cobalt-soft);opacity:0;transform:scale(.35)}
.sysd__cursor.is-press .sysd__ring{animation:click-ring .55s var(--ease)}
@keyframes click-ring{
  0%{opacity:.9;transform:scale(.3)}
  100%{opacity:0;transform:scale(2.6)}}

/* The box visibly takes the press.
   NOTE: do NOT put transform-box:fill-box + a transform animation on the <g>.
   A group's fill box collapses, the transform wipes the element, and the box
   disappears for the length of the animation. Animate the rect instead. */
.sysd__node.is-pressed rect{stroke:var(--cobalt);stroke-width:1.6;fill:#16203A}
.sysd__node.is-pressed rect{animation:node-press .34s var(--ease)}
@keyframes node-press{
  0%  {stroke-width:1}
  35% {stroke-width:2.2}
  100%{stroke-width:1.6}}

.sysd__hint{color:#5E6570;text-transform:none;letter-spacing:.02em}
@media (max-width:640px){ .sysd__hint{display:none} }

/* ---------- 10. Capability quadrant ---------- */
.caps{border-top:var(--rule) solid var(--line);margin-top:clamp(2.5rem,5vw,4rem)}
.cap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1.4fr);
  gap:var(--gut);padding-block:clamp(1.8rem,3.4vw,2.9rem);
  border-bottom:var(--rule) solid var(--line);position:relative;transition:background var(--slow) var(--ease)}
.cap:hover{background:var(--panel)}
.cap__n{display:flex;align-items:flex-start;gap:.9rem}
.cap__title{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);line-height:1.05;letter-spacing:-0.03em;font-weight:500}
.cap__list{display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-self:start}
.cap__go{color:var(--cobalt);opacity:0;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);display:inline-block}
.cap:hover .cap__go{opacity:1;transform:translateX(3px)}
.cap__list li{font-size:.845rem;color:var(--muted);padding:.28rem .6rem;
  border:var(--rule) solid var(--line);transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.cap:hover .cap__list li{border-color:var(--line-strong);color:var(--fg)}

/* ---------- 11b. Implementation phases ---------- */
.phases{margin-top:clamp(2.4rem,5vw,3.6rem)}
.phases__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--rule) solid var(--line);border-left:var(--rule) solid var(--line)}
.phase{padding:clamp(1.1rem,2.2vw,1.6rem);
  border-right:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);
  transition:background var(--slow) var(--ease)}
.phase:hover{background:var(--panel)}
.phase__n{display:block;color:var(--cobalt);margin-bottom:.9rem}
.section--ink .phase__n{color:var(--cobalt-soft)}
.phase__t{font-size:clamp(1.05rem,.98rem+.4vw,1.25rem);font-weight:500;
  letter-spacing:-.022em;margin-bottom:.5rem}
.sysd__illus{color:#5E6570;margin-right:.9rem}
@media (max-width:900px){ .phases__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:400px){ .phases__grid{grid-template-columns:1fr} }

/* ---------- 11. Architecture diagram (ERP) ---------- */
.arch{margin-top:clamp(2.5rem,5vw,4rem);border:var(--rule) solid var(--line);background:var(--panel)}
.arch__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.75rem 1rem;border-bottom:var(--rule) solid var(--line);color:var(--muted)}
.arch__body{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
.arch__col{padding:clamp(1.1rem,2.4vw,1.9rem)}
.arch__col--mid{border-inline:var(--rule) solid var(--line);background:rgba(36,87,255,.045);
  display:flex;flex-direction:column;justify-content:center;min-width:clamp(170px,20vw,250px)}
.arch__ct{color:var(--muted);margin-bottom:1rem;display:block}
.node{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.72rem .85rem;border:var(--rule) solid var(--line);margin-bottom:.55rem;
  background:var(--bg);transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.node:last-child{margin-bottom:0}
.node:hover{border-color:var(--cobalt);transform:translateX(2px)}
.node__name{font-size:.9rem;font-weight:500}
.node__proto{color:var(--muted);white-space:nowrap}
.hub{border:var(--rule) solid var(--cobalt);padding:1rem .95rem;background:var(--bg)}
.hub__t{font-weight:600;font-size:1rem;letter-spacing:-0.02em;margin-bottom:.5rem}
.hub__l{display:flex;flex-direction:column;gap:.42rem;color:var(--muted)}
.hub__l span{display:flex;align-items:center;gap:.5rem}
.hub__l i{width:3px;height:3px;background:var(--cobalt);border-radius:50%;flex:none}
.arch__flow{display:flex;align-items:center;gap:.3rem;color:var(--cobalt);margin:.9rem 0}
.arch__flow em{flex:1;height:1px;background:currentColor;opacity:.35;font-style:normal}

/* ---------- 12. Editorial two-column ---------- */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:start}
.split__l{grid-column:1/6}
.split__r{grid-column:7/13}
.split__l--wide{grid-column:1/7}
.split__r--narrow{grid-column:8/13}

/* Outcome list (development) */
.outcomes{border-top:var(--rule) solid var(--line)}
.outcome{display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:baseline;
  padding-block:1.05rem;border-bottom:var(--rule) solid var(--line);
  transition:padding-inline var(--slow) var(--ease),background var(--slow) var(--ease)}
.outcome:hover{background:var(--panel);padding-inline:.6rem}
.outcome__n{color:var(--muted)}
.outcome__t{font-size:clamp(1.02rem,.96rem + .35vw,1.2rem);font-weight:500;letter-spacing:-0.018em}
.outcome__m{color:var(--muted);text-align:right}

/* Spec table (websites) */
.spec{width:100%;border-collapse:collapse;margin-top:1.6rem}
.spec caption{text-align:left;color:var(--muted);padding-bottom:.8rem}
.spec th,.spec td{text-align:left;padding:.78rem .6rem;border-bottom:var(--rule) solid var(--line);font-size:.9rem}
.spec th{font-weight:500;color:var(--muted);width:46%}
.spec td{font-weight:500}
.spec td em{font-style:normal;color:var(--cobalt)}
.section--ink .spec td em{color:var(--cobalt-soft)}

/* ---------- 13. SEO / AEO columns ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(2.2rem,4.5vw,3.5rem);
  border:var(--rule) solid var(--line)}
.duo__c{padding:clamp(1.4rem,2.8vw,2.2rem)}
.duo__c+.duo__c{border-left:var(--rule) solid var(--line)}
.duo__h{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;color:var(--muted)}
.duo__l{margin-top:1.2rem;display:flex;flex-direction:column;gap:.62rem}
.duo__l li{display:flex;gap:.7rem;align-items:baseline;font-size:.92rem}
.duo__l i{width:12px;height:1px;background:var(--cobalt);flex:none;transform:translateY(-4px)}
.pipeline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem;
  padding-top:1.1rem;border-top:var(--rule) solid var(--line);color:var(--muted)}
.pipeline b{font-weight:500;color:var(--fg);padding:.24rem .5rem;border:var(--rule) solid var(--line)}

/* ---------- 14. Process ---------- */
.proc{margin-top:clamp(2.2rem,4.5vw,3.5rem);border-top:var(--rule) solid var(--line)}
.step{display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.35fr);gap:var(--gut);
  padding-block:clamp(1.5rem,2.8vw,2.2rem);border-bottom:var(--rule) solid var(--line);align-items:baseline}
.step__n{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);font-weight:400;color:var(--line-strong);
  font-family:"JetBrains Mono",monospace;letter-spacing:-0.02em;transition:color var(--slow) var(--ease)}
.step:hover .step__n{color:var(--cobalt)}
.step__t{font-size:clamp(1.15rem,1.02rem + .5vw,1.45rem);font-weight:500;letter-spacing:-0.022em}

/* ---------- 15. Work / case studies ---------- */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);
  margin-top:clamp(2.2rem,4.5vw,3.5rem)}
.case{border:var(--rule) solid var(--line);padding:clamp(1.2rem,2.4vw,1.8rem);
  display:flex;flex-direction:column;gap:1rem;background:var(--bg);
  transition:border-color var(--fast) var(--ease)}
.case:hover{border-color:var(--line-strong)}
.case__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.case__ph{color:var(--cobalt);border:var(--rule) dashed currentColor;padding:.18rem .45rem}
.case__t{font-size:clamp(1.08rem,1rem + .45vw,1.32rem);font-weight:500;letter-spacing:-0.022em}
.case__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:auto;
  padding-top:1rem;border-top:var(--rule) solid var(--line)}
.case__k{font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem);font-weight:500;letter-spacing:-0.03em;
  line-height:1;color:var(--fg)}
.case__kl{color:var(--muted);margin-top:.4rem;display:block;line-height:1.4}

/* ---------- 16. Trust ---------- */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);
  margin-top:clamp(2.2rem,4.5vw,3.5rem)}
.trust__i{border-top:2px solid var(--fg);padding-top:1.2rem}
.trust__t{font-size:clamp(1.15rem,1.02rem + .55vw,1.5rem);font-weight:500;letter-spacing:-0.026em;
  margin-bottom:.8rem;text-wrap:balance}

/* ---------- 17. CTA + form ---------- */
.cta__head{max-width:20ch}
.cta__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);
  margin-top:clamp(2.4rem,5vw,4rem);align-items:start}
.cta__l{grid-column:1/6}
.cta__r{grid-column:7/13}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field--full{grid-column:1/-1}
.field label{color:var(--muted)}
.field input,.field select,.field textarea{background:transparent;border:0;
  border-bottom:var(--rule) solid var(--line-strong);padding:.6rem 0;font-size:.98rem;
  color:var(--fg);transition:border-color var(--fast) var(--ease);border-radius:0;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cobalt)}
.field textarea{resize:vertical;min-height:104px}
.field select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
  linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) 1.15rem,calc(100% - 6px) 1.15rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.6rem}
.field select option{background:var(--ink);color:var(--bone)}
.field__err{color:#FF8A7A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;
  justify-content:space-between;margin-top:.4rem}
.alert{padding:1rem 1.1rem;border:var(--rule) solid var(--cobalt);
  background:rgba(36,87,255,.08);margin-bottom:1.6rem}
.contactlist{display:flex;flex-direction:column;gap:1.3rem;margin-top:2rem;
  padding-top:1.6rem;border-top:var(--rule) solid var(--line)}
.contactlist dt{color:var(--muted);margin-bottom:.3rem}
.contactlist dd{margin:0;font-size:.98rem}

/* ---------- 18. Footer ---------- */
.foot{background:var(--ink-sunk);color:#9AA1AB;padding-block:clamp(3rem,6vw,4.6rem) 2rem;
  --line:rgba(245,242,234,.12)}
.foot__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--gut);
  padding-bottom:2.6rem;border-bottom:var(--rule) solid var(--line)}
.foot__h{color:#F5F2EA;margin-bottom:1.1rem;display:block}
.foot__l{display:flex;flex-direction:column;gap:.62rem}
.foot__l a{font-size:.9rem;transition:color var(--fast) var(--ease)}
.foot__l a:hover{color:#F5F2EA}
.foot__bot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  align-items:center;padding-top:1.6rem}
.foot__legal{display:flex;flex-wrap:wrap;gap:1.4rem}
.foot address{font-style:normal;font-size:.9rem;line-height:1.7;margin-top:1rem}

/* ---------- 19. Motion ---------- */
/* Content is visible by default. Only once JS confirms it can reveal them
   do we hide them — otherwise a JS failure blanks the page, and crawlers
   rendering before scripts see nothing. */
.js .rv{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:.07s}
.js .rv[data-d="2"]{transition-delay:.14s}
.js .rv[data-d="3"]{transition-delay:.21s}
.js .rv[data-d="4"]{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .sysrow__pipe b{animation:none;opacity:.7}
  .sysd__pulse{display:none}
  .sysd__wire{stroke-dashoffset:0}
  .sysd__node,.sysd__hub{opacity:1}
  .sysd__hubring{display:none}
  .sysd__burst{display:none}
  .sysd__row{animation:none;opacity:1}
  .hero__eyebrow::after{transform:scaleX(1)}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- 20. Utilities ---------- */
.stack>*+*{margin-top:var(--s,1rem)}
.mt-1{margin-top:.8rem}.mt-2{margin-top:1.4rem}.mt-3{margin-top:2.2rem}.mt-4{margin-top:3rem}
.maxw-sm{max-width:46ch}.maxw-md{max-width:58ch}
.skip{position:absolute;left:-9999px;top:0;background:var(--cobalt);color:#fff;padding:.8rem 1.2rem;z-index:100}
.skip:focus{left:0}

/* ============================================================
   21. Responsive — deliberate layouts, not stacked desktop
   ============================================================ */
@media (max-width:1180px){
  .hero__head{grid-column:1/9;grid-row:auto}
  .hero__act{grid-column:1/9;grid-row:auto;order:3}
  .hero__aside{grid-column:1/13;grid-row:auto;order:2;padding-top:2.2rem}
  .sysmap{max-width:620px}
  .cap{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);row-gap:1rem}
  .cap__list{grid-column:1/-1}
  .step{grid-template-columns:4rem minmax(0,1fr) minmax(0,1.2fr)}
}
@media (max-width:1024px){
  .nav__links{display:none}
  .navtoggle{display:block;order:3}
  .nav__right{gap:.9rem}
  .nav[data-open="true"] .nav__panel{display:block;position:absolute;left:0;right:0;top:74px;
    background:var(--ink);border-bottom:var(--rule) solid rgba(245,242,234,.13);padding:1.2rem var(--gut) 1.8rem}
  .nav__panel .nav__link{display:block;font-size:1.22rem;font-weight:500;color:#DDE0E5;
    padding-block:.72rem;border-bottom:var(--rule) solid rgba(245,242,234,.08);letter-spacing:-0.02em}
  .nav__panel .nav__link::after{display:none}
  /* At this width the header CTA competes with the toggle for space, so it
     moves into the panel where it can be full width. */
  .nav__cta{display:none}
  .split__l,.split__r,.split__l--wide,.split__r--narrow{grid-column:1/-1}
  .split{row-gap:clamp(1.6rem,3.5vw,2.4rem)}
  .cta__l,.cta__r{grid-column:1/-1}
  .arch__body{grid-template-columns:1fr}
  .arch__col--mid{border-inline:0;border-block:var(--rule) solid var(--line);min-width:0}
  /* Stacking three columns of six nodes makes this section enormous on a
     phone. Two-up keeps it scannable at a third of the height. */
  .arch__col:not(.arch__col--mid){display:grid;grid-template-columns:1fr 1fr;
    gap:.55rem;align-content:start}
  .arch__col:not(.arch__col--mid) .arch__ct{grid-column:1/-1;margin-bottom:.2rem}
  .arch__col:not(.arch__col--mid) .node{margin-bottom:0}
  .node{flex-wrap:wrap}
  .node__proto{font-size:8.5px}
  .trust{grid-template-columns:1fr;gap:1.8rem}
  .trust__i{padding-top:1rem}
  .foot__grid{grid-template-columns:1fr 1fr;row-gap:2.4rem}
}
@media (max-width:820px){
  .duo{grid-template-columns:1fr}
  .duo__c+.duo__c{border-left:0;border-top:var(--rule) solid var(--line)}
  .cases{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .outcome{grid-template-columns:auto 1fr;row-gap:.3rem}
  .outcome__m{grid-column:2;text-align:left}
}
@media (max-width:640px){
  /* Mobile hero: the diagram is the thing that explains the business, so get
     to it sooner. Tighter rhythm, no coordinates, shorter run of text. */
  .hero__in{padding-block:2.2rem 2.4rem}
  .hero__meta{gap:.4rem 1.1rem;padding-bottom:1rem;margin-bottom:1.6rem}
  .hero h1{margin-bottom:1.1rem}
  .hero__lead{margin-bottom:1.6rem}
  .hero__note{margin-top:1.4rem;padding-top:1rem;gap:.35rem 1.2rem}
  .hero__aside{padding-top:1.8rem}
  .hero__act{padding-top:1.8rem}
  :root{--sec-y:clamp(3.4rem,11vw,4.6rem);
        --t-display:clamp(1.95rem,1.15rem + 3.5vw,2.45rem);
        --t-h2:clamp(1.7rem,1.3rem + 1.9vw,2.1rem)}
  .hero__meta{gap:.5rem 1.2rem}
  .hero__ctas{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .cap{grid-template-columns:1fr;row-gap:.7rem;padding-block:1.5rem}
  .cap__n{align-items:baseline}
  /* 24 chips across four rows is a lot of phone scrolling for a list the
     service pages already carry. */
  .cap__list{display:none}
  .step{grid-template-columns:3.2rem 1fr;row-gap:.45rem}
  .step__d{grid-column:2}
  .case__metrics{grid-template-columns:1fr;gap:.7rem}
  .case__metrics>div{display:flex;align-items:baseline;gap:.6rem}
  .case__kl{margin-top:0}
  .foot__grid{grid-template-columns:1fr;row-gap:2rem}
  .foot__bot{flex-direction:column;align-items:flex-start;gap:.9rem}
  .spec th,.spec td{padding:.68rem .3rem;font-size:.86rem}
  .spec th{width:52%}
}