/* ==========================================================================
   aleksakrstovic.rs
   Design system: canopy green, linen type, server-LED accents.
   Signal green = Pillar A (AI & software). Amber = Pillar B (infrastructure).

   1.  Tokens
   2.  Base & reset
   3.  Typography
   4.  Layout helpers
   5.  Motion states (reveal, split, draw)
   6.  Controls (buttons, links, LEDs, pills)
   7.  Chrome (header, nav, language, menu, curtain, cursor)
   8.  Footer
   9.  Home: hero, rack, statement, pillars, work
   10. Services: groups, tiers, FAQ
   11. Process: steps, principles
   12. About: bio, portrait, experience, toolkit
   13. Contact: form, direct links
   14. Responsive
   15. Reduced motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --canopy: #16221a;
  --undergrowth: #0f1913;
  --moss: #1d2b21;
  --moss-hi: #263729;
  --linen: #eae4d2;
  --linen-rgb: 234 228 210;
  --signal: #b9ea5b; /* Pillar A: AI and software (lime) */
  --amber: #e3a94e;  /* Pillar B: infrastructure (gold) */
  --alert: #e89a86;

  --text: var(--linen);
  --text-2: rgb(var(--linen-rgb) / .68);
  --text-3: rgb(var(--linen-rgb) / .47);
  --line: rgb(var(--linen-rgb) / .13);
  --line-2: rgb(var(--linen-rgb) / .26);

  --font-display: "Instrument Serif", "Instrument Serif Fallback", "Times New Roman", Times, serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xl: clamp(3.3rem, 7.6vw, 9.25rem);
  --fs-l: clamp(2.6rem, 5.4vw, 6.25rem);
  --fs-m: clamp(2rem, 3.3vw, 3.4rem);
  --fs-s: clamp(1.45rem, 1.9vw, 1.95rem);
  --fs-lead: clamp(1.3rem, 1.8vw, 1.8rem);
  --fs-body: 1.0625rem;

  --gutter: clamp(1.25rem, 3.6vw, 3.5rem);
  --section: clamp(5rem, 11vw, 10rem);
  --header-h: 4.5rem;
  --grid: repeat(12, minmax(0, 1fr));

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-rail: cubic-bezier(.22, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Metric-adjusted fallback keeps layout steady while Instrument Serif loads */
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Times");
  size-adjust: 90%;
}

/* 2. Base & reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--canopy);
  color-scheme: dark;
  scrollbar-color: rgb(var(--linen-rgb) / .22) var(--undergrowth);
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canopy);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip, not hidden: keeps position: sticky working */
}

/* Film grain: keeps the flat green from reading as a screen colour */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
dl, dd { margin: 0; }
main { display: block; }
main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
::selection { background: var(--signal); color: var(--undergrowth); }

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

.skip {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 130;
  padding: .75rem 1rem;
  background: var(--linen);
  color: var(--undergrowth);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform .3s var(--ease-out);
}
.skip:focus { transform: none; }

/* 3. Typography ------------------------------------------------------------ */
.display-xl, .display-l, .display-m, .serif {
  font-family: var(--font-display);
  font-weight: 400;
  font-kerning: normal;
  font-feature-settings: "kern", "liga";
}
.display-xl { font-size: var(--fs-xl); line-height: .9; letter-spacing: -.012em; }
.display-l  { font-size: var(--fs-l);  line-height: .95; letter-spacing: -.01em; text-wrap: balance; }
.display-m  { font-size: var(--fs-m);  line-height: 1.02; letter-spacing: -.005em; text-wrap: balance; }

.lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.3;
}

.muted { color: var(--text-2); }

/* 4. Layout helpers -------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
}

.section {
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--line);
}

.section-head {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}
.section-head__title { grid-column: 1 / span 7; }
.section-head__text { grid-column: 9 / -1; max-width: 38ch; color: var(--text-2); }

/* Page hero (inner pages) */
.page-hero {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: clamp(2rem, 4vw, 3.25rem);
  padding: calc(var(--header-h) + clamp(4rem, 13vh, 9rem)) var(--gutter) clamp(4rem, 9vw, 7.5rem);
}
.page-hero__title { grid-column: 1 / span 11; }
.page-hero__aside {
  grid-column: 7 / -1;
  display: grid;
  gap: 2rem;
  align-content: start;
}
.page-hero__lead { font-size: 1.125rem; color: var(--text-2); max-width: 46ch; }

/* 5. Motion states ---------------------------------------------------------
   Content is visible without JS. The inline boot script adds .js; main.js adds
   .motion-ready once it controls reveals. If main.js never loads, the
   failsafe animation shows everything after 3s. */
.js:not(.reduce-motion):not(.motion-ready) [data-reveal],
.js:not(.reduce-motion):not(.motion-ready) [data-split] {
  opacity: 0;
  animation: failsafe-show .01s linear 3s forwards;
}
@keyframes failsafe-show { to { opacity: 1; } }

.motion-ready [data-reveal] {
  opacity: 0;
  transition: opacity 1.1s var(--ease-out) var(--d, 0s);
}
.motion-ready [data-reveal].is-in { opacity: 1; }

/* Word mask reveal for headings */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .12em .04em .18em;
  margin: -.12em -.04em -.18em;
}
.w__i { display: inline-block; }
.motion-ready [data-split] .w__i {
  transform: translate3d(0, 112%, 0);
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 42ms + var(--d, 0s));
}
.motion-ready [data-split].is-in .w__i { transform: none; }

/* Rules that draw like a cable being run */
.rule {
  display: block;
  height: 1px;
  background: var(--line-2);
  transform-origin: 0 50%;
}
.motion-ready [data-draw] {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.4s var(--ease-in-out) var(--d, 0s);
}
.motion-ready [data-draw].is-in { transform: none; }

/* Language switch: content dips out while the dictionary swaps */
main, .site-footer, .site-nav, .site-header__cta, .menu__nav {
  transition: opacity .35s var(--ease-out);
}
.is-switching main,
.is-switching .site-footer,
.is-switching .site-nav,
.is-switching .site-header__cta,
.is-switching .menu__nav { opacity: 0; transition-duration: .2s; }

/* Avoid a flash of English when Serbian is stored and the dictionary is pending */
.lang-sr:not(.i18n-ready) body {
  opacity: 0;
  animation: failsafe-show .01s linear 1.5s forwards;
}

/* 6. Controls -------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0 1.5rem;
  border: 1px solid var(--line-2);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .005em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--linen);
  transform: translate3d(0, 101%, 0);
  transition: transform .55s var(--ease-out);
}
.btn:hover { color: var(--undergrowth); border-color: var(--linen); }
.btn:hover::before { transform: none; }

.btn--solid { background: var(--linen); border-color: var(--linen); color: var(--undergrowth); }
.btn--solid::before { background: var(--signal); }
.btn--solid:hover { border-color: var(--signal); }

.btn[disabled] { opacity: .55; pointer-events: none; }

[data-magnetic] { transition: transform .7s var(--ease-spring); will-change: transform; }
[data-magnetic].is-magnet { transition: transform .25s var(--ease-out), color .45s var(--ease-out), border-color .45s var(--ease-out); }

.btn-round {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(8.75rem, 12.5vw, 11rem);
  aspect-ratio: 1;
  padding: 1.25rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  isolation: isolate;
}
.btn-round::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 50%;
  background: var(--signal);
  transform: scale(0);
  transition: transform .6s var(--ease-out);
}
.btn-round:hover { color: var(--undergrowth); border-color: var(--signal); }
.btn-round:hover::before { transform: scale(1); }

/* Text link: underline leaves to the right, a new one arrives from the left */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: .25rem;
  font-weight: 500;
}
.link::before, .link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease-out);
}
.link::before { transform: scaleX(0); transform-origin: left; }
.link::after { transform-origin: right; }
.link:hover::after { transform: scaleX(0); }
.link:hover::before { transform: none; transition-delay: .2s; }

/* LEDs */
.led {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.led--a { color: var(--signal); box-shadow: 0 0 8px rgb(185 234 91 / .55); }
.led--b { color: var(--amber); box-shadow: 0 0 8px rgb(227 169 78 / .5); }
.led--pulse { animation: led-pulse 2.8s ease-in-out infinite; }

@keyframes led-pulse { 50% { opacity: .3; } }
@keyframes led-activity {
  0%, 100% { opacity: 1; }
  6% { opacity: .25; }
  9% { opacity: 1; }
  31% { opacity: 1; }
  33% { opacity: .2; }
  35% { opacity: .95; }
  37% { opacity: .3; }
  40% { opacity: 1; }
  71% { opacity: 1; }
  73% { opacity: .25; }
  76% { opacity: 1; }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .875rem;
  color: var(--text-2);
}

/* Toggle icon for accordions: plus becomes minus */
.plus {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}
.plus::before, .plus::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform .5s var(--ease-out);
}
.plus::after { transform: rotate(90deg); }
[aria-expanded="true"] .plus::after { transform: rotate(0deg); }
[aria-expanded="true"] .plus::before { transform: rotate(180deg); }

/* Collapsible panel: grid-rows trick animates to the content's own height */
.collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--ease-out);
}
.is-open > .collapse { grid-template-rows: 1fr; }
.collapse__inner { min-height: 0; overflow: hidden; }

/* 7. Chrome ---------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: transform .6s var(--ease-out), background-color .4s, border-color .4s;
}
.site-header.is-solid {
  background: rgb(22 34 26 / .84);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-header.is-hidden { transform: translate3d(0, -100%, 0); }
.menu-open .site-header { transform: none; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  height: 100%;
  padding-inline: var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-sans);
  font-size: .9375rem;
  line-height: 1;
  white-space: nowrap;
}
.wordmark__led { width: 7px; height: 7px; }
.wordmark__name { font-weight: 600; color: var(--text); }
.wordmark__role { margin-left: .2rem; color: var(--text-3); transition: color .3s; }
.wordmark:hover .wordmark__role { color: var(--text-2); }
/* Typing caret, shown only while the brand types itself on the first visit */
.wordmark [data-typing]::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -.18em;
  background: currentColor;
  animation: caret 1s steps(1) infinite;
}

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; gap: clamp(1.1rem, 2.2vw, 2.25rem); list-style: none; }
.site-nav__link {
  position: relative;
  display: inline-block;
  padding: .5rem 0;
  font-size: .9375rem;
  color: var(--text-2);
  transition: color .3s;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.site-nav__link:hover { color: var(--text); }
.site-nav__link:hover::after { transform: none; transform-origin: left; }
.site-nav__link[aria-current="page"] { color: var(--text); }
.site-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -.85rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px rgb(185 234 91 / .7);
  transform: translateY(-50%);
}

.site-header__tools { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.site-header__cta { min-height: 2.6rem; padding: 0 1.15rem; font-size: .875rem; }

.lang { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; letter-spacing: .03em; }
.lang__sep { color: var(--text-3); }
.lang__btn {
  position: relative;
  padding: .4rem .15rem;
  color: var(--text-3);
  transition: color .3s;
}
.lang__btn:hover { color: var(--text); }
.lang__btn::after {
  content: "";
  position: absolute;
  left: .15rem; right: .15rem; bottom: .15rem;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transition: transform .45s var(--ease-out);
}
.lang__btn[aria-pressed="true"] { color: var(--text); }
.lang__btn[aria-pressed="true"]::after { transform: none; }

.menu-toggle {
  display: none;
  padding: .5rem 0;
  font-size: .9375rem;
  font-weight: 500;
}

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  background: var(--undergrowth);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease-in-out);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu.is-open { clip-path: inset(0); }
.menu__list { list-style: none; display: grid; gap: .2rem; }
.menu__link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 13vw, 5.5rem);
  line-height: 1.02;
}
.menu__link[aria-current="page"] { color: var(--signal); }
.menu__item { overflow: hidden; }
.menu__item > a { transform: translate3d(0, 105%, 0); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + .2s); }
.menu.is-open .menu__item > a { transform: none; }
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--text-2);
}

/* Page transition curtain & first-visit boot */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.curtain__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.25rem;
  padding: var(--gutter) var(--gutter) clamp(2.5rem, 8vh, 5rem);
  background: var(--undergrowth);
  transform: translate3d(0, 101%, 0);
}
.curtain__boot {
  list-style: none;
  display: grid;
  gap: .3rem;
  margin-bottom: auto;
  padding-top: calc(var(--header-h) - 1rem);
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-3);
}
.curtain__boot:empty { display: none; }
.curtain__boot li { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.curtain__boot b { font-weight: 500; color: var(--signal); }
.curtain__cmd { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-2); }
.curtain__prompt { color: var(--signal); }
.curtain__caret {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .2em;
  vertical-align: -.15em;
  background: var(--text-2);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.curtain__title { font-family: var(--font-display); font-size: var(--fs-xl); line-height: .9; }
.curtain__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--signal);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform .25s linear;
}

.is-booting .curtain,
.is-arriving .curtain,
.is-leaving .curtain { visibility: visible; pointer-events: auto; }
.is-booting .curtain__panel,
.is-arriving .curtain__panel { transform: none; }
.is-leaving .curtain__panel { transform: none; transition: transform .75s var(--ease-in-out); }
.is-entered .curtain__panel { transform: translate3d(0, -101%, 0); transition: transform 1s var(--ease-in-out); }

/* If main.js never runs, the curtain still clears */
.is-booting:not(.is-entered) .curtain__panel,
.is-arriving:not(.is-entered) .curtain__panel { animation: curtain-failsafe .9s var(--ease-in-out) 4s forwards; }
@keyframes curtain-failsafe { to { transform: translate3d(0, -101%, 0); } }

/* Custom cursor (fine pointers only, enabled by main.js) */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linen);
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), border-radius .45s var(--ease-out), opacity .3s, scale .3s var(--ease-out);
}
.cursor.is-visible { opacity: 1; }
.cursor.is-link { width: 46px; height: 46px; }
.cursor.is-label { width: 86px; height: 86px; mix-blend-mode: normal; }
.cursor.is-unit { width: 112px; height: 30px; border-radius: 3px; mix-blend-mode: normal; background: var(--signal); }
.cursor.is-text { opacity: 0; }
.cursor.is-down { scale: .82; }
.cursor__label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--undergrowth);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s;
}
.cursor.is-label .cursor__label, .cursor.is-unit .cursor__label { opacity: 1; transition-delay: .12s; }

.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input:not([type="radio"]):not([type="checkbox"]), .has-cursor textarea { cursor: text !important; }

/* 8. Footer ---------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--undergrowth);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.footer-cta {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 2.5rem;
  align-items: end;
  padding: var(--section) var(--gutter) clamp(3.5rem, 7vw, 6rem);
}
.footer-cta__title { grid-column: 1 / span 8; }
.footer-cta__actions {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.footer-cta__mail {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  line-height: 1.2;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .3s, color .3s;
  overflow-wrap: anywhere;
}
.footer-cta__mail:hover { color: var(--signal); border-color: var(--signal); }

.footer-grid {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 2rem;
  padding: 2.5rem var(--gutter) 3rem;
  border-top: 1px solid var(--line);
}
.footer-col:nth-child(1) { grid-column: 1 / span 3; }
.footer-col:nth-child(2) { grid-column: 5 / span 3; }
.footer-col:nth-child(3) { grid-column: 9 / -1; }
.footer-col__title { margin-bottom: 1rem; font-family: var(--font-sans); font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.footer-col__list { list-style: none; display: grid; gap: .45rem; }
.footer-col__list a { color: var(--text-2); transition: color .3s; }
.footer-col__list a:hover { color: var(--text); }
.clock { font-family: var(--font-display); font-size: var(--fs-m); line-height: 1; }
.clock__offset { margin-left: .4rem; font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); vertical-align: .9em; }
.footer-col__note { margin-top: .75rem; font-size: .875rem; color: var(--text-2); }

.footer-mark {
  padding-inline: var(--gutter);
  margin-bottom: -.08em;
  font-family: var(--font-display);
  font-size: 15vw; /* refined by fitText() in main.js */
  line-height: .9;
  white-space: nowrap;
  user-select: none;
}
.footer-mark__text { display: inline-block; will-change: transform; }

.footer-base {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gutter) 1.4rem;
  border-top: 1px solid var(--line);
  background: var(--undergrowth);
  font-size: .8125rem;
  color: var(--text-3);
}
.to-top { color: var(--text-2); transition: color .3s; }
.to-top:hover { color: var(--text); }

/* 9. Home ------------------------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 3.5rem;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem)) var(--gutter) clamp(2.5rem, 7vh, 4.5rem);
}
.hero__text {
  grid-column: 1 / span 7;
  display: grid;
  gap: clamp(1.4rem, 3vh, 2.2rem);
  align-self: end;
}
.hero__lead { max-width: 46ch; font-size: 1.125rem; color: var(--text-2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

/* The rack: services mounted as rack units */
.rack {
  grid-column: 8 / -1;
  justify-self: end;
  width: min(100%, 30.5rem);
  margin: 0;
}
.rack__cab {
  position: relative;
  padding: 1.1rem 1.5rem;
  background: var(--undergrowth);
  border: 1px solid var(--line-2);
}
.rack__cab::before, .rack__cab::after {
  content: "";
  position: absolute;
  top: .55rem; bottom: .55rem;
  width: 5px;
  background: repeating-linear-gradient(to bottom, transparent 0 6px, rgb(var(--linen-rgb) / .2) 6px 9px, transparent 9px 13px);
}
.rack__cab::before { left: .5rem; }
.rack__cab::after { right: .5rem; }
.rack__units { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.unit { min-width: 0; }
.unit__face {
  display: flex;
  align-items: center;
  gap: .7rem;
  height: 2.6rem;
  padding: 0 .6rem;
  background: var(--moss);
  border: 1px solid var(--line);
  border-top-color: rgb(var(--linen-rgb) / .2);
  transition: transform .55s var(--ease-rail), background-color .3s, border-color .3s;
}
a.unit__face:hover, a.unit__face:focus-visible {
  transform: translate3d(-12px, 0, 0);
  background: var(--moss-hi);
  border-color: var(--line-2);
}
.unit__ear {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--undergrowth);
  box-shadow: inset 0 0 0 1.5px rgb(var(--linen-rgb) / .25);
}
/* Each unit carries its pillar colour: ears, a thin edge and the LEDs */
.unit--a { --pillar: var(--signal); }
.unit--b { --pillar: var(--amber); }
.unit--a .unit__ear, .unit--b .unit__ear { box-shadow: inset 0 0 0 1.5px var(--pillar); opacity: .8; }
.unit--a .unit__face, .unit--b .unit__face { box-shadow: inset 2px 0 0 var(--pillar); }
.unit__u { flex: none; width: 1.9rem; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .02em; color: var(--text-3); }
.unit__name { flex: 1; min-width: 0; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit__vent {
  flex: none;
  width: 2.2rem;
  height: 1rem;
  background: repeating-linear-gradient(90deg, rgb(var(--linen-rgb) / .14) 0 1px, transparent 1px 4px);
}
.unit__leds { display: flex; gap: .4rem; flex: none; }
.unit__leds .led {
  width: 5px;
  height: 5px;
  color: rgb(var(--linen-rgb) / .14);
  box-shadow: none;
  transition: color .25s, box-shadow .25s;
  transition-delay: calc(var(--i, 0) * 80ms + .15s);
}
.rack.is-on .unit--a .led { color: var(--signal); box-shadow: 0 0 7px rgb(185 234 91 / .8); }
.rack.is-on .unit--b .led { color: var(--amber); box-shadow: 0 0 7px rgb(227 169 78 / .75); }
.rack.is-on .led--act { animation: led-activity var(--blink, 3s) var(--blink-delay, 0s) infinite; }
.unit--blank .unit__face {
  background: repeating-linear-gradient(90deg, rgb(var(--linen-rgb) / .06) 0 1px, transparent 1px 5px), var(--undergrowth);
  border-color: var(--line);
}
.rack__caption { display: grid; gap: .8rem; margin-top: 1.1rem; }
.rack__note { min-height: 2.9em; font-size: .875rem; color: var(--text-2); transition: color .3s; }
.rack.has-focus .rack__note { color: var(--text); }
.rack__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .8125rem; color: var(--text-3); }
.rack__legend span { display: inline-flex; align-items: center; gap: .55rem; }

/* Statement with scroll-lit words */
.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 6rem);
  row-gap: 3rem;
  align-items: center;
}
.kicker {
  margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .14em;
  color: var(--signal);
}
.statement__text {
  max-width: 21em;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.95vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: -.006em;
  text-wrap: pretty;
}
/* Highlighted phrases: brighter, in the accent colour, with a soft underline */
.statement__text .em {
  font-weight: 400;
  color: var(--signal);
  background-image: linear-gradient(rgb(185 234 91 / .35), rgb(185 234 91 / .35));
  background-size: 100% 1px;
  background-position: 0 92%;
  background-repeat: no-repeat;
}

/* Bridge illustration: hardware (left) linked to software (right) */
.bridge { margin: 0; width: 100%; max-width: 32rem; justify-self: end; }
.bridge svg { width: 100%; height: auto; overflow: visible; }
.br-unit { fill: var(--undergrowth); stroke: rgb(227 169 78 / .55); stroke-width: 1; }
.br-vent { stroke: rgb(var(--linen-rgb) / .14); stroke-width: 1; }
.br-led--b { fill: var(--amber); }
.br-win { fill: var(--undergrowth); stroke: rgb(185 234 91 / .5); stroke-width: 1; }
.br-bar { stroke: rgb(185 234 91 / .25); stroke-width: 1; }
.br-dot { fill: rgb(var(--linen-rgb) / .3); }
.br-code { stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 50%; }
.br-code--k { stroke: rgb(185 234 91 / .75); }
.br-code--s { stroke: rgb(var(--linen-rgb) / .35); }
.br-arch { fill: none; stroke: url(#br-grad); stroke-width: 1.5; stroke-linecap: round; }
.br-deck { fill: none; stroke: url(#br-grad); stroke-width: 1; opacity: .5; stroke-dasharray: 2 6; }
.br-hanger { stroke: rgb(var(--linen-rgb) / .14); stroke-width: 1; }
.br-pad { fill: var(--canopy); stroke-width: 1.25; }
.br-pad--b { stroke: var(--amber); }
.br-pad--a { stroke: var(--signal); }
.br-spark { fill: var(--linen); filter: url(#br-glow); opacity: 0; }
.br-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-3); letter-spacing: .04em; }

/* Two-column proof: AI on the left, system administration on the right */
.feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.feats__col { position: relative; padding-top: 2rem; }
.feats__col + .feats__col { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--line); }
.feats__col:first-child { padding-right: clamp(1.5rem, 3vw, 3rem); }
.feats__col--a { --pillar: var(--signal); }
.feats__col--b { --pillar: var(--amber); }
.feats__bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pillar); }
.feats__title { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; font-family: var(--font-display); font-size: var(--fs-s); line-height: 1.1; }
.feats__list { list-style: none; border-bottom: 1px solid var(--line); }
.feat { display: grid; gap: .35rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.feat__name { font-size: 1.0625rem; font-weight: 500; color: var(--text); }
.feat__text { font-size: .9375rem; color: var(--text-2); max-width: 52ch; }
.sw { transition: opacity .25s linear; }
.facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--line);
}
.fact {
  display: flex;
  gap: .9rem;
  padding: 1.5rem 2rem 0 0;
  font-size: 1rem;
  color: var(--text-2);
}
.fact + .fact { padding-left: 2rem; border-left: 1px solid var(--line); }
.fact .led { margin-top: .55em; }

/* Two pillars */
.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter) var(--section);
  overflow: hidden;
}
.pillar + .pillar { border-left: 1px solid var(--line); }
.pillar--a { --pillar: var(--signal); }
.pillar--b { --pillar: var(--amber); }
.pillar__bar {
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--pillar);
}
.pillar__letter {
  display: block;
  margin-bottom: -.3em;
  font-family: var(--font-display);
  font-size: clamp(9rem, 19vw, 19rem);
  line-height: .8;
  color: rgb(var(--linen-rgb) / .085);
  user-select: none;
}
.pillar__title { position: relative; max-width: 12em; margin-bottom: 1.75rem; }
.pillar__text { max-width: 44ch; margin-bottom: 2.5rem; color: var(--text-2); }
.pillar__list { list-style: none; margin-bottom: 2.75rem; border-bottom: 1px solid var(--line); }
.pillar__list li {
  display: flex;
  gap: .9rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}
.pillar__list li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: .62em;
  background: var(--pillar);
}
.pillar .link { align-self: flex-start; margin-top: auto; }

/* Selected work */
.work-list { list-style: none; border-bottom: 1px solid var(--line); }
.work-item { border-top: 1px solid var(--line); }
.work-item__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.1rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  width: 100%;
  padding: clamp(1.25rem, 2.3vw, 1.9rem) 0;
  text-align: left;
}
.work-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.3vw, 3.3rem);
  line-height: 1.05;
  transition: transform .6s var(--ease-rail), color .3s;
}
.work-item__toggle:hover .work-item__title { transform: translate3d(.7rem, 0, 0); }
.work-item__meta { display: inline-flex; align-items: center; gap: .65rem; font-size: .875rem; color: var(--text-2); white-space: nowrap; }
.work-item__body {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 1.5rem;
  padding: 0 0 2.25rem;
}
.work-item__text { grid-column: 1 / span 6; max-width: 58ch; color: var(--text-2); }
.specs { grid-column: 8 / -1; display: grid; gap: 1rem; font-size: .9375rem; }
.specs dt { margin-bottom: .2rem; font-size: .8125rem; color: var(--text-3); }

/* 10. Services ------------------------------------------------------------- */
.jump { display: flex; flex-wrap: wrap; gap: .6rem; }
.jump__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1rem;
  border: 1px solid var(--line-2);
  font-size: .875rem;
  transition: background-color .3s, border-color .3s;
}
.jump__link:hover { background: var(--moss); border-color: var(--linen); }

.service-group {
  position: relative;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter) var(--section);
  border-top: 1px solid var(--line);
}
.service-group--a { --pillar: var(--signal); }
.service-group--b { --pillar: var(--amber); }
.service-group__head {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}
.service-group__letter {
  grid-column: 1 / span 2;
  font-family: var(--font-display);
  font-size: clamp(6rem, 11vw, 11.5rem);
  line-height: .78;
  color: rgb(var(--linen-rgb) / .08);
  user-select: none;
}
.service-group__title { grid-column: 3 / span 6; }
.service-group__intro { grid-column: 9 / -1; max-width: 40ch; color: var(--text-2); }

.service-list { list-style: none; border-bottom: 1px solid var(--line); }
.service {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: .9rem;
  padding: clamp(1.5rem, 2.5vw, 2.1rem) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.service__name {
  grid-column: 1 / span 4;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-s);
  line-height: 1.1;
}
.service__name::before {
  content: "";
  position: absolute;
  top: .5em;
  left: -1.1rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pillar);
  box-shadow: 0 0 8px var(--pillar);
  opacity: 0;
  transition: opacity .4s;
}
.service:target .service__name::before,
.service:hover .service__name::before { opacity: 1; }
.service__text { grid-column: 5 / span 5; max-width: 54ch; color: var(--text-2); }
.service__stack { grid-column: 10 / -1; font-size: .875rem; color: var(--text-3); }
.service__stack strong { display: block; margin-bottom: .2rem; font-weight: 500; color: var(--text-2); }

/* Project tiers */
.tiers__head {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 1.75rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
}
.tiers__title { grid-column: 1 / span 6; }
.tiers__text { grid-column: 7 / span 4; max-width: 40ch; color: var(--text-2); }
.tabs {
  grid-column: 1 / -1;
  display: inline-flex;
  justify-self: start;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-2);
}
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1.15rem;
  font-size: .9375rem;
  color: var(--text-2);
  transition: background-color .4s var(--ease-out), color .4s;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { background: var(--moss-hi); color: var(--text); }

.tier-rack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--undergrowth);
  border: 1px solid var(--line-2);
  overflow-x: clip; /* tiers slide in from behind the rack edge */
}
.tiers__panel[hidden] { display: none; }
.tiers__panel--a { --pillar: var(--signal); --pillar-glow: rgb(185 234 91 / .8); }
.tiers__panel--b { --pillar: var(--amber); --pillar-glow: rgb(227 169 78 / .75); }
.tier {
  --pad: clamp(1.25rem, 2.3vw, 2.1rem);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad) 2.1rem;
}
.tier + .tier { border-left: 1px solid var(--line); }
.tier--featured { background: rgb(var(--linen-rgb) / .025); }
.tier--featured::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--pillar);
}
.tier__face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 2.6rem;
  margin: 0 calc(var(--pad) * -1) 2.2rem;
  padding: 0 .9rem;
  background: var(--moss);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--text-3);
}
.tier__leds { display: flex; gap: .35rem; }
.tier__leds .led {
  width: 5px;
  height: 5px;
  color: rgb(var(--linen-rgb) / .14);
  transition: color .3s, box-shadow .3s;
  transition-delay: calc(var(--n, 0) * 90ms + .5s);
}
.tier.is-in .tier__leds .led { color: var(--pillar); box-shadow: 0 0 7px var(--pillar-glow); }
.tier__badge { margin-left: auto; font-family: var(--font-sans); font-size: .75rem; color: var(--pillar); }
.tier__name { font-family: var(--font-display); font-size: var(--fs-m); line-height: 1; }
.tier__summary { margin: .7rem 0 1.9rem; color: var(--text-2); }
.tier__price { font-family: var(--font-display); font-size: clamp(2.4rem, 3.5vw, 3.6rem); line-height: 1; }
.tier__from { margin-right: .35rem; font-family: var(--font-sans); font-size: .875rem; color: var(--text-3); }
.tier__per { margin-left: .3rem; font-family: var(--font-sans); font-size: .875rem; color: var(--text-3); }
.tier__time {
  margin: .9rem 0 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
  color: var(--text-2);
}
.tier__list { list-style: none; display: grid; gap: .75rem; margin-bottom: 2.4rem; font-size: .9375rem; }
.tier__list li { display: flex; gap: .8rem; }
.tier__list li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: .6em;
  background: var(--pillar);
}
.tier__cta { margin-top: auto; align-self: flex-start; }

/* Tiers slide into the rack like servers on rails */
.motion-ready .tier { opacity: 0; transform: translate3d(3rem, 0, 0); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-rail); transition-delay: calc(var(--n, 0) * 110ms); }
.motion-ready .tier.is-in { opacity: 1; transform: none; }

.tiers__note { max-width: 70ch; margin-top: 1.5rem; font-size: .875rem; color: var(--text-3); }

/* FAQ */
.faq { display: grid; grid-template-columns: var(--grid); column-gap: var(--gutter); row-gap: 2.5rem; }
.faq__title { grid-column: 1 / span 4; }
.faq__list { grid-column: 6 / -1; border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 500;
}
.faq-item__a { padding: 0 3rem 1.75rem 0; max-width: 62ch; color: var(--text-2); }

/* 11. Process -------------------------------------------------------------- */
.steps { position: relative; border-top: 1px solid var(--line); }
.steps__sticky { position: relative; }
.steps__rail, .steps__count { display: none; }
.steps__track { position: relative; list-style: none; padding: 0 var(--gutter); }
.steps:not(.is-horizontal) .steps__track::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--gutter) / 2);
  width: 1px;
  background: var(--line);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 1rem;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--line);
}
.step__num {
  grid-column: 1 / span 3;
  grid-row: 1 / span 3;
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 12vw, 12.5rem);
  line-height: .8;
  color: rgb(var(--linen-rgb) / .1);
  transition: color .8s var(--ease-out);
  user-select: none;
}
.step.is-active .step__num { color: rgb(var(--linen-rgb) / .22); }
.step__title { grid-column: 4 / span 6; font-family: var(--font-display); font-size: var(--fs-m); line-height: 1; }
.step__text { grid-column: 4 / span 6; max-width: 52ch; color: var(--text-2); }
.step__meta { grid-column: 4 / span 7; display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; margin-top: .75rem; font-size: .9375rem; }
.step__meta dt { margin-bottom: .2rem; font-size: .8125rem; color: var(--text-3); }
.step__node {
  position: absolute;
  top: clamp(2.5rem, 5vw, 4rem);
  left: calc(var(--gutter) / -2 - 3px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--linen-rgb) / .18);
  transition: background-color .4s, box-shadow .4s;
}
.step.is-active .step__node { background: var(--signal); box-shadow: 0 0 9px rgb(185 234 91 / .8); }

/* Desktop: the six steps travel horizontally while the section is pinned */
.steps.is-horizontal .steps__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.steps.is-horizontal .steps__rail {
  display: flex;
  position: absolute;
  top: calc(var(--header-h) + 2.25rem);
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line-2);
}
.steps__fill {
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.steps__dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--undergrowth);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .4s, box-shadow .4s;
}
.steps__dot.is-active { background: var(--signal); box-shadow: 0 0 9px rgb(185 234 91 / .8); }
.steps.is-horizontal .steps__count { display: block; }
.steps__count {
  position: absolute;
  top: calc(var(--header-h) + 3.25rem);
  right: var(--gutter);
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-3);
}
.steps.is-horizontal .steps__track {
  display: flex;
  width: max-content;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 0;
  will-change: transform;
}
.steps.is-horizontal .step {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: clamp(24rem, 36vw, 35rem);
  padding: 0 clamp(2rem, 4vw, 4.5rem) 0 2rem;
  border-bottom: 0;
  border-left: 1px solid var(--line);
}
.steps.is-horizontal .step__num { display: block; margin-bottom: 1.25rem; will-change: transform; }
.steps.is-horizontal .step__node { display: none; }
.steps.is-horizontal .step__meta { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

.principles__list {
  grid-column: 6 / -1;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.principle { padding: 2rem 2rem 2.5rem 0; border-bottom: 1px solid var(--line); }
.principle:nth-child(even) { padding-left: 2rem; padding-right: 0; border-left: 1px solid var(--line); }
.principle__title { margin-bottom: .8rem; font-family: var(--font-display); font-size: var(--fs-s); line-height: 1.1; }
.principle__text { color: var(--text-2); max-width: 40ch; }
.principles__title { grid-column: 1 / span 4; }

/* 12. About ---------------------------------------------------------------- */
.bio {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 3rem;
  padding: 0 var(--gutter) var(--section);
}
.portrait {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  margin: 0;
}
.portrait__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--moss);
  border: 1px solid var(--line-2);
}
.portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .9s var(--ease-out), transform 1.4s var(--ease-out);
}
.portrait__img--color { opacity: 0; }
.portrait:hover .portrait__img--color { opacity: 1; }
.portrait:hover .portrait__img { transform: scale(1.025); }
.portrait__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-size: .8125rem; color: var(--text-3); }

.bio__text { grid-column: 6 / span 7; }
.bio__lead { margin-bottom: 2.25rem; font-family: var(--font-display); font-size: clamp(1.8rem, 2.8vw, 2.8rem); line-height: 1.14; }
.bio__p { max-width: 60ch; margin-bottom: 1.25rem; color: var(--text-2); }

.facts-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}
.facts-list > div { padding: 1.2rem 1.25rem 1.2rem 0; border-bottom: 1px solid var(--line); }
.facts-list > div:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.facts-list dt { margin-bottom: .25rem; font-size: .8125rem; color: var(--text-3); }

.roles { list-style: none; border-bottom: 1px solid var(--line); }
.role {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--line);
}
.role__years { grid-column: 1 / span 3; font-family: var(--font-display); font-size: var(--fs-s); line-height: 1.1; }
.role__body { grid-column: 4 / span 8; }
.role__title { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.role__org { margin-top: .2rem; color: var(--text-3); }
.role__list { list-style: none; display: grid; gap: .6rem; margin-top: 1.25rem; color: var(--text-2); max-width: 70ch; }
.role__list li { display: flex; gap: .85rem; }
.role__list li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: .65em;
  background: var(--amber);
}
.education { margin-top: clamp(3rem, 6vw, 5rem); }
.education__title { margin-bottom: 1.25rem; font-size: .8125rem; font-weight: 500; color: var(--text-3); font-family: var(--font-sans); }

.toolkit {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.tool-group { padding: 1.9rem 1.5rem 2.25rem 0; }
.tool-group + .tool-group { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.tool-group__title { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-size: var(--fs-s); line-height: 1.1; }
.tool-group__list { list-style: none; display: grid; gap: .5rem; margin-top: 1.25rem; color: var(--text-2); font-size: .9375rem; }

/* 13. Contact -------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 4rem;
  padding: 0 var(--gutter) var(--section);
}
.form { grid-column: 1 / span 7; display: grid; gap: 2.4rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem var(--gutter); }
.field { display: grid; gap: .4rem; }
.field__label { font-size: .875rem; color: var(--text-2); }
.field__opt { color: var(--text-3); }
.field__input {
  width: 100%;
  padding: .45rem 0 .75rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  line-height: 1.2;
  transition: border-color .3s, box-shadow .3s;
}
.field__input::placeholder { color: var(--text-3); }
.field__input:focus { outline: none; border-color: var(--signal); box-shadow: 0 1px 0 var(--signal); }
.field__input--area {
  min-height: 9rem;
  resize: vertical;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.field__error { min-height: 1.25em; font-size: .8125rem; color: var(--alert); }
.field.is-invalid .field__input { border-color: var(--alert); }

.choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: .9rem; }
.choice__options { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.pill > span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.05rem;
  border: 1px solid var(--line-2);
  font-size: .9375rem;
  color: var(--text-2);
  transition: background-color .3s, color .3s, border-color .3s;
}
.pill:hover > span { color: var(--text); border-color: var(--linen); }
.pill input:checked + span { background: var(--linen); border-color: var(--linen); color: var(--undergrowth); }
.pill input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 3px; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.form__status { font-size: .9375rem; color: var(--text-2); }
.form__status.is-error { color: var(--alert); }
.form__status.is-success { color: var(--signal); }
.form__tier { display: flex; align-items: center; gap: .7rem; font-size: .9375rem; color: var(--text-2); }
.form__tier[hidden] { display: none; }

.direct { grid-column: 9 / -1; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
.direct__title { font-family: var(--font-display); font-size: var(--fs-s); line-height: 1.1; }
.direct__list { list-style: none; margin: 1.5rem 0 2.25rem; border-top: 1px solid var(--line); }
.direct__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.direct__link { flex: 1; min-width: 0; display: grid; gap: .1rem; padding: 1rem 0; }
.direct__k { font-size: .8125rem; color: var(--text-3); }
.direct__v { font-size: 1.0625rem; overflow-wrap: anywhere; transition: color .3s; }
.direct__link:hover .direct__v { color: var(--signal); }
.copy {
  flex: none;
  padding: .4rem .75rem;
  border: 1px solid var(--line-2);
  font-size: .8125rem;
  color: var(--text-2);
  transition: color .3s, border-color .3s;
}
.copy:hover, .copy.is-done { color: var(--signal); border-color: var(--signal); }
.direct__time { font-size: .9375rem; color: var(--text-2); }
.direct__time strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--text); margin-left: .35rem; }
.direct__note { margin-top: .6rem; font-size: .875rem; color: var(--text-3); }

/* 14. Responsive ----------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__text { grid-column: 1 / span 6; }
  .rack { grid-column: 7 / -1; }
}

@media (max-width: 1180px) {
  .site-nav__list { gap: 1.25rem; }
  .site-header__cta { display: none; }
}

@media (max-width: 1023px) {
  :root { --header-h: 4rem; }

  .site-nav, .site-header__cta { display: none; }
  .menu-toggle { display: inline-block; }
  .site-header__tools { margin-left: auto; }

  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: calc(var(--header-h) + 3.5rem); }
  .hero__text, .rack { grid-column: 1 / -1; }
  .rack { justify-self: start; width: min(100%, 32rem); }

  .section-head__title, .section-head__text,
  .page-hero__title, .page-hero__aside,
  .footer-cta__title, .footer-cta__actions,
  .service-group__title, .service-group__intro,
  .tiers__title, .tiers__text,
  .faq__title, .faq__list,
  .principles__title, .principles__list,
  .form, .direct,
  .portrait, .bio__text { grid-column: 1 / -1; }
  .service-group__letter { grid-column: 1 / -1; }
  .portrait { position: relative; top: 0; max-width: 26rem; }
  .direct { position: static; }

  .pillars { grid-template-columns: 1fr; }
  .statement__grid { grid-template-columns: 1fr; }
  .bridge { justify-self: start; max-width: 28rem; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--line); }

  .tier-rack { grid-template-columns: 1fr; }
  .tier + .tier { border-left: 0; border-top: 1px solid var(--line-2); }

  .service__name { grid-column: 1 / -1; }
  .service__text { grid-column: 1 / span 8; }
  .service__stack { grid-column: 9 / -1; }

  .work-item__text, .specs { grid-column: 1 / -1; }

  .footer-col:nth-child(1) { grid-column: 1 / span 6; }
  .footer-col:nth-child(2) { grid-column: 7 / -1; }
  .footer-col:nth-child(3) { grid-column: 1 / -1; }

  .toolkit { grid-template-columns: 1fr 1fr; }
  .tool-group:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tool-group:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .role__years { grid-column: 1 / -1; }
  .role__body { grid-column: 1 / -1; }

  .step__num { grid-column: 1 / -1; grid-row: auto; }
  .step__title, .step__text, .step__meta { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .wordmark__role { display: none; }

  .hero__lead, .page-hero__lead { font-size: 1.0625rem; }

  .facts { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr; }
  .feats__col:first-child { padding-right: 0; }
  .feats__col + .feats__col { margin-top: 3rem; padding-left: 0; border-left: 0; }
  .fact, .fact + .fact { padding: 1.1rem 0; border-left: 0; }
  .fact + .fact { border-top: 1px solid var(--line); }

  .unit__vent { display: none; }
  .rack__cab { padding: 1rem 1.15rem; }
  .unit__face { gap: .55rem; padding: 0 .5rem; }
  .unit__u { width: 1.7rem; }
  .unit__name { font-size: .8125rem; }

  .work-item__toggle { grid-template-columns: minmax(0, 1fr) 1.1rem; }
  .work-item__meta { grid-column: 1; grid-row: 2; }
  .work-item__toggle .plus { grid-column: 2; grid-row: 1 / span 2; }

  .service__text, .service__stack { grid-column: 1 / -1; }

  .form__row { grid-template-columns: 1fr; }

  .principles__list { grid-template-columns: 1fr; }
  .principle, .principle:nth-child(even) { padding: 1.75rem 0 2rem; border-left: 0; }

  .facts-list { grid-template-columns: 1fr; }
  .facts-list > div:nth-child(even) { padding-left: 0; border-left: 0; }

  .toolkit { grid-template-columns: 1fr; }
  .tool-group, .tool-group + .tool-group { padding: 1.75rem 0 2rem; border-left: 0; }
  .tool-group + .tool-group { border-top: 1px solid var(--line); }

  .footer-col:nth-child(1), .footer-col:nth-child(2) { grid-column: 1 / -1; }
  .footer-base { flex-direction: column; }

  .faq-item__a { padding-right: 0; }
}

@media (max-width: 380px) {
  .unit__u { display: none; }
}

/* 15. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   16. Home additions: use-case flows, pillar icons, work typing, footer CTA
   ========================================================================== */

/* Use-case flows: code bubbles wired to a robot (AI) and a server (sysadmin) */
.flows { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 5rem; margin-top: clamp(4rem, 8vw, 7rem); }
.flow { position: relative; padding-top: 2rem; }
.flow--a { --pillar: var(--signal); --pillar-rgb: 185 234 91; }
.flow--b { --pillar: var(--amber); --pillar-rgb: 227 169 78; }
.flow__bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pillar); }
.flow__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.flow__title { display: flex; align-items: center; gap: .8rem; font-family: var(--font-display); font-size: var(--fs-s); line-height: 1.1; }
.flow__sub { font-size: .875rem; color: var(--text-3); }
.flow__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(3rem, 6vw, 7rem) clamp(8.5rem, 11vw, 11.5rem);
  align-items: center;
  margin-top: 2.25rem;
}
.flow--b .flow__body { grid-template-columns: clamp(8.5rem, 11vw, 11.5rem) clamp(3rem, 6vw, 7rem) minmax(0, 1fr); }
.flow__list { grid-column: 1; grid-row: 1; position: relative; z-index: 1; list-style: none; display: grid; gap: .85rem; }
.flow--b .flow__list { grid-column: 3; }
.flow__art { grid-column: 3; grid-row: 1; position: relative; z-index: 1; color: var(--pillar); transition: filter .4s; }
.flow--b .flow__art { grid-column: 1; }
.flow__art.is-hot { filter: drop-shadow(0 0 10px rgb(var(--pillar-rgb) / .35)); }
.flow__art svg { width: 100%; height: auto; overflow: visible; }

.flow__item {
  position: relative;
  display: grid;
  gap: .35rem;
  padding: .85rem 1.05rem .95rem;
  background: var(--undergrowth);
  border: 1px solid rgb(var(--pillar-rgb) / .22);
  border-radius: 8px;
  transition: border-color .35s, transform .5s var(--ease-out), background-color .35s;
}
.flow__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--canopy);
  border: 1.5px solid var(--pillar);
  transform: translateY(-50%);
}
.flow--b .flow__item::after { right: auto; left: -5px; }
.flow__item:hover { border-color: rgb(var(--pillar-rgb) / .7); background: #13201a; transform: translate3d(6px, 0, 0); }
.flow--b .flow__item:hover { transform: translate3d(-6px, 0, 0); }
.flow__when { font-family: var(--font-mono); font-size: .75rem; color: var(--pillar); }
.flow__what { font-size: .9375rem; line-height: 1.5; color: var(--text); }

.flow__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .5s; }
.flow.is-in .flow__links { opacity: 1; }
.fl-path { fill: none; stroke: var(--pillar); stroke-opacity: .42; stroke-width: 1.25; stroke-dasharray: 3 6; stroke-linecap: round; animation: fl-flow 1.1s linear infinite; transition: stroke-opacity .3s, stroke-width .3s; }
.fl-path.is-hot { stroke-opacity: 1; stroke-width: 1.75; }
.fl-port { fill: var(--pillar); }
@keyframes fl-flow { to { stroke-dashoffset: -9; } }

/* Robot */
.rb-s { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: .75; }
.rb-f { fill: rgb(185 234 91 / .05); }
.rb-visor { fill: rgb(15 25 19 / .85); stroke: currentColor; stroke-opacity: .5; stroke-width: 1.25; }
.rb-eye { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: rb-blink 4.6s infinite; }
.rb-antenna { fill: currentColor; animation: led-pulse 1.8s ease-in-out infinite; filter: drop-shadow(0 0 4px currentColor); }
.rb-panel { fill: none; stroke: currentColor; stroke-opacity: .35; stroke-width: 1.25; }
.rb-pulse { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 100 100; animation: rb-beat 2.4s linear infinite; }
.rb-btn { fill: currentColor; opacity: .35; animation: led-activity 3s var(--d, 0s) infinite; }
.rb-float { animation: rb-float 5s ease-in-out infinite; }
.rb-shadow { fill: rgb(185 234 91 / .08); }
.flow__art.is-hot .rb-eye { filter: drop-shadow(0 0 5px currentColor); }
@keyframes rb-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes rb-beat { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes rb-float { 50% { transform: translateY(-4px); } }

/* Server tower */
.tw-s { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: .75; }
.tw-f { fill: rgb(227 169 78 / .05); }
.tw-vent { stroke: currentColor; stroke-opacity: .25; stroke-width: 1; }
.tw-screen { fill: rgb(227 169 78 / .07); stroke: currentColor; stroke-opacity: .4; stroke-width: 1; }
.tw-scan { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 22 78; animation: tw-scan 2.6s linear infinite; }
.tw-led { fill: currentColor; animation: led-activity var(--b, 3s) var(--d, 0s) infinite; }
.tw-shadow { fill: rgb(227 169 78 / .08); }
.flow__art.is-hot .tw-led { filter: drop-shadow(0 0 4px currentColor); }
@keyframes tw-scan { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Pillar icons: neural network (AI) and office network topology (sysadmin) */
.pillar__icon { display: block; width: clamp(11rem, 17vw, 15rem); margin-bottom: 2.25rem; color: var(--pillar); }
.pillar__icon svg { width: 100%; height: auto; overflow: visible; }
.nn-e { stroke: currentColor; stroke-width: 1; stroke-opacity: .12; animation: nn-edge 2.8s var(--d, 0s) infinite; }
.nn-n { fill: var(--canopy); stroke: currentColor; stroke-width: 1.5; animation: nn-node 2.8s var(--d, 0s) infinite; }
@keyframes nn-edge { 0%, 40%, 100% { stroke-opacity: .12; } 12% { stroke-opacity: .65; } }
@keyframes nn-node { 0%, 35%, 100% { fill: var(--canopy); } 10% { fill: currentColor; } }
.tp-s { fill: rgb(227 169 78 / .05); stroke: currentColor; stroke-width: 1.5; stroke-opacity: .75; }
.tp-l { fill: none; stroke: currentColor; stroke-opacity: .3; stroke-width: 1.25; }
.tp-screen { fill: currentColor; opacity: .12; animation: tp-screen 3.2s var(--d, 0s) ease-in-out infinite; }
.tp-port, .tp-led { fill: currentColor; animation: led-activity 2.8s var(--d, 0s) infinite; }
.tp-pk { fill: currentColor; filter: drop-shadow(0 0 3px currentColor); }
@keyframes tp-screen { 50% { opacity: .32; } }

/* Work list: smaller headings that type themselves in */
.work-item__title { font-size: clamp(1.35rem, 2vw, 2.1rem); }
[data-type] { position: relative; }
.ty-ghost { visibility: hidden; }
.ty-live { position: absolute; inset: 0; }
.ty-live[data-typing]::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: .8em;
  margin-left: 3px;
  vertical-align: -.05em;
  background: var(--signal);
  animation: caret 1s steps(1) infinite;
}
.ty-armed [data-type]:not(.ty-on) { visibility: hidden; }

/* Footer CTA: centred orb with pings and a rotating ring, glow, sweeping top rule */
.footer-cta { position: relative; }
.footer-cta::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), var(--amber), transparent);
  animation: cta-sweep 7s linear infinite;
}
@keyframes cta-sweep { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
.footer-cta__actions { position: relative; isolation: isolate; align-items: center; text-align: center; gap: 1.6rem; }
.footer-cta__glow {
  position: absolute;
  top: 6.5rem;
  left: 50%;
  z-index: -1;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(185 234 91 / .1), transparent 62%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: cta-breathe 6s ease-in-out infinite;
}
@keyframes cta-breathe { 50% { opacity: .55; transform: translate(-50%, -50%) scale(.9); } }
.cta-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(12rem, 15vw, 15rem);
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
}
.cta-orb__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: orb-spin 26s linear infinite; }
.cta-orb__ring text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; fill: var(--text-2); }
.cta-orb__core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 66%;
  aspect-ratio: 1;
  padding: .75rem;
  border-radius: 50%;
  background: var(--moss);
  border: 1px solid rgb(185 234 91 / .45);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  box-shadow: inset 0 0 24px rgb(185 234 91 / .06);
  transition: background-color .5s, color .5s, border-color .5s, transform .7s var(--ease-spring), box-shadow .5s;
}
.cta-orb:hover .cta-orb__core, .cta-orb:focus-visible .cta-orb__core {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--undergrowth);
  transform: scale(1.08);
  box-shadow: 0 0 46px rgb(185 234 91 / .35);
}
.cta-orb:hover .led { color: var(--undergrowth); box-shadow: none; }
.cta-orb__ping {
  position: absolute;
  inset: 17%;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgb(185 234 91 / .55);
  animation: orb-ping 3.2s cubic-bezier(.2, .6, .4, 1) infinite;
}
.cta-orb__ping--2 { animation-delay: 1.6s; }
.cta-orb:hover .cta-orb__ping { animation-play-state: paused; opacity: 0; }
@keyframes orb-ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes orb-spin { to { transform: rotate(360deg); } }
.footer-cta__status { justify-content: center; }

/* Footer pages list in two short columns so it ends level with the clock */
.footer-col:first-child .footer-col__list { grid-auto-flow: column; grid-template-rows: repeat(3, auto); justify-content: start; column-gap: 3rem; }

@media (min-width: 1280px) {
  .flows { grid-template-columns: 1fr 1fr; }
  .flow--a { padding-right: clamp(2rem, 3vw, 3.5rem); }
  .flow--b { padding-left: clamp(2rem, 3vw, 3.5rem); border-left: 1px solid var(--line); }
}
@media (max-width: 1023px) {
  .footer-cta__actions { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .flow__body, .flow--b .flow__body { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .flow__art, .flow--b .flow__art { grid-column: 1; grid-row: 1; width: 8.5rem; }
  .flow__list, .flow--b .flow__list { grid-column: 1; grid-row: 2; }
  .flow__links { display: none; }
  .flow__item::after { display: none; }
}

/* Round 3 ------------------------------------------------------------------ */

/* Statement: equal space above (section rule) and below (pillar bars) */
.flows { margin-top: var(--section); }

/* Pillars: both columns line up row by row; bigger copy; round glowing dots */
.pillar--a { --pillar-rgb: 185 234 91; }
.pillar--b { --pillar-rgb: 227 169 78; }
.pillar__text { font-size: 1.1875rem; line-height: 1.6; max-width: 46ch; }
.pillar__list li { font-size: 1.125rem; padding: 1.05rem 0; align-items: flex-start; }
.pillar__list li::before {
  width: 7px;
  height: 7px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--pillar);
  box-shadow: 0 0 9px rgb(var(--pillar-rgb) / .7);
  animation: led-pulse 2.8s ease-in-out infinite;
}
.pillar__list li:nth-child(2)::before { animation-delay: -.9s; }
.pillar__list li:nth-child(3)::before { animation-delay: -1.8s; }
@media (min-width: 1024px) {
  .pillars { grid-template-rows: repeat(5, auto); }
  .pillar { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
  .pillar__title { max-width: none; align-self: start; }
  .pillar .link { align-self: end; justify-self: start; margin-top: 0; }
}

/* Work: titles in the sans face, with a quiet animated backdrop */
.work-item__title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.2rem, 1.7vw, 1.75rem); letter-spacing: -.01em; }
.work-section { position: relative; isolation: isolate; overflow: hidden; }
.work-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgb(var(--linen-rgb) / .1) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 62% 55%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 62% 55%, #000 25%, transparent 78%);
}
.work-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgb(185 234 91 / .05) 75%, rgb(185 234 91 / .14));
  animation: work-scan 10s linear infinite;
}
@keyframes work-scan { to { transform: translateY(433%); } }
.work-bg i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  opacity: 0;
  animation: work-blink var(--t, 4s) var(--d, 0s) ease-in-out infinite;
}
@keyframes work-blink { 0%, 100% { opacity: 0; } 45%, 55% { opacity: .9; } }

/* Footer CTA: heading and orb sit in the vertical middle of the band */
.footer-cta { align-items: center; padding-block: clamp(5rem, 9vw, 8.5rem); }

/* Code rain along the left and right edges (wide screens only) */
.rain { position: fixed; top: 0; z-index: -1; width: clamp(64px, 6.5vw, 128px); height: 100vh; pointer-events: none; opacity: .32; }
.rain--l { left: 0; -webkit-mask-image: linear-gradient(to right, #000 25%, transparent); mask-image: linear-gradient(to right, #000 25%, transparent); }
.rain--r { right: 0; -webkit-mask-image: linear-gradient(to left, #000 25%, transparent); mask-image: linear-gradient(to left, #000 25%, transparent); }
@media (max-width: 1099px) { .rain { display: none; } }

/* Round 4 ------------------------------------------------------------------ */

/* Code rain: narrower, stays in the corners */
.rain { width: clamp(40px, 4vw, 78px); opacity: .3; }
.rain--l { -webkit-mask-image: linear-gradient(to right, #000 15%, transparent 95%); mask-image: linear-gradient(to right, #000 15%, transparent 95%); }
.rain--r { -webkit-mask-image: linear-gradient(to left, #000 15%, transparent 95%); mask-image: linear-gradient(to left, #000 15%, transparent 95%); }

/* Footer CTA: the three verbs light up one after another */
.cv { white-space: nowrap; animation: cv-glow 7.5s ease-in-out infinite; }
.cv-p { color: var(--text); }
.cv--2 { animation-delay: 2.5s; }
.cv--3 { animation-delay: 5s; }
@keyframes cv-glow { 0%, 40%, 100% { color: inherit; } 8%, 30% { color: var(--signal); } }

/* Footer grid: columns sit closer, a small status terminal fills the right */
@media (min-width: 1024px) {
  .footer-col:nth-child(1) { grid-column: 1 / span 2; }
  .footer-col:nth-child(2) { grid-column: 3 / span 3; }
  .footer-col:nth-child(3) { grid-column: 6 / span 3; }
  .footer-term { grid-column: 9 / -1; }
}
@media (max-width: 1023px) { .footer-term { grid-column: 1 / -1; } }
.footer-term {
  align-self: start;
  padding: 1rem 1.15rem 1.1rem;
  background: rgb(15 25 19 / .7);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.9;
  color: var(--text-2);
}
.footer-term__cmd { color: var(--text-3); }
.footer-term__cmd b { font-weight: 400; color: var(--signal); }
.footer-term__row { display: flex; align-items: center; gap: .7rem; }
.footer-term__row span:first-of-type { flex: 1; }
.footer-term__row em { font-style: normal; color: var(--text); }
.footer-term__caret { display: inline-block; width: .55em; height: 1em; margin-left: .25em; vertical-align: -.15em; background: var(--text-2); animation: caret 1s steps(1) infinite; }
@keyframes term-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Round 5: circuit traces behind the footer CTA ----------------------------- */
.footer-cta { isolation: isolate; overflow: hidden; }
.cta-circuit {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 35%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 35%, transparent 85%);
}
.cc-trace { fill: none; stroke: rgb(var(--linen-rgb) / .07); stroke-width: 1; }
.cc-pad { fill: var(--undergrowth); stroke: rgb(var(--linen-rgb) / .14); stroke-width: 1; }
.cc-trace { transition: stroke .6s ease; }
.cc-trace.is-live { stroke: rgb(185 234 91 / .22); transition-duration: .3s; }
.cc-current { fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgb(185 234 91 / .9)) drop-shadow(0 0 10px rgb(185 234 91 / .45)); }
.cc-pad.is-live { stroke: var(--signal); fill: rgb(185 234 91 / .35); filter: drop-shadow(0 0 4px rgb(185 234 91 / .8)); transition: all .3s; }

/* Round 6: word masks keep room for capital diacritics (Š, Ž, Č, Ć) */
.w { padding-top: .3em; margin-top: -.3em; }

/* ==========================================================================
   Round 7 — smooth footer gradient (all sizes) + mobile refinements
   ========================================================================== */
html .site-footer { background: linear-gradient(to bottom, var(--canopy) 0%, #131d17 9rem, var(--undergrowth) 22rem); border-top-color: transparent; }
html .site-footer .footer-cta::before { display: none; }

/* "Paketi" icon (tiers heading + jump button) */
html .tiers__title { display: flex; align-items: center; gap: .9rem; }
html .tiers__title::before, html .jump__link[href="#tiers"]::before {
  content: ""; flex: none; width: .9em; height: .9em; background: var(--signal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M12 2.8 20.5 7.5v9L12 21.2 3.5 16.5v-9z'/><path d='M3.5 7.5 12 12.2l8.5-4.7M12 12.2v9M7.8 5.1l8.4 4.7'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M12 2.8 20.5 7.5v9L12 21.2 3.5 16.5v-9z'/><path d='M3.5 7.5 12 12.2l8.5-4.7M12 12.2v9M7.8 5.1l8.4 4.7'/></svg>") center / contain no-repeat;
}
html .tiers__title::before { width: .62em; height: .62em; }
html .jump__link[href="#tiers"]::before { width: 1rem; height: 1rem; }
html .jump__link[href="#tiers"] { display: inline-flex; align-items: center; gap: .6rem; }

@media (max-width: 1023px) {
  /* Footer CTA: heading sits right above the orb, centred */
  html .footer-cta { row-gap: 1.75rem; padding-block: clamp(3.5rem, 12vw, 5rem); }
  html .footer-cta__title { text-align: center; text-wrap: balance; }

  /* Services: icon beside the group title, not above it */
  html .service-group__head { grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: 1.25rem; align-items: center; }
  html .service-group__icon { grid-column: 1; grid-row: 1; width: clamp(4.5rem, 20vw, 6rem); }
  html .service-group__title { grid-column: 2; grid-row: 1; font-size: clamp(1.9rem, 7vw, 2.6rem); }
  html .service-group__intro { grid-column: 1 / -1; }

  /* Home: pillar icon beside the pillar title */
  html .pillar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  html .pillar > * { grid-column: 1 / -1; }
  html .pillar > .pillar__icon { grid-column: 1; width: clamp(4.5rem, 20vw, 6rem); margin: 0 0 1.5rem; }
  html .pillar > .pillar__title { grid-column: 2; margin-bottom: 1.5rem; font-size: clamp(1.7rem, 6.4vw, 2.4rem); }
  html .pillar > .pillar__bar { grid-column: auto; }
}

@media (max-width: 720px) {
  /* Home: robot and server centred */
  html .flow__art, html .flow--b .flow__art { justify-self: center; }

  /* Curtain carousels for the service grid and the tiers */
  html .service-list.is-carousel, html .tier-rack.is-carousel {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  html .service-list.is-carousel::-webkit-scrollbar, html .tier-rack.is-carousel::-webkit-scrollbar { display: none; }
  html .is-carousel > .service, html .is-carousel > .tier {
    flex: 0 0 84%; scroll-snap-align: center; border-bottom: 0; border-top: 0;
    border-right: 1px solid var(--line) !important;
  }
  html .tier-rack.is-carousel > .tier + .tier { border-left: 0; }
  .car-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
  .car-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--linen-rgb) / .2); transition: background-color .3s, box-shadow .3s; }
  .car-dots i.is-on { background: var(--signal); box-shadow: 0 0 8px rgb(185 234 91 / .7); }
}

/* Round 8 — tiers head: "more units, more capacity" rack animation */
html .tiers__text { grid-column: 7 / -1; grid-row: 1; max-width: 46ch; }
.tier-viz { grid-column: 7 / -1; grid-row: 2 / span 2; align-self: start; margin: 0; --c: var(--signal); --c-rgb: 185 234 91; }
.tier-viz.is-b { --c: var(--amber); --c-rgb: 227 169 78; }
.tier-viz svg { width: 100%; max-width: 40rem; height: auto; overflow: visible; display: block; }
.tv-frame { fill: rgb(15 25 19 / .6); stroke: var(--line-2); stroke-width: 1; }
.tv-rail { stroke: rgb(var(--linen-rgb) / .14); stroke-width: 1; stroke-dasharray: 2 4; }
.tv-slot { fill: none; stroke: rgb(var(--linen-rgb) / .08); stroke-dasharray: 3 4; }
.tv-unit { opacity: 0; transform: translateX(60px); transition: opacity .5s var(--ease-out), transform .7s var(--ease-rail); }
.tv-unit.is-on { opacity: 1; transform: none; }
.tv-unit rect { fill: rgb(var(--c-rgb) / .07); stroke: var(--c); stroke-width: 1.4; transition: stroke .4s, fill .4s; }
.tv-unit .tv-vent { stroke: var(--c); stroke-opacity: .3; }
.tv-unit circle { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); animation: led-activity 2.6s var(--d, 0s) infinite; }
.tv-label { font-family: var(--font-mono); font-size: 12px; fill: var(--text-2); }
.tv-big { font-family: var(--font-display); font-size: 46px; fill: var(--text); }
.tv-name { font-family: var(--font-sans); font-size: 17px; font-weight: 500; fill: var(--c); transition: fill .4s; }
.tv-bar-bg { fill: rgb(var(--linen-rgb) / .08); }
.tv-bar { fill: var(--c); transform-box: fill-box; transform-origin: left; transition: transform .9s var(--ease-in-out), fill .4s; filter: drop-shadow(0 0 6px rgb(var(--c-rgb) / .5)); }
.tv-tick { stroke: rgb(var(--linen-rgb) / .25); stroke-width: 1; }
@media (max-width: 1023px) {
  html .tiers__text { grid-column: 1 / -1; grid-row: auto; }
  .tier-viz { grid-column: 1 / -1; grid-row: auto; }
}
@media (min-width: 1024px) {
  html .tiers__head .tabs { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
  .tier-viz { grid-row: 2; }
}
/* Round 8b — rack becomes a filled card, tighter section */
html #tiers { padding-top: clamp(4rem, 7vw, 6.5rem); }
html .tiers__head { row-gap: 1.25rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
html .tier-viz {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.4vw, 2.25rem);
  border: 1px solid var(--line); border-radius: 6px;
  background:
    radial-gradient(60% 90% at 18% 70%, rgb(var(--c-rgb) / .10), transparent 70%),
    radial-gradient(rgb(var(--linen-rgb) / .07) 1px, transparent 1.2px) 0 0 / 18px 18px,
    rgb(15 25 19 / .55);
  transition: border-color .4s;
}
html .tier-viz::before { /* lit corner + slow scan line */
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgb(var(--c-rgb) / .7), transparent);
  animation: tv-scan 6s var(--ease-in-out) infinite;
}
@keyframes tv-scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--tv-h, 320px)); opacity: 0; } }
html .tier-viz .tiers__text { max-width: 52ch; margin: 0 0 1.25rem; padding-bottom: 1.1rem; border-bottom: 1px dashed var(--line-2); }
html .tier-viz svg { max-width: none; }
@media (min-width: 1024px) {
  html .tiers__head { align-items: stretch; }
  html .tiers__title { grid-row: 1; align-self: end; }
  html .tiers__head .tabs { grid-row: 2; align-self: start; }
  html .tier-viz { grid-column: 7 / -1; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { html .tier-viz::before { animation: none; opacity: 0; } }
/* Round 8c — cable from tabs to rack card fills the gap */
.tv-cable { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.tv-cable path { fill: none; stroke-width: 1.4; }
.tv-cable .c-base { stroke: rgb(var(--linen-rgb) / .16); stroke-dasharray: 3 5; }
.tv-cable .c-flow { stroke: var(--c, var(--signal)); stroke-dasharray: 26 260; filter: drop-shadow(0 0 5px var(--c, var(--signal))); animation: tv-flow 3.2s linear infinite; }
.tv-cable circle { fill: var(--c, var(--signal)); filter: drop-shadow(0 0 5px var(--c, var(--signal))); }
.tv-cable text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--text-3); }
.tv-cable.is-b { --c: var(--amber); }
@keyframes tv-flow { from { stroke-dashoffset: 286; } to { stroke-dashoffset: 0; } }
@media (max-width: 1023px) { .tv-cable { display: none; } }
@media (min-width: 1024px) { html .tier-viz { grid-column: 6 / -1; } html .tiers__head { position: relative; } }
@media (prefers-reduced-motion: reduce) { .tv-cable .c-flow { animation: none; } }
/* Round 8d — smaller card, closer to top, tabs + cable on the card's centre line */
html #tiers { padding-top: clamp(2.5rem, 4.5vw, 4rem); }
html .tier-viz .tiers__text { margin-bottom: 1rem; padding-bottom: .9rem; font-size: .95em; }
@media (min-width: 1024px) {
  html .tiers__head { grid-template-rows: 1fr auto 1fr; row-gap: 1rem; }
  html .tiers__title { grid-row: 1; align-self: end; }
  html .tiers__head .tabs { grid-row: 2; align-self: center; }
  html .tier-viz { grid-column: 7 / -1; grid-row: 1 / -1; align-self: center; padding: 1.25rem 1.6rem; }
  html .tier-viz svg { max-width: 34rem; }
}
html .tiers__left { grid-column: 1 / -1; display: grid; row-gap: 1.25rem; justify-items: start; }
@media (min-width: 1024px) {
  html .tiers__head { grid-template-rows: auto; align-items: stretch; }
  html .tiers__left { grid-column: 1 / span 6; grid-row: 1; grid-template-rows: 1fr auto 1fr; row-gap: 1rem; }
  html .tiers__left .tiers__title { grid-row: 1; align-self: end; }
  html .tiers__left .tabs { grid-row: 2; }
  html .tier-viz { grid-row: 1; align-self: start; }
}

/* Round 9 — tighter tiers bottom + animated FAQ */
html #tiers { padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
html .faq { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(4rem, 7vw, 6rem); align-items: start; }
/* backdrop: drifting glow, faint grid, giant outlined "?" */
.faq-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.faq-bg::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgb(var(--linen-rgb) / .045) 1px, transparent 1px) 0 0 / 56px 56px,
              linear-gradient(90deg, rgb(var(--linen-rgb) / .045) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask: radial-gradient(70% 80% at 30% 50%, #000 20%, transparent 75%); mask: radial-gradient(70% 80% at 30% 50%, #000 20%, transparent 75%); }
.faq-bg__glow { position: absolute; width: 42rem; height: 42rem; left: -8rem; top: 10%; border-radius: 50%;
  background: radial-gradient(circle, rgb(185 234 91 / .11), transparent 65%); animation: faq-drift 14s var(--ease-in-out) infinite alternate; }
.faq-bg__glow--b { left: auto; right: -10rem; top: 40%; background: radial-gradient(circle, rgb(227 169 78 / .08), transparent 65%); animation-duration: 18s; animation-direction: alternate-reverse; }
@keyframes faq-drift { to { transform: translate(6rem, -3rem) scale(1.15); } }
.faq-bg__q { position: absolute; left: 22%; bottom: -6rem; font-family: var(--font-display); font-size: clamp(18rem, 34vw, 34rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgb(185 234 91 / .14); animation: faq-float 9s var(--ease-in-out) infinite alternate; }
@keyframes faq-float { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-2rem) rotate(4deg); } }

html .faq__title { grid-column: 1 / span 5; grid-row: 1; }
html .faq__list { grid-column: 7 / -1; grid-row: 1 / span 2; counter-reset: faq; }
.faq-side { grid-column: 1 / span 5; grid-row: 2; display: grid; gap: 1.5rem; }
.faq-kicker { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); display: flex; align-items: center; gap: .6rem; margin-bottom: -1rem; }
.faq-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: led-activity 2.4s infinite; }
.faq-lead { color: var(--text-2); max-width: 44ch; font-size: 1.05rem; }

/* live "support terminal" */
.faq-term { border: 1px solid var(--line-2); border-radius: 8px; background: rgb(15 25 19 / .78); backdrop-filter: blur(6px); overflow: hidden;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(185 234 91 / .04) inset; }
.faq-term__bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); }
.faq-term__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--linen-rgb) / .18); }
.faq-term__bar i:first-child { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.faq-term__bar span { margin-left: auto; }
.faq-term__body { padding: 1.1rem 1.2rem 1.3rem; font-family: var(--font-mono); font-size: .84rem; line-height: 1.65; min-height: 11.5rem; }
.faq-term__q { color: var(--text); }
.faq-term__q::before { content: "› "; color: var(--signal); }
.faq-term__a { color: var(--text-2); margin-top: .55rem; padding-left: .9rem; border-left: 2px solid rgb(185 234 91 / .45); }
.faq-term__a:empty { border-color: transparent; }
.faq-term__caret { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.15em; background: var(--signal); margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.faq-term__dots { display: flex; gap: .3rem; padding: .35rem 0 0 .9rem; }
.faq-term__dots b { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); opacity: .3; animation: faq-dot 1s infinite; }
.faq-term__dots b:nth-child(2) { animation-delay: .15s; } .faq-term__dots b:nth-child(3) { animation-delay: .3s; }
@keyframes faq-dot { 40% { opacity: 1; transform: translateY(-3px); } }

.faq-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 6px; }
.faq-stats div { padding: .9rem 1rem; border-left: 1px solid var(--line); }
.faq-stats div:first-child { border-left: 0; }
.faq-stats strong { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; color: var(--text); line-height: 1.1; }
.faq-stats span { font-size: .78rem; color: var(--text-3); }
.faq-ask { display: inline-flex; align-items: center; gap: .6rem; color: var(--signal); font-weight: 500; justify-self: start; }
.faq-ask::after { content: "→"; transition: transform .3s var(--ease-out); }
.faq-ask:hover::after { transform: translateX(5px); }

/* list items: numbers, sweep, open state */
html .faq-item { position: relative; counter-increment: faq; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), background .3s; transition-delay: calc(var(--i, 0) * 70ms); }
.faq.is-in .faq-item { opacity: 1; transform: none; }
html .faq-item::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--signal), transparent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
html .faq-item:hover::after, html .faq-item:has([aria-expanded="true"])::after { transform: scaleX(1); }
html .faq-item:has([aria-expanded="true"]) { background: linear-gradient(90deg, rgb(185 234 91 / .05), transparent 70%); }
html .faq-item__q { padding-left: 3.2rem; position: relative; transition: color .3s, padding .4s var(--ease-out); }
html .faq-item__q::before { content: counter(faq, decimal-leading-zero); position: absolute; left: .4rem; font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); transition: color .3s; }
html .faq-item:hover .faq-item__q, html .faq-item__q[aria-expanded="true"] { color: var(--signal); }
html .faq-item:hover .faq-item__q::before, html .faq-item__q[aria-expanded="true"]::before { color: var(--signal); }
html .faq-item__q .plus { transition: transform .45s var(--ease-spring); }
html .faq-item__q[aria-expanded="true"] .plus { transform: rotate(135deg); }
html .faq-item__a { padding-left: 3.2rem; }
html .faq-item.is-typing .faq-item__q::before { color: var(--signal); text-shadow: 0 0 8px var(--signal); }

@media (max-width: 1023px) {
  html .faq__title, html .faq__list, .faq-side { grid-column: 1 / -1; grid-row: auto; }
  .faq-bg__q { left: auto; right: -4rem; font-size: 20rem; }
}
@media (max-width: 520px) {
  .faq-stats strong { font-size: 1.5rem; }
  .faq-stats div { padding: .7rem .7rem; }
  html .faq-item__q { padding-left: 2.4rem; font-size: 1rem; }
  html .faq-item__a { padding-left: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-bg__glow, .faq-bg__q { animation: none; }
  html .faq-item { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  html .faq { grid-template-rows: auto auto 1fr; row-gap: 1.75rem; }
  html .faq-kicker { grid-row: 1; }
  html .faq__title { grid-row: 2; }
  .faq-side { grid-row: 3; }
  html .faq__list { grid-row: 1 / span 3; align-self: center; }
}
html .faq-kicker { grid-column: 1 / -1; }
.faq-stats span { display: block; line-height: 1.3; }
.faq-ask { display: inline; }
.faq-ask::after { display: inline-block; margin-left: .5rem; }
@media (min-width: 1024px) { html .faq-kicker { grid-column: 1 / span 5; } }

/* Round 10 — Process page: orbit hero, step illustrations, live backdrop, seal + principle icons */
/* hero */
.pr-hero { position: relative; isolation: isolate; }
.pr-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(var(--linen-rgb) / .04) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgb(var(--linen-rgb) / .04) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask: radial-gradient(55% 70% at 75% 50%, #000, transparent 75%); mask: radial-gradient(55% 70% at 75% 50%, #000, transparent 75%); }
.pr-kicker { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); display: flex; align-items: center; gap: .6rem; margin-bottom: -1rem; }
.pr-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: led-activity 2.4s infinite; }
.pr-orbit { grid-column: 1 / -1; justify-self: center; width: min(100%, 24rem); margin: 0; }
.pr-orbit svg { width: 100%; height: auto; overflow: visible; display: block; }
.po-ring { fill: none; stroke: rgb(var(--linen-rgb) / .14); stroke-width: 1; }
.po-trail { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--signal)); }
.po-inner { fill: none; stroke: rgb(185 234 91 / .22); stroke-dasharray: 2 7; transform-origin: 210px 210px; animation: po-spin 40s linear infinite; }
.po-inner--b { stroke: rgb(227 169 78 / .18); stroke-dasharray: 18 10 2 10; animation-duration: 60s; animation-direction: reverse; }
@keyframes po-spin { to { transform: rotate(360deg); } }
.po-tick { stroke: rgb(var(--linen-rgb) / .18); }
.po-node circle { fill: var(--undergrowth); stroke: rgb(var(--linen-rgb) / .3); stroke-width: 1.2; transition: fill .4s, stroke .4s, filter .4s; }
.po-node text { font-family: var(--font-sans); font-size: 13px; fill: var(--text-3); transition: fill .4s; }
.po-node .po-n { font-family: var(--font-mono); font-size: 10px; fill: var(--text-3); }
.po-node.is-on circle { fill: var(--signal); stroke: var(--signal); filter: drop-shadow(0 0 7px var(--signal)); }
.po-node.is-on text { fill: var(--text); }
.po-node.is-on .po-n { fill: var(--signal); }
.po-comet { fill: #fff; filter: drop-shadow(0 0 6px var(--signal)) drop-shadow(0 0 14px var(--signal)); }
.po-big { font-family: var(--font-display); font-size: 92px; fill: var(--text); text-anchor: middle; }
.po-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--signal); text-anchor: middle; }
.po-sub { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-3); text-anchor: middle; letter-spacing: .08em; }
.po-core { fill: url(#po-glow); }
@media (min-width: 1024px) {
  .pr-hero .page-hero__title { grid-column: 1 / span 7; grid-row: 2; align-self: center; }
  .pr-hero .page-hero__aside { grid-column: 1 / span 6; grid-row: 3; }
  .pr-kicker { grid-row: 1; grid-column: 1 / span 7; }
  .pr-orbit { grid-column: 8 / -1; grid-row: 1 / span 3; align-self: center; width: min(100%, 31rem); }
}

/* steps: backdrop that follows progress + rail packet */
.steps { position: relative; }
.pr-steps-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.steps.is-horizontal .pr-steps-bg { position: absolute; }
.pr-steps-bg::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(rgb(var(--linen-rgb) / .07) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
.pr-steps-bg::after { content: ""; position: absolute; top: 15%; width: 46rem; height: 46rem; left: calc(var(--pp, 0) * 100% - 23rem); border-radius: 50%;
  background: radial-gradient(circle, rgb(185 234 91 / .10), transparent 62%); transition: left .2s linear; }
.steps__sticky > * { position: relative; z-index: 1; }
.steps__sticky > .pr-steps-bg { position: absolute; z-index: 0; }
.steps.is-horizontal .steps__sticky > .steps__rail, .steps.is-horizontal .steps__sticky > .steps__count { position: absolute; }
.pr-packet { position: absolute; top: 50%; left: calc(var(--pp, 0) * 100%); width: 44px; height: 3px; margin: -1.5px 0 0 -44px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--signal)); box-shadow: 0 0 12px var(--signal); }
.pr-packet::after { content: ""; position: absolute; right: -3px; top: -2.5px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--signal), 0 0 22px var(--signal); }

/* step illustrations */
.step__art { grid-column: 4 / span 6; width: 76px; height: 76px; border: 1px solid var(--line-2); border-radius: 14px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgb(185 234 91 / .08), transparent 70%), rgb(15 25 19 / .6); transition: border-color .5s, box-shadow .5s; }
.step.is-active .step__art { border-color: rgb(185 234 91 / .45); box-shadow: 0 0 0 4px rgb(185 234 91 / .05), 0 10px 30px -12px rgb(185 234 91 / .35); }
.step__art svg { width: 46px; height: 46px; overflow: visible; fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step__art * { animation-play-state: paused !important; }
.step.is-active .step__art * { animation-play-state: running !important; }
.steps.is-horizontal .step__art { margin-bottom: .25rem; }
/* 1 call */
.sa-wave { opacity: 0; animation: sa-wave 1.8s var(--ease-out) infinite; transform-origin: 12px 34px; }
.sa-wave--2 { animation-delay: .3s; } .sa-wave--3 { animation-delay: .6s; }
@keyframes sa-wave { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
.sa-phone { animation: sa-ring 1.8s infinite; transform-origin: 16px 30px; }
@keyframes sa-ring { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-9deg); } 10%, 20% { transform: rotate(9deg); } }
/* 2 audit */
.sa-lens { animation: sa-scan 3.2s var(--ease-in-out) infinite; }
@keyframes sa-scan { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(14px, 8px); } 66% { transform: translate(4px, 16px); } }
.sa-line { stroke: rgb(var(--linen-rgb) / .35); }
.sa-flag { fill: var(--amber); stroke: none; animation: led-activity 1.6s infinite; }
/* 3 proposal */
.sa-sign { stroke-dasharray: 60; stroke-dashoffset: 60; animation: sa-draw 3s var(--ease-in-out) infinite; }
@keyframes sa-draw { 0%, 15% { stroke-dashoffset: 60; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
/* 4 build */
.sa-b { animation: sa-stack 3s var(--ease-spring) infinite; opacity: 0; }
.sa-b2 { animation-delay: .35s; } .sa-b3 { animation-delay: .7s; }
@keyframes sa-stack { 0% { opacity: 0; transform: translateY(-16px); } 18%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.sa-b rect { fill: rgb(185 234 91 / .14); }
/* 5 launch */
.sa-ring2 { stroke-dasharray: 113; stroke-dashoffset: 113; transform: rotate(-90deg); transform-origin: 23px 23px; animation: sa-fill 2.8s var(--ease-in-out) infinite; }
@keyframes sa-fill { 0% { stroke-dashoffset: 113; } 65%, 100% { stroke-dashoffset: 0; } }
.sa-check { stroke-dasharray: 22; stroke-dashoffset: 22; animation: sa-check 2.8s infinite; }
@keyframes sa-check { 0%, 62% { stroke-dashoffset: 22; } 78%, 100% { stroke-dashoffset: 0; } }
/* 6 handover */
.sa-loop { transform-origin: 23px 23px; animation: po-spin 6s linear infinite; }
.sa-key { animation: sa-key 3s var(--ease-in-out) infinite; transform-origin: 23px 23px; }
@keyframes sa-key { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(90deg); } }

/* principles */
.pr-seal { width: 11rem; height: 11rem; margin-top: 2.5rem; }
.pr-seal svg { width: 100%; height: 100%; overflow: visible; }
.pr-seal .ps-text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; fill: var(--text-2); }
.pr-seal .ps-rot { transform-origin: 100px 100px; animation: po-spin 26s linear infinite; }
.pr-seal .ps-ring { fill: none; stroke: rgb(185 234 91 / .35); }
.pr-seal .ps-core { fill: rgb(185 234 91 / .08); stroke: var(--signal); stroke-width: 1.2; filter: drop-shadow(0 0 10px rgb(185 234 91 / .35)); }
.pr-seal .ps-check { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: sa-check2 4s var(--ease-out) infinite; }
@keyframes sa-check2 { 0%, 10% { stroke-dashoffset: 50; } 35%, 100% { stroke-dashoffset: 0; } }
.principles__title { position: relative; }
html .principle { position: relative; transition: background .4s; }
html .principle::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, var(--signal), transparent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
html .principle:hover::before { transform: scaleX(1); }
html .principle:hover { background: linear-gradient(160deg, rgb(185 234 91 / .045), transparent 60%); }
.principle__icon { width: 42px; height: 42px; margin-bottom: 1.1rem; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line-2); transition: border-color .4s, transform .5s var(--ease-spring), box-shadow .4s; }
.principle__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html .principle:hover .principle__icon { border-color: var(--signal); transform: translateY(-3px) rotate(-6deg); box-shadow: 0 0 18px rgb(185 234 91 / .25); }
@media (max-width: 1023px) {
  .pr-seal { width: 8.5rem; height: 8.5rem; margin: 1.5rem 0 0; }
  .step__art { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .po-inner, .pr-seal .ps-rot, .step__art * { animation: none !important; }
  .sa-b, .sa-wave { opacity: 1; } .sa-sign, .sa-ring2, .sa-check, .pr-seal .ps-check { stroke-dashoffset: 0; }
}
.pr-seal { align-self: start; width: 13rem; height: 13rem; margin-top: 1.5rem; }
.sa-b, .sa-wave { opacity: 1; }
.sa-sign, .sa-ring2, .sa-check { stroke-dashoffset: 0; }
.step:not(.is-active) .step__art * { animation: none !important; }
.step:not(.is-active) .step__art svg { stroke: rgb(var(--linen-rgb) / .45); }
@media (max-width: 1023px) { .pr-seal { width: 9rem; height: 9rem; } }
.pr-orbit { width: min(100%, 26rem); }
@media (min-width: 1024px) { .pr-orbit { width: min(100%, 38rem); } }
@media (max-width: 520px) { .po-node text { font-size: 17px; } .po-node .po-n { font-size: 13px; } }
@media (min-width: 1024px) { .pr-orbit { width: min(100%, 48rem); } }

/* Round 10b — principles: filled left column + dot-grid wave backdrop */
.pr-principles { position: relative; isolation: isolate; overflow: hidden; }
.pr-wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.pr-left { grid-column: 1 / span 5; grid-row: 1 / span 2; display: grid; gap: 1.6rem; align-content: start; }
.pr-left .principles__title { grid-column: auto; grid-row: auto; }
.pr-lead { color: var(--text-2); font-size: 1.05rem; max-width: 36ch; }
.pr-proof { display: flex; align-items: center; gap: 1.6rem; margin-top: .4rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: 10px;
  background: rgb(15 25 19 / .65); backdrop-filter: blur(4px); max-width: 30rem; }
.pr-proof .pr-seal { flex: none; width: 8.5rem; height: 8.5rem; margin: 0; }
.pr-proof ul { list-style: none; display: grid; gap: .7rem; font-size: .95rem; }
.pr-proof li { display: flex; align-items: center; gap: .6rem; color: var(--text); opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i) * 140ms + .2s); }
.pr-proof.is-in li { opacity: 1; transform: none; }
.pr-proof li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--signal);
  background: radial-gradient(circle, var(--signal) 0 3px, transparent 3.5px); box-shadow: 0 0 8px rgb(185 234 91 / .35); }
html .pr-principles .principles__list { grid-row: 1 / span 2; align-self: center; }
@media (max-width: 1023px) {
  .pr-left { grid-column: 1 / -1; grid-row: auto; }
  html .pr-principles .principles__list { grid-row: auto; }
}
@media (max-width: 520px) { .pr-proof { gap: 1rem; padding: 1rem; } .pr-proof .pr-seal { width: 6.5rem; height: 6.5rem; } .pr-proof ul { font-size: .88rem; } }
@media (prefers-reduced-motion: reduce) { .pr-proof li { opacity: 1; transform: none; } }
html .pr-principles .principles__list { background: rgb(22 34 26 / .74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html .pr-principles .principle { padding-left: 1.75rem; padding-right: 1.75rem; }
@media (max-width: 1023px) { html .pr-principles .principle, html .pr-principles .principle:nth-child(even) { padding-left: 1.25rem; padding-right: 1.25rem; } }

/* Round 14 — cursor: centred via transform, positioned via translate (set in JS) */
html .cursor { transform: translate(-50%, -50%); transition: width .45s var(--ease-out), height .45s var(--ease-out), border-radius .45s var(--ease-out), opacity .3s, scale .3s var(--ease-out); }

/* Round 15 — code trail behind the cursor */
.code-trail { position: fixed; inset: 0; z-index: 119; pointer-events: none; overflow: hidden; }
.code-trail__g { position: absolute; font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1; color: var(--signal); text-shadow: 0 0 8px rgb(185 234 91 / .7); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.code-trail__g.is-b { color: var(--amber); text-shadow: 0 0 8px rgb(227 169 78 / .7); }