/* ==========================================================================
   DUB DIGITAL — BRAND RELAUNCH DESIGN SYSTEM & STYLESHEET
   "Let's Build Something That Works."
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;1,600;1,700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Color Palette */
  --bg-void: #07080a;
  --bg-surface: #0d1017;
  --bg-card: #131722;
  --bg-card-hover: #191f2d;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);
  
  /* Brand Vermillion Accent */
  --dub-red: #ef3c24;
  --dub-red-hover: #ff5038;
  --dub-red-glow: rgba(239, 60, 36, 0.25);
  --dub-red-subtle: rgba(239, 60, 36, 0.08);

  /* Secondary Accents */
  --accent-cyan: #00d2ff;
  --accent-cyan-glow: rgba(0, 210, 255, 0.15);
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  
  /* Typography Colors */
  --text-pure: #ffffff;
  --text-high: #f0edf6;
  --text-body: #a0a8b8;
  --text-muted: #6b7588;
  --text-faint: #434c5e;
  
  /* Paper Editorial Accent */
  --paper-bg: #f4efe8;
  --paper-text: #0e1117;
  --paper-muted: #575e6d;
  --paper-border: #ded8ce;

  /* Typography Families */
  --font-display: 'Inter Tight', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout Spacing */
  --max-w-shell: 1440px;
  --header-h: 80px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  background-color: var(--bg-void);
  color: var(--text-high);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-void);
  overflow-x: hidden;
  line-height: 1.6;
  font-size: 16px;
}

::selection {
  background-color: var(--dub-red);
  color: var(--text-pure);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-void);
}
::-webkit-scrollbar-thumb {
  background: #242b38;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dub-red);
}

/* Utility Shell */
.shell {
  width: 100%;
  max-width: var(--max-w-shell);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
}

/* Typography Presets */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-pure);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(40px, 5.8vw, 86px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.0;
}

h2 {
  font-size: clamp(32px, 4.2vw, 62px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

h3 {
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h4 {
  font-size: clamp(18px, 1.8vw, 24px);
}

p {
  color: var(--text-body);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.68;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Monospace & System Tags */
.mono-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dub-red);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mono-tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--dub-red);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--dub-red);
}

.mono-tag.cyan {
  color: var(--accent-cyan);
}
.mono-tag.cyan::before {
  background-color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
}

.mono-tag.emerald {
  color: var(--accent-emerald);
}
.mono-tag.emerald::before {
  background-color: var(--accent-emerald);
  box-shadow: 0 0 10px var(--accent-emerald);
}

/* Buttons & Interactive Elements */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background-color: var(--dub-red);
  color: var(--text-pure);
  box-shadow: 0 4px 24px var(--dub-red-glow);
}
.btn-primary:hover {
  background-color: var(--dub-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(239, 60, 36, 0.4);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-high);
  border-color: var(--border-medium);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  color: var(--text-pure);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-high);
}
.btn-outline:hover {
  border-color: var(--dub-red);
  color: var(--text-pure);
}

/* Subtle Ambient Glow Effect Behind Sections */
.glow-ambient {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.15;
}
.glow-red {
  background: radial-gradient(circle, var(--dub-red) 0%, transparent 70%);
}
.glow-cyan {
  background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
}

/* ==========================================================================
   NAVIGATION HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 100;
  background: rgba(7, 8, 10, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.site-header.scrolled {
  background: rgba(7, 8, 10, 0.94);
  border-bottom: 1px solid var(--border-medium);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

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

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo img {
  height: 42px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
  position: relative;
  padding: 8px 0;
}
.nav-link:hover, .nav-link.active {
  color: var(--text-pure);
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--dub-red);
  transition: width 0.25s ease;
}
.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-high);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(7, 8, 10, 0.98);
  backdrop-filter: blur(24px);
  z-index: 99;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-drawer.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-link {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-high);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
}
.mobile-nav-link:hover {
  color: var(--dub-red);
  padding-left: 8px;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  padding-top: calc(var(--header-h) + 60px);
  padding-bottom: 90px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-headline em {
  font-style: normal;
  color: var(--dub-red);
  position: relative;
  display: inline-block;
}

.hero-subtext {
  font-size: clamp(18px, 1.4vw, 22px);
  color: #b3bdcc;
  max-width: 640px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Hero Interactive Free Digital Strategy Blueprint Visualizer */
.hero-strategy-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 50px rgba(239, 60, 36, 0.08);
  position: relative;
  overflow: hidden;
}

.strategy-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.preview-header-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dub-red);
  box-shadow: 0 0 10px var(--dub-red);
  animation: pulse-dot 2s infinite ease-in-out;
}
.preview-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-cyan);
  background: rgba(0, 210, 255, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Preset tabs */
.strategy-preset-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.preset-tab-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 9px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.preset-tab-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-pure);
}
.preset-tab-btn.active {
  background: rgba(239, 60, 36, 0.14);
  border-color: var(--dub-red);
  color: var(--text-pure);
}

/* Strategy Blueprint Flow Track */
.blueprint-flow-canvas {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flow-step-node {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: all 0.25s ease;
}
.flow-step-node.highlight {
  border-color: rgba(239, 60, 36, 0.4);
  background: rgba(239, 60, 36, 0.06);
}
.flow-step-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--dub-red);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.flow-step-val {
  color: var(--text-high);
  font-size: 13px;
  font-weight: 500;
}

.strategy-preview-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.strategy-preview-footer a {
  color: var(--dub-red);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.strategy-preview-footer a:hover {
  text-decoration: underline;
}

/* Credibility Proof Strip */
.proof-strip {
  padding: 28px 0;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(13, 16, 23, 0.4);
}
.proof-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.proof-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.proof-item span {
  color: var(--dub-red);
  font-size: 16px;
}

/* ==========================================================================
   PHILOSOPHY & "THE REALITY CHECK" (BUSINESS FIRST DIAGNOSTIC)
   ========================================================================== */
.philosophy-section {
  padding: 130px 0;
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}

.section-head {
  max-width: 860px;
  margin-bottom: 64px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head h2 {
  margin-top: 16px;
  margin-bottom: 24px;
}
.section-head p {
  font-size: 20px;
  color: #b0b9ca;
  line-height: 1.6;
}

/* Interactive Business Dilemma Switcher */
.diagnostic-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.dilemma-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dilemma-btn {
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.dilemma-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}
.dilemma-btn.active {
  background: #181f2f;
  border-color: var(--dub-red);
  box-shadow: 0 0 30px rgba(239, 60, 36, 0.15);
}
.dilemma-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  background-color: var(--dub-red);
  border-radius: 0 4px 4px 0;
}
.dilemma-quote {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-pure);
  line-height: 1.4;
}
.dilemma-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* Dilemma Spotlight Display */
.dilemma-display {
  background: #090b10;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.display-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.display-situation {
  margin-bottom: 24px;
}
.display-situation .label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dub-red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: block;
}
.display-situation h3 {
  font-size: 24px;
  color: var(--text-pure);
  line-height: 1.35;
}

/* 3 Structured Dilemma Breakdown Blocks */
.dilemma-blocks-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.dilemma-block {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  transition: all 0.2s ease;
}
.dilemma-block:hover {
  border-color: var(--border-medium);
}
.dilemma-block .block-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dilemma-block.happening .block-tag {
  color: #f59e0b;
}
.dilemma-block.approach .block-tag {
  color: var(--dub-red);
}
.dilemma-block.involves .block-tag {
  color: var(--accent-cyan);
}
.dilemma-block p {
  font-size: 14px;
  color: var(--text-high);
  line-height: 1.55;
  margin: 0;
}

.display-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   THE 4 CORE CAPABILITIES
   ========================================================================== */
.capabilities-section {
  padding: 130px 0;
  background: #090b10;
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}

.capabilities-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
  overflow-x: auto;
}

.cap-tab {
  background: transparent;
  border: 1px solid var(--border-subtle);
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cap-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-pure);
}
.cap-tab.active {
  background: var(--dub-red);
  color: var(--text-pure);
  border-color: var(--dub-red);
  box-shadow: 0 4px 20px var(--dub-red-glow);
}
.cap-tab span {
  opacity: 0.6;
}

/* Capability Content Showcase */
.cap-panel {
  display: none;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: 56px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.35s ease;
}
.cap-panel.active {
  display: grid;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.cap-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cap-tagline {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  color: var(--text-pure);
  line-height: 1.2;
}
.cap-tagline em {
  font-style: normal;
  color: var(--dub-red);
}

.cap-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.cap-feature-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.cap-feature-item b {
  display: block;
  font-size: 14px;
  color: var(--text-pure);
  margin-bottom: 4px;
}
.cap-feature-item span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: block;
}

/* Mockup Interface inside Capability Panel */
.cap-mockup-frame {
  background: #08090c;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
}

.mockup-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #252d3d;
}
.mockup-dot.red { background: #ef3c24; }
.mockup-dot.yellow { background: #f59e0b; }
.mockup-dot.green { background: #10b981; }

.mockup-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: #111520;
  padding: 4px 12px;
  border-radius: 4px;
  margin-left: 12px;
}

/* ==========================================================================
   SELECTED WORK & OUTCOME-DRIVEN CASE STUDIES
   ========================================================================== */
.work-section {
  padding: 140px 0;
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}

.case-study-list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 60px;
}

.case-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: 56px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.case-card:hover {
  border-color: var(--border-strong);
}

.case-card:nth-child(even) {
  grid-template-columns: 0.85fr 1.15fr;
}
.case-card:nth-child(even) .case-content {
  order: 2;
}
.case-card:nth-child(even) .case-visual {
  order: 1;
}

.case-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.case-number {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--dub-red);
}

.case-title {
  font-size: clamp(28px, 3vw, 44px);
  margin-bottom: 24px;
  color: var(--text-pure);
}

/* Situation -> Problem -> What We Did -> Result Breakdown */
.case-four-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}
.step-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.step-box h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.step-box.result {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.04);
}
.step-box.result h5 {
  color: var(--accent-emerald);
}
.step-box p {
  font-size: 14px;
  color: var(--text-high);
  line-height: 1.45;
}

/* Rich Metric Badges */
.case-metrics-strip {
  display: flex;
  gap: 24px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
  margin-top: 20px;
}
.metric-stat b {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-pure);
  display: block;
}
.metric-stat.accent b {
  color: var(--dub-red);
}
.metric-stat.emerald b {
  color: var(--accent-emerald);
}
.metric-stat span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* Case Visual Container */
.case-visual-container {
  background: #08090d;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.case-visual-container .ui-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
}

/* ==========================================================================
   AI & MODERN ENGINEERING PHILOSOPHY
   ========================================================================== */
.modern-eng-section {
  padding: 130px 0;
  background: #08090d;
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}

.eng-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.eng-manifesto {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.eng-manifesto h2 em {
  font-style: normal;
  color: var(--dub-red);
}

/* Budget Multiplier Visualizer */
.eng-budget-visualizer {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.budget-equation-banner {
  background: rgba(239, 60, 36, 0.08);
  border: 1px solid rgba(239, 60, 36, 0.25);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  text-align: center;
}
.budget-equation-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.01em;
}
.budget-equation-title span {
  color: var(--dub-red);
}

.budget-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.budget-benefit-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.budget-benefit-item b {
  font-size: 14px;
  color: var(--text-pure);
  display: block;
  margin-bottom: 4px;
}
.budget-benefit-item span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  display: block;
}

/* ==========================================================================
   FOUNDER SECTION: CHRIS BRADSHAW
   ========================================================================== */
.founder-section {
  padding: 110px 0;
  position: relative;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}

.founder-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 60px;
  align-items: center;
}

/* Understated Photo Placeholder for Chris Bradshaw */
.founder-portrait-wrap {
  position: relative;
}
.portrait-placeholder-box {
  aspect-ratio: 4 / 5;
  background: #0d1017;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
.portrait-placeholder-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(239, 60, 36, 0.08) 0%, transparent 70%);
}
.founder-avatar-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #141822;
  border: 2px solid var(--dub-red);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dub-red);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
  box-shadow: 0 0 30px rgba(239, 60, 36, 0.2);
}
.portrait-placeholder-box h5 {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--text-pure);
  margin-bottom: 4px;
}
.portrait-placeholder-box span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dub-red);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: block;
}
.portrait-placeholder-box p {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 200px;
}

.founder-bio {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.founder-bio h2 {
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.1;
}
.founder-bio h2 em {
  font-style: normal;
  color: var(--dub-red);
}
.founder-bio blockquote {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--text-pure);
  line-height: 1.35;
  font-weight: 700;
  border-left: 3px solid var(--dub-red);
  padding-left: 20px;
  margin: 6px 0;
}
.founder-bio p {
  font-size: 16px;
  color: #a3adc2;
  line-height: 1.68;
}

.founder-milestones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.milestone-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.milestone-item b {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text-pure);
  display: block;
}
.milestone-item span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ==========================================================================
   DIGITAL GROWTH & RETAINERS
   ========================================================================== */
.growth-section {
  padding: 130px 0;
  position: relative;
  background: #08090d;
  border-bottom: 1px solid var(--border-subtle);
}

.growth-framework {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.growth-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  transition: all 0.3s ease;
  position: relative;
}
.growth-card:hover {
  transform: translateY(-6px);
  border-color: var(--dub-red);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
.growth-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--dub-red);
  margin-bottom: 16px;
  display: block;
}
.growth-card h3 {
  font-size: 28px;
  margin-bottom: 16px;
}
.growth-card ul {
  list-style: none;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.growth-card li {
  font-size: 14px;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 10px;
}
.growth-card li::before {
  content: "→";
  color: var(--dub-red);
  font-family: var(--font-mono);
  font-weight: bold;
}

/* Growth Retainer Callout */
.growth-retainer-banner {
  margin-top: 60px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 36px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.retainer-text h4 {
  font-size: 22px;
  margin-bottom: 6px;
}
.retainer-text p {
  font-size: 15px;
  color: var(--text-body);
}

/* ==========================================================================
   INTERACTIVE MULTI-STEP "FREE DIGITAL STRATEGY / CHALLENGE US" WIZARD
   ========================================================================== */
.strategy-section {
  padding: 140px 0;
  position: relative;
  background: radial-gradient(circle at 50% 0%, #171c28 0%, #07080a 70%);
  border-bottom: 1px solid var(--border-subtle);
}

.wizard-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  max-width: 960px;
  margin: 0 auto;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9), 0 0 60px rgba(239, 60, 36, 0.08);
  overflow: hidden;
}

.wizard-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  padding: 24px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wizard-step-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dub-red);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.wizard-progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.wizard-progress-fill {
  height: 100%;
  width: 20%;
  background-color: var(--dub-red);
  transition: width 0.3s ease;
}

.wizard-body {
  padding: 48px 48px 36px;
}

.wizard-step {
  display: none;
  animation: fadeIn 0.3s ease;
}
.wizard-step.active {
  display: block;
}

.step-question-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dub-red);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.step-title {
  font-size: clamp(26px, 2.6vw, 36px);
  margin-bottom: 12px;
}
.step-subtitle {
  font-size: 16px;
  color: var(--text-body);
  margin-bottom: 36px;
}

/* Option Cards for Questions */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.option-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}
.option-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}
.option-card.selected {
  background: rgba(239, 60, 36, 0.08);
  border-color: var(--dub-red);
  box-shadow: 0 0 20px rgba(239, 60, 36, 0.15);
}
.option-card.selected .check-indicator {
  border-color: var(--dub-red);
  background-color: var(--dub-red);
  color: var(--text-pure);
}

.option-content b {
  font-size: 16px;
  color: var(--text-pure);
  display: block;
  margin-bottom: 2px;
}
.option-content span {
  font-size: 13px;
  color: var(--text-muted);
}

.check-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
}

/* Input Fields inside Wizard */
.wizard-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group.full {
  grid-column: 1 / -1;
}
.form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.form-input, .form-textarea {
  background: #090b10;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  color: var(--text-pure);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--dub-red);
  box-shadow: 0 0 15px rgba(239, 60, 36, 0.15);
}
.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Wizard Navigation Buttons */
.wizard-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 24px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
}

/* Blueprint Result Card (Upon Submission) */
.blueprint-result {
  background: #0b0e14;
  border: 1px solid var(--dub-red);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin-top: 24px;
}
.blueprint-badge {
  background: rgba(239, 60, 36, 0.1);
  border: 1px solid var(--dub-red);
  color: var(--dub-red);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 16px;
}

/* ==========================================================================
   FREE WEBSITE DEMO OFFER (BEFORE → AFTER TRANSFORMATION)
   ========================================================================== */
.demo-section {
  padding: 130px 0;
  background: var(--paper-bg);
  color: var(--paper-text);
  border-bottom: 1px solid var(--paper-border);
}
.demo-section h2, .demo-section h3, .demo-section h4 {
  color: var(--paper-text);
}
.demo-section p {
  color: var(--paper-muted);
}
.demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}
.demo-header-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: flex-end;
}
.demo-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dub-red);
  margin-bottom: 16px;
  display: block;
}

/* Before -> After Visual Compare Grid */
.demo-compare-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 20px;
}
.compare-box {
  background: #ffffff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}
.compare-box.before-box {
  background: #f8f9fa;
  border-color: #d1d5db;
}
.compare-box.after-box {
  background: #090c12;
  border-color: var(--dub-red);
  box-shadow: 0 25px 70px rgba(239, 60, 36, 0.2);
}

.compare-tag-bar {
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.before-box .compare-tag-bar {
  background: #e5e7eb;
  color: #4b5563;
  border-bottom: 1px solid #d1d5db;
}
.after-box .compare-tag-bar {
  background: rgba(239, 60, 36, 0.15);
  color: var(--dub-red);
  border-bottom: 1px solid rgba(239, 60, 36, 0.3);
}

.compare-mock-content {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Before Mockup Details */
.before-box .mock-nav {
  font-size: 11px;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 10px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.before-box .mock-headline {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
  margin-bottom: 10px;
}
.before-box .mock-body {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 16px;
}
.before-box .mock-btn {
  font-size: 11px;
  background: #9ca3af;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
}

/* After Mockup Details */
.after-box .mock-nav {
  font-size: 12px;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.after-box .mock-headline {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 10px;
  font-family: var(--font-display);
}
.after-box .mock-headline em {
  font-style: normal;
  color: var(--dub-red);
}
.after-box .mock-body {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 18px;
}
.after-box .mock-btn {
  font-size: 12px;
  background: var(--dub-red);
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  box-shadow: 0 4px 15px var(--dub-red-glow);
}

.demo-action-bar {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.demo-btn {
  background-color: var(--paper-text);
  color: var(--text-pure);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.demo-btn:hover {
  background-color: var(--dub-red);
  color: var(--text-pure);
}

/* ==========================================================================
   FAQ & OBJECTION HANDLING
   ========================================================================== */
.faq-section {
  padding: 130px 0;
  position: relative;
  background: var(--bg-void);
  border-bottom: 1px solid var(--border-subtle);
}

.faq-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 80px;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item:hover {
  border-color: var(--border-medium);
}
.faq-item.active {
  border-color: var(--border-strong);
  background: var(--bg-card);
}

.faq-question {
  width: 100%;
  padding: 24px 28px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-pure);
}
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--dub-red);
  transition: transform 0.25s ease;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
  background-color: var(--dub-red);
  color: var(--text-pure);
  border-color: var(--dub-red);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  padding: 0 28px;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  padding-bottom: 28px;
}
.faq-answer p {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.65;
}

/* ==========================================================================
   CLOSING BANNER & MINIMALIST FOOTER
   ========================================================================== */
.closing-banner {
  padding: 140px 0;
  background: radial-gradient(circle at 50% 100%, #1c2332 0%, #08090d 80%);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.closing-content {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 1;
}
.closing-content h2 em {
  font-style: normal;
  color: var(--dub-red);
}

.site-footer {
  padding: 80px 0 40px;
  background: #050608;
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-brand p {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 320px;
}

.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-pure);
  margin-bottom: 20px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links a {
  font-size: 14px;
  color: var(--text-body);
}
.footer-links a:hover {
  color: var(--dub-red);
  padding-left: 4px;
}

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 16px;
}

/* Floating Strategy Quick Trigger */
.floating-strategy-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: all 0.25s ease;
}
.floating-strategy-trigger:hover {
  border-color: var(--dub-red);
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(239, 60, 36, 0.25);
}
.trigger-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dub-red);
  box-shadow: 0 0 10px var(--dub-red);
}
.trigger-text small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: block;
}
.trigger-text b {
  font-size: 13px;
  color: var(--text-pure);
  display: block;
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid, .diagnostic-container, .cap-panel, .case-card, 
  .case-card:nth-child(even), .eng-grid, .founder-grid, .demo-grid, .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .case-card:nth-child(even) .case-content {
    order: 1;
  }
  .case-card:nth-child(even) .case-visual {
    order: 2;
  }
  .growth-framework {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .main-nav, .header-cta-desktop {
    display: none;
  }
  .mobile-toggle {
    display: flex;
  }
  .diagnostic-container, .cap-panel, .case-card, .wizard-body {
    padding: 24px;
  }
  .proof-items {
    justify-content: flex-start;
    gap: 16px;
  }
  .options-grid, .wizard-form-grid, .case-four-step, .cap-feature-grid, .engine-dials {
    grid-template-columns: 1fr;
  }
  .comp-row {
    grid-template-columns: 1fr;
  }
  .founder-milestones {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .floating-strategy-trigger {
    bottom: 16px;
    right: 16px;
    padding: 10px 14px;
  }
}

/* ==========================================================================\n   STAGE 1 REFINEMENT — HERO, STRATEGY CTA & COMMERCIAL THESIS\n   ========================================================================== */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 38%, rgba(255,255,255,.035), transparent 28%),
    radial-gradient(circle at 92% 20%, rgba(239,60,36,.035), transparent 24%);
  z-index: 0;
}
.hero-geometry {
  position: absolute;
  width: min(72vw, 1050px);
  height: min(72vw, 1050px);
  right: -17vw;
  top: -18%;
  opacity: .34;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(30deg, transparent 48%, rgba(255,255,255,.075) 49%, transparent 50%),
    linear-gradient(150deg, transparent 48%, rgba(255,255,255,.05) 49%, transparent 50%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.035) 49%, transparent 50%);
  background-size: 110px 190px, 110px 190px, 220px 190px;
  mask-image: radial-gradient(ellipse at center, #000 10%, rgba(0,0,0,.82) 48%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, rgba(0,0,0,.82) 48%, transparent 76%);
  transform: rotate(-8deg) scale(1.08);
  animation: geometryDrift 24s ease-in-out infinite alternate;
}
.hero-geometry::after {
  content: "";
  position: absolute;
  inset: 6%;
  background:
    conic-gradient(from 15deg at 30% 30%, transparent 0 18%, rgba(255,255,255,.025) 18% 28%, transparent 28% 100%),
    conic-gradient(from 205deg at 65% 60%, transparent 0 22%, rgba(255,255,255,.035) 22% 34%, transparent 34% 100%);
  filter: blur(.2px);
  animation: geometryLight 15s ease-in-out infinite alternate;
}
@keyframes geometryDrift {
  0% { transform: rotate(-8deg) scale(1.08) translate3d(0,0,0); opacity: .27; }
  100% { transform: rotate(-5deg) scale(1.13) translate3d(-22px,18px,0); opacity: .39; }
}
@keyframes geometryLight {
  from { transform: translate3d(-12px, 4px, 0) rotate(0deg); opacity: .55; }
  to { transform: translate3d(16px, -10px, 0) rotate(3deg); opacity: .9; }
}

.hero-strategy-cta {
  position: relative;
  z-index: 2;
  padding: clamp(30px, 3.2vw, 48px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(19,23,34,.94), rgba(10,12,17,.88));
  box-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 60px rgba(239,60,36,.055);
  backdrop-filter: blur(14px);
}
.strategy-cta-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  color: var(--dub-red);
  margin-bottom: 24px;
}
.hero-strategy-cta h2 {
  font-size: clamp(30px, 3vw, 48px);
  max-width: 520px;
  margin-bottom: 18px;
}
.hero-strategy-cta > p:not(.strategy-cta-note) {
  color: #aeb8c7;
  font-size: 16px;
  line-height: 1.65;
  max-width: 520px;
}
.strategy-cta-deliverables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 28px 0 30px;
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
}
.strategy-cta-deliverables span {
  padding: 14px 15px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-high);
  font-size: 13px;
  line-height: 1.4;
}
.strategy-cta-deliverables span::before {
  content: "↳";
  color: var(--dub-red);
  margin-right: 8px;
}
.strategy-cta-button { width: 100%; justify-content: center; }
.strategy-cta-note {
  margin-top: 13px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
}

.commercial-thesis { max-width: 1120px; }
.money-headline { font-size: clamp(42px, 6.2vw, 92px); line-height: .98; max-width: 1120px; }
.rotating-product {
  display: inline-block;
  min-width: 5.4ch;
  color: var(--dub-red);
  transition: opacity .22s ease, transform .22s ease;
}
.rotating-product.is-changing { opacity: 0; transform: translateY(-.16em); }
.thesis-copy {
  max-width: 790px;
  margin-top: 38px;
  display: grid;
  gap: 14px;
}
.thesis-copy p { font-size: clamp(17px, 1.45vw, 21px); color: #aeb8c7; line-height: 1.65; }
.thesis-copy strong { color: var(--text-pure); font-weight: 700; }
.thesis-copy .thesis-close { color: var(--text-pure); font-weight: 650; }

@media (max-width: 768px) {
  .hero-geometry { width: 150vw; height: 150vw; right: -78vw; top: 2%; opacity: .22; }
  .hero-strategy-cta { padding: 26px 22px; }
  .strategy-cta-deliverables { grid-template-columns: 1fr; }
  .money-headline { font-size: clamp(38px, 12vw, 62px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-geometry, .hero-geometry::after { animation: none !important; }
  .rotating-product { transition: none; }
}

/* Stage 2: calmer, editorial problem switcher */
.diagnostic-container.diagnostic-simple {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.diagnostic-simple .dilemma-list { gap: 0; border-top: 1px solid var(--border-subtle); }
.diagnostic-simple .dilemma-btn {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 20px 30px 20px 0;
  min-height: 76px;
  justify-content: center;
}
.diagnostic-simple .dilemma-btn:hover { background: transparent; border-color: var(--border-medium); }
.diagnostic-simple .dilemma-btn.active { background: transparent; border-color: var(--border-medium); box-shadow: none; }
.diagnostic-simple .dilemma-btn.active::before {
  left: auto; right: 0; top: 50%; bottom: auto; width: 10px; height: 10px;
  border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 18px var(--dub-red-glow);
}
.diagnostic-simple .dilemma-quote { font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; color: #aeb7c6; transition: color .2s ease, transform .2s ease; }
.diagnostic-simple .dilemma-btn:hover .dilemma-quote,
.diagnostic-simple .dilemma-btn.active .dilemma-quote { color: var(--text-pure); transform: translateX(4px); }
.dilemma-simple-display {
  min-height: 430px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid var(--border-subtle);
  padding: clamp(30px, 4vw, 52px);
  border-radius: var(--radius-xl);
}
.dilemma-simple-display h3 { font-family: var(--font-display); font-size: clamp(30px, 3vw, 48px); line-height: 1.05; margin: 22px 0 24px; max-width: 12ch; }
.dilemma-simple-display p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: #b0b9ca; max-width: 58ch; }
.dilemma-capabilities { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.dilemma-simple-display .display-action { border: 0; padding-top: 34px; }

/* Stage 2: cleaner solution selector */
.capabilities-tabs { gap: 0; padding: 0; margin-bottom: 34px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.cap-tab { flex: 1; justify-content: center; border: 0; border-right: 1px solid var(--border-subtle); border-radius: 0; padding: 17px 20px; }
.cap-tab:last-child { border-right: 0; }
.cap-tab.active { box-shadow: none; }
.cap-panel { box-shadow: 0 24px 70px rgba(0,0,0,.42); }

@media (max-width: 768px) {
  .diagnostic-container.diagnostic-simple { padding: 0; gap: 26px; }
  .dilemma-simple-display { min-height: 0; padding: 28px 22px; }
  .dilemma-simple-display h3 { max-width: none; }
  .capabilities-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .cap-tab { border-bottom: 1px solid var(--border-subtle); }
  .cap-tab:nth-child(2) { border-right: 0; }
  .cap-tab:nth-child(3), .cap-tab:nth-child(4) { border-bottom: 0; }
}

/* === STAGE 3: proof, experience and founder refinement === */
.work-intro p { max-width: 760px; }
.case-card { grid-template-columns: 1fr 1fr; gap: 48px; }
.case-card:nth-child(even) { grid-template-columns: 1fr 1fr; }
.case-visual { min-width: 0; }
.case-visual-container { min-height: 390px; display:flex; flex-direction:column; justify-content:center; isolation:isolate; }
.case-visual-container::before { content:""; position:absolute; inset:-20%; background:radial-gradient(circle at 75% 20%, rgba(239,60,36,.12), transparent 38%), radial-gradient(circle at 20% 85%, rgba(34,211,238,.08), transparent 38%); z-index:-1; }
.case-visual-container::after { content:"REPRESENTATIVE INTERFACE"; position:absolute; right:18px; bottom:12px; font:9px var(--font-mono); letter-spacing:.12em; color:#596275; }
.case-visual-container .mockup-bar { position:absolute; top:0; left:0; right:0; padding:12px 16px; border-bottom:1px solid var(--border-subtle); background:#0c0e14; }
.case-visual-container .ui-card { position:relative; margin-left:7%; margin-right:2%; box-shadow:0 18px 40px rgba(0,0,0,.3); }
.case-visual-container .ui-card:first-of-type { margin-top:34px; transform:translateX(-3%) rotate(-1deg); }
.case-visual-container .ui-card:last-of-type { transform:translateX(5%) rotate(1deg); }
.case-card:nth-child(1) .case-visual-container::before { background:radial-gradient(circle at 72% 25%, rgba(34,211,238,.14), transparent 38%), radial-gradient(circle at 20% 85%, rgba(16,185,129,.08), transparent 40%); }
.case-card:nth-child(2) .case-visual-container::before { background:radial-gradient(circle at 78% 20%, rgba(239,60,36,.12), transparent 40%), radial-gradient(circle at 15% 80%, rgba(99,102,241,.12), transparent 38%); }
.case-card:nth-child(3) .case-visual-container::before { background:radial-gradient(circle at 75% 20%, rgba(217,165,80,.10), transparent 40%), radial-gradient(circle at 20% 85%, rgba(239,60,36,.08), transparent 38%); }
.case-card:nth-child(4) .case-visual-container::before { background:radial-gradient(circle at 75% 20%, rgba(16,185,129,.10), transparent 40%), radial-gradient(circle at 20% 85%, rgba(34,211,238,.08), transparent 38%); }
.case-card:hover .case-visual-container .ui-card:first-of-type { transform:translateX(-5%) translateY(-4px) rotate(-1deg); }
.case-card:hover .case-visual-container .ui-card:last-of-type { transform:translateX(7%) translateY(4px) rotate(1deg); }
.case-visual-container .ui-card { transition:transform .45s ease, border-color .45s ease; }
.case-four-step { gap:12px; }
.step-box { background:transparent; border:0; border-top:1px solid var(--border-subtle); border-radius:0; padding:15px 0 0; }
.step-box.result { background:transparent; border-color:rgba(16,185,129,.35); }

/* AI / modern tools: quieter, editorial rather than dashboard-like */
.eng-grid { align-items:start; }
.eng-quote { font-family:var(--font-display); font-size:clamp(22px,2.2vw,32px); font-weight:800; color:var(--text-pure); border-left:3px solid var(--dub-red); padding-left:22px; margin:8px 0 4px; line-height:1.2; }
.eng-budget-visualizer { background:transparent; box-shadow:none; border:0; padding:0; }
.budget-equation-banner { text-align:left; border:0; border-left:3px solid var(--dub-red); border-radius:0; padding:4px 0 4px 22px; background:transparent; }
.budget-benefits-grid { grid-template-columns:1fr; gap:0; border-top:1px solid var(--border-subtle); }
.budget-benefit-item { background:transparent; border:0; border-bottom:1px solid var(--border-subtle); border-radius:0; padding:20px 0; display:grid; grid-template-columns:160px 1fr; gap:20px; }
.budget-benefit-item b { font-size:15px; }
.budget-benefit-item span { font-size:13px; }
.eng-budget-visualizer > div:last-child { background:transparent !important; border:0 !important; border-left:1px solid var(--border-medium) !important; border-radius:0 !important; padding:12px 0 12px 20px !important; }

/* Founder: deliberately quieter and ready for a real portrait */
.founder-grid { grid-template-columns:.62fr 1.38fr; gap:72px; }
.portrait-placeholder-box { aspect-ratio:4/5; justify-content:flex-end; align-items:flex-start; text-align:left; padding:28px; background:linear-gradient(145deg,#10131a,#08090d); }
.portrait-placeholder-box::after { content:"PORTRAIT PLACEHOLDER"; position:absolute; inset:22px 22px 125px; border:1px dashed #2c3442; display:grid; place-items:center; font:10px var(--font-mono); letter-spacing:.15em; color:#505a6c; }
.founder-avatar-icon { display:none; }
.portrait-placeholder-box h5,.portrait-placeholder-box span,.portrait-placeholder-box p,.portrait-placeholder-box small { position:relative; z-index:2; }
.founder-bio h2 { font-size:clamp(25px,2.35vw,36px); max-width:760px; }
.founder-bio blockquote { font-size:clamp(18px,1.55vw,23px); }
.founder-milestones { margin-top:6px; }
.milestone-item { background:transparent; border:0; border-top:1px solid var(--border-subtle); border-radius:0; padding:15px 0; }

@media (max-width: 900px) {
  .case-visual-container { min-height:320px; }
  .budget-benefit-item { grid-template-columns:1fr; gap:5px; }
  .founder-grid { gap:36px; }
}

/* Stage 4 — conversion polish */
.demo-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.demo-modal.open { display: flex; }
.demo-modal-backdrop { position: absolute; inset: 0; background: rgba(3,6,10,.82); backdrop-filter: blur(10px); }
.demo-modal-panel { position: relative; width: min(760px, 100%); max-height: 90vh; overflow: auto; background: #0d121a; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: clamp(28px,5vw,52px); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.demo-modal-panel h2 { font-size: clamp(30px,4vw,50px); margin: 14px 0 16px; }
.demo-modal-intro { max-width: 620px; margin-bottom: 28px; }
.demo-modal-close { position:absolute; top:16px; right:18px; border:0; background:transparent; color:#fff; font-size:30px; cursor:pointer; }
.demo-qualify-form { display:grid; gap:18px; }
.demo-qualify-form label { display:grid; gap:8px; font-size:12px; font-family:var(--font-mono); color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.demo-qualify-form input,.demo-qualify-form textarea,.demo-qualify-form select { width:100%; border:1px solid var(--border-subtle); background:#090d13; color:#fff; border-radius:7px; padding:14px 15px; font:inherit; font-family:var(--font-sans); text-transform:none; letter-spacing:0; }
.demo-qualify-form textarea { min-height:110px; resize:vertical; }
.demo-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.demo-qualify-form small { color:var(--text-muted); line-height:1.5; }
.demo-form-success { padding:28px 0 8px; }
.demo-form-success h3 { margin:18px 0 10px; font-size:30px; }
@media(max-width:700px){ .demo-form-row{grid-template-columns:1fr;} .demo-modal{padding:12px;} .demo-modal-panel{padding:30px 20px;} }


/* === Copy refinement pass: roadmap + commercial thesis + scenario intro === */
.money-subline {
  display: inline-block;
  margin-top: .14em;
  color: var(--text-muted);
  font-weight: 420;
  letter-spacing: -0.025em;
}
.scenario-intro {
  margin-top: clamp(58px, 8vw, 110px);
  margin-bottom: clamp(24px, 4vw, 44px);
  max-width: 760px;
}
.scenario-intro h3 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}


/* === Text amendments pass 2: roadmap, commercial statement, section hierarchy === */
.money-headline {
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: 1.02;
  max-width: 1080px;
}
.rotating-product {
  display: inline-block;
  min-width: 7.4ch;
  color: var(--dub-red);
  vertical-align: baseline;
  transition: opacity .24s ease, transform .24s ease;
}
.money-subline {
  color: #fff;
  font-size: .64em;
  font-weight: 390;
  letter-spacing: -0.018em;
}
.scenario-intro h3 {
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: 1.02;
}
.capabilities-section .section-head h2,
.work-section .section-head h2 {
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: 1.02;
}
@media (max-width: 768px) {
  .money-headline,
  .scenario-intro h3,
  .capabilities-section .section-head h2,
  .work-section .section-head h2 { font-size: clamp(34px, 10.5vw, 50px); }
  .rotating-product { min-width: 7.4ch; }
}


/* === Text amendments pass 3: roadmap CTA + commercial statement === */
.hero-strategy-cta h2 span { color: var(--dub-red); }
.money-headline {
  font-size: clamp(46px, 4.9vw, 72px);
  line-height: .99;
}
.money-subline {
  display: inline-block;
  margin-top: .24em;
  font-size: .58em;
  line-height: 1.08;
  font-weight: 390;
  color: #fff;
}
.thesis-copy { max-width: 850px; gap: 20px; }
.thesis-copy p { line-height: 1.62; }
@media (max-width: 768px) {
  .money-headline { font-size: clamp(36px, 10.8vw, 54px); }
}


/* HERO VISUAL UPDATE — preserve all existing copy/layout; add supplied geometric banner only */
.hero-section {
  background-color: #07090d;
  isolation: isolate;
}
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(7,9,13,.96) 0%, rgba(7,9,13,.82) 36%, rgba(7,9,13,.48) 68%, rgba(7,9,13,.34) 100%),
    url('../assets/hero-geometric-bg.png');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  opacity: .78;
  transform: scale(1.035);
  animation: heroPolyDrift 26s ease-in-out infinite alternate;
}
.hero-section::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(7,9,13,.04), rgba(7,9,13,.24));
}
.hero-geometry { display: none !important; }
.hero-grid { z-index: 2; }
.hero-strategy-cta {
  background: rgba(13, 17, 25, .94);
  border: 1px solid rgba(148, 163, 184, .34);
  box-shadow: 0 30px 80px rgba(0,0,0,.58), 0 0 44px rgba(239,60,36,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@keyframes heroPolyDrift {
  0% { transform: scale(1.035) translate3d(0,0,0); }
  100% { transform: scale(1.075) translate3d(-16px, 8px, 0); }
}
@media (max-width: 900px) {
  .hero-section::after {
    background-image:
      linear-gradient(180deg, rgba(7,9,13,.88) 0%, rgba(7,9,13,.68) 55%, rgba(7,9,13,.82) 100%),
      url('../assets/hero-geometric-bg.png');
    background-position: 62% center;
    opacity: .48;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-section::after { animation: none !important; transform: none; }
}

/* GEOMETRIC HERO VISIBILITY PASS — make supplied low-poly pattern clearly visible */
.hero-section::after {
  background-image: url('../assets/hero-geometric-bg.png') !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: auto 112% !important;
  opacity: .92 !important;
  filter: contrast(1.14) brightness(1.12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 24%, rgba(0,0,0,.72) 48%, #000 68%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 24%, rgba(0,0,0,.72) 48%, #000 68%, #000 100%);
}
.hero-section::before {
  background:
    radial-gradient(circle at 18% 48%, rgba(239,60,36,.07), transparent 35%),
    linear-gradient(90deg, rgba(7,9,13,.08) 0%, rgba(7,9,13,.03) 58%, rgba(7,9,13,.10) 100%) !important;
}
@media (max-width: 900px) {
  .hero-section::after {
    background-size: auto 88% !important;
    background-position: 72% 18% !important;
    opacity: .48 !important;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 58%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 58%, transparent 100%);
  }
}

/* === Refinement pass: section hierarchy + project visualisations === */
.product-list { color: var(--dub-red); white-space: nowrap; }
.scenario-intro { max-width: 50%; }
.scenario-intro h3,
.work-section .section-head h2 {
  font-size: clamp(46px, 4.9vw, 72px);
  line-height: .99;
}
.work-section .section-head { max-width: 50%; }
.capabilities-section .section-head { max-width: 820px; }
.capabilities-section .section-head p { max-width: 760px; }

/* MacBook-style visual representations for the four project types */
.device-showcase { display:flex; align-items:center; justify-content:center; min-height:430px; padding:34px 24px 54px; overflow:hidden; background:radial-gradient(circle at 55% 42%, rgba(244,57,37,.09), transparent 45%); }
.laptop { width:min(100%, 610px); position:relative; filter:drop-shadow(0 30px 45px rgba(0,0,0,.55)); }
.laptop-screen { position:relative; aspect-ratio:16/10; overflow:hidden; border:8px solid #242833; border-bottom-width:13px; border-radius:15px 15px 8px 8px; background:#f5f3ef; color:#111; font-family:var(--font-sans); }
.laptop-screen:before { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:#555b67; top:4px; left:50%; z-index:4; }
.laptop-base { height:14px; width:112%; margin-left:-6%; border-radius:2px 2px 13px 13px; background:linear-gradient(#a7abb2,#5d626b); position:relative; }
.laptop-base:after { content:""; position:absolute; width:16%; height:3px; top:0; left:42%; background:#3f444d; border-radius:0 0 5px 5px; }
.mini-nav { height:15%; display:flex; align-items:center; justify-content:space-between; padding:0 6%; font-size:9px; border-bottom:1px solid rgba(0,0,0,.08); }
.mini-nav b { font-size:13px; letter-spacing:-.03em; }
.mini-hero { height:63%; padding:8% 7%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; background:linear-gradient(120deg,#f3f0e9,#fff); }
.mini-hero small,.startup-body small { font-size:7px; letter-spacing:.16em; color:#e6422f; font-weight:800; }
.mini-hero strong { font-size:clamp(22px,3vw,40px); line-height:.95; max-width:80%; margin:10px 0; letter-spacing:-.05em; }
.mini-hero p { font-size:9px; max-width:65%; line-height:1.45; color:#555; }
.mini-hero i { margin-top:10px; background:#111; color:#fff; font-style:normal; font-size:7px; padding:8px 11px; }
.mini-proof { height:22%; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; text-align:center; background:#111; color:#fff; font-size:7px; letter-spacing:.1em; }
.shop-screen { background:#f6f2eb; }
.shop-layout { display:grid; grid-template-columns:24% 1fr; height:85%; }
.shop-layout aside { padding:12% 14%; border-right:1px solid #ddd5ca; display:flex; flex-direction:column; gap:10px; font-size:7px; color:#6d675f; }
.shop-layout aside b { color:#111; letter-spacing:.12em; }
.shop-layout main { padding:6%; }
.shop-title { font-size:20px; font-weight:800; letter-spacing:-.04em; margin-bottom:7%; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.product-grid i { aspect-ratio:1; background:linear-gradient(135deg,#8d6f57,#d6b58d 45%,#6e473a); border-radius:2px; position:relative; }
.product-grid i:nth-child(2n){background:linear-gradient(135deg,#425b5c,#b8a379 55%,#32383a)}
.product-grid i:nth-child(3n){background:linear-gradient(135deg,#7a3030,#d09b67 55%,#4d2626)}
.app-screen { display:grid; grid-template-columns:25% 1fr; background:#10141d; color:#fff; }
.app-side { padding:14% 14%; background:#0b0e14; display:flex; flex-direction:column; gap:15px; font-size:8px; color:#818b9c; }
.app-side b { color:#fff; font-size:16px; margin-bottom:10px; }
.app-side span:first-of-type { color:#ff4a36; }
.app-main { padding:9% 7%; }
.app-main>small { font-size:7px; color:#788397; letter-spacing:.15em; }
.app-main>strong { display:block; font-size:24px; margin:5px 0 18px; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.metric-row i { background:#181e2a; padding:12px 8px; font-size:18px; font-style:normal; font-weight:800; border:1px solid #252d3b; }
.metric-row small { display:block; font-size:5px; color:#7e899b; margin-top:4px; }
.chart-bars { height:38%; margin-top:15px; display:flex; align-items:flex-end; gap:7px; padding:10px; background:#151a24; }
.chart-bars i { flex:1; height:35%; background:#3c475b; border-radius:2px 2px 0 0; }
.chart-bars i:nth-child(2){height:55%}.chart-bars i:nth-child(3){height:42%}.chart-bars i:nth-child(4){height:72%;background:#f13f2d}.chart-bars i:nth-child(5){height:62%}.chart-bars i:nth-child(6){height:84%}.chart-bars i:nth-child(7){height:76%}
.startup-screen { background:#f7f7f5; }
.startup-body { padding:8% 7%; }
.startup-body>strong { display:block; font-size:27px; letter-spacing:-.05em; margin:7px 0 12%; }
.roadmap-line { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; position:relative; }
.roadmap-line:before { content:""; height:2px; background:#d9d9d5; position:absolute; left:8%; right:8%; top:11px; }
.roadmap-line i { z-index:1; width:23px; height:23px; border-radius:50%; background:#ddd; display:flex; align-items:center; justify-content:center; font-size:7px; font-style:normal; position:relative; }
.roadmap-line i.done { background:#151515; color:#fff; }.roadmap-line i.active{background:#f13f2d;color:#fff;}
.roadmap-line i span { position:absolute; top:30px; left:50%; transform:translateX(-50%); color:#555; font-size:6px; white-space:nowrap; font-weight:700; }
.startup-card { margin-top:20%; padding:10px; background:#fff; border:1px solid #deded9; font-size:6px; color:#777; }
.startup-card b { display:block; color:#111; font-size:11px; margin-top:4px; }
@media(max-width:768px){
  .scenario-intro,.work-section .section-head{max-width:100%;}
  .scenario-intro h3,.work-section .section-head h2{font-size:clamp(38px,11vw,54px);}
  .product-list{white-space:normal;}
  .device-showcase{min-height:300px;padding:22px 12px 40px;}
}

/* Founder portrait */
.founder-photo-frame {
  aspect-ratio: 4 / 5;
  background: #0d1017;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
.founder-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 42%;
}

/* === MOBILE RESPONSIVE FIX PASS === */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }

@media (max-width: 768px) {
  /* Prevent decorative / fixed-width children creating a wider page canvas */
  .shell, section, main, header, footer,
  .hero-grid, .hero-content, .strategy-card,
  .diagnostic-container, .scenario-list, .scenario-response,
  .cap-panel, .cap-content, .cap-mockup-frame,
  .case-study-list, .case-card, .case-content, .case-visual,
  .case-visual-container, .eng-grid, .founder-grid,
  .founder-portrait-wrap, .founder-bio, .demo-grid,
  .demo-header-row, .demo-compare-container, .faq-grid {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Case studies: content first, visual beneath, fully contained */
  .case-card,
  .case-card:nth-child(even) {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    width: 100%;
  }
  .case-card .case-content,
  .case-card:nth-child(even) .case-content { order: 1 !important; width: 100%; }
  .case-card .case-visual,
  .case-card:nth-child(even) .case-visual { order: 2 !important; width: 100%; }
  .case-visual-container { min-height: 280px; width: 100%; overflow: hidden; }
  .case-visual-container .ui-card { margin-left: 0; margin-right: 0; max-width: 100%; transform: none !important; }
  .case-visual-container .ui-card:first-of-type,
  .case-visual-container .ui-card:last-of-type { transform: none !important; }

  /* Project type laptop visuals must remain inside their cards */
  .device-showcase { width: 100%; overflow: hidden; padding-left: 10px; padding-right: 10px; }
  .laptop { width: 100%; max-width: 100%; }
  .laptop-base { width: 100%; margin-left: 0; }
  .laptop-screen { width: 100%; }

  /* Founder: portrait above copy */
  .founder-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }
  .founder-portrait-wrap { order: 1; width: 100%; }
  .founder-bio { order: 2; width: 100%; }
  .founder-photo-frame { width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 4 / 4.5; }

  /* Free Website Demo / qualified project section: stack rather than 50/50 */
  .demo-grid { display: block !important; }
  .demo-header-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100%;
  }
  .demo-header-row > * { width: 100%; max-width: 100%; }
  .demo-compare-container { width: 100%; }

  /* Extra protection against transformed decoration widening the viewport */
  .hero-section, .hero-section::before, .hero-section::after { max-width: 100vw; }
  .floating-strategy-trigger { max-width: calc(100vw - 32px); }
}

/* ==========================================================================\n   FREE WEBSITE DEMO — AD-INSPIRED VISUAL SHOWCASE\n   ========================================================================== */
.demo-section {
  background: #07090d;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.demo-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(239,60,36,.08), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.018), transparent 30%);
}
.demo-section > .shell { position: relative; z-index: 1; }
.demo-offer-head { max-width: 880px; margin: 0 auto 54px; text-align: center; }
.demo-offer-head h2 { color:#fff; font-size:clamp(42px,6vw,82px); line-height:.96; letter-spacing:-.045em; margin:14px 0 24px; }
.demo-offer-head h2 em { color:var(--dub-red); font-style:normal; }
.demo-offer-head p { color:#b6bdc9; max-width:760px; margin:0 auto; font-size:clamp(16px,1.5vw,20px); line-height:1.65; }
.demo-badge { text-align:center; }
.demo-laptop-compare { display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); gap:18px; align-items:center; max-width:1180px; margin:0 auto; }
.demo-device { min-width:0; }
.demo-device-label { color:#fff; text-align:center; font-family:var(--font-display); font-weight:800; font-size:clamp(16px,1.5vw,22px); margin-bottom:14px; }
.demo-laptop { width:100%; min-width:0; }
.demo-laptop-screen { background:#0b0d11; border:4px solid #333943; border-bottom-width:8px; border-radius:16px 16px 8px 8px; padding:7px; aspect-ratio:16/10; overflow:hidden; box-shadow:0 24px 55px rgba(0,0,0,.38); }
.demo-laptop-base { width:108%; height:14px; margin-left:-4%; background:linear-gradient(#aeb3ba,#5f6670); border-radius:2px 2px 12px 12px; box-shadow:0 9px 14px rgba(0,0,0,.3); }
.demo-transform-arrow { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin:26px auto 0; background:var(--dub-red); color:#fff; font-size:34px; font-weight:900; box-shadow:0 10px 30px rgba(239,60,36,.35); }
.old-site { height:100%; background:#e9edf2; color:#222; font-family:Arial,sans-serif; overflow:hidden; }
.old-site-top { height:18%; display:flex; justify-content:space-between; align-items:center; padding:0 5%; background:linear-gradient(#fff,#dce4ec); color:#17599d; font-size:clamp(7px,.75vw,12px); }
.old-site-top strong { font-size:1.35em; }
.old-site-body { height:82%; display:grid; grid-template-columns:25% 75%; }
.old-site-body aside { padding:9% 10%; background:#d9e4ef; color:#2d639a; font-size:clamp(6px,.65vw,10px); line-height:2.6; }
.old-site-body main { padding:7%; font-size:clamp(6px,.68vw,11px); }
.old-site-body h3 { color:#222; font-family:Arial,sans-serif; font-size:clamp(11px,1.25vw,20px); margin:0 0 8%; line-height:1.15; }
.old-site-image { float:left; width:42%; height:46%; margin:0 6% 4% 0; background:repeating-linear-gradient(135deg,#777 0 10px,#a8a8a8 10px 20px); filter:grayscale(1); }
.old-site-body p { color:#444; font-size:inherit; line-height:1.45; }
.new-site { height:100%; background:#090d12; color:#fff; overflow:hidden; font-family:var(--font-sans); }
.new-site-nav { height:15%; display:flex; align-items:center; gap:5%; padding:0 4%; border-bottom:1px solid rgba(255,255,255,.1); font-size:clamp(6px,.62vw,10px); }
.new-site-nav strong { margin-right:auto; }
.new-site-nav span { color:#8f99a8; }
.new-site-nav b { background:var(--dub-red); padding:2.5% 3%; border-radius:3px; font-size:.9em; }
.new-site-hero { height:67%; display:grid; grid-template-columns:57% 43%; padding:6% 5% 3%; gap:4%; }
.new-site-hero small { color:#9ba4b2; letter-spacing:.18em; font-size:clamp(5px,.5vw,8px); }
.new-site-hero h3 { color:#fff; font-family:var(--font-display); font-size:clamp(14px,1.7vw,27px); line-height:1.02; margin:5% 0; letter-spacing:-.03em; }
.new-site-hero p { color:#bac1cc; font-size:clamp(6px,.63vw,10px); line-height:1.4; margin-bottom:6%; }
.new-site-hero button { border:0; background:var(--dub-red); color:#fff; font-weight:700; border-radius:3px; padding:4% 6%; font-size:clamp(6px,.58vw,9px); }
.new-site-visual { position:relative; overflow:hidden; border-radius:5px; background:linear-gradient(145deg,#242b33,#080b0f); }
.new-site-visual::before { content:""; position:absolute; width:75%; height:75%; right:-10%; top:12%; border-radius:50%; border:clamp(8px,1.4vw,20px) solid #5b6570; box-shadow:inset 0 0 0 3px #111; }
.new-site-visual span { position:absolute; display:block; background:linear-gradient(90deg,#555f68,#d4d8db,#444d56); border-radius:20px; transform:rotate(-22deg); }
.new-site-visual span:nth-child(1){width:80%;height:12%;left:2%;top:30%;}.new-site-visual span:nth-child(2){width:68%;height:10%;left:12%;top:52%;}.new-site-visual span:nth-child(3){width:58%;height:9%;left:20%;top:70%;}
.new-site-proof { height:18%; border-top:1px solid rgba(255,255,255,.08); display:grid; grid-template-columns:repeat(3,1fr); align-items:center; padding:0 4%; color:#c9ced6; font-size:clamp(5px,.55vw,9px); }
.new-site-proof span { text-align:center; }
.demo-benefits { max-width:960px; margin:48px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.demo-benefits > div { display:flex; align-items:center; justify-content:center; gap:14px; color:#fff; font-size:clamp(14px,1.3vw,18px); }
.demo-benefit-icon { color:var(--dub-red); font-size:28px; }
.demo-offer-action { text-align:center; margin-top:42px; }
.demo-offer-action .demo-btn { background:var(--dub-red); color:#fff; min-width:min(620px,100%); justify-content:center; box-shadow:0 10px 34px rgba(239,60,36,.28); }
.demo-offer-action p { margin:18px 0 0; color:#aab2be; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; }

@media (max-width: 760px) {
  .demo-section { padding:84px 0; }
  .demo-offer-head { text-align:left; margin-bottom:38px; }
  .demo-badge { text-align:left; }
  .demo-offer-head h2 { font-size:clamp(40px,13vw,58px); }
  .demo-laptop-compare { display:flex; flex-direction:column; gap:20px; width:100%; }
  .demo-device { width:100%; }
  .demo-transform-arrow { transform:rotate(90deg); margin:2px auto; width:50px; height:50px; }
  .demo-laptop-screen { border-width:3px; border-bottom-width:6px; }
  .old-site-top { font-size:7px; }.old-site-body aside{font-size:6px}.old-site-body main{font-size:7px}.old-site-body h3{font-size:12px}
  .new-site-nav{font-size:6px}.new-site-hero small{font-size:5px}.new-site-hero h3{font-size:15px}.new-site-hero p{font-size:6px}.new-site-hero button{font-size:6px}.new-site-proof{font-size:5px}
  .demo-benefits { grid-template-columns:1fr; gap:14px; margin-top:38px; }
  .demo-benefits > div { justify-content:flex-start; border-top:1px solid rgba(255,255,255,.08); padding-top:14px; }
  .demo-offer-action { text-align:left; }
  .demo-offer-action .demo-btn { width:100%; min-width:0; }
  .demo-offer-action p { line-height:1.5; }
}

/* === MOBILE WIDTH / HORIZONTAL OVERFLOW HARDENING === */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}
@media (max-width: 768px) {
  /* Decorative desktop effects must never contribute to the mobile canvas. */
  .glow-ambient { display: none !important; }
  .floating-strategy-trigger { display: none !important; }

  /* Every top-level region is pinned to the viewport. */
  .site-header, main, section, footer, .hero-section,
  .shell, .header-inner, .hero-grid, .hero-content,
  .strategy-card, .hero-strategy-cta,
  .diagnostic-section, .diagnostic-container,
  .capabilities-section, .cap-panel,
  .work-section, .case-study-list, .case-card,
  .engineering-section, .eng-grid,
  .founder-section, .founder-grid,
  .growth-section, .demo-section, .faq-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Children are allowed to shrink instead of widening a grid/flex parent. */
  .hero-grid > *, .diagnostic-container > *, .cap-panel > *,
  .case-card > *, .eng-grid > *, .founder-grid > *,
  .demo-grid > *, .demo-laptop-compare > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* No desktop transform or oversized visual may protrude horizontally. */
  .hero-section::after {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform-origin: center center;
  }
  .device-showcase, .case-visual, .case-visual-container,
  .laptop, .laptop-screen, .laptop-base,
  .demo-laptop-compare, .demo-device, .demo-laptop,
  .founder-photo-frame {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Laptop base was intentionally 112% on desktop; constrain it on phones. */
  .laptop-base {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Avoid nowrap labels creating hidden horizontal width. */
  .cap-tabs, .preset-tabs { max-width: 100%; overflow-x: auto; }
  .cap-tab, .preset-tab-btn, .product-list, .roadmap-line i span {
    white-space: normal !important;
  }
}

/* === MOBILE HERO GEOMETRIC ART ===
   Dedicated portrait asset so the low-poly treatment remains visible on phones
   without forcing desktop-sized pseudo-elements beyond the viewport. */
@media (max-width: 768px) {
  .hero-section::after {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('../assets/hero-geometric-mobile.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    opacity: .82 !important;
    filter: contrast(1.08) brightness(.92) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: none !important;
    animation: heroMobilePolyDrift 30s ease-in-out infinite alternate !important;
  }
  .hero-section::before {
    background: linear-gradient(180deg, rgba(5,7,10,.08) 0%, rgba(5,7,10,.16) 58%, rgba(5,7,10,.48) 100%) !important;
  }
}
@keyframes heroMobilePolyDrift {
  from { background-position: 50% 0%; }
  to   { background-position: 54% 3%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-section::after { animation: none !important; }
}

/* September homepage refresh: retain the established layout and interactions. */
.strategy-cta-deliverables {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0;}
.strategy-cta-deliverables span {position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;padding:16px;background:linear-gradient(135deg,#20232b,#11141a);border:1px solid #373b44;border-radius:8px;}
.strategy-cta-deliverables span::before {content:none;}
.strategy-cta-deliverables i {font-style:normal;font-size:25px;color:var(--dub-red);line-height:1;}
.strategy-cta-deliverables small {font:10px var(--font-mono);color:#9299a5;}
.strategy-cta-deliverables b {grid-column:1/-1;font-size:13px;color:#f0edf6;}
.money-headline,.scenario-intro h3,.capabilities-section .section-head h2,.work-section .section-head h2 {font-family:var(--font-display);font-weight:800;font-size:clamp(38px,4.7vw,68px);line-height:1.02;letter-spacing:-.035em;}
.money-headline {max-width:1100px;}
.money-subline {display:block;font-size:.55em;line-height:1.2;margin-top:20px;font-weight:600;color:#a0a8b8;}
.scenario-intro {max-width:100%;width:100%;}
.cap-panel {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:40px;}
.cap-art {position:relative;aspect-ratio:1;min-width:0;width:100%;margin:0;overflow:hidden;border-radius:16px;background:#171e25;border:1px solid var(--border-medium);box-shadow:0 25px 50px #0005;}
.cap-art img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cap-art:hover img {transform:scale(1.025);}
.cap-art figcaption {position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:#0b111ce8;color:#c7cbd3;font:9px var(--font-mono);letter-spacing:.12em;display:flex;justify-content:space-between;}
.cap-art figcaption span {color:var(--dub-red);}
.case-card,.case-card:nth-child(even) {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:40px;}
.case-photo {position:relative;margin:0;aspect-ratio:1;align-self:center;overflow:hidden;border-radius:16px;background:#20252d;}
.case-photo img {display:block;width:100%;height:100%;object-fit:cover;}
.case-photo figcaption {position:absolute;bottom:0;left:0;right:0;padding:32px 16px 14px;background:linear-gradient(transparent,#000a);color:#fff;font:9px var(--font-mono);letter-spacing:.12em;}
@media(max-width:1100px) {
 .cap-panel,.case-card,.case-card:nth-child(even) {gap:28px;padding:28px;}
 .cap-feature-grid {gap:16px;}
}
@media(max-width:900px) {
 .cap-panel,.case-card,.case-card:nth-child(even) {grid-template-columns:minmax(0,1fr);}
 .cap-art {max-width:640px;margin-inline:auto;}
 .case-photo {max-width:640px;margin-inline:auto;}
 .case-card .case-content,.case-card:nth-child(even) .case-content {order:1;}
 .case-card .case-visual,.case-card:nth-child(even) .case-visual {order:2;}
}
@media(max-width:600px) {
 .cap-panel,.case-card,.case-card:nth-child(even) {padding:20px;gap:28px;border-radius:20px;}
 .cap-art,.case-photo {border-radius:10px;}
 .strategy-cta-deliverables span {padding:12px;gap:10px;}
 .strategy-cta-deliverables b {font-size:12px;}
 .money-headline,.scenario-intro h3,.capabilities-section .section-head h2,.work-section .section-head h2 {font-size:clamp(32px,9.4vw,48px);font-weight:800;}
 .money-subline {font-size:.59em;}
}
@media(prefers-reduced-motion:reduce) {.cap-art img {transition:none;}.cap-panel {animation:none;}}

/* Review amendments: more breathing room, restrained geometry, compact demo. */
.philosophy-section .scenario-intro {margin-top:clamp(100px,11vw,164px);}
.dilemma-simple-display h3 {max-width:none;width:100%;}
.capabilities-section,.modern-eng-section {position:relative;isolation:isolate;}
.capabilities-section::before,.modern-eng-section::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../assets/hero-geometric-bg.png') no-repeat right top / auto 850px;opacity:.19;mask-image:linear-gradient(180deg,#000,transparent 90%);}
.modern-eng-section::before {background-position:left center;background-size:auto 100%;opacity:.14;transform:scaleX(-1);mask-image:linear-gradient(90deg,transparent,#000);}
.case-photo figcaption {font-size:10px;letter-spacing:.08em;line-height:1.5;}
.founder-video-button {width:100%;margin-top:18px;justify-content:center;gap:12px;white-space:normal;}
.founder-video-button span {color:var(--dub-red);}
.founder-video-dialog {position:fixed;inset:0;margin:auto;width:min(960px,calc(100% - 32px));max-height:90dvh;overflow:auto;padding:20px;background:#0d1017;color:#fff;border:1px solid #444954;border-radius:16px;box-shadow:0 30px 100px #0009;}
.founder-video-dialog::backdrop {background:#000d;backdrop-filter:blur(6px);}
.founder-video-heading {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;}
.founder-video-heading h2 {font-size:22px;letter-spacing:-.02em;}
.founder-video-heading button {width:44px;height:44px;border:1px solid #444954;border-radius:50%;background:#1e2330;color:white;font-size:28px;cursor:pointer;}
.founder-video-player {aspect-ratio:16/9;background:#000;}
.founder-video-player iframe {width:100%;height:100%;border:0;display:block;}
.founder-video-dialog p {font-size:13px;margin-top:14px;}
.founder-video-dialog a {color:#fff;text-decoration:underline;}
.demo-section {padding-top:64px;padding-bottom:64px;}
.demo-offer-head {max-width:1000px;margin-bottom:28px;}
.demo-offer-head h2 {font-size:clamp(36px,4.2vw,60px);line-height:1.02;margin:12px 0 16px;}
.demo-offer-head p {font-size:16px;line-height:1.55;max-width:800px;}
.demo-laptop-compare {max-width:1000px;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:20px;}
.advert-site {width:100%;aspect-ratio:465/351;background-image:url('../assets/demo-ad-clean.png');background-repeat:no-repeat;border-radius:6px;box-shadow:0 18px 40px #0006;}
.advert-site-before {background-size:249.42% auto;background-position:9.43% 50.14%;}
.advert-site-after {background-size:232.26% auto;background-position:90.73% 50.07%;}
.demo-benefits {margin-top:24px;gap:20px;}
.demo-benefit-icon {font-size:22px;}
.demo-offer-action {margin-top:24px;}
.demo-offer-action p {margin-top:12px;}
@media(max-width:768px) {
 .philosophy-section .scenario-intro {margin-top:90px;}
 .capabilities-section::before {background-size:auto 650px;opacity:.14;}
 .modern-eng-section::before {opacity:.1;}
 .demo-section {padding-block:48px;}
 .demo-laptop-compare {gap:14px;}
 .demo-offer-head h2 {font-size:clamp(34px,9vw,48px);}
 .demo-benefits {gap:12px;}
 .founder-video-dialog {padding:14px;}
}

.founder-video-player video {display:block;width:100%;height:100%;object-fit:contain;background:#000;}
.form-submit-status {color:#f4b39e;font-size:14px;line-height:1.5;padding:0 32px;}
.form-submit-status:empty {display:none;}
.demo-qualify-form .form-submit-status {padding:0;}
.option-card:focus-visible {outline:2px solid var(--dub-red);outline-offset:4px;}
.btn:disabled {opacity:.6;cursor:wait;}