/* =========================================================
   SECURETECH — DARK MODE STYLES
   All html[data-theme="dark"] rules for every page.
   Loaded after style.css.
   ========================================================= */


/* =========================================================
   SHARED STYLES (used by several pages)
   ========================================================= */


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]:where(:not([data-page="login"])) body {
  background: var(--dark-bg);

  color: var(--dark-text);
}

html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .site-header {
  background: rgba(11, 18, 32, 0.96);

  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .site-header.scrolled {
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);
}
/* =========================================================
   CONTACT PAGE (contact.html)
   ========================================================= */


html[data-theme="dark"]:where([data-page="contact"]) .site-header {
  background: rgba(11, 18, 32, 0.96);

  border-bottom-color: var(--dark-border);
}

html[data-theme="dark"]:where([data-page="contact"]) .site-header.scrolled {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
/* =========================================================
   SHARED STYLES (used by several pages)
   ========================================================= */


html[data-theme="dark"] .brand {
  color: var(--dark-text);
}

html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .brand-tagline {
  color: var(--dark-secondary);
}
/* =========================================================
   CONTACT PAGE (contact.html)
   ========================================================= */


html[data-theme="dark"]:where([data-page="contact"]) .brand-tagline {
  color: var(--dark-muted);
}
/* =========================================================
   SHARED STYLES (used by several pages)
   ========================================================= */


html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-dropdown-button {
  color: var(--dark-secondary);
}

html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="products"], [data-page="login"])) .nav-link:hover,
html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="products"], [data-page="login"])) .nav-dropdown-button:hover,
html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="products"], [data-page="login"])) .nav-link.active,
html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="products"], [data-page="login"])) .nav-dropdown-button.active-dropdown {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}
/* =========================================================
   CONTACT PAGE (contact.html)
   ========================================================= */


html[data-theme="dark"]:where([data-page="contact"]) .nav-link:hover,
html[data-theme="dark"]:where([data-page="contact"]) .nav-dropdown-button:hover,
html[data-theme="dark"]:where([data-page="contact"]) .nav-link.active,
html[data-theme="dark"]:where([data-page="contact"]) .nav-dropdown-button.active {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}

html[data-theme="dark"]:where([data-page="contact"]) .icon-button {
  color: var(--dark-secondary);

  border-color: var(--dark-border);
}

html[data-theme="dark"]:where([data-page="contact"]) .icon-button:hover {
  color: var(--secure-sky);

  border-color: rgba(79, 195, 247, 0.3);

  background: rgba(79, 195, 247, 0.1);
}

html[data-theme="dark"]:where([data-page="contact"]) .dropdown {
  background: var(--dark-surface);

  border-color: var(--dark-border);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}
/* =========================================================
   PRODUCTS PAGE (products.html)
   ========================================================= */


html[data-theme="dark"]:where([data-page="products"]) .nav-link:hover,
html[data-theme="dark"]:where([data-page="products"]) .nav-dropdown-button:hover {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}

/* PRODUCTS ACTIVE */

html[data-theme="dark"]:where([data-page="products"]) .nav-link.active {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}

html[data-theme="dark"]:where([data-page="products"]) .nav-link.active::after {
  background: var(--secure-sky);
}

/* HOME */

html[data-theme="dark"]:where([data-page="products"]) .nav-dropdown-button.active-dropdown {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}
/* =========================================================
   SHARED STYLES (used by several pages)
   ========================================================= */


html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .icon-button {
  color: var(--dark-secondary);

  border-color: rgba(255, 255, 255, 0.1);
}

/* =========================================================
   DARK DESKTOP DROPDOWN
========================================================= */

html[data-theme="dark"]:where(:not([data-page="index"], [data-page="contact"], [data-page="login"])) .dropdown {
  background: var(--dark-surface);

  border-color: rgba(255, 255, 255, 0.1);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}
/* =========================================================
   HOME PAGE (index.html)
   ========================================================= */


/* =========================================================
   DARK DESKTOP DROPDOWN
========================================================= */

html[data-theme="dark"]:where([data-page="index"]) .dropdown {
  background: #111c2e;

  border-color: rgba(255, 255, 255, 0.1);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}
/* =========================================================
   SHARED STYLES (used by several pages)
   ========================================================= */


html[data-theme="dark"] .dropdown-link {
  color: var(--dark-text);
}

html[data-theme="dark"]:where(:not([data-page="index"], [data-page="contact"], [data-page="login"])) .dropdown-link:hover,
html[data-theme="dark"]:where(:not([data-page="index"], [data-page="contact"], [data-page="login"])) .dropdown-link:focus-visible,
html[data-theme="dark"]:where(:not([data-page="index"], [data-page="contact"], [data-page="login"])) .dropdown-link.active {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.12);
}
/* =========================================================
   HOME PAGE (index.html)
   ========================================================= */


html[data-theme="dark"]:where([data-page="index"]) .dropdown-link:hover,
html[data-theme="dark"]:where([data-page="index"]) .dropdown-link:focus-visible {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.12);
}
/* =========================================================
   SHARED STYLES (used by several pages)
   ========================================================= */


/* =========================================================
   DARK MOBILE NAV
========================================================= */

html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .mobile-navigation {
  background: var(--dark-bg);

  border-top-color: rgba(255, 255, 255, 0.08);
}
/* =========================================================
   CONTACT PAGE (contact.html)
   ========================================================= */


html[data-theme="dark"]:where([data-page="contact"]) .dropdown-link:hover,
html[data-theme="dark"]:where([data-page="contact"]) .dropdown-link:focus-visible,
html[data-theme="dark"]:where([data-page="contact"]) .dropdown-link.active {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}

html[data-theme="dark"]:where([data-page="contact"]) .mobile-navigation {
  background: var(--dark-bg);

  border-top-color: var(--dark-border);
}
/* =========================================================
   SHARED STYLES (used by several pages)
   ========================================================= */


html[data-theme="dark"] .mobile-menu-link,
html[data-theme="dark"] .mobile-home-button {
  color: var(--dark-secondary);
}

html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="products"], [data-page="login"])) .mobile-menu-link:hover,
html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="products"], [data-page="login"])) .mobile-menu-link.active,
html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="products"], [data-page="login"])) .mobile-home-button:hover,
html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="products"], [data-page="login"])) .mobile-home-button.active-mobile {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}
/* =========================================================
   CONTACT PAGE (contact.html)
   ========================================================= */


html[data-theme="dark"]:where([data-page="contact"]) .mobile-menu-link:hover,
html[data-theme="dark"]:where([data-page="contact"]) .mobile-home-button:hover,
html[data-theme="dark"]:where([data-page="contact"]) .mobile-menu-link.active,
html[data-theme="dark"]:where([data-page="contact"]) .mobile-home-button.active-mobile {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}

html[data-theme="dark"]:where([data-page="contact"]) .mobile-submenu {
  background: var(--dark-surface);

  border-color: var(--dark-border);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* =========================================================
   PRODUCTS PAGE (products.html)
   ========================================================= */


html[data-theme="dark"]:where([data-page="products"]) .mobile-menu-link:hover,
html[data-theme="dark"]:where([data-page="products"]) .mobile-home-button:hover {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}

/* MOBILE PRODUCTS ACTIVE */

html[data-theme="dark"]:where([data-page="products"]) .mobile-menu-link.active {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}

html[data-theme="dark"]:where([data-page="products"]) .mobile-menu-link.active::before {
  background: var(--secure-sky);
}
/* =========================================================
   SHARED STYLES (used by several pages)
   ========================================================= */


html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .mobile-submenu {
  background: var(--dark-surface);

  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .mobile-submenu-link {
  color: var(--dark-text);
}

html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .mobile-submenu-link:hover,
html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .mobile-submenu-link.active {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.12);
}

/* =========================================================
   DARK HAMBURGER
========================================================= */

html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .hamburger {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);

  border-color: rgba(79, 195, 247, 0.25);
}

html[data-theme="dark"]:where(:not([data-page="contact"], [data-page="login"])) .hamburger:hover {
  color: #07111f;

  background: var(--secure-sky);

  border-color: var(--secure-sky);
}
/* =========================================================
   HOME PAGE (index.html)
   ========================================================= */


/* =========================================================
   HERO DARK MODE
========================================================= */

html[data-theme="dark"] .shield-hero-background {
  filter: brightness(0.42) saturate(0.7) contrast(1.12);
}

html[data-theme="dark"] .shield-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(2, 8, 14, 0.97) 0%,
    rgba(2, 8, 14, 0.88) 42%,
    rgba(2, 8, 14, 0.68) 72%,
    rgba(2, 8, 14, 0.86) 100%
  );
}

html[data-theme="dark"] .shield-image-carousel {
  border-color: rgba(79, 195, 247, 0.18);

  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.58);
}

html[data-theme="dark"] .carousel-slide img {
  filter: brightness(0.72) saturate(0.82) contrast(1.08);
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .security-trust {
  --trust-bg: #0b1220;
  --trust-surface: #111c2e;
  --trust-primary: #2563eb;
  --trust-accent: #06b6d4;
  --trust-heading: #f8fafc;
  --trust-text: #cbd5e1;
  --trust-muted: #94a3b8;
  --trust-border: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .security-trust-grid-bg {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .wcu-command {
  --wcu-bg: #111c2e;

  --wcu-surface: #0b1220;

  --wcu-surface-2: #111c2e;

  --wcu-primary: #2563eb;
  --wcu-accent: #06b6d4;

  --wcu-heading: #f8fafc;
  --wcu-text: #cbd5e1;
  --wcu-muted: #94a3b8;
}

/* =========================================================
   SECURITY PACKAGES CONTROL CENTER (index.html)
   Sits between .security-solutions and .st-trust-section,
   both #0b1220 in dark mode — promote to #111c2e so the
   boundaries stay visible.
========================================================= */

html[data-theme="dark"] .sp-control {
  background:
    radial-gradient(circle at 8% 15%, rgba(37, 99, 235, 0.13), transparent 30%),
    radial-gradient(circle at 92% 75%, rgba(6, 182, 212, 0.1), transparent 28%),
    #111c2e;
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .security-solutions {
  --solutions-bg: #0b1220;
  --solutions-surface: #111c2e;

  --solutions-primary: #2563eb;
  --solutions-accent: #06b6d4;

  --solutions-heading: #f8fafc;
  --solutions-text: #cbd5e1;
  --solutions-muted: #94a3b8;

  --solutions-border: rgba(148, 163, 184, 0.14);

  --solutions-shadow: 0 22px 55px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .security-solutions-grid {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);

  opacity: 0.65;
}

html[data-theme="dark"] .security-solutions-glow {
  opacity: 0.14;
}

html[data-theme="dark"] .security-solution-status span {
  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1);
}

html[data-theme="dark"] .security-solution-card:hover {
  border-color: rgba(37, 99, 235, 0.35);

  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .st-trust-section {
  --trust-bg: #0b1220;
  --trust-surface: #111c2e;
  --trust-surface-soft: #0e192a;

  --trust-primary: #2563eb;
  --trust-secondary: #06b6d4;

  --trust-heading: #f8fafc;
  --trust-text: #cbd5e1;
  --trust-muted: #94a3b8;

  --trust-border: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .st-trust-feature {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .st-cta-section {
  --cta-bg: #111c2e;
  --cta-panel: #111c2e;

  --cta-primary: #2563eb;
  --cta-secondary: #06b6d4;

  --cta-heading: #f8fafc;
  --cta-text: #cbd5e1;
  --cta-muted: #94a3b8;

  --cta-border: rgba(148, 163, 184, 0.15);
}

html[data-theme="dark"] .st-cta-panel {
  background: linear-gradient(
    145deg,
    rgba(17, 28, 46, 0.98),
    rgba(11, 18, 32, 0.98)
  );

  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.4);
}
/* =========================================================
   HOME PAGE 2 (index1.html)
   ========================================================= */


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .sib-section {
  background: #0b1220;
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .pi-section {
  --pi-bg: #0b1220;
  --pi-surface: #111c2e;
  --pi-surface-2: #162235;

  --pi-blue: #2563eb;
  --pi-cyan: #06b6d4;

  --pi-text: #f8fafc;
  --pi-secondary: #cbd5e1;
  --pi-muted: #94a3b8;

  --pi-border: rgba(148, 163, 184, 0.16);

  background: #0b1220;
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]:where([data-page="index1"]) #testimonials {
  --st-bg: #070d17;
  --st-surface: #0f1929;
  --st-surface-2: #0b1422;
  --st-blue: #2563eb;
  --st-cyan: #06b6d4;
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .st-center-cta-bg {
  filter: brightness(0.58) saturate(0.8) contrast(1.08);
}

html[data-theme="dark"] .st-center-cta-overlay {
  background: linear-gradient(
    135deg,
    rgba(11, 18, 32, 0.82),
    rgba(11, 18, 32, 0.58),
    rgba(11, 18, 32, 0.36)
  );
}

/* =========================================================
   DARK MODE CARD
========================================================= */

html[data-theme="dark"] .st-center-cta-card {
  background: rgba(17, 28, 46, 0.93);

  border-color: rgba(255, 255, 255, 0.12);

  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

/* =========================================================
   DARK HEADING
========================================================= */

html[data-theme="dark"] .st-center-cta-card h2 {
  color: #f8fafc;
}

html[data-theme="dark"] .st-center-cta-card h2 span {
  color: #06b6d4;
}

/* =========================================================
   DARK SECONDARY
========================================================= */

html[data-theme="dark"] .st-center-cta-secondary {
  background: rgba(255, 255, 255, 0.055);

  border-color: rgba(255, 255, 255, 0.15);

  color: #f8fafc;
}

html[data-theme="dark"] .st-center-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(6, 182, 212, 0.4);
}

html[data-theme="dark"] .st-center-cta-trust-item strong {
  color: #f8fafc;
}

@media (max-width: 600px) {

  html[data-theme="dark"] .st-center-cta-overlay {
    background: linear-gradient(
      180deg,
      rgba(11, 18, 32, 0.72),
      rgba(11, 18, 32, 0.9)
    );
  }
}
/* =========================================================
   CONTACT PAGE (contact.html)
   ========================================================= */


html[data-theme="dark"]:where([data-page="contact"]) .mobile-submenu-link:hover,
html[data-theme="dark"]:where([data-page="contact"]) .mobile-submenu-link:focus-visible,
html[data-theme="dark"]:where([data-page="contact"]) .mobile-submenu-link.active {
  color: var(--secure-sky);

  background: rgba(79, 195, 247, 0.1);
}

html[data-theme="dark"]:where([data-page="contact"]) .hamburger {
  color: var(--secure-sky);

  border-color: rgba(79, 195, 247, 0.3);

  background: rgba(79, 195, 247, 0.1);
}

html[data-theme="dark"]:where([data-page="contact"]) .hamburger:hover {
  color: var(--dark-bg);

  background: var(--secure-sky);
}
html[data-theme="dark"] .st-contact-hero-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(2, 7, 16, 0.7) 0%,
      rgba(2, 7, 16, 0.42) 45%,
      rgba(2, 7, 16, 0.94) 100%
    ),
    radial-gradient(circle at 50% 45%, rgba(6, 182, 212, 0.08), transparent 58%);
} /* ========================================================= DARK MODE ========================================================= */
html[data-theme="dark"] .st-contact-section {
  background: #111c2e;
  color: #f8fafc;
}
html[data-theme="dark"] .st-contact-section::before {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), transparent 42%),
    linear-gradient(315deg, rgba(6, 182, 212, 0.06), transparent 45%);
}
html[data-theme="dark"] .st-contact-section::after {
  border-color: rgba(96, 165, 250, 0.1);
}
html[data-theme="dark"] .st-contact-intro p {
  color: #94a3b8;
}
html[data-theme="dark"] .st-contact-info-heading p {
  color: #94a3b8;
}
html[data-theme="dark"] .st-contact-detail {
  background: #111c2e;
  border-color: rgba(148, 163, 184, 0.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16);
}
html[data-theme="dark"] .st-contact-detail-content strong {
  color: #f8fafc;
}
html[data-theme="dark"] .st-contact-trust {
  color: #94a3b8;
}
html[data-theme="dark"] .st-contact-form-card {
  background: #111c2e;
  border-color: rgba(148, 163, 184, 0.11);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .st-contact-form-top h3 {
  color: #f8fafc;
}
html[data-theme="dark"] .st-contact-field label {
  color: #cbd5e1;
}
html[data-theme="dark"] .st-contact-field input,
html[data-theme="dark"] .st-contact-field select,
html[data-theme="dark"] .st-contact-field textarea {
  background: #0b1220;
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.17);
}
html[data-theme="dark"] .st-contact-field input:focus,
html[data-theme="dark"] .st-contact-field select:focus,
html[data-theme="dark"] .st-contact-field textarea:focus {
  background: #0b1220;
}
/* =========================================================
   INSTALLATION PAGE (installation.html)
   ========================================================= */
 /* ========================================================= DARK MODE OVERLAY ========================================================= */
html[data-theme="dark"] .st-installation-hero-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(2, 7, 16, 0.82) 0%,
      rgba(2, 7, 16, 0.62) 42%,
      rgba(2, 7, 16, 0.94) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 7, 16, 0.8) 0%,
      rgba(2, 7, 16, 0.36) 50%,
      rgba(2, 7, 16, 0.82) 100%
    );
} /* ========================================================= DARK MODE ========================================================= */
html[data-theme="dark"] .st-setup-section {
  background: #121f36;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 24px 40px -32px rgba(0, 0, 0, 0.6) inset;
  color: #f8fafc;
}
html[data-theme="dark"] .st-setup-bg-grid {
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.045) 1px, transparent 1px);
}
html[data-theme="dark"] .st-setup-intro h2 {
  color: #f8fafc;
}
html[data-theme="dark"] .st-setup-intro p {
  color: #cbd5e1;
}
html[data-theme="dark"] .st-setup-card {
  background: #111c2e;
  border-color: rgba(148, 163, 184, 0.13);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}
html[data-theme="dark"] .st-setup-card:hover {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .st-setup-card-content h3 {
  color: #f8fafc;
}
html[data-theme="dark"] .st-setup-card-content p {
  color: #94a3b8;
}
html[data-theme="dark"] .st-setup-trust {
  background: rgba(17, 28, 46, 0.78);
  border-color: rgba(148, 163, 184, 0.13);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}
html[data-theme="dark"] .st-setup-trust-item strong {
  color: #f8fafc;
}
html[data-theme="dark"] .st-setup-trust-item small {
  color: #94a3b8;
}
html[data-theme="dark"] .st-setup-trust-line {
  background: rgba(148, 163, 184, 0.16);
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .st-install-command {
  --st-bg: #0b1220;
  --st-surface: #111c2e;
  --st-surface-2: #080f1c;
}

/* =========================================================
DARK MODE
========================================================= */

html[data-theme="dark"] .st-install-faq {
  --faq-bg: #111c2e;
  --faq-surface: #111c2e;
  --faq-surface-soft: #0d1728;
  --faq-text: #f8fafc;
  --faq-secondary: #cbd5e1;
  --faq-muted: #94a3b8;
  --faq-blue: #2563eb;
  --faq-cyan: #06b6d4;
  --faq-border: rgba(148, 163, 184, 0.16);
  --faq-shadow: 0 25px 65px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .st-install-faq-bg-grid {
  opacity: 0.25;

  background-image:
    linear-gradient(rgba(6, 182, 212, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.045) 1px, transparent 1px);
}

html[data-theme="dark"] .st-install-faq-glow-one {
  background: rgba(37, 99, 235, 0.12);
}

html[data-theme="dark"] .st-install-faq-glow-two {
  background: rgba(6, 182, 212, 0.08);
}

html[data-theme="dark"] .st-install-faq-item {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
} /* ========================================================= DARK THEME CTA remains image-focused ========================================================= */
html[data-theme="dark"] .st-install-cta {
  background: #0b1220;
}
/* =========================================================
   PACKAGES PAGE (packages.html)
   ========================================================= */
 /* ========================================================= DARK MODE ========================================================= */
html[data-theme="dark"] .st-security-packages {
  --sp-bg: #0b1220;
  --sp-surface: #111c2e;
  --sp-primary: #2563eb;
  --sp-accent: #06b6d4;
  --sp-heading: #f8fafc;
  --sp-text: #cbd5e1;
  --sp-muted: #94a3b8;
  --sp-border: rgba(148, 163, 184, 0.14);
  --sp-soft: rgba(37, 99, 235, 0.12);
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(37, 99, 235, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(6, 182, 212, 0.08),
      transparent 30%
    ),
    var(--sp-bg);
}
html[data-theme="dark"] .st-packages-grid-bg {
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.045) 1px, transparent 1px);
}
html[data-theme="dark"] .st-package-card {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16);
}
html[data-theme="dark"] .st-package-card-premium {
  border-color: rgba(6, 182, 212, 0.2);
  background: linear-gradient(
    145deg,
    var(--sp-surface),
    rgba(6, 182, 212, 0.035)
  );
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .st-security-matrix {
  --matrix-bg: #111c2e;
  --matrix-surface: #111c2e;
  --matrix-surface-two: #16243a;

  --matrix-blue: #2563eb;
  --matrix-cyan: #06b6d4;

  --matrix-white: #f8fafc;
  --matrix-text: #cbd5e1;
  --matrix-muted: #94a3b8;
} /* ========================================================= DARK MODE ========================================================= */
html[data-theme="dark"] .st-included {
  --inc-bg: #0b1220;
  --inc-surface: #111c2e;
  --inc-surface-two: #16243a;
  --inc-blue: #2563eb;
  --inc-cyan: #06b6d4;
  --inc-heading: #f8fafc;
  --inc-text: #cbd5e1;
  --inc-muted: #94a3b8;
  --inc-border: rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 8% 15%, rgba(37, 99, 235, 0.13), transparent 30%),
    radial-gradient(
      circle at 92% 80%,
      rgba(6, 182, 212, 0.08),
      transparent 28%
    ),
    var(--inc-bg);
}
html[data-theme="dark"] .st-included-grid {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
}
html[data-theme="dark"] .st-blueprint-frame {
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28);
}
/* =========================================================
   PRODUCTS PAGE (products.html)
   ========================================================= */


/* =========================================================
   EXTRA DARK MODE OVERLAY
========================================================= */

html[data-theme="dark"] .st-products-hero-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(2, 7, 16, 0.82) 0%,
      rgba(2, 7, 16, 0.62) 42%,
      rgba(2, 7, 16, 0.94) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 7, 16, 0.8) 0%,
      rgba(2, 7, 16, 0.36) 50%,
      rgba(2, 7, 16, 0.82) 100%
    );
} /* ========================================================= DARK MODE Controlled by global.js ========================================================= */
html[data-theme="dark"] .st-fp-command {
  --fp-bg: #0b1220;
  --fp-surface: #111c2e;
  --fp-surface-2: #16243a;
  --fp-blue: #2563eb;
  --fp-cyan: #06b6d4;
  --fp-text: #f8fafc;
  --fp-secondary: #cbd5e1;
  --fp-muted: #94a3b8;
  --fp-border: rgba(148, 163, 184, 0.14);
}
html[data-theme="dark"] .st-fp-command-grid {
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.08) 1px, transparent 1px);
}
html[data-theme="dark"] .st-fp-command-feature {
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.25);
} /* ========================================================= DARK MODE ========================================================= */
html[data-theme="dark"] .st-why-image {
  --why-bg: #111c2e;
  --why-surface: #111c2e;
  --why-surface-2: #16243a;
  --why-blue: #2563eb;
  --why-cyan: #06b6d4;
  --why-text: #f8fafc;
  --why-secondary: #cbd5e1;
  --why-muted: #94a3b8;
  --why-border: rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(
      circle at 78% 40%,
      rgba(37, 99, 235, 0.12),
      transparent 32%
    ),
    radial-gradient(circle at 10% 80%, rgba(6, 182, 212, 0.07), transparent 25%),
    #111c2e;
} /* ========================================================= DARK MODE ========================================================= */
html[data-theme="dark"] .st-compare {
  --compare-bg: #0b1220;
  --compare-surface: #111c2e;
  --compare-surface-2: #16243a;
  --compare-blue: #2563eb;
  --compare-cyan: #06b6d4;
  --compare-text: #f8fafc;
  --compare-secondary: #cbd5e1;
  --compare-muted: #94a3b8;
  --compare-border: rgba(148, 163, 184, 0.15);
  background:
    radial-gradient(circle at 8% 25%, rgba(37, 99, 235, 0.13), transparent 27%),
    radial-gradient(
      circle at 92% 78%,
      rgba(6, 182, 212, 0.08),
      transparent 25%
    ),
    #0b1220;
}
html[data-theme="dark"] .st-compare-grid {
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.08) 1px, transparent 1px);
}
html[data-theme="dark"] .st-compare-lab {
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.25);
} /* ========================================================= DARK MODE ========================================================= */
html[data-theme="dark"] .st-faq {
  --faq-bg: #111c2e;
  --faq-border: rgba(148, 163, 184, 0.15);
  background:
    radial-gradient(circle at 8% 18%, rgba(37, 99, 235, 0.13), transparent 28%),
    radial-gradient(
      circle at 92% 82%,
      rgba(6, 182, 212, 0.08),
      transparent 28%
    ),
    #111c2e;
  color: #f8fafc;
}
html[data-theme="dark"] .st-faq-grid {
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.08) 1px, transparent 1px);
}
html[data-theme="dark"] .st-faq-console {
  background: #111c2e;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .st-faq-console-top {
  background: #16243a;
} /* ========================================================= DARK MODE ========================================================= */
html[data-theme="dark"] .st-call {
  background:
    radial-gradient(circle at 7% 45%, rgba(37, 99, 235, 0.13), transparent 28%),
    radial-gradient(
      circle at 93% 55%,
      rgba(6, 182, 212, 0.08),
      transparent 27%
    ),
    #0b1220;
}
html[data-theme="dark"] .st-call-bg-grid {
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.08) 1px, transparent 1px);
}
html[data-theme="dark"] .st-call-card {
  box-shadow: 0 32px 85px rgba(0, 0, 0, 0.32);
}
/* =========================================================
   SHARED STYLES (used by several pages)
   ========================================================= */
 /* ========================================================= DARK MODE global.js controls data-theme ========================================================= */
html[data-theme="dark"] .site-footer {
  --footer-bg: #050b14;
  --footer-bg-secondary: #0b1424;
  --footer-text: #f8fafc;
  --footer-secondary: #cbd5e1;
  --footer-muted: #94a3b8;
  --footer-accent: #4fc3f7;
  --footer-accent-hover: #29b6f6;
  --footer-logo-hover: #02060c;
  --footer-border: rgba(255, 255, 255, 0.08);
}
/* =========================================================
   LOGIN PAGE (login.html)
   ========================================================= */


html[data-theme="dark"] .login-page {
  --login-bg: #080f1b;
  --login-surface: #101a2b;
  --login-surface-soft: #111f33;

  --login-text: #f8fafc;
  --login-secondary: #cbd5e1;
  --login-muted: #94a3b8;

  --login-border: rgba(255, 255, 255, 0.09);
  --login-border-strong: rgba(255, 255, 255, 0.15);

  background: #080f1b;
}

/* =========================================================
   DARK MODE — LOGIN / REGISTER / COMING SOON / NEW PAGES
   ========================================================= */

/* Login + register: the login styles used html.dark, which the
   theme switcher never sets. Dark mode uses data-theme="dark". */
html[data-theme="dark"] .login-page {
  --login-bg: #080f1b;
  --login-surface: #101a2b;
  --login-surface-soft: #111f33;
  --login-text: #f8fafc;
  --login-secondary: #cbd5e1;
  --login-muted: #94a3b8;
  --login-border: rgba(255, 255, 255, 0.09);
  --login-border-strong: rgba(255, 255, 255, 0.15);
  --login-blue: #60a5fa;
  background: #080f1b;
}

html[data-theme="dark"]:where([data-page="login"]) body {
  background: #080f1b;
  color: #f8fafc;
}

html[data-theme="dark"] .login-heading h2,
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .password-label-row label {
  color: var(--login-text);
}

html[data-theme="dark"] .input-wrap input::placeholder {
  color: #64748b;
}

html[data-theme="dark"] .custom-checkbox {
  border-color: var(--login-border-strong);
  background: var(--login-surface-soft);
}

html[data-theme="dark"] .auth-tool {
  border-color: rgba(255, 255, 255, 0.12);
  background: #111f33;
  color: #e2e8f0;
  box-shadow: none;
}

html[data-theme="dark"] .auth-tool:hover {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.45);
}

html[data-theme="dark"] .st-soon {
  --soon-bg: #080f1b;
  --soon-surface: #101a2b;
  --soon-text: #f8fafc;
  --soon-secondary: #cbd5e1;
  --soon-muted: #94a3b8;
  --soon-border: rgba(255, 255, 255, 0.09);
  --soon-blue: #60a5fa;
}

html[data-theme="dark"] .st-soon-countdown div,
html[data-theme="dark"] .st-soon-form {
  box-shadow: none;
}

html[data-theme="dark"] .st-pd,
html[data-theme="dark"] .st-pd-related {
  --pd-bg: #0b1220;
  --pd-surface: #111c2e;
  --pd-surface-2: #16243a;
  --pd-blue: #3b82f6;
  --pd-cyan: #06b6d4;
  --pd-text: #f8fafc;
  --pd-secondary: #cbd5e1;
  --pd-muted: #94a3b8;
  --pd-border: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .st-pd-main-image,
html[data-theme="dark"] .st-pd-card:hover {
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .st-pd-title strong,
html[data-theme="dark"] .st-pd-related-header h2 span,
html[data-theme="dark"] .st-pd-card-link {
  color: #60a5fa;
}

html[data-theme="dark"] .st-pd-grid-bg {
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.05) 1px, transparent 1px);
}

html[data-theme="dark"] .st-field-error,
html[data-theme="dark"] .st-contact-form-note.is-error {
  color: #f87171;
}

html[data-theme="dark"] .st-contact-form-note.is-success {
  color: #34d399;
}