/* ════════════════════════════════════════════════════════════
   Electoris — industrial-editorial landing
   Stark white + near-black ink + indigo accent (matches app brand).
   Single typeface (Outfit), thin hairlines, monochrome documentary
   photography, restrained motion. Inspired by industrial software
   marketing (Palantir).
   ════════════════════════════════════════════════════════════ */

:root {
  --bg:        #FFFFFF;
  --bg-tint:   #FAFBFF;
  --paper:     #FFFFFF;
  --ink:       #0A0E1A;
  --ink-2:     #1E1B4B;
  --ink-3:     #4B4F6B;
  --ink-4:     #8A8FA8;
  --ink-5:     #C5C7D2;
  --line:      rgba(10, 14, 26, 0.10);
  --line-2:    rgba(10, 14, 26, 0.18);
  --line-3:    rgba(10, 14, 26, 0.32);
  --line-light:rgba(255, 255, 255, 0.16);
  --primary:   #6366F1;
  --primary-d: #4F46E5;
  --accent:    #EC4899;
  --rose:      #F43F5E;

  --display: "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --body:    "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html { overflow-x: clip; }
body { overflow-x: clip; position: relative; }

a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease, border-color .25s ease; }
img { max-width: 100%; display: block; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

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

.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 36px;
}

/* ─── Utility bar ─────────────────────────────────────── */
.utility {
  background: var(--ink);
  color: rgba(255, 255, 255, .7);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
}
.utility-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 36px;
}
.utility-label { display: inline-flex; align-items: center; gap: 10px; }
.util-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(99, 102, 241, .8);
  animation: util-pulse 2.4s ease-in-out infinite;
}
@keyframes util-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; box-shadow: 0 0 14px rgba(99, 102, 241, .9); }
}
.utility-link {
  color: rgba(255, 255, 255, .9);
  display: inline-flex; align-items: center; gap: 8px;
}
.utility-link span { transition: transform .3s ease; display: inline-block; }
.utility-link:hover span { transform: translateX(3px); }
.utility-link:hover { color: #fff; }

/* ─── Nav ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, border-color .3s;
}
.nav.scrolled {
  background: rgba(255, 255, 255, .98);
  border-bottom-color: var(--line-2);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 36px;
  gap: 32px;
  transition: padding .35s cubic-bezier(.2,.7,.2,1);
}
.nav.scrolled .nav-row { padding: 14px 36px; }

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: .94rem;
  letter-spacing: .14em;
}
.brand-glyph {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink);
  border-radius: 1px;
  flex: 0 0 32px;
}
.brand-glyph img {
  width: 18px; height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.brand-word { display: inline-block; }
.brand-light { color: #fff; }

.nav-menu {
  display: flex; gap: 38px;
  font-size: .9rem;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 auto;
}
.nav-menu a {
  position: relative;
  padding: 4px 0;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-menu a:hover { color: var(--ink); }
.nav-menu a:hover::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: color .25s, border-color .25s;
}
.nav-cta-arrow { display: inline-block; transition: transform .3s ease; }
.nav-cta:hover { color: var(--primary); border-color: var(--primary); }
.nav-cta:hover .nav-cta-arrow { transform: translateX(4px); }

/* ─── Action buttons (hero + CTA) ─────────────────────── */
.action {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 24px;
  font-family: var(--display);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: .005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .3s cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
}
.action-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.action-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
}
.action-line {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.action-line:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #fff;
}
.action-arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.action:hover .action-arrow { transform: translateX(5px); }
.action-on-dark.action-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.action-on-dark.action-primary:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.action-on-dark.action-line {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

/* ═════ HERO ═════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: calc(100vh - 36px);
  display: flex; align-items: flex-end;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero-image {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.5) contrast(1.25);
  animation: hero-zoom 22s ease-out infinite alternate;
}
@keyframes hero-zoom {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.14); }
}
.hero-image-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 14, 26, .35) 0%, rgba(10, 14, 26, .85) 80%, var(--ink) 100%),
    linear-gradient(135deg, rgba(99, 102, 241, .12) 0%, rgba(236, 72, 153, .06) 50%, transparent 100%);
  pointer-events: none;
}
.hero-image-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
  opacity: .07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero-grid {
  position: relative; z-index: 2;
  padding: 88px 36px 72px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

.hero-meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .6);
}
.hero-tag { padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.hero-index {
  display: inline-flex; align-items: center; gap: 14px;
  font-style: normal;
}
.hero-index em {
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
  font-size: .9rem;
  color: rgba(255, 255, 255, .9);
  letter-spacing: 0;
}
.hero-index em:first-child { color: var(--primary); }
.hero-index-rule {
  display: inline-block;
  width: 36px; height: 1px;
  background: rgba(255, 255, 255, .4);
}

.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.4rem, 8.6vw, 8.4rem);
  line-height: .94;
  letter-spacing: -.045em;
  color: #fff;
  margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.hero-title-line {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: hero-line-in .9s cubic-bezier(.2, .7, .2, 1) forwards;
}
.hero-title-line.line-1 { animation-delay: .15s; }
.hero-title-line.line-2 { animation-delay: .25s; }
.hero-title-line.line-3 { animation-delay: .35s; color: var(--primary); }
.hero-title-line.line-4 { animation-delay: .45s; }
@keyframes hero-line-in {
  to { opacity: 1; transform: translateY(0); }
}

.hero-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-lead {
  font-size: 1.08rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  max-width: 580px;
  font-weight: 400;
}
.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.hero-edge {
  position: absolute; left: 0; bottom: 0;
  z-index: 2;
  display: flex; gap: 14px;
  padding: 12px 36px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .35);
  border-top: 1px solid rgba(255, 255, 255, .08);
  width: 100%;
  background: rgba(10, 14, 26, .45);
}
.hero-edge span:not(:first-child)::before {
  content: "·";
  margin-right: 14px;
  color: var(--primary);
}

/* ═════ STATEMENT ═════════════════════════════════════════ */
.statement {
  padding: 120px 0 100px;
  border-bottom: 1px solid var(--line);
}
.statement-rule {
  width: 100%;
  height: 1px;
  background: var(--line-2);
  margin-bottom: 48px;
}
.statement-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}
.statement-tag {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .18em;
  color: var(--primary);
  padding-top: 14px;
}
.statement-body {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -.022em;
  max-width: 920px;
}
.statement-mark {
  display: inline;
  color: var(--ink-3);
}

/* ═════ PLATFORM ══════════════════════════════════════════ */
.platform { padding-bottom: 0; }
.platform-head {
  padding: 110px 36px 64px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}
.platform-tag,
.numbers-tag,
.method-tag,
.clients-tag,
.pricing-tag {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .22em;
  color: var(--primary);
  padding-top: 14px;
}
.platform-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 720px;
}

/* ─── Pillar ─── */
.pillar {
  padding: 60px 0 100px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}
.pillar-rev .pillar-grid {
  grid-template-columns: 1fr 1fr;
}

.pillar-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  background: var(--ink);
}
.pillar-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.55) contrast(1.25);
  transition: transform 1.6s cubic-bezier(.2, .7, .2, 1), filter 1.6s ease;
}
.pillar-image:hover img {
  transform: scale(1.04);
  filter: grayscale(.85) brightness(.62) contrast(1.2);
}
.pillar-image-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(10, 14, 26, .55) 100%),
    linear-gradient(135deg, rgba(99, 102, 241, .12) 0%, transparent 50%);
  pointer-events: none;
}
.pillar-image-cap {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  z-index: 2;
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .85);
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.cap-num { color: var(--primary); }

.pillar-body { padding: 32px 0; max-width: 560px; }
.pillar-rev .pillar-body { justify-self: end; }

.pillar-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .22em;
  color: var(--primary);
  margin-bottom: 26px;
  position: relative;
  padding-left: 26px;
}
.pillar-num::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 16px; height: 1px;
  background: var(--primary);
}
.pillar-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.034em;
  margin: 0 0 26px;
  color: var(--ink);
}
.pillar-lead {
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 18px;
  font-weight: 400;
}
.pillar-text {
  font-size: 1rem;
  color: var(--ink-3);
  line-height: 1.65;
  margin: 0 0 36px;
}
.pillar-points {
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid var(--line);
  padding: 24px 0 0;
  margin: 0 0 36px;
}
.pillar-points li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  gap: 14px;
  font-size: .98rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.point-num {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-4);
  letter-spacing: .04em;
}
.pillar-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600;
  font-size: .94rem;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: color .25s, border-color .25s;
}
.pillar-link span {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.pillar-link:hover { color: var(--primary); border-color: var(--primary); }
.pillar-link:hover span { transform: translateX(5px); }

/* ═════ MANIFESTO BAND ════════════════════════════════════ */
.manifesto {
  background: var(--ink);
  color: #fff;
  padding: 100px 0;
  border-top: 1px solid var(--ink-2);
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 80% 20%, rgba(99, 102, 241, .18), transparent 60%),
    radial-gradient(700px 400px at 10% 80%, rgba(236, 72, 153, .08), transparent 60%);
  pointer-events: none;
}
.manifesto::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(168, 180, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 180, 255, .04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55) 0%, transparent 70%);
  pointer-events: none;
}
.manifesto-row {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 64px;
  align-items: start;
}
.manifesto-tag {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .18em;
  color: var(--primary);
  padding-top: 14px;
}
.manifesto-quote {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  color: #fff;
  margin: 0;
  letter-spacing: -.015em;
  max-width: 880px;
}
.manifesto-em {
  color: var(--primary);
  font-weight: 600;
}
.manifesto-cite {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .45);
  text-align: right;
  padding-top: 14px;
}

/* ═════ SIGNALS — Editorial bridge before pillars 04 + 05 ══ */
.signals-bridge {
  padding: 80px 0 24px;
}
.signals-bridge-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}
.signals-bridge-tag {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .18em;
  color: var(--primary);
  text-transform: uppercase;
  padding-top: 14px;
}
.signals-bridge-copy { max-width: 760px; }
.signals-bridge-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 18px;
}
.signals-bridge-sub {
  font-size: 1.02rem;
  color: var(--ink-3);
  line-height: 1.65;
  max-width: 640px;
}

/* ═════ NUMBERS ═══════════════════════════════════════════ */
.numbers {
  padding: 130px 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.numbers-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  margin-bottom: 80px;
  align-items: start;
}
.numbers-title,
.method-title,
.clients-title,
.pricing-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.85rem, 3.8vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--ink);
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.number {
  padding: 36px 24px 36px 0;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.number:last-child { border-right: 0; }
.number-mark {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--primary);
  margin-bottom: 18px;
}
.number-value {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block;
}
.number-label {
  font-size: 1rem;
  color: var(--ink-2);
  font-weight: 600;
  margin-top: 16px;
  letter-spacing: -.005em;
}
.number-sub {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--ink-4);
  letter-spacing: .14em;
}

/* ═════ METHOD ════════════════════════════════════════════ */
.method {
  padding: 130px 0;
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
}
.method-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  margin-bottom: 72px;
  align-items: start;
}
.method-sub {
  grid-column: 2;
  font-size: 1.04rem;
  color: var(--ink-3);
  margin-top: 22px;
  max-width: 540px;
  line-height: 1.6;
}
.method-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.method-step {
  position: relative;
  padding: 44px 28px 56px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  transition: background .35s ease;
}
.method-step:last-child { border-right: 0; }
.method-step:hover { background: var(--bg); }
.method-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 1px;
  background: var(--primary);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.method-step.in::before,
.method-step:hover::before { transform: scaleX(1); }
.step-num {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .22em;
  color: var(--primary);
}
.step-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--ink);
}
.method-step p {
  font-size: .95rem;
  color: var(--ink-3);
  line-height: 1.55;
}

/* ═════ CLIENTS ═══════════════════════════════════════════ */
.clients {
  padding: 130px 0;
  border-top: 1px solid var(--line);
}
.clients-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 96px;
  align-items: start;
}
.clients-copy { padding-top: 14px; max-width: 380px; }
.clients-title { margin: 18px 0 24px; }
.clients-sub {
  font-size: 1.05rem;
  color: var(--ink-3);
  line-height: 1.65;
  margin-bottom: 32px;
}
.clients-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.clients-list li {
  position: relative;
  padding: 32px 28px 32px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .3s;
}
.clients-list li:nth-child(2n) { border-right: 0; padding-right: 0; }
.clients-list li:hover { background: var(--bg-tint); }
.clients-list li:hover .client-mark { color: var(--primary); }
.client-mark {
  display: block;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .18em;
  color: var(--ink-4);
  margin-bottom: 14px;
  transition: color .3s;
}
.clients-list h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.18;
  letter-spacing: -.014em;
  margin: 0 0 8px;
  color: var(--ink);
}
.clients-list p {
  font-size: .94rem;
  color: var(--ink-3);
  line-height: 1.55;
}

/* ═════ PRICING ═══════════════════════════════════════════ */
.pricing {
  padding: 140px 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.pricing-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  margin-bottom: 72px;
  align-items: start;
}
.pricing-sub {
  grid-column: 2;
  font-size: 1.04rem;
  color: var(--ink-3);
  margin-top: 22px;
  max-width: 540px;
  line-height: 1.6;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.pricing-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.plan {
  position: relative;
  padding: 48px 36px 48px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 22px;
  transition: background .35s ease;
}
.pricing-grid-4 .plan { padding: 44px 26px 44px; gap: 20px; }
.pricing-grid-4 .plan-num { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.plan:last-child { border-right: 0; }
.plan:hover { background: var(--bg-tint); }
.plan-featured {
  background: var(--ink);
  color: #fff;
}
.plan-featured:hover { background: var(--ink-2); }
.plan-flag {
  position: absolute;
  top: 0; right: 0;
  background: var(--primary);
  color: #fff;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  padding: 8px 14px;
  text-transform: uppercase;
}
.plan-head {
  display: flex; flex-direction: column; gap: 6px;
}
.plan-mark {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .22em;
  color: var(--primary);
}
.plan-featured .plan-mark { color: var(--primary); }
.plan-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -.014em;
  color: var(--ink);
}
.plan-featured .plan-name { color: #fff; }
.plan-price {
  display: flex; align-items: baseline; gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.plan-featured .plan-price { border-bottom-color: rgba(255, 255, 255, .14); }
.plan-curr {
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--ink-3);
}
.plan-featured .plan-curr { color: rgba(255, 255, 255, .55); }
.plan-num {
  font-family: var(--display);
  font-weight: 200;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan-featured .plan-num { color: #fff; }
.plan-num-sm { font-size: 1.4rem; font-weight: 400; }
.plan-cycle {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink-3);
  margin-left: 6px;
}
.plan-featured .plan-cycle { color: rgba(255, 255, 255, .5); }
.plan-desc {
  font-size: .94rem;
  color: var(--ink-3);
  line-height: 1.55;
  min-height: 2.8em;
}
.plan-featured .plan-desc { color: rgba(255, 255, 255, .72); }
.plan-list {
  display: flex; flex-direction: column; gap: 12px;
  flex-grow: 1;
}
.plan-list li {
  font-size: .94rem;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .56em;
  width: 12px; height: 1px;
  background: var(--primary);
}
.plan-featured .plan-list li { color: rgba(255, 255, 255, .85); }
.plan-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  margin: 14px 0 4px;
  padding: 10px 0 0;
  border-top: 1px dashed var(--line);
}
.plan-note-mark {
  color: var(--primary);
  font-weight: 600;
  flex-shrink: 0;
}
.plan-note-on-dark {
  color: rgba(255, 255, 255, .72);
  border-top-color: rgba(255, 255, 255, .18);
}
.plan-note-on-dark .plan-note-mark {
  color: #fff;
}
.plan-cta {
  display: inline-flex; align-items: center; justify-content: space-between;
  font-family: var(--display);
  font-weight: 600;
  font-size: .94rem;
  color: var(--ink);
  padding: 14px 0 12px;
  border-top: 1px solid var(--ink);
  margin-top: 8px;
  transition: color .25s, padding .25s;
}
.plan-featured .plan-cta {
  color: #fff;
  border-top-color: rgba(255, 255, 255, .35);
}
.plan-cta span {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.plan-cta:hover span { transform: translateX(5px); }
.plan-cta:hover { color: var(--primary); }
.plan-cta-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 16px 20px;
  margin: 8px -20px 0;
}
.plan-cta-primary:hover { background: #fff; color: var(--ink); }

.pricing-legend {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}
.pricing-legend-tag {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.pricing-legend-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}
.pricing-legend-item dt {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.pricing-legend-item dd {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 36ch;
}

/* ═════ FINAL CTA ═════════════════════════════════════════ */
.cta-final {
  background: var(--ink);
  color: #fff;
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 80% 20%, rgba(99, 102, 241, .22), transparent 60%),
    radial-gradient(700px 400px at 10% 90%, rgba(236, 72, 153, .1), transparent 60%);
  pointer-events: none;
}
.cta-final::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(168, 180, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 180, 255, .035) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55) 0%, transparent 70%);
  pointer-events: none;
}
.cta-grid {
  position: relative; z-index: 1;
}
.cta-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .22em;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.cta-tag { color: var(--primary); }
.cta-mark { color: rgba(255, 255, 255, .35); }
.cta-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.04em;
  color: #fff;
  margin: 0 0 36px;
  max-width: 16ch;
}
.cta-sub {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .78);
  max-width: 540px;
  margin: 0 0 48px;
  line-height: 1.55;
}
.cta-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 88px;
}
.cta-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .14em;
}
.cta-foot-tag { color: rgba(255, 255, 255, .5); }
.cta-foot a { color: var(--primary); }
.cta-foot a:hover { color: #fff; }

/* ═════ FOOTER ════════════════════════════════════════════ */
.footer {
  background: var(--ink);
  color: #fff;
  padding: 80px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 28px;
}
.footer-brand {
  display: flex; flex-direction: column; gap: 18px;
}
.footer-tag {
  font-size: .94rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.55;
  max-width: 320px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--primary);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer-col a {
  display: block;
  font-size: .92rem;
  color: rgba(255, 255, 255, .72);
  padding: 5px 0;
  font-weight: 400;
  transition: color .25s, transform .25s;
}
.footer-col a:hover { color: #fff; }
.footer-bot {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 18px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .4);
}
.footer-rule {
  flex-grow: 1;
  height: 1px;
  background: rgba(255, 255, 255, .08);
  margin: 0 16px;
}

/* ═════ Reveal animation ═════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .9s cubic-bezier(.2, .7, .2, 1),
    transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ═════ Responsive ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .container, .nav-row, .utility-row, .platform-head, .hero-grid {
    padding-left: 24px; padding-right: 24px;
  }
  .nav-menu { display: none; }
  .utility { display: none; }

  .hero { min-height: 80vh; }
  .hero-grid { padding: 64px 24px 64px; }
  .hero-foot { grid-template-columns: 1fr; gap: 28px; }

  .statement-row,
  .platform-head,
  .numbers-head,
  .signals-bridge-row,
  .method-head,
  .pricing-head { grid-template-columns: 1fr; gap: 24px; }

  .pillar-grid,
  .pillar-rev .pillar-grid { grid-template-columns: 1fr; gap: 56px; }
  .pillar-rev .pillar-grid > .pillar-body { order: 1; }
  .pillar-rev .pillar-grid > .pillar-image { order: 2; }
  .pillar-image { aspect-ratio: 16 / 11; }

  .manifesto-row { grid-template-columns: 1fr; gap: 32px; }
  .manifesto-cite { text-align: left; }

  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .number:nth-child(2) { border-right: 0; }
  .number:nth-child(3),
  .number:nth-child(4) { border-top: 1px solid var(--line); padding-top: 36px; }

  .method-list { grid-template-columns: repeat(2, 1fr); }
  .method-step:nth-child(2) { border-right: 0; }
  .method-step:nth-child(3),
  .method-step:nth-child(4) { border-top: 1px solid var(--line); }

  .clients-grid { grid-template-columns: 1fr; gap: 56px; }
  .clients-list { grid-template-columns: 1fr; }
  .clients-list li { border-right: 0; padding-right: 0; }

  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid-4 .plan:nth-child(2n) { border-right: 0; }
  .pricing-grid-4 .plan:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plan { border-right: 0; border-top: 1px solid var(--line); }

  .pricing-legend { grid-template-columns: 1fr; gap: 24px; }
  .pricing-legend-list { grid-template-columns: 1fr; gap: 28px; }
  .plan:first-child { border-top: 0; }

  .footer-top { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .container, .nav-row, .platform-head, .hero-grid {
    padding-left: 20px; padding-right: 20px;
  }
  .hero-title { font-size: clamp(2.6rem, 13vw, 4.6rem); }
  .hero-edge { padding: 10px 20px; gap: 10px; font-size: .6rem; }
  .nav-cta { font-size: .82rem; }

  .pillar-image-cap { left: 14px; right: 14px; bottom: 14px; }

  .numbers-grid { grid-template-columns: 1fr; }
  .number { border-right: 0; padding: 28px 0; border-top: 1px solid var(--line); }
  .number:first-of-type { border-top: 0; }

  .method-list { grid-template-columns: 1fr; }
  .method-step { border-right: 0; border-top: 1px solid var(--line); padding: 32px 0; }
  .method-step:first-child { border-top: 0; }

  .pricing-grid-4 { grid-template-columns: 1fr; }
  .pricing-grid-4 .plan { border-right: 0; }
  .pricing-grid-4 .plan:nth-child(n+3) { border-top: 1px solid var(--line); }

  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .action { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-title-line { opacity: 1; transform: none; }
  .hero-image img { transform: scale(1.06); }
}

/* ═══ CONTACT MODAL ═══ */
.contact-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}
.contact-modal.open { display: block; }
.contact-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 26, 0.78);
  cursor: pointer;
  animation: cm-fade .25s ease-out;
}
.contact-modal-card {
  position: relative;
  margin: 8vh auto 0;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--bg);
  border-top: 4px solid var(--ink);
  padding: 36px 32px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
  animation: cm-rise .35s cubic-bezier(.2, .7, .2, 1);
}
@keyframes cm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 6px 10px;
  transition: color .25s ease;
}
.contact-modal-close:hover { color: var(--ink); }
.contact-modal-tag {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.contact-modal-title {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: -.02em;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.contact-modal-lead {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 22px;
}
.contact-modal-options {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-bottom: 18px;
}
.contact-modal-option {
  appearance: none;
  background: transparent;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  transition: padding-left .25s ease, color .25s ease;
}
.contact-modal-option:hover {
  padding-left: 10px;
  color: var(--primary);
}
.contact-modal-option-num {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--ink-4);
  min-width: 24px;
}
.contact-modal-option-label { flex: 1; }
.contact-modal-option-arrow {
  color: var(--ink-4);
  transition: transform .25s ease, color .25s ease;
}
.contact-modal-option:hover .contact-modal-option-arrow {
  transform: translateX(4px);
  color: var(--primary);
}
.contact-modal-option.copied {
  color: var(--primary);
}
.contact-modal-option.copied .contact-modal-option-arrow {
  color: var(--primary);
}
.contact-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--ink-4);
}
.contact-modal-foot #contact-modal-email {
  color: var(--ink);
  letter-spacing: 0;
  text-transform: lowercase;
  font-size: .8rem;
}