/* ============================================================
   FO DIGITAL — DESIGN SYSTEM v2
   Direction: "Redline" — the vernacular of the actual product (browsers,
   revisions, comment-pins, precise specs) instead of generic warm-SaaS.
   Fonts self-hosted, zero third-party requests.
   ============================================================ */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/space-grotesk-var.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/jetbrains-mono-var.woff2') format('woff2'); }

:root {
  --ink:      #14161A;
  --ink2:     #2B2E33;
  --paper:    #F2F1EC;
  --paper2:   #E7E5DD;
  --paper3:   #DBD9CF;
  --muted:    #63615A;
  --faint:    #6C6B69; /* 4.71:1 on --paper (WCAG AA) — was #9C9A90 at 2.50:1, a real fail caught in review */
  --line:     rgba(20,22,26,0.14);
  --line2:    rgba(20,22,26,0.08);

  --accent:      #1E43E0;
  --accent-h:    #1636B8;
  --accent-soft: #E4E9FC;
  --accent-bdr:  rgba(30,67,224,0.28);
  --good:        #0F6631; /* 5.85:1 on accent-soft (was #147A3D at 4.47:1) */
  --redline:     #BC301F; /* 5.13:1 on the error-message bg (was #D6402C at 3.97:1) */
  --accent-on-dark: #7B98FF; /* 6.71:1 on --ink — for <em> inside dark CTA bands, where --accent itself only hits 2.53:1 */

  --radius: 3px;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* faint drafting grid, not a warm glow — sets the "spec sheet" register */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line2) 1px, transparent 1px), linear-gradient(90deg, var(--line2) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, black 0%, transparent 70%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark { opacity: 0; transform: scale(0.92); animation: loaderMark 0.45s 0.05s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes loaderMark { to { opacity: 1; transform: scale(1); } }
.loader-wordmark { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; opacity: 0; animation: loaderFadeIn 0.4s 0.3s ease forwards; }
@keyframes loaderFadeIn { to { opacity: 1; } }
.loader-bar-wrap { width: 72px; height: 1px; background: var(--line); overflow: hidden; }
.loader-bar { height: 100%; background: var(--accent); animation: loaderBarFill 0.7s 0.15s cubic-bezier(.4,0,.2,1) forwards; width: 0; }
@keyframes loaderBarFill { to { width: 100%; } }

/* ============================================================
   TYPE
   ============================================================ */
.display { font-family: 'Space Grotesk', sans-serif; font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
.display-xl { font-size: clamp(44px, 6.8vw, 88px); }
.display-lg { font-size: clamp(36px, 5vw, 62px); }
.display-md { font-size: clamp(28px, 3.6vw, 44px); }
.display-sm { font-size: clamp(22px, 2.8vw, 32px); }
em { font-style: normal; color: var(--accent); }

.mono { font-family: 'JetBrains Mono', monospace; }
.label, .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--accent); display: inline-block; }

.body-lg { font-size: 19px; line-height: 1.7; font-weight: 400; color: var(--muted); }
.body-md { font-size: 16px; line-height: 1.7; font-weight: 400; color: var(--muted); }
.body-sm { font-size: 14px; line-height: 1.65; }
.body-xs { font-size: 12px; line-height: 1.6; }
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }
strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }
.section { padding: 108px 0; }
.section-sm { padding: 68px 0; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8{gap:8px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}
.text-center { text-align: center; }
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-48{margin-bottom:48px}

/* ============================================================
   BUTTONS — sharp corners, one solid accent, no soft-shadow cliché
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  border-radius: var(--radius);
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap; position: relative;
}
.btn-gold, .btn-primary { background: var(--accent); color: #fff; }
.btn-gold:hover, .btn-primary:hover { background: var(--accent-h); transform: translateY(-2px); }
.btn-outline { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-ghost { color: var(--accent); padding-left: 0; padding-right: 0; font-weight: 600; }
.btn-ghost .arrow { display: inline-block; transition: transform 0.2s; }
.btn-ghost:hover .arrow { transform: translateX(5px); }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 17px 32px; font-size: 15px; }
.btn-full { width: 100%; justify-content: center; }
.btn-white { background: #fff; color: var(--accent); }
.btn-white:hover { transform: translateY(-2px); }
.btn-ghost-dark { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

.gold-rule { width: 28px; height: 2px; background: var(--accent); }
.gold-rule.center { margin: 0 auto; }
hr.section-divider { border: none; border-top: 1px solid var(--line); margin: 0; }

.card { background: var(--paper2); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-bdr); border-radius: var(--radius);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: var(--accent);
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ============================================================
   SIGNATURE — comment-pin annotation
   ============================================================ */
.pin {
  position: absolute; display: flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(6px) scale(0.9);
  transition: opacity 0.5s cubic-bezier(.16,1,.3,1), transform 0.5s cubic-bezier(.16,1,.3,1);
  z-index: 3; pointer-events: none;
}
.pin.visible { opacity: 1; transform: translateY(0) scale(1); }
.pin-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex-shrink: 0; }
.pin-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent-bdr); animation: pinPulse 2.4s ease-out infinite; }
@keyframes pinPulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
.pin-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 5px 9px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(20,22,26,0.10);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.form-group input, .form-group textarea {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 16px; padding: 13px 16px; outline: none; width: 100%;
  transition: border-color 0.18s, box-shadow 0.18s;
} /* 16px, not 15 — iOS Safari force-zooms the whole page on focus for anything smaller */
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--faint); }
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-group textarea { resize: none; min-height: 100px; }
.form-stack { display: flex; flex-direction: column; gap: 24px; }
.form-success { display: none; text-align: center; padding: 48px 24px; }
.form-dark-wrap { background: var(--paper2); border: 1px solid var(--line); border-radius: var(--radius); padding: 44px; }
.form-error-msg { display: none; padding: 14px 18px; background: #FDECEA; border: 1px solid #F3B9B0; border-radius: var(--radius); font-size: 13px; color: var(--redline); margin-top: 12px; }

/* ============================================================
   NAV
   ============================================================ */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; border-bottom: 1px solid transparent; transition: background 0.4s, border-color 0.4s, padding 0.3s; padding: 26px 0; }
#nav.scrolled { background: rgba(242,241,236,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--line); padding: 16px 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.nav-logo-svg { width: 44px; height: 28px; }
.nav-logo-text { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); display: none; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 400; color: var(--muted); transition: color 0.2s; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.25s ease; transform-origin: left; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 1px; transition: all 0.3s; }
.mob-menu { display: none; position: fixed; inset: 0; z-index: 950; background: var(--paper); flex-direction: column; align-items: center; justify-content: center; gap: 26px; } /* above #nav (900) and .sticky-cta (850) — was 800, so the sticky CTA bar floated on top of the open menu */
.mob-menu.open { display: flex; }
.mob-menu a { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 600; color: var(--ink); transition: color 0.2s; }
.mob-menu a:hover { color: var(--accent); }
.mob-close { position: absolute; top: 26px; right: 30px; font-size: 22px; color: var(--muted); cursor: pointer; background: none; border: none; line-height: 1; }
.mob-divider { width: 40px; height: 1px; background: var(--line); }

/* ============================================================
   HERO — browser-mockup signature device
   ============================================================ */
#hero { min-height: 100vh; display: flex; align-items: center; padding-top: 110px; padding-bottom: 60px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero-eyebrow { margin-bottom: 26px; }
.hero-headline { margin-bottom: 24px; }
.hero-headline .word { display: inline-block; opacity: 0; transform: translateY(100%); animation: wordUp 0.7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes wordUp { to { opacity: 1; transform: translateY(0); } }
.hero-sub { max-width: 440px; color: var(--muted); font-size: 18px; line-height: 1.75; margin-bottom: 36px; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-clients { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-clients-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--faint); text-transform: uppercase; white-space: nowrap; }
.client-pill { padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--radius); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }

/* the mockup */
.mockup-wrap { position: relative; perspective: 1400px; }
.browser-mockup {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 30px 70px -20px rgba(20,22,26,0.28), 0 2px 10px rgba(20,22,26,0.06);
  transform: rotateY(-6deg) rotateX(2deg);
  transition: transform 0.5s cubic-bezier(.16,1,.3,1);
  animation: mockupFloat 7s ease-in-out infinite;
}
@keyframes mockupFloat { 0%,100% { transform: rotateY(-6deg) rotateX(2deg) translateY(0); } 50% { transform: rotateY(-6deg) rotateX(2deg) translateY(-10px); } }
.mockup-wrap:hover .browser-mockup { transform: rotateY(0deg) rotateX(0deg); animation-play-state: paused; }
.browser-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--paper3); }
.browser-url { flex: 1; background: var(--paper); border-radius: 5px; padding: 6px 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
.browser-body { padding: 26px; position: relative; }
.mock-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mock-logo { width: 46px; height: 10px; background: var(--ink); border-radius: 2px; }
.mock-nav-links { display: flex; gap: 12px; }
.mock-nav-links span { width: 26px; height: 6px; background: var(--paper3); border-radius: 2px; }
.mock-heading { width: 78%; height: 22px; background: var(--ink); border-radius: 3px; margin-bottom: 12px; }
.mock-heading.short { width: 52%; }
.mock-text { width: 92%; height: 8px; background: var(--paper3); border-radius: 2px; margin-bottom: 8px; }
.mock-text.w2 { width: 70%; }
.mock-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 10px 18px; border-radius: 4px; margin-top: 18px; }
.mock-photo { margin-top: 24px; height: 120px; border-radius: 6px; background: linear-gradient(135deg, var(--accent-soft), var(--paper2)); }
.mockup-pin-cta { top: 158px; left: 200px; }
.mockup-pin-mobile { top: 40px; right: -30px; }
.mockup-pin-speed { bottom: 30px; left: -20px; }

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.services-strip { background: var(--ink); overflow: hidden; padding: 0; }
.marquee-track { display: flex; gap: 0; animation: marquee 32s linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.strip-grid { display: flex; }
.strip-item { padding: 18px 36px; display: flex; align-items: center; gap: 10px; border-right: 1px solid rgba(255,255,255,0.1); white-space: nowrap; flex-shrink: 0; }
.strip-icon { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent-soft); opacity: 0.9; }
.strip-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.04em; color: rgba(255,255,255,0.72); }

/* ============================================================
   WHY — numbered rail list (not a box grid)
   ============================================================ */
.why-list { border-top: 1px solid var(--line); }
.why-row { display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; transition: background 0.2s; }
.why-row:hover { background: var(--paper2); }
.why-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--accent); padding-top: 3px; }
.why-title { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.why-row p { color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 560px; }

/* ============================================================
   PACKAGES — comparison table, not two isolated boxes
   ============================================================ */
.compare-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.compare-head { display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--paper2); }
.compare-head > div { padding: 28px 24px; border-left: 1px solid var(--line); }
.compare-head > div:first-child { border-left: none; }
.compare-head-label { display: flex; align-items: flex-end; }
.compare-head-label span { font-size: 10px; color: var(--muted); letter-spacing: 0.05em; line-height: 1.5; }
.compare-plan-name { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.compare-price { font-family: 'JetBrains Mono', monospace; font-size: 34px; font-weight: 600; }
.compare-price .cur { font-size: 18px; vertical-align: top; margin-right: 1px; }
.compare-price .dec { font-size: 18px; opacity: 0.6; }
.compare-note { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--faint); margin-top: 6px; }
.compare-col-growth { background: var(--accent-soft); position: relative; }
.compare-col-growth::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.compare-badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--accent); background: #fff; border: 1px solid var(--accent-bdr); padding: 4px 8px; border-radius: 2px; margin-bottom: 12px; }
.compare-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-top: 1px solid var(--line); }
.compare-row > div { padding: 14px 24px; border-left: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.compare-row > div:first-child { justify-content: flex-start; border-left: none; font-size: 14px; color: var(--ink2); }
.compare-row .compare-col-growth { background: rgba(228,233,252,0.5); }
.compare-yes { color: var(--good); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.compare-no { color: var(--faint); font-family: 'JetBrains Mono', monospace; }
.compare-cta-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-top: 1px solid var(--line); }
.compare-cta-row > div { padding: 24px; border-left: 1px solid var(--line); }
.compare-cta-row > div:first-child { border-left: none; }
.pricing-tagline { font-size: 13px; color: var(--muted); margin-top: 8px; }
.maintenance-box { padding: 16px 18px; background: var(--paper2); border-left: 2px solid var(--accent); margin-top: 20px; border-radius: 0 var(--radius) var(--radius) 0; }
.maintenance-box p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* legacy card-based pkg classes kept minimal for any stray references */
.pkg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pkg-card { background: #fff; padding: 32px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-pricing { max-width: 720px; margin: 0 auto; }
.faq-row { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-q-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; }
.faq-q-text { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: var(--ink); }
.faq-icon-btn { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 18px; flex-shrink: 0; transition: transform 0.25s; }
.faq-row.open .faq-icon-btn { transform: rotate(45deg); }
.faq-answer { font-size: 14px; color: var(--muted); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.2s; }
.faq-row.open .faq-answer { max-height: 300px; padding-top: 14px; }

/* ============================================================
   PROCESS — genuinely sequential, animated connecting line
   ============================================================ */
.process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.process-line { position: absolute; top: 21px; left: 10%; right: 10%; height: 1px; background: var(--line); z-index: 0; overflow: hidden; }
.process-line-fill { height: 100%; width: 0; background: var(--accent); transition: width 1.4s cubic-bezier(.16,1,.3,1); }
.process-line-fill.visible { width: 100%; }
.process-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 14px; }
.step-circle { width: 42px; height: 42px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--muted); margin-bottom: 18px; transition: all 0.25s; }
.process-step:hover .step-circle { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-title { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.step-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background: var(--ink); padding: 108px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(30,67,224,0.22) 0%, transparent 60%); }
.cta-band .wrap { position: relative; z-index: 1; }
/* Real bug caught in review: headings here inherited body's --ink text
   color onto this --ink background = 1:1 contrast, invisible. Force it. */
.cta-band h1, .cta-band h2, .cta-band h3 { color: #fff; }
.cta-band h1 em, .cta-band h2 em, .cta-band h3 em { color: var(--accent-on-dark); }
.cta-band p { color: rgba(255,255,255,0.72); }
.cta-band .eyebrow { color: rgba(255,255,255,0.75); }
.cta-band .eyebrow::before { background: rgba(255,255,255,0.75); }

/* ============================================================
   IMAGE SHOWCASE
   ============================================================ */
.img-showcase { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line); }
.img-showcase-col { display: grid; grid-template-rows: 1fr 1fr; gap: 1px; }
.img-showcase-panel { position: relative; overflow: hidden; min-height: 226px; clip-path: inset(0 0 100% 0); transition: clip-path 0.9s cubic-bezier(.16,1,.3,1); }
.img-showcase-panel.visible { clip-path: inset(0 0 0% 0); }
.img-showcase-panel img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.05); }
.img-panel-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,22,26,0.55), transparent 55%); pointer-events: none; }
.img-panel-label { position: absolute; bottom: 18px; left: 18px; z-index: 2; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.05em; color: #fff; }

/* ============================================================
   PAGE HERO (interior)
   ============================================================ */
.page-hero { padding: 156px 0 76px; border-bottom: 1px solid var(--line); background: var(--paper2); position: relative; overflow: hidden; }
.page-hero .wrap { position: relative; }

/* ============================================================
   SERVICES
   ============================================================ */
.service-detail { display: grid; grid-template-columns: 1fr 2fr; gap: 72px; align-items: start; padding: 52px 0; border-bottom: 1px solid var(--line); }
.service-detail:last-child { border-bottom: none; }
.service-detail-label { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.service-detail-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); }
.service-detail-name { font-family: 'Space Grotesk', sans-serif; font-size: 27px; font-weight: 600; color: var(--ink); }
.service-detail-body { color: var(--muted); font-size: 15px; line-height: 1.8; }
.service-detail-body p { margin-bottom: 16px; }
.service-detail-body p:last-child { margin-bottom: 0; }
.feature-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--muted); }
.feature-list li .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 9px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; }
.about-visual { aspect-ratio: 4/5; background: var(--ink); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px; text-align: center; position: relative; overflow: hidden; }
.about-visual::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 28px 28px; }
.about-monogram { position: relative; z-index: 1; }
.about-monogram svg { width: 130px; height: 84px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat-box { padding: 26px; text-align: center; border-right: 1px solid var(--line); }
.stat-box:last-child { border-right: none; }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 600; color: var(--accent); }
.stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 6px; text-transform: uppercase; }
.value-list { border-top: 1px solid var(--line); max-width: 760px; margin: 0 auto; }
.value-row { padding: 26px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.value-heading { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: var(--ink); }
.value-row p { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; }
.contact-info-block { display: flex; flex-direction: column; gap: 32px; }
.contact-row { display: flex; align-items: flex-start; gap: 18px; }
.contact-icon-wrap { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--accent-bdr); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--accent-soft); }
.contact-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; color: var(--accent); margin-bottom: 4px; text-transform: uppercase; }
.contact-value { font-size: 15px; color: var(--muted); }
.contact-value a { color: var(--ink); transition: color 0.2s; }
.contact-value a:hover { color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--ink); padding: 76px 0 32px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; margin-bottom: 52px; }
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.5); max-width: 260px; line-height: 1.75; }
.footer-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col ul a { font-size: 14px; color: rgba(255,255,255,0.62); transition: color 0.2s; }
.footer-col ul a:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.08); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.32); }
.footer-bottom a { color: rgba(255,255,255,0.32); transition: color 0.2s; }
.footer-bottom a:hover { color: rgba(255,255,255,0.6); }
.footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.footer-logo svg { width: 46px; height: 30px; }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; background: var(--ink); padding: 14px 20px; display: none; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(100%); transition: transform 0.35s cubic-bezier(.16,1,.3,1); }
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.6); }
@media (max-width: 768px) { .sticky-cta { display: flex; } body { padding-bottom: 64px; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .wrap { padding: 0 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .mockup-wrap { order: -1; max-width: 480px; margin: 0 auto; }
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .process-line { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 68px 0; }
  .wrap { padding: 0 22px; }
  .nav-links, .nav-cta .btn { display: none; }
  .hamburger { display: flex; }
  .why-row, .value-row { grid-template-columns: 40px 1fr; gap: 16px; }
  /* Comparison table: was hiding the label column entirely on mobile
     (checkmarks with no idea what feature they meant) — scroll instead,
     nothing lost. */
  .compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-head, .compare-row, .compare-cta-row { grid-template-columns: 160px 130px 130px; min-width: 420px; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 28px; }
  .about-intro, .contact-layout { grid-template-columns: 1fr; gap: 44px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .service-detail { grid-template-columns: 1fr; gap: 22px; }
  .browser-mockup { transform: none !important; animation: none !important; }
  /* Pins used negative offsets + fixed-pixel positioning tuned for the
     desktop mockup width — on a phone they either clip past the edge
     (mobile/speed pins) or drift off the button they're meant to point
     at as the layout reflows (cta pin). The value they convey is already
     in the page copy, so just drop them rather than mis-render them. */
  .pin { display: none !important; }
  .img-showcase { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .process-steps { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .compare-price { font-size: 26px; }
  .img-showcase { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .sticky-cta-text { display: none; } /* "Free demo, no obligation" + the button was tight on the smallest phones (iPhone SE) */
  .sticky-cta { justify-content: center; }
}