:root {
  color-scheme: dark;
  --canvas: #020406;
  --canvas-soft: #071016;
  --ink: #f2f2f2;
  --ink-dim: #a4a9ad;
  --ink-faint: #3e4950;
  --rule: #182129;
  --signal-blue: #128fff;
  --signal-green: #9adf3c;
  --hex-stroke: #ffffff;
  --hex-stroke-opacity: 0.078;
  --hex-pulse-blue-opacity: 0.32;
  --hex-pulse-green-opacity: 0.24;
  --hex-filter: drop-shadow(0 0 22px rgba(18,143,255,0.085));
  --particle-ink: var(--ink);
  --particle-stream-opacity: 0.88;
  --nav-bg: rgba(2,4,6,0.82);
  --drawer-bg: rgba(3,7,10,0.94);
  --drawer-blur: blur(22px) saturate(1.14);
  --drawer-shadow: 0 26px 80px rgba(0,0,0,0.62), 0 0 44px rgba(18,143,255,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
  --canvas-field:
    linear-gradient(118deg, rgba(18,143,255,0.2) 0%, rgba(18,143,255,0.055) 24%, transparent 48%),
    linear-gradient(302deg, rgba(154,223,60,0.13) 0%, transparent 36%),
    var(--canvas);
  --engrave-overlay:
    linear-gradient(116deg, rgba(18,143,255,0.032), transparent 36%, rgba(154,223,60,0.026) 68%, transparent 100%),
    repeating-linear-gradient(116deg, transparent 0 38px, rgba(255,255,255,0.026) 38px 39px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 108px);
  --signal-beam-overlay:
    linear-gradient(72deg, transparent 0%, rgba(18,143,255,0.115) 38%, transparent 58%),
    linear-gradient(145deg, transparent 0%, rgba(154,223,60,0.075) 54%, transparent 73%);
  --surface-card: linear-gradient(180deg, rgba(255,255,255,0.072) 0%, rgba(255,255,255,0.016) 100%);
  --surface-card-blue: linear-gradient(180deg, rgba(18,143,255,0.145) 0%, rgba(255,255,255,0.018) 100%);
  --surface-card-green: linear-gradient(180deg, rgba(154,223,60,0.12) 0%, rgba(255,255,255,0.018) 100%);
  --surface-case: linear-gradient(180deg, rgba(255,255,255,0.058) 0%, rgba(255,255,255,0.012) 100%);
  --surface-case-hover: linear-gradient(180deg, rgba(18,143,255,0.15) 0%, rgba(255,255,255,0.02) 100%);
  --surface-quote: linear-gradient(135deg, rgba(18,143,255,0.15) 0%, rgba(154,223,60,0.078) 100%);
  --visual-panel-bg: linear-gradient(135deg, rgba(18,143,255,0.13) 0%, rgba(255,255,255,0.026) 42%, rgba(154,223,60,0.075) 100%);
  --visual-grid: rgba(255,255,255,0.08);
  --visual-line: rgba(18,143,255,0.72);
  --visual-line-green: rgba(154,223,60,0.66);
  --visual-sweep: rgba(255,255,255,0.12);
  --visual-node-bg: rgba(2,4,6,0.72);
  --visual-node-primary-bg: rgba(18,143,255,0.18);
  --visual-node-green-bg: rgba(154,223,60,0.14);
  --visual-node-line: rgba(255,255,255,0.18);
  --visual-text: rgba(242,242,242,0.84);
  --visual-shadow: 0 44px 130px rgba(0,0,0,0.52), 0 0 90px rgba(18,143,255,0.13), inset 0 1px 0 rgba(255,255,255,0.08);
  --hover-blue-border: rgba(18,143,255,0.72);
  --hover-green-border: rgba(154,223,60,0.64);
  --focus-ring: rgba(18,143,255,0.26);
  --surface-shadow: 0 26px 90px rgba(0,0,0,0.48), 0 0 34px rgba(18,143,255,0.045), inset 0 1px 0 rgba(255,255,255,0.06);
  --surface-shadow-hover: 0 38px 120px rgba(0,0,0,0.58), 0 0 60px rgba(18,143,255,0.16), 0 0 28px rgba(154,223,60,0.07), inset 0 1px 0 rgba(255,255,255,0.075);
  --quote-shadow: 0 40px 130px rgba(0,0,0,0.5), 0 0 96px rgba(18,143,255,0.13), 0 0 34px rgba(154,223,60,0.065);
  --nav-shadow: 0 20px 60px rgba(0,0,0,0.46), 0 0 34px rgba(18,143,255,0.055);
  --section-glow: linear-gradient(90deg, transparent 0%, rgba(18,143,255,0.25) 48%, rgba(154,223,60,0.12) 62%, transparent 100%);
  --signal-text-glow: 0 0 26px rgba(18,143,255,0.34);
  --button-shadow: 0 0 42px rgba(18,143,255,0.34);
  --brand-logo-filter: drop-shadow(0 0 18px rgba(18,143,255,0.18)) drop-shadow(0 0 6px rgba(154,223,60,0.08));
  --logo-watermark-opacity: 0.16;
  --logo-watermark-blend: screen;
  --logo-watermark-filter: saturate(1.28) drop-shadow(0 0 58px rgba(18,143,255,0.16)) drop-shadow(0 0 20px rgba(154,223,60,0.055));
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --max: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f3efe6;
  --canvas-soft: #ebe4d8;
  --ink: #121417;
  --ink-dim: #4f5358;
  --ink-faint: #8f887c;
  --rule: #d7cfc1;
  --signal-blue: #0560b8;
  --signal-green: #476f16;
  --hex-stroke: #121417;
  --hex-stroke-opacity: 0.035;
  --hex-pulse-blue-opacity: 0.1;
  --hex-pulse-green-opacity: 0.09;
  --hex-filter: none;
  --particle-ink: #1f2328;
  --particle-stream-opacity: 0.32;
  --nav-bg: rgba(243,239,230,0.74);
  --drawer-bg: rgba(243,239,230,0.93);
  --drawer-blur: blur(20px) saturate(1.04);
  --drawer-shadow: 0 22px 55px rgba(18,20,23,0.12), inset 0 1px 0 rgba(255,255,255,0.36);
  --canvas-field: var(--canvas);
  --engrave-overlay: none;
  --signal-beam-overlay: none;
  --surface-card: linear-gradient(180deg, rgba(18,20,23,0.045) 0%, rgba(18,20,23,0.012) 100%);
  --surface-card-blue: linear-gradient(180deg, rgba(5,96,184,0.075) 0%, rgba(18,20,23,0.012) 100%);
  --surface-card-green: linear-gradient(180deg, rgba(71,111,22,0.075) 0%, rgba(18,20,23,0.012) 100%);
  --surface-case: rgba(18,20,23,0.028);
  --surface-case-hover: rgba(5,96,184,0.06);
  --surface-quote: linear-gradient(135deg, rgba(5,96,184,0.08) 0%, rgba(71,111,22,0.055) 100%);
  --visual-panel-bg: linear-gradient(135deg, rgba(5,96,184,0.075) 0%, rgba(18,20,23,0.018) 46%, rgba(71,111,22,0.052) 100%);
  --visual-grid: rgba(18,20,23,0.075);
  --visual-line: rgba(5,96,184,0.5);
  --visual-line-green: rgba(71,111,22,0.46);
  --visual-sweep: rgba(18,20,23,0.1);
  --visual-node-bg: rgba(243,239,230,0.72);
  --visual-node-primary-bg: rgba(5,96,184,0.09);
  --visual-node-green-bg: rgba(71,111,22,0.085);
  --visual-node-line: rgba(18,20,23,0.16);
  --visual-text: rgba(18,20,23,0.74);
  --visual-shadow: none;
  --hover-blue-border: rgba(5,96,184,0.42);
  --hover-green-border: rgba(71,111,22,0.42);
  --focus-ring: rgba(5,96,184,0.2);
  --surface-shadow: none;
  --surface-shadow-hover: none;
  --quote-shadow: none;
  --nav-shadow: none;
  --section-glow: transparent;
  --signal-text-glow: none;
  --button-shadow: none;
  --brand-logo-filter: drop-shadow(0 8px 18px rgba(18,20,23,0.18)) drop-shadow(0 0 1px rgba(18,20,23,0.38));
  --logo-watermark-opacity: 0.11;
  --logo-watermark-blend: multiply;
  --logo-watermark-filter: drop-shadow(0 12px 28px rgba(18,20,23,0.13)) drop-shadow(0 0 1px rgba(18,20,23,0.28));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas-field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--signal-blue); color: var(--canvas); }
a { color: inherit; }
.wrap { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
main, footer { position: relative; z-index: 2; }
.canvas-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.canvas-bg::before { content: ''; position: absolute; inset: 0; background: var(--engrave-overlay); opacity: 0.85; mix-blend-mode: screen; }
.canvas-bg::after { content: ''; position: absolute; inset: -12%; background: var(--signal-beam-overlay); opacity: 0.75; mix-blend-mode: screen; transform: rotate(-2deg); }
.canvas-bg svg { width: 100%; height: 100%; display: block; filter: var(--hex-filter); }
.hex-cell { fill: none; stroke: var(--hex-stroke); stroke-width: 0.6; opacity: var(--hex-stroke-opacity); }
.hex-pulse-blue { fill: var(--signal-blue); opacity: 0; }
.hex-pulse-green { fill: var(--signal-green); opacity: 0; }
.hex-layer { animation: drift 60s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,-20px); } }
@keyframes pulse-b { 0%,92%,100% { opacity: 0; } 45%,55% { opacity: var(--hex-pulse-blue-opacity); } }
@keyframes pulse-g { 0%,92%,100% { opacity: 0; } 45%,55% { opacity: var(--hex-pulse-green-opacity); } }
.particle { position: absolute; background: var(--signal-blue); height: 3px; width: 14px; opacity: 0; transform: rotate(-25deg); border-radius: 1px; animation: stream 9s linear infinite; }
.particle.green { background: var(--signal-green); }
.particle.white { background: var(--particle-ink); }
@keyframes stream { 0% { transform: translate(-20vw,30vh) rotate(-25deg); opacity: 0; } 10%,90% { opacity: var(--particle-stream-opacity); } 100% { transform: translate(120vw,-50vh) rotate(-25deg); opacity: 0; } }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px 0; backdrop-filter: blur(0); background: transparent; border-bottom: 1px solid transparent; box-shadow: none; transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, backdrop-filter 0.28s ease; }
.nav.is-scrolled { backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom-color: var(--rule); box-shadow: var(--nav-shadow); }
.nav.menu-open { backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom-color: var(--rule); box-shadow: var(--nav-shadow); }
.nav .container { width: min(1360px, calc(100% - 48px)); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 4vw, 64px); transition: gap 0.32s ease; }
.nav.is-scrolled .nav-inner { gap: clamp(14px, 2.2vw, 34px); }
.brand { position: relative; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; transition: gap 0.38s cubic-bezier(0.2,0.8,0.2,1); }
.brand::after { content: ''; position: absolute; left: 28px; top: 50%; width: 78px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--signal-blue) 44%, var(--signal-green) 100%); opacity: 0; pointer-events: none; transform: translate(34px,-50%) scaleX(0); transform-origin: right center; filter: drop-shadow(0 0 10px rgba(18,143,255,0.46)); }
.nav.is-scrolled .brand { gap: 0; }
.nav.is-scrolled .brand::after { animation: brand-name-absorb 0.64s cubic-bezier(0.2,0.8,0.2,1); }
.brand-mark { height: 36px; width: auto; display: block; filter: var(--brand-logo-filter); transform-origin: center; transition: filter 0.34s ease, transform 0.34s ease; }
.nav.is-scrolled .brand-mark { animation: brand-mark-catch 0.64s cubic-bezier(0.2,0.8,0.2,1); }
.brand-name { display: inline-block; max-width: 90px; overflow: hidden; white-space: nowrap; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; filter: blur(0); transform-origin: left center; will-change: max-width, opacity, transform, filter, letter-spacing; transition: opacity 0.28s ease, filter 0.42s ease, letter-spacing 0.42s ease, transform 0.46s cubic-bezier(0.16,1,0.3,1), max-width 0.48s cubic-bezier(0.16,1,0.3,1); }
.nav.is-scrolled .brand-name { max-width: 0; opacity: 0; filter: blur(4px); letter-spacing: 0.12em; transform: translateX(-22px) scaleX(0.32) scaleY(0.9); }
.nav-links { display: flex; flex: 1; justify-content: space-between; gap: clamp(18px, 2.6vw, 46px); align-items: center; min-width: 0; transition: gap 0.32s ease; }
.nav.is-scrolled .nav-links { justify-content: flex-start; gap: clamp(18px, 2vw, 34px); }
.nav-links a { color: var(--ink); text-decoration: none; font-size: clamp(15px, 1vw, 17px); font-weight: 600; line-height: 1; letter-spacing: 0.095em; text-transform: uppercase; opacity: 0.78; white-space: nowrap; transition: opacity 0.25s, color 0.25s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; color: var(--signal-blue); }
.nav-cta, .theme-toggle, .btn { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.nav-links .nav-cta { font-size: 13px; letter-spacing: 0.08em; padding: 11px 18px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.nav-links .nav-cta:hover { background: var(--ink); color: var(--canvas); }
.menu-toggle { display: none; }
.theme-toggle { font-size: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--rule); background: transparent; color: var(--signal-blue); cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s, margin-left 0.32s ease; }
.nav.is-scrolled .theme-toggle { margin-left: auto; }
.theme-toggle:hover { border-color: var(--signal-blue); background: var(--surface-case-hover); }
.theme-toggle:focus-visible, .menu-toggle:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.theme-toggle-icon { width: 15px; height: 15px; display: block; }
.theme-toggle-hex-fill { fill: currentColor; opacity: 1; transition: opacity 0.25s; }
.theme-toggle-hex-line { fill: none; stroke: currentColor; stroke-width: 1.8; opacity: 0.45; transition: opacity 0.25s; }
html[data-theme="light"] .theme-toggle-hex-fill { opacity: 0; }
html[data-theme="light"] .theme-toggle-hex-line { opacity: 1; }
@keyframes menu-sweep { 0% { transform: translateX(-140%); opacity: 0; } 35% { opacity: 0.38; } 100% { transform: translateX(140%); opacity: 0; } }
@keyframes menu-ring { 0% { opacity: 0.7; transform: translate(-50%,-50%) scale(0.4); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(3.8); } }
@keyframes brand-name-absorb { 0% { opacity: 0; transform: translate(42px,-50%) scaleX(0); } 18% { opacity: 0.9; transform: translate(22px,-50%) scaleX(1); } 56% { opacity: 0.78; transform: translate(-2px,-50%) scaleX(0.44); } 100% { opacity: 0; transform: translate(-16px,-50%) scaleX(0); } }
@keyframes brand-mark-catch { 0%,100% { transform: scale(1); } 38% { transform: scale(1.08); filter: var(--brand-logo-filter) drop-shadow(0 0 18px rgba(18,143,255,0.38)) drop-shadow(0 0 8px rgba(154,223,60,0.22)); } 62% { transform: scale(1.02); } }
@keyframes hero-kicker-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-title-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
section { position: relative; padding: clamp(80px, 12vh, 150px) 0; border-top: 1px solid var(--rule); }
section::after { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--section-glow); pointer-events: none; }
section:first-child { border-top: none; }
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 120px; overflow: hidden; }
.hero .wrap, .page-hero .wrap { position: relative; z-index: 1; }
.hero-watermark { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: clamp(500px, 65vw, 1000px); opacity: var(--logo-watermark-opacity); pointer-events: none; z-index: 0; mix-blend-mode: var(--logo-watermark-blend); filter: var(--logo-watermark-filter); animation: float 18s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translate(0,-50%) rotate(0deg); } 50% { transform: translate(-12px,-52%) rotate(-1.5deg); } }
.eyebrow { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--signal-blue); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 32px; text-shadow: var(--signal-text-glow); }
.eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; }
.eyebrow.green, .problem-resolution.green { color: var(--signal-green); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; margin: 0; }
p { margin: 0; }
.hero-title, .page-hero h1 { font-size: clamp(46px, 7.4vw, 114px); max-width: 13ch; }
.hero .eyebrow, .page-hero .eyebrow { opacity: 0; animation: hero-kicker-in 0.42s ease-out 0.08s both; }
.hero-title, .page-hero h1 { opacity: 0; transform-origin: left center; animation: hero-title-in 0.58s cubic-bezier(0.2,0.8,0.2,1) 0.16s both; }
.hero-title em { color: var(--signal-blue); font-style: italic; font-weight: 300; }
.hero-sub, .page-hero p, .hero-ctas, .trust-strip, .case-hero-stat { opacity: 0; animation: hero-copy-in 0.5s ease-out both; }
.hero-sub, .page-hero p { animation-delay: 0.28s; }
.hero-ctas, .case-hero-stat { animation-delay: 0.38s; }
.trust-strip { animation-delay: 0.48s; }
.hero-sub, .page-hero p { max-width: 58ch; margin: 42px 0 48px; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-dim); }
.page-hero { padding-top: clamp(150px, 24vh, 240px); padding-bottom: clamp(80px, 12vh, 140px); overflow: hidden; }
.page-hero h1 { max-width: 14ch; }
.btn { font-size: 13px; padding: 18px 28px; text-decoration: none; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; transition: transform 0.3s, background 0.3s, color 0.3s, border-color 0.3s; }
.btn:hover { transform: translate(-2px,-2px); }
.btn-primary { background: var(--signal-blue); color: var(--canvas); box-shadow: var(--button-shadow); }
.btn-primary:hover { background: var(--ink); color: var(--canvas); }
.btn-ghost { color: var(--ink); border-color: var(--ink-faint); }
.btn-ghost:hover { border-color: var(--signal-green); color: var(--signal-green); }
.hero-ctas, .final-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.trust-strip { margin-top: 110px; padding-top: 32px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.trust-label, .article-meta, .case-sector, .case-meta, .svc-num, .svc-tag, .step-card span, .industry-card span, .principle span, .foot-col h4, .foot-bottom, .quote-role, .quote-counter { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; }
.trust-label, .article-meta, .case-sector, .case-meta, .svc-num, .quote-role, .quote-counter, .foot-col h4, .foot-bottom { color: var(--ink-dim); font-size: 11px; }
.trust-logos { display: flex; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; align-items: center; font-family: var(--font-display); font-size: 18px; color: var(--ink-dim); }
.problems { padding: clamp(80px, 12vh, 150px) 0; }
.problem-block { max-width: 1100px; padding: clamp(52px, 8vh, 100px) 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 80px 1fr; gap: clamp(20px, 4vw, 80px); }
.problem-block:last-child { border-bottom: none; }
.problem-num { font-family: var(--font-mono); color: var(--ink-faint); padding-top: 16px; }
.problem-quote { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 64px); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; font-style: italic; }
.problem-resolution { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--signal-blue); }
.bar { width: 32px; height: 1px; background: currentColor; }
.section-head, .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 72px; align-items: start; }
.section-title { font-size: clamp(36px, 5.5vw, 76px); max-width: 14ch; }
.section-lede { color: var(--ink-dim); font-size: 16px; line-height: 1.6; max-width: 48ch; }
.visual-section { padding: clamp(64px, 9vh, 120px) 0; }
.page-hero + .visual-section { padding-top: 0; }
.visual-panel { --visual-accent: var(--signal-blue); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1.38fr); gap: clamp(26px,4vw,64px); align-items: center; min-height: 370px; margin: 0; border: 1px solid var(--rule); background: var(--visual-panel-bg); box-shadow: var(--visual-shadow); clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 42px 100%, 0 calc(100% - 42px)); padding: clamp(28px,4vw,54px); }
.visual-panel.green { --visual-accent: var(--signal-green); }
.visual-panel.compact { min-height: 300px; margin: 10px 0 48px; grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr); }
.visual-panel::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 53px, var(--visual-grid) 53px 54px), repeating-linear-gradient(0deg, transparent 0 53px, var(--visual-grid) 53px 54px); opacity: 0.65; pointer-events: none; }
.visual-panel::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--visual-accent) 48%, transparent 100%); opacity: 0.65; pointer-events: none; }
.visual-copy { position: relative; z-index: 1; display: grid; gap: 14px; align-content: center; }
.visual-copy .visual-label { font-family: var(--font-mono); color: var(--visual-accent); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.visual-copy strong { font-family: var(--font-display); font-size: clamp(28px,3vw,46px); font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; color: var(--ink); }
.visual-copy figcaption { color: var(--ink-dim); font-size: 15px; line-height: 1.6; max-width: 42ch; }
.visual-diagram { position: relative; z-index: 1; width: 100%; min-height: 270px; display: block; overflow: visible; }
.visual-frame { fill: none; stroke: var(--visual-grid); stroke-width: 1; }
.visual-sweep { fill: none; stroke: var(--visual-sweep); stroke-width: 1.2; stroke-dasharray: 7 10; vector-effect: non-scaling-stroke; }
.visual-line { fill: none; stroke: var(--visual-line); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(18,143,255,0.22)); }
.visual-line.green { stroke: var(--visual-line-green); filter: drop-shadow(0 0 5px rgba(154,223,60,0.18)); }
.visual-panel .visual-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.visual-panel.in .visual-line { animation: visual-draw 1.35s cubic-bezier(0.2,0.8,0.2,1) forwards; }
.visual-panel.in .visual-line:nth-of-type(2n) { animation-delay: 0.18s; }
.visual-panel.in .visual-line:nth-of-type(3n) { animation-delay: 0.34s; }
.visual-node rect { fill: var(--visual-node-bg); stroke: var(--visual-node-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.visual-node.primary rect { fill: var(--visual-node-primary-bg); stroke: var(--visual-line); }
.visual-node.green rect { fill: var(--visual-node-green-bg); stroke: var(--visual-line-green); }
.visual-panel.in .visual-node rect { animation: visual-node-live 4.8s ease-in-out infinite; }
.visual-panel.in .visual-node:nth-of-type(2n) rect { animation-delay: 0.7s; }
.visual-panel.in .visual-node:nth-of-type(3n) rect { animation-delay: 1.2s; }
.visual-panel.in .visual-system-map .visual-node rect { animation: none; }
.visual-panel.in .visual-system-map .visual-node.core-tab rect { animation: visual-core-breathe 5.6s ease-in-out infinite; }
.visual-node-glow { fill: none; stroke: var(--visual-line); stroke-width: 2.6; opacity: 0; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 12px rgba(18,143,255,0.58)); }
.visual-node-glow.green { stroke: var(--visual-line-green); filter: drop-shadow(0 0 12px rgba(154,223,60,0.48)); }
.visual-panel.in .visual-system-map .visual-node-glow.send { animation: visual-node-send 6.5s ease-in-out var(--pulse-delay) infinite; }
.visual-panel.in .visual-system-map .visual-node-glow.receive { animation: visual-node-receive 6.5s ease-in-out var(--pulse-delay) infinite; }
.visual-diagram .visual-label, .mini-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; fill: var(--visual-text); }
.mini-node-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; fill: var(--visual-text); }
.visual-number { font-family: var(--font-display); font-size: 56px; font-weight: 300; letter-spacing: -0.04em; fill: var(--signal-blue); }
.visual-number.green { fill: var(--signal-green); }
.visual-dot { fill: var(--signal-blue); filter: drop-shadow(0 0 8px rgba(18,143,255,0.36)); }
.visual-dot.green { fill: var(--signal-green); filter: drop-shadow(0 0 8px rgba(154,223,60,0.28)); }
.visual-dot.primary { r: 7; }
.visual-packet { fill: var(--signal-blue); filter: drop-shadow(0 0 10px rgba(18,143,255,0.52)); opacity: 0.72; }
.visual-packet.green { fill: var(--signal-green); filter: drop-shadow(0 0 10px rgba(154,223,60,0.42)); opacity: 0.68; }
.visual-system-map .visual-packet { animation: visual-packet-pulse 1.8s ease-in-out infinite; }
.visual-mini { --visual-accent: var(--signal-blue); position: relative; z-index: 1; height: 112px; margin: 0 0 26px; border: 1px solid var(--rule); background: linear-gradient(135deg, rgba(18,143,255,0.08), rgba(255,255,255,0.014)); overflow: hidden; }
.visual-mini.green { --visual-accent: var(--signal-green); background: linear-gradient(135deg, rgba(154,223,60,0.075), rgba(255,255,255,0.014)); }
.visual-mini svg { display: block; width: 100%; height: 100%; }
.visual-mini .mini-route { stroke: var(--visual-accent); stroke-width: 1.1; stroke-dasharray: 0.18 0.16; stroke-dashoffset: 0; opacity: 0.62; animation: mini-route-flow 11s linear infinite; filter: drop-shadow(0 0 4px rgba(18,143,255,0.16)); }
.visual-mini .visual-packet { opacity: 0.52; filter: drop-shadow(0 0 7px rgba(18,143,255,0.34)); }
.visual-mini.green .visual-packet { filter: drop-shadow(0 0 7px rgba(154,223,60,0.28)); }
.mini-drop { fill: none; stroke: var(--visual-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mini-node { fill: var(--visual-node-bg); stroke: var(--visual-node-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mini-node.green { fill: var(--visual-node-green-bg); stroke: var(--visual-line-green); }
.mini-symbol { color: var(--visual-text); opacity: 0.82; }
.mini-symbol.green { color: var(--visual-accent); opacity: 0.9; }
.mini-symbol-stroke { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mini-symbol-fill { fill: currentColor; }
.mini-label { font-size: 9px; fill: var(--ink-dim); }
.mini-label.metric { fill: var(--visual-accent, var(--signal-blue)); }
@keyframes visual-draw { to { stroke-dashoffset: 0; } }
@keyframes visual-node-live { 0%,100% { stroke-opacity: 0.55; } 45%,58% { stroke-opacity: 1; } }
@keyframes visual-core-breathe { 0%,100% { stroke-opacity: 0.72; filter: drop-shadow(0 0 3px rgba(18,143,255,0.12)); } 48%,58% { stroke-opacity: 1; filter: drop-shadow(0 0 13px rgba(18,143,255,0.34)); } }
@keyframes visual-node-send { 0% { opacity: 0; stroke-width: 2.2; } 1%,5% { opacity: 1; stroke-width: 4.8; } 8%,100% { opacity: 0; stroke-width: 2.2; } }
@keyframes visual-node-receive { 0%,92% { opacity: 0; stroke-width: 2.2; } 95%,98% { opacity: 1; stroke-width: 4.8; } 100% { opacity: 0; stroke-width: 2.2; } }
@keyframes visual-packet-pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes mini-route-flow { to { stroke-dashoffset: -0.68; } }
.services-grid, .case-grid, .step-grid, .industry-grid, .article-grid, .metric-grid { display: grid; gap: 24px; }
.services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.case-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.step-grid, .industry-grid, .article-grid, .metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.svc-card, .case-card, .step-card, .industry-card, .article-card, .principle, .contact-form, .contact-panel, .note-block { position: relative; border: 1px solid var(--rule); background: var(--surface-card); text-decoration: none; color: inherit; box-shadow: var(--surface-shadow); transition: transform 0.35s, border-color 0.35s, background 0.35s, box-shadow 0.35s; }
.svc-card { padding: 48px 40px 40px; min-height: 430px; display: flex; flex-direction: column; clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.svc-card::before { content: ''; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; background: var(--signal-blue); transition: transform 0.35s; }
.svc-card.green-card::before { background: var(--signal-green); }
.svc-card:hover { transform: translateY(-4px); background: var(--surface-card-blue); border-color: var(--hover-blue-border); box-shadow: var(--surface-shadow-hover); }
.svc-card.green-card:hover { background: var(--surface-card-green); border-color: var(--hover-green-border); box-shadow: var(--surface-shadow-hover); }
.svc-card:hover::before { transform: scale(1.8); }
.svc-num { margin-bottom: 18px; }
.svc-title { font-size: clamp(26px, 3vw, 36px); margin-bottom: 20px; }
.svc-desc, .case-summary, .step-card p, .industry-card p, .article-card p, .principle p, .note-block p, .final-copy, .contact-panel p, .contact-rules { color: var(--ink-dim); font-size: 15.5px; line-height: 1.6; }
.svc-desc { flex: 1; margin-bottom: 28px; }
.svc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.svc-tag { font-size: 10.5px; padding: 6px 10px; border: 1px solid var(--ink-faint); color: var(--ink-dim); }
.svc-link, .read, .article-card span { font-family: var(--font-mono); color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
.case-card { padding: 32px 32px 36px; min-height: 500px; display: flex; flex-direction: column; background: var(--surface-case); clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.case-card:hover { transform: translateY(-4px); background: var(--surface-case-hover); border-color: var(--hover-blue-border); box-shadow: var(--surface-shadow-hover); }
.case-punch { width: 12px; height: 12px; border: 1px solid var(--ink-faint); border-radius: 50%; margin-bottom: 32px; }
.case-punch.blue { border-color: var(--signal-blue); background: var(--signal-blue); }
.case-punch.green { border-color: var(--signal-green); background: var(--signal-green); }
.case-punch.ink { border-color: var(--ink); background: var(--ink); }
.case-stat { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 80px); font-weight: 300; line-height: 1; letter-spacing: -0.04em; margin: 18px 0; background: linear-gradient(135deg, var(--ink) 0%, var(--signal-blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case-headline { font-size: 22px; line-height: 1.2; margin-bottom: 16px; }
.case-summary { flex: 1; margin-bottom: 32px; }
.case-meta { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding-top: 20px; border-top: 1px solid var(--rule); }
.quote-card { position: relative; max-width: 1100px; padding: clamp(40px,6vw,80px) clamp(32px,5vw,90px); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); clip-path: polygon(40px 0,100% 0,100% 100%,40px 100%,0 calc(50% + 30px),0 calc(50% - 30px),40px 50%); background: var(--surface-quote); box-shadow: var(--quote-shadow); }
.quote-mark { font-family: var(--font-display); font-size: 120px; line-height: 0.5; color: var(--signal-blue); display: block; font-style: italic; }
.quote-body { font-family: var(--font-display); font-size: clamp(22px,2.6vw,36px); font-weight: 300; line-height: 1.3; letter-spacing: -0.02em; max-width: 34ch; }
.quote-attrib { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
.quote-author { font-family: var(--font-display); font-size: 17px; }
.final { text-align: center; padding: clamp(120px,18vh,220px) 0; }
.final::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 80px; background: linear-gradient(180deg, var(--signal-blue) 0%, transparent 100%); }
.final-title { font-size: clamp(42px,7vw,104px); max-width: 17ch; margin: 0 auto 28px; }
.final-copy { max-width: 48ch; margin: 0 auto 48px; }
.final-ctas { justify-content: center; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter-button { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim); background: transparent; border: 1px solid var(--rule); padding: 10px 14px; cursor: pointer; }
.filter-button.active, .filter-button:hover { color: var(--signal-blue); border-color: var(--signal-blue); }
.is-hidden { display: none !important; }
.step-card, .industry-card, .article-card, .principle, .note-block { padding: 32px; min-height: 260px; }
.step-card span, .industry-card span, .principle span { color: var(--signal-blue); font-size: 12px; }
.step-card h3, .industry-card h3, .principle h3, .article-card h2, .note-block h2 { font-size: clamp(24px,2.5vw,34px); margin: 20px 0 16px; }
.industry-card:nth-child(even) span, .principle:nth-child(even) span { color: var(--signal-green); }
.metrics-band { background: var(--surface-case); }
.metric-grid div { border-left: 1px solid var(--rule); padding-left: 28px; min-height: 150px; }
.metric-grid span { font-family: var(--font-display); font-size: clamp(42px,6vw,82px); color: var(--signal-blue); line-height: 1; }
.metric-grid p { color: var(--ink-dim); margin-top: 16px; max-width: 28ch; }
.article-card { display: block; min-height: 320px; }
.article-card:hover { transform: translateY(-4px); border-color: var(--signal-blue); background: var(--surface-case-hover); box-shadow: var(--surface-shadow-hover); }
.article-notes { padding-top: 40px; }
.note-block { margin-bottom: 24px; min-height: 0; scroll-margin-top: 120px; }
.inline-form { display: grid; grid-template-columns: 1fr minmax(220px, 320px) auto; gap: 20px; align-items: end; padding: 34px; border: 1px solid var(--rule); background: var(--surface-card); }
.inline-form h2 { font-size: clamp(26px,3vw,42px); margin-bottom: 10px; }
label { display: grid; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.12em; }
input, textarea, select { width: 100%; border: 1px solid var(--rule); background: var(--canvas-soft); color: var(--ink); font: 16px var(--font-body); padding: 14px 14px; border-radius: 0; }
textarea { resize: vertical; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr); gap: 28px; align-items: start; }
.contact-form, .contact-panel { padding: clamp(28px,4vw,48px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form { display: grid; gap: 18px; }
.contact-panel h2 { font-size: clamp(28px,4vw,48px); margin-bottom: 18px; }
.contact-panel a { color: var(--signal-blue); font-family: var(--font-mono); display: block; margin: 12px 0; }
.contact-panel address, .foot-address { color: var(--ink-dim); font-style: normal; line-height: 1.5; }
.contact-panel address { margin: 24px 0 34px; }
.foot-address { font-size: 14.5px; margin: 10px 0 12px; }
.contact-rules { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--rule); }
.botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-status { color: var(--signal-green); font-family: var(--font-mono); font-size: 12px; min-height: 20px; text-transform: uppercase; letter-spacing: 0.08em; }
.form-status.error { color: #ff6b5f; }
.form-status.success { color: var(--signal-green); }
form.is-sending button[type="submit"] { opacity: 0.72; pointer-events: none; }
.case-hero-stat { display: inline-grid; gap: 6px; margin-top: 12px; font-family: var(--font-display); font-size: clamp(52px,7vw,110px); color: var(--signal-blue); }
.case-hero-stat span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.14em; }
.case-detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.case-detail-body h2 { font-size: clamp(30px,4vw,54px); margin: 0 0 18px; }
.case-detail-body p { color: var(--ink-dim); margin-bottom: 44px; max-width: 72ch; }
.case-aside { border: 1px solid var(--rule); background: var(--surface-card); box-shadow: var(--surface-shadow); padding: 30px; display: grid; gap: 20px; position: sticky; top: 110px; }
.case-aside h3 { font-size: 26px; }
.case-aside div { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.case-aside span { font-family: var(--font-mono); color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
footer { border-top: 1px solid var(--rule); padding: 80px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 60px; border-bottom: 1px solid var(--rule); }
.foot-col h4 { margin: 0 0 14px; }
.foot-col a { display: block; color: var(--ink); text-decoration: none; font-size: 14.5px; padding: 6px 0; opacity: 0.82; transition: opacity 0.25s, transform 0.25s, color 0.25s; }
.foot-col a:hover { opacity: 1; transform: translateX(4px); color: var(--signal-blue); }
.foot-intro { font-family: var(--font-display); font-size: 20px; line-height: 1.4; max-width: 32ch; color: var(--ink); }
.foot-intro span { color: var(--ink-dim); }
.foot-bottom { margin-top: 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-faint); }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s cubic-bezier(0.2,0.8,0.2,1), transform 0.8s cubic-bezier(0.2,0.8,0.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (max-width: 1060px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13px; letter-spacing: 0.06em; }
  .nav-links .nav-cta { font-size: 11px; padding: 10px 13px; }
  .case-grid, .step-grid, .industry-grid, .article-grid, .metric-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout, .case-detail { grid-template-columns: 1fr; }
  .case-aside { position: static; }
}
@media (max-width: 880px) {
  .nav { padding: 16px 0; }
  .nav-inner { position: relative; gap: 14px; }
  .brand { flex: 1; gap: 7px; }
  .menu-toggle { position: relative; display: inline-grid; place-items: center; width: 46px; height: 42px; margin-left: auto; border: 1px solid var(--rule); background: var(--surface-card); color: var(--ink); cursor: pointer; overflow: hidden; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s; }
  .menu-toggle:hover, .nav.menu-open .menu-toggle { color: var(--signal-blue); border-color: var(--signal-blue); background: var(--surface-case-hover); }
  .menu-toggle:active { transform: scale(0.96); }
  .menu-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 0 24%, color-mix(in srgb, var(--signal-blue) 42%, transparent) 50%, transparent 76% 100%); opacity: 0; transform: translateX(-140%); }
  .menu-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border: 1px solid currentColor; opacity: 0; transform: translate(-50%,-50%) scale(0.4); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
  .menu-toggle.is-animating::before { animation: menu-sweep 0.52s ease-out; }
  .menu-toggle.is-animating::after { animation: menu-ring 0.52s ease-out; }
  .menu-toggle-box { position: relative; z-index: 1; width: 24px; height: 16px; }
  .menu-toggle-line { position: absolute; left: 1px; width: 22px; height: 2px; border-radius: 999px; background: currentColor; box-shadow: 0 0 12px color-mix(in srgb, currentColor 42%, transparent); transform-origin: center; transition: transform 0.34s cubic-bezier(0.2,0.85,0.22,1.12), opacity 0.25s, width 0.25s; }
  .menu-toggle-line.top { top: 3px; }
  .menu-toggle-line.bottom { top: 11px; }
  .nav.menu-open .menu-toggle-line.top { transform: translateY(4px) rotate(45deg); }
  .nav.menu-open .menu-toggle-line.bottom { transform: translateY(-4px) rotate(-45deg); }
  .nav-links { position: absolute; left: 0; right: 0; top: calc(100% + 12px); display: grid; grid-template-columns: 1fr; align-items: stretch; justify-content: start; gap: 0; min-width: 0; max-height: 0; padding: 0 14px; border: 1px solid transparent; background: var(--drawer-bg); backdrop-filter: var(--drawer-blur); -webkit-backdrop-filter: var(--drawer-blur); box-shadow: var(--drawer-shadow); opacity: 0; overflow: hidden; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(0.98); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition: max-height 0.42s cubic-bezier(0.2,0.8,0.2,1), padding 0.34s ease, opacity 0.25s ease, transform 0.34s ease, border-color 0.25s ease, visibility 0s linear 0.34s; }
  .nav.is-scrolled .nav-links { justify-content: start; gap: 0; }
  .nav.menu-open .nav-links { max-height: calc(100vh - 104px); padding: 12px; border-color: var(--rule); opacity: 1; visibility: visible; pointer-events: auto; overflow-y: auto; transform: translateY(0) scale(1); transition: max-height 0.42s cubic-bezier(0.2,0.8,0.2,1), padding 0.34s ease, opacity 0.25s ease, transform 0.34s ease, border-color 0.25s ease, visibility 0s; }
  .nav-links a { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 12px; border-bottom: 1px solid var(--rule); font-size: 13px; letter-spacing: 0.12em; }
  .nav-links a:not(.nav-cta)::after { content: ''; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; opacity: 0.4; transform: rotate(45deg); transition: opacity 0.25s, transform 0.25s; }
  .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { opacity: 1; transform: rotate(45deg) translate(2px,-2px); }
  .nav-links .nav-cta { justify-content: center; min-height: 44px; margin-top: 10px; padding: 0 14px; font-size: 12px; }
  .theme-toggle { justify-content: center; width: 100%; margin-top: 10px; }
  .nav.is-scrolled .theme-toggle { margin-left: 0; }
  .services-grid, .section-head, .split, .case-grid, .step-grid, .industry-grid, .article-grid, .metric-grid, .foot-grid, .inline-form { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; }
  .foot-intro, .foot-contact { grid-column: 1 / -1; }
  .foot-company, .foot-thinking { align-self: start; }
  .visual-panel, .visual-panel.compact { grid-template-columns: 1fr; min-height: 0; }
  .visual-diagram { min-height: 220px; }
  .visual-panel.compact { margin-bottom: 36px; }
  .visual-mini { height: 104px; }
  .problems { display: none; }
  .problem-block { grid-template-columns: 1fr; }
  .quote-card { max-width: none; padding: 34px 26px; border: 1px solid var(--rule); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
  .quote-mark { font-size: 82px; }
  .quote-body { font-size: clamp(22px, 7vw, 30px); max-width: none; }
  .quote-attrib { flex-direction: column; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand-name { display: inline-block; max-width: 82px; font-size: 18px; }
  .theme-toggle { padding: 10px; }
  .nav-links .nav-cta { padding: 10px 12px; }
  .hero, .page-hero { padding-top: 135px; }
  .hero-title, .page-hero h1 { font-size: clamp(42px, 16vw, 68px); }
  .form-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .hex-layer { animation: none; }
  .particle { display: none; }
  .visual-packet { display: none; }
  .visual-node-glow { display: none; }
  .visual-panel .visual-line { stroke-dashoffset: 0; }
  .hero .eyebrow, .page-hero .eyebrow, .hero-title, .page-hero h1, .hero-sub, .page-hero p, .hero-ctas, .trust-strip, .case-hero-stat { opacity: 1; transform: none; }
}