:root {
  --navy: #152D47;
  --navy-2: #1B364F;
  --navy-3: #2C4A63;
  --teal: #14B8A6;
  --teal-deep: #0F8577;
  --teal-ink: #0F7A6E;
  --teal-dark: #0B6459;
  --ink: #152D47;
  --text: #3E4E59;
  --muted: #5A6B76;
  --line: #E1E8EB;
  --line-2: #D1DADE;
  --bg: #F5F8F9;
  --white: #FFFFFF;
  --mint: #E2F7F4;
  --mint-2: #F0FCFA;
  --warn: #C08A2E;
  --warn-bg: #FBF1E2;
  --danger: #B24A38;
  --ok: #0F6B45;
  --ok-bg: #E4F3EB;
  --shadow: 0 50px 90px -60px rgba(21, 45, 71, 0.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-ink); text-decoration: none; }
a:hover { color: var(--teal-dark); }
::selection { background: #B8EDE6; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.topbar { background: var(--navy); color: #9FB0BC; font-size: 12.5px; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
.topbar a { color: #9FB0BC; }
.topbar a:hover { color: #fff; }
.topbar .end { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.topbar .strong { color: #fff; font-weight: 600; }

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(245, 248, 249, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header > .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; }
.logo img { height: 32px; width: auto; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.nav a, .nav button {
  padding: 8px 11px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--text); background: transparent; border: 0; cursor: pointer;
}
.nav a:hover, .nav button:hover, .nav a.is-active, .nav button.is-open { background: #EBF1F2; color: var(--ink); }
.header-cta { margin-left: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; padding: 12px 20px; font-size: 14.5px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; text-align: center;
}
.btn-primary { background: var(--teal-deep); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }
.btn-ghost { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--teal-ink); color: var(--teal-ink); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { color: #fff; filter: brightness(1.08); }
.btn-line-dark { border-color: var(--navy-3); color: #E9EFF2; background: transparent; }
.btn-line-dark:hover { border-color: #6FE3D2; color: #6FE3D2; }
.btn[disabled], .btn.is-disabled { background: #A2AEB6; cursor: not-allowed; color: #fff; }

.mega {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 34px 60px -46px rgba(21, 45, 71, 0.55);
}
.mega.is-open { display: block; }
.mega-grid {
  display: grid; gap: 22px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  padding-top: 22px; padding-bottom: 24px;
}
.mega-cols {
  min-width: 0; grid-column: 1 / -2;
  display: grid; gap: 6px 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.mega-col { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mega-link { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 9px; color: var(--ink); }
.mega-link:hover { background: var(--bg); color: var(--ink); }
.mega-link strong { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; }
.mega-link span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.mega-card {
  min-width: 0; background: var(--navy); border-radius: 14px; padding: 18px; color: #fff;
  display: flex; flex-direction: column; gap: 10px;
}
.mega-card .tag { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: #6FE3D2; }
.mega-card h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; color: #fff; }
.mega-card p { margin: 0; font-size: 13px; line-height: 1.55; color: #A9B7C1; }
.mega-card .btn { margin-top: 6px; align-self: flex-start; padding: 9px 15px; font-size: 13px; border-radius: 8px; }

.hero {
  position: relative; background: linear-gradient(180deg, #fff 0%, var(--bg) 78%);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.hero-map-wrap {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(900px 520px at 82% 16%, rgba(20,184,166,0.13) 0%, rgba(20,184,166,0) 74%);
}
.hero-map {
  position: absolute; inset: 0; opacity: 0.85;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.3) 26%, rgba(0,0,0,0.85) 58%, #000 100%), linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.3) 26%, rgba(0,0,0,0.85) 58%, #000 100%), linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
  mask-composite: intersect;
}
.hero-map svg { width: 100%; height: 100%; display: block; }
.hero-stage { min-width: 0; display: flex; flex-direction: column; }
.hero-popup {
  position: relative; width: min(100%, 360px); align-self: flex-end;
  margin: -58px clamp(-34px, -2.4vw, 0px) 0 0;
  background: #fff; border: 1px solid #DEE5E9; border-radius: 14px;
  box-shadow: 0 30px 60px -40px rgba(21,45,71,0.45); padding: 16px;
  display: flex; flex-direction: column; gap: 12px; z-index: 2;
  opacity: 0; transform: translateY(16px) scale(0.965);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.hero-popup.is-on { opacity: 1; transform: translateY(0) scale(1); }
.hero-popup-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; opacity: 0; transition: opacity 480ms ease 120ms; }
.hero-popup-signals.is-on { opacity: 1; }
.hero-popup-angle { background: #152D47; border-radius: 10px; padding: 12px; color: #C6D4DC; font-size: 12.5px; line-height: 1.5; opacity: 0; transition: opacity 520ms ease; }
.hero-popup-angle.is-on { opacity: 1; }
.preview-row { opacity: 0; transform: translateY(10px); transition: opacity 420ms ease, transform 420ms ease, background 320ms ease; }
.preview-row.is-on { opacity: 1; transform: none; }
.preview-row.is-open { background: #F7FBFB; }
.preview-row.is-picked { background: #F0FCFA; }
.preview-head { position: relative; }
.scan-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.scan-bar i { display: block; width: 38%; height: 100%; background: #0F8577; animation: vg-scan 1.1s ease-in-out infinite; }
.scan-bar.is-off { display: none; }
@keyframes vg-scan {
  0% { transform: translateX(-30%); }
  100% { transform: translateX(280%); }
}
@keyframes vg-ping {
  0% { transform: scale(0.35); opacity: 0.55; }
  70% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-row, .hero-popup, .hero-popup-signals, .hero-popup-angle,
  .demo-signals .signal, .demo-angle-meta {
    opacity: 1; transform: none;
  }
  .scan-bar { display: none; }
  .demo-caret::after { display: none; }
}
.logo-strip { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.logo-strip span { font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.08em; color: #8A99A3; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.quote p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.source-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) 110px; gap: 12px; padding: 13px 0; border-bottom: 1px solid #EDF1F3; align-items: center; }
.hero-inner { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: clamp(32px, 4vw, 56px); align-items: center; padding: clamp(40px, 5vw, 72px) 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--mint); border: 1px solid #B8EDE6; border-radius: 999px;
  padding: 5px 12px 5px 8px; font-size: 12.5px; font-weight: 600; color: var(--teal-ink);
}
.pill b { background: var(--teal-deep); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 11px; }
h1, .h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.03; letter-spacing: -0.042em; font-weight: 800; margin: 16px 0 0; text-wrap: balance; }
h1 em, .accent { color: var(--teal-ink); font-style: normal; }
.lead { font-size: clamp(15.5px, 1.4vw, 18px); line-height: 1.6; color: var(--text); margin: 18px 0 0; max-width: 52ch; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.avatars { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.avatars .stack { display: flex; }
.av {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; border: 2px solid #fff; margin-left: -9px;
}
.av:first-child { margin-left: 0; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 26px; }
.stats-row > div { background: #fff; padding: 14px 16px; }
.stats-row strong { display: block; font-size: 20px; letter-spacing: -0.03em; }
.stats-row span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.preview-card {
  background: #fff; border: 1px solid #DEE5E9; border-radius: 18px;
  box-shadow: var(--shadow), 0 2px 6px -2px rgba(21,45,71,0.06); overflow: hidden;
}
.preview-bar { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid #E9EFF1; background: #FAFCFC; }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #DEE5E9; display: block; }
.url { flex: 1; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); background: #EDF1F3; border-radius: 6px; padding: 4px 10px; }
.credit-chip { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--teal-ink); background: var(--mint); border-radius: 6px; padding: 4px 9px; }
.preview-body { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.preview-side { background: var(--navy); padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; min-width: 56px; }
.sq { width: 22px; height: 22px; border-radius: 6px; background: #1A3247; border: 1px solid var(--navy-3); }
.sq.on { background: #12474D; border-color: #1A7F78; }
.sq.brand { background: var(--teal-deep); border: 0; border-radius: 7px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 15px; border-bottom: 1px solid #EDF1F3; }
.chip { border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 11px; font-size: 12.5px; color: var(--text); background: #fff; cursor: pointer; }
.chip.is-on { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; font-weight: 600; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #0F8577; display: inline-block; }
.chip { display: inline-flex; align-items: center; gap: 7px; }
.chip-round { border-radius: 999px; }
.preview-head, .preview-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 46px 62px; gap: 12px; align-items: center;
  padding: 11px 15px; border-bottom: 1px solid #EDF1F3;
}
.preview-head { background: #FAFCFC; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.blur-name { width: 62%; height: 13px; border-radius: 4px; background: linear-gradient(90deg, #C6D4DC 0 62%, #DEE5E9 62% 100%); filter: blur(3px); }

.demo-frame { pointer-events: none; user-select: none; }
.demo-frame .chip { transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
.demo-frame .chip.is-hit { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(15, 133, 119, 0.2); }
.demo-caption {
  display: block; margin-top: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.demo-caption-on-dark { color: #9FB0BC; }
.demo-points { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.demo-point { display: flex; gap: 10px; align-items: flex-start; }
.demo-point .tick { margin-top: 2px; }
.demo-point strong { display: block; font-size: 14.5px; letter-spacing: -0.02em; }
.demo-point p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.demo-search { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(168px, 0.85fr); }
.demo-search-form { padding: 16px 18px 18px; }
.demo-search-form .filters { padding: 9px 0; border: 0; }
.demo-search-live {
  padding: 16px 14px 18px; background: #FAFCFC; border-left: 1px solid #EDF1F3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.demo-search-live .btn { width: 100%; padding: 11px; font-size: 13px; }
.demo-search-live .btn.is-pulse { animation: vg-pulse 0.7s ease; }
.demo-range { width: 100%; accent-color: #0F8577; margin-top: 8px; display: block; }
.demo-donut.donut-wrap { width: 128px; height: 128px; }
.demo-donut svg { width: 128px; height: 128px; transform: rotate(-90deg); display: block; }
.demo-donut .donut-center { inset: 12px; }
.demo-donut [data-demo-count] { font-size: 26px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.demo-dist { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.demo-bar-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
.demo-bar-row .mono { font-size: 11px; }
.demo-bar { height: 6px; border-radius: 3px; background: #E7EFF0; overflow: hidden; }
.demo-bar i { display: block; height: 100%; border-radius: 3px; transition: width 480ms ease; }
.demo-fiche-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 16px 14px; border-bottom: 1px solid #EDF1F3;
}
.demo-fiche-head h3 { margin: 0; font-size: 17px; letter-spacing: -0.03em; }
.demo-fiche-head .btn { padding: 9px 12px; font-size: 12.5px; }
.demo-score { font-size: 28px; font-weight: 600; color: #0F6B45; letter-spacing: -0.04em; }
.demo-signals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; }
.demo-signals .signal {
  min-height: 0; padding: 12px; opacity: 0; transform: translateY(8px);
  transition: opacity 380ms ease, transform 380ms ease, background 320ms ease, border-color 320ms ease;
}
.demo-signals .signal.is-on { opacity: 1; transform: none; }
.credit-chip.is-flash { animation: vg-flash 0.65s ease; }
.demo-frame .btn { transition: transform 160ms ease, filter 160ms ease, background 200ms ease; }
.demo-frame .btn.is-press { transform: scale(0.97); filter: brightness(0.94); }
.demo-angle {
  margin: 14px; padding: 18px;
  background: linear-gradient(150deg, #152D47, #1C4152);
  border-radius: 14px; color: #EDEEF1; min-height: 210px;
}
.demo-angle-text { font-size: 16.5px; line-height: 1.5; min-height: 4.8em; margin: 10px 0 0; color: #EDEEF1; }
.demo-caret::after {
  content: "▍"; color: #6FE3D2; font-weight: 400; margin-left: 1px;
  animation: vg-caret 0.9s steps(1) infinite;
}
.demo-caret.is-done::after { display: none; }
.demo-angle-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; opacity: 0; transform: translateY(6px); transition: opacity 420ms ease, transform 420ms ease; }
.demo-angle-meta.is-on { opacity: 1; transform: none; }
@keyframes vg-pulse {
  0%, 100% { transform: none; box-shadow: none; }
  40% { transform: scale(1.03); box-shadow: 0 0 0 4px rgba(15, 133, 119, 0.18); }
}
@keyframes vg-flash {
  0%, 100% { background: var(--mint); color: var(--teal-ink); }
  40% { background: #FBF1E2; color: #8A5A1E; }
}
@keyframes vg-caret {
  50% { opacity: 0; }
}
@media (max-width: 720px) {
  .demo-search { grid-template-columns: 1fr; }
  .demo-search-live { border-left: 0; border-top: 1px solid #EDF1F3; }
}
@media (max-width: 520px) {
  .demo-signals { grid-template-columns: 1fr; }
}
.score-badge { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500; border-radius: 6px; padding: 3px 8px; justify-self: start; }

.section { padding: clamp(48px, 7vw, 92px) 24px; }
.section-white { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-dark { background: var(--navy); color: #E9EFF2; }
.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-ink); }
.kicker-mono { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #6FE3D2; letter-spacing: 0; text-transform: none; }
h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; margin: 14px 0 0; text-wrap: balance; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 36px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { margin: 0; font-size: 19px; letter-spacing: -0.025em; }
.muted { color: var(--muted); }
.body { font-size: 16px; line-height: 1.65; color: var(--text); max-width: 52ch; }
.tag { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--teal-ink); }
.price { font-size: 40px; font-weight: 800; letter-spacing: -0.045em; }
.pack { border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); background: #fff; }
.pack.is-featured { background: var(--mint-2); border-color: #B8EDE6; }
.pack ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid #E9EFF1; display: flex; flex-direction: column; gap: 9px; }
.pack li { font-size: 14px; display: flex; gap: 9px; }
.tick { color: var(--teal-ink); }

.faq-item { border-top: 1px solid var(--line); }
.faq-item button {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  background: transparent; border: 0; cursor: pointer; padding: 17px 0;
  font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
}
.faq-item .sign { font-family: "JetBrains Mono", monospace; font-size: 17px; color: var(--teal-ink); }
.faq-item p { font-size: 15px; line-height: 1.65; color: var(--text); padding: 0 0 18px; max-width: 64ch; display: none; }
.faq-item.is-open p { display: block; }

.cta-band { background: var(--navy); border-radius: 20px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; align-items: center; }
.cta-band h2 { color: #fff; margin: 0; }
.cta-band p { color: #A9B7C1; margin: 14px 0 0; }

.site-footer { background: var(--navy); color: #9FB0BC; }
.site-footer .wrap { padding: 48px 24px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; }
.logo-on-dark { display: inline-flex; }
.logo-on-dark img { height: 32px; width: auto; }
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-links strong { color: #fff; font-size: 12.5px; }
.foot-links a { color: #9FB0BC; font-size: 13.5px; }
.foot-links a:hover { color: #fff; }
.legal-bar { border-top: 1px solid #1A3247; }
.legal-bar .wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 18px 24px 34px; font-size: 12.5px; }
.legal-bar .end { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.legal-bar a { color: #9FB0BC; }
.legal-bar a:hover { color: #fff; }

.page-hero { background: #fff; border-bottom: 1px solid var(--line); }
.page-hero .wrap { padding: clamp(44px, 6vw, 80px) 24px; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 16px; }
label { font-size: 12.5px; font-weight: 700; display: block; margin-bottom: 6px; }
.input, textarea, select {
  width: 100%; border: 1px solid var(--line-2); border-radius: 9px; padding: 12px 14px;
  font-size: 14.5px; outline: none; background: #fff; color: var(--ink);
}
.input:focus, textarea:focus, select:focus { border-color: var(--teal-deep); }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.alert { border-radius: 10px; padding: 11px 13px; font-size: 13.5px; }
.alert-error { background: #FBEDEA; border: 1px solid #F0CFC8; color: #8C2F1E; }
.alert-ok { background: var(--ok-bg); color: var(--ok); }
.alert-warn { background: var(--warn-bg); border: 1px solid #F0DFC2; color: #6E4A16; }
.steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.step-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; border: 1px solid var(--line-2); }
.step-num.is-on { background: var(--teal-deep); color: #fff; border-color: var(--teal-deep); }
.region-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.region-btn, .choice {
  text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 11px 13px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink);
}
.region-btn.is-on, .choice.is-on { background: var(--mint-2); border-color: var(--teal-deep); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--teal-deep); }
.dot-soon { background: var(--warn); }
.dot-wait { background: #A2AEB6; }

.auth-grid { min-height: 100vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.auth-form { display: flex; flex-direction: column; padding: clamp(20px, 3vw, 32px); }
.auth-form .center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.auth-aside { background: var(--navy); color: #E9EFF2; padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.auth-aside h2 { color: #fff; margin: 0; max-width: 20ch; }

.app { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(180deg, #FBFDFD 0%, #F1F6F7 100%); }
.app-side {
  background: linear-gradient(180deg, #fff 0%, #F4F9F9 100%);
  border-right: 1px solid #E4EBEC; padding: 18px 12px;
  display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; height: 100vh;
}
.app-nav { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 10px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 600; background: transparent; color: var(--text); text-decoration: none; }
a.app-nav { color: var(--text); }
a.app-nav:hover { color: var(--ink); background: #EBF1F2; }
.app-nav.is-on { background: var(--mint); color: var(--ink); }
a.app-nav.is-on:hover { background: var(--mint); color: var(--ink); }
.app-credits { margin-top: 20px; background: linear-gradient(165deg, var(--mint-2) 0%, #fff 100%); border: 1px solid #CCEAE5; border-radius: 14px; padding: 15px; }
.app-main { min-width: 0; }
.app-top { display: flex; align-items: center; gap: 14px; padding: 0 28px; min-height: 62px; background: #fff; border-bottom: 1px solid #E4EBEC; position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.app-body { padding: 24px 28px 56px; display: flex; flex-direction: column; gap: 20px; }
.view { display: none; }
.view.is-on { display: flex; flex-direction: column; gap: 20px; }
.bar { height: 5px; border-radius: 3px; background: #DCEDEA; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--teal-deep); }
.table { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.t-head, .t-row { display: grid; grid-template-columns: 38px minmax(0, 2.4fr) minmax(0, 1.5fr) 62px 104px; gap: 12px; padding: 14px 20px; align-items: center; }
.t-head { background: #F7FAFA; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.t-row { border-bottom: 1px solid #F1F4F6; }
.lock { filter: blur(5px); user-select: none; }
.donut-wrap { position: relative; width: 172px; height: 172px; }
.donut-center {
  position: absolute; inset: 16px; border-radius: 50%; background: #FBFDFD;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 10px rgba(21,45,71,0.06);
}
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; align-items: start; }
.col { background: #E7EDF0; border: 1px solid var(--line); border-radius: 16px; padding: 13px; min-height: 180px; display: flex; flex-direction: column; gap: 10px; }
.signal { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px; min-height: 98px; }
.signal.is-hot { border-color: #BFE6DF; background: #F4FBFA; }
.fiche-block { display: flex; flex-direction: column; gap: 12px; }
.proof-list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.proof-list li { font-size: 14px; line-height: 1.45; color: #152D47; }
.sticky-bar {
  position: sticky; bottom: 16px; z-index: 15;
  background: linear-gradient(165deg, #fff 0%, #F4FCFB 100%);
  border: 1px solid #CCEAE5; border-radius: 14px; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  box-shadow: 0 26px 50px -32px rgba(21,45,71,0.5);
}
.modal { position: fixed; inset: 0; background: rgba(21,45,71,0.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 24px; }
.modal.is-on { display: flex; }
.modal-card { background: #fff; border-radius: 18px; padding: 24px; max-width: 460px; width: 100%; }

.install { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.install-card { width: min(640px, 100%); }

.api-page { min-height: 100vh; background: linear-gradient(180deg, #FBFDFD 0%, var(--bg) 120px); }
.api-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  min-height: 62px; padding: 0 24px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.api-top strong { font-size: 14px; letter-spacing: -0.02em; }
.api-shell {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px; max-width: 1180px; margin: 0 auto; padding: 28px 24px 80px;
}
.api-toc { position: sticky; top: 78px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.api-toc a {
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 8px 10px; border-radius: 8px;
}
.api-toc a:hover, .api-toc a:focus-visible { background: #EBF1F2; color: var(--ink); }
.api-main { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.api-main > section, .api-endpoint, .api-hero { scroll-margin-top: 96px; }
.api-hero h1 { font-size: clamp(28px, 3.4vw, 42px); margin: 8px 0 0; }
.api-steps { display: grid; gap: 10px; }
.api-step {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
}
.api-step b { font-size: 15px; letter-spacing: -0.02em; }
.api-step p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.api-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mint); color: var(--teal-ink); font-size: 12.5px; font-weight: 800;
}
.api-endpoint { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.api-endpoint-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--line); background: #FAFCFC;
}
.api-verb {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 6px; padding: 4px 8px;
}
.api-verb-get { background: var(--ok-bg); color: var(--ok); }
.api-verb-post { background: var(--mint); color: var(--teal-dark); }
.api-path { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--ink); word-break: break-all; }
.api-endpoint-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.api-code {
  position: relative; background: var(--navy); color: #D7E4EA;
  border-radius: 12px; padding: 16px 18px; overflow: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.api-copy {
  position: absolute; top: 8px; right: 8px;
  background: #1B364F; color: #9FB0BC; border: 1px solid #2C4A63;
  border-radius: 7px; padding: 5px 9px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.api-copy:hover { color: #fff; border-color: #6FE3D2; }
.api-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.api-row, .api-head {
  display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(90px, 0.55fr) minmax(0, 1.8fr);
  gap: 12px; padding: 11px 14px; align-items: start;
}
.api-head {
  background: #F7FAFA; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.api-row { border-top: 1px solid #F1F4F6; font-size: 13.5px; }
.api-row .mono { font-size: 12.5px; }
.api-badge {
  display: inline-flex; align-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; border-radius: 999px; padding: 2px 8px;
  background: #EDF1F3; color: var(--muted);
}
.api-badge.is-req { background: var(--mint); color: var(--teal-dark); }
.api-badge.is-hot { background: var(--warn-bg); color: #6E4A16; }
.api-field {
  padding: 16px 0; border-top: 1px solid #F1F4F6;
  display: flex; flex-direction: column; gap: 6px;
}
.api-field[hidden] { display: none; }
.api-field:first-child { border-top: 0; }
.api-field-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.api-group { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px 18px 10px; }
.api-group[hidden] { display: none; }
.api-group > summary {
  cursor: pointer; list-style: none; padding: 14px 0;
  font-weight: 800; letter-spacing: -0.02em; font-size: 17px;
}
.api-group > summary::-webkit-details-marker { display: none; }
.api-group > summary::after { content: "+"; float: right; color: var(--teal-ink); font-family: "JetBrains Mono", ui-monospace, monospace; }
.api-group[open] > summary::after { content: "−"; }
.api-hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }
.api-rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.api-rules li {
  font-size: 14px; line-height: 1.5; color: var(--text);
  padding-left: 18px; position: relative;
}
.api-rules li::before { content: "→"; position: absolute; left: 0; color: var(--teal-ink); font-weight: 700; }
.api-console-bar {
  position: sticky; bottom: 16px; z-index: 15;
  background: linear-gradient(165deg, #fff 0%, #F4FCFB 100%);
  border: 1px solid #CCEAE5; border-radius: 14px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 26px 50px -32px rgba(21,45,71,0.5);
}
.api-metiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.api-company {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
.api-kv { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.api-kv span { display: block; font-size: 11px; color: var(--muted); }
.api-kv b { font-size: 13.5px; word-break: break-word; }
.api-search { max-width: 360px; }

.admin-brand {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-ink); padding: 0 11px 12px;
}
.admin-hero {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.admin-hero h1 {
  letter-spacing: -0.035em;
  overflow-wrap: normal;
  word-break: normal;
  max-width: none;
}
.admin-pills .chip { cursor: default; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.admin-stat { gap: 4px; }
.admin-stat strong { font-size: 26px; letter-spacing: -0.04em; }
.admin-stat span { font-size: 13.5px; font-weight: 600; }
.admin-module { color: inherit; }
.admin-module:hover { color: inherit; border-color: #BFE6DF; background: #F7FCFB; }
.admin-module-meta { font-size: 12.5px; color: var(--muted); }
.admin-tabs { display: flex; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; width: fit-content; }
.admin-tab {
  border: 0; background: transparent; cursor: pointer; font-weight: 700; font-size: 13.5px;
  color: var(--muted); padding: 8px 14px; border-radius: 9px;
}
.admin-tab.is-on { background: var(--mint); color: var(--ink); }
.admin-tab-panel { display: none; }
.admin-tab-panel.is-on { display: flex; flex-direction: column; gap: 16px; }
.env-form { display: flex; flex-direction: column; gap: 16px; padding-bottom: 12px; }
.env-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 18px; }
.env-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.env-field-head label { margin: 0; }
.env-field-head code { font-size: 11px; color: var(--muted); }
.env-help { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.env-secret { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.env-extra-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.env-extra { display: flex; flex-direction: column; gap: 8px; }
.env-extra-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) 42px; gap: 8px; align-items: center; }
.env-raw { min-height: 420px; font-size: 12.5px; line-height: 1.6; }
.env-force { display: flex; gap: 9px; align-items: center; font-size: 13.5px; color: var(--text); font-weight: 500; }
.env-force input { accent-color: #0F8577; width: 16px; height: 16px; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .app-side { position: relative; height: auto; width: 100%; }
  .t-head, .t-row { grid-template-columns: 28px minmax(0, 1fr) 54px; }
  .t-row .hide-sm, .t-head .hide-sm { display: none; }
  .mega-grid, .mega-cols { grid-template-columns: 1fr; }
  .mega-cols { grid-column: auto; }
  .api-shell { grid-template-columns: 1fr; }
  .api-toc { position: relative; top: 0; flex-direction: row; flex-wrap: wrap; }
  .api-row, .api-head { grid-template-columns: 1fr; gap: 4px; }
  .env-extra-row, .env-secret { grid-template-columns: 1fr; }
  .admin-tabs { width: 100%; }
}