/* ==========================================================================
   Napoleon IT — Интеллектуальный слой
   Design system extracted from napoleonit.ru (PP Neue Montreal, brand tokens)
   ========================================================================== */

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontreal-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal Mono';
  src: url('assets/fonts/PPNeueMontrealMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- brand palette (verbatim from napoleonit.ru :root) ---- */
  --black: #1c1c20;
  --text-black: #111;
  --white: #fff;
  --light-grey: #f4f4f8;
  --silver: #c7c7c7;
  --soft-gray: #b9b9b9;
  --dark-grey: #9f9f9f;
  --dark-silver: #7c7c7c;
  --blue: #140af0;
  --blue-mid: #2a5ee9;
  --blue-hover: #3d70f8;
  --purple: #cd78f0;
  --text-secondary: #82828c;
  --text-secondary-alt: #9e9ead;
  --gray-primary: #a0a0aa;

  /* Accessible derivations of the brand values. The raw brand hexes above are kept
     as the source of truth, but two of them fail WCAG AA as text, so text uses these:
       #140af0 on #1c1c20 = 1.5:1  -> --blue-on-dark  #6b8cff = 5.5:1
       #82828c on #1c1c20 = 4.47:1 -> --fg-subtle     #8a8a94 = 4.97:1
       #82828c on #f4f4f8 = 3.47:1 -> light override  #6a6a74 = 4.87:1 */
  --blue-on-dark: #6b8cff;

  /* Context-aware accents: components reference these so one rule stays legible on
     both surfaces (.sec--light re-points them to darker inks). */
  --accent: #6b8cff;
  --purple-ink: var(--purple);

  /* ---- semantic tokens ---- */
  --bg: var(--black);
  --bg-elev: #22222a;
  --bg-elev-2: #2b2e38;
  --fg: var(--white);
  --fg-muted: var(--dark-grey);
  --fg-subtle: #8a8a94;
  --hair: rgba(255, 255, 255, .12);
  --hair-strong: rgba(255, 255, 255, .22);

  /* ---- rhythm (8px base) ---- */
  --gut: clamp(20px, 4.4vw, 72px);
  --sec: clamp(88px, 11vh, 176px);
  --maxw: 1560px;

  /* ---- motion (matches site: .2–.3s ease + cubic-bezier) ---- */
  --e-out: cubic-bezier(.16, .84, .44, 1);
  --e-io: cubic-bezier(.455, .03, .515, .955);
  --t-fast: .2s;
  --t: .3s;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'PP Neue Montreal', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--blue); color: #fff; }

/* ==========================================================================
   Type scale — signature Napoleon IT: Regular weight, tight leading, negative tracking
   ========================================================================== */

.d1, .d2, .d3, h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

.d1 {                                   /* hero */
  font-size: clamp(40px, 7.4vw, 116px);
  line-height: .86;
  letter-spacing: -.042em;
}
.d2 {                                   /* section heads */
  font-size: clamp(31px, 4.5vw, 68px);
  line-height: .93;
  letter-spacing: -.035em;
}
.d3 {
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.02;
  letter-spacing: -.028em;
}
.h-card {
  font-size: clamp(20px, 1.55vw, 26px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

/* monospace eyebrow — the site's `[bracketed label]` idiom */
.eyebrow {
  font-family: 'PP Neue Montreal Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  display: block;
}
.eyebrow::before { content: '['; margin-right: .35em; opacity: .55; }
.eyebrow::after  { content: ']'; margin-left: .35em; opacity: .55; }

.mono {
  font-family: 'PP Neue Montreal Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--fg-muted);
  max-width: 62ch;
}

.muted   { color: var(--fg-muted); }
.subtle  { color: var(--fg-subtle); }
.accent  { color: var(--accent); }
.purple  { color: var(--purple-ink); }
.nowrap  { white-space: nowrap; }

/* numerals in data contexts shouldn't jitter */
/* No tabular figures on display numerals: PP Neue Montreal's tabular set runs ~20%
   wider than its proportional default, which reads as stretched at large sizes.
   Nothing here sits in a numeric column, so there is nothing to align. */

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

section { position: relative; }

.sec { padding-block: var(--sec); }

.sec-head { margin-bottom: clamp(40px, 5vw, 80px); }
.sec-head .eyebrow { margin-bottom: clamp(20px, 2vw, 30px); }
.sec-head .lede { margin-top: 26px; }

/* light-mode section (site alternates dark / #f4f4f8) */
.sec--light {
  background: var(--light-grey);
  color: var(--text-black);
  /* re-point the semantic tokens so every descendant inherits AA-safe values —
     the dark-surface greys (#9f9f9f = 2.41:1 here) are unreadable on light */
  --fg: var(--text-black);
  --fg-muted: #5c5c66;
  --fg-subtle: #6a6a74;
  --accent: var(--blue);
  --purple-ink: #8e2ab7;
  --hair: rgba(17, 17, 17, .13);
  --hair-strong: rgba(17, 17, 17, .28);
}
.sec--light .eyebrow { color: var(--fg-subtle); }
.sec--light .lede,
.sec--light .muted { color: var(--fg-muted); }
.sec--light .subtle { color: var(--fg-subtle); }
.sec--light .accent { color: var(--blue); }

.grid { display: grid; gap: clamp(16px, 1.5vw, 26px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.hair { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* ==========================================================================
   Preloader + scroll progress (site has both)
   ========================================================================== */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--black);
  display: grid;
  place-items: center;
  transition: opacity .6s var(--e-out), visibility .6s;
}
#preloader.done { opacity: 0; visibility: hidden; }

.pre-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  letter-spacing: -.03em;
}
.pre-mark .it {
  background: var(--white);
  color: var(--black);
  padding: 2px 7px 3px;
  font-family: 'PP Neue Montreal Mono', monospace;
  font-size: 19px;
  animation: flip 1.6s var(--e-io) infinite;
}
@keyframes flip {
  0%, 100% { transform: rotateY(0deg); }
  50%      { transform: rotateY(180deg); }
}
.pre-bar {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width .25s var(--e-io);
}

#scrollbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--blue-mid), var(--purple));
  z-index: 90;
  transform-origin: left;
}

/* ==========================================================================
   Header
   ========================================================================== */

.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding-block: 18px;
  transition: background var(--t) ease, padding var(--t) ease, border-color var(--t) ease;
  border-bottom: 1px solid transparent;
}
.hdr.stuck {
  background: rgba(28, 28, 32, .82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--hair);
  padding-block: 12px;
}
.hdr-in {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 56px);
}
.logo {
  font-size: 15px;
  letter-spacing: .17em;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo b { font-weight: 400; }
.logo .sub {
  display: block;
  font-family: 'PP Neue Montreal Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--fg-subtle);
  margin-top: 3px;
}
.nav {
  display: flex;
  gap: clamp(14px, 1.7vw, 30px);
  margin-left: auto;
  font-size: 15px;
}
.nav a {
  color: var(--fg-muted);
  transition: color var(--t-fast) ease;
  position: relative;
  padding-block: 4px;
}
.nav a:hover { color: var(--fg); }

/* ==========================================================================
   Buttons — bracketed pill, per site idiom
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 46px;
  padding: 13px 26px;
  border-radius: 100px;
  border: 1px solid var(--hair-strong);
  font-size: 15px;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background var(--t-fast) ease, color var(--t-fast) ease,
              border-color var(--t-fast) ease, transform var(--t-fast) var(--e-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--pri {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn--pri:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

.btn--ghost:hover { background: rgba(255, 255, 255, .07); border-color: var(--fg); }
.sec--light .btn--ghost:hover { background: rgba(17, 17, 17, .05); }

.btn--sm { min-height: 40px; padding: 10px 20px; font-size: 14px; }

.btn .br { opacity: .5; }

/* ==========================================================================
   Hero — aurora gradient echoing the deck cover
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(116px, 13vh, 156px);
  padding-bottom: clamp(40px, 6vh, 88px);
  overflow: hidden;
  isolation: isolate;
}

.aurora {
  position: absolute;
  inset: -18% -12% -12%;
  z-index: -2;
  background:
    radial-gradient(46% 52% at 14% 24%, rgba(60, 40, 220, .62), transparent 68%),
    radial-gradient(40% 46% at 78% 16%, rgba(20, 10, 240, .40), transparent 66%),
    radial-gradient(52% 44% at 62% 88%, rgba(120, 165, 255, .34), transparent 70%),
    radial-gradient(38% 40% at 92% 70%, rgba(205, 120, 240, .26), transparent 68%),
    radial-gradient(60% 60% at 30% 66%, rgba(40, 30, 120, .5), transparent 72%);
  filter: blur(30px) saturate(125%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.07); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.03); }
}

/* film grain + vignette to match the deck's rendered texture */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(28, 28, 32, .55) 78%, var(--black) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

.hero-in { width: 100%; }
.hero .d1 { max-width: 19ch; margin-top: 18px; }
.hero-lede {
  margin-top: clamp(20px, 2.2vw, 32px);
  font-size: clamp(17px, 1.4vw, 23px);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: rgba(255, 255, 255, .78);
  max-width: 56ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 2.6vw, 42px);
}
/* ==========================================================================
   Marquee ticker (site pattern)
   ========================================================================== */

.marquee {
  border-block: 1px solid var(--hair);
  padding-block: 20px;
  overflow: hidden;
  display: flex;
  gap: 0;
  user-select: none;
}
.mq-track {
  display: flex;
  align-items: center;
  gap: 46px;
  flex-shrink: 0;
  padding-right: 46px;
  animation: slide 38s linear infinite;
  white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-100%); } }
.mq-track span {
  font-size: clamp(15px, 1.35vw, 21px);
  letter-spacing: -.02em;
  color: var(--fg-muted);
}
.mq-track i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.mq-track span.on { color: var(--fg); }
.marquee:hover .mq-track { animation-play-state: paused; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: clamp(24px, 2.1vw, 38px);
  transition: border-color var(--t) ease, transform var(--t) var(--e-out),
              background var(--t) ease;
}
.card:hover { border-color: var(--hair-strong); transform: translateY(-4px); }
.sec--light .card {
  background: var(--white);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .05);
}
.sec--light .card:hover { box-shadow: 0 14px 40px rgba(17, 17, 17, .09); }

.card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.card .sup {
  color: var(--fg-subtle);
  font-size: 15px;
  margin-bottom: 26px;
}
.sec--light .card .sup { color: var(--fg-subtle); }

/* bulleted feature list w/ brand blue dot */
.blist { display: grid; gap: 15px; }
.blist li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.42;
  letter-spacing: -.008em;
  color: var(--fg-muted);
}
.blist li::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
/* No hard-coded colours here: bullets follow --fg-muted / --accent, so a card that
   flips those tokens (e.g. the featured dark card) recolours its list automatically. */

/* ==========================================================================
   Stat / metric blocks
   ========================================================================== */

.stat-n {
  font-size: clamp(46px, 6.6vw, 104px);
  line-height: .84;
  letter-spacing: -.05em;
  display: block;
}
.metric-n {
  font-size: clamp(34px, 3.5vw, 56px);
  line-height: .9;
  letter-spacing: -.042em;
  display: block;
}

.metrics { border-top: 1px solid var(--hair); }
.metric {
  border-bottom: 1px solid var(--hair);
  padding: clamp(24px, 2.4vw, 38px) 0;
  display: grid;
  gap: 14px;
  align-content: start;
}
.metric p {
  margin: 0;
  font-size: 16px;
  line-height: 1.42;
  color: var(--fg-muted);
  max-width: 34ch;
}
.metrics.g-3 .metric { padding-inline: clamp(0px, 1.6vw, 26px); }
.metrics.g-3 .metric:first-child,
.metrics.g-3 .metric:nth-child(4) { padding-left: 0; }

/* two-question diagnostic */
.qa { border-top: 1px solid var(--hair); }
.qa-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: clamp(16px, 3vw, 54px);
  padding: clamp(28px, 3vw, 48px) 0;
  border-bottom: 1px solid var(--hair);
  align-items: start;
}
.qa-row .n {
  font-family: 'PP Neue Montreal Mono', monospace;
  font-size: 13px;
  color: var(--accent);
  padding-top: .5em;
}
.qa-row .q {
  font-size: clamp(21px, 2.3vw, 35px);
  line-height: 1.08;
  letter-spacing: -.028em;
  max-width: 30ch;
}
.qa-row .hint {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--fg-subtle);
}

/* Argument block: a left rule, no box. Reads as a claim being made rather than as
   one more card in the grid, so it does not compete with the cards around it. */
.claim {
  display: grid;
  gap: 16px;
  max-width: 74ch;
  margin-top: clamp(38px, 4.2vw, 64px);
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 3px solid var(--accent);
}
.claim-lead {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 34px);
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--fg);
}
.claim p:not(.claim-lead) {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* callout */
.callout {
  display: flex;
  gap: clamp(18px, 2.4vw, 38px);
  align-items: center;
  flex-wrap: wrap;
  margin-top: clamp(34px, 3.6vw, 54px);
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: 20px;
  background: linear-gradient(105deg, rgba(20, 10, 240, .17), rgba(205, 120, 240, .11));
  border: 1px solid var(--hair);
}
.callout .big {
  font-size: clamp(38px, 4.6vw, 74px);
  line-height: .84;
  letter-spacing: -.05em;
  flex-shrink: 0;
}
.callout p {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.42;
  letter-spacing: -.01em;
  max-width: 46ch;
  color: rgba(255, 255, 255, .84);
}

/* ==========================================================================
   Growth bars (25 → 50 → 75%)
   ========================================================================== */

.bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 26px);
  align-items: end;
  height: clamp(200px, 26vh, 300px);
  margin-bottom: 18px;
}
.bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 12px; }
.bar-val {
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: -.035em;
  line-height: 1;
}
.bar-fill {
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--blue-mid), rgba(42, 94, 233, .18));
  height: 0;
  transition: height 1.1s var(--e-out);
  min-height: 4px;
}
.bar:last-child .bar-fill {
  background: linear-gradient(180deg, var(--purple), rgba(20, 10, 240, .3));
}
.bar-x {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 26px);
  border-top: 1px solid var(--hair);
  padding-top: 14px;
}
.bar-x span { font-family: 'PP Neue Montreal Mono', monospace; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-subtle); }

/* ==========================================================================
   Layer stack diagram (Люди / Слой / Инфраструктура)
   ========================================================================== */

.stack { display: grid; gap: 14px; }
.layer {
  border-radius: 20px;
  padding: clamp(22px, 2.3vw, 36px);
  border: 1px solid var(--hair);
  background: var(--bg-elev);
  display: grid;
  gap: 12px;
}
.layer--mid {
  background: linear-gradient(100deg, rgba(20, 10, 240, .34), rgba(205, 120, 240, .17));
  border-color: rgba(107, 140, 255, .42);
  box-shadow: 0 0 0 1px rgba(107, 140, 255, .12), 0 24px 70px -30px rgba(20, 10, 240, .75);
}
.layer h3 {
  font-size: clamp(19px, 1.75vw, 28px);
  letter-spacing: -.025em;
  line-height: 1.05;
}
.layer p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--fg-muted); max-width: 78ch; }
.layer--mid p { color: rgba(255, 255, 255, .86); }
.layer .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag {
  font-family: 'PP Neue Montreal Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
  border: 1px solid var(--hair-strong);
  color: rgba(255, 255, 255, .9);
}
.layer-arrow {
  justify-self: center;
  color: var(--fg-subtle);
  font-size: 14px;
  line-height: 1;
}

/* ==========================================================================
   Before / after comparison — one unit per block, so the change is literal
   ========================================================================== */

.cmp { display: grid; gap: 14px; }

.cmp-block {
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: clamp(20px, 2.1vw, 34px);
  background: var(--bg-elev);
}
.sec--light .cmp-block {
  background: var(--white);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .05);
}

.cmp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 1.8vw, 26px);
}
.cmp-head h3 {
  font-size: clamp(17px, 1.35vw, 21px);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.cmp-delta {
  margin-left: auto;                 /* stays right-aligned when the title wraps */
  font-family: 'PP Neue Montreal Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  padding: 7px 13px;
  border-radius: 100px;
  white-space: nowrap;
  color: var(--accent);
  background: rgba(107, 140, 255, .15);
  border: 1px solid rgba(107, 140, 255, .34);
}
.sec--light .cmp-delta { background: rgba(20, 10, 240, .07); border-color: rgba(20, 10, 240, .22); }

.cmp-line {
  display: grid;
  grid-template-columns: 66px 46px minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 22px);
  align-items: center;
}
.cmp-line + .cmp-line { margin-top: 14px; }

.cmp-when {
  font-family: 'PP Neue Montreal Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.cmp-n {
  font-size: clamp(21px, 1.9vw, 29px);
  line-height: 1;
  letter-spacing: -.035em;
}
.cmp-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-dots i {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--hair-strong);
  flex: none;
}
.cmp-line--after .cmp-n { color: var(--accent); }
.cmp-line--after .cmp-dots i { background: var(--accent); }
/* trailing placeholders: the units that went away, kept visible so both rows align */
.cmp-line--after .cmp-dots i.is-ghost { background: var(--hair); }

/* the dot rows are decorative (aria-hidden); this states the change in words */
.sr-note {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Narrow screens: give the dots the block's full width on their own row, so 20 vs 15
   still reads as a length difference instead of wrapping into two equal-looking blobs. */
@media (max-width: 600px) {
  .cmp-line { grid-template-columns: 58px minmax(0, 1fr); row-gap: 11px; column-gap: 12px; }
  .cmp-dots { grid-column: 1 / -1; gap: 4px; }
  .cmp-dots i { width: 10px; height: 10px; }
}

/* ==========================================================================
   Cases
   ========================================================================== */

.case {
  border-top: 1px solid var(--hair);
  padding-top: clamp(28px, 3vw, 48px);
  margin-top: clamp(34px, 3.6vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 3.4vw, 66px);
}
.case-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.case-stat { display: grid; gap: 9px; align-content: start; }
.case-stat .k { font-size: clamp(26px, 2.5vw, 40px); line-height: .92; letter-spacing: -.04em; color: var(--accent); }
.case-stat .v { font-size: 15px; line-height: 1.4; color: var(--fg-muted); }

/* ==========================================================================
   Economics bars
   ========================================================================== */

.econ { display: grid; gap: 20px; margin-top: 8px; }
.econ-row { display: grid; gap: 12px; }
.econ-row .lab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.econ-row .lab .t { font-size: 16px; color: var(--fg-muted); }
.econ-row .lab .n { font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -.04em; line-height: 1; }
.econ-track { height: 15px; border-radius: 100px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.sec--light .econ-track { background: rgba(17, 17, 17, .08); }
.econ-fill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s var(--e-out);
  background: linear-gradient(90deg, #3a3a46, #55555f);
}
.econ-row.is-ours .econ-fill { background: linear-gradient(90deg, var(--blue), var(--purple)); }

/* ==========================================================================
   Boundaries (greenfield 30–50% / legacy 10–15% / reengineering)
   ========================================================================== */

.bound {
  display: grid;
  gap: 16px;
  /* the outer grid stretches all three cards to one height; without this the spare
     vertical space is spread between rows and badges/titles stop lining up */
  align-content: start;
}
.bound .verdict {
  justify-self: start;
  font-family: 'PP Neue Montreal Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
  border: 1px solid transparent;
  white-space: nowrap;          /* one line always — a wrapped badge shifts the title */
}
.bound h3 { margin-top: 2px; }
.bound .blist { margin-top: 4px; }

/* 01 — flagship case: inverted card, the only dark surface in a light section */
.sec--light .card.bound--max {
  background: var(--black);
  border-color: transparent;
  box-shadow: 0 22px 60px -26px rgba(20, 10, 240, .5);
  /* .sec--light sets `color` directly, so flipping --fg alone leaves the heading black */
  color: var(--white);
  /* flip the semantic tokens once — text, bullets and badge follow automatically */
  --fg: var(--white);
  --fg-muted: #b9b9c2;
  --fg-subtle: #9a9aa4;
  --accent: var(--blue-on-dark);
  --hair: rgba(255, 255, 255, .14);
  --hair-strong: rgba(255, 255, 255, .26);
}
.sec--light .card.bound--max:hover { box-shadow: 0 28px 72px -24px rgba(20, 10, 240, .62); }

.bound--max .verdict {
  background: rgba(107, 140, 255, .18);
  border-color: rgba(107, 140, 255, .4);
  color: var(--accent);
}
/* 02 — weaker effect, so a neutral badge rather than a third brand colour */
.bound--mid .verdict {
  background: rgba(17, 17, 17, .05);
  border-color: var(--hair-strong);
  color: var(--fg-subtle);
}
.bound--re .verdict {
  background: rgba(20, 10, 240, .06);
  border-color: rgba(20, 10, 240, .24);
  color: var(--accent);
}

/* ==========================================================================
   Numbered list (how it fits) + steps
   ========================================================================== */

.nlist { border-top: 1px solid var(--hair); }
.nitem {
  border-bottom: 1px solid var(--hair);
  padding: clamp(22px, 2.3vw, 34px) 0;
  display: grid;
  grid-template-columns: 64px minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(14px, 2.4vw, 44px);
  align-items: start;
  transition: background var(--t) ease;
}
.nitem .n { font-family: 'PP Neue Montreal Mono', monospace; font-size: 13px; color: var(--fg-subtle); padding-top: .35em; }
.nitem h3 { font-size: clamp(19px, 1.65vw, 26px); letter-spacing: -.025em; line-height: 1.1; }
.nitem p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--fg-muted); max-width: 56ch; }
.nitem:hover .n { color: var(--accent); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.step { display: grid; gap: 16px; align-content: start; padding-top: 26px; border-top: 2px solid var(--hair); position: relative; }
.step::before {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  height: 2px; width: 0;
  background: var(--accent);
  transition: width 1s var(--e-out) .15s;
}
.step.in::before { width: 100%; }
.step-n { font-family: 'PP Neue Montreal Mono', monospace; font-size: 12px; letter-spacing: .07em; color: var(--accent); }
.step h3 { font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -.022em; }
.step p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--fg-muted); }
/* marks the steps that sit on the client's side of the line */
.step-who {
  justify-self: start;
  font-family: 'PP Neue Montreal Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 100px;
  color: var(--accent);
  background: rgba(20, 10, 240, .07);
  border: 1px solid rgba(20, 10, 240, .22);
}

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(96px, 13vh, 190px);
}
.cta .aurora { animation-duration: 34s; opacity: .95; }
.cta::after {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(115% 100% at 50% 100%, transparent 42%, rgba(28, 28, 32, .6) 80%, var(--black) 100%);
}
.cta .d1 { max-width: 17ch; }
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(40px, 4.4vw, 68px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--hair-strong);
  align-items: start;
}
.who { display: grid; gap: 5px; }
.who .nm { font-size: clamp(19px, 1.6vw, 25px); letter-spacing: -.025em; }
.who .rl { font-size: 15px; color: rgba(255, 255, 255, .68); max-width: 30ch; }

.cta-side { display: grid; gap: clamp(18px, 2vw, 26px); }
.cta-contacts { display: grid; gap: 10px; font-size: clamp(17px, 1.35vw, 21px); letter-spacing: -.02em; }
.cta-contacts a { transition: color var(--t-fast) ease; }
.cta-contacts a:hover { color: var(--accent); }
/* sits on the bare aurora, so it needs more headroom than --fg-subtle */
.cta-side-note { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .72); max-width: 30ch; }

/* ==========================================================================
   Contact form
   ========================================================================== */

/* Own panel, not bare on the aurora: the gradient runs light in places and small
   labels lost their contrast against it. Blur keeps the gradient readable behind. */
.form {
  display: grid;
  gap: clamp(16px, 1.7vw, 22px);
  padding: clamp(22px, 2.6vw, 38px);
  border: 1px solid var(--hair);
  border-radius: 22px;
  background: rgba(20, 20, 25, .86);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 20px); }

.field { display: grid; gap: 8px; min-width: 0; }
.field label {
  font-family: 'PP Neue Montreal Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9a9aa6;               /* brighter than --fg-subtle: 11px needs the headroom */
}
.field .req { color: var(--accent); margin-left: .35em; }
.field .opt { text-transform: none; letter-spacing: 0; opacity: .8; }

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field textarea {
  width: 100%;
  min-height: 48px;                     /* comfortable touch target */
  padding: 13px 15px;
  font: inherit;
  font-size: 16px;                      /* 16px avoids iOS zoom-on-focus */
  color: var(--fg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, .38); }

.field input:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, .38); }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 3px rgba(107, 140, 255, .22);
}
/* invalid only after the field has been checked, never while still typing */
.field.is-bad input,
.field.is-bad textarea { border-color: #ff6b6b; }
.field .err { margin: 0; font-size: 13px; line-height: 1.35; color: #ff9b9b; }

.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin-top: 2px;
}
.field--check input {
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--blue);
  flex: none;
  cursor: pointer;
}
.field--check label {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--fg-muted);
  line-height: 1.4;
  cursor: pointer;
}
.field--check .err { grid-column: 1 / -1; }

/* Legal docs sit OUTSIDE the <label>: a link inside a label also toggles the
   checkbox, so opening the policy would silently tick the consent box. */
.field-docs {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 2px 0 0;
  font-size: 13px;
}
.field-docs a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(107, 140, 255, .45);
  transition: text-decoration-color var(--t-fast) ease;
}
.field-docs a:hover { text-decoration-color: var(--accent); }

/* honeypot — off-screen, never shown to a person */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 4px;
}
.form-note { margin: 0; font-size: 13.5px; line-height: 1.4; color: #9a9aa6; max-width: 34ch; }

.form button[type=submit][disabled] { opacity: .55; cursor: default; transform: none; }

.form-status {
  margin: 0;
  padding: 15px 18px;
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.45;
  border: 1px solid var(--hair);
}
.form-status.is-ok   { background: rgba(107, 140, 255, .13); border-color: rgba(107, 140, 255, .34); color: #fff; }
.form-status.is-fail { background: rgba(255, 107, 107, .11); border-color: rgba(255, 107, 107, .34); color: #ffc9c9; }

/* success replaces the form entirely */
.form.is-sent .form-row,
.form.is-sent .field,
.form.is-sent .form-foot { display: none; }

.ftr { padding-block: clamp(44px, 5vw, 76px); border-top: 1px solid var(--hair); }
.ftr-in { display: flex; flex-wrap: wrap; gap: 26px 48px; justify-content: space-between; align-items: flex-start; }
.ftr-cols { display: grid; gap: 20px; justify-items: start; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 12px 30px; font-size: 15px; }
.ftr-links a { color: var(--fg-muted); transition: color var(--t-fast) ease; }
.ftr-links a:hover { color: var(--fg); }
.ftr-legal {
  display: grid;
  gap: 7px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  width: 100%;
  font-size: 13px;
}
.ftr-legal a { color: var(--fg-subtle); transition: color var(--t-fast) ease; }
.ftr-legal a:hover { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.ftr small { display: block; font-size: 13px; color: var(--fg-subtle); }

.src {
  margin: clamp(26px, 3vw, 44px) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-subtle);
  max-width: 82ch;
}
.sec--light .src { color: var(--fg-subtle); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .nav { display: none; }
  .case { grid-template-columns: 1fr; }
  .nitem { grid-template-columns: 40px 1fr; }
  .nitem p { grid-column: 2; max-width: none; }
}

@media (max-width: 900px) {
  .g-3, .g-6, .steps, .bars, .bar-x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics.g-3 .metric { padding-inline: 0; }
  .hero { align-items: center; padding-top: 132px; }
  .cta-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .g-2, .g-3, .g-6, .steps { grid-template-columns: minmax(0, 1fr); }
  .bars { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 170px; }
  .bar-x { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-stats { grid-template-columns: minmax(0, 1fr); }
  .qa-row { grid-template-columns: 1fr; gap: 12px; }
  .qa-row .n { padding-top: 0; }
  .callout { flex-direction: column; align-items: flex-start; gap: 16px; }
  .btn { width: 100%; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .logo .sub { display: none; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .form-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .form-note { max-width: none; }
}

/* ==========================================================================
   Reduced motion / print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .aurora { animation: none; }
  .mq-track { animation: none; }
}

@media print {
  #preloader, #scrollbar, .hdr { display: none; }
  body { background: #fff; color: #111; }
}