html[data-theme="dark"]{
  --bg:        oklch(16% 0.020 240);
  --surface:   oklch(20% 0.026 238);
  --surface-2: oklch(25% 0.030 236);
  --ink:       oklch(95% 0.012 220);
  --ink-soft:  oklch(86% 0.018 222);
  --muted:     oklch(71% 0.022 224);
  --line:      oklch(100% 0 0 / .11);
  --line-2:    oklch(100% 0 0 / .20);
  --brand:     oklch(70% 0.135 192);
  --brand-700: oklch(80% 0.12 190);
  --brand-900: oklch(17% 0.03 222);
  --accent:    oklch(77% 0.155 56);
  --accent-700:oklch(83% 0.13 60);
  --on-brand:  oklch(15% 0.02 240);
  --ink-bg:    oklch(13% 0.018 240);
  --ink-bg-2:  oklch(19% 0.026 238);
  --on-ink:    oklch(96% 0.012 210);
  --on-ink-soft: oklch(80% 0.02 216);
  --shadow-1:0 1px 2px oklch(0% 0 0 / .35), 0 14px 32px -18px oklch(0% 0 0 / .65);
  --shadow-2:0 2px 10px oklch(0% 0 0 / .4), 0 34px 64px -28px oklch(0% 0 0 / .75);
  background:oklch(12% 0.018 242);
}
html[data-theme="dark"] body{background:transparent}

#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
html[data-theme="light"] #bg3d{display:none}

html[data-theme="dark"] .hero::after{display:none}
html[data-theme="dark"] .hero::before{display:block;background:linear-gradient(90deg,oklch(11% 0.018 242 / .86),oklch(11% 0.018 242 / .32) 52%,transparent 82%)}
html[data-theme="dark"] .hero{border-bottom-color:var(--line)}

html[data-theme="dark"] .site-header{background:oklch(13% 0.018 240 / .72);border-bottom-color:var(--line)}
html[data-theme="dark"] .lang button[aria-pressed="true"]{background:var(--brand);color:oklch(14% 0.02 240)}

html[data-theme="dark"] .cta{background:oklch(13% 0.02 240 / .66)}
html[data-theme="dark"] .cta::before{opacity:.7}

html[data-theme="dark"] .plan{background:oklch(19% 0.024 238 / .7)}
html[data-theme="dark"] .plan.featured{background:oklch(24% 0.05 200);border:1px solid var(--brand)}
html[data-theme="dark"] .btn-on-ink{background:var(--brand);color:oklch(14% 0.02 240)}
html[data-theme="dark"] .btn-on-ink:hover{background:var(--brand-700)}

html[data-theme="dark"] .badge-flag,
html[data-theme="dark"] .plan .flag{color:oklch(15% 0.02 240)}

html[data-theme="dark"] .row.signature{background:linear-gradient(100deg,oklch(26% 0.05 202),oklch(31% 0.06 196));border:1px solid var(--line-2)}

html[data-theme="dark"] .specimen{background:oklch(20% 0.026 238 / .82)}
html[data-theme="dark"] .fin-note{background:oklch(20% 0.026 238 / .7)}
html[data-theme="dark"] .strip{background:oklch(12% 0.018 240 / .9)}
html[data-theme="dark"] .marquee{background:oklch(15% 0.02 240 / .85)}
html[data-theme="dark"] .form input,
html[data-theme="dark"] .form select{background:oklch(96% 0.01 220);color:oklch(20% 0.03 240)}

.theme-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;
  transition:border-color .2s,transform .2s var(--ease),background .2s}
.theme-btn:hover{border-color:var(--brand);transform:translateY(-2px)}
.theme-btn .sun{display:none}
html[data-theme="dark"] .theme-btn .sun{display:block}
html[data-theme="dark"] .theme-btn .moon{display:none}

html[data-theme="dark"] .section{background:oklch(15% 0.02 240 / .88)}
html[data-theme="dark"] #dev,
html[data-theme="dark"] #financement,
html[data-theme="dark"] #faq{background:oklch(19% 0.024 238 / .9) !important}
html[data-theme="dark"] .section.cta{background:oklch(12% 0.02 240 / .58)}

@media (prefers-reduced-motion: reduce){
  #bg3d{opacity:.9}
}