/**
 * 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 {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  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;
}

.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,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  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;
  }
}

@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,
.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,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    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;
  }
}