:root {
  --theme-toggle-size: 48px;
  --theme-toggle-bg: rgba(255, 255, 255, 0.94);
  --theme-toggle-border: rgba(24, 60, 39, 0.16);
  --theme-toggle-color: #1d3025;
  --theme-toggle-shadow: 0 14px 40px rgba(31, 77, 49, 0.16);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-deep: #f7faf8;
  --bg-soft: #eef6f1;
  --surface: #ffffff;
  --surface-2: #f2f8f4;
  --surface-3: #e6f2ea;
  --surface-glass: rgba(255, 255, 255, 0.88);
  --line: rgba(30, 71, 46, 0.13);
  --line-strong: rgba(45, 170, 102, 0.32);
  --text: #17251c;
  --muted: #607066;
  --muted-2: #68786e;
  --green: #2daa66;
  --green-bright: #35b96f;
  --green-deep: #21854e;
  --green-dark: #23864f;
  --shadow: 0 24px 70px rgba(32, 82, 52, 0.13);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050d09;
  --bg-deep: #020805;
  --bg-soft: #0a1510;
  --surface: #0b1711;
  --surface-2: #101f17;
  --surface-3: #17291f;
  --surface-glass: rgba(10, 24, 17, 0.82);
  --line: rgba(184, 255, 216, 0.12);
  --line-strong: rgba(92, 239, 158, 0.34);
  --text: #f3faf6;
  --muted: #9db0a4;
  --muted-2: #7f9186;
  --green: #31d77b;
  --green-bright: #72f2ad;
  --green-deep: #2bd173;
  --green-dark: #57e394;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  --theme-toggle-bg: rgba(14, 29, 20, 0.94);
  --theme-toggle-border: rgba(114, 242, 173, 0.23);
  --theme-toggle-color: #edf8f1;
  --theme-toggle-shadow: 0 16px 46px rgba(0, 0, 0, 0.42);
}

html,
body,
.site-header,
.site-footer,
.page-hero,
.section,
.section-soft,
.value-card,
.feature-card,
.stat-card,
.integration-card,
.resource-card,
.faq-item,
.theme-toggle {
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.theme-toggle {
  position: fixed;
  z-index: 160;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex;
  min-width: var(--theme-toggle-size);
  height: var(--theme-toggle-size);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid var(--theme-toggle-border);
  border-radius: 999px;
  background: var(--theme-toggle-bg);
  color: var(--theme-toggle-color);
  box-shadow: var(--theme-toggle-shadow);
  font: 800 12px/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.theme-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 42%, transparent);
  outline-offset: 3px;
}

.theme-toggle-icon,
.theme-toggle svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.theme-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon-sun,
html[data-theme="dark"] .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-icon-sun {
  display: block;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 50% -10%, rgba(49, 215, 123, 0.13), transparent 32rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

html[data-theme="dark"] ::selection {
  background: rgba(49, 215, 123, 0.32);
  color: #fff;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-header.is-scrolled {
  border-color: var(--line);
  background: rgba(5, 13, 9, 0.9);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .brand img,
html[data-theme="dark"] .brand-logo-image {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 28px rgba(49, 215, 123, 0.13);
}

html[data-theme="dark"] .brand-copy span,
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .eyebrow {
  color: var(--green-bright);
}

html[data-theme="dark"] .desktop-nav a,
html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .button-ghost {
  color: var(--muted);
}

html[data-theme="dark"] .desktop-nav a:hover,
html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a[aria-current="page"] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .button-primary {
  color: #04120a;
  background: linear-gradient(135deg, var(--green-bright), var(--green));
  box-shadow: 0 15px 36px rgba(49, 215, 123, 0.22);
}

html[data-theme="dark"] .button-primary:hover {
  background: linear-gradient(135deg, #8af6ba, #42dd87);
  box-shadow: 0 18px 44px rgba(49, 215, 123, 0.3);
}

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .button-ghost {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
}

html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .button-ghost:hover {
  border-color: var(--line-strong);
  background: rgba(49, 215, 123, 0.07);
}

html[data-theme="dark"] .mobile-menu summary span {
  background: #c2d0c7;
}

html[data-theme="dark"] .mobile-menu nav,
html[data-theme="dark"] .main-nav.is-open {
  border-color: var(--line);
  background: rgba(5, 13, 9, 0.98);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .mobile-menu nav a {
  color: var(--muted);
}

html[data-theme="dark"] .mobile-menu nav a:hover {
  color: var(--text);
  background: rgba(49, 215, 123, 0.08);
}

html[data-theme="dark"] .announcement {
  border-color: rgba(114, 242, 173, 0.1);
  background: rgba(49, 215, 123, 0.06);
}

html[data-theme="dark"] .announcement .container {
  color: #c9f8dd;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-hero {
  border-color: var(--line);
  background: linear-gradient(145deg, #050d09 0%, #08150e 58%, #0c2116 100%);
}

html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .page-hero h1,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .split-copy h2,
html[data-theme="dark"] .resource-header h2,
html[data-theme="dark"] .cta-panel h2 {
  color: var(--text);
}

html[data-theme="dark"] .hero-copy > p,
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .page-lead,
html[data-theme="dark"] .page-hero-inner > p:not(.eyebrow, .legal-date) {
  color: var(--muted);
}

html[data-theme="dark"] .eyebrow {
  border-color: var(--line-strong);
  background: rgba(49, 215, 123, 0.07);
}

html[data-theme="dark"] .browser-frame,
html[data-theme="dark"] .real-product-shot {
  border-color: rgba(114, 242, 173, 0.22);
  background: #111b16;
  box-shadow: 0 48px 130px rgba(0, 0, 0, 0.62), 0 0 80px rgba(49, 215, 123, 0.07);
}

html[data-theme="dark"] .browser-bar,
html[data-theme="dark"] .real-shot-bar {
  border-color: rgba(255, 255, 255, 0.06);
  background: #0c1510;
  color: #748179;
}

html[data-theme="dark"] .floating-proof,
html[data-theme="dark"] .floating-card {
  border-color: var(--line);
  background: rgba(9, 22, 15, 0.92);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .floating-card > span,
html[data-theme="dark"] .floating-proof .proof-icon {
  color: var(--green-bright);
  background: rgba(49, 215, 123, 0.11);
}

html[data-theme="dark"] .floating-card small {
  color: var(--muted);
}

html[data-theme="dark"] .trust-strip {
  border-color: var(--line);
  background: transparent;
}

html[data-theme="dark"] .trust-strip .shell {
  color: var(--muted);
}

html[data-theme="dark"] .section-soft,
html[data-theme="dark"] .outcomes-section,
html[data-theme="dark"] .workflow-section,
html[data-theme="dark"] .pricing-section,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .values-section,
html[data-theme="dark"] .feature-deep,
html[data-theme="dark"] .resource-integrations,
html[data-theme="dark"] .comparison-section,
html[data-theme="dark"] .security-architecture,
html[data-theme="dark"] .compliance-section,
html[data-theme="dark"] .access-help,
html[data-theme="dark"] .support-options {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(16, 31, 23, 0.62), rgba(5, 13, 9, 0.18));
}

html[data-theme="dark"] .features-section,
html[data-theme="dark"] .dashboard-section,
html[data-theme="dark"] .security-home,
html[data-theme="dark"] .origin-section,
html[data-theme="dark"] .story-section,
html[data-theme="dark"] .mission-section,
html[data-theme="dark"] .company-facts,
html[data-theme="dark"] .resource-groups,
html[data-theme="dark"] .pricing-page-section,
html[data-theme="dark"] .getting-started,
html[data-theme="dark"] .product-gallery-section,
html[data-theme="dark"] .cta-section {
  background: var(--bg);
}

html[data-theme="dark"] .value-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .integration-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .outcome-grid article,
html[data-theme="dark"] .values-grid article,
html[data-theme="dark"] .steps-grid article,
html[data-theme="dark"] .support-grid a,
html[data-theme="dark"] .resource-item-grid > div,
html[data-theme="dark"] .included-grid > div,
html[data-theme="dark"] .commercial-rules article,
html[data-theme="dark"] .policy-links a,
html[data-theme="dark"] .architecture-flow > div,
html[data-theme="dark"] .integration-flow > div,
html[data-theme="dark"] .legal-document aside,
html[data-theme="dark"] .product-gallery-card {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(18, 35, 26, 0.84), rgba(8, 20, 13, 0.92));
  color: var(--text);
  box-shadow: none;
}

html[data-theme="dark"] .feature-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .steps-grid span,
html[data-theme="dark"] .support-grid a > span,
html[data-theme="dark"] .architecture-flow > div span,
html[data-theme="dark"] .step-number,
html[data-theme="dark"] .security-icon {
  color: var(--green-bright);
  background: rgba(49, 215, 123, 0.11);
}

html[data-theme="dark"] .check-list li,
html[data-theme="dark"] .plan-includes li,
html[data-theme="dark"] .security-card li,
html[data-theme="dark"] .resource-item-grid > div,
html[data-theme="dark"] .included-grid > div {
  color: #dfe9e3;
}

html[data-theme="dark"] .media-card {
  border-color: var(--line);
  background: #101b16;
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .media-card.pad {
  background: linear-gradient(145deg, #101d16, #07110b);
}

html[data-theme="dark"] .media-label {
  border-color: var(--line);
  background: rgba(5, 13, 9, 0.84);
  color: #dbe9e0;
}

html[data-theme="dark"] .dashboard-shell {
  border-color: var(--line-strong);
  background: linear-gradient(145deg, rgba(17, 34, 25, 0.96), rgba(4, 12, 8, 0.98));
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.58), 0 0 100px rgba(49, 215, 123, 0.06);
}

html[data-theme="dark"] .tab-button[aria-selected="true"] {
  border-color: var(--line-strong);
  background: rgba(49, 215, 123, 0.1);
  color: #d7fce7;
}

html[data-theme="dark"] .tab-panel {
  background: #101814;
}

html[data-theme="dark"] .format-badge {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: #dbe7df;
}

html[data-theme="dark"] .security-panel,
html[data-theme="dark"] .security-card,
html[data-theme="dark"] .origin-card,
html[data-theme="dark"] .story-visual,
html[data-theme="dark"] .read-only-card,
html[data-theme="dark"] .mission-card {
  border-color: var(--line-strong);
  background: radial-gradient(circle at 85% 10%, rgba(49, 215, 123, 0.1), transparent 22rem), linear-gradient(145deg, #112319, #06100a);
  color: var(--text);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .story-visual--developer > strong,
html[data-theme="dark"] .mission-card blockquote,
html[data-theme="dark"] .security-card h2,
html[data-theme="dark"] .faq-list summary,
html[data-theme="dark"] .product-gallery-card h3 {
  color: var(--text);
}

html[data-theme="dark"] .security-item,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .faq-list details {
  border-color: var(--line);
  background: rgba(16, 31, 23, 0.62);
  box-shadow: none;
}

html[data-theme="dark"] .pricing-calculator {
  border-color: var(--line-strong);
  background: #101e16;
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .pricing-main {
  border-color: var(--line);
  background: linear-gradient(145deg, #13271c, #0b1710);
}

html[data-theme="dark"] .cycle-switch {
  border-color: var(--line);
  background: #0b1710;
}

html[data-theme="dark"] .cycle-switch button {
  color: var(--muted);
}

html[data-theme="dark"] .cycle-switch button.active {
  color: #04120a;
  background: var(--green-bright);
}

html[data-theme="dark"] .stepper,
html[data-theme="dark"] .stepper button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] .legal-copy > p:first-child {
  color: #c6d2cb;
  background: rgba(49, 215, 123, 0.06);
}

html[data-theme="dark"] .legal-copy a,
html[data-theme="dark"] .faq-contact a,
html[data-theme="dark"] .center-link a {
  color: var(--green-bright);
}

html[data-theme="dark"] .product-gallery-card p,
html[data-theme="dark"] .origin-developer p,
html[data-theme="dark"] .story-visual--developer > p {
  color: var(--muted);
}

html[data-theme="dark"] .product-gallery-card img {
  border-color: var(--line);
  background: #101814;
}

html[data-theme="dark"] .cta-panel {
  border-color: var(--line-strong);
  background: radial-gradient(circle at 80% 20%, rgba(114, 242, 173, 0.16), transparent 22rem), linear-gradient(135deg, #122b1d, #07110b 70%);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.44);
}

html[data-theme="dark"] .site-footer {
  border-color: var(--line);
  background: #030906;
}

html[data-theme="dark"] .footer-column h2,
html[data-theme="dark"] .footer-grid > div > strong,
html[data-theme="dark"] .developer-signature strong {
  color: #dce8e1;
}

html[data-theme="dark"] .footer-brand p,
html[data-theme="dark"] .footer-cta p,
html[data-theme="dark"] .footer-grid > div > a:not(.button),
html[data-theme="dark"] .developer-signature span {
  color: var(--muted);
}

html[data-theme="dark"] .developer-signature {
  border-color: var(--line);
  background: var(--surface);
}

html[data-theme="dark"] .page-nav {
  border-color: var(--line);
  background: rgba(8, 19, 13, 0.92);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .lightbox {
  border-color: var(--line-strong);
  background: #07110b;
  color: var(--text);
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.8);
}

html[data-theme="dark"] .lightbox-close {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

@media (max-width: 640px) {
  :root {
    --theme-toggle-size: 46px;
  }

  .theme-toggle {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: var(--theme-toggle-size);
    min-width: var(--theme-toggle-size);
    padding: 0;
  }

  .theme-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .site-header,
  .site-footer,
  .page-hero,
  .section,
  .theme-toggle {
    transition: none !important;
  }
}