/* ============================================================
   YUME SYSTEMS — design system (foundation)
   v2 · "Editorial engineer, after dark"

   Paper and ink, one burnt-orange accent, ochre second. The
   paper carries the reading; ink panels carry the product —
   screens, diagrams, code. Depth comes from layered frames,
   soft shadows and a single warm glow, never from neon.
   Tokens mirror the Yume design system (tokens.json).
   ============================================================ */
:root{
  /* surfaces — warm paper */
  --bg:#f5f7fb;   --bg-2:#fbfcfe;
  --ring-0:#ffffff; --ring-1:#eef1f7; --ring-2:#e6eaf2; --ring-3:#dde2ec; --ring-4:#cfd6e3;

  /* ink */
  --fg:#0b1324; --fg-2:#334155; --fg-3:#5b6478;

  /* accent — burnt orange (text-safe on paper), ochre second */
  --accent:#1d4ed8; --accent-2:#475569; --accent-deep:#1e40af;
  --brand:#2563eb;                       /* the mark's orange: fills and glows, never small text on paper */
  --accent-glow:rgba(37,99,235,.22);
  --accent-tint:rgba(29,78,216,.07); --accent-line:rgba(29,78,216,.32);
  --on-accent:#ffffff;
  --err:#b42318; --err-fg:#a11d14; --err-bg:rgba(180,35,24,.07);

  /* data hues — told apart by lightness as well as hue */
  --cyan:#1d6874; --mint:#2c7346;

  /* rules */
  --line:rgba(11,19,36,.11); --line-2:rgba(11,19,36,.2); --line-3:#8a93a6;
  --glass:rgba(255,255,255,.86);

  /* ink panels — always dark, in both themes */
  --ink:#0a1020; --ink-2:#0b1324; --ink-3:#172036; --ink-4:#1e293b;
  --ink-fg:#f1f5f9; --ink-fg-2:#cbd5e1; --ink-fg-3:#94a3b8;
  --ink-line:rgba(241,245,249,.1); --ink-line-2:rgba(241,245,249,.18);
  --ink-accent:#60a5fa; --ink-ochre:#93c5fd;

  --code-bg:#0f172a; --code-fg:#e2e8f0; --code-c:#94a3b8; --code-k:#93c5fd; --code-s:#9fd0a8;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Newsreader","Iowan Old Style","Georgia",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
  --max:1200px;
  --gutter:clamp(16px,4vw,32px);
  --ease:cubic-bezier(.2,.7,.2,1);

  --sh-1:0 1px 2px rgba(11,19,36,.05), 0 6px 18px -6px rgba(11,19,36,.08);
  --sh-2:0 2px 6px rgba(11,19,36,.05), 0 24px 56px -18px rgba(11,19,36,.24);
  --sh-3:0 40px 90px -30px rgba(10,16,32,.55);
}
:root[data-theme="dark"]{
  --bg:#0a1020;   --bg-2:#0e1528;
  --ring-0:#111a2e; --ring-1:#151f36; --ring-2:#1b2640; --ring-3:#222f4d; --ring-4:#2b3a5c;
  --fg:#f1f5f9; --fg-2:#cbd5e1; --fg-3:#94a3b8;
  --accent:#60a5fa; --accent-2:#93c5fd; --accent-deep:#3b82f6;
  --accent-glow:rgba(96,165,250,.24);
  --accent-tint:rgba(96,165,250,.1); --accent-line:rgba(96,165,250,.38);
  --on-accent:#0a1020;
  --err:#f0706a; --err-fg:#f59a95; --err-bg:rgba(240,112,106,.1);
  --cyan:#73bcc6; --mint:#82c79b;
  --line:rgba(242,237,229,.1); --line-2:rgba(242,237,229,.2); --line-3:#7d7367;
  --glass:rgba(28,26,23,.86);
  --ink:#0d0c0a; --ink-2:#151311; --ink-3:#1f1c18; --ink-4:#1b2640;
  --code-bg:#0f0e0c;
  --sh-1:0 1px 2px rgba(0,0,0,.3), 0 6px 18px -6px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.3), 0 24px 56px -18px rgba(0,0,0,.6);
  --sh-3:0 40px 90px -30px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 16.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-feature-settings:"ss01","cv11";
}
img,svg{max-width:100%}
img{height:auto}
.wrap{max-width:calc(var(--max) + var(--gutter)*2); margin:0 auto; padding:0 var(--gutter)}
h1,h2,h3,h4{font-family:var(--display); margin:0; line-height:1.08; letter-spacing:-.015em; font-weight:600}
a{color:inherit}
::selection{background:var(--brand); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm)}
.ink :focus-visible{outline-color:var(--ink-accent)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; z-index:200; background:var(--fg); color:var(--bg); padding:10px 14px; border-radius:var(--r-sm); font-weight:600; text-decoration:none}
.skip:focus{top:12px}

/* ============================================================
   INK — the dark canvas used for product, hero and proof
   ============================================================ */
.ink{
  background:var(--ink); color:var(--ink-fg);
  --fg:var(--ink-fg); --fg-2:var(--ink-fg-2); --fg-3:var(--ink-fg-3);
  --line:var(--ink-line); --line-2:var(--ink-line-2); --line-3:#6f665b;
  --accent:var(--ink-accent); --accent-2:var(--ink-ochre); --accent-deep:#e06d33;
  --accent-tint:rgba(96,165,250,.1); --accent-line:rgba(96,165,250,.36);
  --ring-0:var(--ink-2); --ring-1:var(--ink-3); --ring-2:var(--ink-4);
  --bg:var(--ink); --bg-2:var(--ink-2);
  --on-accent:#16120e;
  position:relative; isolation:isolate; overflow:hidden;
}
/* the field: a fine grid that fades out, and one warm light */
.field{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.field::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--ink-line) 1px,transparent 1px),linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);
  background-size:64px 64px; background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 10%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 10%,transparent 75%);
  opacity:.55;
}
.glow{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform}
.glow.g1{width:520px; height:520px; right:-120px; top:-160px; background:radial-gradient(circle,#2563eb 0%,rgba(37,99,235,0) 68%)}
.glow.g2{width:420px; height:420px; left:-160px; bottom:-180px; background:radial-gradient(circle,#c98a1f 0%,rgba(201,138,31,0) 70%); opacity:.35}
.glow.g3{width:300px; height:300px; left:40%; top:30%; background:radial-gradient(circle,#1e40af 0%,rgba(147,51,10,0) 70%); opacity:.45}
.grain{position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:no-preference){
  .glow.g1{animation:drift 18s ease-in-out infinite alternate}
  .glow.g2{animation:drift 22s ease-in-out infinite alternate-reverse}
}
@keyframes drift{to{transform:translate(-40px,30px) scale(1.08)}}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky; top:0; z-index:90;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
header.scrolled{box-shadow:0 10px 30px -18px rgba(11,19,36,.35)}
.hd{display:flex; align-items:center; gap:16px; height:70px}
.mark{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.mark svg{width:32px;height:32px;border-radius:9px;display:block; box-shadow:0 6px 16px -6px rgba(37,99,235,.7)}
.mark b{font-family:var(--display); font-weight:600; font-size:23px; letter-spacing:-.015em; line-height:1}
.mark i{font-style:normal; color:var(--fg-3); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500}
header nav{margin-left:auto; display:flex; align-items:center; gap:2px}
header nav a{
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--fg-2);
  padding:9px 13px; border-radius:999px; position:relative;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
header nav a:hover{color:var(--fg); background:var(--ring-1)}
header nav a.on{color:var(--fg)}
header nav a.on::after{
  content:""; position:absolute; left:50%; bottom:3px; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--brand);
}
header nav a[data-cta]{
  margin-left:10px; background:var(--fg); color:var(--bg); padding:10px 18px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
header nav a[data-cta]:hover{background:var(--brand); color:#fff}
header nav a[data-cta]::after{display:none}
.tgl{
  margin-left:6px; width:38px;height:38px; border:1px solid var(--line-2); border-radius:999px;
  background:transparent; color:var(--fg-2); cursor:pointer; display:grid; place-items:center;
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .3s var(--ease);
}
.tgl:hover{color:var(--fg); border-color:var(--line-3); transform:rotate(20deg)}

.depth{height:2px; background:transparent; position:relative}
.depth i{position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--brand),#93c5fd)}

/* mobile header */
.menu-btn{
  display:none; margin-left:auto; width:42px; height:42px; flex:none;
  border:1px solid var(--line-2); border-radius:999px; background:transparent;
  color:var(--fg); cursor:pointer; place-items:center;
}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .bars{display:none}
.mark span{white-space:nowrap}
@media(max-width:420px){ .mark i{display:none} }
@media(max-width:980px){
  /* backdrop-filter on the header makes it the containing block for any
     position:fixed descendant, so the menu panel was resolving top/bottom
     against the 70px header instead of the viewport and collapsing to a
     strip behind the hero. The blur buys nothing on a phone. */
  header{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg)}
  header nav{z-index:95}
  .menu-btn{display:grid}
  header nav{
    position:fixed; left:0; right:0; top:72px; bottom:0;
    margin-left:0; flex-direction:column; align-items:stretch; gap:4px;
    background:var(--bg); padding:20px var(--gutter) 32px; overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  }
  header nav.open{opacity:1; visibility:visible; transform:none; transition:opacity .25s var(--ease), transform .25s var(--ease)}
  header nav a{padding:15px 4px; font-size:24px; font-family:var(--display); font-weight:500; border-radius:0; border-bottom:1px solid var(--line); color:var(--fg)}
  header nav a:hover{background:transparent; color:var(--accent)}
  header nav a.on::after{left:auto; right:6px; top:50%; bottom:auto; margin:-3px 0 0}
  header nav a[data-cta]{margin:20px 0 0; justify-content:center; font-family:var(--sans); font-size:16px; border-radius:999px; padding:15px 18px; border:0}
  .tgl{margin:14px 0 0; align-self:flex-start}
  body.menu-open{overflow:hidden}
}

/* ============================================================
   REVEAL — short and quiet
   ============================================================ */
html.js .rv{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js .rv.in{opacity:1; transform:none}
html.js .rv.d1{transition-delay:.08s} html.js .rv.d2{transition-delay:.16s} html.js .rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important; transition-duration:.01ms!important}
}

/* ============================================================
   TYPE + BUTTONS
   ============================================================ */
.tagpill{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2);
  padding:7px 14px 7px 12px; border:1px solid var(--line-2); border-radius:999px;
  background:color-mix(in srgb,var(--ring-0) 60%,transparent);
}
.tagpill .pulse{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}70%{box-shadow:0 0 0 8px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}

h1 em, h2 em{font-style:italic; font-weight:500; color:var(--accent)}
.ink h1 em, .ink h2 em{
  background:linear-gradient(100deg,#93c5fd 0%,#2563eb 45%,#93c5fd 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.06em;
}
.lede{font-size:clamp(17px,1.9vw,19.5px); color:var(--fg-2); max-width:58ch; margin:26px 0 0; line-height:1.62}
.lede a{color:var(--fg); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:3px}
.lede a:hover{color:var(--accent)}

.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:15px; line-height:1; padding:15px 22px; border-radius:999px;
  border:1px solid transparent; position:relative; isolation:isolate;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg{transition:transform .25s var(--ease); flex:none}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--accent); color:var(--on-accent); box-shadow:0 10px 26px -12px rgba(29,78,216,.75)}
.btn-p:hover{background:var(--accent-deep); box-shadow:0 14px 30px -12px rgba(29,78,216,.85); transform:translateY(-1px)}
.ink .btn-p{background:linear-gradient(135deg,#60a5fa,#2563eb 55%,#1d4ed8); color:#fff; box-shadow:0 12px 34px -10px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.25)}
.ink .btn-p:hover{box-shadow:0 18px 44px -10px rgba(37,99,235,.8), inset 0 1px 0 rgba(255,255,255,.25)}
:root[data-theme="dark"] .btn-p{color:#16120e}
:root[data-theme="dark"] .btn-p:hover{background:#f08a55}
.btn-s{background:transparent; color:var(--fg); border-color:var(--line-3)}
.btn-s:hover{border-color:var(--fg); background:var(--ring-1); transform:translateY(-1px)}
.ink .btn-s{border-color:var(--ink-line-2); background:rgba(241,245,249,.04); backdrop-filter:blur(6px)}
.ink .btn-s:hover{border-color:rgba(241,245,249,.45); background:rgba(241,245,249,.08)}
.btn-lg{padding:18px 26px; font-size:16px}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:112px 0; position:relative}
@media(max-width:700px){ section{padding:76px 0} }

/* ============================================================
   CODE, TABLES, NOTES
   ============================================================ */
pre{
  margin:18px 0 0; padding:18px 20px; border-radius:var(--r-md); overflow-x:auto;
  background:var(--code-bg); border:1px solid var(--line-2);
  font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--code-fg);
}
pre .c{color:var(--code-c)} pre .k{color:var(--code-k)} pre .s{color:var(--code-s)}
.note{
  margin-top:28px; padding:18px 22px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--bg-2);
  font-size:15px; color:var(--fg-2);
}
.note b{color:var(--fg); font-weight:600}

/* ============================================================
   FORMS
   ============================================================ */
#lead-form label, .full{display:block; font-size:13.5px; font-weight:600; color:var(--fg)}
.full{margin-top:16px}
.req{font-family:var(--mono); font-size:10.5px; font-weight:500; color:var(--accent); margin-left:6px; text-transform:lowercase; letter-spacing:.04em}
#lead-form input, #lead-form select, #lead-form textarea{
  display:block; width:100%; margin-top:8px; font:400 15.5px var(--sans); color:var(--fg);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:13px 15px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
#lead-form input:hover, #lead-form select:hover, #lead-form textarea:hover{border-color:var(--line-3)}
#lead-form input::placeholder, #lead-form textarea::placeholder{color:var(--fg-3)}
#lead-form textarea{resize:vertical; min-height:130px}
#lead-form input:focus, #lead-form select:focus, #lead-form textarea:focus{
  outline:none; border-color:var(--accent); background:var(--ring-0); box-shadow:0 0 0 4px var(--accent-tint);
}
#lead-form input[aria-invalid="true"]{border-color:var(--err); box-shadow:0 0 0 4px var(--err-bg)}
#lead-form select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),linear-gradient(135deg,var(--fg-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:38px}
#lead-form button[disabled]{opacity:.65; cursor:progress}
.frow{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px}
.fstat{margin:0; font-size:14px; color:var(--fg-2); min-height:1.3em; flex:1; min-width:200px}
.fstat a{color:var(--accent); font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:84px 0 36px; font-size:14.5px}
.ft{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:40px}
@media(max-width:900px){ .ft{grid-template-columns:1fr 1fr; gap:36px 24px} .ft .ft-brand{grid-column:1/-1} }
@media(max-width:480px){ .ft{grid-template-columns:1fr} }
.ft-brand p{color:var(--ink-fg-2); margin:18px 0 0; max-width:36ch; line-height:1.65}
.ft-brand .mark b{color:var(--ink-fg)}
.ft h4{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-fg-3); margin:4px 0 16px}
.ft ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ft a{color:var(--ink-fg-2); text-decoration:none; transition:color .2s var(--ease)}
.ft a:hover{color:var(--ink-accent)}
.ft-loc{display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family:var(--mono); font-size:12px; color:var(--ink-fg-3); letter-spacing:.06em}
.ft-loc i{width:7px; height:7px; border-radius:50%; background:#5fbf7f; box-shadow:0 0 0 4px rgba(95,191,127,.15)}
.ft-word{
  font-family:var(--display); font-weight:500; letter-spacing:-.04em; line-height:1.05;
  font-size:clamp(46px,13vw,186px); margin:56px 0 -.12em; white-space:nowrap; overflow:hidden; user-select:none;
  background:linear-gradient(180deg,rgba(241,245,249,.14),rgba(241,245,249,0) 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ft-legal{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; border-top:1px solid var(--ink-line); padding-top:24px; margin-top:8px; color:var(--ink-fg-3); font-size:13px}
.ft-legal p{margin:0; max-width:70ch}

/* ============================================================
   YUME SYSTEMS — components the company site adds on top of the
   foundation. Same tokens; ink panels for product, paper for prose.
   ============================================================ */

/* ---- section rhythm ---- */
.sec{padding:112px 0}
.sec + .sec:not(.ink):not(.alt){border-top:1px solid var(--line)}
.sec.alt{background:var(--ring-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-tight{padding:72px 0}
@media(max-width:700px){ .sec{padding:76px 0} .sec-tight{padding:56px 0} }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:currentColor; opacity:.8}
.sec h2, .ph h1 + .lede + h2{font-size:clamp(32px,4.6vw,56px); max-width:20ch; letter-spacing:-.022em; font-weight:500}
.sec .intro{font-size:clamp(16.5px,1.8vw,19px); color:var(--fg-2); max-width:62ch; margin:20px 0 0; line-height:1.65}
.sec-head{display:grid; grid-template-columns:1.1fr .9fr; gap:28px 64px; align-items:end}
.sec-head .intro{margin:0}
@media(max-width:900px){ .sec-head{grid-template-columns:1fr} }
.more{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; color:var(--fg); text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:3px; transition:gap .25s var(--ease), color .2s}
.more:hover{gap:12px; color:var(--accent)}

/* ============================================================
   HOME HERO
   ============================================================ */
.hx{padding:84px 0 0; min-height:calc(100vh - 72px); display:flex; flex-direction:column}
.hx .field::before{-webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 35%,#000 10%,transparent 75%); mask-image:radial-gradient(ellipse 70% 80% at 75% 35%,#000 10%,transparent 75%)}
.hx-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; flex:1; width:100%}
@media(max-width:1060px){ .hx-grid{grid-template-columns:1fr; gap:56px} .hx{min-height:0} }
.hx h1{font-size:clamp(44px,5.6vw,82px); font-weight:500; margin:26px 0 0; line-height:1; letter-spacing:-.032em; max-width:13.5ch}
.hx .lede{color:var(--ink-fg-2)}
.hx-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; padding-top:26px; border-top:1px solid var(--ink-line); max-width:560px}
@media(max-width:420px){ .hx-facts{grid-template-columns:1fr 1fr} }
.hx-facts b{display:block; font-family:var(--display); font-weight:500; font-size:32px; letter-spacing:-.02em; line-height:1; color:var(--ink-fg)}
.hx-facts span{display:block; margin-top:8px; font-size:13px; color:var(--ink-fg-3); line-height:1.45; max-width:22ch}

/* the composition */
.hx-art{position:relative; aspect-ratio:1/0.9; width:100%; max-width:720px; margin-inline:auto}
.hx-art .iso{position:absolute; left:-10%; top:-6%; width:64%; opacity:.9}
.hx-art .frame.main{position:absolute; right:0; top:20%; width:86%; z-index:2}
.hx-art .fc{position:absolute; z-index:3}
.hx-art .fc.pipe{left:-4%; bottom:2%; width:48%}
.hx-art .fc.code{right:-2%; bottom:-6%; width:48%; z-index:4}
.hx-art .fc.toast{right:-2%; top:4%; width:50%; z-index:4}
@media(max-width:560px){
  .hx-art{aspect-ratio:1/.92}
  .hx-art .iso, .hx-art .fc.pipe{display:none}
  .hx-art .frame.main{width:100%; right:0; top:15%}
  .hx-art .frame.main .bar{height:26px}
  .hx-art .fc.toast{width:82%; right:-2%; top:0; padding:10px 12px}
  .hx-art .fc.code{width:74%; right:-2%; bottom:-2%}
  .hx-art .fc.code pre{font-size:10.5px}
}
@media(prefers-reduced-motion:no-preference){
  .float-a{animation:floatA 9s ease-in-out infinite}
  .float-b{animation:floatB 11s ease-in-out infinite}
  .float-c{animation:floatA 13s ease-in-out infinite reverse}
}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* browser frame — used for every real screenshot on the site */
.frame{
  border-radius:14px; overflow:hidden; background:#211d19;
  border:1px solid rgba(241,245,249,.14);
  box-shadow:var(--sh-3), 0 0 0 1px rgba(0,0,0,.2);
}
.frame .bar{display:flex; align-items:center; gap:7px; height:34px; padding:0 12px; background:#2a2520; border-bottom:1px solid rgba(241,245,249,.08)}
.frame .bar i{width:10px; height:10px; border-radius:50%; background:#4a433b; flex:none}
.frame .bar i:nth-child(1){background:#e2664d} .frame .bar i:nth-child(2){background:#93c5fd} .frame .bar i:nth-child(3){background:#69b37d}
.frame .bar span{
  margin-left:10px; flex:1; height:20px; border-radius:6px; background:rgba(241,245,249,.07);
  font-family:var(--mono); font-size:10.5px; color:#b8ad9f; display:flex; align-items:center; padding:0 10px; gap:6px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:.02em; min-width:0;
}
.frame .bar span::before{content:""; width:7px; height:8px; border:1.5px solid #8f8576; border-radius:2px; flex:none}
.frame img{display:block; width:100%; height:auto; aspect-ratio:1200/749; object-fit:cover; object-position:top}
.frame.light{background:#fff; border-color:var(--line-2); box-shadow:var(--sh-2)}

/* floating cards */
.fc{
  border-radius:14px; padding:14px 16px; color:var(--ink-fg);
  background:rgba(11,19,36,.94); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(241,245,249,.14); box-shadow:0 24px 50px -20px rgba(0,0,0,.7);
  font-size:12.5px;
}
.fc .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-fg-3); display:flex; justify-content:space-between; gap:10px}
.fc .lbl b{color:var(--ink-accent); font-weight:500}
.pipe ol{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
.pipe li{display:grid; grid-template-columns:78px 1fr 18px; align-items:center; gap:10px; font-family:var(--mono); font-size:10.5px; color:var(--ink-fg-2); letter-spacing:.06em; text-transform:uppercase}
.pipe li i{height:6px; border-radius:6px; background:rgba(241,245,249,.08); position:relative; overflow:hidden}
.pipe li i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:6px; background:linear-gradient(90deg,#2563eb,#93c5fd)}
.pipe li em{font-style:normal; text-align:right; color:var(--ink-fg)}
.toast{display:flex; gap:12px; align-items:flex-start}
.toast .ic{flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(240,112,106,.16); color:#ff8f86}
.toast p{margin:0; line-height:1.45; color:var(--ink-fg-2); font-size:12.5px}
.toast p b{display:block; color:var(--ink-fg); font-weight:600; font-size:13px; margin-bottom:2px}
.code{padding:0; overflow:hidden; background:rgba(16,14,12,.92)}
.code .lbl{padding:10px 14px; border-bottom:1px solid rgba(241,245,249,.08)}
.code pre{margin:0; border:0; border-radius:0; background:transparent; padding:12px 14px 14px; font-size:11.5px; line-height:1.75; white-space:pre; overflow:hidden}

/* ---- marquee of the stack ---- */
.marq{margin-top:72px; border-top:1px solid var(--ink-line); padding:22px 0; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq-track{display:flex; gap:56px; width:max-content}
@media(prefers-reduced-motion:no-preference){ .marq-track{animation:marq 40s linear infinite} .marq:hover .marq-track{animation-play-state:paused} }
@keyframes marq{to{transform:translateX(-50%)}}
.marq span{font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-fg-3); white-space:nowrap; display:inline-flex; align-items:center; gap:14px}
.marq span::before{content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--ink-accent); opacity:.7}

/* ============================================================
   PAGE HERO — inner pages
   ============================================================ */
.ph{padding:92px 0 96px}
.ph-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.ph-grid.solo{grid-template-columns:1fr}
@media(max-width:980px){ .ph-grid{grid-template-columns:1fr; gap:48px} }
.ph h1{font-size:clamp(40px,5.8vw,76px); font-weight:500; margin:24px 0 0; line-height:1.02; letter-spacing:-.03em; max-width:16ch}
.ph .lede{color:var(--ink-fg-2)}
.ph-art{position:relative}
.ph-art > img{display:block; width:100%; border-radius:var(--r-lg)}
.crumbs{display:flex; gap:8px; align-items:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-fg-3); margin-bottom:22px}
.crumbs a{text-decoration:none; color:var(--ink-fg-3)} .crumbs a:hover{color:var(--ink-accent)}
.crumbs i{width:4px; height:4px; border-radius:50%; background:var(--ink-fg-3); opacity:.6}

/* ============================================================
   FACT STRIP
   ============================================================ */
.strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:var(--ring-0); box-shadow:var(--sh-1);
}
@media(max-width:900px){ .strip{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .strip{grid-template-columns:1fr} }
.strip div{padding:30px 28px; position:relative}
.strip div + div{border-left:1px solid var(--line)}
@media(max-width:900px){ .strip div:nth-child(3){border-left:0} .strip div:nth-child(n+3){border-top:1px solid var(--line)} }
@media(max-width:520px){ .strip div + div{border-left:0; border-top:1px solid var(--line)} }
.strip b{display:block; font-family:var(--display); font-size:36px; font-weight:500; letter-spacing:-.025em; color:var(--fg); line-height:1}
.strip b em{font-style:normal; color:var(--accent)}
.strip span{display:block; margin-top:12px; font-size:14px; color:var(--fg-3); line-height:1.5}
.strip-wrap{margin-top:-56px; position:relative; z-index:3}

/* ============================================================
   SERVICES BENTO
   ============================================================ */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:56px}
.tile{
  grid-column:span 4; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-1); position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.tile:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2)}
.tile.w7{grid-column:span 7} .tile.w5{grid-column:span 5} .tile.w12{grid-column:span 12; flex-direction:row}
.tile .il{background:var(--ink); aspect-ratio:16/9; position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.tile.w7 .il, .tile.w5 .il{aspect-ratio:auto; height:250px}
.tile .il img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.tile:hover .il img{transform:scale(1.04)}
.tile .tx{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1}
.tile .n{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.16em}
.tile h3{font-size:24px; margin:10px 0 10px; letter-spacing:-.015em; font-weight:600}
.tile p{color:var(--fg-2); font-size:15px; margin:0; line-height:1.6}
.tile .chips{margin-top:18px}
.tile .go{position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(241,245,249,.1); color:#f1f5f9; border:1px solid rgba(241,245,249,.16); backdrop-filter:blur(8px);
  transform:scale(.85); opacity:0; transition:all .3s var(--ease)}
.tile:hover .go, .tile:focus-visible .go{opacity:1; transform:none}
.tile.w12 .il{flex:0 0 46%; aspect-ratio:auto; min-height:240px; border-bottom:0; border-right:1px solid var(--line)}
.tile.w12 .tx{justify-content:center; padding:36px 40px}
@media(max-width:980px){ .tile, .tile.w7, .tile.w5{grid-column:span 6} .tile.w12{grid-column:span 12} }
@media(max-width:640px){
  .bento{gap:14px}
  .tile, .tile.w7, .tile.w5, .tile.w12{grid-column:span 12}
  .tile.w12{flex-direction:column} .tile.w12 .il{flex:none; aspect-ratio:16/9; min-height:0; border-right:0; border-bottom:1px solid var(--line)}
  .tile.w12 .tx{padding:24px 26px 28px}
  .tile.w7 .il, .tile.w5 .il{height:auto; aspect-ratio:16/9}
}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips span{font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:5px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg-2); background:var(--bg-2)}
.ink .chips span{background:rgba(241,245,249,.04)}

/* ============================================================
   BANNER — a single sentence between sections
   ============================================================ */
.banner{padding:110px 0; text-align:left}
.banner .q{
  font-family:var(--display); font-size:clamp(28px,4.4vw,56px); font-weight:500;
  line-height:1.14; letter-spacing:-.025em; max-width:24ch; color:var(--fg); margin:0;
}
.banner .q em{font-style:italic}
.banner .by{margin:26px 0 0; font-family:var(--mono); font-size:12px; color:var(--fg-3); letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:12px}
.banner .by::before{content:""; width:28px; height:1.5px; background:var(--accent)}
.banner:not(.ink){background:var(--ring-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.banner.ink .q em{background:linear-gradient(100deg,#93c5fd,#2563eb 50%,#93c5fd); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ============================================================
   FEATURED WORK — case studies
   ============================================================ */
.case{display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; margin-top:72px}
.case.flip{grid-template-columns:.85fr 1.15fr}
.case.flip .case-art{order:2}
@media(max-width:980px){ .case, .case.flip{grid-template-columns:1fr; gap:36px} .case.flip .case-art{order:0} }
.case-art{position:relative; padding:28px; border-radius:var(--r-xl); background:var(--ink); overflow:hidden; isolation:isolate}
.case-art .glow{opacity:.5}
.case-art .frame{position:relative; z-index:1; transition:transform .5s var(--ease)}
.case:hover .case-art .frame{transform:translateY(-4px) rotate(-.3deg)}
.case-art .fc{position:absolute; z-index:2}
.case-art .fc.tl{left:14px; bottom:14px}
.case-art .fc.tr{right:14px; top:14px}
@media(max-width:560px){ .case-art{padding:16px} .case-art .fc{position:relative; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; margin-top:12px} }
.case h3{font-size:clamp(28px,3.4vw,40px); letter-spacing:-.02em; font-weight:500; margin:16px 0 14px}
.case p{color:var(--fg-2); margin:0 0 16px; line-height:1.7}
.case .tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; border-radius:999px; border:1px solid var(--accent-line); color:var(--accent); background:var(--accent-tint)}
.case .tag.live::before, .work .tag.live::before{content:""; width:7px; height:7px; border-radius:50%; background:#3fa465; box-shadow:0 0 0 3px rgba(63,164,101,.18)}
.kv{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin:24px 0 26px}
.kv div{background:var(--ring-0); padding:16px 18px}
.kv b{display:block; font-family:var(--display); font-size:26px; font-weight:500; letter-spacing:-.02em; line-height:1}
.kv span{display:block; margin-top:6px; font-size:13px; color:var(--fg-3)}
.stat-chip{display:flex; align-items:center; gap:10px}
.stat-chip b{font-family:var(--display); font-weight:500; font-size:24px; letter-spacing:-.02em; color:var(--ink-fg); line-height:1}
.stat-chip span{font-size:11.5px; color:var(--ink-fg-3); line-height:1.35; max-width:16ch}

/* ---- demo / work cards ---- */
.work{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px}
.work.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){ .work, .work.two{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .work, .work.two{grid-template-columns:1fr} }
.work article{
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:var(--ring-0); display:flex; flex-direction:column; box-shadow:var(--sh-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.work article:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2)}
.work .shot{padding:20px 20px 0; background:linear-gradient(160deg,var(--ink-3),var(--ink)); position:relative; overflow:hidden}
.work .shot .frame{border-radius:10px 10px 0 0; border-bottom:0; box-shadow:0 -10px 40px -10px rgba(0,0,0,.5); transition:transform .5s var(--ease)}
.work .shot .frame .bar{height:26px} .work .shot .frame .bar i{width:8px; height:8px}
.work .shot .frame .bar span{height:16px; font-size:9.5px}
.work article:hover .shot .frame{transform:translateY(-6px)}
.work .shot .frame img{aspect-ratio:16/10}
.work .body{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1}
.work .tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 10px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--fg-2); background:var(--bg-2);
  align-self:flex-start; margin-bottom:14px;
}
.work .tag.live{border-color:var(--accent-line); color:var(--accent); background:var(--accent-tint)}
.work h3{font-size:22px; margin:0 0 10px; letter-spacing:-.015em}
.work p{color:var(--fg-2); font-size:15px; margin:0 0 14px; line-height:1.62}
.work .meta{margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.work .meta a, a.more-sm{
  font-size:14px; font-weight:600; color:var(--fg); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; border-bottom:1.5px solid var(--accent); padding-bottom:2px; transition:gap .25s var(--ease), color .2s;
}
.work .meta a:hover, a.more-sm:hover{color:var(--accent); gap:12px}

/* ============================================================
   WHY — ink section with a project feed
   ============================================================ */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
@media(max-width:980px){ .why-grid{grid-template-columns:1fr; gap:48px} }
.feed{position:relative; display:grid; gap:14px}
.feed::before{content:""; position:absolute; left:22px; top:20px; bottom:20px; width:1px; background:linear-gradient(var(--ink-line-2),transparent)}
.feed .fc{position:relative; margin-left:46px; padding:16px 18px}
.feed .fc::before{content:""; position:absolute; left:-30px; top:20px; width:11px; height:11px; border-radius:50%; background:var(--ink); border:2px solid var(--ink-accent)}
.feed .fc.now::before{background:var(--ink-accent); box-shadow:0 0 0 5px rgba(96,165,250,.18)}
.feed h4{font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink-fg); margin:8px 0 6px; letter-spacing:0}
.feed p{margin:0; font-size:13.5px; color:var(--ink-fg-2); line-height:1.55}
.feed ul{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; font-size:13px; color:var(--ink-fg-2)}
.feed li{display:flex; gap:10px; align-items:baseline}
.feed li b{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-fg-3); font-weight:500; flex:0 0 78px}
.callout{
  position:relative; background:var(--accent-tint); border:1px solid var(--accent-line);
  padding:20px 24px; border-radius:var(--r-lg); margin-top:30px;
  color:var(--fg-2); font-size:15.5px; line-height:1.68; max-width:70ch;
}
.callout b{color:var(--fg)}
.callout a{color:var(--fg); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:3px}

/* comparison */
.compare{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; margin-top:72px}
@media(max-width:760px){ .compare{grid-template-columns:1fr} }
.compare > div{padding:30px 32px}
.compare > div + div{border-left:1px solid var(--line); background:linear-gradient(160deg,rgba(96,165,250,.09),transparent 60%)}
@media(max-width:760px){ .compare > div + div{border-left:0; border-top:1px solid var(--line)} }
.compare h4{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin:0 0 18px}
.compare > div + div h4{color:var(--accent)}
.compare ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.compare li{display:grid; grid-template-columns:22px 1fr; gap:12px; font-size:15px; color:var(--fg-2); line-height:1.5}
.compare li::before{content:"\2715"; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; border:1px solid var(--line-2); color:var(--fg-3)}
.compare > div + div li{color:var(--fg)}
.compare > div + div li::before{content:"\2713"; background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700}

/* ============================================================
   TECHNOLOGY — a terminal, not a logo wall
   ============================================================ */
.term{margin-top:56px; border-radius:var(--r-xl); overflow:hidden; background:var(--ink); color:var(--ink-fg); border:1px solid var(--line-2); box-shadow:var(--sh-2)}
.term-bar{display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--ink-line); font-family:var(--mono); font-size:12px; color:var(--ink-fg-3)}
.term-bar i{width:10px; height:10px; border-radius:50%; background:#4a433b}
.term-bar i:nth-child(1){background:#e2664d} .term-bar i:nth-child(2){background:#93c5fd} .term-bar i:nth-child(3){background:#69b37d}
.term-bar span{margin-left:10px}
.term-body{display:grid; grid-template-columns:240px 1fr}
@media(max-width:800px){ .term-body{grid-template-columns:1fr} }
.term-tabs{border-right:1px solid var(--ink-line); padding:14px; display:flex; flex-direction:column; gap:4px}
@media(max-width:800px){ .term-tabs{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--ink-line); scrollbar-width:none} }
.term-tabs button{
  all:unset; cursor:pointer; padding:11px 14px; border-radius:10px; font-family:var(--mono); font-size:13px; color:var(--ink-fg-3);
  display:flex; align-items:center; gap:10px; white-space:nowrap; transition:background-color .2s, color .2s;
}
.term-tabs button::before{content:"$"; color:var(--ink-fg-3); opacity:.6}
.term-tabs button:hover{color:var(--ink-fg); background:rgba(241,245,249,.05)}
.term-tabs button[aria-selected="true"]{color:var(--ink-fg); background:rgba(96,165,250,.12)}
.term-tabs button[aria-selected="true"]::before{color:var(--ink-accent); opacity:1}
.term-tabs button:focus-visible{outline:2px solid var(--ink-accent); outline-offset:-2px}
.term-pane{padding:26px 28px 30px; font-family:var(--mono); font-size:13.5px; min-height:330px}
.term-pane[hidden]{display:none}
.term-pane .cmd{color:var(--ink-fg-3); margin:0 0 18px}
.term-pane .cmd b{color:var(--ink-accent); font-weight:500}
.term-pane .cmd::after{content:""; display:inline-block; width:8px; height:15px; background:var(--ink-accent); vertical-align:-2px; margin-left:6px}
@media(prefers-reduced-motion:no-preference){ .term-pane .cmd::after{animation:blink 1.1s steps(1) infinite} }
@keyframes blink{50%{opacity:0}}
.term-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(max-width:640px){ .term-list{grid-template-columns:1fr} }
.term-list div{border:1px solid var(--ink-line); border-radius:12px; padding:14px 16px; background:rgba(241,245,249,.02); transition:border-color .2s, background-color .2s}
.term-list div:hover{border-color:rgba(96,165,250,.4); background:rgba(96,165,250,.05)}
.term-list b{display:block; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink-fg)}
.term-list span{display:block; margin-top:5px; font-family:var(--sans); font-size:13px; color:var(--ink-fg-3); line-height:1.5}

/* ============================================================
   PROCESS — a visual track
   ============================================================ */
.track{list-style:none; margin:64px 0 0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:14px; counter-reset:t; position:relative}
.track::before{content:""; position:absolute; left:24px; right:24px; top:23px; height:2px; background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 14px)}
.track li{counter-increment:t; position:relative}
.track li::before{
  content:counter(t,decimal-leading-zero); display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--ring-0); border:1px solid var(--line-2); font-family:var(--mono); font-size:12.5px; color:var(--fg);
  position:relative; z-index:1; box-shadow:0 0 0 6px var(--bg); transition:all .3s var(--ease);
}
.sec.alt .track li::before{box-shadow:0 0 0 6px var(--ring-1)}
.track li:first-child::before{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.track li:hover::before{border-color:var(--accent); color:var(--accent); transform:scale(1.06)}
.track li:first-child:hover::before{color:var(--on-accent)}
.track strong{display:block; font-family:var(--display); font-size:19px; font-weight:600; margin:20px 0 8px; letter-spacing:-.012em; line-height:1.2}
.track span{display:block; color:var(--fg-2); font-size:14px; line-height:1.55}
.track em{display:inline-block; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-top:12px}
@media(max-width:1080px){
  .track{grid-template-columns:1fr; gap:0; max-width:640px}
  .track::before{left:23px; right:auto; top:24px; bottom:24px; width:2px; height:auto; background:repeating-linear-gradient(180deg,var(--line-2) 0 8px,transparent 8px 14px)}
  .track li{display:grid; grid-template-columns:48px 1fr; gap:0 22px; padding-bottom:28px}
  .track li::before{grid-row:span 3}
  .track strong{margin:10px 0 6px}
}

/* ---- process, at length ---- */
.steps{counter-reset:s; list-style:none; padding:0; margin:56px 0 0; display:grid; gap:18px}
.steps li{
  counter-increment:s; display:grid; grid-template-columns:120px 1fr 1.3fr; gap:28px; align-items:start;
  padding:30px 32px; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--ring-0); box-shadow:var(--sh-1);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.steps li:hover{border-color:var(--accent-line); transform:translateX(4px)}
.steps li::before{
  content:counter(s,decimal-leading-zero); font-family:var(--display); font-size:64px; font-weight:500; line-height:.85; letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.steps strong{display:block; font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.015em; line-height:1.2}
.steps strong small{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-top:10px}
.steps span{color:var(--fg-2); font-size:15.5px; line-height:1.7}
@media(max-width:860px){ .steps li{grid-template-columns:1fr; gap:12px; padding:26px 24px} .steps li::before{font-size:48px} }

/* ============================================================
   PROOF — a typographic wall of delivered platforms
   ============================================================ */
.wall{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:56px}
@media(max-width:980px){ .wall{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .wall > div{padding:20px 16px 22px} .wall b{font-size:18px} .wall span{font-size:12.5px} .wall svg{display:none} }
.wall > div{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 26px 30px; position:relative; transition:background-color .3s var(--ease)}
.wall > div:hover{background:var(--accent-tint)}
.wall .sx{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3)}
.wall b{display:block; font-family:var(--display); font-size:22px; font-weight:500; letter-spacing:-.015em; line-height:1.2; margin-top:14px; color:var(--fg)}
.wall span{display:block; font-size:13.5px; color:var(--fg-2); margin-top:8px; line-height:1.5}
.wall svg{position:absolute; right:22px; top:24px; width:22px; height:22px; color:var(--accent); opacity:.85}

/* ============================================================
   CONTACT BAND — the closing call
   ============================================================ */
.cband{
  position:relative; overflow:hidden; isolation:isolate; border-radius:32px; padding:72px 64px;
  background:radial-gradient(120% 140% at 100% 0%,#2563eb 0%,#1d4ed8 28%,#0b1a3a 58%,#0a1020 85%);
  color:#fff; box-shadow:0 30px 60px -30px rgba(10,16,32,.5);
}
.cband::before{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:48px 48px; -webkit-mask-image:linear-gradient(200deg,#000,transparent 70%); mask-image:linear-gradient(200deg,#000,transparent 70%)}
.cband-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:end}
@media(max-width:900px){ .cband{padding:48px 28px; border-radius:24px} .cband-grid{grid-template-columns:1fr; gap:32px} }
.cband h2{font-size:clamp(34px,5vw,64px); font-weight:500; letter-spacing:-.03em; line-height:1.02; color:#fff; max-width:15ch}
.cband h2 em{color:#ffd2b3; -webkit-text-fill-color:#ffd2b3; background:none}
.cband p{color:rgba(255,255,255,.82); margin:20px 0 0; max-width:52ch; font-size:17px; line-height:1.6}
.cband .btn-p{background:#fff; color:#0b1324; box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}
.cband .btn-p:hover{background:#ffe9da}
.cband .btn-s{color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06)}
.cband .btn-s:hover{border-color:#fff; background:rgba(255,255,255,.12)}
.cband ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.cband li a, .cband li .row{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff; text-decoration:none; font-size:14.5px; backdrop-filter:blur(8px); transition:background-color .2s, border-color .2s}
.cband li a:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3)}
.cband li svg{flex:none; opacity:.9}
.cband li small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.65)}

/* the older, plainer band — kept for inner pages that want it quiet */
.band{
  border:1px solid var(--line-2); border-radius:var(--r-xl); padding:44px;
  background:var(--ring-1); display:grid; grid-template-columns:1fr auto;
  gap:30px; align-items:center;
}
@media(max-width:760px){.band{grid-template-columns:1fr; padding:28px}}
.band h2{font-size:clamp(24px,3vw,34px); margin:0 0 10px; max-width:24ch}
.band p{color:var(--fg-2); margin:0; max-width:56ch; line-height:1.65}

/* ============================================================
   SERVICES PAGE — each line written out
   ============================================================ */
.svc-nav{display:flex; flex-wrap:wrap; gap:8px; margin-top:34px}
.svc-nav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:8px 13px; border-radius:999px; border:1px solid var(--ink-line-2); color:var(--ink-fg-2); transition:all .2s var(--ease)}
.svc-nav a:hover{border-color:var(--ink-accent); color:var(--ink-fg); background:rgba(96,165,250,.08)}
.line{padding:72px 0; border-top:1px solid var(--line); scroll-margin-top:90px}
.line:first-of-type{border-top:0; padding-top:24px}
.line-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; align-items:start}
@media(max-width:900px){.line-grid{grid-template-columns:1fr; gap:28px}}
.line:nth-of-type(even) .line-grid > div:first-child{order:2}
@media(max-width:900px){ .line:nth-of-type(even) .line-grid > div:first-child{order:0} }
.line .il{border-radius:var(--r-xl); overflow:hidden; background:var(--ink); aspect-ratio:16/10; margin-top:28px; box-shadow:var(--sh-2); position:relative}
.line .il img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.line .eyebrow{margin-bottom:12px}
.line h3{font-size:clamp(30px,3.6vw,44px); letter-spacing:-.022em; font-weight:500}
.line .who{margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--fg-3); line-height:1.7}
.line p{color:var(--fg-2); line-height:1.75; margin:0 0 18px; font-size:16.5px}
.line .deliv{margin-top:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-0); padding:24px 26px; box-shadow:var(--sh-1)}
.line .deliv b{display:block; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:16px}
.line .deliv ul{list-style:none; margin:0; padding:0; font-size:14.5px; color:var(--fg-2); display:grid; grid-template-columns:1fr 1fr; gap:10px 26px}
@media(max-width:600px){.line .deliv ul{grid-template-columns:1fr}}
.line .deliv li{padding-left:26px; position:relative; line-height:1.5}
.line .deliv li::before{content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23b9410b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border:1px solid var(--accent-line)}

/* ---- generic card grid (delivered systems, beliefs, questions) ---- */
.svc{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:52px}
.svc article{
  background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:30px 28px; display:flex; flex-direction:column; box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc article::after{content:""; position:absolute; right:-60px; top:-60px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle,var(--accent-glow),transparent 70%); opacity:0; transition:opacity .4s var(--ease)}
.svc article:hover{border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--sh-2)}
.svc article:hover::after{opacity:1}
.svc .n{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.14em; text-transform:uppercase}
.svc .ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent-tint); border:1px solid var(--accent-line); color:var(--accent); margin-bottom:18px}
.svc h3{font-size:22px; margin:12px 0 10px; letter-spacing:-.015em}
.svc .ico + h3{margin-top:0}
.svc p{color:var(--fg-2); font-size:15px; margin:0 0 16px; line-height:1.64}
.svc ul{list-style:none; margin:auto 0 0; padding:16px 0 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--fg-3); display:grid; gap:7px}
.svc li{padding-left:18px; position:relative; line-height:1.5}
.svc li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:1.5px; background:var(--accent)}
.svc.big article{padding:36px 32px}
.svc.big .n{font-family:var(--display); font-size:56px; line-height:.9; letter-spacing:-.04em; text-transform:none; font-weight:500; opacity:.9}
.ink .svc article{background:rgba(241,245,249,.03); box-shadow:none}
.ink .svc article:hover{background:rgba(241,245,249,.05)}

/* ============================================================
   WORK PAGE — hero stack of real screens
   ============================================================ */
.stack{position:relative; aspect-ratio:4/3.3; width:100%}
.stack .frame{position:absolute; width:76%; transition:transform .6s var(--ease)}
.stack .frame .bar{height:26px} .stack .frame .bar i{width:8px;height:8px} .stack .frame .bar span{height:16px; font-size:9.5px}
.stack .s1{left:0; top:0; z-index:1}
.stack .s2{left:12%; top:24%; z-index:2}
.stack .s3{left:24%; top:48%; z-index:3}
.stack:hover .s1{transform:translate(-10px,-10px)}
.stack:hover .s3{transform:translate(10px,10px)}

/* ---- platform row ---- */
.plats{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.plats span{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg-2)}
.plats span.on{border-color:var(--accent-line); background:var(--accent-tint); color:var(--accent)}

/* ============================================================
   PRICING
   ============================================================ */
.tracks{display:inline-flex; gap:4px; margin-top:36px; padding:5px; border-radius:999px; border:1px solid var(--ink-line-2); background:rgba(241,245,249,.04); flex-wrap:wrap}
.tracks button{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 18px; border-radius:999px; cursor:pointer; border:0; background:transparent; color:var(--ink-fg-3);
  transition:all .25s var(--ease);
}
.tracks button:hover{color:var(--ink-fg)}
.tracks button[aria-selected="true"]{background:linear-gradient(135deg,#60a5fa,#2563eb); color:#fff; box-shadow:0 8px 20px -8px rgba(37,99,235,.7)}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; align-items:stretch}
@media(max-width:980px){ .plans{grid-template-columns:1fr; max-width:560px} }
.plans article{
  background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:32px 30px; display:flex; flex-direction:column; box-shadow:var(--sh-1); position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plans article:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.plans article.best{
  background:var(--ink); color:var(--ink-fg); border-color:transparent; box-shadow:var(--sh-3);
  --fg:var(--ink-fg); --fg-2:var(--ink-fg-2); --fg-3:var(--ink-fg-3); --line:var(--ink-line); --accent:var(--ink-accent);
  overflow:hidden; isolation:isolate;
}
.plans article.best::before{content:""; position:absolute; z-index:-1; right:-120px; top:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.45),transparent 70%)}
.plans .flag{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; display:block; min-height:14px}
.plans .best .flag{display:inline-flex; align-self:flex-start; padding:5px 10px; border-radius:999px; background:rgba(96,165,250,.14); border:1px solid rgba(96,165,250,.4)}
.plans h3{font-size:24px; margin:0 0 4px; font-weight:600}
.plans .amt{font-family:var(--display); font-size:clamp(28px,3vw,36px); font-weight:500; letter-spacing:-.025em; color:var(--fg); margin:14px 0 2px; line-height:1.1}
.plans .for{color:var(--fg-3); font-size:14.5px; margin:8px 0 0; line-height:1.5}
.plans ul{list-style:none; padding:22px 0 0; margin:22px 0 0; font-size:14.5px; color:var(--fg-2); border-top:1px solid var(--line); display:grid; gap:11px}
.plans li{padding-left:26px; position:relative; line-height:1.5}
.plans li::before{content:"\2713"; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:700; background:var(--accent-tint); color:var(--accent); border:1px solid var(--accent-line)}
.plans .when{margin-top:auto; padding-top:22px; font-family:var(--mono); font-size:11.5px; color:var(--fg-3); line-height:1.6}
.plans ul + .when{margin-top:24px; border-top:1px dashed var(--line); padding-top:18px}

/* ============================================================
   TEAM
   ============================================================ */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px}
@media(max-width:1000px){ .team{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .team{grid-template-columns:1fr} }
.team article{border:1px solid var(--line); border-radius:var(--r-xl); padding:26px; background:var(--ring-0); box-shadow:var(--sh-1); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.team article:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.team article.lead{grid-column:span 2; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; background:var(--ink); color:var(--ink-fg); border-color:transparent; --fg:var(--ink-fg); --fg-2:var(--ink-fg-2); --fg-3:var(--ink-fg-3); --accent:var(--ink-accent); position:relative; overflow:hidden; isolation:isolate}
.team article.lead::before{content:""; position:absolute; z-index:-1; left:-80px; bottom:-120px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.35),transparent 70%)}
@media(max-width:560px){ .team article.lead{grid-column:span 1; grid-template-columns:1fr} }
.team .av{
  width:72px; height:72px; border-radius:20px; margin-bottom:18px; display:grid; place-items:center; position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--ink-3),var(--ink)); color:var(--ink-fg);
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; border:1px solid var(--line-2);
}
.team .av::after{content:""; position:absolute; inset:auto -20% -40% auto; width:70%; height:70%; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.55),transparent 70%)}
.team .av span{position:relative; z-index:1}
.team .av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:2}
.team .lead .av{width:120px; height:120px; border-radius:28px; font-size:26px; font-family:var(--display); margin:0; letter-spacing:0}
.team h3{font-size:19px; margin:0 0 4px}
.team .lead h3{font-size:28px; font-weight:500}
.team .role{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.1em; text-transform:uppercase; margin:6px 0 0}
.team p{color:var(--fg-3); font-size:14.5px; margin:12px 0 0; line-height:1.6}
.team .lead p{color:var(--ink-fg-2); font-size:15.5px}

/* ============================================================
   FACTS LIST, NEVER LIST, TIME ZONES
   ============================================================ */
.facts-list{list-style:none; padding:0; margin:36px 0 0; max-width:820px}
.facts-list li{display:grid; grid-template-columns:220px 1fr; gap:24px; padding:20px 0; border-top:1px solid var(--line); font-size:15.5px; transition:padding-left .3s var(--ease)}
.facts-list li:last-child{border-bottom:1px solid var(--line)}
.facts-list li:hover{padding-left:8px}
@media(max-width:620px){.facts-list li{grid-template-columns:1fr; gap:6px}}
.facts-list b{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); font-weight:500; padding-top:3px}
.facts-list span{color:var(--fg-2); line-height:1.65}
.facts-list.price span{font-family:var(--display); font-size:22px; color:var(--fg); letter-spacing:-.01em}
.facts-list.never li{grid-template-columns:36px 220px 1fr}
.facts-list.never li::before{content:"\2715"; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--accent-line); background:var(--accent-tint); color:var(--accent); font-size:11px}
@media(max-width:620px){ .facts-list.never li{grid-template-columns:36px 1fr} .facts-list.never li span{grid-column:2} }

.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
@media(max-width:900px){ .split{grid-template-columns:1fr; gap:40px} }
.split .facts-list{margin-top:0}

.tz{border-radius:var(--r-xl); background:var(--ink); color:var(--ink-fg); padding:30px 28px; box-shadow:var(--sh-2); position:relative; overflow:hidden; isolation:isolate}
.tz::before{content:""; position:absolute; z-index:-1; right:-100px; top:-100px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.35),transparent 70%)}
.tz h4{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-fg-3); margin:0 0 22px}
.tz-row{display:grid; grid-template-columns:110px 1fr 54px; gap:14px; align-items:center; margin-bottom:16px; font-size:13.5px}
.tz-row b{font-weight:600; color:var(--ink-fg)}
.tz-row em{font-style:normal; font-family:var(--mono); font-size:11.5px; color:var(--ink-fg-3); text-align:right}
.tz-bar{height:12px; border-radius:6px; background:rgba(241,245,249,.07); position:relative; overflow:hidden}
.tz-bar i{position:absolute; top:0; bottom:0; border-radius:6px; background:rgba(241,245,249,.25)}
.tz-row.home .tz-bar i{background:linear-gradient(90deg,#2563eb,#93c5fd)}
.tz-bar u{position:absolute; top:-3px; bottom:-3px; border-left:1.5px dashed rgba(96,165,250,.8); text-decoration:none}
.tz p{margin:20px 0 0; font-size:13px; color:var(--ink-fg-3); line-height:1.6; border-top:1px solid var(--ink-line); padding-top:16px}
.tz-scale{display:grid; grid-template-columns:110px 1fr 54px; gap:14px; font-family:var(--mono); font-size:10px; color:var(--ink-fg-3)}
.tz-scale div{display:flex; justify-content:space-between}
@media(max-width:480px){ .tz-row, .tz-scale{grid-template-columns:76px 1fr 44px; gap:10px} }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:1.45fr .85fr; gap:28px; align-items:start; margin-top:-64px; position:relative; z-index:3}
@media(max-width:980px){ .contact-grid{grid-template-columns:1fr; margin-top:-48px} }
.formcard{background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-xl); padding:40px; box-shadow:var(--sh-2)}
@media(max-width:620px){ .formcard{padding:26px 20px} }
.formcard h2{font-size:28px; font-weight:500; letter-spacing:-.02em; margin:0 0 6px}
.formcard > p{color:var(--fg-3); margin:0 0 26px; font-size:14.5px}
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px}
@media(max-width:620px){.frow2{grid-template-columns:1fr}}
.cside{display:grid; gap:12px; align-content:start}
.cb{border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; background:var(--ring-0); box-shadow:var(--sh-1)}
.cb h3{font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:0; display:flex; align-items:center; gap:10px}
.cb h3 svg{color:var(--accent); flex:none}
.cb p{margin:8px 0 0; font-size:14px; color:var(--fg-2); line-height:1.6}
.cb a{color:var(--fg); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px}
.cb a:hover{color:var(--accent)}
.cb.hot{background:var(--ink); border-color:transparent; --fg:var(--ink-fg); --fg-2:var(--ink-fg-2); --accent:var(--ink-accent); color:var(--ink-fg)}
.ok-msg{padding:20px 0}
.ok-msg b{display:block; font-family:var(--display); font-size:28px; font-weight:500; letter-spacing:-.02em; margin:16px 0 10px}
.ok-msg p{color:var(--fg-2); margin:0}
.ok-msg .tick{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--on-accent)}

/* ---- banner with the "another tab" graphic ---- */
.banner-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:56px; align-items:center}
@media(max-width:900px){ .banner-grid{grid-template-columns:1fr; gap:36px} }
.tabs-art{display:grid; gap:10px; max-width:380px; margin-left:auto; width:100%}
@media(max-width:900px){ .tabs-art{margin-left:0} }
.tabs-art a{display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:14px; text-decoration:none; color:var(--fg);
  background:var(--ring-0); border:1px solid var(--line); box-shadow:var(--sh-1); font-size:14px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.tabs-art a:nth-child(2){margin-left:22px} .tabs-art a:nth-child(3){margin-left:44px}
.tabs-art a:hover{transform:translateX(-6px); box-shadow:var(--sh-2); border-color:var(--accent-line)}
.tabs-art .fav{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:500; color:#fff; background:var(--ink)}
.tabs-art .fav.o{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.tabs-art b{font-weight:600; display:block; line-height:1.3}
.tabs-art small{display:block; font-family:var(--mono); font-size:10.5px; color:var(--fg-3); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tabs-art .st{margin-left:auto; flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mint); display:flex; align-items:center; gap:6px}
.tabs-art .st::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.tabs-art span:not(.fav):not(.st){min-width:0}

/* ---- page-hero mosaic of illustrations ---- */
.mosaic{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.mosaic img{border-radius:var(--r-lg); border:1px solid var(--ink-line-2); box-shadow:0 30px 60px -30px rgba(0,0,0,.8); display:block; width:100%}
.mosaic img:nth-child(2), .mosaic img:nth-child(4){transform:translateY(28px)}
@media(max-width:560px){ .mosaic{gap:10px} .mosaic img:nth-child(2), .mosaic img:nth-child(4){transform:translateY(16px)} }
.cband .cta{align-self:center}

.case-art .fc p{color:var(--ink-fg-2); margin:0; font-size:12.5px; line-height:1.45}
.case-art .fc p b{color:var(--ink-fg)}

/* ---- pricing hero card ---- */
.paycard{border-radius:var(--r-xl); padding:28px; background:rgba(11,19,36,.9); border:1px solid var(--ink-line-2); box-shadow:var(--sh-3); backdrop-filter:blur(10px)}
.paycard .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-fg-3); margin-bottom:22px}
.pc-row{margin-bottom:20px}
.pc-row b{display:block; font-size:14px; font-weight:600; color:var(--ink-fg); margin-bottom:10px}
.seg{display:flex; gap:4px; height:44px}
.seg span{display:flex; align-items:center; padding:0 12px; border-radius:10px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.seg span:nth-child(1){background:linear-gradient(135deg,#60a5fa,#2563eb)}
.seg span:nth-child(2){background:rgba(96,165,250,.32)}
.seg span:nth-child(3){background:rgba(224,180,94,.28)}
.pc-foot{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); border-radius:14px; overflow:hidden; margin-top:26px}
.pc-foot div{background:var(--ink-2); padding:14px}
.pc-foot small{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-fg-3)}
.pc-foot b{display:block; margin-top:6px; font-family:var(--display); font-weight:500; font-size:18px; color:var(--ink-fg); line-height:1.2}
@media(max-width:480px){ .pc-foot{grid-template-columns:1fr} .paycard{padding:20px} }

/* ---- team hero: how a project is staffed ---- */
.org{display:grid; justify-items:center; gap:0; max-width:460px; margin-inline:auto}
.org-node{width:100%; text-align:center; border-radius:18px; padding:18px 20px; background:rgba(11,19,36,.9); border:1px solid var(--ink-line-2); box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.org-node small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-fg-3)}
.org-node b{display:block; font-family:var(--display); font-weight:500; font-size:24px; color:var(--ink-fg); margin-top:6px; letter-spacing:-.01em}
.org-node span{display:block; font-size:12.5px; color:var(--ink-fg-2); margin-top:6px}
.org-node.you{width:70%}
.org-node.pm{background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(11,19,36,.92) 70%); border-color:rgba(96,165,250,.5)}
.org-link{width:2px; height:34px; background:linear-gradient(var(--ink-accent),rgba(96,165,250,.2))}
.org-team{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%}
.org-team span{text-align:center; padding:12px 8px; border-radius:12px; border:1px solid var(--ink-line-2); background:rgba(241,245,249,.03); font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-fg-2)}
.org-note{display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:12.5px; color:var(--ink-fg-3); line-height:1.5}
.org-note i{flex:none; width:7px; height:7px; border-radius:50%; background:#5fbf7f; margin-top:6px}

@media(max-width:520px){ .svc.big{grid-template-columns:1fr!important} }
.facts-list.never{max-width:none; margin-top:48px}
@media(max-width:480px){ .tracks button{padding:10px 12px; font-size:10.5px; letter-spacing:.06em} }
:root[data-theme="dark"] .plans article.best, :root[data-theme="dark"] .team article.lead, :root[data-theme="dark"] .cb.hot{border-color:rgba(96,165,250,.32)}

/* ---- a phone beside the desktop frame, so "works on a mid-range phone"
       is something you can see rather than only read ---- */
.case-art .phone{
  position:absolute; right:18px; bottom:-26px; width:19%; min-width:92px; max-width:132px;
  z-index:3; border-radius:12px; display:block; height:auto;
  box-shadow:0 20px 44px rgba(0,0,0,.42);
  transition:transform .5s var(--ease);
}
.case:hover .case-art .phone{transform:translateY(-6px)}
@media(max-width:900px){ .case-art .phone{right:12px; bottom:-18px; width:22%} }

/* ---- a row of phones, used where the point is the range of work ---- */
.phones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:18px; margin-top:34px; align-items:start;
}
.phones figure{margin:0; text-align:center}
.phones img{
  width:100%; height:auto; display:block; border-radius:12px;
  box-shadow:0 16px 36px rgba(11,19,36,.18);
}
:root[data-theme="dark"] .phones img{box-shadow:0 16px 36px rgba(0,0,0,.5)}
.phones figcaption{
  margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-3);
}

/* ---- extra screens from inside one system ---- */
.screens{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px}
@media(max-width:700px){.screens{grid-template-columns:1fr}}
.screens figure{margin:0}
.screens img{
  width:100%; height:auto; display:block; border-radius:var(--r-md);
  border:1px solid var(--line); box-shadow:0 10px 26px rgba(11,19,36,.1);
}
:root[data-theme="dark"] .screens img{box-shadow:0 10px 26px rgba(0,0,0,.4)}
.screens figcaption{margin-top:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3)}

/* ============================================================
   SCROLLBAR — slim, and in the palette rather than the OS grey
   ============================================================ */
html{scrollbar-width:thin; scrollbar-color:var(--line-3) transparent}
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--fg-3) 55%, transparent);
  border-radius:999px; border:2px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--fg-2) 70%, transparent); background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ============================================================
   FAQ — grid-template-rows 0fr to 1fr, so the open and close
   animate smoothly whatever length the answer is. max-height
   guesses always either clip a long answer or crawl on a short one.
   ============================================================ */
.faq{max-width:860px; margin:40px auto 0}
.faq .qa{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-0);
  margin-bottom:12px; overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq .qa.is-open{border-color:var(--line-3); box-shadow:0 10px 30px -18px rgba(11,19,36,.3)}
:root[data-theme="dark"] .faq .qa.is-open{box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.faq .qa-q{width:100%; text-align:left; background:none; border:0; font-family:var(--display); 
  display:flex; align-items:center; gap:16px; cursor:pointer; list-style:none;
  padding:22px 24px; font-family:var(--display); font-size:18.5px; font-weight:600;
  letter-spacing:-.012em; color:var(--fg); transition:color .22s var(--ease);
}
.faq .qa-q::-webkit-details-marker{display:none}
.faq .qa-q:hover{color:var(--accent)}
.faq .qa-q .q{flex:1}
.faq .qa-q .ico{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--fg-3);
  transition:transform .4s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.faq .qa.is-open summary .ico{transform:rotate(45deg); border-color:var(--accent); color:var(--accent)}
.faq .ans{overflow:hidden; height:auto; transition:height .4s var(--ease)}

.faq .ans > div{min-height:0}
.faq .ans p{
  margin:0 24px 22px; color:var(--fg-2); font-size:15.5px; line-height:1.72;
  opacity:0; transform:translateY(-6px);
  transition:opacity .3s var(--ease) .08s, transform .3s var(--ease) .08s;
}
.faq .qa.is-open .ans p{opacity:1; transform:none}
.faq .ans p + p{margin-top:-8px; padding-top:12px}
@media(prefers-reduced-motion:reduce){
  .faq .ans, .faq .ans p, .faq .qa-q .ico{transition:none}
}

/* ============================================================
   LEGAL / LONG-FORM PAGES
   ============================================================ */
.legal{max-width:760px}
.legal h2{font-size:clamp(22px,2.6vw,28px); margin:52px 0 14px; letter-spacing:-.015em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:17.5px; margin:28px 0 10px}
.legal p, .legal li{color:var(--fg-2); line-height:1.74; font-size:15.8px}
.legal p{margin:0 0 15px}
.legal ul{margin:0 0 18px; padding-left:0; list-style:none}
.legal li{padding-left:22px; position:relative; margin-bottom:10px}
.legal li::before{content:""; position:absolute; left:0; top:11px; width:9px; height:1.5px; background:var(--accent)}
.legal .updated{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-3); padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:38px;
}
.toc{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-1);
  padding:22px 24px; margin:0 0 42px;
}
.toc b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:12px}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:30px}
@media(max-width:620px){.toc ol{columns:1}}
.toc li{margin-bottom:7px; break-inside:avoid}
.toc a{color:var(--fg-2); text-decoration:none; font-size:14.5px}
.toc a:hover{color:var(--accent)}

.ft-links{display:flex; gap:20px; flex-wrap:wrap}
.ft-links a{color:var(--ink-fg-2,var(--fg-3)); text-decoration:none; font-size:13.5px}
.ft-links a:hover{color:var(--accent)}

/* ============================================================
   TIGHTER VERTICAL RHYTHM
   112px between sections is generous on a 27-inch monitor and
   enormous on a laptop, where it means a whole screen of nothing
   between every idea. These scale with the viewport instead, so
   a large screen keeps the air and a small one stops scrolling
   through emptiness.
   ============================================================ */
section, .sec{padding:clamp(56px, 6.5vw, 96px) 0}
.sec-tight{padding:clamp(40px, 4.5vw, 64px) 0}
.page-hero{padding-top:clamp(52px, 6vw, 86px); padding-bottom:clamp(40px, 5vw, 70px)}
.sec-head{gap:clamp(18px, 2vw, 26px) clamp(32px, 4vw, 60px)}
.sec-head + *{margin-top:clamp(26px, 3vw, 40px)}
.svc, .work, .plans, .team, .phones{margin-top:clamp(26px, 3vw, 40px)}
.line{padding:clamp(34px, 4vw, 50px) 0}
.steps{margin-top:clamp(26px, 3vw, 40px)}
.steps li{padding-top:clamp(14px, 1.8vw, 20px); padding-bottom:clamp(14px, 1.8vw, 20px)}
.legal h2{margin-top:clamp(32px, 4vw, 48px)}
.faq{margin-top:clamp(26px, 3vw, 36px)}
.banner{padding:clamp(40px, 5vw, 60px) 0}



/* ---- density on the grids that are actually in the markup ----
   An earlier pass targeted .svc and .work, which the redesign no longer
   uses, so it changed nothing. These are the real ones. */
.bento{gap:14px}
.bento > *{padding:22px 20px}
.bento h3{font-size:18.5px; margin-bottom:8px}
.bento p{font-size:14.2px; line-height:1.56}
.wall{gap:12px}
.wall > *{padding:18px 20px}
.wall p{font-size:14px; line-height:1.55}
.track li{padding-top:14px; padding-bottom:14px}
.case{gap:clamp(26px,3vw,44px)}
.case p{font-size:15px; line-height:1.62; margin-bottom:12px}

/* ---- six tiles in the bento, not nine ----
   The grid is 12 columns and the first row is a 7 + 5 pair. With nine
   tiles the rest fell into clean rows of three; with six it left a lone
   tile on its own row with two thirds of the width empty. Pairing the
   remaining four gives 7+5 / 6+6 / 6+6 and no ragged edge. */
.bento .tile:nth-child(n+3){grid-column:span 6}
@media(max-width:860px){ .bento .tile{grid-column:span 12 !important} }

/* ---- closing state ----
   A <details> hides its content the instant `open` is removed, so the
   close never animates: it snaps. The script below keeps `open` on until
   the transition has finished and marks the element .closing meanwhile. */
.faq .qa-q{-webkit-tap-highlight-color:transparent}

/* ============================================================
   AIB DIGITAL SOLUTIONS — additions on top of yume.css + company.css
   Colours come from the shared tokens; the build remaps the old warm
   palette to AIB indigo, so nothing here hard-codes the brand.
   ============================================================ */

/* ---------- pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
.pillar{position:relative; padding:28px 26px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--ring-0); box-shadow:var(--sh-1); overflow:hidden}
.pillar .n{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--accent); text-transform:uppercase}
.pillar h3{margin:10px 0 8px; font-family:var(--display); font-size:30px; font-weight:500; letter-spacing:-.01em; color:var(--fg)}
.pillar p{margin:0; color:var(--fg-2); line-height:1.6}
.pillar::after{content:""; position:absolute; right:-60px; top:-60px; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 70%)}
@media (max-width:860px){ .pillars{grid-template-columns:1fr} }

/* ---------- Product cards ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px}
.prod-grid.three{grid-template-columns:repeat(3,1fr)}
.prod{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-0);
  box-shadow:var(--sh-1); overflow:hidden; text-decoration:none; color:inherit; transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.prod:hover{border-color:var(--line-2)}
.prod .shot{aspect-ratio:16/9; overflow:hidden; background:var(--ring-1); border-bottom:1px solid var(--line)}
.prod .shot img{width:100%; height:100%; object-fit:cover; object-position:top left; display:block}
.prod .body{display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px; flex:1}
.prod .kind{font-family:var(--mono); font-size:12px; color:var(--fg-3)}
.prod h3{margin:0; font-size:21px; letter-spacing:-.01em; color:var(--fg)}
.prod p{margin:0; color:var(--fg-2); line-height:1.55}
.prod .foot{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:10px}
.prod .price{font-weight:700; color:var(--fg)}
.prod .price small{font-weight:500; color:var(--fg-3)}
.prod .go{color:var(--accent); font-weight:600; white-space:nowrap}
.prod.feature{grid-column:1/-1; display:grid; grid-template-columns:1.25fr 1fr}
.prod.feature .shot{aspect-ratio:auto; min-height:100%; border-bottom:0; border-right:1px solid var(--line)}
.prod.feature h3{font-size:28px}
@media (max-width:960px){ .prod-grid.three{grid-template-columns:1fr 1fr} }
@media (max-width:760px){
  .prod-grid, .prod-grid.three{grid-template-columns:1fr}
  .prod.feature{grid-template-columns:1fr}
  .prod.feature .shot{border-right:0; border-bottom:1px solid var(--line); aspect-ratio:16/9}
}

/* ---------- Product page ---------- */
.pp-hero{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center}
.pp-hero .frame img{display:block; width:100%}
.pp-buy{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.pp-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.pp-meta span{padding:6px 11px; border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--fg-2); background:var(--ring-0)}
.feat-list{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; margin:34px 0 0; padding:0; list-style:none}
.feat-list li{position:relative; padding-left:28px; color:var(--fg-2); line-height:1.55}
.feat-list li b{color:var(--fg)}
.feat-list li::before{content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; border-radius:4px;
  background:var(--accent-tint); border:1.5px solid var(--accent)}
.lic{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px}
.lic article{padding:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-0)}
.lic article.best{border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-tint)}
.lic .amt{font-family:var(--display); font-size:44px; color:var(--fg); line-height:1; margin:8px 0 10px}
.lic p{margin:0 0 18px; color:var(--fg-2)}
.shots{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px}
.shots img{width:100%; display:block; border-radius:var(--r-md); border:1px solid var(--line)}
@media (max-width:860px){
  .pp-hero, .lic, .shots{grid-template-columns:1fr}
  .feat-list{grid-template-columns:1fr}
}

/* ---------- Articles ---------- */
.arts{display:grid; gap:14px; margin-top:34px}
.arts a{display:grid; grid-template-columns:1fr auto; gap:6px 18px; padding:20px 22px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--ring-0); text-decoration:none; color:inherit}
.arts a:hover{border-color:var(--accent-line)}
.arts b{color:var(--fg); font-size:18px}
.arts span{color:var(--fg-3); font-size:14px; grid-column:1}
.arts i{font-style:normal; color:var(--accent); grid-row:1/3; grid-column:2; align-self:center}
.lic.three{grid-template-columns:repeat(3,1fr)}
.lic .flag{display:inline-block; margin-left:8px; padding:3px 9px; border-radius:999px; font-size:12px; background:var(--accent-tint); color:var(--accent); vertical-align:middle}
.lic ul{margin:0 0 18px; padding-left:18px; color:var(--fg-2); line-height:1.7}
@media (max-width:960px){ .lic.three{grid-template-columns:1fr} }

/* ============================================================
   v3 — company look (devsinc-inspired): geometric sans, near-black
   bands lit with brand blue, rounded grey panels, gradient-topped cards.
   ============================================================ */
:root{
  --sans:"DM Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"DM Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --glow:#60a5fa; --night:#0a1020; --night-2:#111a33;
  --panel:#f1f4f9;
}
:root[data-theme="dark"]{ --panel:#111a2e; }
body{background:var(--bg-2)}
h1,h2,h3,.lede{font-family:var(--display)}
h1,h2{font-weight:500; letter-spacing:-.02em}
/* no two-tone headlines: a highlighted half reads as a template */
h1 em, h2 em, h3 em{font-style:normal; color:inherit}

/* dark sections become a near-black panel with rounded corners */
main > section.ink, main > section.band-dark{
  margin:0; border-radius:0; overflow:hidden;
  background:var(--night);
}
main > section.band-dark{color:#f1f5f9}
main > section.band-dark .eyebrow{color:var(--glow)}
main > section.band-dark p{color:#cbd5e1}
/* alternate light sections sit on soft grey panels */
main > section.panel{margin:0; border-radius:0; background:var(--panel); border-block:1px solid var(--line)}
footer.ink{background:#070c18}

.eyebrow{font-family:var(--mono)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
.btn-w{background:#fff; color:#0a1020; border:1px solid #fff}
.btn-w:hover{background:#eef1f7}
.btn-ghost-w{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
.btn-ghost-w:hover{border-color:#fff}

/* services: a two-column list on hairlines, not a grid of equal cards */
.svc-cards{display:grid; grid-template-columns:1fr 1fr; column-gap:64px; margin-top:40px; border-bottom:1px solid var(--line)}
.svc-card{display:grid; grid-template-columns:20px 1fr; gap:4px 16px; padding:20px 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit}
.svc-card .ic{grid-row:1/3; padding-top:3px; color:var(--fg-3)}
.svc-card .ic svg{display:block; width:18px; height:18px; stroke-width:1.5}
.svc-card h3{margin:0; font-size:17px; font-weight:500; color:var(--fg); transition:color .16s var(--ease)}
.svc-card:hover h3{color:var(--blue-text)}
.svc-card p{margin:0; color:var(--fg-2); line-height:1.55; font-size:15px}
@media (max-width:760px){ .svc-cards{grid-template-columns:1fr} }

/* stats band */
.stats{display:grid; grid-template-columns:repeat(3,1fr); margin-top:44px; border-top:1px solid rgba(255,255,255,.12)}
.stats div{padding:24px 20px 4px 0; border-right:1px solid rgba(255,255,255,.12); padding-left:20px}
.stats div:first-child{padding-left:0}
.stats div:last-child{border-right:0}
.stats b{display:block; font-family:var(--display); font-size:clamp(40px,5vw,56px); font-weight:500; color:#eef0f5; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.stats span{display:block; margin-top:12px; font-family:var(--mono); font-size:13px; color:#a3a9b8}
@media (max-width:620px){ .stats{grid-template-columns:1fr} .stats div{padding:20px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.12)} .stats div:last-child{border-bottom:0} }

/* case study cards: image on top, near-black footer */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.case-card{display:flex; flex-direction:column; border-radius:20px; overflow:hidden; text-decoration:none; color:#fff; background:var(--night); box-shadow:var(--sh-1); transition:opacity .16s var(--ease)}
.case-card:hover .go{color:#fff}
.case-card .img{position:relative; aspect-ratio:16/10; overflow:hidden; background:#111a33}
.case-card .img img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.case-card .tag{position:absolute; left:14px; top:14px; padding:5px 10px; border-radius:7px; background:rgba(10,16,32,.85); font-family:var(--mono); font-size:12px}
.case-card .txt{padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.case-card h3{margin:0; font-size:19px; font-weight:500; line-height:1.3; color:#fff}
.case-card .k{font-family:var(--mono); font-size:12px; color:#a3a9b8}
.case-card .go{margin-top:auto; padding-top:8px; font-size:14px; color:var(--blue-light); transition:color .16s var(--ease)}
@media (max-width:960px){ .cases{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .cases{grid-template-columns:1fr} }

/* industries */
.inds{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px}
.inds div{padding:22px; border-radius:16px; background:var(--ring-0); border:1px solid var(--line)}
.inds b{display:block; font-size:17px; color:var(--fg); margin-bottom:6px}
.inds span{color:var(--fg-2); font-size:15px; line-height:1.55}
@media (max-width:860px){ .inds{grid-template-columns:1fr} }

/* experience list (dark) */
.exp{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px}
.exp article{padding:24px; border-radius:16px; background:#11141c; border:1px solid rgba(238,240,245,.08)}
.exp .org{display:block; max-width:none; margin:0; font-family:var(--mono); font-size:12px; color:#a3a9b8}
.exp h3{margin:8px 0; font-size:19px; color:#eef0f5; font-weight:500}
.exp p{margin:0; color:#cbd5e1; line-height:1.6; font-size:15px}
@media (max-width:760px){ .exp{grid-template-columns:1fr} }

/* product cards: buy row */
.prod .buy{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.prod .buy .btn{padding:10px 16px; font-size:14px}
.hero-shot{border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.hero-shot img{display:block; width:100%}

/* blog cards (dev.to articles) */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.blog-grid.all{grid-template-columns:repeat(3,1fr)}
.blog-card{display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:var(--ring-0); border:1px solid var(--line);
  text-decoration:none; color:inherit; transition:border-color .16s var(--ease)}
.blog-card:hover{border-color:var(--line-2)}
.blog-card .img{aspect-ratio:16/9; overflow:hidden; background:var(--panel)}
.blog-card .img img{width:100%; height:100%; object-fit:cover; display:block}
.blog-card .txt{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px}
.blog-card .k{font-family:var(--mono); font-size:12px; color:var(--fg-3)}
.blog-card h3{margin:0; font-size:18px; font-weight:500; line-height:1.35; color:var(--fg)}
.blog-card .meta{font-size:13.5px; color:var(--fg-3)}
@media (max-width:960px){ .blog-grid, .blog-grid.all{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .blog-grid, .blog-grid.all{grid-template-columns:1fr} }

/* ---------- A · I · B: what the name stands for ---------- */
.aib3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px}
.aib3 article{position:relative; padding:30px 28px 28px; border:1px solid var(--line); border-radius:22px; background:var(--ring-0); overflow:hidden}
.aib3 .L{display:block; margin-bottom:18px; font-family:var(--display); font-weight:500; font-size:88px; line-height:.8; letter-spacing:-.04em; color:var(--accent)}
.aib3 h3{font-size:24px; margin:0 0 6px}
.aib3 .m{margin:0 0 14px; font-family:var(--mono); font-size:12px; color:var(--fg-3)}
.aib3 p{margin:0 0 18px; color:var(--fg-2); line-height:1.6}
.aib3 ul{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.aib3 li a{display:inline-block; padding:6px 12px; border:1px solid var(--line-2); border-radius:999px; font-size:13.5px; color:var(--fg); text-decoration:none}
.aib3 li a:hover{border-color:var(--accent); color:var(--accent)}
@media(max-width:900px){ .aib3{grid-template-columns:1fr} .aib3 .L{font-size:64px} }

/* ============================================================
   Home hero v7: the company, not one product. The headline on the
   left, and three pieces of real work side by side below it: a live
   client website in the middle, a business system and a SaaS
   platform either side. Tilly POS has its own band further down.
   ============================================================ */
main > section.hx2{position:relative; overflow:hidden; padding:96px 0 0; background:var(--night)}
.hx2-copy{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px 64px; align-items:end}
main > section.hx2 h1{margin:0; max-width:14ch; font-size:clamp(40px,5.4vw,72px); font-weight:500; line-height:1.04; letter-spacing:-.03em; color:#eef0f5}
.hx2-lede{margin:0; max-width:36rem; font-size:18px; line-height:1.6; color:#a3a9b8}
.hx2-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}

.hx2-wall{display:grid; grid-template-columns:1fr 1.45fr 1fr; gap:20px; align-items:end; margin-top:72px; height:clamp(260px,30vw,420px)}
.wf{display:flex; flex-direction:column; height:100%; min-width:0; text-decoration:none}
.wf.side{height:80%}
.wf .cap{margin-bottom:12px; font-family:var(--mono); font-size:12px; color:#7a8296; transition:color .2s}
.wf:hover .cap{color:#eef0f5}
.wf .frm{flex:1; min-height:0; display:flex; flex-direction:column; border-radius:12px 12px 0 0; overflow:hidden; background:#fff;
  border:1px solid rgba(238,240,245,.12); border-bottom:0}
.wf .bar{flex:none; display:flex; align-items:center; gap:7px; height:30px; padding:0 12px; background:#f1f3f6; border-bottom:1px solid #e3e6eb}
.wf .bar i{width:9px; height:9px; border-radius:50%; background:#cfd4dc}
.wf .bar span{margin-left:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11.5px; color:#5b6478; font-family:var(--mono)}
.wf img{flex:1; min-height:0; display:block; width:100%; object-fit:cover; object-position:top left}

.hx2-stack{position:relative; z-index:3; border-top:1px solid rgba(238,240,245,.08); background:var(--night)}
.hx2-stack .wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; padding-top:20px; padding-bottom:20px}
.hx2-stack .lbl{font-family:var(--mono); font-size:12px; color:#7a8296}
.hx2-stack span:not(.lbl){font-size:14px; color:#a3a9b8}

@media(max-width:900px){
  .hx2-copy{grid-template-columns:1fr; gap:20px}
  main > section.hx2 h1{max-width:16ch}
  .hx2-wall{grid-template-columns:1fr 1.6fr; height:300px}
  .hx2-wall .wf.side:last-child{display:none}
}
@media(max-width:760px){
  main > section.hx2{padding-top:56px}
  main > section.hx2 h1{font-size:clamp(36px,10vw,44px)}
  .hx2-lede{font-size:17px}
  .hx2-wall{grid-template-columns:1fr; margin-top:56px; height:260px}
  .hx2-wall .wf.side{display:none}
  .wf .bar span{display:none}
}

/* ============================================================
   v5: linked industries, a numbered process line, swipe rows on
   a phone, team photo, case-study notes.
   ============================================================ */

/* industries as links */
.inds > a{display:block; padding:22px 22px 20px; border-radius:16px; background:var(--ring-0); border:1px solid var(--line);
  text-decoration:none; color:inherit; transition:border-color .16s var(--ease)}
.inds > a:hover{border-color:var(--accent-line)}
.inds > a b{display:block; font-size:17px; font-weight:500; color:var(--fg); margin-bottom:8px}
.inds > a span{display:block; color:var(--fg-2); font-size:15px; line-height:1.55}
.inds > a i{display:inline-block; margin-top:12px; font-style:normal; font-size:14px; font-weight:500; color:var(--blue-text)}
@media(max-width:860px){ .inds{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .inds{grid-template-columns:1fr; gap:10px} .inds > a{padding:16px 18px} .inds > a i{margin-top:6px} }

/* process: numbered steps on one line, a vertical line on a phone */
.flow{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); counter-reset:st}
.flow li{position:relative; padding:0 18px 0 0}
.flow li::before{counter-increment:st; content:counter(st); position:relative; z-index:1; display:grid; place-items:center; width:42px; height:42px;
  border-radius:50%; background:var(--ring-0); border:1px solid var(--line-2); color:var(--fg); font-family:var(--mono); font-weight:400; font-size:14px; box-shadow:0 0 0 6px var(--bg-2)}
.flow li::after{content:""; position:absolute; left:42px; right:0; top:20px; height:1px; background:var(--line-2)}
.flow li:last-child::after{display:none}
.flow b{display:block; margin:16px 0 8px; font-size:17px; font-weight:500; color:var(--fg)}
.flow span{display:block; color:var(--fg-2); font-size:14.5px; line-height:1.55}
@media(max-width:1000px){ .flow{grid-template-columns:repeat(2,1fr); row-gap:34px} .flow li:nth-child(2)::after{display:none} }
@media(max-width:620px){
  .flow{grid-template-columns:1fr; row-gap:0}
  .flow li{padding:0 0 24px 60px; min-height:42px}
  .flow li::before{position:absolute; left:0; top:0}
  .flow li::after, .flow li:nth-child(2)::after{display:block; left:20px; right:auto; top:42px; bottom:0; width:2px; height:auto; background:var(--line-2)}
  .flow li:last-child::after{display:none}
  .flow b{margin:9px 0 4px}
}

/* swipe rows on a phone so the home page is not twenty screens long */
@media(max-width:620px){
  .rail-sm{display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; gap:14px; overflow-x:auto;
    scroll-snap-type:x mandatory; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
  .rail-sm > *{scroll-snap-align:start}
}

/* developer products: a single line under Tilly POS on the home page */
.dev-note{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:20px; padding:18px 22px;
  border:1px dashed var(--line-2); border-radius:16px; color:var(--fg-2)}
.dev-note b{color:var(--fg)}

/* testimonials: ready for real quotes (name, role, company) */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px}
.quotes figure{margin:0; padding:26px; border-radius:18px; background:var(--ring-0); border:1px solid var(--line)}
.quotes blockquote{margin:0 0 18px; font-size:17px; line-height:1.6; color:var(--fg)}
.quotes figcaption{font-size:14px; color:var(--fg-3)}
.quotes figcaption b{display:block; color:var(--fg); font-size:15px}
@media(max-width:860px){ .quotes{grid-template-columns:1fr} }

/* team: founder photo */
.lead-card{display:grid; grid-template-columns:150px 1fr; gap:28px; align-items:start}
.lead-card img{width:150px; height:150px; border-radius:28px; object-fit:cover; display:block; border:1px solid var(--line)}
@media(max-width:560px){ .lead-card{grid-template-columns:1fr; gap:18px} .lead-card img{width:112px; height:112px; border-radius:22px} }

/* case study: challenge, what we built, where it stands */
.csx{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0 4px}
.csx div{padding:16px 18px; border-radius:14px; background:var(--ring-0); border:1px solid var(--line)}
.csx b{display:block; margin-bottom:8px; font-family:var(--mono); font-size:12px; font-weight:400; color:var(--fg-3)}
.csx p{margin:0; font-size:15px; line-height:1.55; color:var(--fg-2)}
@media(max-width:860px){ .csx{grid-template-columns:1fr} }
.pp-hero .csx{grid-template-columns:1fr; gap:10px}
.pp-hero .csx div{display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:baseline}
.pp-hero .csx b{margin:0}
@media(max-width:560px){ .pp-hero .csx div{grid-template-columns:1fr; gap:4px} }


/* ---------- home: Tilly POS, the one highlighted band ---------- */
main > section.tilly-band{margin:0; border-radius:0; background:var(--blue); color:#fff; overflow:hidden}
.tilly-band .tb-grid{display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center}
.tilly-band .eyebrow{color:rgba(255,255,255,.8)}
.tilly-band h2{margin:10px 0 0; color:#fff; font-size:clamp(44px,6vw,80px); font-weight:500; letter-spacing:-.035em; line-height:1}
.tilly-band .tb-lede{margin:20px 0 0; max-width:34ch; color:#e6edff; font-size:18px; line-height:1.55}
.tb-facts{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:0}
.tb-facts li{padding:0 24px; border-left:1px solid rgba(255,255,255,.28)}
.tb-facts li:first-child{padding-left:0; border-left:0}
.tb-facts b{display:block; font-family:var(--display); font-size:22px; font-weight:500; color:#fff; letter-spacing:-.01em; white-space:nowrap}
.tb-facts span{display:block; margin-top:4px; font-family:var(--mono); font-size:12px; color:#d3defc}
.tilly-band .cta{margin-top:32px}
.tilly-band .btn-w{color:#0a1020}
.tb-more{display:inline-block; margin-top:20px; color:#fff; font-weight:500; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.45)}
.tb-more:hover{text-decoration-color:#fff}
.tb-shot{display:block; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -20px rgba(10,16,32,.55), 0 0 0 1px rgba(10,16,32,.12)}
.tb-shot .bar{display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; background:#f1f3f6; border-bottom:1px solid #e3e6eb}
.tb-shot .bar i{width:10px; height:10px; border-radius:50%; background:#cfd4dc}
.tb-shot .bar span{margin-left:8px; font-size:12px; color:#5b6478; font-family:var(--mono)}
.tb-shot img{display:block; width:100%; height:auto}
@media (max-width:960px){ .tilly-band .tb-grid{grid-template-columns:1fr; gap:40px} }
@media (max-width:520px){
  .tb-facts{grid-template-columns:1fr 1fr; row-gap:18px}
  .tb-facts li:nth-child(3){padding-left:0; border-left:0}
  .tilly-band .cta .btn{width:100%; justify-content:center}
}

/* ---------- home: why AIB, names only ---------- */
.exp-list{list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.12)}
.exp-list li{padding:22px 20px 0 0}
.exp-list .org{display:block; max-width:none; margin:0; font-family:var(--mono); font-size:12px; color:#a3a9b8; text-align:left}
.exp-list b{display:block; margin-top:8px; font-size:16px; font-weight:500; color:#eef0f5; line-height:1.35}
@media (max-width:860px){ .exp-list{grid-template-columns:1fr 1fr; row-gap:8px} }
@media (max-width:520px){ .exp-list{grid-template-columns:1fr} }

/* ============================================================
   aib.digital brand layer: logo 5d "Source" in Midnight & Blue.
   Loaded last by every page, the new ones and the older Tilly POS / founder pages,
   so the logo, header, labels and buttons look the same everywhere.

   Brand blue #2563eb is for fills (white text on it reads well). Text in blue uses
   --blue-text: #1d4ed8 on light backgrounds, #60a5fa on navy ones.
   ============================================================ */
:root{
  --display:"Space Grotesk","DM Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --navy:#0a1020; --blue:#2563eb; --blue-hover:#1d4ed8; --blue-text:#1d4ed8; --blue-light:#60a5fa;
}
:root[data-theme="dark"]{ --blue-text:#60a5fa }

/* ---------- logo: code tile + aib.digital (header and footer are navy) ---------- */
.mark{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; flex:none}
.mark svg.logo-tile{display:block; flex:none; width:38px; height:38px; border:0; border-radius:0; background:none; box-shadow:none}
.mark .lk{display:flex; flex-direction:column; gap:6px; white-space:nowrap}
.mark .wm{font-family:"Space Mono",ui-monospace,monospace; font-size:21px; font-weight:400; line-height:1; letter-spacing:-.02em; color:#fff}
.mark .wm b{font:inherit; font-weight:700; letter-spacing:inherit; color:inherit}
.mark .wm i{display:inline !important; font:inherit; font-weight:700; font-style:normal; letter-spacing:0; text-transform:none; color:var(--blue-light)}
.mark small{font-family:"Space Mono",ui-monospace,monospace; font-size:10.5px; line-height:1; letter-spacing:0; color:#94a3b8}
@media(max-width:520px){ .mark small{display:none} .mark svg.logo-tile{width:34px; height:34px} .mark .wm{font-size:19px} }

/* ---------- header: one navy bar in both themes ---------- */
header{background:var(--navy) !important; border-bottom:1px solid rgba(255,255,255,.08) !important}
header.scrolled{box-shadow:0 12px 30px -18px rgba(2,6,23,.8)}
header nav a{color:#94a3b8}
header nav a:hover{color:#fff; background:rgba(255,255,255,.07)}
header nav a.on{color:#fff}
header nav a.on::after{background:var(--blue-light)}
header nav a[data-cta]{background:var(--blue); color:#fff}
header nav a[data-cta]:hover{background:var(--blue-hover); color:#fff}
header .tgl{color:#94a3b8; border-color:rgba(255,255,255,.18)}
header .tgl:hover{color:#fff; border-color:rgba(255,255,255,.4)}
header .menu-btn{color:#fff; border-color:rgba(255,255,255,.22)}
.depth i{background:linear-gradient(90deg,var(--blue),var(--blue-light))}
@media(max-width:980px){
  header nav{background:var(--navy)}
  header nav a{color:#e2e8f0; border-bottom-color:rgba(255,255,255,.1)}
  header nav a:hover{color:var(--blue-light); background:transparent}
}

/* ---------- section labels read like code comments ---------- */
.eyebrow{font-family:var(--mono); font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--blue-text); gap:8px}
.eyebrow::before{content:"//"; width:auto; height:auto; background:none; opacity:.55}
.ink .eyebrow, .band-dark .eyebrow, main > section.band-dark .eyebrow{color:var(--blue-light)}

/* ---------- buttons: brand blue with white text ---------- */
.btn-p, .ink .btn-p, :root[data-theme="dark"] .btn-p, .cband .btn-p{background:var(--blue); color:#fff; box-shadow:none}
.btn-p:hover, .ink .btn-p:hover, .cband .btn-p:hover{background:var(--blue-hover); color:#fff; box-shadow:none}
/* the older Tilly POS pages call their main button .btn-primary */
.btn-primary{background:var(--blue) !important; color:#fff !important; border-color:var(--blue) !important}
.btn-primary:hover{background:var(--blue-hover) !important}

/* headings: one colour, no highlighted half */
h1 em, h2 em, h3 em{font-style:normal; color:inherit}

/* banner glows */
.glow.g1{opacity:.4}
.glow.g2{background:radial-gradient(circle,#3b82f6 0%,rgba(59,130,246,0) 70%); opacity:.14}

/* anything that sits on a blue fill gets white text; the old gradients start too light for it */
.seg span:nth-child(1){background:var(--blue); color:#fff; font-weight:700}
.seg span:nth-child(3){background:rgba(59,130,246,.14)}
.tracks button[aria-selected="true"]{background:var(--blue); color:#fff; box-shadow:0 8px 22px -10px rgba(37,99,235,.7)}
.tabs-art .fav.o{background:var(--blue); color:#fff}
::selection{background:var(--blue); color:#fff}

/* call-to-action box: a plain navy panel */
.cband{background:var(--navy); border:1px solid rgba(255,255,255,.08)}
.cband h2 em{color:inherit; -webkit-text-fill-color:currentColor}

/* intro text on the dark bands */
main > section.band-dark .intro, main > section.band-dark p{color:#cbd5e1}

/* ---------- header: same CTA and round menu button on the new and the older pages ---------- */
header .menu-btn{border-radius:999px}
header nav a[data-cta]{display:inline-flex; align-items:center; gap:8px; margin-left:12px; padding:10px 16px; border-radius:10px; font-weight:500; white-space:nowrap}
header nav a[data-cta]::after{display:none}

/* ---------- floating WhatsApp: every page, icon-only on a phone ---------- */
.wa-fab{position:fixed; right:18px; bottom:18px; z-index:80; display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px 12px 14px; border-radius:999px; background:#25d366; color:#052e16; font-weight:600; font-size:15px; line-height:1;
  text-decoration:none; box-shadow:0 14px 34px -12px rgba(2,6,23,.55); transition:transform .2s ease, box-shadow .2s ease}
.wa-fab:hover{transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(2,6,23,.6); color:#052e16}
.wa-fab svg{flex:none}
body.menu-open .wa-fab{display:none}
@media(max-width:620px){ .wa-fab{right:14px; bottom:14px; padding:14px} .wa-fab span{display:none} }

/* ---------- the first screen never waits for the scroll reveal ---------- */
html.js main > section:first-child .rv{opacity:1; transform:none; transition:none}

/* ---------- comfortable tap targets in the footer on a phone ---------- */
@media(max-width:620px){ footer ul a{display:inline-block; padding:7px 0} .ft-links a{display:inline-block; padding:8px 4px} }

/* ---------- quieter craft: squared buttons, sentence-case labels, small motion ---------- */
.btn{border-radius:10px; font-weight:500}
.btn-lg{padding:16px 20px}
.btn:hover svg{transform:none}
.ft h4{font-size:12px; letter-spacing:0; text-transform:none}
html.js .rv{transform:translateY(8px); transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1)}

/* ---------- the same on every inner page: one-colour headlines, no glow fields,
   nothing pulsing, labels in sentence case ---------- */
.ink h1 em, .ink h2 em, .ink h3 em, .band-dark h2 em{background:none; color:inherit; -webkit-text-fill-color:currentColor; padding-right:0}
.field, .glow, .grain{display:none}
.svc article::after, .plans article.best::before, .team article.lead::before, .team .av::after, .tz::before{display:none}
.tagpill{font-size:12px; letter-spacing:0; text-transform:none}
.tagpill .pulse{animation:none; box-shadow:none}
.tracks button[aria-selected="true"]{box-shadow:none}
.crumbs, .crumbs a, .banner .by, .tracks button, .paycard .lbl, .plans .flag, .lic .flag, .svc-nav a, .line .deliv b, .fc .lbl, .tz h4,
.facts-list b, .case .tag, .work .tag, .team .role, .svc .n, .track em, .steps strong small, .compare h4, .wall .sx, .cband li small,
.plats span, .pipe li, .feed li b, .marq span, .org-node small, .pc-foot small, .tabs-art .st, .pillar .n, main .track, h3 .tag{letter-spacing:0; text-transform:none}