.theme-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--accent);
}
body,
.nav,
.operations,
.product-showcase,
.contact,
.security,
footer,
.module,
.addon-card,
.price-card,
.addon-pricing,
.addon-price-item,
.contact-form,
.contact-form input,
.contact-form select,
.contact-form textarea,
.role-output {
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease;
}
html[data-theme="dark"] {
  --bg: #18202b;
  --surface: #202b38;
  --surface-2: #293746;
  --text: #f4f7fa;
  --muted: #aeb9c7;
  --line: #344353;
  --primary: #7db8c0;
  --accent: #92c9bf;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}
html[data-theme="dark"] .nav {
  background: rgba(24, 32, 43, 0.9);
}
html[data-theme="dark"] .brand-mark {
  background: transparent;
}
html[data-theme="dark"] .brand-mark img {
  filter: none !important;
}
html[data-theme="dark"] .nav-links .nav-cta,
html[data-theme="dark"] .button.primary {
  background: #e9f0f4;
  color: #18202b;
  border-color: #e9f0f4;
}
html[data-theme="dark"] .hero {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(126, 184, 192, 0.13),
      transparent 30%
    ),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size:
    auto,
    56px 56px,
    56px 56px;
}
html[data-theme="dark"] .hero h1 strong {
  color: #a5d4d9;
}
html[data-theme="dark"] .product-hero,
html[data-theme="dark"] .ui-window,
html[data-theme="dark"] .showcase-image {
  background: linear-gradient(145deg, #222f3e, #17212c);
}
html[data-theme="dark"] .visual-badge,
html[data-theme="dark"] .visual-stat {
  background: rgba(32, 43, 56, 0.94);
  border-color: #425366;
}
html[data-theme="dark"] .visual-badge b,
html[data-theme="dark"] .visual-stat b {
  color: #f4f7fa;
}
html[data-theme="dark"] .visual-badge small,
html[data-theme="dark"] .visual-stat small {
  color: #aeb9c7;
}
html[data-theme="dark"] .module.large {
  background: linear-gradient(150deg, #315b70, #397983);
}
html[data-theme="dark"] .addon-card > span {
  background: #304b49;
  color: #b7ded8;
}
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .addon-pricing {
  box-shadow: none;
}
html[data-theme="dark"] .price-kind {
  color: #b7ded8;
}
html[data-theme="dark"] .security {
  background: #1d2935;
}
html[data-theme="dark"] .security-points i {
  background: #2a3947;
}
html[data-theme="dark"] footer {
  background: #141b24;
}
@media (max-width: 900px) {
  .theme-toggle {
    width: 100%;
    height: 44px;
  }
}