:root {
  color-scheme: light;
  --depb-ink: oklch(0.205 0.035 252);
  --depb-ink-2: oklch(0.305 0.05 252);
  --depb-muted: oklch(0.43 0.045 250);
  --depb-navy: oklch(0.275 0.075 252);
  --depb-navy-deep: oklch(0.145 0.055 252);
  --depb-navy-2: oklch(0.335 0.09 252);
  --depb-blue: oklch(0.54 0.185 254);
  --depb-blue-hot: oklch(0.62 0.205 250);
  --depb-cyan: oklch(0.76 0.115 220);
  --depb-ice: oklch(0.965 0.018 240);
  --depb-paper: oklch(0.985 0.006 245);
  --depb-surface: oklch(0.995 0.004 245);
  --depb-line: oklch(0.84 0.026 245);
  --depb-alert: oklch(0.62 0.19 28);
  --depb-success: oklch(0.65 0.15 150);
  --shadow-blue: 0 20px 54px oklch(0.275 0.075 252 / .14);
  --shadow-deep: 0 34px 100px oklch(0.145 0.055 252 / .34);
  --shadow-card: 0 14px 42px oklch(0.275 0.075 252 / .10), 0 1px 0 oklch(0.995 0.004 245 / .92) inset;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 30px;
  --r-xl: 42px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Aptos", "Manrope", "Segoe UI", system-ui, sans-serif;
  color: var(--depb-ink);
  background:
    radial-gradient(circle at 82% -6%, oklch(0.76 0.115 220 / .46), transparent 25rem),
    radial-gradient(circle at 2% 32rem, oklch(0.54 0.185 254 / .15), transparent 27rem),
    linear-gradient(180deg, var(--depb-paper) 0, var(--depb-ice) 42rem, oklch(0.99 0.006 245) 100%);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, oklch(0.54 0.185 254 / .05) 1px, transparent 1px),
    linear-gradient(180deg, oklch(0.54 0.185 254 / .04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, oklch(0.205 0.035 252) 0%, transparent 78%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .12;
  background-image: radial-gradient(oklch(0.205 0.035 252 / .55) .65px, transparent .75px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--depb-cyan); outline-offset: 4px; }
img, svg { max-width: 100%; display: block; }
.wrap { width: min(var(--max), calc(100% - 32px)); margin-inline: auto; }
.phone { font-variant-numeric: tabular-nums; white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 99; background: var(--depb-ink); color: var(--depb-paper); padding: 10px 14px; border-radius: var(--r-pill); }
.skip-link:focus { top: 14px; }

.site-header { position: sticky; top: 0; z-index: 40; background: oklch(0.985 0.006 245 / .94); border-bottom: 1px solid oklch(0.84 0.026 245 / .88); backdrop-filter: blur(16px); }
.nav-shell { width: min(1260px, calc(100% - 28px)); height: 66px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 11px; font-weight: 950; letter-spacing: -.006em; }
.brand-mark { position: relative; width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; padding: 3px; background: oklch(0.995 0.004 245); border: 1px solid oklch(0.54 0.185 254 / .18); box-shadow: 0 18px 38px oklch(0.54 0.185 254 / .20); overflow: hidden; isolation: isolate; flex: 0 0 auto; }
.brand-mark::before { content: none; }
.brand-mark::after { content: ""; position: absolute; inset: 1px; border: 1px solid oklch(0.995 0.004 245 / .72); border-radius: 14px; pointer-events: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.brand-copy small { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--depb-muted); line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--depb-muted); font-weight: 800; }
.nav-links a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 6px; transition: color .18s var(--ease-out); }
.nav-links a:hover { color: var(--depb-blue); }
.nav-call, .call-button, .sticky-call, .inline-call { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-pill); background: var(--depb-blue); color: oklch(0.995 0.004 245); font-weight: 950; box-shadow: 0 18px 42px oklch(0.54 0.185 254 / .30); transition: transform .18s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.nav-call { padding: 10px 17px; }
.call-button { min-height: 60px; padding-inline: 23px; letter-spacing: .004em; }
.nav-call:hover, .call-button:hover, .sticky-call:hover, .inline-call:hover { background: var(--depb-blue-hot); transform: translateY(-1px); box-shadow: 0 24px 58px oklch(0.54 0.185 254 / .36); }
.nav-call:active, .call-button:active, .sticky-call:active, .inline-call:active { transform: scale(.985); }
.status-strip { background: linear-gradient(90deg, var(--depb-navy-deep), var(--depb-navy)); color: oklch(0.94 0.018 245); font-size: .82rem; }
.status-inner { min-height: 34px; display: flex; gap: 10px; align-items: center; justify-content: center; text-align: center; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--depb-success); box-shadow: 0 0 0 4px oklch(0.65 0.15 150 / .18); flex: 0 0 auto; }

.hero { position: relative; padding: clamp(24px, 4vw, 38px) 0 clamp(48px, 8vw, 84px); isolation: isolate; }
.hero-noise { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-noise::before { content: ""; position: absolute; width: 44vw; height: 44vw; min-width: 420px; min-height: 420px; right: -12vw; top: -14vw; border-radius: 50%; background: radial-gradient(circle, oklch(0.76 0.115 220 / .32), transparent 64%); filter: blur(8px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .88fr); gap: clamp(34px, 5.6vw, 78px); align-items: center; min-height: min(760px, calc(100dvh - 132px)); overflow: visible; }
.hero-copy { position: relative; z-index: 3; min-width: 0; }
.eyebrow, .micro-label { display: inline-flex; width: fit-content; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid oklch(0.76 0.115 220 / .58); border-radius: var(--r-pill); background: oklch(0.995 0.004 245 / .82); color: var(--depb-navy); font-size: .72rem; font-weight: 950; letter-spacing: .17em; text-transform: uppercase; box-shadow: 0 10px 26px oklch(0.275 0.075 252 / .06); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--depb-alert); box-shadow: 0 0 0 4px oklch(0.62 0.19 28 / .13); }
h1, h2, h3 { margin: 0; line-height: .98; letter-spacing: .002em; }
h1 { margin-top: 17px; max-width: 17ch; font-size: clamp(2.72rem, 6.2vw, 4.65rem); text-wrap: balance; }
h1 span { display: block; white-space: nowrap; }
.subhead { max-width: 39rem; margin: 18px 0 0; color: var(--depb-ink-2); font-size: clamp(1.05rem, 2.1vw, 1.23rem); line-height: 1.42; font-weight: 650; }
.hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 25px; max-width: 610px; }
.secondary-link { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 20px; border-radius: var(--r-pill); border: 1px solid oklch(0.54 0.185 254 / .24); background: var(--depb-surface); color: var(--depb-navy); font-weight: 920; box-shadow: var(--shadow-card); transition: transform .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out); }
.secondary-link:hover { color: var(--depb-blue); border-color: oklch(0.54 0.185 254 / .42); transform: translateY(-1px); }
.quick-proof { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; max-width: 680px; }
.quick-proof span { padding: 9px 12px; border: 1px solid oklch(0.54 0.185 254 / .20); border-radius: var(--r-pill); background: oklch(0.995 0.004 245 / .78); color: var(--depb-navy); font-size: .87rem; font-weight: 900; box-shadow: 0 10px 24px oklch(0.275 0.075 252 / .07); }

.rescue-stage { position: relative; z-index: 1; min-width: 0; }
.stage-frame { position: relative; min-height: 560px; border-radius: var(--r-xl); padding: 10px; background: linear-gradient(145deg, oklch(0.995 0.004 245), oklch(0.90 0.045 240)); border: 1px solid oklch(0.54 0.185 254 / .25); box-shadow: var(--shadow-deep); overflow: hidden; isolation: isolate; contain: paint; }
.stage-frame::before { content: ""; position: absolute; inset: -15% -25% auto auto; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, oklch(0.76 0.115 220 / .55), transparent 66%); filter: blur(22px); }
.stage-frame::after { content: ""; position: absolute; inset: 10px; z-index: 8; border: 1px solid oklch(0.995 0.004 245 / .18); border-radius: calc(var(--r-xl) - 9px); pointer-events: none; }
.hero-photo, .fallback-scene { position: absolute; inset: 10px; border-radius: calc(var(--r-xl) - 9px); overflow: hidden; background: linear-gradient(145deg, var(--depb-navy-deep), var(--depb-navy)); }
.hero-photo { z-index: 2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; opacity: 1; filter: saturate(1.04) contrast(1.02); }
.hero-photo.is-left-scrim img { object-position: 62% center; }
.hero-photo.is-missing { display: none; }
.hero-photo::after, .fallback-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.12 0.05 252 / .66), oklch(0.12 0.05 252 / .20) 58%, transparent), linear-gradient(180deg, transparent 30%, oklch(0.12 0.05 252 / .80)); }
.fallback-scene { z-index: 1; color: oklch(0.96 0.012 245); background:
    radial-gradient(circle at 78% 18%, oklch(0.76 0.115 220 / .34), transparent 28%),
    radial-gradient(circle at 20% 12%, oklch(0.54 0.185 254 / .36), transparent 25%),
    linear-gradient(150deg, var(--depb-navy-deep) 0, var(--depb-navy) 54%, oklch(0.21 0.064 252) 100%); }
.fallback-scene::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, oklch(0.995 0.004 245 / .06) 1px, transparent 1px), linear-gradient(180deg, oklch(0.995 0.004 245 / .05) 1px, transparent 1px); background-size: 34px 34px; }
.route-line { position: absolute; z-index: 2; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--depb-cyan), var(--depb-blue), transparent); box-shadow: 0 0 28px oklch(0.76 0.115 220 / .35); }
.route-a { top: 28%; transform: rotate(-18deg); }
.route-b { top: 49%; transform: rotate(16deg); opacity: .7; }
.city-pin { position: absolute; z-index: 4; width: 15px; height: 15px; border-radius: 50%; background: var(--depb-cyan); box-shadow: 0 0 0 10px oklch(0.76 0.115 220 / .20), 0 10px 22px oklch(0.12 0.05 252 / .40); }
.pin-a { top: 22%; left: 18%; } .pin-b { top: 36%; right: 18%; } .pin-c { top: 56%; left: 34%; }
.rescue-car { position: absolute; z-index: 3; left: 7%; right: 7%; top: 13%; filter: drop-shadow(0 30px 30px oklch(0.12 0.06 252 / .42)); }
.operation-card { position: absolute; z-index: 9; left: 28px; right: 28px; bottom: 28px; padding: clamp(16px, 2vw, 22px); border-radius: 26px; background: linear-gradient(145deg, oklch(0.995 0.004 245 / .98), oklch(0.94 0.026 240 / .96)); color: var(--depb-ink); border: 1px solid oklch(0.54 0.185 254 / .22); box-shadow: 0 26px 64px oklch(0.12 0.05 252 / .38), 0 1px 0 oklch(0.995 0.004 245 / .90) inset; backdrop-filter: blur(10px); }
.operation-top strong { display: block; margin-top: 8px; max-width: 28ch; font-size: clamp(1.18rem, 2.1vw, 1.48rem); line-height: 1.08; letter-spacing: -.006em; }
.operation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 17px; }
.operation-grid span { min-height: 86px; display: grid; align-content: start; gap: 4px; border-radius: 17px; background: oklch(0.965 0.02 240); border: 1px solid var(--depb-line); padding: 11px; color: var(--depb-muted); font-size: .82rem; font-weight: 850; }
.operation-grid b { display: block; color: var(--depb-blue); font-variant-numeric: tabular-nums; }
.operation-grid strong { display: block; color: var(--depb-navy); font-size: .9rem; line-height: 1.05; }
.operation-grid small { display: block; color: var(--depb-muted); font-size: .72rem; line-height: 1.2; font-weight: 730; }

section { padding: clamp(54px, 8vw, 96px) 0; }
.section-head { display: grid; gap: 18px; align-content: start; }
.section-head h2, .zone-copy h2, .faq-intro h2, .final-card h2 { font-size: clamp(2.1rem, 5.4vw, 4.4rem); max-width: 12ch; text-wrap: balance; }
.section-head p, .zone-copy p, .faq-intro p, .final-card p { margin: 0; color: var(--depb-muted); max-width: 42rem; font-weight: 610; }
.wide h2 { max-width: 16ch; }

.reaction-section { padding-top: 24px; }
.reaction-grid { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: 18px; align-items: stretch; }
.reactor { position: relative; border-radius: var(--r-xl); padding: clamp(24px, 4vw, 34px); min-height: 330px; background: linear-gradient(145deg, var(--depb-navy-deep), var(--depb-navy-2)); color: oklch(0.98 0.006 245); box-shadow: var(--shadow-deep); overflow: hidden; }
.reactor::before { content: ""; position: absolute; inset: -25% -22% auto auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, oklch(0.76 0.115 220 / .46), transparent 66%); }
.reactor .micro-label { color: oklch(0.96 0.012 245); background: oklch(0.995 0.004 245 / .10); border-color: oklch(0.995 0.004 245 / .18); }
.reactor-number { position: relative; display: flex; align-items: end; gap: 8px; margin-top: 28px; font-variant-numeric: tabular-nums; }
.reactor-number span, .reactor-number strong { font-size: clamp(5rem, 14vw, 9rem); line-height: .78; letter-spacing: -.02em; }
.reactor-number em { font-style: normal; font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 950; color: var(--depb-cyan); }
.reactor p { position: relative; max-width: 33ch; margin: 22px 0 0; color: oklch(0.88 0.026 245); font-weight: 650; }
.dispatch-board { display: grid; gap: 12px; }
.board-line { min-height: 100px; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--depb-surface); border: 1px solid var(--depb-line); box-shadow: var(--shadow-card); }
.board-line span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; background: var(--depb-ice); color: var(--depb-blue); font-weight: 950; font-variant-numeric: tabular-nums; }
.board-line strong { font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.03; letter-spacing: -.004em; }
.board-line em { justify-self: end; font-style: normal; color: var(--depb-muted); font-weight: 800; }
.board-line.is-hot { border-color: oklch(0.54 0.185 254 / .35); background: linear-gradient(135deg, var(--depb-surface), oklch(0.93 0.04 238)); }

.steps-section { position: relative; }
.steps-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: clamp(22px, 5vw, 70px); align-items: start; }
.sticky-head { position: sticky; top: 124px; }
.inline-call { width: fit-content; padding-inline: 18px; margin-top: 8px; }
.step-stack { display: grid; gap: 18px; }
.step-panel { position: relative; min-height: 260px; display: grid; align-content: end; padding: clamp(22px, 4vw, 34px); border-radius: var(--r-xl); background: var(--depb-surface); border: 1px solid var(--depb-line); box-shadow: var(--shadow-card); overflow: hidden; }
.step-panel::before { content: attr(data-step); position: absolute; right: -8px; top: -44px; color: oklch(0.54 0.185 254 / .08); font-size: 12rem; line-height: 1; font-weight: 950; letter-spacing: -.03em; }
.step-panel:nth-child(2) { transform: translateX(42px); background: linear-gradient(145deg, var(--depb-surface), oklch(0.935 0.036 238)); }
.step-panel:nth-child(3) { background: linear-gradient(145deg, var(--depb-navy), var(--depb-navy-deep)); color: oklch(0.98 0.006 245); border-color: oklch(0.995 0.004 245 / .12); box-shadow: var(--shadow-deep); }
.step-index { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; background: var(--depb-blue); color: oklch(0.995 0.004 245); font-weight: 950; font-variant-numeric: tabular-nums; }
.step-panel h3 { position: relative; margin-top: 28px; font-size: clamp(2rem, 5vw, 3.8rem); }
.step-panel p { position: relative; max-width: 42ch; margin: 13px 0 0; color: var(--depb-muted); font-weight: 610; }
.step-panel:nth-child(3) p { color: oklch(0.88 0.026 245); }
.field-proof { position: relative; min-height: 320px; margin: 2px 0 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-deep); background: var(--depb-navy-deep); }
.field-proof img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: 54% center; filter: saturate(1.02) contrast(1.03); }
.field-proof::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, oklch(0.12 0.05 252 / .84)); }
.field-proof figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: oklch(0.96 0.012 245); font-weight: 900; line-height: 1.18; max-width: 28rem; }

.zones-section { background: linear-gradient(180deg, transparent, oklch(0.945 0.024 240 / .72), transparent); }
.zones-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: clamp(22px, 5vw, 66px); align-items: center; }
.map-console { position: relative; min-height: 540px; border-radius: var(--r-xl); padding: 16px; background: radial-gradient(circle at 22% 0%, oklch(0.76 0.115 220 / .30), transparent 34%), linear-gradient(145deg, var(--depb-navy-deep), var(--depb-navy)); box-shadow: var(--shadow-deep); overflow: hidden; isolation: isolate; }
.map-console::before { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--r-xl) - 1px); border: 1px solid oklch(0.995 0.004 245 / .18); pointer-events: none; z-index: 4; }
.map-console::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, oklch(0.995 0.004 245 / .035) 1px, transparent 1px), linear-gradient(180deg, oklch(0.995 0.004 245 / .032) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(circle, oklch(0.205 0.035 252) 0, transparent 72%); pointer-events: none; z-index: 2; }
.map-panel-top { position: absolute; z-index: 5; top: 28px; left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: oklch(0.97 0.012 245); pointer-events: none; }
.map-panel-top .micro-label { color: oklch(0.96 0.012 245); background: oklch(0.995 0.004 245 / .11); border-color: oklch(0.995 0.004 245 / .20); backdrop-filter: blur(10px); }
.map-panel-top strong { max-width: 14ch; text-align: right; font-size: clamp(1.15rem, 2.1vw, 1.55rem); line-height: 1.02; letter-spacing: .002em; }
.leaflet-map-shell { position: absolute; inset: 16px; border-radius: calc(var(--r-xl) - 13px); overflow: hidden; background: linear-gradient(145deg, oklch(0.16 0.055 252), oklch(0.25 0.076 252)); border: 1px solid oklch(0.995 0.004 245 / .14); box-shadow: 0 24px 74px oklch(0.12 0.05 252 / .36) inset; }
.leaflet-map-shell.is-loaded .map-fallback { opacity: 0; pointer-events: none; }
.leaflet-map-shell .leaflet-tile-pane { filter: saturate(.86) contrast(1.08) brightness(.78) hue-rotate(4deg); }
.leaflet-map-shell .leaflet-control-attribution { background: oklch(0.145 0.055 252 / .78); color: oklch(0.86 0.024 245); font-size: 10px; border-radius: 12px 0 0 0; }
.leaflet-map-shell .leaflet-control-attribution a { color: var(--depb-cyan); }
.leaflet-map-shell .leaflet-control-zoom { border: 0; box-shadow: 0 12px 32px oklch(0.12 0.05 252 / .35); }
.leaflet-map-shell .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; background: oklch(0.97 0.012 245); color: var(--depb-navy); border-color: oklch(0.54 0.185 254 / .16); }
.leaflet-map-shell .leaflet-control-attribution a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 2px; }
.map-fallback { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; padding: 24px; color: oklch(0.96 0.012 245); background: radial-gradient(circle at 50% 35%, oklch(0.76 0.115 220 / .22), transparent 34%), linear-gradient(145deg, var(--depb-navy-deep), var(--depb-navy)); transition: opacity .32s var(--ease-out); }
.map-fallback strong { font-size: clamp(1.6rem, 3.5vw, 2.45rem); letter-spacing: .002em; }
.map-fallback span { max-width: 28ch; color: oklch(0.86 0.026 245); font-weight: 750; }
.map-scrim { position: absolute; inset: 16px; z-index: 3; pointer-events: none; border-radius: calc(var(--r-xl) - 13px); background: linear-gradient(180deg, oklch(0.12 0.05 252 / .40), transparent 28%, transparent 68%, oklch(0.12 0.05 252 / .62)); }
.map-zone-strip { position: absolute; z-index: 5; left: 28px; right: 28px; bottom: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.map-zone-strip span { min-height: 42px; display: grid; place-items: center; padding: 8px; border-radius: 15px; background: oklch(0.995 0.004 245 / .92); color: var(--depb-navy); border: 1px solid oklch(0.76 0.115 220 / .38); box-shadow: 0 16px 34px oklch(0.12 0.05 252 / .24); font-size: .86rem; font-weight: 950; }
.depb-map-marker { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--depb-cyan); border: 3px solid oklch(0.995 0.004 245); box-shadow: 0 0 0 9px oklch(0.76 0.115 220 / .22), 0 14px 30px oklch(0.12 0.05 252 / .48); }
.depb-map-label { display: block; padding: 7px 10px; border-radius: 999px; background: oklch(0.995 0.004 245 / .94); color: var(--depb-navy); border: 1px solid oklch(0.76 0.115 220 / .45); box-shadow: 0 14px 30px oklch(0.12 0.05 252 / .28); font: 950 12px/1 "Aptos", "Manrope", system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.zone-copy { display: grid; gap: 18px; }
.zone-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.zone-list li { padding: 13px 14px; border-radius: 17px; background: var(--depb-surface); color: var(--depb-navy); font-weight: 950; border: 1px solid oklch(0.54 0.185 254 / .20); box-shadow: 0 10px 26px oklch(0.275 0.075 252 / .07); }
.zone-call { width: fit-content; margin-top: 4px; padding-inline: 18px; }

.trust-layout { display: grid; gap: 28px; }
.trust-mosaic { display: grid; grid-template-columns: 1.05fr .95fr .95fr; grid-auto-rows: minmax(200px, auto); gap: 14px; }
.trust-item { position: relative; display: grid; align-content: end; gap: 12px; padding: 22px; border-radius: var(--r-lg); background: var(--depb-surface); border: 1px solid var(--depb-line); box-shadow: var(--shadow-card); overflow: hidden; transition: transform .22s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.trust-item:hover { transform: translateY(-3px); border-color: oklch(0.54 0.185 254 / .30); box-shadow: 0 20px 54px oklch(0.275 0.075 252 / .13); }
.trust-item::before { content: ""; position: absolute; inset: auto -60px -90px auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, oklch(0.76 0.115 220 / .20), transparent 66%); }
.trust-item.tall { grid-row: span 2; min-height: 438px; background: linear-gradient(145deg, var(--depb-surface), oklch(0.925 0.044 232)); }
.trust-item.compact { min-height: 176px; background: linear-gradient(145deg, var(--depb-surface), oklch(0.945 0.026 240)); }
.trust-item.blue { background: linear-gradient(145deg, var(--depb-navy), var(--depb-navy-deep)); color: oklch(0.98 0.006 245); box-shadow: var(--shadow-deep); }
.trust-icon { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; background: oklch(0.935 0.04 238); color: var(--depb-blue); border: 1px solid oklch(0.54 0.185 254 / .22); box-shadow: 0 14px 30px oklch(0.275 0.075 252 / .10); font-size: .9rem; line-height: 1; font-weight: 950; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.trust-index { position: relative; color: var(--depb-blue); font-weight: 950; font-variant-numeric: tabular-nums; }
.trust-item.blue .trust-icon { color: var(--depb-navy-deep); background: var(--depb-cyan); border-color: oklch(0.995 0.004 245 / .24); }
.trust-item.blue .trust-index { color: var(--depb-cyan); }
.trust-item h3 { position: relative; font-size: clamp(1.45rem, 2.8vw, 2.35rem); line-height: 1; }
.trust-item p { position: relative; margin: 0; color: var(--depb-muted); font-weight: 600; }
.trust-item.blue p { color: oklch(0.88 0.026 245); }
.trust-item.image-tile { padding: 0; min-height: 300px; background: var(--depb-navy-deep); color: oklch(0.98 0.006 245); }
.trust-item.image-tile::before { display: none; }
.trust-item.image-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.05) contrast(1.05); }
.trust-item.image-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.12 0.05 252 / .10), oklch(0.12 0.05 252 / .82)); }
.trust-item.image-tile .tile-copy { position: relative; z-index: 1; padding: 22px; align-self: end; }
.trust-item.image-tile h3, .trust-item.image-tile p, .trust-item.image-tile .trust-index { color: inherit; }
.trust-item.image-tile .trust-icon { color: var(--depb-navy-deep); background: oklch(0.96 0.02 240 / .92); border-color: oklch(0.995 0.004 245 / .32); }

.asset-band { padding-top: 0; }
.asset-band-card { position: relative; min-height: clamp(420px, 52vw, 560px); display: grid; align-items: end; padding: clamp(20px, 4vw, 42px); border-radius: var(--r-xl); background: linear-gradient(145deg, var(--depb-navy-deep), var(--depb-navy)); color: oklch(0.98 0.006 245); box-shadow: var(--shadow-deep); overflow: hidden; isolation: isolate; }
.asset-band-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, oklch(0.145 0.055 252 / .94) 0%, oklch(0.275 0.075 252 / .86) 38%, oklch(0.54 0.185 254 / .46) 72%, oklch(0.76 0.115 220 / .28) 100%); pointer-events: none; }
.asset-band-card::after { content: ""; position: absolute; inset: clamp(14px, 2vw, 20px); z-index: 3; border-radius: calc(var(--r-xl) - 16px); border: 1px solid oklch(0.995 0.004 245 / .16); pointer-events: none; }
.asset-band-card > div { position: relative; z-index: 4; max-width: min(610px, 100%); padding: clamp(18px, 3.4vw, 34px); border-radius: 28px; background: linear-gradient(145deg, oklch(0.54 0.185 254 / .36), oklch(0.145 0.055 252 / .74)); border: 1px solid oklch(0.995 0.004 245 / .18); box-shadow: 0 26px 70px oklch(0.12 0.05 252 / .34); backdrop-filter: blur(10px); }
.asset-band-card .micro-label { color: oklch(0.98 0.006 245); background: oklch(0.995 0.004 245 / .14); border-color: oklch(0.995 0.004 245 / .22); }
.asset-band-card h2 { margin-top: 16px; font-size: clamp(2rem, 4.8vw, 4rem); max-width: 14ch; }
.asset-band-card p { color: oklch(0.93 0.016 245); font-weight: 680; max-width: 38rem; }
.asset-band-card img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.04) contrast(1.04); }
.asset-call { margin-top: 18px; background: oklch(0.985 0.006 245); color: var(--depb-navy-deep); box-shadow: 0 18px 42px oklch(0.12 0.05 252 / .22); }
.asset-call:hover { background: oklch(0.94 0.026 240); color: var(--depb-navy-deep); }

.lp-hero .stage-frame { min-height: 545px; }
.lp-hero .operation-card { left: 24px; right: 24px; }
.lp-intent { padding-top: 24px; }
.lp-intent-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr); gap: clamp(18px, 4vw, 44px); align-items: stretch; }
.intent-card { position: relative; display: grid; align-content: end; min-height: 350px; padding: clamp(22px, 4vw, 32px); border-radius: var(--r-xl); background: var(--depb-surface); border: 1px solid var(--depb-line); box-shadow: var(--shadow-card); overflow: hidden; }
.intent-card.dark { background: linear-gradient(145deg, var(--depb-navy), var(--depb-navy-deep)); color: oklch(0.98 0.006 245); box-shadow: var(--shadow-deep); }
.intent-card.photo { padding: 0; color: oklch(0.98 0.006 245); background: var(--depb-navy-deep); }
.intent-card.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.03); }
.intent-card.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, oklch(0.12 0.05 252 / .84)); }
.intent-card.photo .intent-copy { position: relative; z-index: 1; padding: clamp(22px, 4vw, 32px); align-self: end; }
.intent-card h2 { font-size: clamp(2rem, 4.8vw, 3.8rem); max-width: 13ch; }
.intent-card p { margin: 14px 0 0; color: var(--depb-muted); font-weight: 640; }
.intent-card.dark p, .intent-card.photo p { color: oklch(0.88 0.026 245); }
.symptom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.symptom-card { padding: 22px; border-radius: var(--r-lg); background: var(--depb-surface); border: 1px solid var(--depb-line); box-shadow: var(--shadow-card); }
.symptom-card h3 { font-size: clamp(1.35rem, 2.5vw, 2rem); }
.symptom-card p { margin: 12px 0 0; color: var(--depb-muted); font-weight: 620; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.choice { min-height: 180px; display: grid; align-content: space-between; gap: 18px; padding: 22px; border-radius: var(--r-lg); background: var(--depb-surface); border: 1px solid var(--depb-line); box-shadow: var(--shadow-card); transition: transform .18s var(--ease-out), border-color .18s var(--ease-out); }
.choice:hover { transform: translateY(-2px); border-color: oklch(0.54 0.185 254 / .36); }
.choice b { font-size: 1.2rem; line-height: 1.08; letter-spacing: .001em; }
.choice span { color: var(--depb-muted); font-weight: 620; }
.choice em { font-style: normal; color: var(--depb-blue); font-weight: 950; }

.faq-grid { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: clamp(22px, 5vw, 64px); align-items: start; }
.faq-intro { display: grid; gap: 18px; position: sticky; top: 124px; }
.faq-list { display: grid; gap: 10px; }
details { border: 1px solid var(--depb-line); border-radius: var(--r-md); background: var(--depb-surface); overflow: hidden; box-shadow: 0 8px 24px oklch(0.275 0.075 252 / .05); }
summary { cursor: pointer; padding: 20px; font-weight: 950; list-style: none; color: var(--depb-ink); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--depb-blue); font-weight: 950; }
details[open] summary::after { content: "−"; }
details p { margin: 0; padding: 0 20px 20px; color: var(--depb-muted); font-weight: 600; }

.final-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; padding: clamp(26px, 5vw, 46px); border-radius: var(--r-xl); background: linear-gradient(145deg, var(--depb-navy-deep), var(--depb-navy-2)); color: oklch(0.98 0.006 245); box-shadow: var(--shadow-deep); overflow: hidden; }
.final-card::before { content: ""; position: absolute; inset: 1px; border: 1px solid oklch(0.995 0.004 245 / .16); border-radius: calc(var(--r-xl) - 1px); pointer-events: none; }
.final-card::after { content: ""; position: absolute; right: -10%; top: -40%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, oklch(0.76 0.115 220 / .34), transparent 66%); }
.final-card > * { position: relative; z-index: 1; }
.final-card .micro-label { color: oklch(0.96 0.012 245); background: oklch(0.995 0.004 245 / .10); border-color: oklch(0.995 0.004 245 / .18); }
.final-card p { color: oklch(0.88 0.026 245); margin-top: 14px; }

.footer { padding: 0 0 112px; color: oklch(0.86 0.026 245); background: radial-gradient(circle at 82% 0%, oklch(0.76 0.115 220 / .24), transparent 26rem), linear-gradient(145deg, var(--depb-navy-deep), oklch(0.20 0.068 252)); box-shadow: 0 -18px 70px oklch(0.145 0.055 252 / .18); overflow: hidden; }
.footer-shell { position: relative; display: grid; grid-template-columns: minmax(260px, .95fr) minmax(420px, 1.35fr); gap: clamp(24px, 4vw, 48px); padding: clamp(34px, 5vw, 58px) 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.footer-shell::before { content: ""; position: absolute; inset: 0; border-top: 1px solid oklch(0.995 0.004 245 / .12); pointer-events: none; }
.footer-shell > * { position: relative; z-index: 1; }
.footer-brand { display: inline-flex; align-items: center; gap: 13px; color: oklch(0.985 0.006 245); font-size: 1.18rem; line-height: 1.02; font-weight: 950; letter-spacing: .002em; }
.footer-brand small { display: block; margin-top: 5px; color: oklch(0.78 0.04 245); font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; }
.footer-logo { width: 50px; height: 50px; display: grid; place-items: center; padding: 4px; border-radius: 18px; background: oklch(0.985 0.006 245); border: 1px solid oklch(0.76 0.115 220 / .34); box-shadow: 0 18px 42px oklch(0.54 0.185 254 / .22); overflow: hidden; flex: 0 0 auto; }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; }
.footer-brand-block p, .footer-contact p { max-width: 34rem; margin: 18px 0 0; color: oklch(0.82 0.028 245); font-weight: 650; }
.footer-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); }
.footer-columns h2 { margin: 0 0 14px; color: oklch(0.98 0.006 245); font-size: .82rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.footer-columns ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer-columns li, .footer-columns a { color: oklch(0.84 0.028 245); font-size: .94rem; font-weight: 760; }
.footer-columns a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 8px; margin-inline: -8px; }
.footer-columns a { transition: color .18s var(--ease-out); }
.footer-columns a:hover { color: var(--depb-cyan); }
.footer-contact { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 22px; margin-top: 2px; padding: 20px; border-radius: 28px; background: oklch(0.995 0.004 245 / .07); border: 1px solid oklch(0.995 0.004 245 / .13); }
.footer-contact .micro-label { color: oklch(0.96 0.012 245); background: oklch(0.995 0.004 245 / .11); border-color: oklch(0.995 0.004 245 / .20); }
.footer-phone { min-height: 44px; display: inline-flex; align-items: center; color: oklch(0.985 0.006 245); font-size: clamp(2rem, 5vw, 4.2rem); line-height: .9; font-weight: 950; letter-spacing: .004em; font-variant-numeric: tabular-nums; justify-self: end; text-shadow: 0 18px 44px oklch(0.12 0.05 252 / .35); }
.footer-contact p { grid-column: 1 / -1; margin-top: 0; }
.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid oklch(0.995 0.004 245 / .12); color: oklch(0.72 0.026 245); font-size: .86rem; font-weight: 650; }
.sticky-call { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 10px); min-height: 60px; display: none; transform: translateY(0); }

.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .72s var(--ease-out), transform .72s var(--ease-out); }
.js .hero-copy .reveal { opacity: 1; transform: none; }
.muted { color: var(--depb-muted); }

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(330px, .86fr); gap: 30px; }
  .brand-copy { max-width: 180px; }
  .nav-links { gap: 13px; }
}

@media (max-width: 880px) {
  body { font-size: 16px; padding-bottom: 86px; }
  .nav-shell { height: 62px; }
  .nav-links, .nav-call { display: none; }
  .status-inner { justify-content: flex-start; font-size: .76rem; line-height: 1.25; padding-block: 7px; }
  .hero { padding-top: 22px; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; gap: 24px; }
  h1 { max-width: 10.4ch; }
  h1 span { white-space: normal; }
  .hero-actions { grid-template-columns: 1fr; }
  .secondary-link { justify-content: center; }
  .stage-frame { min-height: 455px; border-radius: 30px; }
  .hero-photo, .fallback-scene { border-radius: 22px; }
  .operation-card { left: 18px; right: 18px; bottom: 18px; }
  .operation-grid { grid-template-columns: 1fr; }
  .reaction-grid, .steps-layout, .zones-grid, .faq-grid, .final-card, .asset-band-card, .lp-intent-grid { grid-template-columns: 1fr; }
  .sticky-head, .faq-intro { position: static; }
  .step-panel:nth-child(2) { transform: none; }
  .map-console { min-height: 420px; }
  .map-panel-top { top: 22px; left: 22px; right: 22px; }
  .map-panel-top strong { display: none; }
  .map-zone-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); left: 22px; right: 22px; bottom: 22px; }
  .trust-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .trust-item.tall { min-height: 250px; }
  .symptom-grid, .choice-grid { grid-template-columns: 1fr; }
  .final-card .call-button { width: 100%; }
  .footer-shell, .footer-columns, .footer-contact { grid-template-columns: 1fr; }
  .footer-contact { align-items: start; }
  .footer-phone { justify-self: start; }
  .sticky-call { display: flex; }
}

@media (max-width: 430px) {
  .wrap { width: min(var(--max), calc(100% - 24px)); }
  .brand-copy small { display: none; }
  .brand { letter-spacing: 0; }
  .brand-mark { width: 38px; height: 38px; }
  .status-strip span:last-child { max-width: 31ch; }
  h1 { font-size: clamp(2.45rem, 11.2vw, 3.2rem); }
  .quick-proof span { font-size: .8rem; }
  .stage-frame { min-height: 455px; padding: 8px; }
  .hero-photo, .fallback-scene { inset: 8px; }
  .rescue-car { top: 8%; left: 2%; right: 2%; }
  .operation-card { left: 14px; right: 14px; bottom: 14px; padding: 12px; border-radius: 18px; }
  .operation-top strong { margin-top: 6px; font-size: 1.02rem; line-height: 1.02; }
  .operation-grid { gap: 6px; margin-top: 10px; }
  .operation-grid span { min-height: auto; grid-template-columns: 30px 1fr; align-items: center; gap: 2px 7px; padding: 8px 10px; border-radius: 14px; }
  .operation-grid b { grid-row: span 2; }
  .operation-grid strong { font-size: .86rem; }
  .operation-grid small { font-size: .68rem; line-height: 1.1; }
  .board-line { grid-template-columns: 50px 1fr; }
  .board-line em { grid-column: 2; justify-self: start; }
  .zone-list { grid-template-columns: 1fr; }
  .map-console { min-height: 455px; padding: 10px; }
  .leaflet-map-shell, .map-scrim { inset: 10px; border-radius: 24px; }
  .map-zone-strip span { min-height: 38px; font-size: .8rem; }
  .footer-shell { width: min(var(--max), calc(100% - 24px)); padding: 28px 0; border-radius: 0; }
  .footer-brand { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .js .reveal, .reveal { opacity: 1 !important; transform: none !important; }
}

/* WhatsApp DEPB (2026-07-02) — CTA secondaire, appel reste prioritaire */
.final-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; position: relative; z-index: 1; }
.wa-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding-inline: 20px; border-radius: var(--r-pill); background: oklch(0.60 0.15 152); color: oklch(0.995 0.004 245); font-weight: 900; box-shadow: 0 14px 34px oklch(0.60 0.15 152 / .26); transition: transform .18s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.wa-button:hover { background: oklch(0.55 0.15 152); transform: translateY(-1px); box-shadow: 0 18px 44px oklch(0.60 0.15 152 / .32); }
.wa-button:active { transform: scale(.985); }
.wa-button .wa-note { font-weight: 700; opacity: .92; }
@media (max-width: 760px) {
  .final-actions { align-items: stretch; width: 100%; }
  .final-card .wa-button { width: 100%; }
}