/*
 * CATAPLTR GLOBAL STYLESHEET — V18
 * One physical stylesheet for homepage, shared shell, inner pages, AI Engineering and legal pages.
 * Page-specific rules remain namespaced; shared header/footer/navigation rules are canonical.
 */

/* === HOMEPAGE === */
/**
 * CATAPLTR — styles2.css
 * Mobile-optimized variant with below-the-fold hero animation flow
 */

/* ==========================================================================
   DESIGN TOKENS & ROOT VARIABLES
   ========================================================================== */
:root {
  /* Color Palette - Precise Match to Visual Reference */
  --c-hero-bg: #030308;
  --c-dark-bg: #030308;
  --c-dark-card: #080814;
  --c-dark-card-inner: #0d0d1e;
  --c-dark-border: rgba(255, 255, 255, 0.08);
  --c-dark-border-subtle: rgba(255, 255, 255, 0.05);

  --c-light-bg: #f8f9fa;
  --c-light-card: #ffffff;
  --c-light-border: #e5e7eb;
  --c-light-border-subtle: #f0f2f5;

  --c-text-dark-primary: #ffffff;
  --c-text-dark-secondary: #9ca3af;
  --c-text-dark-muted: #6b7280;

  --c-text-light-primary: #0a0a14;
  --c-text-light-secondary: #4b5563;
  --c-text-light-muted: #9ca3af;

  /* Brand Accents & Gradients */
  --c-cyan: #00c8ff;
  --c-cyan-light: #38bdf8;
  --c-violet: #a855f7;
  --c-indigo: #6366f1;
  --c-purple: #8b5cf6;
  --c-magenta: #d946ef;
  --c-orange: #f97316;
  --c-orange-vibrant: #ea580c;
  --c-amber: #f59e0b;
  --c-emerald: #10b981;
  --c-white: #ffffff;

  /* Reference Button Gradient */
  --grad-hero-btn: linear-gradient(90deg, #6366f1 0%, #8b5cf6 30%, #ea580c 75%, #f97316 100%);
  --grad-text-ai: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%);
  --grad-text-speed: #00c8ff;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 5rem;
  --sp-4xl: 7.5rem;

  /* Border Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* Transitions */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   CSS RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html.home-page-root {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.home-page {
  font-family: var(--font-family);
  background-color: var(--c-hero-bg);
  color: var(--c-text-dark-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

/* ==========================================================================
   LAYOUT CONTAINERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (max-width: 640px) {
  .container {
    padding-inline: 1.25rem;
  }
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding-block: 1rem;
  transition: background-color var(--t-base), backdrop-filter var(--t-base), border-color var(--t-base), padding var(--t-base);
}

.site-header.scrolled {
  background-color: rgba(3, 3, 8, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-dark-border);
  padding-block: 0.75rem;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.logo-wordmark {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-white);
}

.logo-orb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1e1b4b 0%, #0a071b 100%);
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}

.logo-orb-text {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--c-white);
  letter-spacing: -0.02em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.25rem;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all var(--t-fast);
}

.btn-header-cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--c-white);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  cursor: pointer;
  z-index: 10001;
  transition: background var(--t-fast);
}

.hamburger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-white);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
  transform-origin: center;
}

/* Hamburger active 'X' animation */
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu - Independent Fullscreen Overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #030308;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6rem 2rem 3rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: 9999;
  overflow-y: auto;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-nav-link {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.mobile-nav-link:hover {
  color: var(--c-cyan);
  border-color: rgba(0, 200, 255, 0.3);
}

.mobile-cta-wrap {
  margin-top: 1rem;
}

.mobile-cta {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   HERO SECTION — MOBILE-OPTIMIZED BELOW-THE-FOLD ANIMATION FLOW
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--c-hero-bg);
  overflow: hidden;
  padding-top: 90px;
  padding-bottom: 4rem;
  display: flex;
  align-items: center;
}

/* The hero canvas extends full width and height with a smooth bottom gradient fade */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding-top: 1.5rem;
}

.hero-copy {
  max-width: 580px;
}

.hero-headline {
  font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--c-white);
  margin-bottom: 1.25rem;
}

.hero-ai {
  color: var(--c-violet);
}

.hero-speed {
  color: var(--c-cyan);
}

.hero-body {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  color: #9ca3af;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 500px;
}

.hero-cta-wrap {
  margin-bottom: 2.75rem;
}

.btn-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-white);
  background: var(--grad-hero-btn);
  box-shadow: 0 4px 25px rgba(249, 115, 22, 0.35), 0 0 40px rgba(99, 102, 241, 0.25);
  border: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.btn-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 35px rgba(249, 115, 22, 0.45), 0 0 50px rgba(99, 102, 241, 0.35);
}

.btn-hero-cta .cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--t-fast);
}

.btn-hero-cta:hover .cta-arrow {
  transform: translateX(3px);
}

/* Credibility Bar */
.credibility-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cred-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #d1d5db;
}

.cred-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cred-cyan   { color: var(--c-cyan); }
.cred-violet { color: var(--c-violet); }
.cred-blue   { color: var(--c-cyan-light); }

.cred-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
}

/* Hero Visual: Focal Orb */
.hero-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-orb-wrap {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-aura-blast {
  position: absolute;
  inset: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.15) 0%, rgba(168, 85, 247, 0.18) 35%, rgba(99, 102, 241, 0.1) 60%, transparent 75%);
  pointer-events: none;
  animation: auraPulse 5s ease-in-out infinite alternate;
}

@keyframes auraPulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.08); opacity: 1; }
}

.hero-core-orb {
  position: relative;
  z-index: 5;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #18152c 0%, #0c0a18 55%, #05040a 100%);
  border: 2px solid rgba(168, 85, 247, 0.5);
  box-shadow:
    0 0 35px rgba(0, 200, 255, 0.45),
    0 0 70px rgba(168, 85, 247, 0.4),
    inset 0 0 25px rgba(168, 85, 247, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-core-mark {
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--c-white);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(168, 85, 247, 0.6);
  user-select: none;
}

/* Mobile Below-the-fold Stream & Scroll Cue */
.hero-scroll-stream {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 5;
  transition: color var(--t-fast);
}

.hero-scroll-stream:hover {
  color: var(--c-cyan);
}

.stream-pulse-line {
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, var(--c-cyan) 0%, var(--c-violet) 60%, transparent 100%);
  border-radius: 2px;
  animation: streamDownward 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes streamDownward {
  0% { transform: scaleY(0.3); opacity: 0.3; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
  100% { transform: scaleY(0.3); opacity: 0.3; transform-origin: bottom; }
}

/* ==========================================================================
   LIGHT SECTIONS (WHY US, WHAT WE BUILD, INTAKE)
   ========================================================================== */
.section-light {
  background: var(--c-light-bg);
  padding-block: var(--sp-3xl);
  position: relative;
}

.section-header-center {
  text-align: center;
  margin-bottom: 2.75rem;
}

.section-eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.eyebrow-violet { color: #7c3aed; }
.eyebrow-cyan   { color: #0284c7; }

.section-heading-dark {
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--c-text-light-primary);
  line-height: 1.15;
}

.spectrum-gradient {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 6-Card Desktop Horizontal Single Row Grid */
.six-card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.feature-card {
  background: var(--c-light-card);
  border: 1px solid var(--c-light-border);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.125rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

/* Icon Pill Container Styles (Pastel Backgrounds matching visual ref) */
.card-icon-pill {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.bg-blue-tint   { background: #eff6ff; }
.bg-pink-tint   { background: #fdf2f8; }
.bg-cyan-tint   { background: #ecfeff; }
.bg-violet-tint { background: #f5f3ff; }
.bg-orange-tint { background: #fff7ed; }

.icon-blue   { width: 22px; height: 22px; color: #2563eb; }
.icon-pink   { width: 22px; height: 22px; color: #db2777; }
.icon-cyan   { width: 22px; height: 22px; color: #0891b2; }
.icon-violet { width: 22px; height: 22px; color: #7c3aed; }
.icon-orange { width: 22px; height: 22px; color: #ea580c; }
.icon-indigo { width: 22px; height: 22px; color: #4f46e5; }

/* What We Build - Outline Icons */
.card-outline-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.card-outline-icon svg {
  width: 26px;
  height: 26px;
}

.card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-text-light-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.card-desc {
  font-size: 0.8125rem;
  color: var(--c-text-light-secondary);
  line-height: 1.55;
}

/* ==========================================================================
   SECTION 3: HOW WE WORK (DARK CONTAINER)
   ========================================================================== */
.section-dark-panel-wrap {
  background: var(--c-light-bg);
  padding-block: 2.5rem;
}

.dark-panel-container {
  background: #070710;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-2xl);
  padding: 3.5rem 3rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.panel-heading {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--c-white);
  line-height: 1.1;
  margin-bottom: 3.5rem;
}

.accent-orange {
  color: var(--c-orange);
}

.accent-indigo {
  color: #818cf8;
}

.accent-indigo-blue {
  color: #6366f1;
}

/* Connected 6-Step Horizontal Pipeline */
.process-pipeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  gap: 0.5rem;
}

.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  max-width: 150px;
}

.node-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  transition: transform var(--t-fast);
}

.pipeline-step:hover .node-circle {
  transform: scale(1.1);
}

.node-cyan   { background: #0c202d; color: var(--c-cyan);   border-color: rgba(0, 200, 255, 0.4); }
.node-violet { background: #1c142c; color: var(--c-violet); border-color: rgba(168, 85, 247, 0.4); }
.node-teal   { background: #0b2426; color: #2dd4bf;         border-color: rgba(45, 212, 191, 0.4); }
.node-blue   { background: #0f1c30; color: #60a5fa;         border-color: rgba(96, 165, 250, 0.4); }
.node-orange { background: #26160e; color: var(--c-orange); border-color: rgba(249, 115, 22, 0.4); }

.node-circle svg {
  width: 20px;
  height: 20px;
}

.pipeline-connector {
  flex: 0 0 30px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1025px) {
  #how-we-work .process-pipeline {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }
  #how-we-work .pipeline-step {
    position: relative;
    min-width: 0;
  }
  #how-we-work .pipeline-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: clamp(48px, 5.5vh, 60px);
    top: calc(clamp(48px, 5.5vh, 60px) / 2);
    width: calc(100% - clamp(48px, 5.5vh, 60px) + 12px);
    height: 2px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.38) 0 3px, transparent 3px 7px);
  }
  #how-we-work .pipeline-connector { display: none; }
}

.connector-line {
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0.25) 3px, transparent 3px, transparent 7px);
}

.step-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

.step-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.step-desc {
  font-size: 0.8125rem;
  color: #9ca3af;
  line-height: 1.5;
}

/* ==========================================================================
   SECTION 5: TECHNOLOGY INDEPENDENCE
   ========================================================================== */
.tech-panel {
  padding: 4rem 3.5rem 3rem;
}

.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

.tech-headline {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--c-white);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.tech-desc {
  font-size: 0.9375rem;
  color: #9ca3af;
  line-height: 1.6;
  max-width: 420px;
}

.tech-tags-side {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  background: #0d0d1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform var(--t-fast), border-color var(--t-fast);
}

.tech-pill:hover {
  transform: translateY(-2px);
}

.tech-pill svg {
  width: 15px;
  height: 15px;
}

.pill-cyan    { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); }
.pill-magenta { color: #f472b6; border-color: rgba(244, 114, 182, 0.35); }
.pill-purple  { color: #c084fc; border-color: rgba(192, 132, 252, 0.35); }
.pill-violet  { color: #a78bfa; border-color: rgba(167, 139, 250, 0.35); }
.pill-orange  { color: #fb923c; border-color: rgba(251, 146, 60, 0.35); }

.tech-bottom-banner {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;
  text-align: center;
}

.tech-bottom-banner span {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
  text-transform: uppercase;
}

/* ==========================================================================
   SECTION 6: PHILOSOPHY (MANIFESTO)
   ========================================================================== */
.section-manifesto {
  padding-block: var(--sp-4xl);
}

.manifesto-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}

.manifesto-left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Sonar Orb Visual */
.sonar-orb-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sonar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(168, 85, 247, 0.3);
}

.sonar-ring.r1 { inset: 0; }
.sonar-ring.r2 { inset: 16px; border-color: rgba(0, 200, 255, 0.25); }
.sonar-ring.r3 { inset: 32px; border-color: rgba(168, 85, 247, 0.35); }

.sonar-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot-orange {
  top: 12px;
  right: 28px;
  background: var(--c-orange);
  box-shadow: 0 0 8px var(--c-orange);
}

.dot-violet {
  bottom: 20px;
  left: 14px;
  background: var(--c-violet);
  box-shadow: 0 0 8px var(--c-violet);
}

.sonar-core {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #18152c 0%, #05040a 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  font-size: 1.125rem;
  font-weight: 800;
  z-index: 2;
}

.manifesto-headline {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--c-text-light-primary);
}

.highlight-violet {
  color: #6366f1;
}

.manifesto-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.manifesto-card {
  background: var(--c-light-card);
  border: 1px solid var(--c-light-border);
  border-radius: var(--r-xl);
  padding: 1.375rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform var(--t-fast), border-color var(--t-fast);
}

.manifesto-card:hover {
  transform: translateX(4px);
  border-color: #cbd5e1;
}

.m-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-blue-bg   { background: #eff6ff; }
.icon-violet-bg { background: #f5f3ff; }
.icon-orange-bg { background: #fff7ed; }

.m-card-icon svg {
  width: 22px;
  height: 22px;
}

.m-card-text h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-text-light-primary);
  margin-bottom: 0.25rem;
}

.m-card-text p {
  font-size: 0.875rem;
  color: var(--c-text-light-secondary);
}

/* ==========================================================================
   SECTION 7: REQUIREMENT INTAKE (STRUCTURED FORM BOX)
   ========================================================================== */
.section-intake {
  padding-block: var(--sp-4xl);
}

.intake-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem;
  align-items: flex-start;
}

.intake-headline {
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--c-text-light-primary);
  margin-bottom: 1.25rem;
}

.intake-lead {
  font-size: 0.9375rem;
  color: var(--c-text-light-secondary);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 420px;
}

.intake-trust-note {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

.trust-icon {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

/* Form Container Box */
.intake-card-box {
  background: var(--c-light-card);
  border: 1px solid var(--c-light-border);
  border-radius: var(--r-2xl);
  padding: 2.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.structured-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row-top {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.25rem;
}

.form-row-mid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-row-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
}

label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.375rem;
}

.req {
  color: #ef4444;
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 0.875rem;
  color: #0f172a;
  transition: all var(--t-fast);
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #7c3aed;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.select-wrapper {
  position: relative;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

.select-chevron {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: #64748b;
  pointer-events: none;
}

.form-field-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.field-error {
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 0.25rem;
}

/* Submit Gradient Button */
.btn-gradient-submit {
  width: 100%;
  padding: 0.9375rem 2rem;
  border-radius: var(--r-md);
  border: none;
  background: var(--grad-hero-btn);
  color: var(--c-white);
  font-size: 0.9375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(234, 88, 12, 0.35);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.btn-gradient-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(234, 88, 12, 0.45);
}

.btn-gradient-submit svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-fast);
}

.btn-gradient-submit:hover svg {
  transform: translateX(3px);
}

/* Success Card */
.form-success {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.success-icon-wrap {
  width: 48px;
  height: 48px;
  margin: 0 auto 1.25rem;
}

.form-success h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.form-success p {
  font-size: 0.875rem;
  color: #64748b;
}

/* ==========================================================================
   SECTION 8: FOOTER (PITCH BLACK)
   ========================================================================== */
.site-footer {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--sp-3xl) var(--sp-2xl);
  color: #9ca3af;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 2.5rem;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.footer-logo-wordmark {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-white);
}

.footer-orb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #111122;
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.footer-orb-text {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--c-white);
}

.footer-tagline {
  font-size: 0.8125rem;
  color: #9ca3af;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.footer-social-row {
  display: flex;
  gap: 0.75rem;
}

.footer-social-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all var(--t-fast);
}

.footer-social-icon svg {
  width: 16px;
  height: 16px;
}

.footer-social-icon:hover {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.footer-col-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-white);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.footer-nav-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-nav-col a {
  font-size: 0.8125rem;
  color: #9ca3af;
  transition: color var(--t-fast);
}

.footer-nav-col a:hover {
  color: var(--c-white);
}

.footer-copyright-col p {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.6;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS & MOBILE-OPTIMIZED BELOW-THE-FOLD ADAPTATIONS
   ========================================================================= */
@media (max-width: 1024px) {
  .six-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-pipeline {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .pipeline-connector {
    display: none;
  }

  .pipeline-step {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: none;
  }

  .tech-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .manifesto-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .intake-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .btn-header-cta {
    display: none;
  }

  /* Hero on mobile: Optimized so headline + CTA are immediate, and the fiber stream / orb anchor into and below the fold */
  .hero {
    min-height: auto;
    padding-top: 85px;
    padding-bottom: 3.5rem;
    display: block;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
    padding-top: 1rem;
  }

  .hero-copy {
    max-width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-headline {
    font-size: clamp(2.35rem, 8.5vw, 3.25rem);
    line-height: 1.08;
    margin-bottom: 1rem;
  }

  .hero-body {
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
    max-width: 90%;
  }

  .hero-cta-wrap {
    margin-bottom: 2rem;
    width: 100%;
  }

  .btn-hero-cta {
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }

  /* The focal visual sits below the CTA, spanning directly down toward/past the viewport fold */
  .hero-visual {
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }

  .hero-orb-wrap {
    width: 220px;
    height: 220px;
  }

  .hero-core-orb {
    width: 120px;
    height: 120px;
  }

  .hero-core-mark {
    font-size: 2.25rem;
  }

  /* Credibility Bar sits as a clean balanced floating glass strip */
  .credibility-strip {
    justify-content: center;
    gap: 0.75rem 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .six-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pipeline-step {
    flex: 0 0 calc(50% - 1rem);
  }

  .form-row-top,
  .form-row-mid,
  .form-row-four {
    grid-template-columns: 1fr;
  }

  .manifesto-left {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .six-card-grid {
    grid-template-columns: 1fr;
  }

  .pipeline-step {
    flex: 0 0 100%;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .credibility-strip {
    flex-direction: column;
    align-items: center;
  }

  .cred-divider {
    display: none;
  }
}

/* ==========================================================================\n   FIXED VIEWPORT APPLICATION SHELL\n   Header + navigation + footer remain fixed. Only the selected section fills\n   the exact remaining viewport and scrolls internally when required.\n   ========================================================================== */
:root {
  --shell-header-h: 72px;
  --shell-footer-h: 58px;
}

html.home-page-root, body.home-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.home-page {
  background: #030308;
}

.site-header {
  height: var(--shell-header-h);
  padding: 0;
  display: flex;
  align-items: center;
  background: rgba(3, 3, 8, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header.scrolled {
  padding: 0;
  background: rgba(3, 3, 8, 0.96);
}

.header-inner {
  height: 100%;
  gap: 1.25rem;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}

.desktop-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 0.72rem;
  border-radius: 999px;
  color: #9ca3af;
  font-size: 0.76rem;
  font-weight: 650;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}

.desktop-nav-link:hover,
.desktop-nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.07);
}

.desktop-nav-link.active::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-violet));
}

.header-actions {
  flex-shrink: 0;
}

.site-content {
  position: fixed;
  z-index: 1;
  top: var(--shell-header-h);
  right: 0;
  bottom: var(--shell-footer-h);
  left: 0;
  overflow: hidden;
  background: var(--c-light-bg);
}

.app-section {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  scrollbar-gutter: stable;
}

.app-section.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 2;
}

/* Header spacing now belongs to the shell, not to the hero section. */
.hero {
  padding-top: 2.5rem;
  min-height: 100% !important;
}

/* Each non-hero panel gets comfortable breathing room but never changes shell size. */
.section-light,
.section-dark-panel-wrap {
  min-height: 100%;
}

.site-footer {
  position: fixed;
  z-index: 10000;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--shell-footer-h);
  padding: 0;
  display: flex;
  align-items: center;
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-brand-col {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.footer-logo {
  margin: 0;
  flex-shrink: 0;
}

.footer-tagline {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
}

.footer-social-row {
  gap: 0.45rem;
}

.footer-social-icon {
  width: 28px;
  height: 28px;
}

.footer-nav-col {
  display: none;
}

.footer-copyright-col {
  margin-left: auto;
  flex-shrink: 0;
}

.footer-copyright-col p {
  font-size: 0.7rem;
  line-height: 1.25;
  text-align: right;
}

.mobile-menu {
  top: var(--shell-header-h);
  bottom: var(--shell-footer-h);
  height: auto;
  padding-top: 2rem;
  z-index: 9999;
}

.mobile-nav-link.active {
  color: var(--c-cyan);
  border-color: rgba(0, 200, 255, 0.3);
}

@media (max-width: 1180px) {
  .desktop-nav-link {
    padding-inline: 0.5rem;
    font-size: 0.7rem;
  }
  .btn-header-cta {
    display: none;
  }
}

@media (max-width: 900px) {
  .desktop-nav {
    display: none;
  }
  .header-actions {
    margin-left: auto;
  }
  .hamburger {
    display: flex;
  }
}

/* Cloud architecture diagram: direct connections from each concern to the workload. */
.cloud-map .cloud-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cloud-map .cloud-connectors path {
  fill: none;
  stroke: #7062bd;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  opacity: .72;
}
.cloud-map .node,
.cloud-map .cloud-core { z-index: 1; }
@media (max-width: 620px) {
  .cloud-map .cloud-connectors path { stroke-width: 1.1; opacity: .65; }
}

@media (max-width: 768px) {
  :root {
    --shell-header-h: 64px;
    --shell-footer-h: 48px;
  }

  .hero {
    min-height: 100% !important;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  .site-footer .footer-tagline,
  .site-footer .footer-social-row {
    display: none;
  }

  .footer-inner {
    gap: 0.75rem;
  }

  .footer-logo-wordmark {
    font-size: 1rem;
  }

  .footer-orb-badge {
    width: 23px;
    height: 23px;
  }

  .footer-copyright-col p {
    font-size: 0.62rem;
  }
}

@media (max-width: 480px) {
  .site-footer .footer-copyright-col p {
    white-space: nowrap;
  }
  .site-footer .footer-copyright-col p br {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-section {
    transition: none;
    transform: none;
  }
}

/* ========================================================================== 
   FULL-VIEWPORT SECTION COMPOSITION
   Standalone navigation panels should visually use the complete app viewport.
   ========================================================================== */
@media (min-width: 901px) {
  /* Give every section a full-height internal composition rather than a
     scroll-page sized block sitting at the top of the viewport. */
  .app-section > .container {
    min-height: 100%;
  }

  /* WHY US + WHAT WE BUILD: 3 x 2 is more balanced in a standalone viewport. */
  .section-defines,
  .section-build {
    padding-block: clamp(1.75rem, 3.2vh, 3rem);
  }

  .section-defines > .container,
  .section-build > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .section-defines .section-header-center,
  .section-build .section-header-center {
    margin-bottom: clamp(1.5rem, 3.5vh, 2.75rem);
  }

  .section-defines .section-heading-dark,
  .section-build .section-heading-dark {
    font-size: clamp(2.25rem, 3.2vw, 3.15rem);
  }

  .section-defines .six-card-grid,
  .section-build .six-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vh, 1.4rem);
    min-height: clamp(360px, 52vh, 540px);
  }

  .section-defines .feature-card,
  .section-build .feature-card {
    min-height: 0;
    justify-content: center;
    padding: clamp(1.35rem, 2.5vh, 2rem) clamp(1.35rem, 2vw, 1.8rem);
    border-radius: 20px;
  }

  .section-defines .card-icon-pill,
  .section-build .card-icon-pill,
  .section-build .card-outline-icon {
    width: clamp(44px, 5vh, 56px);
    height: clamp(44px, 5vh, 56px);
    margin-bottom: clamp(0.8rem, 1.8vh, 1.25rem);
  }

  .section-defines .card-title,
  .section-build .card-title {
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  }

  .section-defines .card-desc,
  .section-build .card-desc {
    font-size: clamp(0.82rem, 1vw, 0.95rem);
    line-height: 1.6;
    max-width: 34rem;
  }

  /* HOW WE WORK: dark card now occupies the available vertical canvas. */
  #how-we-work {
    padding-block: clamp(1.25rem, 2.5vh, 2rem);
  }

  #how-we-work > .container {
    display: flex;
    align-items: stretch;
  }

  #how-we-work .dark-panel-container {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vh, 3.75rem) clamp(2rem, 3.5vw, 4rem);
  }

  #how-we-work .panel-heading {
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    margin-bottom: clamp(2.25rem, 5vh, 4.5rem);
  }

  #how-we-work .process-pipeline {
    align-items: stretch;
  }

  #how-we-work .pipeline-step {
    max-width: none;
    min-height: clamp(190px, 26vh, 260px);
    justify-content: flex-start;
  }

  #how-we-work .node-circle {
    width: clamp(48px, 5.5vh, 60px);
    height: clamp(48px, 5.5vh, 60px);
  }

  #how-we-work .pipeline-connector {
    height: clamp(48px, 5.5vh, 60px);
  }

  #how-we-work .step-title {
    font-size: clamp(1.05rem, 1.25vw, 1.28rem);
  }

  #how-we-work .step-desc {
    font-size: clamp(0.8rem, 0.92vw, 0.92rem);
    line-height: 1.6;
  }

  /* TECHNOLOGY: the dark panel becomes a full-height stage. */
  #technology {
    padding-block: clamp(1.25rem, 2.5vh, 2rem);
  }

  #technology > .container {
    display: flex;
    align-items: stretch;
  }

  #technology .tech-panel {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vh, 4rem) clamp(2rem, 4vw, 4.5rem);
  }

  #technology .tech-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: clamp(3rem, 6vw, 6rem);
    margin-bottom: clamp(2rem, 4vh, 3.75rem);
  }

  #technology .tech-headline {
    font-size: clamp(2.6rem, 4.4vw, 4rem);
    margin-bottom: 1.5rem;
  }

  #technology .tech-desc {
    font-size: clamp(0.95rem, 1.1vw, 1.08rem);
    line-height: 1.75;
    max-width: 500px;
  }

  #technology .tech-tags-side {
    gap: clamp(1rem, 2vh, 1.4rem);
  }

  #technology .tag-row {
    gap: clamp(0.7rem, 1.2vw, 1rem);
  }

  #technology .tech-pill {
    padding: clamp(0.6rem, 1.2vh, 0.85rem) clamp(1rem, 1.5vw, 1.35rem);
    font-size: clamp(0.82rem, 0.95vw, 0.98rem);
  }

  #technology .tech-bottom-banner {
    padding-top: clamp(1.5rem, 3vh, 2.5rem);
  }

  /* PHILOSOPHY: enlarge the statement/orb and distribute the cards vertically. */
  #philosophy {
    padding-block: clamp(2rem, 4vh, 3.5rem);
  }

  #philosophy > .container {
    display: flex;
    align-items: center;
  }

  #philosophy .manifesto-layout {
    width: 100%;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: clamp(3rem, 6vw, 6rem);
  }

  #philosophy .manifesto-left {
    gap: clamp(2rem, 3vw, 3.5rem);
  }

  #philosophy .sonar-orb-wrap {
    width: clamp(160px, 16vw, 220px);
    height: clamp(160px, 16vw, 220px);
  }

  #philosophy .sonar-core {
    width: clamp(62px, 6vw, 78px);
    height: clamp(62px, 6vw, 78px);
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  }

  #philosophy .manifesto-headline {
    font-size: clamp(2.45rem, 4vw, 3.8rem);
    line-height: 1.12;
  }

  #philosophy .manifesto-right {
    gap: clamp(1.15rem, 2.4vh, 1.8rem);
  }

  #philosophy .manifesto-card {
    min-height: clamp(100px, 13vh, 135px);
    padding: clamp(1.3rem, 2.3vh, 1.8rem) clamp(1.5rem, 2.2vw, 2rem);
    border-radius: 20px;
  }

  #philosophy .m-card-icon {
    width: clamp(48px, 5vh, 58px);
    height: clamp(48px, 5vh, 58px);
  }

  #philosophy .m-card-text h4 {
    font-size: clamp(1.08rem, 1.3vw, 1.28rem);
  }

  #philosophy .m-card-text p {
    font-size: clamp(0.86rem, 1vw, 0.98rem);
  }

  /* CONTACT: center the complete two-column composition within the viewport. */
  #intake {
    padding-block: clamp(1.4rem, 2.8vh, 2.5rem);
  }

  #intake > .container {
    display: flex;
    align-items: center;
  }

  #intake .intake-layout {
    width: 100%;
    grid-template-columns: minmax(320px, 0.8fr) minmax(600px, 1.2fr);
    gap: clamp(3rem, 5vw, 5rem);
    align-items: center;
  }

  #intake .intake-headline {
    font-size: clamp(2.75rem, 4.3vw, 4rem);
  }

  #intake .intake-lead {
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.7;
    max-width: 470px;
  }

  #intake .intake-card-box {
    padding: clamp(1.45rem, 2.3vh, 2.15rem);
    border-radius: 24px;
  }

  #intake .structured-form,
  #intake .form-field-side {
    gap: clamp(0.8rem, 1.5vh, 1.2rem);
  }

  /* HOME already has the richest composition; simply center it in the shell
     and let its visual/copy scale with viewport height. */
  #hero {
    padding-block: clamp(1.5rem, 3vh, 2.75rem);
  }

  #hero .hero-inner {
    min-height: 100%;
    align-items: center;
  }
}

/* Short laptop screens: preserve the full-screen feel without clipping. */
@media (min-width: 901px) and (max-height: 760px) {
  .section-defines .six-card-grid,
  .section-build .six-card-grid {
    min-height: 330px;
  }

  #how-we-work .dark-panel-container,
  #technology .tech-panel {
    justify-content: flex-start;
  }

  #how-we-work .panel-heading {
    margin-bottom: 2rem;
  }

  #philosophy .sonar-orb-wrap {
    width: 150px;
    height: 150px;
  }

  #philosophy .manifesto-headline {
    font-size: clamp(2rem, 3.3vw, 3rem);
  }
}

/* Tablet/mobile keeps natural vertical flow inside the available panel. */
@media (max-width: 900px) {
  .app-section > .container {
    min-height: 100%;
  }

  .section-defines > .container,
  .section-build > .container,
  #philosophy > .container,
  #intake > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ========================================================================== 
   FULL-WIDTH DARK STAGES — HOW WE WORK + TECHNOLOGY
   These two viewport sections intentionally break out of the site's normal
   max-width container so the dark visual stage spans the full app viewport,
   matching the immersive feel of the Home section.
   ========================================================================== */
#how-we-work,
#technology {
  padding-left: 0;
  padding-right: 0;
}

#how-we-work > .container,
#technology > .container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

#how-we-work .dark-panel-container,
#technology .dark-panel-container {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

/* Preserve the visual breathing room of the original bounded panels while
   allowing the background itself to run edge-to-edge. */
@media (min-width: 901px) {
  #how-we-work .dark-panel-container,
  #technology .dark-panel-container {
    padding-left: clamp(3rem, 6vw, 7rem);
    padding-right: clamp(3rem, 6vw, 7rem);
  }
}

@media (max-width: 900px) {
  #how-we-work .dark-panel-container,
  #technology .dark-panel-container {
    padding-left: clamp(1.25rem, 5vw, 2rem);
    padding-right: clamp(1.25rem, 5vw, 2rem);
  }
}

/* ========================================================================== 
   EDGE-TO-EDGE DARK VIEWPORT FIX
   Remove the light top/bottom gutters around How We Work and Technology.
   The section itself and its dark stage now fill the complete content viewport.
   ========================================================================== */
#how-we-work,
#technology {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #030308;
}

#how-we-work > .container,
#technology > .container {
  height: 100%;
  min-height: 100%;
}

#how-we-work .dark-panel-container,
#technology .dark-panel-container,
#technology .tech-panel {
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* ========================================================================== 
   FINAL DARK VIEWPORT ALIGNMENT — HOW WE WORK + TECHNOLOGY
   Keep the dark canvas edge-to-edge, but put the actual content back on the
   same 1240px horizontal grid used by every other section. Also use one exact
   dark colour from header through content to footer, with no separator lines.
   ========================================================================== */
:root {
  --shell-dark-solid: #030308;
}

/* One continuous dark surface. */
body.home-page,
.site-header,
.site-header.scrolled,
.site-footer {
  background: var(--shell-dark-solid) !important;
}

/* The 1px header/footer separators were visible as horizontal seams on dark
   sections. Removing them makes the dark viewport visually continuous. */
.site-header,
.site-header.scrolled {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.site-footer {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* When either dark section is selected, ensure the shell behind it is dark as
   well, so no light colour can appear during layout/scroll/transitions. */
.site-content:has(#how-we-work.active),
.site-content:has(#technology.active) {
  background: var(--shell-dark-solid) !important;
}

#how-we-work,
#technology {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--shell-dark-solid) !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Restore the SAME site content width/alignment as Home and the light
   sections. The dark background remains full width because it belongs to the
   section itself, not to this container. */
#how-we-work > .container,
#technology > .container {
  width: 100% !important;
  max-width: 1240px !important;
  height: 100% !important;
  min-height: 100% !important;
  margin-inline: auto !important;
  padding-inline: 1.5rem !important;
  display: flex;
  align-items: stretch;
}

/* Remove the old panel-within-a-panel appearance. The panel and surrounding
   canvas now share exactly the same colour; only the content/grid is bounded. */
#how-we-work .dark-panel-container,
#technology .dark-panel-container,
#technology .tech-panel {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  background: var(--shell-dark-solid) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  box-sizing: border-box;
}

/* The container already supplies the site's standard 24px edge inset. Avoid
   adding a second 6vw horizontal inset that made these sections misalign. */
@media (min-width: 901px) {
  #how-we-work .dark-panel-container,
  #technology .dark-panel-container,
  #technology .tech-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 900px) {
  #how-we-work > .container,
  #technology > .container {
    padding-inline: 1.25rem !important;
  }

  #how-we-work .dark-panel-container,
  #technology .dark-panel-container,
  #technology .tech-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ==========================================================================\n   PHILOSOPHY COPY REBALANCE\n   Keep the revised three-sentence statement visually anchored to the same\n   page grid while giving the longer lines enough horizontal breathing room.\n   ========================================================================== */
@media (min-width: 901px) {
  #philosophy .manifesto-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    gap: clamp(3rem, 5vw, 5rem);
  }

  #philosophy .manifesto-left {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(1.25rem, 2.5vh, 2rem);
  }

  #philosophy .sonar-orb-wrap {
    margin-left: 0;
  }

  #philosophy .manifesto-headline {
    max-width: 760px;
    font-size: clamp(2.35rem, 3.45vw, 3.45rem);
    line-height: 1.13;
    text-wrap: balance;
  }
}

@media (max-width: 900px) {
  #philosophy .manifesto-headline {
    text-wrap: balance;
  }
}


/* ==========================================================================\n   2026-09-05 RE-AUDIT FIXES\n   ========================================================================== */

/* Desktop intake uses a light card: stronger dark labels improve contrast. */
#intake label[for="achieve"],
#intake label[for="today"],
#intake label[for="org-type"],
#intake label[for="name"],
#intake label[for="email"],
#intake label[for="company"],
#intake label[for="country"] {
  color: #111827;
  font-weight: 700;
}

#intake .req { color: #dc2626; }

/* The shell footer previously hid all navigation columns. Keep the compact
   fixed-footer treatment on desktop, but expose every existing link. */
@media (min-width: 769px) {
  .site-footer .footer-inner {
    gap: clamp(.8rem, 1.4vw, 1.5rem);
  }

  .site-footer .footer-brand-col {
    gap: .65rem;
  }

  .site-footer .footer-tagline {
    display: none;
  }

  .site-footer .footer-nav-col {
    display: block;
    min-width: 0;
  }

  .site-footer .footer-col-title {
    display: none;
  }

  .site-footer .footer-nav-col ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(.55rem, 1vw, .95rem);
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
  }

  .site-footer .footer-nav-col a {
    font-size: .72rem;
    line-height: 1;
  }

  .site-footer .footer-copyright-col {
    max-width: 235px;
  }
}

/* On small screens keep the compact shell footer readable and expose legal
   links, which are the footer actions users most need from mobile. */
@media (max-width: 768px) {
  :root { --shell-footer-h: 72px; }

  .site-footer .footer-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 34px 18px;
    align-content: center;
    column-gap: .75rem;
    row-gap: 2px;
  }

  .site-footer .footer-brand-col { gap: .4rem; grid-column: 1; grid-row: 1; }
  .site-footer .footer-social-row,
  .site-footer .footer-tagline,
  .site-footer .footer-nav-col:nth-of-type(2),
  .site-footer .footer-nav-col:nth-of-type(3) {
    display: none;
  }

  .site-footer .footer-nav-col:nth-of-type(4) {
    display: block;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .site-footer .footer-nav-col:nth-of-type(4) .footer-col-title { display: none; }
  .site-footer .footer-nav-col:nth-of-type(4) ul {
    flex-direction: row;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-footer .footer-nav-col:nth-of-type(4) a {
    font-size: .64rem;
    white-space: nowrap;
  }

  .site-footer .footer-copyright-col {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    justify-self: start;
  }
  .site-footer .footer-copyright-col p {
    margin: 0;
    font-size: .56rem;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
  }
  .site-footer .footer-copyright-col p br { display: none; }
}


/* ========================================================================== 
   MOBILE CONTINUOUS SCROLL MODE — 2026-09-05
   The desktop experience is a fixed-panel application shell. Mobile/tablet
   intentionally becomes a normal vertically scrolling page so the burger is
   a shortcut, not the only way to discover content.
   ========================================================================== */
@media (max-width: 900px) {
  html.home-page-root, body.home-page {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.home-page {
    background: var(--c-light-bg);
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
  }

  .site-content {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    overflow: visible;
    padding-top: var(--shell-header-h);
    background: var(--c-light-bg);
  }

  .app-section,
  .app-section.active {
    position: relative !important;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: auto !important;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
    z-index: auto;
    scrollbar-gutter: auto;
    scroll-margin-top: calc(var(--shell-header-h) + 12px);
  }

  .hero {
    min-height: calc(100svh - var(--shell-header-h)) !important;
  }

  .section-light,
  .section-dark-panel-wrap {
    min-height: auto;
  }

  .site-footer {
    position: relative;
    z-index: 2;
    left: auto;
    right: auto;
    bottom: auto;
    height: auto;
    min-height: var(--shell-footer-h);
  }

  /* Menu remains an overlay/shortcut. Closing it restores natural page scroll. */
  .mobile-menu {
    position: fixed;
    top: var(--shell-header-h);
    bottom: 0;
    height: auto;
  }
}

/* Crawlable company context: visually integrated, concise and useful to people and search engines. */
.seo-company-context{padding:64px 0;background:#f7f5f0;color:#111;border-top:1px solid rgba(17,17,17,.08)}
.seo-company-context h2{margin:0 0 14px;font-size:clamp(1.5rem,3vw,2.25rem);letter-spacing:-.035em}
.seo-company-context p{max-width:900px;margin:0;color:#4a4a50;font-size:clamp(.95rem,1.5vw,1.05rem);line-height:1.7}
@media(max-width:640px){.seo-company-context{padding:44px 0}}

/* === HOMEPAGE DRAWER === */
/* ═══════════════════════════════════════════════════════════
   drawer.css — Mobile bottom-sheet intake drawer
   Only active on < 768px. Desktop is unaffected.
   ═══════════════════════════════════════════════════════════ */

/* ── Hide desktop section on mobile ── */
@media (max-width: 900px) {
  .desktop-intake {
    display: none !important;
  }
}

/* ── Backdrop ── */
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 20000;
  transition: background 350ms ease;
  -webkit-tap-highlight-color: transparent;
}
.drawer-backdrop.visible {
  display: block;
}
.drawer-backdrop.active {
  background: rgba(0, 0, 0, 0.7);
}

/* ── Drawer shell ── */
.intake-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20010;

  /* Sheet dimensions */
  max-height: 92svh;
  border-radius: 20px 20px 0 0;

  /* Dark surface matching site */
  background: #0d0d1a;
  border-top: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow:
    0 -8px 40px rgba(0, 0, 0, 0.6),
    0 -1px 0 rgba(139, 92, 246, 0.2);

  /* Start offscreen */
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;

  /* Layout */
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Hidden from AT when closed */
  visibility: hidden;
}

.intake-drawer.open {
  transform: translateY(0);
  visibility: visible;
}

/* Dragging state — no transition so it follows finger */
.intake-drawer.dragging {
  transition: none;
}

/* ── Drag handle bar ── */
.drawer-handle-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 4px;
  cursor: grab;
  touch-action: none; /* we handle touch manually */
}
.drawer-handle-bar:active { cursor: grabbing; }

.drawer-handle-pill {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  transition: background 200ms ease;
}
.drawer-handle-bar:hover .drawer-handle-pill {
  background: rgba(139, 92, 246, 0.5);
}

/* ── Drawer header ── */
.drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.drawer-header-copy { flex: 1; }

.drawer-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-violet, #8b5cf6);
  margin-bottom: 0.25rem;
}

.drawer-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 0.375rem;
}

.drawer-subtitle {
  font-size: 0.8125rem;
  color: rgba(232, 232, 240, 0.55);
  line-height: 1.5;
}

/* Close button */
.drawer-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 232, 240, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.drawer-close svg { width: 16px; height: 16px; }
.drawer-close:hover,
.drawer-close:focus-visible {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #ffffff;
}

/* ── Scrollable body ── */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.25rem 1.25rem 2rem;

  /* Subtle inner scroll shadow */
  background:
    linear-gradient(var(--c-bg-1, #0d0d1a) 30%, transparent) top / 100% 20px no-repeat local,
    linear-gradient(transparent, var(--c-bg-1, #0d0d1a) 70%) bottom / 100% 20px no-repeat local,
    linear-gradient(var(--c-bg-1, #0d0d1a), var(--c-bg-1, #0d0d1a)) top / 100% 20px no-repeat scroll,
    linear-gradient(var(--c-bg-1, #0d0d1a), var(--c-bg-1, #0d0d1a)) bottom / 100% 20px no-repeat scroll,
    var(--c-bg-1, #0d0d1a);
}

/* ── Drawer form ── */
.drawer-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* All form-group / select-wrap / checkbox-option / field-error styles
   are already defined in styles.css and apply here too.
   We only need drawer-specific overrides below. */

/* Tighter textarea on mobile */
.drawer-form textarea {
  min-height: 80px;
}

/* Checkbox grid — 2 cols inside drawer */
.drawer-form .checkbox-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Security note at bottom */
.drawer-security-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(232, 232, 240, 0.35);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.drawer-security-note svg {
  width: 13px;
  height: 13px;
  color: var(--c-violet, #8b5cf6);
  flex-shrink: 0;
}

/* ── Only render drawer machinery on mobile ── */
@media (min-width: 901px) {
  .drawer-backdrop,
  .intake-drawer {
    display: none !important;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .intake-drawer {
    transition: visibility 0s, opacity 200ms ease;
    transform: none !important;
    opacity: 0;
  }
  .intake-drawer.open {
    opacity: 1;
  }
}

/* ── Keyboard focus ring inside drawer ── */
.intake-drawer :focus-visible {
  outline: 2px solid var(--c-violet, #8b5cf6);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ==========================================================================\n   2026-09-05 RE-AUDIT — MOBILE FORM CONTRAST\n   ========================================================================== */
@media (max-width: 900px) {
  #intake-drawer .drawer-form label[for="d-achieve"],
  #intake-drawer .drawer-form label[for="d-today"],
  #intake-drawer .drawer-form label[for="d-org-type"],
  #intake-drawer .drawer-form label[for="d-name"],
  #intake-drawer .drawer-form label[for="d-email"],
  #intake-drawer .drawer-form label[for="d-company"],
  #intake-drawer .drawer-form label[for="d-country"] {
    color: #ffffff !important;
    font-weight: 700;
    opacity: 1;
    text-shadow: 0 1px 12px rgba(255,255,255,.10);
  }

  #intake-drawer .drawer-form .req {
    color: #ff6b76 !important;
  }

  #intake-drawer .drawer-form input,
  #intake-drawer .drawer-form select,
  #intake-drawer .drawer-form textarea {
    color: #f8fafc;
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.18);
  }

  #intake-drawer .drawer-form input::placeholder,
  #intake-drawer .drawer-form textarea::placeholder {
    color: rgba(248,250,252,.52);
  }

  #intake-drawer .drawer-form select option {
    color: #111827;
    background: #ffffff;
  }
}

/* === STANDARD INNER PAGES === */
:root {
  --ip-ink: #09090b;
  --ip-ink-2: #101013;
  --ip-ink-3: #15151a;
  --ip-warm: #f3efe6;
  --ip-warm-2: #e9e3d7;
  --ip-paper: #fbf8f1;
  --ip-text: #141416;
  --ip-muted: #706c67;
  --ip-muted-dark: #a8a5ae;
  --ip-line: rgba(16,16,18,.13);
  --ip-line-dark: rgba(255,255,255,.11);
  --ip-violet: #715cff;
  --ip-blue: #568cff;
  --ip-orange: #ff7b3e;
  --ip-pink: #d758ff;
  --ip-max: 1240px;
  --ip-pad: clamp(22px, 4vw, 56px);
  --ip-radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.inner-page { margin: 0; background: var(--ip-ink); color: #fff; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.inner-page a { color: inherit; text-decoration: none; }
body.inner-page button { font: inherit; }
body.inner-page img, body.inner-page svg { max-width: 100%; }
.ip-wrap { width: min(var(--ip-max), calc(100% - (var(--ip-pad) * 2))); margin-inline: auto; }

/* Canonical Catapltr header: same 72px geometry across all inner pages. */
.ip-header { height: 72px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(9,9,11,.97); position: relative; z-index: 60; }
.ip-header-in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ip-brand { display: inline-flex; align-items: center; gap: 9px; justify-self: start; }
.ip-brand strong { font-size: 15px; font-weight: 850; letter-spacing: -.025em; }
.ip-brand-code { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1a1a1e; color: #fff; font-size: 10px; font-weight: 850; border: 1px solid rgba(255,255,255,.06); }
.ip-nav { display: flex; align-items: center; gap: 32px; color: #b8b6bd; font-size: 12px; font-weight: 650; }
.ip-nav a { position: relative; padding: 9px 0; transition: color .18s ease; }
.ip-nav a:hover, .ip-nav a.current { color: #fff; }
.ip-nav a.current::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 18px; height: 1px; background: linear-gradient(90deg, var(--ip-blue), var(--ip-violet), var(--ip-orange)); }
.ip-cta { justify-self: end; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 10px 15px; background: var(--ip-warm); color: #0c0c0f; font-size: 11px; font-weight: 800; transition: transform .18s ease, background .18s ease; }
.ip-cta:hover { transform: translateY(-1px); background: #fff; }
.ip-menu-toggle, .ip-mobile-menu { display: none; }

/* Core typography / layout */
.eyebrow, .kicker { font-size: 10px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; font-weight: 850; }
.eyebrow { color: #9b98a3; margin-bottom: 16px; }
.kicker { color: #6b6762; margin-bottom: 16px; }
.section-dark .kicker, .section-black .kicker { color: #8a8790; }
.gradient-text { background: linear-gradient(92deg, #fff 4%, #938aff 42%, #df61ff 69%, #ff9052); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero { position: relative; overflow: hidden; background: var(--ip-ink); border-bottom: 1px solid rgba(255,255,255,.08); }
.hero::before { content: ""; position: absolute; width: 620px; height: 620px; right: -210px; top: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(113,92,255,.12), rgba(113,92,255,.035) 38%, transparent 68%); pointer-events: none; }
.hero-grid { min-height: 420px; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr); gap: clamp(38px, 6vw, 86px); align-items: center; padding: 48px 0; }
.hero h1 { margin: 0 0 20px; max-width: 780px; font-size: clamp(48px, 5.3vw, 78px); line-height: .95; letter-spacing: -.063em; font-weight: 850; }
.hero-lead { max-width: 620px; margin: 0 0 24px; color: #b9b6c0; font-size: 15px; line-height: 1.67; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 11px 16px; background: var(--ip-warm); color: #0c0c0f; font-size: 11px; font-weight: 850; border: 1px solid transparent; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); background: #fff; }
.button.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.18); }
.button.ghost:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
.visual-panel { position: relative; min-height: 280px; border: 1px solid rgba(255,255,255,.105); border-radius: var(--ip-radius); background: linear-gradient(145deg, rgba(255,255,255,.048), rgba(255,255,255,.012)); overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.015); }
.visual-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--ip-blue), var(--ip-violet), var(--ip-pink), var(--ip-orange)); opacity: .75; }
.visual-caption { position: absolute; left: 18px; bottom: 15px; font-size: 8px; line-height: 1; letter-spacing: .15em; text-transform: uppercase; color: #6e6b74; font-weight: 850; }

.section { padding: clamp(74px, 8vw, 116px) 0; }
.section-light { background: var(--ip-warm); color: var(--ip-text); }
.section-paper { background: var(--ip-paper); color: var(--ip-text); }
.section-dark { background: var(--ip-ink-2); color: #fff; }
.section-black { background: var(--ip-ink); color: #fff; }
.split-head { display: grid; grid-template-columns: minmax(0, .92fr) minmax(300px, .58fr); gap: 80px; align-items: start; margin-bottom: 48px; }
.split-head h2, .statement h2 { margin: 0; font-size: clamp(42px, 5vw, 70px); line-height: .97; letter-spacing: -.058em; font-weight: 850; }
.split-head > p { margin: 8px 0 0; max-width: 500px; font-size: 15px; line-height: 1.72; color: var(--ip-muted); }
.section-dark .split-head > p, .section-black .split-head > p { color: var(--ip-muted-dark); }

/* Reusable editorial rows—not generic card grids. */
.editorial-list { border-top: 1px solid var(--ip-line); }
.editorial-row { display: grid; grid-template-columns: 72px minmax(180px, .55fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 27px 0 30px; border-bottom: 1px solid var(--ip-line); }
.editorial-row .num { font-size: 12px; letter-spacing: .11em; color: #88837c; font-weight: 800; }
.editorial-row h3 { margin: -3px 0 0; font-size: 24px; line-height: 1.08; letter-spacing: -.035em; }
.editorial-row p { max-width: 690px; margin: 0; color: var(--ip-muted); font-size: 14px; line-height: 1.7; }
.section-dark .editorial-list, .section-black .editorial-list { border-color: var(--ip-line-dark); }
.section-dark .editorial-row, .section-black .editorial-row { border-color: var(--ip-line-dark); }
.section-dark .editorial-row p, .section-black .editorial-row p { color: var(--ip-muted-dark); }

.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ip-line-dark); border-bottom: 1px solid var(--ip-line-dark); }
.timeline-step { min-height: 180px; padding: 24px 20px 26px; border-right: 1px solid var(--ip-line-dark); }
.timeline-step:last-child { border-right: 0; }
.timeline-step b { display: block; margin-bottom: 50px; color: #6f6b77; font-size: 11px; letter-spacing: .14em; }
.timeline-step h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.025em; }
.timeline-step p { margin: 0; color: #98949f; font-size: 12px; line-height: 1.6; }

/* About */
.about-visual .brand-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 126px; height: 126px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900; background: radial-gradient(circle at 35% 30%, #2c2a39, #101014 66%); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 55px rgba(113,92,255,.16); }
.about-visual .orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-13deg); width: 270px; height: 160px; border: 1px solid rgba(125,107,255,.32); border-radius: 50%; }
.about-visual .orbit.two { width: 345px; height: 215px; transform: translate(-50%, -50%) rotate(24deg); border-color: rgba(255,123,62,.2); }
.about-visual .dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 14px currentColor; }
.about-visual .d1 { left: 17%; top: 28%; background: var(--ip-blue); color: var(--ip-blue); }
.about-visual .d2 { right: 14%; top: 40%; background: var(--ip-orange); color: var(--ip-orange); }
.about-visual .d3 { left: 35%; bottom: 15%; background: var(--ip-pink); color: var(--ip-pink); }
.about-sequence { position: absolute; left: 18px; right: 18px; bottom: 15px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px 8px; color: #827b91; font-size: 8px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.about-sequence b { color: var(--ip-orange); font-size: 10px; font-weight: 500; }
.about-credential { align-self: center; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.16); color: #99939e; font-size: 10px; line-height: 1.9; letter-spacing: .14em; text-transform: uppercase; }
.about-field { position: absolute; inset: 0; overflow: hidden; }
.field-ray { position: absolute; left: 50%; top: 50%; width: 52%; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(130,107,255,.75), rgba(47,169,255,.35), transparent); opacity: .72; }
.field-ray::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.ray-1 { color: var(--ip-blue); transform: rotate(-24deg); }
.ray-2 { color: var(--ip-orange); transform: rotate(18deg); background: linear-gradient(90deg, rgba(255,123,62,.72), rgba(255,174,105,.25), transparent); }
.ray-3 { color: var(--ip-violet); transform: rotate(156deg); background: linear-gradient(90deg, rgba(113,92,255,.72), rgba(177,121,255,.25), transparent); }
.ray-4 { color: var(--ip-pink); transform: rotate(204deg); background: linear-gradient(90deg, rgba(244,116,196,.68), rgba(113,92,255,.25), transparent); }
.field-node { position: absolute; padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(8,9,14,.72); color: #a9a3b2; font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.node-1 { left: 11%; top: 19%; color: #8ebdff; }.node-2 { right: 9%; top: 22%; color: #f0ae8e; }.node-3 { left: 8%; bottom: 20%; color: #c3a8ff; }.node-4 { right: 8%; bottom: 18%; color: #f4a4cb; }
.principles { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.principles-intro { position: sticky; top: 104px; }
.principles-intro h2 { margin: 0; font-size: clamp(46px, 5vw, 72px); line-height: .96; letter-spacing: -.058em; }

/* Enterprise */
.enterprise-map { position: absolute; inset: 22px; }
.enterprise-map .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 152px; height: 74px; border-radius: 18px; display: grid; place-items: center; text-align: center; background: #17171d; border: 1px solid rgba(126,106,255,.5); font-size: 11px; line-height: 1.2; font-weight: 850; letter-spacing: .06em; }
.enterprise-map .node { position: absolute; width: 112px; height: 50px; display: grid; place-items: center; border-radius: 13px; background: #141418; border: 1px solid rgba(255,255,255,.13); color: #d7d4de; font-size: 9px; letter-spacing: .1em; font-weight: 800; text-transform: uppercase; }
.enterprise-map .n1 { left: 20px; top: 28px; }.enterprise-map .n2 { right: 20px; top: 28px; }.enterprise-map .n3 { left: 20px; bottom: 42px; }.enterprise-map .n4 { right: 20px; bottom: 42px; }
.enterprise-map .link { position: absolute; height: 1px; width: 118px; background: linear-gradient(90deg, rgba(86,140,255,.2), rgba(113,92,255,.75), rgba(255,123,62,.3)); transform-origin: left center; }
.enterprise-map .l1 { left: 127px; top: 59px; transform: rotate(24deg); }.enterprise-map .l2 { right: 127px; top: 59px; transform: rotate(156deg); }.enterprise-map .l3 { left: 127px; bottom: 68px; transform: rotate(-22deg); }.enterprise-map .l4 { right: 127px; bottom: 68px; transform: rotate(202deg); }
.operation-strip { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--ip-line-dark); border-radius: 20px; overflow: hidden; }
.operation-strip article { position: relative; min-height: 220px; padding: 24px 20px; border-right: 1px solid var(--ip-line-dark); }
.operation-strip article:last-child { border-right: 0; }
.operation-strip b { display: block; margin-bottom: 78px; color: #706d78; font-size: 11px; letter-spacing: .14em; }
.operation-strip h3 { margin: 0 0 8px; font-size: 18px; }
.operation-strip p { margin: 0; color: #9b97a2; font-size: 12px; line-height: 1.6; }

/* Product */
.product-rail { position: absolute; left: 28px; right: 28px; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.product-rail::before { content: ""; position: absolute; left: 7%; right: 7%; top: 29px; height: 1px; background: linear-gradient(90deg, var(--ip-blue), var(--ip-violet), var(--ip-orange)); opacity: .7; }
.product-step { position: relative; z-index: 1; text-align: center; }
.product-step b { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 13px; border-radius: 50%; background: #141418; border: 1px solid rgba(255,255,255,.17); font-size: 10px; letter-spacing: .05em; }
.product-step:nth-child(3) b { border-color: rgba(123,102,255,.6); box-shadow: 0 0 28px rgba(113,92,255,.16); }
.product-step span { font-size: 8px; letter-spacing: .11em; color: #8c8992; font-weight: 850; text-transform: uppercase; }
.lifecycle-band { padding: 36px 0; border-top: 1px solid var(--ip-line); border-bottom: 1px solid var(--ip-line); background: var(--ip-paper); color: var(--ip-text); }
.lifecycle-band .ip-wrap { display: grid; grid-template-columns: repeat(5, 1fr); }
.lifecycle-band span { position: relative; padding: 10px 24px; border-right: 1px solid var(--ip-line); font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.lifecycle-band span:last-child { border-right: 0; }
.lifecycle-band span::after { content: "→"; position: absolute; right: -7px; color: #8a8580; }
.lifecycle-band span:last-child::after { display: none; }

/* Lifecycle strip: keep the sequence centered and visible as one connected band. */
.lifecycle-band { padding: 26px 0; background: linear-gradient(180deg, #fbf8f1 0%, #f5f0e7 100%); }
.lifecycle-band .ip-wrap { align-items: stretch; }
.lifecycle-band span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 28px;
  text-align: center;
  white-space: nowrap;
}
.lifecycle-band span::after {
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 900px) {
  .lifecycle-band { padding: 20px 0; }
  .lifecycle-band .ip-wrap {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }
  .lifecycle-band span { min-height: 44px; padding: 8px 4px; font-size: 11px; }
  .lifecycle-band span::after { right: -4px; font-size: 12px; }
}
.dual-track { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.track { border: 1px solid var(--ip-line-dark); border-radius: 22px; padding: 28px; min-height: 310px; background: rgba(255,255,255,.018); }
.track b { font-size: 10px; letter-spacing: .15em; color: #807c87; }
.track h3 { margin: 54px 0 18px; font-size: 30px; letter-spacing: -.045em; }
.track ul { list-style: none; padding: 0; margin: 0; }
.track li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.09); color: #a7a3ad; font-size: 13px; }

/* Cloud */
.cloud-map .cloud-core { position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%); width: 148px; height: 72px; border-radius: 42px 42px 28px 28px; display: grid; place-items: center; background: linear-gradient(145deg, #242238, #131319); border: 1px solid rgba(122,104,255,.55); font-size: 11px; font-weight: 850; }
.cloud-map .cloud-core::before { content: ""; position: absolute; inset: -44px; border: 1px dashed rgba(255,255,255,.10); border-radius: 50%; }
.cloud-map .node { position: absolute; width: 104px; height: 43px; border-radius: 12px; display: grid; place-items: center; background: #141418; border: 1px solid rgba(255,255,255,.13); font-size: 9px; letter-spacing: .1em; color: #cac7d0; font-weight: 800; }
.cloud-map .n1 { left: 22px; top: 28px; }.cloud-map .n2 { right: 22px; top: 28px; }.cloud-map .n3 { left: 22px; bottom: 44px; }.cloud-map .n4 { right: 22px; bottom: 44px; }
.statement { padding: clamp(64px, 7vw, 96px) 0; background: var(--ip-warm); color: var(--ip-text); border-bottom: 1px solid var(--ip-line); }
.statement .ip-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr); gap: 70px; align-items: end; }
.statement p { margin: 0 0 7px; color: var(--ip-muted); font-size: 15px; line-height: 1.7; }
.question-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ip-line); border-bottom: 1px solid var(--ip-line); }
.question { padding: 26px 24px 30px; border-right: 1px solid var(--ip-line); }
.question:last-child { border-right: 0; }
.question b { display: block; margin-bottom: 70px; color: #8d8881; font-size: 11px; letter-spacing: .14em; }
.question h3 { margin: 0 0 8px; font-size: 18px; }
.question p { margin: 0; color: var(--ip-muted); font-size: 12px; line-height: 1.6; }

/* Managed services */
.cycle { position: absolute; width: 220px; height: 220px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.cycle::before { content: ""; position: absolute; inset: 23px; border-radius: 50%; border: 1px solid rgba(113,92,255,.27); }
.cycle-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 94px; height: 94px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: #151519; border: 1px solid rgba(255,255,255,.18); font-size: 10px; font-weight: 850; }
.cycle-label { position: absolute; font-size: 8px; letter-spacing: .11em; text-transform: uppercase; color: #bbb7c2; font-weight: 850; }
.cycle-label.c1 { left: 50%; top: 15px; transform: translateX(-50%); }.cycle-label.c2 { right: -7px; top: 49%; transform: translateY(-50%); }.cycle-label.c3 { left: 50%; bottom: 14px; transform: translateX(-50%); }.cycle-label.c4 { left: -8px; top: 49%; transform: translateY(-50%); }
.ops-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 64px; align-items: center; }
.ops-copy h2 { font-size: clamp(44px,5vw,68px); line-height: .97; letter-spacing: -.055em; margin: 0 0 20px; }
.ops-copy p { color: #aaa6b0; font-size: 14px; line-height: 1.7; max-width: 520px; margin: 0; }
.ops-loop { position: relative; min-height: 430px; border: 1px solid var(--ip-line-dark); border-radius: 26px; background: rgba(255,255,255,.018); }
.ops-loop .ring { position: absolute; width: 250px; height: 250px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.13); }
.ops-loop .ring::after { content: ""; position: absolute; inset: 32px; border-radius: 50%; border: 1px solid rgba(113,92,255,.3); }
.ops-loop .label { position: absolute; padding: 7px 10px; border-radius: 999px; background: #17171c; border: 1px solid rgba(255,255,255,.10); color: #c1bdc7; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; font-weight: 850; }
.ops-loop .l1 { left: 50%; top: 54px; transform: translateX(-50%); }.ops-loop .l2 { right: 40px; top: 50%; transform: translateY(-50%); }.ops-loop .l3 { right: 82px; bottom: 53px; }.ops-loop .l4 { left: 74px; bottom: 53px; }.ops-loop .l5 { left: 38px; top: 50%; transform: translateY(-50%); }
.ops-loop .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 16px; font-weight: 850; letter-spacing: -.03em; }

/* Engineering */
.arch-stack { position: absolute; inset: 28px 36px; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.arch-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 13px; align-items: center; padding: 12px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(255,255,255,.025); }
.arch-row b { font-size: 8px; letter-spacing: .12em; color: #8c8894; }
.arch-row span { font-size: 10px; font-weight: 750; }
.arch-row i { display: block; width: 38px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--ip-blue), var(--ip-violet), var(--ip-orange)); }
.arch-row:nth-child(3) { border-color: rgba(118,98,255,.38); background: rgba(113,92,255,.055); }
.input-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ip-line-dark); border-radius: 22px; overflow: hidden; }
.input-grid::before { content: ""; position: absolute; left: 9%; right: 9%; top: 38%; height: 1px; background: linear-gradient(90deg, rgba(86,140,255,.65), rgba(113,92,255,.7), rgba(255,123,62,.65)); opacity: .55; pointer-events: none; }
.input-grid article { min-height: 250px; padding: 25px 22px; border-right: 1px solid var(--ip-line-dark); }
.input-grid article:last-child { border-right: 0; }
.input-grid b { display: block; margin-bottom: 86px; color: #77737e; font-size: 11px; letter-spacing: .14em; }
.input-grid h3 { margin: 0 0 8px; font-size: 19px; }
.input-grid p { margin: 0; color: #9a96a1; font-size: 12px; line-height: 1.62; }

@media (max-width: 620px) {
  .input-grid::before {
    top: 8%;
    bottom: 8%;
    left: 27px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(86,140,255,.65), rgba(113,92,255,.7), rgba(255,123,62,.65));
  }
  .input-grid article { position: relative; z-index: 1; padding-left: 42px; }
}

/* Case studies */
.work-visual { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 42px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.work-number { position: relative; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(255,255,255,.022); overflow: hidden; padding: 18px; }
.work-number b { font-size: 82px; line-height: 1; font-weight: 900; letter-spacing: -.09em; color: rgba(255,255,255,.095); }
.work-number span { position: absolute; left: 18px; bottom: 20px; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.work-number::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--ip-blue), var(--ip-violet), var(--ip-orange)); }
.work-mini { position: absolute; left: 18px; right: 18px; top: 50%; transform: translateY(-28%); display: grid; gap: 8px; }
.work-mini i { display: block; height: 4px; border-radius: 99px; background: linear-gradient(90deg, rgba(86,140,255,.78), rgba(113,92,255,.3)); }
.work-mini i:nth-child(2) { width: 72%; background: linear-gradient(90deg, rgba(113,92,255,.76), rgba(215,88,255,.24)); }
.work-mini i:nth-child(3) { width: 48%; background: linear-gradient(90deg, rgba(255,123,62,.75), rgba(255,123,62,.2)); }
.work-mini span { position: static; margin-top: 3px; color: #85818a; font-size: 7px; letter-spacing: .13em; }
.work-mini-alt i { background: linear-gradient(90deg, rgba(215,88,255,.72), rgba(113,92,255,.25)); }
.work-mini-alt i:nth-child(2) { width: 60%; background: linear-gradient(90deg, rgba(255,123,62,.74), rgba(215,88,255,.25)); }
.work-mini-alt i:nth-child(3) { width: 82%; background: linear-gradient(90deg, rgba(86,140,255,.68), rgba(113,92,255,.22)); }
.work-list { display: grid; gap: 18px; }
.work-card { position: relative; display: grid; grid-template-columns: .72fr 1.28fr; gap: 52px; min-height: 310px; padding: 34px 38px; border-radius: 26px; border: 1px solid var(--ip-line); background: rgba(255,255,255,.24); overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.work-card:hover { transform: translateY(-2px); border-color: rgba(20,20,22,.24); }
.work-card .case-no { font-size: 98px; line-height: .9; font-weight: 900; letter-spacing: -.08em; color: rgba(20,20,22,.06); }
.work-card h3 { margin: 4px 0 14px; font-size: 38px; letter-spacing: -.05em; }
.work-card p { margin: 0 0 18px; color: var(--ip-muted); font-size: 14px; line-height: 1.65; }
.case-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.case-meta div { padding-top: 14px; border-top: 1px solid var(--ip-line); }
.case-meta b { display: block; margin-bottom: 8px; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: #8a857e; }
.case-meta span { font-size: 11px; line-height: 1.4; }
.work-link { display: inline-flex; gap: 10px; align-items: center; font-size: 11px; font-weight: 850; }

/* Lurry */
.lurry-flow { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.lurry-node { position: relative; min-height: 82px; padding: 13px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: #141418; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.lurry-node::after { content: "→"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: #65616d; z-index: 2; }
.lurry-node:last-child::after { display: none; }
.lurry-node b { color: #6e6a76; font-size: 8px; letter-spacing: .1em; }
.lurry-node span { margin-top: 8px; font-size: 9px; line-height: 1.28; font-weight: 800; }
.lurry-node.ai { border-color: rgba(116,96,255,.48); background: linear-gradient(145deg, #221d35, #141419); }
.ai-decision { padding: clamp(68px, 8vw, 108px) 0; background: #0d0d11; color: #fff; border-top: 1px solid var(--ip-line-dark); border-bottom: 1px solid var(--ip-line-dark); }
.ai-decision-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.ai-decision h2 { margin: 0; font-size: clamp(44px, 5vw, 70px); line-height: .97; letter-spacing: -.058em; }
.decision-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: center; }
.decision-path div { min-height: 120px; padding: 18px 14px; border-radius: 16px; border: 1px solid var(--ip-line-dark); background: rgba(255,255,255,.02); }
.decision-path b { display: block; margin-bottom: 42px; color: #77737e; font-size: 9px; letter-spacing: .12em; }
.decision-path span { font-size: 12px; font-weight: 800; }

/* LexBridgr */
.lex-flow { position: absolute; inset: 30px 20px 42px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; }
.lex-node { position: relative; border: 1px solid rgba(255,255,255,.12); background: #141418; border-radius: 13px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; }
.lex-node b { position: absolute; left: 14px; top: 12px; color: #716e79; font-size: 8px; letter-spacing: .12em; }
.lex-node strong { display: block; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.lex-node span { margin-top: 5px; color: #8f8b96; font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.lex-node.paid { border-color: rgba(255,123,62,.38); }.lex-node.matter { border-color: rgba(113,92,255,.46); background: rgba(113,92,255,.055); }

/* Keep connectors clear of multi-line stage labels. */
.hero.lex-page .lex-node { text-align: left; }
.hero.lex-page .lex-node::after { top: 14px; transform: none; }
.not-equal { padding: clamp(64px, 7vw, 98px) 0; background: var(--ip-ink); color: #fff; border-top: 1px solid var(--ip-line-dark); border-bottom: 1px solid var(--ip-line-dark); }
.not-equal-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .6fr); gap: 68px; align-items: center; }
.not-equal h2 { margin: 0; font-size: clamp(40px, 4.8vw, 68px); line-height: .98; letter-spacing: -.058em; }
.not-equal h2 span { display: block; color: var(--ip-orange); font-size: .58em; line-height: 1.2; }
.not-equal p { margin: 0; color: #aaa6b0; font-size: 15px; line-height: 1.72; }
.domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.domain { min-height: 300px; padding: 28px; border-radius: 22px; border: 1px solid var(--ip-line); background: rgba(255,255,255,.2); }
.domain b { font-size: 9px; letter-spacing: .15em; color: #89847e; }
.domain h3 { margin: 70px 0 11px; font-size: 24px; letter-spacing: -.04em; }
.domain p { margin: 0; color: var(--ip-muted); font-size: 13px; line-height: 1.66; }

/* Unique closing bands */
.closing { position: relative; overflow: hidden; padding: clamp(68px, 7vw, 98px) 0; background: var(--ip-ink); color: #fff; border-top: 1px solid var(--ip-line-dark); }
.closing::after { content: ""; position: absolute; width: 420px; height: 420px; right: -170px; bottom: -290px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 0 1px rgba(113,92,255,.18), 0 0 75px rgba(113,92,255,.08); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr); gap: 70px; align-items: end; position: relative; z-index: 1; }
.closing h2 { margin: 0 0 18px; max-width: 800px; font-size: clamp(40px, 4.6vw, 66px); line-height: .98; letter-spacing: -.055em; }
.closing p { margin: 0 0 22px; max-width: 660px; color: #aaa6b0; font-size: 14px; line-height: 1.7; }
.closing-side { align-self: end; color: #77737d; font-size: 10px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.closing-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.closing-side-button { color: #fff; border-color: rgba(255,255,255,.28); font-size: 11px; letter-spacing: normal; text-transform: none; }
.closing-side-button:hover { border-color: rgba(255,255,255,.55); }

/* Footer */
.ip-footer { background: #070709; border-top: 1px solid rgba(255,255,255,.08); }
.ip-footer-in { min-height: 112px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.ip-footer-brand { display: flex; align-items: center; gap: 24px; }
.ip-footer-brand p { margin: 0; color: #66636c; font-size: 10px; }
.ip-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; color: #a19ea7; font-size: 10px; }
.ip-footer a:hover { color: #fff; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr); gap: 40px; min-height: 400px; }
  .hero h1 { font-size: clamp(46px, 6vw, 66px); }
  .split-head { grid-template-columns: 1fr .62fr; gap: 48px; }
  .principles { gap: 48px; }
  .operation-strip article { padding-inline: 16px; }
  .work-card { gap: 30px; }
  .lurry-node span { font-size: 8px; }
}

@media (max-width: 900px) {
  .ip-header { height: 64px; }
  .ip-header-in { grid-template-columns: 1fr auto auto; gap: 10px; }
  .ip-nav { display: none; }
  .ip-cta { padding: 9px 13px; }
  .ip-menu-toggle { display: inline-flex; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: transparent; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0; cursor: pointer; }
  .ip-menu-toggle span { display: block; width: 14px; height: 1px; background: #fff; transition: transform .18s ease, opacity .18s ease; }
  .ip-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }.ip-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.ip-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .ip-mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: rgba(9,9,11,.99); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.10); padding: 10px var(--ip-pad) 14px; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
  .ip-mobile-menu:not([hidden]) { display: grid; }
  .ip-mobile-menu a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #c4c1ca; font-size: 13px; font-weight: 650; }
  .ip-mobile-menu a:last-child { border-bottom: 0; color: #fff; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; padding: 50px 0 44px; gap: 34px; }
  .hero h1 { font-size: clamp(48px, 10vw, 68px); }
  .hero-lead { max-width: 680px; }
  .visual-panel { min-height: 260px; }
  .section { padding: 72px 0; }
  .split-head, .statement .ip-wrap, .closing-grid, .ai-decision-grid, .not-equal-grid { grid-template-columns: 1fr; gap: 28px; }
  .split-head { margin-bottom: 36px; }
  .principles { grid-template-columns: 1fr; gap: 36px; }
  .principles-intro { position: static; }
  .editorial-row { grid-template-columns: 56px minmax(150px,.42fr) 1fr; gap: 20px; }
  .timeline, .operation-strip { grid-template-columns: repeat(3, 1fr); }
  .timeline-step:nth-child(3), .operation-strip article:nth-child(3) { border-right: 0; }
  .timeline-step:nth-child(n+4), .operation-strip article:nth-child(n+4) { border-top: 1px solid var(--ip-line-dark); }
  .lifecycle-band .ip-wrap { grid-template-columns: repeat(5, minmax(110px, 1fr)); overflow-x: auto; }
  .dual-track { grid-template-columns: 1fr; }
  .question-grid, .input-grid { grid-template-columns: repeat(2, 1fr); }
  .question:nth-child(2), .input-grid article:nth-child(2) { border-right: 0; }
  .question:nth-child(n+3), .input-grid article:nth-child(n+3) { border-top: 1px solid var(--ip-line); }
  .input-grid article:nth-child(n+3) { border-top-color: var(--ip-line-dark); }
  .ops-layout { grid-template-columns: 1fr; gap: 36px; }
  .work-card { grid-template-columns: 1fr; min-height: 0; }
  .work-card .case-no { font-size: 72px; }
  .lurry-flow { grid-template-columns: repeat(3, 1fr); row-gap: 12px; top: 48%; }
  .lurry-node:nth-child(3)::after { display: none; }
  .decision-path { grid-template-columns: repeat(2, 1fr); }
  .domain-grid { grid-template-columns: 1fr; }
  .ip-footer-in { padding: 26px 0; min-height: 0; align-items: flex-start; flex-direction: column; }
  .ip-footer-brand { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (max-width: 620px) {
  .ip-wrap { width: calc(100% - 32px); }
  .ip-header-in { width: calc(100% - 28px); }
  .ip-header > .ip-wrap { width: calc(100% - 28px); }
  .ip-cta { display: none; }
  .hero::before { width: 400px; height: 400px; right: -220px; top: -140px; }
  .hero-grid { padding: 42px 0 38px; }
  .hero h1 { font-size: clamp(44px, 13vw, 58px); }
  .hero-lead { font-size: 14px; }
  .visual-panel { min-height: 245px; border-radius: 20px; }
  .section { padding: 62px 0; }
  .split-head h2, .statement h2 { font-size: clamp(40px, 12vw, 54px); }
  .editorial-row { grid-template-columns: 44px 1fr; gap: 14px; }
  .editorial-row p { grid-column: 2; }
  .timeline, .operation-strip, .question-grid, .input-grid { grid-template-columns: 1fr; }
  .timeline-step, .operation-strip article, .question, .input-grid article { border-right: 0 !important; border-top: 1px solid var(--ip-line-dark); min-height: 0; }
  .timeline-step:first-child, .operation-strip article:first-child, .question:first-child, .input-grid article:first-child { border-top: 0; }
  .question, .input-grid article { border-top-color: var(--ip-line) !important; }
  .input-grid article { border-top-color: var(--ip-line-dark) !important; }
  .timeline-step b, .operation-strip b, .question b, .input-grid b { margin-bottom: 32px; }
  .enterprise-map .node { width: 88px; }.enterprise-map .core { width: 126px; }.enterprise-map .link { display: none; }
  .product-rail { left: 10px; right: 10px; grid-template-columns: repeat(5, 70px); overflow: hidden; }.product-step b { width: 48px; height: 48px; }.product-step span { font-size: 7px; }
  .cloud-map .node { width: 88px; }
  .ops-loop { min-height: 340px; }.ops-loop .ring { width: 215px; height: 215px; }.ops-loop .l2 { right: 12px; }.ops-loop .l5 { left: 12px; }
  .arch-stack { inset: 24px 16px; }.arch-row { grid-template-columns: 65px 1fr; }.arch-row i { display: none; }
  .work-visual { inset: 14px; }.work-number b { font-size: 64px; }.work-number span { font-size: 7px; }
  .work-card { padding: 28px; }.work-card h3 { font-size: 32px; }.case-meta { grid-template-columns: 1fr; }
  .work-page .visual-panel { min-height: 225px; }
  .work-page .work-visual { top: 14px; left: 14px; right: 14px; bottom: 34px; }
  .lurry-flow { grid-template-columns: repeat(3, 1fr); left: 10px; right: 10px; gap: 6px; }.lurry-node { min-height: 72px; padding: 8px 4px; }.lurry-node b { font-size: 7px; }.lurry-node span { font-size: 7px; }
  .decision-path { grid-template-columns: 1fr; }
  .lex-flow { inset: 18px 12px 40px; gap: 8px; }.lex-node { padding: 10px; }.lex-node b { left: 10px; top: 9px; }.lex-node strong { font-size: 9px; }.lex-node span { font-size: 7px; }
  .closing { padding-bottom: 108px; }.closing::after { width: 300px; height: 300px; right: -155px; bottom: -210px; }
}

/* === AI ENGINEERING === */
:root{
  --ai-ink:#050909;
  --ai-paper:#f7f3ec;
  --ai-paper2:#f1ece3;
  --ai-text:#f7f7f5;
  --ai-muted:#a9adad;
  --ai-light-muted:#5e6262;
  --ai-line:rgba(255,255,255,.18);
  --ai-darkline:#d8d1c7;
  --ai-violet:#8b5cf6;
  --ai-blue:#398cff;
  --ai-orange:#ff8a3d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.ai-engineering-page {margin:0;background:var(--ai-ink);color:var(--ai-text);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.ai-engineering-page a {color:inherit}
.ai-wrap{width:min(1376px,calc(100% - 160px));margin:0 auto}

/* header */
.ai-header{height:104px;background:#050909;border-bottom:1px solid var(--ai-line);position:relative;z-index:20}
.ai-header-in{height:100%;display:flex;align-items:center;justify-content:space-between}
.ai-brand{display:flex;align-items:center;color:#fff;text-decoration:none}
.ai-brand strong{font-size:35px;line-height:1;font-weight:900;letter-spacing:-2.2px}
.ai-brand span{display:grid;place-items:center;margin-left:15px;width:47px;height:47px;border:1px solid #8b8f8f;border-radius:50%;font-size:14px;font-weight:800;letter-spacing:-1px}
.ai-nav{display:flex;align-items:center;gap:48px}
.ai-nav a{color:#f2f2ef;text-decoration:none;font-size:15px;font-weight:500}
.ai-nav .cta{color:#070909;background:#fff;padding:16px 29px;border-radius:999px;font-weight:700;margin-left:23px;box-shadow:0 1px 0 rgba(255,255,255,.45)}

/* hero */
.hero{height:824px;overflow:hidden;background:radial-gradient(circle at 70% 47%,rgba(50,74,160,.09),transparent 36%),#050909}
.hero-grid{height:100%;display:grid;grid-template-columns:44% 56%;align-items:center}
.hero-copy{position:relative;z-index:6;padding-bottom:6px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.28em;margin:0 0 34px;text-transform:uppercase}
.eyebrow.dark{color:#101313}
.hero h1{font-size:144px;line-height:.84;letter-spacing:-.073em;margin:0 0 34px;font-weight:800}
.hero h1 span{background:linear-gradient(98deg,#6b65ff 0%,#a967ef 46%,#ec7eb3 67%,#ff9150 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:21px;line-height:1.48;max-width:610px;margin:0 0 28px;color:#f0f0ee}
.verbs{font-size:11px;letter-spacing:.15em;font-weight:800;word-spacing:7px;margin:0 0 31px;white-space:nowrap}
.verbs i{font-style:normal;color:#7f8383}
.hero-actions{display:flex;align-items:center;gap:36px}
.hero-actions p{margin:0;padding-left:31px;border-left:1px solid #858888;color:#d2d3d1;font-size:16px;line-height:1.4}
.button{display:inline-block;text-decoration:none;border-radius:999px;padding:17px 28px;font-size:14px;font-weight:700}
.button.light{background:#fff;color:#070909}
.hero-visual{height:100%;position:relative;display:grid;place-items:center;transform:translate(-4px,9px)}
.orb{width:418px;height:418px;border-radius:50%;position:relative;z-index:3;background:radial-gradient(circle at 46% 40%,#25282b 0,#111315 56%,#070808 100%);box-shadow:0 0 72px rgba(71,76,255,.13), inset 0 0 52px rgba(75,75,110,.12);display:grid;place-items:center}
.orb:before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:3px;background:linear-gradient(115deg,#338dff 0%,#536cff 17%,#7b5fff 34%,#c56bdc 57%,#ff8d43 79%,#ffab67 89%,#5084ff 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 16px rgba(91,100,255,.45)) drop-shadow(9px -2px 12px rgba(255,138,61,.16))}
.orb:after{content:"";position:absolute;inset:7px;border-radius:50%;box-shadow:inset 0 0 35px rgba(93,71,255,.12)}
.code-mark{font-size:92px;font-weight:900;letter-spacing:-11px;color:#fff;transform:translateX(-5px)}
.orbit{position:absolute;border:1px solid rgba(211,221,231,.34);border-radius:50%;z-index:1}
.orbit-1{width:555px;height:555px}
.orbit-2{width:690px;height:690px;opacity:.82}
.orbit-3{width:835px;height:835px;border-style:dashed;opacity:.42}
.sat{position:absolute;z-index:5;font-size:11px;font-weight:800;letter-spacing:.12em;white-space:nowrap}
.sat:before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:12px;vertical-align:-2px;background:var(--ai-violet);box-shadow:0 0 18px 4px rgba(139,92,246,.68)}
.s1{right:6.5%;top:13.5%}
.s2{right:-1%;top:29.5%}
.s2:before{background:var(--ai-blue);box-shadow:0 0 18px 4px rgba(57,140,255,.60)}
.s3{right:-.5%;bottom:25%}
.s3:before{background:var(--ai-orange);box-shadow:0 0 18px 4px rgba(255,138,61,.58)}
.s4{right:7%;bottom:11.5%}
.s4:before{background:#e6d7ce;box-shadow:0 0 16px 3px rgba(230,215,206,.42)}

/* light sections */
.light-section{background:linear-gradient(95deg,#fbf8f2 0%,#f3ede4 100%);color:#080909}
.practical{min-height:555px;padding:96px 0 92px;display:flex;align-items:center}
.practical-grid,.capabilities-grid{display:grid;grid-template-columns:42% 58%;gap:0;width:100%}
.section-copy{padding-right:88px}
.light-section h2,.workflow h2,.dark-close h2{font-size:78px;letter-spacing:-.06em;line-height:.94;margin:0 0 28px;font-weight:800}
.intro{color:#5b5f5f;font-size:20px;line-height:1.52;max-width:490px;margin:0 0 30px}
.text-link{display:inline-block;text-decoration:none;font-size:14px;font-weight:700}
.pill-dark{background:#070909;color:#fff;padding:15px 27px;border-radius:999px}
.mechanisms{display:grid;grid-template-columns:repeat(3,1fr)}
.mechanisms article{padding:0 44px;border-left:1px solid var(--ai-darkline)}
.icon{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin-bottom:27px;position:relative}
.icon svg{width:32px;height:32px;fill:none;stroke:#111;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rules-icon{background:#ebe7df}
.ai-icon{background:#ddd0ff}
.human-icon{background:#ffdbc1}
.mechanisms h3{font-size:27px;line-height:1.05;margin:0 0 18px;letter-spacing:-.03em}
.mechanisms p{color:#555a5a;line-height:1.68;font-size:17px;margin:0}

/* workflow */
.workflow{min-height:620px;padding:100px 0 92px;display:flex;align-items:center;background:radial-gradient(circle at 69% 47%,rgba(51,115,157,.07),transparent 31%),#050909}
.workflow-grid{display:grid;grid-template-columns:24% 76%;gap:38px;align-items:center;width:100%}
.workflow-copy{padding-right:25px}
.workflow .eyebrow{margin-bottom:31px}
.workflow h2{font-size:76px;margin-bottom:31px}
.workflow h2 span{background:linear-gradient(92deg,#438cff 0%,#8f68ee 48%,#f079a6 67%,#ff8a3d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.workflow-copy p{color:#d0d2d2;font-size:19px;line-height:1.54;max-width:305px;margin:0 0 31px}
.under-link{color:#fff;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;font-size:15px;font-weight:600}
.dark-link{color:#111}
.flow{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr 28px 1fr;align-items:center;position:relative;padding-bottom:84px}
.flow article{position:relative;min-height:318px;border:1px solid #747a7a;border-radius:12px;padding:22px 21px 24px;background:rgba(7,11,11,.56)}
.flow article.active{border-color:#9667ff;box-shadow:inset 0 0 54px rgba(139,92,246,.11),0 0 20px rgba(139,92,246,.07)}
.step-number{display:block;color:#9ba0a0;font-size:11px;letter-spacing:.07em;margin-bottom:26px}
.active .step-number{color:#6d80ff}
.flow-icon{height:48px;display:grid;place-items:center;color:#fff;margin-bottom:12px}
.flow-icon svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.active .flow-icon svg{stroke:#a873ff}
.flow article h3{font-size:18px;margin:0 0 17px;letter-spacing:-.02em}
.flow article p{font-size:13px;color:#c5c8c8;line-height:1.5;margin:0}
.flow>i{font-style:normal;color:#d0d2d2;text-align:center;font-size:18px}
.flow article:first-of-type:after,.flow article:last-of-type:after{content:"";position:absolute;height:44px;border-left:1px dashed #8b8f8f;bottom:-45px;left:50%}
.flow:after{content:"";position:absolute;left:8.5%;right:8.5%;bottom:39px;border-top:1px dashed #8b8f8f}
.feedback{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);width:282px;border:1px solid #727777;border-radius:8px;padding:12px 16px;background:#060a0a;text-align:center;font-size:10px;font-weight:700;letter-spacing:.17em;color:#d6d8d8}

/* capabilities */
.capabilities{min-height:565px;padding:90px 0 86px;display:flex;align-items:center}
.capabilities-grid{grid-template-columns:34% 66%}
.capabilities .section-copy{padding-right:82px}
.capabilities h2{font-size:75px}
.cap-list{display:grid;grid-template-columns:repeat(3,1fr)}
.cap-list article{padding:12px 42px 34px;border-left:1px solid var(--ai-darkline);border-bottom:1px solid var(--ai-darkline);min-height:182px}
.cap-list article:nth-child(n+4){border-bottom:0;padding-top:29px;padding-bottom:10px}
.cap-list b{font-size:37px;line-height:1;background:linear-gradient(90deg,#655dff,#a267ec,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.cap-list article:nth-child(2) b{background:linear-gradient(90deg,#3e8cff,#4c7fff);-webkit-background-clip:text;color:transparent}
.cap-list article:nth-child(3) b,.cap-list article:nth-child(5) b{background:linear-gradient(90deg,#ff9b49,#ff7837);-webkit-background-clip:text;color:transparent}
.cap-list h3{font-size:18px;line-height:1.15;margin:13px 0 11px;letter-spacing:-.02em}
.cap-list p{font-size:15px;color:#5d6161;line-height:1.48;margin:0}

/* closing */
.dark-close{position:relative;overflow:hidden;min-height:515px;padding:92px 0 88px;background:radial-gradient(circle at 78% 56%,rgba(41,58,196,.20),transparent 32%),#050909;display:flex;align-items:center}
.close-grid{position:relative;z-index:3;display:grid;grid-template-columns:59% 41%;align-items:center;width:100%}
.dark-close .eyebrow{margin-bottom:31px}
.close-grid h2{font-size:72px;line-height:.96;max-width:800px;margin-bottom:33px}
.close-list{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 31px}
.close-list span{border:1px solid #707575;border-radius:999px;padding:10px 15px;color:#e3e5e5;font-size:12px}
.close-note{border-left:1px solid #8e9292;padding:7px 0 7px 35px;font-size:20px;line-height:1.5;color:#ececec;margin-left:36px;max-width:260px}
.close-orb{position:absolute;width:760px;height:760px;border-radius:50%;right:-238px;bottom:-555px;background:radial-gradient(circle at 43% 36%,#27292b 0,#111315 56%,#070808 100%);box-shadow:inset 0 0 70px rgba(76,67,151,.14)}
.close-orb:before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:3px;background:linear-gradient(104deg,#3489ff 0%,#6264ff 29%,#a65fe7 52%,#f277b7 70%,#ff8a3d 88%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 18px rgba(79,87,255,.42)) drop-shadow(8px -4px 14px rgba(255,138,61,.18))}

/* footer */
.ai-footer{height:112px;padding:0;border-top:1px solid var(--ai-line);background:#050909}
.footer-in{height:100%;display:flex;align-items:center;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:34px}
.footer-brand .ai-brand strong{font-size:26px;letter-spacing:-1.6px}
.footer-brand .ai-brand span{width:37px;height:37px;font-size:10px;margin-left:10px}
.footer-brand p{color:#8d9191;font-size:12px;margin:0}
.footer-links{display:flex;gap:39px}
.footer-links a{color:#a8aaaa;text-decoration:none;font-size:12px}

@media(max-width:1280px){
  .ai-wrap{width:min(1140px,calc(100% - 88px))}
  .ai-header{height:90px}
  .ai-brand strong{font-size:30px}.ai-brand span{width:42px;height:42px}
  .ai-nav{gap:30px}.ai-nav a{font-size:13px}.ai-nav .cta{padding:14px 22px;margin-left:15px}
  .hero{height:720px}.hero h1{font-size:112px}.lead{font-size:18px;max-width:540px}.hero-grid{grid-template-columns:45% 55%}
  .orb{width:360px;height:360px}.orbit-1{width:485px;height:485px}.orbit-2{width:600px;height:600px}.orbit-3{width:720px;height:720px}
  .light-section h2,.workflow h2,.dark-close h2{font-size:64px}.intro{font-size:17px}.mechanisms h3{font-size:22px}.mechanisms p{font-size:14px}.icon{width:58px;height:58px}
  .practical{min-height:480px;padding:76px 0}.section-copy{padding-right:55px}
  .workflow{min-height:540px;padding:80px 0}.workflow-grid{grid-template-columns:25% 75%;gap:28px}.workflow h2{font-size:62px}.workflow-copy p{font-size:16px}.flow{grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;padding-bottom:70px}.flow article{min-height:270px;padding:19px 16px}.step-number{margin-bottom:20px}.flow article h3{font-size:16px}.flow article p{font-size:11px}.feedback{width:235px}
  .capabilities{min-height:480px;padding:76px 0}.cap-list article{min-height:158px;padding:9px 30px 25px}.cap-list article:nth-child(n+4){padding-top:24px}.cap-list b{font-size:31px}.cap-list h3{font-size:16px}.cap-list p{font-size:13px}
  .dark-close{min-height:450px;padding:76px 0}.close-grid h2{font-size:61px}.close-note{font-size:18px}.close-orb{width:650px;height:650px;right:-205px;bottom:-475px}
  .ai-footer{height:90px}
}

@media(max-width:900px){
  .ai-wrap{width:calc(100% - 40px)}
  .ai-header{height:74px}.ai-brand strong{font-size:25px}.ai-brand span{width:36px;height:36px;font-size:11px}.ai-nav a:not(.cta){display:none}.ai-nav .cta{margin:0;padding:11px 16px;font-size:11px}
  .hero{height:auto}.hero-grid,.practical-grid,.capabilities-grid,.workflow-grid,.close-grid{grid-template-columns:1fr}.hero-copy{padding:70px 0 25px}.hero h1{font-size:clamp(72px,18vw,104px)}.lead{font-size:16px}.verbs{white-space:normal;line-height:2}.hero-actions p{display:none}.hero-visual{height:500px;transform:none}.orb{width:245px;height:245px}.code-mark{font-size:62px}.orbit-1{width:340px;height:340px}.orbit-2{width:420px;height:420px}.orbit-3{width:500px;height:500px}.sat{font-size:8px}.sat:before{width:9px;height:9px;margin-right:7px}
  .practical,.workflow,.capabilities,.dark-close{min-height:0;padding:64px 0}.section-copy{padding-right:0}.mechanisms{grid-template-columns:1fr}.mechanisms article{border-left:0;border-top:1px solid var(--ai-darkline);padding:26px 0}.light-section h2,.workflow h2,.dark-close h2{font-size:50px}.intro{font-size:16px}
  .workflow-grid{gap:42px}.flow{grid-template-columns:1fr;gap:10px;padding-bottom:0}.flow>i{transform:rotate(90deg)}.flow article{min-height:0}.flow article:first-of-type:after,.flow article:last-of-type:after,.flow:after{display:none}.feedback{position:static;transform:none;width:100%;margin-top:8px}
  .capabilities-grid{gap:38px}.cap-list{grid-template-columns:1fr}.cap-list article,.cap-list article:nth-child(n+4){border-left:0;border-bottom:1px solid var(--ai-darkline);padding:22px 0;min-height:0}
  .close-note{margin:0;padding-left:24px}.close-orb{width:430px;height:430px;right:-250px;bottom:-300px}
  .ai-footer{height:auto;padding:28px 0}.footer-in,.footer-brand{align-items:flex-start;flex-direction:column}.footer-in{gap:24px}.footer-brand{gap:14px}.footer-links{flex-wrap:wrap;gap:20px}
}

@media(max-width:520px){
  .ai-wrap{width:calc(100% - 28px)}
  .hero-copy{padding-top:56px}.hero h1{font-size:68px}.hero-visual{height:400px}.orb{width:185px;height:185px}.code-mark{font-size:48px}.orbit-1{width:265px;height:265px}.orbit-2{width:330px;height:330px}.orbit-3{width:395px;height:395px}.s1{right:2%;top:16%}.s2{right:-3%;top:31%}.s3{right:-4%;bottom:26%}.s4{right:2%;bottom:13%}
  .light-section h2,.workflow h2,.dark-close h2{font-size:46px}.footer-links{display:grid}
}
/* V6.1 fidelity corrections from rendered-vs-mockup comparison */
html,body.ai-engineering-page{overflow-x:hidden}
.practical-grid,.workflow-grid,.capabilities-grid,.close-grid{width:auto}
.hero{height:844px;background:radial-gradient(circle at 69% 48%,rgba(51,87,190,.12),transparent 37%),#050909}
.hero-copy{transform:translateY(13px)}
.hero h1{font-size:151px}
.orb:before{padding:3.5px;filter:drop-shadow(0 0 20px rgba(82,92,255,.55)) drop-shadow(10px -1px 15px rgba(255,138,61,.20))}
.practical{min-height:566px;background:linear-gradient(95deg,#fcfaf6 0%,#f6f0e7 100%)}
.intro{font-size:21px}.mechanisms h3{font-size:29px}.mechanisms p{font-size:18px}
.workflow{min-height:628px}.workflow-grid{grid-template-columns:22% 78%;gap:30px}.workflow-copy p{font-size:19px}.flow{grid-template-columns:1fr 27px 1fr 27px 1fr 27px 1fr 27px 1fr}.flow article{min-height:322px}.flow-icon svg{width:39px;height:39px}.feedback{width:340px}
.capabilities{min-height:572px;background:linear-gradient(95deg,#fcfaf6 0%,#f6f0e7 100%)}.cap-list h3{font-size:19px}.cap-list p{font-size:15.5px}
.dark-close{min-height:522px;background:radial-gradient(circle at 79% 55%,rgba(45,62,218,.26),transparent 32%),#050909}.close-orb:before{background:linear-gradient(102deg,#338cff 0%,#5a68ff 27%,#a85fe8 49%,#ed6fc7 60%,#ff8a3d 70%,#ffb067 100%)}
/* V6.2 final alignment to reference proportions */
.practical-grid,.workflow-grid,.capabilities-grid,.close-grid{width:min(1376px,calc(100% - 160px));margin-left:auto;margin-right:auto}
.hero{height:829px}.hero-copy{transform:translateY(24px)}.lead{margin-bottom:34px}.verbs{margin-bottom:38px}
.practical{min-height:554px}.practical-grid{transform:translateY(-18px)}
.workflow{min-height:618px}.workflow-grid{transform:translateY(-14px)}
.capabilities{min-height:567px}.capabilities-grid{transform:translateY(-31px)}
.dark-close{min-height:495px}
@media(max-width:1280px){.practical-grid,.workflow-grid,.capabilities-grid,.close-grid{width:min(1140px,calc(100% - 88px))}.hero-copy{transform:none}.practical-grid,.workflow-grid,.capabilities-grid{transform:none}}
@media(max-width:900px){.practical-grid,.workflow-grid,.capabilities-grid,.close-grid{width:calc(100% - 40px)}}
@media(max-width:520px){.practical-grid,.workflow-grid,.capabilities-grid,.close-grid{width:calc(100% - 28px)}}
/* V6.3 micro-detail pass */
.ai-brand strong{font-size:43px;letter-spacing:-2.7px}.ai-brand span{width:52px;height:52px;font-size:15px}
.ai-nav .cta{min-width:250px;text-align:center}
.hero{height:849px}.hero-copy{transform:translateY(39px)}
.verbs{font-size:13px;letter-spacing:.16em;word-spacing:9px}
.button{min-width:282px;text-align:center;padding:18px 30px;font-size:15px}
.sat{font-size:13px}
.practical{min-height:567px}.practical-grid{transform:translateY(-33px)}
.practical h2{font-size:84px}.practical .intro{font-size:22px}.mechanisms h3{font-size:31px}.mechanisms p{font-size:20px}.pill-dark{min-width:238px;text-align:center;padding:17px 31px;font-size:16px}
.workflow h2{font-size:82px}.workflow-copy p{font-size:21px}.under-link{font-size:17px}.flow article h3{font-size:19px}.flow article p{font-size:14px}
.capabilities{min-height:580px}.capabilities h2{font-size:84px}.capabilities .intro{font-size:22px}.cap-list h3{font-size:21px}.cap-list p{font-size:17px}
.close-grid h2{font-size:69px}.close-orb{right:-182px;bottom:-485px}
.footer-brand .ai-brand strong{font-size:30px}.footer-brand .ai-brand span{width:40px;height:40px}
@media(max-width:1280px){.ai-brand strong{font-size:30px}.ai-brand span{width:42px;height:42px}.ai-nav .cta{min-width:0}.hero-copy{transform:none}.verbs{font-size:11px}.button{min-width:0}.practical-grid{transform:none}.practical h2,.workflow h2,.capabilities h2{font-size:64px}.practical .intro,.capabilities .intro{font-size:17px}.mechanisms h3{font-size:22px}.mechanisms p{font-size:14px}.pill-dark{min-width:0;font-size:14px}.workflow-copy p{font-size:16px}.under-link{font-size:15px}.flow article h3{font-size:16px}.flow article p{font-size:11px}.cap-list h3{font-size:16px}.cap-list p{font-size:13px}.close-grid h2{font-size:61px}.close-orb{right:-205px;bottom:-475px}.footer-brand .ai-brand strong{font-size:26px}.footer-brand .ai-brand span{width:37px;height:37px}}
@media(max-width:900px){.button,.pill-dark{min-width:0}.sat{font-size:8px}}
/* V6.4 section-by-section proportion lock */
.hero{height:829px}.hero-copy{transform:translateY(34px)}
.practical{min-height:555px}.practical-grid{transform:translateY(-24px)}.practical h2{font-size:78px}.practical .intro{font-size:20px}.mechanisms article{padding-left:28px;padding-right:28px}.mechanisms h3{font-size:27px}.mechanisms p{font-size:17px}
.workflow{min-height:618px;padding:96px 0 90px}.workflow-grid{grid-template-columns:23% 77%;gap:28px;transform:translateY(-8px)}.workflow h2{font-size:76px}.workflow-copy p{font-size:19px}.under-link{font-size:15px}.flow article h3{font-size:18px}.flow article p{font-size:13px}
.capabilities{min-height:568px}.capabilities h2{font-size:80px}.capabilities .intro{font-size:20px}.cap-list h3{font-size:18px}.cap-list p{font-size:15px}
.dark-close{min-height:500px;padding:80px 0 82px}.close-grid h2{font-size:69px}
.ai-footer{height:168px}
@media(max-width:1280px){.hero{height:720px}.hero-copy{transform:none}.practical{min-height:480px}.practical h2,.workflow h2,.capabilities h2{font-size:64px}.practical .intro,.capabilities .intro{font-size:17px}.mechanisms article{padding-left:24px;padding-right:24px}.mechanisms h3{font-size:22px}.mechanisms p{font-size:14px}.workflow{min-height:540px;padding:80px 0}.workflow-grid{grid-template-columns:25% 75%;gap:28px;transform:none}.workflow-copy p{font-size:16px}.under-link{font-size:15px}.flow article h3{font-size:16px}.flow article p{font-size:11px}.capabilities{min-height:480px}.cap-list h3{font-size:16px}.cap-list p{font-size:13px}.dark-close{min-height:450px;padding:76px 0}.close-grid h2{font-size:61px}.ai-footer{height:90px}}
/* V6.5 visual-detail corrections */
.hero-copy{transform:translateY(44px)}
.orb:before{padding:4px;filter:drop-shadow(0 0 24px rgba(76,91,255,.62)) drop-shadow(-8px 2px 14px rgba(78,119,255,.22)) drop-shadow(10px -2px 16px rgba(255,138,61,.24))}
.orb{box-shadow:0 0 90px rgba(68,76,255,.14),inset 0 0 58px rgba(88,79,143,.14)}
.practical h2{font-size:80px}.mechanisms article{padding-left:20px;padding-right:20px}.mechanisms h3{font-size:29px}.mechanisms p{font-size:18.5px}.icon{width:78px;height:78px}.icon svg{width:35px;height:35px}
.workflow h2{font-size:74px}.workflow h2 .real-line{display:block;white-space:nowrap;color:#fff}.workflow h2 .real-line em{font-style:normal;background:linear-gradient(92deg,#438cff 0%,#8f68ee 48%,#f079a6 67%,#ff8a3d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.flow{transform:translateY(28px)}.flow article h3{font-size:20px}.flow article p{font-size:14px}.flow-icon svg{width:43px;height:43px}
.capabilities h2{font-size:82px}.cap-list b{font-size:43px}.cap-list h3{font-size:20px}.cap-list p{font-size:17px}
.footer-brand .ai-brand strong{font-size:32px}
@media(max-width:1280px){.hero-copy{transform:none}.practical h2{font-size:64px}.mechanisms article{padding-left:24px;padding-right:24px}.mechanisms h3{font-size:22px}.mechanisms p{font-size:14px}.icon{width:58px;height:58px}.icon svg{width:32px;height:32px}.workflow h2{font-size:62px}.flow{transform:none}.flow article h3{font-size:16px}.flow article p{font-size:11px}.flow-icon svg{width:36px;height:36px}.capabilities h2{font-size:64px}.cap-list b{font-size:31px}.cap-list h3{font-size:16px}.cap-list p{font-size:13px}.footer-brand .ai-brand strong{font-size:26px}}
/* Final mobile cascade reset */
@media(max-width:900px){
  .ai-wrap,.practical-grid,.workflow-grid,.capabilities-grid,.close-grid{width:calc(100% - 40px);margin-left:auto;margin-right:auto}
  .ai-header{height:74px}.ai-header-in{width:calc(100% - 28px)}.ai-brand strong{font-size:25px;letter-spacing:-1.7px}.ai-brand span{width:38px;height:38px;margin-left:10px;font-size:11px}.ai-nav a:not(.cta){display:none}.ai-nav .cta{min-width:0;margin:0;padding:11px 16px;font-size:11px}
  .hero{height:auto;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr;height:auto}.hero-copy{width:100%;transform:none;padding:60px 0 28px}.eyebrow{font-size:11px;margin-bottom:24px}.hero h1{font-size:clamp(68px,20vw,88px);line-height:.88;margin-bottom:26px}.lead{font-size:16px;max-width:100%;margin-bottom:22px}.verbs{font-size:9px;white-space:normal;line-height:1.9;word-spacing:4px;margin-bottom:24px}.hero-actions{gap:18px}.hero-actions p{display:none}.button{min-width:0;padding:14px 20px;font-size:12px}.hero-visual{height:430px;transform:none}.orb{width:210px;height:210px}.code-mark{font-size:54px}.orbit-1{width:292px;height:292px}.orbit-2{width:360px;height:360px}.orbit-3{width:430px;height:430px}.sat{font-size:8px}.sat:before{width:9px;height:9px;margin-right:7px}.s1{right:2%;top:16%}.s2{right:-2%;top:31%}.s3{right:-2%;bottom:25%}.s4{right:3%;bottom:12%}
  .practical,.workflow,.capabilities,.dark-close{min-height:0;padding:62px 0;display:block}.practical-grid,.workflow-grid,.capabilities-grid,.close-grid{grid-template-columns:1fr;gap:40px;transform:none}.section-copy{padding-right:0}.practical h2,.workflow h2,.capabilities h2,.dark-close h2{font-size:48px;line-height:.96}.practical .intro,.capabilities .intro,.workflow-copy p{font-size:16px}.pill-dark{min-width:0;padding:14px 22px;font-size:13px}.mechanisms{grid-template-columns:1fr}.mechanisms article{border-left:0;border-top:1px solid var(--ai-darkline);padding:24px 0}.icon{width:58px;height:58px}.mechanisms h3{font-size:22px}.mechanisms p{font-size:14px}
  .workflow-grid{gap:38px}.workflow h2 .real-line{white-space:normal}.flow{display:grid;grid-template-columns:1fr;gap:10px;padding-bottom:0;transform:none;width:100%}.flow>i{transform:rotate(90deg);font-size:16px}.flow article{min-height:0;padding:20px}.flow article:first-of-type:after,.flow article:last-of-type:after,.flow:after{display:none}.step-number{margin-bottom:15px}.flow-icon svg{width:36px;height:36px}.flow article h3{font-size:16px}.flow article p{font-size:12px}.feedback{position:static;transform:none;width:100%;margin-top:8px}
  .cap-list{grid-template-columns:1fr}.cap-list article,.cap-list article:nth-child(n+4){border-left:0;border-bottom:1px solid var(--ai-darkline);padding:20px 0;min-height:0}.cap-list b{font-size:31px}.cap-list h3{font-size:16px}.cap-list p{font-size:13px}
  .close-list{gap:7px}.close-list span{font-size:10px;padding:8px 11px}.close-note{margin:0;padding-left:22px;font-size:16px}.close-orb{width:420px;height:420px;right:-255px;bottom:-285px}
  .ai-footer{height:auto;padding:28px 0}.footer-in,.footer-brand{flex-direction:column;align-items:flex-start}.footer-in{gap:22px}.footer-brand{gap:12px}.footer-brand .ai-brand strong{font-size:25px}.footer-brand .ai-brand span{width:36px;height:36px}.footer-links{display:flex;flex-wrap:wrap;gap:18px}
}
@media(max-width:520px){
  .ai-wrap,.practical-grid,.workflow-grid,.capabilities-grid,.close-grid{width:calc(100% - 28px)}
  .hero h1{font-size:68px}.hero-visual{height:390px}.orb{width:185px;height:185px}.code-mark{font-size:48px}.orbit-1{width:265px;height:265px}.orbit-2{width:330px;height:330px}.orbit-3{width:395px;height:395px}
  .practical h2,.workflow h2,.capabilities h2,.dark-close h2{font-size:44px}.footer-links{display:grid}
}

/* V7 header refinement — calmer brand hierarchy, centred navigation */
.ai-header{
  height:88px;
  background:rgba(5,9,9,.94);
  border-bottom:1px solid rgba(255,255,255,.11);
  position:relative;
  z-index:20;
}
.ai-header-in{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:28px;
}
.ai-brand{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.ai-brand strong{
  font-size:32px;
  line-height:1;
  font-weight:900;
  letter-spacing:-2.05px;
}
.ai-brand .brand-code{
  margin:0;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:-.8px;
  background:rgba(255,255,255,.018);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}
.ai-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:34px;
  padding:6px 10px;
}
.ai-nav a{
  position:relative;
  color:rgba(247,247,245,.72);
  text-decoration:none;
  font-size:13px;
  line-height:1;
  font-weight:500;
  letter-spacing:-.01em;
  transition:color .18s ease;
}
.ai-nav a:hover,.ai-nav a.current{color:#fff}
.ai-nav a.current:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-13px;
  width:4px;
  height:4px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#9a73ff;
  box-shadow:0 0 10px rgba(154,115,255,.8);
}
.header-cta{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:0 22px;
  border-radius:999px;
  background:#fff;
  color:#070909;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.35),0 10px 28px rgba(0,0,0,.12);
  transition:transform .18s ease,box-shadow .18s ease;
}
.header-cta:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.45),0 14px 32px rgba(0,0,0,.18)}
.header-cta span{font-size:15px;line-height:1;transform:translateY(-.5px)}

@media(max-width:1280px){
  .ai-header{height:82px}
  .ai-brand strong{font-size:29px;letter-spacing:-1.8px}
  .ai-brand .brand-code{width:36px;height:36px;font-size:10px}
  .ai-nav{gap:27px}
  .ai-nav a{font-size:12px}
  .header-cta{min-height:43px;padding:0 19px;font-size:12px}
}
@media(max-width:900px){
  .ai-header{height:72px}
  .ai-header-in{width:calc(100% - 28px);grid-template-columns:1fr auto;column-gap:14px}
  .ai-brand{gap:9px}
  .ai-brand strong{font-size:25px;letter-spacing:-1.65px}
  .ai-brand .brand-code{width:34px;height:34px;font-size:10px}
  .ai-nav{display:none}
  .header-cta{min-height:40px;padding:0 15px;font-size:11px;gap:6px}
  .header-cta span{font-size:13px}
}
@media(max-width:520px){
  .header-cta{padding:0 13px}
  .header-cta{font-size:0}
  .header-cta:before{content:"Talk to us";font-size:11px}
  .header-cta span{font-size:13px}
}

/* V8 geometry + editorial line control — preserve approved visual direction */
@media (min-width:901px){
  /* Keep the hierarchy readable before decorative geometry. */
  .hero-grid{grid-template-columns:47% 53%;}
  .hero-copy{padding-right:26px;}
  .hero h1{font-size:136px;line-height:.86;letter-spacing:-.071em;margin-bottom:32px;}
  .hero h1 .hero-line{display:block;white-space:nowrap;}
  .hero h1 .hero-line-2{display:block;white-space:nowrap;}
  .hero h1 .hero-line-2 .gradient-word{display:inline;background:linear-gradient(98deg,#6b65ff 0%,#a967ef 46%,#ec7eb3 67%,#ff9150 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero-visual{transform:translate(28px,8px);}
  .orb{width:394px;height:394px;}
  .orbit-1{width:530px;height:530px;}
  .orbit-2{width:654px;height:654px;}
  .orbit-3{width:786px;height:786px;}
  .code-mark{font-size:96px;}
  .s1{right:4%;top:15%;}.s2{right:-2%;top:31%;}.s3{right:-2%;bottom:25%;}.s4{right:5%;bottom:12%;}

  .practical-grid{grid-template-columns:40% 60%;align-items:center;}
  .practical .section-copy{padding-right:52px;}
  .practical h2{font-size:72px;white-space:nowrap;letter-spacing:-.055em;}
  .practical .intro{font-size:18px;max-width:445px;}
  .mechanisms article{padding-left:30px;padding-right:26px;}
  .mechanisms h3{font-size:25px;}
  .mechanisms p{font-size:16px;line-height:1.65;}
  .icon{width:66px;height:66px;margin-bottom:24px;}

  .workflow-grid{grid-template-columns:29% 71%;gap:34px;align-items:center;}
  .workflow-copy{padding-right:30px;}
  .workflow h2{font-size:65px;line-height:.93;letter-spacing:-.058em;}
  .workflow-title-line,.workflow h2 .real-line{display:block;white-space:nowrap;}
  .workflow-copy p{font-size:17px;max-width:335px;}
  .flow{grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;}
  .flow article{min-height:300px;padding:21px 18px 22px;}
  .flow article h3{font-size:17px;}
  .flow article p{font-size:12.5px;line-height:1.52;}
  .flow-icon svg{width:39px;height:39px;}

  .capabilities-grid{grid-template-columns:36% 64%;align-items:center;}
  .capabilities .section-copy{padding-right:52px;}
  .capabilities h2{font-size:70px;line-height:.93;}
  .cap-title-line{display:block;white-space:nowrap;}
  .capabilities .intro{font-size:18px;max-width:420px;}
  .cap-list article{padding-left:34px;padding-right:28px;}
  .cap-list b{font-size:38px;}
  .cap-list h3{font-size:18px;}
  .cap-list p{font-size:15px;}

  .close-grid{grid-template-columns:64% 36%;}
  .close-grid h2{font-size:66px;line-height:.94;max-width:none;}
  .close-title-line{display:block;white-space:nowrap;}
  .close-note{margin-left:42px;}
  .close-orb{right:-210px;bottom:-330px;}
}

/* Compact desktop / landscape tablet: keep the editorial breaks from collapsing. */
@media (min-width:901px) and (max-width:1280px){
  .ai-wrap{width:calc(100% - 96px);}
  .hero{height:690px;}
  .hero-grid{grid-template-columns:48% 52%;}
  .hero-copy{padding-right:20px;}
  .hero h1{font-size:104px;line-height:.87;margin-bottom:26px;}
  .lead{font-size:17px;max-width:510px;margin-bottom:22px;}
  .verbs{font-size:9px;word-spacing:4px;margin-bottom:24px;}
  .hero-actions{gap:24px;}.hero-actions p{font-size:13px;padding-left:20px;}
  .button{padding:14px 23px;font-size:12px;}
  .hero-visual{transform:translate(18px,5px);}
  .orb{width:330px;height:330px;}.orbit-1{width:450px;height:450px}.orbit-2{width:555px;height:555px}.orbit-3{width:665px;height:665px}.code-mark{font-size:78px}
  .sat{font-size:9px}.sat:before{width:11px;height:11px;margin-right:8px}

  .practical{min-height:475px;padding:76px 0;}
  .practical-grid{grid-template-columns:40% 60%;}
  .practical .section-copy{padding-right:36px;}
  .practical h2{font-size:56px;}
  .practical .intro{font-size:16px;line-height:1.48;}
  .mechanisms article{padding-left:22px;padding-right:18px;}
  .mechanisms h3{font-size:21px;}.mechanisms p{font-size:13.5px;}.icon{width:54px;height:54px;}.icon svg{width:28px;height:28px;}

  .workflow{min-height:520px;padding:72px 0 68px;}
  .workflow-grid{grid-template-columns:29% 71%;gap:24px;}
  .workflow h2{font-size:53px;}
  .workflow-copy p{font-size:15px;max-width:270px;}
  .flow{grid-template-columns:1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr;padding-bottom:72px;}
  .flow article{min-height:262px;padding:16px 14px 18px;border-radius:10px;}
  .step-number{margin-bottom:18px;}.flow-icon{height:40px;margin-bottom:8px}.flow-icon svg{width:31px;height:31px}
  .flow article h3{font-size:14px;margin-bottom:11px}.flow article p{font-size:10.5px;line-height:1.48}.flow>i{font-size:14px}
  .feedback{width:230px;font-size:8px;padding:9px 12px;}

  .capabilities{min-height:470px;padding:72px 0;}
  .capabilities-grid{grid-template-columns:36% 64%;}
  .capabilities .section-copy{padding-right:34px;}
  .capabilities h2{font-size:56px;}
  .capabilities .intro{font-size:16px;}
  .cap-list article{min-height:150px;padding:8px 24px 25px;}.cap-list article:nth-child(n+4){padding-top:23px;}
  .cap-list b{font-size:31px}.cap-list h3{font-size:14px}.cap-list p{font-size:12px}

  .dark-close{min-height:430px;padding:68px 0;}
  .close-grid{grid-template-columns:65% 35%;}
  .close-grid h2{font-size:52px;line-height:.94;}
  .close-list span{font-size:10px;padding:8px 12px;}
  .close-note{font-size:16px;margin-left:28px;padding-left:22px;}
  .close-orb{right:-205px;bottom:-310px;}
}

/* Preserve the intended mobile stack while allowing deliberate line breaks. */
@media(max-width:900px){
  .hero h1 .hero-line,.hero h1 .hero-line-2,.workflow-title-line,.cap-title-line,.close-title-line{display:block;white-space:normal;}
}

/* V8.1 header + readability tune */
@media (min-width:901px){
  .ai-header{height:84px;}
  .ai-brand strong{font-size:31px;}
  .ai-brand .brand-code{width:36px;height:36px;}
  .ai-nav{gap:32px;}
  .ai-nav a{font-size:14px;color:rgba(247,247,245,.78);}
  .ai-nav a.current:after{bottom:-12px;width:3px;height:3px;box-shadow:0 0 8px rgba(154,115,255,.7);}
  .header-cta{min-height:43px;padding:0 20px;font-size:12.5px;box-shadow:none;}
}
@media (min-width:901px) and (max-width:1280px){
  .ai-header{height:80px;}
  .ai-brand strong{font-size:28px;}
  .ai-brand .brand-code{width:34px;height:34px;}
  .ai-nav{gap:25px;}
  .ai-nav a{font-size:13px;}
  .header-cta{min-height:41px;padding:0 18px;font-size:11.5px;}
  .flow article p{font-size:11.5px;}
  .cap-list p{font-size:12.8px;}
}

/* V9 — Canonical Catapltr header geometry copied from the homepage system.
   Inner-page-specific treatment is limited to the Engineering active state. */
.ai-header{
  height:72px;
  padding:0;
  display:flex;
  align-items:center;
  background:rgba(3,3,8,.96);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:20;
}
.ai-header-in{
  width:100%;
  max-width:1240px;
  height:100%;
  margin-inline:auto;
  padding-inline:24px;
  display:flex;
  align-items:center;
  gap:20px;
}
.ai-brand{
  flex:0 0 auto;
  justify-self:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
}
.ai-brand strong{
  font-size:22px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
}
.ai-brand .brand-code{
  margin:0;
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 35% 35%,#1e1b4b 0%,#0a071b 100%);
  border:1px solid rgba(168,85,247,.4);
  box-shadow:0 0 10px rgba(168,85,247,.25);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:-.02em;
}
.ai-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  margin-left:auto;
  margin-right:auto;
  padding:0;
}
.ai-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:42px;
  padding:0 12px;
  border-radius:999px;
  color:#9ca3af;
  text-decoration:none;
  font-size:12px;
  line-height:1;
  font-weight:650;
  letter-spacing:0;
  white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.ai-nav a:hover,
.ai-nav a.current{
  color:#fff;
  background:rgba(255,255,255,.07);
}
.ai-nav a.current:after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:4px;
  width:auto;
  height:2px;
  border-radius:2px;
  transform:none;
  background:linear-gradient(90deg,#00c8ff,#a855f7);
  box-shadow:none;
}
.header-cta{
  flex:0 0 auto;
  justify-self:auto;
  min-height:0;
  height:auto;
  padding:9px 20px;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#e2e8f0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  text-decoration:none;
  font-size:13px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:0;
  box-shadow:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.header-cta:hover{
  transform:none;
  color:#fff;
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 0 15px rgba(255,255,255,.1);
}
.header-cta span{font-size:13px;line-height:1;transform:none}

@media(max-width:1180px){
  .ai-header-in{padding-inline:20px}
  .ai-nav a{padding-inline:8px;font-size:11px}
  .header-cta{padding:8px 15px;font-size:11.5px}
}
@media(max-width:900px){
  .ai-header{height:64px}
  .ai-header-in{width:100%;padding-inline:20px;gap:14px}
  .ai-brand{gap:8px}
  .ai-brand strong{font-size:21px;letter-spacing:-.03em}
  .ai-brand .brand-code{width:28px;height:28px;font-size:11px}
  .ai-nav{display:none}
  .header-cta{margin-left:auto;padding:8px 14px;font-size:11px}
}
@media(max-width:520px){
  .ai-header-in{padding-inline:16px}
  .header-cta{font-size:0;padding:8px 13px}
  .header-cta:before{content:"Talk to us";font-size:11px}
  .header-cta span{font-size:12px}
}

/* V10 — Option 1 hero: minimal & bold */
.option1-hero{
  position:relative;
  min-height:720px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 48%,rgba(73,84,255,.13),transparent 28%),
    radial-gradient(circle at 83% 48%,rgba(205,67,247,.08),transparent 24%),
    #050909;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.option1-hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(91,117,255,.7) 32%,rgba(219,86,221,.85) 58%,rgba(255,137,62,.75) 76%,transparent 100%);
  opacity:.85;
}
.option1-grid{
  min-height:720px;
  display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,54%);
  align-items:center;
  gap:24px;
  position:relative;
  z-index:2;
}
.option1-copy{
  padding:68px 0 64px;
  position:relative;
  z-index:4;
}
.option1-eyebrow{
  margin:0 0 30px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  letter-spacing:.27em;
  color:#f6f6f2;
}
.option1-copy h1{
  margin:0 0 27px;
  font-size:clamp(92px,8.4vw,132px);
  line-height:.82;
  letter-spacing:-.07em;
  font-weight:800;
  color:#f7f7f5;
}
.option1-copy h1>span{display:block}
.option1-copy h1 em{
  font-style:normal;
  background:linear-gradient(94deg,#586cff 0%,#8b5cf6 31%,#dd6db7 65%,#ff8a3d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.option1-lead{
  max-width:585px;
  margin:0 0 26px;
  color:#eceeed;
  font-size:19px;
  line-height:1.5;
  letter-spacing:-.015em;
}
.option1-verbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center;
  margin:0 0 28px;
  font-size:10px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.16em;
  color:#fff;
}
.option1-verbs i{font-style:normal;color:#6f7474}
.option1-actions{display:flex;align-items:center;gap:28px}
.option1-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:50px;
  padding:0 24px;
  border-radius:999px;
  background:#fff;
  color:#070909;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 8px 28px rgba(0,0,0,.16);
}
.option1-button span{font-size:15px}
.option1-actions p{
  margin:0;
  padding-left:26px;
  border-left:1px solid rgba(255,255,255,.5);
  color:#d9dbda;
  font-size:14px;
  line-height:1.42;
}
.option1-visual{
  position:relative;
  height:620px;
  align-self:end;
  isolation:isolate;
}
.option1-ai-word{
  position:absolute;
  left:7%;
  bottom:31px;
  z-index:4;
  display:flex;
  align-items:flex-end;
  gap:5px;
  font-size:clamp(350px,31vw,490px);
  line-height:.72;
  font-weight:900;
  letter-spacing:-.13em;
  color:#030708;
  -webkit-text-stroke:1px rgba(129,145,255,.38);
  text-shadow:
    -10px 0 28px rgba(46,109,255,.15),
    8px 0 28px rgba(238,82,215,.15),
    24px 6px 34px rgba(255,133,58,.15);
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.55));
}
.option1-a{
  position:relative;
  display:block;
  background:linear-gradient(96deg,#020506 0%,#05080b 62%,#08090b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.option1-i{
  position:relative;
  display:block;
  margin-left:-.06em;
  background:linear-gradient(180deg,#05050a 0%,#06070b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.option1-a:before,.option1-i:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:14% 9% 4% 4%;
  filter:blur(28px);
  opacity:.92;
}
.option1-a:before{background:linear-gradient(145deg,rgba(46,129,255,.7),rgba(130,70,255,.62) 52%,rgba(236,71,220,.5) 78%,rgba(255,135,58,.46))}
.option1-i:before{background:linear-gradient(180deg,rgba(205,65,255,.65),rgba(246,74,187,.62) 57%,rgba(255,140,53,.7))}
.option1-glow{position:absolute;border-radius:50%;filter:blur(58px);opacity:.72;z-index:1;pointer-events:none}
.option1-glow-blue{width:290px;height:290px;left:16%;top:31%;background:rgba(34,100,255,.54)}
.option1-glow-violet{width:270px;height:270px;left:49%;top:28%;background:rgba(167,68,255,.48)}
.option1-glow-orange{width:225px;height:225px;right:4%;bottom:12%;background:rgba(255,120,43,.56)}
.option1-floor-line{
  position:absolute;
  z-index:3;
  left:3%;right:-4%;bottom:43px;height:1px;
  background:linear-gradient(90deg,transparent 0%,#2e75ff 24%,#9c61ef 55%,#ff873b 83%,transparent 100%);
  box-shadow:0 0 20px rgba(95,91,255,.58),0 0 34px rgba(255,132,57,.24);
}
.option1-reflection{
  position:absolute;
  z-index:2;
  left:7%;
  bottom:-36px;
  font-size:clamp(350px,31vw,490px);
  line-height:.72;
  font-weight:900;
  letter-spacing:-.13em;
  color:transparent;
  -webkit-text-stroke:1px rgba(116,97,255,.09);
  transform:scaleY(-.25) skewX(-3deg);
  transform-origin:bottom;
  filter:blur(3px);
  opacity:.34;
  background:linear-gradient(90deg,rgba(42,98,255,.26),rgba(170,61,255,.24),rgba(255,126,52,.28));
  -webkit-background-clip:text;background-clip:text;
}
.option1-statement{
  position:absolute;
  z-index:6;
  right:-1%;
  top:215px;
  width:150px;
  color:#fff;
}
.option1-statement-rule{display:block;width:28px;height:1px;background:#fff;margin-bottom:17px}
.option1-statement p{
  margin:0;
  font-size:13px;
  line-height:1.72;
  letter-spacing:.26em;
  font-weight:500;
}
@media(max-width:1280px){
  .option1-hero,.option1-grid{min-height:650px}
  .option1-grid{grid-template-columns:47% 53%;gap:10px}
  .option1-copy{padding:54px 0}
  .option1-copy h1{font-size:98px}
  .option1-lead{font-size:17px;max-width:520px}
  .option1-visual{height:560px}
  .option1-ai-word,.option1-reflection{font-size:365px;left:6%}
  .option1-statement{right:-2%;top:195px;width:128px}
  .option1-statement p{font-size:11px}
}
@media(max-width:1050px){
  .option1-hero,.option1-grid{min-height:620px}
  .option1-grid{grid-template-columns:52% 48%}
  .option1-copy h1{font-size:86px}
  .option1-lead{font-size:16px}
  .option1-visual{height:520px}
  .option1-ai-word,.option1-reflection{font-size:300px;left:7%}
  .option1-statement{right:-5%;top:190px;width:110px}
  .option1-statement p{font-size:9px;letter-spacing:.22em}
}
@media(max-width:900px){
  .option1-hero{min-height:auto}
  .option1-grid{min-height:auto;grid-template-columns:1fr;gap:0}
  .option1-copy{padding:60px 0 24px}
  .option1-copy h1{font-size:clamp(72px,18vw,98px);margin-bottom:24px}
  .option1-lead{font-size:16px;max-width:620px}
  .option1-actions p{display:none}
  .option1-visual{height:390px;align-self:auto}
  .option1-ai-word,.option1-reflection{font-size:min(54vw,330px);left:14%;bottom:28px}
  .option1-floor-line{left:8%;right:2%;bottom:38px}
  .option1-statement{right:4%;top:120px;width:112px}
  .option1-glow-blue{left:17%;top:23%}.option1-glow-violet{left:50%;top:20%}.option1-glow-orange{right:5%;bottom:4%}
}
@media(max-width:560px){
  .option1-copy{padding-top:48px}
  .option1-eyebrow{font-size:10px;margin-bottom:24px}
  .option1-copy h1{font-size:68px;line-height:.86}
  .option1-lead{font-size:15px;line-height:1.5}
  .option1-verbs{font-size:8px;gap:6px 8px;letter-spacing:.13em}
  .option1-button{min-height:46px;padding:0 19px;font-size:11px}
  .option1-visual{height:320px}
  .option1-ai-word,.option1-reflection{font-size:215px;left:10%;bottom:24px}
  .option1-statement{right:1%;top:96px;width:92px}
  .option1-statement p{font-size:8px;line-height:1.65;letter-spacing:.2em}
  .option1-statement-rule{width:22px;margin-bottom:11px}
  .option1-floor-line{bottom:34px}
  .option1-glow{filter:blur(42px)}
}

/* ========================================================================== 
   V11 — Detail fidelity pass
   Focus: Option 1 hero + Production Engineering closing section.
   The design direction is unchanged; this pass corrects geometry, neon depth,
   typography rhythm, and the relationship between the closing copy and orb.
   ========================================================================== */

@media (min-width: 1281px) {
  /* HERO — closer to the Option 1 concept board */
  .option1-hero {
    min-height: 704px;
    background:
      radial-gradient(ellipse 42% 58% at 69% 47%, rgba(34, 102, 255, .17) 0%, rgba(34, 102, 255, .07) 35%, transparent 68%),
      radial-gradient(ellipse 34% 48% at 78% 44%, rgba(163, 69, 255, .15) 0%, rgba(163, 69, 255, .06) 39%, transparent 70%),
      radial-gradient(ellipse 30% 38% at 89% 64%, rgba(255, 116, 48, .14) 0%, rgba(255, 116, 48, .045) 42%, transparent 72%),
      linear-gradient(90deg, #050909 0%, #05090b 48%, #06090c 100%);
  }
  .option1-grid {
    min-height: 704px;
    grid-template-columns: 45.5% 54.5%;
    gap: 10px;
  }
  .option1-copy {
    padding: 60px 0 52px;
    align-self: center;
  }
  .option1-eyebrow {
    margin-bottom: 27px;
    font-size: 12px;
    letter-spacing: .255em;
  }
  .option1-copy h1 {
    max-width: 610px;
    margin-bottom: 24px;
    font-size: clamp(96px, 7.65vw, 118px);
    line-height: .84;
    letter-spacing: -.067em;
  }
  .option1-copy h1 em {
    background: linear-gradient(96deg, #566dff 0%, #8b5cf6 32%, #d76fbd 64%, #ff8a43 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .option1-lead {
    max-width: 560px;
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.48;
    color: rgba(247, 247, 245, .92);
  }
  .option1-verbs {
    gap: 7px 11px;
    margin-bottom: 27px;
    font-size: 9.5px;
    letter-spacing: .165em;
  }
  .option1-actions { gap: 25px; }
  .option1-button {
    min-height: 48px;
    padding: 0 23px;
    font-size: 12px;
    box-shadow: 0 9px 30px rgba(0, 0, 0, .20);
  }
  .option1-actions p {
    padding-left: 23px;
    font-size: 13px;
    line-height: 1.42;
    color: rgba(240, 241, 239, .82);
  }

  .option1-visual {
    height: 604px;
    align-self: end;
    overflow: visible;
  }
  .option1-visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 4%;
    right: -7%;
    bottom: 29px;
    height: 112px;
    background: radial-gradient(ellipse at center, rgba(72, 93, 255, .22) 0%, rgba(170, 65, 239, .15) 39%, rgba(255, 126, 51, .10) 61%, transparent 76%);
    filter: blur(22px);
    transform: scaleX(1.04);
    pointer-events: none;
  }
  .option1-ai-word {
    left: 5.5%;
    bottom: 31px;
    gap: 2px;
    font-size: clamp(374px, 30.2vw, 462px);
    line-height: .72;
    letter-spacing: -.14em;
    color: #05080b;
    -webkit-text-stroke: 1.2px rgba(118, 116, 255, .48);
    text-shadow: none;
    filter:
      drop-shadow(-12px 0 19px rgba(35, 111, 255, .37))
      drop-shadow(7px 0 19px rgba(169, 65, 255, .28))
      drop-shadow(17px 4px 17px rgba(255, 116, 45, .20))
      drop-shadow(0 24px 25px rgba(0, 0, 0, .62));
  }
  .option1-a,
  .option1-i {
    color: #05080b;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
  }
  .option1-a {
    -webkit-text-stroke-color: rgba(74, 122, 255, .50);
    text-shadow:
      -2px 0 0 rgba(45, 120, 255, .50),
      1px 0 0 rgba(156, 80, 255, .38);
  }
  .option1-i {
    margin-left: -.075em;
    -webkit-text-stroke-color: rgba(203, 78, 244, .48);
    text-shadow:
      -1px 0 0 rgba(174, 71, 255, .48),
      2px 0 0 rgba(255, 126, 52, .48);
  }
  .option1-a::before,
  .option1-i::before { display: none; }

  .option1-glow { filter: blur(72px); opacity: .78; }
  .option1-glow-blue {
    width: 320px;
    height: 320px;
    left: 10%;
    top: 27%;
    background: rgba(35, 105, 255, .44);
  }
  .option1-glow-violet {
    width: 300px;
    height: 300px;
    left: 44%;
    top: 27%;
    background: rgba(163, 65, 255, .36);
  }
  .option1-glow-orange {
    width: 250px;
    height: 250px;
    right: 1%;
    bottom: 5%;
    background: rgba(255, 116, 45, .42);
  }
  .option1-floor-line {
    left: 1%;
    right: -7%;
    bottom: 36px;
    opacity: .72;
    background: linear-gradient(90deg, transparent 0%, rgba(45, 113, 255, .50) 22%, rgba(156, 83, 239, .70) 54%, rgba(255, 126, 53, .82) 79%, transparent 100%);
    box-shadow: 0 0 14px rgba(96, 91, 255, .32), 0 0 22px rgba(255, 128, 54, .18);
  }
  .option1-reflection {
    left: 5.5%;
    bottom: -40px;
    font-size: clamp(374px, 30.2vw, 462px);
    opacity: .13;
    filter: blur(7px);
    transform: scaleY(-.21) skewX(-3deg);
    -webkit-text-stroke: 0;
    background: linear-gradient(90deg, rgba(43, 103, 255, .30), rgba(163, 69, 255, .18) 56%, rgba(255, 123, 47, .27));
    -webkit-background-clip: text;
    background-clip: text;
  }
  .option1-statement {
    right: -1.2%;
    top: 190px;
    width: 142px;
  }
  .option1-statement-rule {
    width: 25px;
    margin-bottom: 14px;
    opacity: .82;
  }
  .option1-statement p {
    font-size: 11px;
    line-height: 1.70;
    letter-spacing: .245em;
    color: rgba(255, 255, 255, .90);
  }

  /* CLOSING — tighten the composition and integrate the orb */
  .dark-close {
    min-height: 430px;
    padding: 68px 0 66px;
    background:
      radial-gradient(ellipse 31% 66% at 77% 48%, rgba(42, 69, 224, .13) 0%, transparent 72%),
      radial-gradient(ellipse 26% 58% at 91% 59%, rgba(145, 69, 224, .10) 0%, transparent 70%),
      #050909;
  }
  .close-grid {
    grid-template-columns: 58% 42%;
    min-height: 292px;
    align-items: center;
  }
  .dark-close .eyebrow {
    margin-bottom: 24px;
    font-size: 11px;
    letter-spacing: .26em;
  }
  .close-grid h2 {
    max-width: 720px;
    margin-bottom: 25px;
    font-size: 60px;
    line-height: .95;
    letter-spacing: -.052em;
  }
  .close-list {
    gap: 8px;
    margin-bottom: 27px;
  }
  .close-list span {
    padding: 8px 13px;
    border-color: rgba(213, 219, 219, .40);
    background: rgba(255, 255, 255, .015);
    font-size: 10px;
    color: rgba(244, 246, 246, .84);
  }
  .dark-close .button.light {
    min-width: 214px;
    padding: 14px 24px;
    font-size: 12px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .20);
  }
  .close-note {
    position: relative;
    z-index: 5;
    justify-self: start;
    align-self: center;
    margin: -10px 0 0 24px;
    max-width: 220px;
    padding: 5px 0 5px 28px;
    border-left-color: rgba(255, 255, 255, .42);
    font-size: 17px;
    line-height: 1.48;
    color: rgba(250, 250, 248, .92);
  }
  .close-orb {
    width: 710px;
    height: 710px;
    right: -160px;
    bottom: -500px;
    background: radial-gradient(circle at 42% 31%, #24272b 0%, #131518 48%, #090b0c 72%, #050707 100%);
    box-shadow:
      inset 0 0 90px rgba(69, 69, 118, .15),
      -24px -12px 90px rgba(51, 99, 255, .08),
      16px -8px 80px rgba(186, 74, 238, .06);
  }
  .close-orb::before {
    inset: -3px;
    padding: 3px;
    background: conic-gradient(from 216deg,
      #348dff 0deg,
      #536cff 44deg,
      #8c62f1 92deg,
      #d56ccc 128deg,
      #ff8a43 161deg,
      rgba(255,138,67,.38) 184deg,
      transparent 214deg,
      transparent 360deg);
    filter: drop-shadow(-8px -2px 18px rgba(57, 111, 255, .35)) drop-shadow(6px -1px 14px rgba(213, 89, 216, .22));
  }
  .close-orb::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    box-shadow: inset 0 0 45px rgba(122, 94, 218, .07);
  }
}

/* Compact desktop fidelity: preserve the same composition instead of flattening it. */
@media (min-width: 901px) and (max-width: 1280px) {
  .option1-hero,
  .option1-grid { min-height: 635px; }
  .option1-grid { grid-template-columns: 46.5% 53.5%; gap: 8px; }
  .option1-copy { padding: 50px 0 46px; }
  .option1-eyebrow { margin-bottom: 24px; font-size: 10px; }
  .option1-copy h1 { font-size: 92px; line-height: .84; margin-bottom: 23px; }
  .option1-lead { max-width: 490px; font-size: 16px; line-height: 1.48; margin-bottom: 22px; }
  .option1-verbs { margin-bottom: 23px; font-size: 8.5px; gap: 6px 9px; }
  .option1-actions { gap: 22px; }
  .option1-actions p { padding-left: 21px; font-size: 12px; }
  .option1-button { min-height: 46px; padding-inline: 21px; font-size: 11px; }

  .option1-visual { height: 548px; }
  .option1-visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 2%; right: -7%; bottom: 29px; height: 95px;
    background: radial-gradient(ellipse at center, rgba(72,93,255,.20), rgba(170,65,239,.12) 42%, rgba(255,126,51,.08) 62%, transparent 77%);
    filter: blur(20px);
  }
  .option1-ai-word {
    left: 3.5%; bottom: 31px;
    font-size: 330px;
    color: #05080b;
    background: none;
    -webkit-text-stroke: 1px rgba(118,116,255,.46);
    text-shadow: none;
    filter: drop-shadow(-10px 0 17px rgba(35,111,255,.34)) drop-shadow(7px 0 17px rgba(169,65,255,.25)) drop-shadow(14px 3px 15px rgba(255,116,45,.18)) drop-shadow(0 20px 22px rgba(0,0,0,.58));
  }
  .option1-a,.option1-i { color:#05080b; background:none; -webkit-background-clip:initial; background-clip:initial; }
  .option1-a::before,.option1-i::before { display:none; }
  .option1-a { text-shadow:-2px 0 0 rgba(45,120,255,.46),1px 0 0 rgba(156,80,255,.32); }
  .option1-i { text-shadow:-1px 0 0 rgba(174,71,255,.42),2px 0 0 rgba(255,126,52,.42); }
  .option1-glow { filter: blur(62px); opacity:.74; }
  .option1-glow-blue { width:260px;height:260px;left:8%;top:28%;background:rgba(35,105,255,.40); }
  .option1-glow-violet { width:240px;height:240px;left:43%;top:29%;background:rgba(163,65,255,.32); }
  .option1-glow-orange { width:205px;height:205px;right:0;bottom:6%;background:rgba(255,116,45,.38); }
  .option1-floor-line { left:0;right:-8%;bottom:37px;opacity:.68; }
  .option1-reflection { left:3.5%;bottom:-31px;font-size:330px;opacity:.11;filter:blur(6px);transform:scaleY(-.20) skewX(-3deg); }
  .option1-statement { right:-1%;top:180px;width:120px; }
  .option1-statement-rule { width:22px;margin-bottom:13px; }
  .option1-statement p { font-size:9px;line-height:1.68;letter-spacing:.23em; }

  .dark-close { min-height: 405px; padding: 64px 0 62px; }
  .close-grid { grid-template-columns: 59% 41%; min-height: 277px; }
  .dark-close .eyebrow { margin-bottom: 22px; font-size: 9.5px; }
  .close-grid h2 { max-width: 610px; margin-bottom: 23px; font-size: 50px; line-height:.96; }
  .close-list { margin-bottom:24px; gap:7px; }
  .close-list span { padding:7px 11px; font-size:9px; }
  .dark-close .button.light { min-width:190px; padding:12px 20px; font-size:11px; }
  .close-note { margin:-6px 0 0 18px; max-width:180px; padding-left:22px; font-size:14px; }
  .close-orb { width:620px;height:620px;right:-170px;bottom:-445px; }
  .close-orb::before {
    background: conic-gradient(from 216deg,#348dff 0deg,#536cff 44deg,#8c62f1 92deg,#d56ccc 128deg,#ff8a43 161deg,rgba(255,138,67,.35) 184deg,transparent 214deg,transparent 360deg);
  }
}

/* Mobile: retain readability; remove desktop-only floor/reflection complexity. */
@media (max-width: 900px) {
  .option1-ai-word {
    color:#05080b;
    background:none;
    -webkit-text-stroke:1px rgba(126,112,255,.43);
    text-shadow:none;
    filter:drop-shadow(-8px 0 14px rgba(35,111,255,.30)) drop-shadow(7px 0 14px rgba(169,65,255,.22)) drop-shadow(11px 2px 12px rgba(255,116,45,.15));
  }
  .option1-a,.option1-i { color:#05080b;background:none;-webkit-background-clip:initial;background-clip:initial; }
  .option1-a::before,.option1-i::before { display:none; }
  .option1-reflection { opacity:.08;filter:blur(6px); }
  .dark-close { background:radial-gradient(circle at 94% 74%,rgba(74,71,210,.14),transparent 35%),#050909; }
  .close-note { position:relative;z-index:3; }
  .close-orb { opacity:.90; }
}

/* ========================================================================== 
   V12 — Compact hero / above-the-fold optimisation
   Reduce hero height ~30–35% while retaining the Option 1 composition.
   ========================================================================== */

@media (min-width: 1281px) {
  .option1-hero,
  .option1-grid {
    min-height: 490px;
  }
  .option1-grid {
    grid-template-columns: 45.5% 54.5%;
    gap: 8px;
  }
  .option1-copy {
    padding: 30px 0 28px;
  }
  .option1-eyebrow {
    margin-bottom: 18px;
    font-size: 10px;
    letter-spacing: .255em;
  }
  .option1-copy h1 {
    max-width: 560px;
    margin-bottom: 17px;
    font-size: clamp(78px, 6.35vw, 96px);
    line-height: .84;
  }
  .option1-lead {
    max-width: 540px;
    margin-bottom: 16px;
    font-size: 15.5px;
    line-height: 1.42;
  }
  .option1-verbs {
    gap: 6px 9px;
    margin-bottom: 18px;
    font-size: 8.2px;
    letter-spacing: .155em;
  }
  .option1-actions {
    gap: 21px;
  }
  .option1-button {
    min-height: 43px;
    padding: 0 20px;
    font-size: 11px;
  }
  .option1-actions p {
    padding-left: 20px;
    font-size: 11.5px;
    line-height: 1.36;
  }

  .option1-visual {
    height: 430px;
  }
  .option1-visual::before {
    left: 4%;
    right: -5%;
    bottom: 19px;
    height: 76px;
    filter: blur(18px);
  }
  .option1-ai-word {
    left: 7%;
    bottom: 21px;
    font-size: clamp(282px, 23.3vw, 350px);
    filter:
      drop-shadow(-10px 0 16px rgba(35, 111, 255, .34))
      drop-shadow(6px 0 15px rgba(169, 65, 255, .25))
      drop-shadow(13px 3px 14px rgba(255, 116, 45, .17))
      drop-shadow(0 18px 20px rgba(0, 0, 0, .56));
  }
  .option1-glow {
    filter: blur(58px);
    opacity: .72;
  }
  .option1-glow-blue {
    width: 245px;
    height: 245px;
    left: 11%;
    top: 24%;
  }
  .option1-glow-violet {
    width: 225px;
    height: 225px;
    left: 45%;
    top: 23%;
  }
  .option1-glow-orange {
    width: 188px;
    height: 188px;
    right: 2%;
    bottom: 3%;
  }
  .option1-floor-line {
    left: 2%;
    right: -4%;
    bottom: 25px;
  }
  .option1-reflection {
    left: 7%;
    bottom: -25px;
    font-size: clamp(282px, 23.3vw, 350px);
    opacity: .10;
    filter: blur(6px);
  }
  .option1-statement {
    right: 0;
    top: 116px;
    width: 128px;
  }
  .option1-statement-rule {
    width: 23px;
    margin-bottom: 11px;
  }
  .option1-statement p {
    font-size: 9.5px;
    line-height: 1.65;
    letter-spacing: .23em;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .option1-hero,
  .option1-grid {
    min-height: 440px;
  }
  .option1-grid {
    grid-template-columns: 48% 52%;
    gap: 4px;
  }
  .option1-copy {
    padding: 26px 0 24px;
  }
  .option1-eyebrow {
    margin-bottom: 17px;
    font-size: 9px;
  }
  .option1-copy h1 {
    margin-bottom: 16px;
    font-size: 76px;
    line-height: .84;
  }
  .option1-lead {
    max-width: 470px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.42;
  }
  .option1-verbs {
    margin-bottom: 16px;
    font-size: 7.5px;
    gap: 5px 7px;
  }
  .option1-actions {
    gap: 17px;
  }
  .option1-button {
    min-height: 41px;
    padding-inline: 18px;
    font-size: 10px;
  }
  .option1-actions p {
    padding-left: 17px;
    font-size: 10.5px;
  }

  .option1-visual {
    height: 390px;
  }
  .option1-visual::before {
    bottom: 18px;
    height: 68px;
    filter: blur(17px);
  }
  .option1-ai-word {
    left: 5%;
    bottom: 20px;
    font-size: 255px;
    filter:
      drop-shadow(-9px 0 14px rgba(35,111,255,.31))
      drop-shadow(6px 0 14px rgba(169,65,255,.23))
      drop-shadow(11px 3px 12px rgba(255,116,45,.16))
      drop-shadow(0 16px 18px rgba(0,0,0,.54));
  }
  .option1-glow-blue { width:210px;height:210px;left:9%;top:23%; }
  .option1-glow-violet { width:195px;height:195px;left:43%;top:24%; }
  .option1-glow-orange { width:165px;height:165px;right:1%;bottom:4%; }
  .option1-floor-line { bottom:24px; }
  .option1-reflection { left:5%;bottom:-22px;font-size:255px; }
  .option1-statement { right:0;top:108px;width:105px; }
  .option1-statement p { font-size:8px;line-height:1.62;letter-spacing:.21em; }
}

@media (max-width: 900px) {
  .option1-copy {
    padding: 42px 0 16px;
  }
  .option1-copy h1 {
    margin-bottom: 18px;
  }
  .option1-lead {
    margin-bottom: 17px;
  }
  .option1-verbs {
    margin-bottom: 18px;
  }
  .option1-visual {
    height: 270px;
  }
  .option1-ai-word,
  .option1-reflection {
    font-size: min(45vw, 260px);
    left: 16%;
    bottom: 18px;
  }
  .option1-floor-line {
    bottom: 24px;
  }
  .option1-statement {
    top: 72px;
  }
}

@media (max-width: 560px) {
  .option1-copy {
    padding-top: 34px;
  }
  .option1-eyebrow {
    margin-bottom: 18px;
  }
  .option1-copy h1 {
    font-size: 61px;
    margin-bottom: 17px;
  }
  .option1-lead {
    font-size: 14px;
    line-height: 1.45;
  }
  .option1-verbs {
    margin-bottom: 17px;
  }
  .option1-visual {
    height: 220px;
  }
  .option1-ai-word,
  .option1-reflection {
    font-size: 176px;
    left: 13%;
    bottom: 15px;
  }
  .option1-statement {
    top: 58px;
    width: 82px;
  }
  .option1-statement p {
    font-size: 7px;
  }
  .option1-floor-line {
    bottom: 20px;
  }
}

/* ========================================================================== 
   V13 — Ultra-compact hero / second above-the-fold optimisation
   ~30% shorter again on desktop, while preserving readability and Option 1.
   ========================================================================== */

@media (min-width: 1281px) {
  .option1-hero,
  .option1-grid {
    min-height: 350px;
  }
  .option1-grid {
    grid-template-columns: 46% 54%;
    gap: 6px;
  }
  .option1-copy {
    padding: 18px 0 16px;
  }
  .option1-eyebrow {
    margin-bottom: 12px;
    font-size: 8.5px;
    letter-spacing: .25em;
  }
  .option1-copy h1 {
    max-width: 500px;
    margin-bottom: 12px;
    font-size: clamp(68px, 5.15vw, 78px);
    line-height: .83;
    letter-spacing: -.068em;
  }
  .option1-lead {
    max-width: 510px;
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.36;
  }
  .option1-verbs {
    gap: 4px 7px;
    margin-bottom: 11px;
    font-size: 6.8px;
    letter-spacing: .145em;
  }
  .option1-actions {
    gap: 15px;
  }
  .option1-button {
    min-height: 36px;
    padding: 0 17px;
    font-size: 9.5px;
  }
  .option1-button span { font-size: 11px; }
  .option1-actions p {
    padding-left: 15px;
    font-size: 9.5px;
    line-height: 1.3;
  }

  .option1-visual {
    height: 310px;
  }
  .option1-visual::before {
    left: 6%;
    right: -3%;
    bottom: 12px;
    height: 54px;
    filter: blur(15px);
  }
  .option1-ai-word {
    left: 11%;
    bottom: 13px;
    font-size: clamp(198px, 17vw, 250px);
    filter:
      drop-shadow(-7px 0 12px rgba(35,111,255,.32))
      drop-shadow(5px 0 11px rgba(169,65,255,.23))
      drop-shadow(9px 2px 10px rgba(255,116,45,.15))
      drop-shadow(0 13px 14px rgba(0,0,0,.54));
  }
  .option1-glow { filter: blur(45px); opacity: .68; }
  .option1-glow-blue { width:175px;height:175px;left:14%;top:23%; }
  .option1-glow-violet { width:165px;height:165px;left:46%;top:22%; }
  .option1-glow-orange { width:140px;height:140px;right:5%;bottom:2%; }
  .option1-floor-line { left:5%;right:-1%;bottom:16px; }
  .option1-reflection {
    left:11%;
    bottom:-16px;
    font-size:clamp(198px,17vw,250px);
    opacity:.08;
    filter:blur(5px);
  }
  .option1-statement {
    right:1%;
    top:74px;
    width:108px;
  }
  .option1-statement-rule { width:19px;margin-bottom:8px; }
  .option1-statement p {
    font-size:7.6px;
    line-height:1.58;
    letter-spacing:.22em;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .option1-hero,
  .option1-grid {
    min-height: 315px;
  }
  .option1-grid {
    grid-template-columns: 49% 51%;
    gap: 2px;
  }
  .option1-copy { padding: 15px 0 14px; }
  .option1-eyebrow { margin-bottom: 11px;font-size: 7.8px; }
  .option1-copy h1 {
    margin-bottom: 11px;
    font-size: 64px;
    line-height: .83;
  }
  .option1-lead {
    max-width: 440px;
    margin-bottom: 9px;
    font-size: 12.2px;
    line-height: 1.34;
  }
  .option1-verbs {
    margin-bottom: 10px;
    font-size: 6.4px;
    gap: 4px 6px;
  }
  .option1-actions { gap: 13px; }
  .option1-button { min-height:34px;padding-inline:15px;font-size:8.8px; }
  .option1-actions p { padding-left:13px;font-size:8.8px; }

  .option1-visual { height: 278px; }
  .option1-visual::before { bottom:12px;height:48px;filter:blur(14px); }
  .option1-ai-word {
    left:8%;
    bottom:13px;
    font-size:188px;
    filter:
      drop-shadow(-7px 0 11px rgba(35,111,255,.29))
      drop-shadow(5px 0 10px rgba(169,65,255,.21))
      drop-shadow(8px 2px 9px rgba(255,116,45,.14))
      drop-shadow(0 12px 13px rgba(0,0,0,.52));
  }
  .option1-glow-blue { width:158px;height:158px;left:11%;top:22%; }
  .option1-glow-violet { width:148px;height:148px;left:44%;top:23%; }
  .option1-glow-orange { width:128px;height:128px;right:4%;bottom:3%; }
  .option1-floor-line { bottom:16px; }
  .option1-reflection { left:8%;bottom:-15px;font-size:188px; }
  .option1-statement { right:1%;top:69px;width:91px; }
  .option1-statement p { font-size:6.7px;line-height:1.55;letter-spacing:.2em; }
}

@media (max-width: 900px) {
  .option1-copy { padding: 32px 0 12px; }
  .option1-eyebrow { margin-bottom: 15px; }
  .option1-copy h1 { margin-bottom: 14px; }
  .option1-lead { margin-bottom: 13px; }
  .option1-verbs { margin-bottom: 14px; }
  .option1-visual { height: 220px; }
  .option1-ai-word,
  .option1-reflection {
    font-size:min(40vw,220px);
    left:18%;
    bottom:14px;
  }
  .option1-floor-line { bottom:19px; }
  .option1-statement { top:56px; }
}

@media (max-width: 560px) {
  .option1-copy { padding-top: 27px; }
  .option1-eyebrow { margin-bottom: 15px; }
  .option1-copy h1 { font-size: 56px;margin-bottom:14px; }
  .option1-lead { font-size:13.5px;line-height:1.42; }
  .option1-verbs { margin-bottom:14px; }
  .option1-visual { height: 185px; }
  .option1-ai-word,
  .option1-reflection { font-size:150px;left:15%;bottom:12px; }
  .option1-statement { top:46px;width:76px; }
  .option1-statement p { font-size:6.5px; }
  .option1-floor-line { bottom:17px; }
}


/* V14 functionality QA: accessible mobile navigation */
.ai-menu-toggle,.ai-mobile-menu{display:none}
@media(max-width:900px){
  .ai-header-in{gap:10px}
  .ai-menu-toggle{display:inline-flex;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;cursor:pointer;flex:0 0 auto}
  .ai-menu-toggle span{display:block;width:15px;height:1px;background:#f7f7f5;transition:transform .2s ease,opacity .2s ease}
  .ai-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .ai-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .ai-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .ai-mobile-menu{position:absolute;left:0;right:0;top:100%;z-index:50;background:rgba(7,9,9,.985);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.10);padding:10px max(20px,calc((100vw - 1240px)/2));box-shadow:0 18px 40px rgba(0,0,0,.28)}
  .ai-mobile-menu:not([hidden]){display:grid}
  .ai-mobile-menu a{color:rgba(247,247,245,.82);text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px;font-weight:600}
  .ai-mobile-menu a.current{color:#fff}
  .ai-mobile-menu-cta{border-bottom:0!important;color:#fff!important}
}
@media(max-width:520px){
  .ai-header-in>.header-cta{display:none}
  .ai-menu-toggle{margin-left:auto}
}

/* === LEGAL === */
:root{--legal-bg:#050509;--legal-text:#f7f7fb;--legal-muted:#b5b7c2;--legal-line:rgba(255,255,255,.10);--legal-violet:#a78bfa;--legal-orange:#fb923c}
*{box-sizing:border-box}
body.legal-page-body{margin:0;background:var(--legal-bg);color:var(--legal-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
.legal-wrap{width:min(1100px,calc(100% - 40px));margin-inline:auto}
.legal-main{padding:72px 0 88px}
.legal-eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:800;color:var(--legal-violet);margin-bottom:14px}
.legal-title{font-size:clamp(2.6rem,6vw,5rem);line-height:.97;letter-spacing:-.055em;margin:0 0 22px;max-width:880px}
.legal-lede{max-width:780px;color:var(--legal-muted);font-size:1.02rem;margin:0}
.legal-updated{margin-top:22px;color:#858794;font-size:.82rem}
.legal-toc{margin:42px 0 60px;padding:22px;border:1px solid var(--legal-line);border-radius:18px;background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(103,232,249,.03))}
.legal-toc strong{display:block;margin-bottom:10px}.legal-toc-links{display:flex;flex-wrap:wrap;gap:10px 18px}.legal-toc a{font-size:.88rem;color:#d9dbe5;text-decoration:none}.legal-toc a:hover{color:#fff}
.legal-section{margin:0}.legal-section h2{font-size:clamp(1.7rem,3vw,2.45rem);letter-spacing:-.03em;margin:0 0 20px}.legal-section h3{font-size:1.05rem;margin:30px 0 8px}.legal-section p,.legal-section li{color:#c7c9d2;font-size:.96rem}.legal-section ul{padding-left:1.2rem}.legal-section li+li{margin-top:7px}.legal-section a{color:#d8d1ff}.legal-notice{border-left:3px solid var(--legal-orange);padding:12px 16px;background:rgba(251,146,60,.06);color:#d4d6df;font-size:.9rem;border-radius:0 10px 10px 0;margin-top:28px}
@media(max-width:640px){.legal-wrap{width:min(100% - 28px,1100px)}.legal-main{padding:48px 0 64px}.legal-title{font-size:2.55rem}.legal-toc{margin:32px 0 48px}}

/* === CANONICAL SITE SHELL (loaded last by design) === */
/* Catapltr canonical site shell — V17
   Shared header, navigation, mobile menu, footer, focus states and homepage presentation behaviour. */
:root {
  --shell-header-h: 72px;
  --shell-footer-h: 64px;
  --shell-max: 1240px;
  --shell-pad: clamp(20px, 4vw, 40px);
  --shell-bg: #030308;
  --shell-line: rgba(255,255,255,.09);
  --shell-muted: #a7a9b2;
  --shell-violet: #8b5cf6;
  --shell-blue: #4f8cff;
  --shell-orange: #ff7b3e;
}

html { scroll-behavior: smooth; }
body { padding-top: var(--shell-header-h); overflow-x: hidden; }
body.shell-menu-open { overflow: hidden; }

/* Shared focus treatment */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 3px;
}

.shell-wrap {
  width: min(var(--shell-max), calc(100% - (var(--shell-pad) * 2)));
  margin-inline: auto;
}

/* ---------- Header ---------- */
.site-shell-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10000;
  height: var(--shell-header-h);
  display: flex;
  align-items: center;
  background: rgba(3,3,8,.94);
  border-bottom: 1px solid var(--shell-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-shell-header.is-scrolled { background: rgba(3,3,8,.985); }
.site-shell-header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-shell-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.site-shell-brand img { display:block; width:126px; height:auto; }
.site-shell-wordmark {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 850;
}
.site-shell-code {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  background: radial-gradient(circle at 35% 35%, #221d56 0%, #0a071b 72%);
  border: 1px solid rgba(139,92,246,.42);
  box-shadow: 0 0 11px rgba(139,92,246,.20);
}

.site-shell-primary {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 30px;
  height: 100%;
}
.site-shell-nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.site-shell-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: #b8bac2;
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .18s ease;
}
.site-shell-nav-link:hover,
.site-shell-nav-link[aria-current="page"] { color: #fff; }
.site-shell-nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 20px;
  height: 1.5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,var(--shell-blue),var(--shell-violet),var(--shell-orange));
}

/* Solutions discovery menu; same IA on every page. */
.site-shell-submenu {
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  width: 290px;
  transform: translate(-50%, 8px);
  padding: 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(10,10,16,.985);
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.site-shell-has-menu:hover .site-shell-submenu,
.site-shell-has-menu:focus-within .site-shell-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.site-shell-submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #c7c9d2;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.25;
}
.site-shell-submenu a:hover,
.site-shell-submenu a:focus-visible { color: #fff; background: rgba(255,255,255,.06); }

.site-shell-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.site-shell-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  color: #e8e8ed;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.site-shell-cta:hover { color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.3); transform: translateY(-1px); }
.site-shell-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.site-shell-menu-toggle span { width: 22px; height: 2px; margin-inline:auto; border-radius:999px; background:#fff; transition:transform .18s ease, opacity .18s ease; }
.site-shell-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-shell-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.site-shell-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.site-shell-mobile-menu {
  position: fixed;
  z-index: 9999;
  top: var(--shell-header-h);
  right: 0;
  bottom: 0;
  height: calc(100dvh - var(--shell-header-h));
  left: 0;
  padding: 24px var(--shell-pad) 36px;
  overflow-y: auto;
  background: rgba(3,3,8,.985);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-shell-mobile-menu[hidden] { display: none !important; }
.site-shell-mobile-list { width:min(640px,100%); margin:0 auto; padding:0; list-style:none; }
.site-shell-mobile-list > li { border-bottom:1px solid rgba(255,255,255,.08); }
.site-shell-mobile-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px;
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:750;
}
.site-shell-mobile-sub { display:grid; gap:2px; padding:0 0 16px 14px; }
.site-shell-mobile-sub a { padding:8px 0; color:#aeb0ba; text-decoration:none; font-size:14px; }
.site-shell-mobile-sub a:hover { color:#fff; }
.site-shell-mobile-cta { margin-top:24px; width:100%; min-height:48px; background:#fff; color:#09090b; border-color:#fff; }

/* ---------- Canonical footer ---------- */
.site-shell-footer {
  position: relative;
  z-index: 20;
  min-height: var(--shell-footer-h);
  display: flex;
  align-items: center;
  background: #030308;
  color: #fff;
  border-top: 1px solid var(--shell-line);
}
.site-shell-footer-inner {
  min-height: var(--shell-footer-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.site-shell-footer-brand { display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none; }
.site-shell-footer-brand .site-shell-wordmark { font-size:18px; }
.site-shell-footer-brand img { display:block; width:132px; height:auto; }
.site-shell-footer-brand .site-shell-code { width:25px; height:25px; flex-basis:25px; font-size:9px; }
.site-shell-copyright { margin:0; color:#777a85; font-size:10px; line-height:1.35; }
.site-shell-footer-links { display:flex; align-items:center; gap:24px; }
.site-shell-footer-links a { color:#92959f; text-decoration:none; font-size:10px; transition:color .18s ease; white-space:nowrap; }
.site-shell-footer-links a:hover { color:#fff; }

/* ---------- Homepage presentation mode ---------- */
body.home-page { background:#030308; }
body.home-page .site-content {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}
html.home-page-root { height:auto; overflow-x:hidden; overflow-y:auto; }
body.home-page { height:auto; overflow:visible; }
body.ai-engineering-page .option1-button { color: #070909; }
body.ai-engineering-page .pill-dark { color: #fff; }
body.inner-page .button:not(.ghost) { color: #0c0c0f; }
body.home-page .app-section {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  overscroll-behavior: auto;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
body.home-page .app-section[aria-hidden="true"] { visibility:visible!important; opacity:1!important; pointer-events:auto!important; }
body.home-page .seo-company-context { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; }
body.home-page #hero { overflow:hidden!important; }
body.home-page .seo-company-context .container { width:1px; padding:0; overflow:hidden; }

.site-section-rail { display:none; }

@media (min-width: 1025px) {
  html.home-page-root {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--shell-header-h);
    scroll-padding-bottom: var(--shell-footer-h);
  }
  body.home-page .app-section {
    min-height: calc(100svh - var(--shell-header-h) - var(--shell-footer-h)) !important;
    scroll-snap-align: start;
    scroll-margin-top: var(--shell-header-h);
  }
  body.home-page .site-shell-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .site-section-rail {
    position: fixed;
    z-index: 2500;
    right: 17px;
    top: 50%;
    display: grid;
    gap: 10px;
    transform: translateY(-50%);
  }
  .site-section-rail a {
    position:relative;
    width:10px;
    height:10px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.30);
    background:rgba(255,255,255,.08);
    box-shadow:0 0 0 1px rgba(3,3,8,.42),0 0 0 2px rgba(255,255,255,.20);
    text-decoration:none;
    mix-blend-mode:difference;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
  }
  .site-section-rail a::after {
    content: attr(data-label);
    position:absolute;
    right:17px;
    top:50%;
    transform:translateY(-50%);
    padding:5px 8px;
    border-radius:7px;
    color:#fff;
    background:rgba(3,3,8,.92);
    border:1px solid rgba(255,255,255,.10);
    font-size:9px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
  }
  .site-section-rail a:hover::after,
  .site-section-rail a:focus-visible::after { opacity:1; }
  .site-section-rail a.is-active { background:#8b5cf6; border-color:#b4a0ff; mix-blend-mode:normal; box-shadow:0 0 12px rgba(139,92,246,.55); transform:scale(1.15); }
}

/* Keep anchors clear of fixed header. */
[id] { scroll-margin-top: calc(var(--shell-header-h) + 16px); }

@media (max-width: 1024px) {
  :root { --shell-header-h: 64px; }
  html.home-page-root { scroll-snap-type:none; }
  body.home-page .site-content { padding-top:0; }
  body.home-page .app-section { min-height:0!important; scroll-snap-align:none; }
  body.home-page .site-shell-footer { position:relative; }
  .site-shell-primary, .site-shell-cta { display:none; }
  .site-shell-mobile-menu .site-shell-mobile-cta { display:flex; color:#09090b; }
  .site-shell-header-inner { grid-template-columns:1fr auto; }
  .site-shell-actions { grid-column:2; }
  .site-shell-menu-toggle { display:flex; }
  .site-shell-wordmark { font-size:20px; }
  .site-shell-footer-inner { grid-template-columns:auto 1fr; padding-block:18px; }
  .site-shell-footer-links { grid-column:1 / -1; justify-content:flex-start; flex-wrap:wrap; gap:14px 20px; }
}

@media (max-width: 560px) {
  :root { --shell-pad: 16px; }
  .site-shell-footer-inner { grid-template-columns:1fr; gap:12px; }
  .site-shell-copyright { grid-row:auto; }
  .site-shell-footer-links { grid-column:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .site-shell-submenu,
  .site-shell-cta,
  .site-shell-menu-toggle span { transition:none; }
}

/* Override the legacy homepage app-shell overflow lock. The V17 homepage keeps
   every section in normal document flow and uses native scroll snapping. */
html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }


/* ==========================================================================\n   V18 CONSOLIDATION SAFETY / PAGE CONTEXT\n   ========================================================================== */
body.inner-page,
body.legal-page-body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
body.ai-engineering-page { background: var(--ai-ink); color: var(--ai-text); }

/* The canonical shell must remain visually consistent regardless of page theme. */
.site-shell-header,
.site-shell-footer { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* The merged AI stylesheet must not resize the separate inner-page heroes. */
body.inner-page .hero { height:auto; min-height:0; }
body.inner-page .hero-grid {
  height:auto;
  min-height:420px;
  grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);
  gap:clamp(38px,6vw,86px);
  padding:48px 0;
}
body.inner-page .hero h1 {
  font-size:clamp(48px,5.3vw,78px);
  line-height:.95;
  letter-spacing:-.063em;
  margin:0 0 20px;
}

/* Four direct connections from the operating inputs to Business Process. */
.enterprise-map .enterprise-connectors {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.enterprise-map .enterprise-connectors path {
  fill:none;
  stroke:#7062bd;
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
  opacity:.65;
}
.enterprise-map .node,
.enterprise-map .core { z-index:1; }

@media (min-width:901px) and (max-height:700px) {
  body.inner-page .hero-grid { min-height:0; padding:24px 0; }
  body.inner-page .hero h1 { font-size:clamp(48px,7vh,64px); margin-bottom:14px; }
  body.inner-page .hero-lead { font-size:14px; line-height:1.45; margin-bottom:16px; }
  body.inner-page .hero .eyebrow { margin-bottom:12px; }
  body.inner-page .hero .button { padding:10px 15px; }
  body.inner-page .hero .visual-panel { min-height:230px; }
}

@media (max-width:900px) {
  body.inner-page .hero-grid { grid-template-columns:1fr; min-height:0; padding:50px 0 44px; gap:34px; }
  body.inner-page .hero h1 { font-size:clamp(48px,10vw,68px); }
}

/* Give the Engineering architecture stack a dedicated caption-safe area on
   short desktop windows. The five rows otherwise crowd the caption into the
   final row at laptop heights. */
@media (min-width:901px) and (max-height:700px) {
  .hero.engineering-page .visual-panel { min-height:280px; }
  .hero.engineering-page .arch-stack { inset:18px 24px 42px; gap:7px; }
  .hero.engineering-page .arch-row { padding:9px 12px; }
}
@media (max-width:620px) {
  body.inner-page .hero-grid { padding:42px 0 38px; }
  body.inner-page .hero h1 { font-size:clamp(44px,13vw,58px); }
  .enterprise-map .enterprise-connectors { display:none; }
  .enterprise-map {
    inset:16px 16px 30px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:1fr 1.15fr 1fr;
    gap:8px 12px;
    align-items:stretch;
  }
  .enterprise-map .node,
  .enterprise-map .core {
    position:static;
    transform:none;
    width:auto;
    height:auto;
  }
  .enterprise-map .n1 { grid-area:1 / 1; }
  .enterprise-map .n2 { grid-area:1 / 2; }
  .enterprise-map .n3 { grid-area:3 / 1; }
  .enterprise-map .n4 { grid-area:3 / 2; }
  .enterprise-map .core { grid-area:2 / 1 / 3 / 3; width:140px; justify-self:center; }
}

/* Keep the homepage message and primary action visible in short desktop windows. */
@media (min-width: 1025px) and (max-height: 1050px) {
  body.home-page #hero { padding-block: 10px 14px; }
  body.home-page #hero .hero-inner { padding-top: 0; min-height: 0; }
  body.home-page #hero .hero-copy { transform: none; }
  body.home-page #hero .hero-headline {
    font-size: clamp(3.5rem, 12vh, 8.5rem);
    line-height: .92;
    margin-bottom: 12px;
  }
  body.home-page #hero .hero-body {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 12px;
  }
  body.home-page #hero .hero-cta-wrap { margin-bottom: 14px; }
  body.home-page #hero .credibility-strip { padding-top: 10px; }
}

/* Give the five AI workflow stages room to read on landscape tablets. */
@media (min-width: 901px) and (max-width: 1100px) {
  body.ai-engineering-page .workflow-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  body.ai-engineering-page .workflow-copy { padding-right: 0; }
  body.ai-engineering-page .workflow-copy p { max-width: 560px; }
  body.ai-engineering-page .flow {
    grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr;
  }
  body.ai-engineering-page .flow article h3 { font-size: 16px; }
  body.ai-engineering-page .flow article p { font-size: 13px; }
}

/* Align the AI hero with the other inner pages on standard desktop screens. */
@media (min-width: 1281px) and (min-height: 701px) {
  body.ai-engineering-page .option1-hero,
  body.ai-engineering-page .option1-grid { min-height: 540px; }
  body.ai-engineering-page .option1-copy { padding: 30px 0 28px; }
  body.ai-engineering-page .option1-eyebrow { margin-bottom: 18px; font-size: 10px; }
  body.ai-engineering-page .option1-copy h1 {
    max-width: 560px;
    margin-bottom: 17px;
    font-size: clamp(78px, 6.35vw, 96px);
  }
  body.ai-engineering-page .option1-lead {
    max-width: 540px;
    margin-bottom: 16px;
    font-size: 15.5px;
    line-height: 1.42;
  }
  body.ai-engineering-page .option1-verbs { gap: 6px 9px; margin-bottom: 18px; font-size: 8.2px; }
  body.ai-engineering-page .option1-actions { gap: 21px; }
  body.ai-engineering-page .option1-button { min-height: 43px; padding: 0 20px; font-size: 11px; }
  body.ai-engineering-page .option1-actions p { padding-left: 20px; font-size: 11.5px; }
  body.ai-engineering-page .option1-visual { height: 430px; }
  body.ai-engineering-page .option1-ai-word,
  body.ai-engineering-page .option1-reflection {
    left: 7%;
    font-size: clamp(282px, 23.3vw, 350px);
  }
  body.ai-engineering-page .option1-ai-word { bottom: 21px; }
  body.ai-engineering-page .option1-reflection { bottom: -22px; }
}

/* AI hero: an application cross-section with AI bounded by context and controls. */
body.ai-engineering-page .option1-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
body.ai-engineering-page .option1-visual::before { content: none; }
.system-xsection {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, 590px);
  padding: 17px;
  border: 1px solid rgba(176, 166, 232, .27);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(22, 27, 37, .97), rgba(11, 14, 20, .98) 60%, rgba(23, 17, 28, .96));
  box-shadow: 0 24px 65px rgba(0, 0, 0, .32), 0 0 55px rgba(96, 80, 218, .10);
  color: #f7f7f5;
  font-family: Inter, Arial, sans-serif;
}
.system-xsection-head,
.system-xsection-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #aeb5c3;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}
.system-xsection-head { padding: 3px 3px 14px; }
.system-xsection-live { color: #b9a8ff; }
.system-xsection-live::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: #a98cf8;
  box-shadow: 0 0 9px #9c75f7;
  vertical-align: middle;
}
.system-xsection-layer,
.system-xsection-core {
  display: grid;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.system-xsection-layer {
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  min-height: 59px;
  padding: 0 15px;
  border: 1px solid rgba(174, 184, 206, .19);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
}
.system-xsection-index {
  color: #777f93;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.system-xsection-layer strong,
.system-xsection-core strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.system-xsection-layer small,
.system-xsection-core small {
  display: block;
  margin-top: 5px;
  color: #aeb3c0;
  font-size: 10.5px;
  line-height: 1.3;
}
.system-xsection-mark { color: #888f9d; font-size: 23px; text-align: right; }
.system-xsection-core {
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr);
  min-height: 111px;
  padding: 0 15px;
  border: 1px solid rgba(153, 111, 241, .32);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(76, 56, 137, .13), rgba(150, 78, 147, .07));
}
.system-xsection-core > div {
  box-sizing: border-box;
  min-width: 0;
  min-height: 83px;
  padding: 12px 13px;
  border-radius: 9px;
}
.system-xsection-ai {
  border: 1px solid rgba(144, 119, 243, .5);
  background: linear-gradient(125deg, rgba(95, 79, 219, .28), rgba(110, 65, 143, .18));
  box-shadow: inset 3px 0 #8b78f3, 0 0 24px rgba(101, 74, 209, .13);
}
.system-xsection-human { border: 1px solid rgba(234, 158, 124, .22); background: rgba(197, 114, 100, .06); }
.system-xsection-core div > span {
  display: block;
  margin-bottom: 8px;
  color: #beb1e9;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
}
.system-xsection-human > span { color: #d9aa9d !important; }
.system-xsection-rail {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 4px 3px 0;
  font-size: 8.5px;
  letter-spacing: .06em;
}
.system-xsection-rail span:first-child { margin-right: auto; color: #aeb5c3; letter-spacing: .14em; }
.system-xsection-rail span:not(:first-child) { color: #c7bfd6; }

@media (min-width: 901px) and (max-width: 1280px), (min-width: 901px) and (max-height: 700px) {
  .system-xsection { width: min(100%, 530px); padding: 12px; }
  .system-xsection-head { padding-bottom: 9px; }
  .system-xsection-layer { min-height: 49px; margin-bottom: 7px; }
  .system-xsection-core { min-height: 91px; margin-bottom: 7px; }
  .system-xsection-core > div { min-height: 72px; padding: 9px 11px; }
  .system-xsection-layer strong, .system-xsection-core strong { font-size: 13px; }
  .system-xsection-layer small, .system-xsection-core small { font-size: 9px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .system-xsection { transform: translateY(-10px); }
}
@media (max-width: 900px) {
  body.ai-engineering-page .option1-visual { height: 350px; }
  .system-xsection { width: min(100%, 560px); }
}
@media (max-width: 560px) {
  body.ai-engineering-page .option1-visual { height: 319px; }
  .system-xsection { padding: 11px; border-radius: 16px; }
  .system-xsection-head { padding-bottom: 10px; font-size: 7px; }
  .system-xsection-layer { grid-template-columns: 18px minmax(0, 1fr) 17px; min-height: 49px; padding: 0 9px; gap: 7px; margin-bottom: 7px; }
  .system-xsection-core { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr); min-height: 95px; padding: 0 9px; gap: 6px; margin-bottom: 7px; }
  .system-xsection-core > div { min-height: 75px; padding: 9px 7px; }
  .system-xsection-index { font-size: 8px; }
  .system-xsection-layer strong, .system-xsection-core strong { font-size: 12px; }
  .system-xsection-layer small, .system-xsection-core small { font-size: 8px; }
  .system-xsection-core div > span { font-size: 6px; margin-bottom: 7px; }
  .system-xsection-mark { font-size: 16px; }
  .system-xsection-rail { font-size: 7px; }
}

/* Bring AI hero actions into the shared inner-page CTA scale. */
body.ai-engineering-page .option1-actions { gap: 12px; flex-wrap: wrap; }
body.ai-engineering-page .option1-button {
  box-sizing: border-box;
  min-height: 54px;
  padding: 0 26px;
  font-size: 14px;
  white-space: nowrap;
}
body.ai-engineering-page .option1-secondary {
  border: 1px solid rgba(245, 244, 250, .42);
  background: rgba(255, 255, 255, .02);
  color: #f7f7f5;
  box-shadow: none;
}
body.ai-engineering-page .option1-secondary:hover {
  border-color: rgba(245, 244, 250, .78);
  background: rgba(255, 255, 255, .08);
}
body.ai-engineering-page .option1-button:focus-visible { outline: 2px solid #ae9bff; outline-offset: 3px; }
body.ai-engineering-page #workflow { scroll-margin-top: 72px; }

@media (min-width: 901px) and (max-width: 1280px), (min-width: 901px) and (max-height: 700px) {
  body.ai-engineering-page .option1-button { min-height: 44px; padding: 0 18px; font-size: 12px; }
}
@media (max-width: 900px) {
  body.ai-engineering-page .option1-button { min-height: 47px; padding: 0 20px; font-size: 12.5px; }
  body.ai-engineering-page #workflow { scroll-margin-top: 64px; }
}
@media (max-width: 560px) {
  body.ai-engineering-page .option1-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  body.ai-engineering-page .option1-button { width: min(100%, 320px); }
}

/* Match the AI hero typography and actions to the other inner-page heroes. */
@media (min-width: 1281px) {
  body.ai-engineering-page .option1-grid { grid-template-columns: 50% 50%; }
  body.ai-engineering-page .option1-eyebrow { font-size: 14px; letter-spacing: .28em; }
  body.ai-engineering-page .option1-copy h1 {
    font-size: clamp(68px, 5.3vw, 82px);
    line-height: .95;
    letter-spacing: -.063em;
  }
  body.ai-engineering-page .option1-lead { font-size: 15px; line-height: 1.67; }
  body.ai-engineering-page .option1-verbs { font-size: 9px; }
  body.ai-engineering-page .option1-button { min-width: 282px; min-height: 58px; font-size: 15px; }
}
@media (min-width: 1281px) and (max-height: 700px) {
  body.ai-engineering-page .option1-copy h1 { font-size: clamp(48px, 7vh, 64px); }
  body.ai-engineering-page .option1-lead { font-size: 14px; line-height: 1.45; }
  body.ai-engineering-page .option1-verbs { font-size: 8px; }
  body.ai-engineering-page .option1-button { min-height: 42px; font-size: 15px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  body.ai-engineering-page .option1-hero,
  body.ai-engineering-page .option1-grid { min-height: 525px; }
  body.ai-engineering-page .option1-visual { height: 390px; }
  body.ai-engineering-page .option1-eyebrow { font-size: 14px; letter-spacing: .28em; }
  body.ai-engineering-page .option1-copy h1 {
    font-size: clamp(48px, 5.3vw, 64px);
    line-height: .95;
    letter-spacing: -.063em;
  }
  body.ai-engineering-page .option1-lead { font-size: 15px; line-height: 1.67; }
  body.ai-engineering-page .option1-verbs { font-size: 9px; }
  body.ai-engineering-page .option1-button { min-width: 186px; min-height: 46px; font-size: 12px; }
}
@media (max-width: 900px) {
  body.ai-engineering-page .option1-eyebrow { font-size: 11px; letter-spacing: .28em; }
  body.ai-engineering-page .option1-copy h1 {
    font-size: clamp(46px, 13vw, 62px);
    line-height: .95;
    letter-spacing: -.063em;
  }
  body.ai-engineering-page .option1-lead { font-size: 14px; line-height: 1.55; }
  body.ai-engineering-page .option1-verbs { font-size: 9px; }
  body.ai-engineering-page .option1-button { min-height: 46px; font-size: 12px; }
}
@media (max-width: 560px) {
  body.ai-engineering-page .option1-button { width: fit-content; min-width: 186px; }
}

/* Final lifecycle strip override after the shared responsive rules. */
@media (max-width: 900px) {
  body.product_engineering-body .lifecycle-band { padding: 20px 0; }
  body.product_engineering-body .lifecycle-band .ip-wrap {
    width: calc(100% - 32px);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }
  body.product_engineering-body .lifecycle-band span {
    min-width: 0;
    min-height: 44px;
    padding: 8px 3px;
    font-size: 10px;
    letter-spacing: -.02em;
  }
  body.product_engineering-body .lifecycle-band span::after { right: -4px; font-size: 11px; }
}

/* The documentation cards wrap into two rows at tablet widths. Keep the
   progression guide out of the middle of that wrapped layout; the mobile
   one-column treatment below retains a vertical guide instead. */
@media (min-width: 621px) and (max-width: 900px) {
  body.case_studies-body .input-grid::before { display: none; }
}

/* Lurry AI's six-stage flow needs two rows before the narrow mobile
   breakpoint; keeping six columns at tablet width clips the final stage. */
@media (min-width: 621px) and (max-width: 1100px) {
  .hero.lurry-page .lurry-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 12px;
    top: 50%;
  }
  .hero.lurry-page .lurry-node {
    min-height: 72px;
    padding: 9px 6px;
  }
  .hero.lurry-page .lurry-node span { font-size: 8px; }
}

/* Approach: leave room for five delivery stages and their caption on mobile. */
@media (max-width: 620px) {
  .engineering-page .visual-panel { min-height: 310px; }
  .engineering-page .arch-stack { inset: 20px 16px 48px; }
}


@media (min-width: 621px) and (max-width: 1280px) {
  .engineering-page .visual-panel { min-height: 330px; }
  .engineering-page .arch-stack { inset: 20px 24px 52px; }
}


/* Shared section navigation: readable on light and dark pages. */
@media (min-width: 1025px) {
  .site-section-rail { max-height: calc(100svh - 160px); }
  .site-section-rail a { flex-shrink: 0; mix-blend-mode: normal; background: #696777; }
  .site-section-rail a::after { max-width: 260px; white-space: normal; width: max-content; line-height: 1.4; }
  .site-section-rail a:focus-visible { outline: 2px solid #a78bfa; outline-offset: 5px; }
}