/* ============================================================
   Nearfield Solutions — design system
   1. Tokens      2. Base      3. Components      4. Visualisation
   Motion is tokenised: hover lifts, press compresses, release
   springs back. Cards have more mass than buttons, so they lift
   slower and float higher.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Warm neutrals. The warmth is what stops the page reading as a template. */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FDFAF6;
  --wash:#FBF6F0;
  --wash-2:#F5EDE3;
  --line:#EBE2D7;
  --line-strong:#D8CABA;

  --ink:#17150F;
  --text:#453F38;
  --muted:#797166;

  /* Saturated brand */
  --ember:#EF5A24;
  --ember-deep:#D8430F;
  --orange:#F7801F;
  --amber:#FFAD33;
  --flame:#FF6B2C;
  --umber:#2E1B0D;
  --umber-2:#5A3718;

  --grad:linear-gradient(112deg,var(--ember) 0%,var(--orange) 52%,var(--amber) 100%);
  --grad-soft:linear-gradient(112deg,rgba(239,90,36,.14),rgba(255,173,51,.14));

  --screen:#DCE3D4; --screen-ink:#1F2A1C;
  --focus:#EF5A24;

  /* Elevation — warm-tinted, never neutral black */
  --e1:0 1px 2px rgba(46,27,13,.05), 0 1px 3px rgba(46,27,13,.04);
  --e2:0 2px 4px rgba(46,27,13,.05), 0 6px 12px -3px rgba(46,27,13,.07);
  --e3:0 4px 8px rgba(46,27,13,.05), 0 14px 28px -8px rgba(46,27,13,.11);
  --e4:0 8px 16px rgba(46,27,13,.06), 0 28px 48px -14px rgba(46,27,13,.15);
  --e5:0 16px 28px rgba(46,27,13,.07), 0 44px 76px -22px rgba(46,27,13,.19);
  --glow-sm:0 6px 18px -6px rgba(239,90,36,.42);
  --glow:0 16px 38px -12px rgba(239,90,36,.50);
  --ring:inset 0 1px 0 rgba(255,255,255,.7);

  /* Motion */
  --t-fast:140ms; --t:260ms; --t-slow:560ms;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.42,.5,1);
  --emph:cubic-bezier(.65,0,.35,1);

  /* Shape */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-md:20px; --r-lg:26px; --r-xl:34px; --r-full:999px;

  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --wrap:1200px;

  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@supports (interpolate-size:allow-keywords){ :root{interpolate-size:allow-keywords} }

/* Dark mode is selected, not flipped: its own surfaces and its own
   elevation, because shadow alone reads as nothing on a dark ground. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#100F0E; --surface:#1A1715; --surface-2:#211D1A;
    --wash:#171514; --wash-2:#211D1A;
    --line:#2D2825; --line-strong:#423A34;
    --ink:#F8F4EF; --text:#D8D0C6; --muted:#9E958A;
    --umber:#241407; --umber-2:#4A2D14;
    --screen:#C9D2BF;
    --e1:0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
    --e2:0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    --e3:0 8px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    --e4:0 16px 36px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
    --e5:0 28px 60px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.08);
    --ring:inset 0 1px 0 rgba(255,255,255,.07);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#100F0E; --surface:#1A1715; --surface-2:#211D1A;
  --wash:#171514; --wash-2:#211D1A;
  --line:#2D2825; --line-strong:#423A34;
  --ink:#F8F4EF; --text:#D8D0C6; --muted:#9E958A;
  --umber:#241407; --umber-2:#4A2D14;
  --screen:#C9D2BF;
  --e1:0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  --e2:0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  --e3:0 8px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  --e4:0 16px 36px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
  --e5:0 28px 60px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.08);
  --ring:inset 0 1px 0 rgba(255,255,255,.07);
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:1.0625rem;font-weight:450;line-height:1.65;
  letter-spacing:.004em;
  font-optical-sizing:auto;font-synthesis:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

h1,h2,h3,h4{color:var(--ink);margin:0;text-wrap:balance}
h1,h2{font-variation-settings:"wdth" 108;letter-spacing:-.032em;line-height:.96}
h2{font-size:clamp(2.125rem,4.4vw,3.5rem);font-weight:800;max-width:19ch}
h3{font-size:1.3125rem;font-weight:750;font-variation-settings:"wdth" 106;letter-spacing:-.018em;line-height:1.18}
p{margin:0;text-wrap:pretty}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--muted);max-width:58ch;line-height:1.6}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Eyebrow — small gradient-marked section label */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ember);font-variation-settings:"wdth" 100;
}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--grad)}

/* Scroll progress rail */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* ---------- 3. Components ---------- */

/* Header — compresses and gains elevation once you leave the hero */
header.site{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:transparent;border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             background var(--t) var(--ease),backdrop-filter var(--t) var(--ease);
}
header.site.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:var(--e2);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.7) blur(16px);-webkit-backdrop-filter:saturate(1.7) blur(16px);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;transition:height var(--t) var(--ease)}
header.site.is-stuck .bar{height:66px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;transition:transform var(--t) var(--spring)}
.brand:hover{transform:scale(1.03)}
.brand img{height:34px;width:auto;transition:height var(--t) var(--ease)}
header.site.is-stuck .brand img{height:28px}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand b{font-weight:800;font-variation-settings:"wdth" 118;font-size:1.125rem;color:var(--ink);letter-spacing:.02em}
.brand small{font-weight:700;font-variation-settings:"wdth" 118;font-size:.625rem;color:var(--ember);letter-spacing:.2em;margin-top:4px}

nav.links{display:flex;align-items:center;gap:6px}
nav.links a:not(.btn){
  position:relative;text-decoration:none;font-weight:600;color:var(--text);font-size:.9375rem;
  padding:9px 14px;border-radius:var(--r-full);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
nav.links a:not(.btn):hover{color:var(--ink);background:var(--wash-2)}
nav.links a:not(.btn)::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t) var(--ease);
}
nav.links a:not(.btn):hover::after{transform:scaleX(1)}
nav.links .btn{margin-left:10px}

/* Buttons — Material-style state layer over a gradient fill */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-weight:700;font-size:.9375rem;letter-spacing:.005em;white-space:nowrap;
  text-decoration:none;border-radius:var(--r-full);padding:13px 24px;
  border:2px solid transparent;cursor:pointer;
  transition:transform var(--t) var(--spring),box-shadow var(--t) var(--ease),
             border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:0;transition:opacity var(--t-fast) var(--ease);
}
.btn:hover::before{opacity:.1}
.btn:active::before{opacity:.16}
.btn:active{transform:translateY(0) scale(.97);transition-duration:var(--t-fast)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--e2),var(--glow-sm)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--e3),var(--glow)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--ember);box-shadow:var(--e2)}
.menu-btn{display:none}
@media (max-width:900px){ nav.links a:not(.btn){display:none} }

/* Hero — mesh gradient backdrop from layered radial gradients */
.hero{padding:clamp(56px,8vw,112px) 0 0;position:relative;isolation:isolate}
.mesh{
  /* Kept flush to the viewport edges: bleeding sideways would widen the
     document and give small screens a phantom horizontal scroll. */
  position:absolute;inset:-20% 0 auto 0;height:120%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(30% 34% at 6% 10%,rgba(239,90,36,.58),transparent 62%),
    radial-gradient(32% 36% at 94% 4%,rgba(255,173,51,.62),transparent 64%),
    radial-gradient(34% 32% at 88% 58%,rgba(247,128,31,.46),transparent 62%),
    radial-gradient(26% 30% at 10% 74%,rgba(255,107,44,.40),transparent 60%),
    radial-gradient(40% 44% at 48% 42%,var(--mesh-core),transparent 72%);
  --mesh-core:rgba(255,252,248,.92);
  filter:blur(6px);opacity:1;
}
/* The core blob keeps the headline area clear of the blobs. It has to
   be the page ground, not white, or dark mode reads as grey haze. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mesh{--mesh-core:rgba(16,15,14,.96);opacity:.85;filter:blur(8px)}
}
:root[data-theme="dark"] .mesh{--mesh-core:rgba(16,15,14,.96);opacity:.85;filter:blur(8px)}

.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,6vw,84px);align-items:center}
.hero h1{
  font-size:clamp(2.75rem,6.6vw,5.25rem);font-weight:850;
  font-variation-settings:"wdth" 104;line-height:.94;letter-spacing:-.038em;max-width:13ch;
}
.hero .lede{margin-top:30px;font-size:clamp(1.0625rem,1.7vw,1.3125rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.channels{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;padding:0;list-style:none}
.channels li{
  font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-full);padding:7px 15px;
  box-shadow:var(--e1);
  transition:transform var(--t) var(--spring),border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),box-shadow var(--t) var(--ease);
}
.channels li:hover{transform:translateY(-3px);border-color:var(--ember);color:var(--ink);box-shadow:var(--e2)}

/* USSD phone */
.phone-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.phone{
  width:min(304px,100%);
  background:linear-gradient(160deg,#514F4D,#282724 62%);
  border-radius:46px 46px 58px 58px;padding:28px 22px 26px;
  box-shadow:0 40px 80px -36px rgba(46,27,13,.62),0 10px 24px -10px rgba(46,27,13,.3),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);
}
.phone:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 52px 96px -38px rgba(46,27,13,.68),0 14px 28px -10px rgba(46,27,13,.34),inset 0 1px 0 rgba(255,255,255,.18)}
.speaker{width:54px;height:6px;border-radius:6px;background:#161514;margin:0 auto 18px}
.screen{background:var(--screen);color:var(--screen-ink);border-radius:12px;padding:16px 16px 14px;min-height:232px;font-family:var(--mono);font-size:.8125rem;line-height:1.5;box-shadow:inset 0 2px 8px rgba(0,0,0,.3);display:flex;flex-direction:column}
.screen .status{display:flex;justify-content:space-between;font-size:.6875rem;opacity:.7;border-bottom:1px solid rgba(31,42,28,.25);padding-bottom:6px;margin-bottom:10px}
.screen pre{margin:0;font:inherit;white-space:pre-wrap;flex:1}
.screen .input{border-top:1px solid rgba(31,42,28,.25);padding-top:6px;margin-top:8px;display:flex;justify-content:space-between;font-size:.75rem}
.caret{display:inline-block;width:7px;height:13px;background:var(--screen-ink);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.key{
  font:inherit;font-weight:700;font-size:1.0625rem;color:#F4F1EC;background:#413F3C;
  border:0;border-radius:15px;height:46px;cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  transition:transform var(--t-fast) var(--spring),background var(--t-fast) var(--ease);
}
.key:hover{background:#4F4C49}
.key:active{transform:translateY(2px) scale(.97);box-shadow:inset 0 -1px 0 rgba(0,0,0,.4)}
.key.call{background:#2E7D32}.key.call:hover{background:#379040}
.key.end{background:#B3261E}.key.end:hover{background:#C93126}
.phone-note{font-size:.875rem;color:var(--muted);text-align:center;max-width:32ch}

.ribbon{display:block;width:100%;height:auto;margin-top:clamp(44px,7vw,92px)}

section{padding:clamp(80px,10vw,136px) 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:end;margin-bottom:60px}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head .lede{justify-self:end}

/* Icons — one stroked set on a 24px grid. The chip carries the colour,
   so the icon itself is always currentColor and inverts on hover. */
.cap-ico,.product-ico{
  display:grid;place-items:center;flex:none;
  background:var(--grad-soft);color:var(--ember);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             transform var(--t) var(--spring),box-shadow var(--t) var(--ease);
}
.cap-ico svg,.product-ico svg{
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.cap-ico{width:42px;height:42px;border-radius:13px}
.cap-ico svg{width:21px;height:21px}
.cap--wide .cap-ico{width:48px;height:48px;border-radius:15px}
.cap--wide .cap-ico svg{width:24px;height:24px}
.product-ico{width:54px;height:54px;border-radius:17px;margin-bottom:2px}
.product-ico svg{width:27px;height:27px}
.cap:hover .cap-ico,.product:hover .product-ico{
  background:var(--grad);color:#fff;transform:rotate(-5deg) scale(1.07);box-shadow:var(--glow-sm);
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Capabilities — a bento: four flagship capabilities run double-width,
   the rest are compact. 4 wide + 8 compact packs the 4-column grid
   exactly, so no row is left ragged. */
/* align-items:start lets each card take its natural height instead of
   stretching to the tallest in its row, which is what kept opening dead
   space under the shorter flagship cards. Tops still line up per row. */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.cap{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface) 60%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px 20px;box-shadow:var(--e1);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),
             border-color var(--t) var(--ease);
}
.cap::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t-slow) var(--emph);
}
.cap:hover{transform:translateY(-8px);box-shadow:var(--e4);border-color:transparent}
.cap:hover::before{transform:scaleX(1)}
.cap h3{font-size:1.0625rem;line-height:1.22}
.cap p{color:var(--muted);font-size:.875rem;line-height:1.55}
.cap a{color:var(--ember);font-weight:700;text-underline-offset:3px}
.cap--wide{grid-column:span 2}
.cap--wide{padding:28px 26px 24px;gap:14px}
.cap--wide h3{font-size:1.3125rem}
.cap--wide p{font-size:.9375rem;max-width:46ch}

.tags{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;margin:0;padding:0;list-style:none}
.tags li{
  font-size:.6875rem;font-weight:700;letter-spacing:.01em;
  background:var(--wash-2);color:var(--text);
  border-radius:var(--r-xs);padding:4px 9px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.cap--wide .tags li{font-size:.75rem;padding:5px 10px}
.cap:hover .tags li{background:var(--grad-soft);color:var(--ink)}

/* Industries */
#industries{background:var(--wash);position:relative}
.tablist{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.tab{
  position:relative;z-index:1;font:inherit;font-weight:700;font-size:.9375rem;
  padding:13px 22px;border-radius:var(--r-full);
  border:1.5px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;
  box-shadow:var(--e1);
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease),
             transform var(--t) var(--spring),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.tab:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--e2)}
.tab[aria-selected="true"]{color:#fff;border-color:transparent;background:var(--grad);box-shadow:var(--e2),var(--glow-sm)}
.tab[aria-selected="true"]:hover{transform:translateY(-2px);box-shadow:var(--e3),var(--glow)}

.panel{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);
  background:var(--surface);border-radius:var(--r-xl);padding:clamp(28px,5vw,56px);
  border:1px solid var(--line);box-shadow:var(--e3);
  animation:panel-in var(--t-slow) var(--ease) both;
}
@keyframes panel-in{from{opacity:0;transform:translateY(14px) scale(.994)}to{opacity:1;transform:none}}
.panel[hidden]{display:none}
.panel h3{font-size:clamp(1.75rem,3vw,2.375rem);font-weight:800;font-variation-settings:"wdth" 106;letter-spacing:-.028em;margin-bottom:18px}
.panel > div > p{color:var(--muted)}
.panel > ul{margin:0;padding:0;list-style:none}
.panel > ul > li{padding:15px 0 15px 30px;border-bottom:1px solid var(--line);position:relative;transition:padding-left var(--t) var(--ease)}
.panel > ul > li:last-child{border-bottom:0}
.panel > ul > li::before{content:"";position:absolute;left:0;top:25px;width:16px;height:3px;border-radius:2px;background:var(--grad);transition:width var(--t) var(--emph)}
.panel > ul > li:hover{padding-left:38px}
.panel > ul > li:hover::before{width:24px}
.panel .kicker{font-weight:750;color:var(--ink);margin-bottom:5px}

/* Why us — the page's dark band. Locally re-tokenised so every
   component inside picks up dark-appropriate surfaces and lines. */
#approach{
  position:relative;overflow:hidden;
  background:
    radial-gradient(48% 56% at 82% 10%,rgba(239,90,36,.20),transparent 62%),
    radial-gradient(40% 50% at 10% 90%,rgba(255,173,51,.12),transparent 64%),
    linear-gradient(165deg,#17150F 0%,#241E16 52%,#17150F 100%);
  --ink:#FFFFFF; --text:#DAD3C8; --muted:#A79D8E;
  --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.22);
  --wash-2:rgba(255,255,255,.08);
  --e1:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  --e3:0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--text);
}
#approach .eyebrow{color:var(--amber)}
#approach .pillars>div{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#approach .steps li::before{background:#1E1913;color:#fff}

/* Why us */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0 0 76px;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding:26px 20px 0 0;border-top:3px solid var(--line);position:relative}
.steps li::before{
  content:counter(s);position:absolute;top:-18px;left:0;width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:3px solid var(--orange);color:var(--ink);
  font-weight:800;font-size:.875rem;display:grid;place-items:center;
  box-shadow:var(--e1);transition:transform var(--t) var(--spring),box-shadow var(--t) var(--ease)}
.steps li:hover::before{transform:scale(1.12);box-shadow:var(--e2),var(--glow-sm)}
.steps li:last-child{border-top-color:var(--ember)}
.steps b{display:block;color:var(--ink);font-variation-settings:"wdth" 108;font-weight:750;margin:12px 0 6px}
.steps span{font-size:.9375rem;color:var(--muted)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillars>div{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;box-shadow:var(--e1);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.pillars>div:hover{transform:translateY(-6px);box-shadow:var(--e3)}
.pillars h3{margin-bottom:12px}
.pillars p{color:var(--muted);font-size:.9688rem}

/* SaaS products */
.saas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1100px) and (min-width:961px){.saas{grid-template-columns:1fr 1fr}}
.product{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,42px);display:flex;flex-direction:column;gap:18px;
  box-shadow:var(--e2);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t) var(--ease);
}
.product::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:var(--grad)}
.product::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%,rgba(239,90,36,.09),transparent 70%);
  opacity:0;transition:opacity var(--t-slow) var(--ease)}
.product:hover{transform:translateY(-10px);box-shadow:var(--e5);border-color:transparent}
.product:hover::after{opacity:1}
.product>*{position:relative;z-index:1}
.product h3{font-size:clamp(1.5rem,2.6vw,1.9375rem);font-weight:800;font-variation-settings:"wdth" 106;letter-spacing:-.026em}
.product p{color:var(--muted)}
.product ul{margin:0;padding:0;list-style:none;flex:1}
.product li{padding:11px 0 11px 28px;border-bottom:1px solid var(--line);position:relative;font-size:.9688rem}
.product li:last-child{border-bottom:0}
.product li::before{content:"";position:absolute;left:0;top:20px;width:15px;height:3px;border-radius:2px;background:var(--grad)}
.product .btn{align-self:flex-start;margin-top:4px}
.saas-foot{margin-top:30px;color:var(--muted);max-width:60ch}
.saas-note{margin-top:22px;font-size:.9375rem;color:var(--muted)}
.saas-note a{color:var(--ember);font-weight:700;text-underline-offset:3px}

/* Segmentation block */
.segment{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;margin-top:clamp(56px,7vw,92px);padding-top:clamp(40px,6vw,64px);border-top:1px solid var(--line)}
.segment-copy h3{font-size:clamp(1.75rem,3vw,2.375rem);font-weight:800;font-variation-settings:"wdth" 106;letter-spacing:-.028em;margin:12px 0 16px}
.segment-copy p{color:var(--muted);max-width:52ch}
.ticks{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.ticks li{position:relative;padding-left:32px;font-size:.9375rem}
.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:6px;border-left:2.5px solid var(--ember);border-bottom:2.5px solid var(--ember);transform:rotate(-45deg)}

/* FAQ — surface cards with an animated disclosure */
#faq{background:var(--wash)}
.faq-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(32px,5vw,72px);align-items:start}
.faq{display:grid;gap:10px}
.faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--e1);overflow:hidden;
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.faq details:hover{box-shadow:var(--e2)}
.faq details[open]{box-shadow:var(--e2);border-color:var(--line-strong)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 52px 20px 22px;
  font-weight:700;color:var(--ink);font-size:1rem;position:relative;
  transition:background var(--t-fast) var(--ease)}
.faq summary:hover{background:var(--wash-2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--ember);border-bottom:2.5px solid var(--ember);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t) var(--spring)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 24px 22px;color:var(--text);max-width:64ch;font-size:.9688rem}
@supports selector(details::details-content){
  .faq details::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size var(--t) var(--ease),opacity var(--t) var(--ease),content-visibility var(--t) allow-discrete;
    transition-behavior:allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}

/* Contact — layered gradient ground, not a flat fill */
#contact{
  background:
    radial-gradient(62% 72% at 12% 18%,rgba(239,90,36,.32),transparent 62%),
    radial-gradient(52% 64% at 88% 78%,rgba(255,173,51,.22),transparent 64%),
    linear-gradient(150deg,var(--umber) 0%,#43260F 58%,var(--umber) 100%);
  color:#F6EDE4;position:relative;overflow:hidden}
#contact h2{color:#fff;max-width:20ch}
#contact .eyebrow{color:var(--amber)}
#contact .lede{color:#DDC6B1}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.contact-list{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.2)}
.contact-list li{
  display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 10px 18px 0;
  border-bottom:1px solid rgba(255,255,255,.2);border-radius:var(--r-xs);
  transition:background var(--t-fast) var(--ease),padding-left var(--t) var(--ease)}
.contact-list li:hover{background:rgba(255,255,255,.06);padding-left:12px}
.contact-list .k{color:#D3AE8D;font-size:.9375rem}
.contact-list a{color:#fff;font-weight:600;text-decoration-color:var(--amber);text-underline-offset:4px;overflow-wrap:anywhere}
#contact .btn-primary{margin-top:38px}
#contact .btn-primary:hover{box-shadow:var(--e4),0 18px 44px -12px rgba(255,173,51,.55)}
.contact-mark{position:absolute;right:-60px;bottom:-40px;width:440px;opacity:.13;pointer-events:none}

footer{padding:40px 0;border-top:1px solid var(--line);background:var(--wash)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-size:.875rem;color:var(--muted)}
.foot .brand img{height:26px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px}
.foot-links a{text-decoration:none;padding:6px 12px;border-radius:var(--r-full);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.foot-links a:hover{color:var(--ember);background:var(--wash-2)}

/* Scroll reveal — staggered, with a hint of scale so it reads as depth */
.reveal{opacity:0;transform:translateY(22px) scale(.988);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ---------- 4. Visualisation ----------
   Categorical slots are validated for colour-vision deficiency and
   contrast against both surfaces. Do not substitute by eye. */
.viz{
  --series-1:#EF5A24; --series-2:#2A78D6; --series-3:#1BAF7A; --series-0:#8C8985;
  --good:#0CA30C; --warn:#B87A00; --crit:#D03B3B;
  --track:color-mix(in srgb,var(--ink) 10%,transparent);
  margin:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .viz{
    --series-1:#E4642F; --series-2:#3987E5; --series-3:#199E70; --series-0:#9D9993;
    --good:#0CA30C; --warn:#FAB219; --crit:#E06B6B;
    --track:color-mix(in srgb,var(--ink) 16%,transparent)}
}
:root[data-theme="dark"] .viz{
  --series-1:#E4642F; --series-2:#3987E5; --series-3:#199E70; --series-0:#9D9993;
  --good:#0CA30C; --warn:#FAB219; --crit:#E06B6B;
  --track:color-mix(in srgb,var(--ink) 16%,transparent)}

.viz-head{margin-bottom:22px}
.viz-head h4{color:var(--ink);font-size:1.0625rem;font-weight:800;font-variation-settings:"wdth" 106;margin:8px 0 0;line-height:1.25}
.viz-label{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:24px 0 9px}
.viz-label:first-of-type{margin-top:0}
.viz-sub{font-size:.8125rem;color:var(--muted)}
.viz-sub b{color:var(--ink)}
.viz-note{font-size:.75rem;color:var(--muted);margin-top:16px}

.track{height:10px;border-radius:var(--r-full);background:var(--track);overflow:hidden}
.track .fill{display:block;height:100%;border-radius:0 5px 5px 0;min-width:5px;transition:width var(--t-slow) var(--emph)}
.fill.s-good{background:var(--good)}.fill.s-warn{background:var(--warn)}.fill.s-crit{background:var(--crit)}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--track);gap:2px}
.stack .seg{display:block;height:100%;min-width:2px;transition:width var(--t-slow) var(--emph)}
.seg.c1{background:var(--series-1)}.seg.c2{background:var(--series-2)}
.seg.c3{background:var(--series-3)}.seg.c0{background:var(--series-0)}
.legend{display:flex;flex-wrap:wrap;gap:7px 18px;margin:13px 0 0;padding:0;list-style:none;font-size:.8125rem;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:7px}
.legend b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.sw{width:10px;height:10px;border-radius:3px;flex:none}
.sw.c1{background:var(--series-1)}.sw.c2{background:var(--series-2)}
.sw.c3{background:var(--series-3)}.sw.c0{background:var(--series-0)}
.meter{height:10px;border-radius:var(--r-full);background:var(--track);overflow:hidden;margin-bottom:9px}
.meter span{display:block;height:100%;border-radius:0 5px 5px 0;background:var(--grad)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{font-size:.8125rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:6px 13px;color:var(--muted);box-shadow:var(--e1)}
.chips li b{color:var(--ink);font-weight:800;margin-left:4px}

/* Field-sales figure */
.panel .viz-field{grid-column:1/-1;margin-top:8px;padding-top:34px;border-top:1px solid var(--line)}
.viz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.viz-card{
  background:var(--wash);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--e1);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.viz-card:hover{transform:translateY(-5px);box-shadow:var(--e3)}
.viz-card-head{margin-bottom:17px}
.viz-card h5{margin:0;font-size:.9375rem;font-weight:800;color:var(--ink)}
.viz-stat{display:flex;align-items:baseline;gap:7px;margin-top:5px}
.viz-stat b{font-size:1.875rem;font-weight:850;font-variation-settings:"wdth" 106;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.viz-stat span{font-size:.8125rem;color:var(--muted)}

.routemap{width:100%;height:auto;display:block;margin-bottom:16px}
.routemap polyline{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.route-done{stroke:var(--series-1)}
.route-todo{stroke:var(--muted);stroke-dasharray:5 7;opacity:.6}
.routemap .stop circle{stroke:var(--wash);stroke-width:3}
.routemap .stop text{font:700 9px var(--sans);text-anchor:middle;fill:#fff}
.stop.done circle{fill:var(--series-1)}
.stop.next circle{fill:var(--bg);stroke:var(--series-1)}
.stop.next text{fill:var(--ink)}
.stop.todo circle{fill:var(--muted)}

.runlist{margin:0;padding:0;list-style:none;font-size:.8125rem}
.runlist li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:10px 0;border-top:1px solid var(--line)}
.runlist b{grid-column:2;color:var(--ink)}
.runlist .meta{grid-column:2;color:var(--muted)}
.runlist .dot{grid-row:1/3;width:9px;height:9px;border-radius:50%;margin-top:6px}
.dot.done{background:var(--series-1)}
.dot.next{background:var(--bg);border:2px solid var(--series-1)}
.dot.todo{background:var(--muted)}
.run-total{margin-top:15px;padding-top:13px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}
.run-total b{color:var(--ink);font-weight:800}

.bars{margin:0;padding:0;list-style:none;display:grid;gap:19px}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:.875rem}
.bar-top b{color:var(--ink)}
.bar-top .val{color:var(--muted);font-variant-numeric:tabular-nums}
.flag{font-size:.75rem;margin-top:8px;display:flex;align-items:center;gap:6px}
.flag span{font-size:.625rem}
.f-good{color:var(--good)}.f-warn{color:var(--warn)}.f-crit{color:var(--crit)}

.viz-data{margin-top:26px;border-top:1px solid var(--line)}
.viz-data summary{cursor:pointer;padding:16px 0 0;font-size:.8125rem;font-weight:700;color:var(--ember)}
.table-scroll{overflow-x:auto;margin-top:12px}
.viz-data table{width:100%;border-collapse:collapse;font-size:.8125rem;min-width:460px}
.viz-data caption{text-align:left;color:var(--muted);font-size:.75rem;padding-bottom:8px}
.viz-data th,.viz-data td{text-align:left;padding:9px 14px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.viz-data thead th{color:var(--ink);font-weight:800}
.viz-data tbody th{font-weight:600;color:var(--text)}
.viz-data td{color:var(--muted)}

/* Segment builder */
.viz-segment{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(26px,3.5vw,34px);box-shadow:var(--e3)}
.chips-toggle{display:flex;flex-wrap:wrap;gap:9px}
.chips-toggle .chip{
  position:relative;isolation:isolate;overflow:hidden;
  font:inherit;font-size:.8125rem;font-weight:650;
  background:var(--surface);border:1.5px solid var(--line);color:var(--text);
  border-radius:var(--r-full);padding:8px 15px;cursor:pointer;box-shadow:var(--e1);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),
             color var(--t) var(--ease),transform var(--t) var(--spring),box-shadow var(--t) var(--ease)}
.chips-toggle .chip::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:0;transition:opacity var(--t-fast) var(--ease)}
.chips-toggle .chip:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--e2)}
.chips-toggle .chip:hover::before{opacity:.07}
.chips-toggle .chip:active{transform:scale(.96)}
.chips-toggle .chip[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--e2),var(--glow-sm)}
.seg-readout{margin-top:26px}
.hero-stat{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.hero-stat b{
  font-size:clamp(2.5rem,5vw,3.25rem);font-weight:850;font-variation-settings:"wdth" 104;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stat span{font-size:.9375rem;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .viz-grid{grid-template-columns:1fr}
  .segment{grid-template-columns:1fr}
}
@media (max-width:1180px){
  .caps{grid-template-columns:repeat(3,1fr)}
  .cap--wide{grid-column:auto;padding:22px 20px 20px;gap:12px}
  .cap--wide h3{font-size:1.0625rem}
  .cap--wide p{font-size:.875rem}
  .cap--wide .cap-ico{width:42px;height:42px;border-radius:13px}
  .cap--wide .cap-ico svg{width:21px;height:21px}
}
@media (max-width:860px){ .caps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .caps{grid-template-columns:1fr} }
@media (max-width:960px){
  .hero-grid,.sec-head,.panel,.contact-grid,.saas,.faq-grid{grid-template-columns:1fr}
  .sec-head .lede{justify-self:start}
  .steps{grid-template-columns:1fr;gap:30px;padding-left:20px;margin-bottom:56px}
  .steps li{border-top:0;border-left:3px solid var(--line);padding:0 0 0 30px}
  .steps li::before{left:-20px;top:-4px}
  .steps li:last-child{border-left-color:var(--ember)}
  .steps b{margin-top:0}
  .pillars{grid-template-columns:1fr}
  .phone-wrap{order:2}
}
@media (max-width:520px){
  .contact-list li{grid-template-columns:1fr;gap:2px}
  .brand small{display:none}
  .cap{padding:26px 22px 22px}
  /* The bar is brand + CTA only at this width; keep the CTA on one line. */
  .bar{height:68px;gap:12px}
  header.site.is-stuck .bar{height:60px}
  nav.links .btn{margin-left:0;padding:11px 16px;font-size:.875rem}
  .brand b{font-size:1rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .caret{animation:none}
  .reveal{opacity:1;transform:none}
  .panel{animation:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}