:root {
  --ecosystem-page-bg: #ffffff;
  --ecosystem-surface: #ffffff;
  --ecosystem-soft-surface: #f8fafc;
  --ecosystem-border: #d8dee8;
  --ecosystem-ink: #18212f;
  --ecosystem-muted: #5b6472;
  --ecosystem-footer: #111827;
  --ecosystem-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  --ecosystem-radius: 8px;
}

html { background: var(--ecosystem-page-bg); }

body {
  color: var(--ecosystem-ink);
  background: var(--ecosystem-page-bg) !important;
  accent-color: var(--service-primary);
}

main,
.section { background: transparent; }

.navbar,
nav {
  background: var(--ecosystem-surface);
  color: var(--ecosystem-ink);
  border-bottom: 1px solid var(--ecosystem-border);
}

.nav-link,
.navlinks a,
a { color: inherit; }

.nav-container,
.container,
.wrap {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

.logo,
.btn,
.button.primary,
.cta-button.primary {
  background: var(--service-primary);
  border-color: var(--service-primary);
  color: #ffffff;
}

.nav-btn,
.button,
.cta-button,
.btn-secondary {
  border-color: var(--ecosystem-border);
}

.card,
.cert-card,
.panel,
.auth-card,
.compliance-card,
.security-card,
.privacy-card,
.feature-card,
.usecase-card,
.pricing-card,
.module-card,
.dashboard-card,
.fusion-action-form,
.calibration-guide,
.calibration-results,
.calibration-diagnosis {
  background: var(--ecosystem-surface);
  color: var(--ecosystem-ink);
  border-color: var(--ecosystem-border);
  border-radius: var(--ecosystem-radius);
  box-shadow: var(--ecosystem-shadow);
}

.card p,
.cert-card p,
.panel p,
.section-subtitle,
.hero-subtitle,
.lead,
.muted,
.footer-tagline {
  color: var(--ecosystem-muted);
}

.hero,
header.hero {
  background: var(--ecosystem-surface) !important;
  color: var(--ecosystem-ink) !important;
  border-bottom: 1px solid var(--ecosystem-border);
  padding-block: clamp(44px, 7vw, 78px);
}

.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero .hero-title,
.hero .hero-subtitle {
  color: var(--ecosystem-ink) !important;
}

.hero .highlight,
.highlight,
.section-title i,
.card h3,
.cert-card h3,
.footer-col h4,
.kicker {
  color: var(--service-primary) !important;
}

.hero .badge,
.badge {
  color: var(--service-primary);
  background: color-mix(in srgb, var(--service-primary) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--service-primary) 35%, transparent);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.stat {
  background: var(--ecosystem-soft-surface);
  border: 1px solid var(--ecosystem-border);
  border-radius: var(--ecosystem-radius);
  padding: 14px 18px;
  min-width: 128px;
}

.stat-number {
  color: var(--service-primary);
  font-weight: 800;
  font-size: 1.35rem;
}

.stat-label {
  color: var(--ecosystem-muted);
  font-size: 0.9rem;
}

.certificate-grid,
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.cta-container,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.band {
  background: linear-gradient(135deg, var(--service-primary) 0%, var(--service-secondary) 100%);
  color: #ffffff;
}

.band h1,
.band h2,
.band h3,
.band p { color: #ffffff; }

input,
select,
textarea {
  background: #ffffff;
  color: var(--ecosystem-ink);
  border-color: var(--ecosystem-border);
}

.footer,
footer {
  background: var(--ecosystem-footer);
  color: #f8fafc;
}

.footer a,
.footer-link,
.footer-col a,
footer a,
.footer-tagline { color: #d8dee8; }

body.dark-mode {
  --ecosystem-page-bg: #0f141c;
  --ecosystem-surface: #151b23;
  --ecosystem-soft-surface: #101923;
  --ecosystem-border: #334155;
  --ecosystem-ink: #f1f5f9;
  --ecosystem-muted: #cbd5e1;
  --ecosystem-footer: #090d14;
  --ecosystem-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
  background: var(--ecosystem-page-bg) !important;
  color: var(--ecosystem-ink);
}

body.dark-mode .navbar,
body.dark-mode nav,
body.dark-mode .hero,
body.dark-mode header.hero,
body.dark-mode .card,
body.dark-mode .cert-card,
body.dark-mode .panel,
body.dark-mode .auth-card,
body.dark-mode .compliance-card,
body.dark-mode .security-card,
body.dark-mode .privacy-card,
body.dark-mode .feature-card,
body.dark-mode .usecase-card,
body.dark-mode .pricing-card,
body.dark-mode .module-card,
body.dark-mode .dashboard-card,
body.dark-mode .fusion-action-form,
body.dark-mode .calibration-guide,
body.dark-mode .calibration-results,
body.dark-mode .calibration-diagnosis {
  background: var(--ecosystem-surface) !important;
  color: var(--ecosystem-ink) !important;
  border-color: var(--ecosystem-border);
  box-shadow: var(--ecosystem-shadow);
}

body.dark-mode main,
body.dark-mode .section {
  background: transparent;
  color: var(--ecosystem-ink);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .section-title,
body.dark-mode .card h2,
body.dark-mode .card h3,
body.dark-mode .cert-card h3,
body.dark-mode .hero h1,
body.dark-mode .hero h2,
body.dark-mode .hero h3,
body.dark-mode .hero p,
body.dark-mode .hero .hero-title,
body.dark-mode .hero .hero-subtitle {
  color: var(--ecosystem-ink) !important;
}

body.dark-mode .highlight,
body.dark-mode .hero .highlight,
body.dark-mode .section-title i,
body.dark-mode .footer-col h4,
body.dark-mode .kicker {
  color: var(--service-accent) !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode label,
body.dark-mode .muted,
body.dark-mode .lead,
body.dark-mode .section-subtitle,
body.dark-mode .hero-subtitle,
body.dark-mode .footer-tagline,
body.dark-mode .footer-col a,
body.dark-mode .nav-link,
body.dark-mode .navlinks a {
  color: var(--ecosystem-muted);
}

body.dark-mode .hero .badge,
body.dark-mode .badge {
  color: var(--service-accent);
  background: color-mix(in srgb, var(--service-primary) 18%, #0f141c);
  border-color: var(--ecosystem-border);
}

body.dark-mode .band {
  background: linear-gradient(135deg, var(--service-secondary) 0%, #0f141c 100%);
  color: #ffffff;
}

body.dark-mode .band h1,
body.dark-mode .band h2,
body.dark-mode .band h3,
body.dark-mode .band p { color: #ffffff; }

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode pre,
body.dark-mode code {
  background: #0f172a;
  color: var(--ecosystem-ink);
  border-color: var(--ecosystem-border);
}

body.dark-mode .btn,
body.dark-mode .button.primary,
body.dark-mode .cta-button.primary {
  background: var(--service-primary);
  color: #ffffff;
}

body.dark-mode .button,
body.dark-mode .cta-button,
body.dark-mode .nav-btn,
body.dark-mode .btn-secondary {
  background: #0f172a;
  color: var(--ecosystem-ink);
  border-color: var(--ecosystem-border);
}

body.dark-mode .footer,
body.dark-mode footer {
  background: var(--ecosystem-footer);
  color: #f8fafc;
}

/* SITANO official SVG mark: geometry is fixed in /static/brand assets. */
.nav-brand {
  min-width: 0;
  flex-shrink: 0;
}

.logo {
  width: 46px !important;
  min-width: 46px;
  height: 46px;
  padding: 0;
  box-sizing: border-box;
  display: inline-block;
  flex: 0 0 46px;
  overflow: hidden;
  color: transparent !important;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  background-color: transparent !important;
  background-image: url('/static/brand/sitano-nav-symbol.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  border-radius: 0;
}

.brand-name {
  min-width: 0;
  line-height: 1.15;
}

@media (max-width: 640px) {
  .nav-brand {
    gap: 8px;
  }

  .logo {
    width: 42px !important;
    min-width: 42px;
    height: 42px;
    flex-basis: 42px;
    padding: 0;
    font-size: 0;
  }

  .brand-name {
    font-size: 0.95rem;
  }
}

/* SITANO master horizontal logo override. Use fixed SVG assets, never redraw. */
.nav-brand .logo {
  width: 154px !important;
  min-width: 154px !important;
  height: 44px !important;
  flex: 0 0 154px !important;
  background-image: url('/static/brand/sitano-master-horizontal.svg') !important;
  background-size: contain !important;
  background-position: center left !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
}

.footer .nav-brand .logo,
footer .nav-brand .logo,
.footer-brand .logo {
  background-image: url('/static/brand/sitano-white.svg') !important;
  filter: none !important;
}

.footer .brand-name,
footer .brand-name,
.footer-brand .brand-name {
  color: #f8fafc !important;
}

@media (max-width: 640px) {
  .nav-brand .logo {
    width: 128px !important;
    min-width: 128px !important;
    height: 42px !important;
    flex-basis: 128px !important;
  }
}

/* SITANO master horizontal logo alignment and monochrome mode. */
.nav-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: 0;
  flex-shrink: 0;
}

.nav-brand .logo {
  width: 132px !important;
  min-width: 132px !important;
  height: 42px !important;
  flex: 0 0 132px !important;
  align-self: center !important;
  background-image: url('/static/brand/sitano-master-horizontal.svg') !important;
  background-size: contain !important;
  background-position: center left !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
}

.nav-brand .brand-name {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}

body.dark-mode .navbar .nav-brand .logo,
body.dark-mode nav .nav-brand .logo {
  background-image: url('/static/brand/sitano-silver.svg') !important;
}

.footer .nav-brand,
footer .nav-brand,
.footer-brand {
  align-items: center !important;
  gap: 2px !important;
}

.footer .nav-brand .logo,
footer .nav-brand .logo,
.footer-brand .logo {
  background-image: url('/static/brand/sitano-silver.svg') !important;
  filter: none !important;
}

.footer .brand-name,
footer .brand-name,
.footer-brand .brand-name {
  color: #f8fafc !important;
}

@media (max-width: 640px) {
  .nav-brand {
    gap: 2px !important;
  }

  .nav-brand .logo {
    width: 126px !important;
    min-width: 126px !important;
    height: 47px !important;
    flex-basis: 126px !important;
  }
}

/* SITANO logo middle alignment correction. */
.navbar .nav-brand,
nav .nav-brand,
.footer .nav-brand,
footer .nav-brand,
.footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  line-height: 1 !important;
}

.navbar .nav-brand .logo,
nav .nav-brand .logo,
.footer .nav-brand .logo,
footer .nav-brand .logo,
.footer-brand .logo {
  display: block !important;
  align-self: center !important;
  margin: 0 !important;
  transform: translateY(0) !important;
  background-position: center center !important;
}

.navbar .nav-brand .brand-name,
nav .nav-brand .brand-name,
.footer .nav-brand .brand-name,
footer .nav-brand .brand-name,
.footer-brand .brand-name {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

@media (max-width: 640px) {
  .navbar .nav-brand,
  nav .nav-brand,
  .footer .nav-brand,
  footer .nav-brand,
  .footer-brand {
    gap: 2px !important;
  }
}

/* SITANO logo same-axis correction. */
.navbar .nav-brand,
nav .nav-brand,
.footer .nav-brand,
footer .nav-brand,
.footer-brand {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.navbar .nav-brand .logo,
nav .nav-brand .logo,
.footer .nav-brand .logo,
footer .nav-brand .logo,
.footer-brand .logo,
.navbar .nav-brand .brand-name,
nav .nav-brand .brand-name,
.footer .nav-brand .brand-name,
footer .nav-brand .brand-name,
.footer-brand .brand-name {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

/* SITANO header/footer optical alignment correction. */
.navbar .nav-container,
nav .nav-container {
  display: flex !important;
  align-items: center !important;
}

.navbar .nav-links,
nav .nav-links {
  display: flex !important;
  align-items: center !important;
}

.navbar .nav-brand,
nav .nav-brand {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  line-height: 1 !important;
  min-height: 44px !important;
}

.navbar .nav-brand .logo,
nav .nav-brand .logo {
  width: 142px !important;
  min-width: 142px !important;
  height: 47px !important;
  flex: 0 0 142px !important;
  align-self: center !important;
  margin: 2px -8px 0 0 !important;
  background-position: center center !important;
  background-size: contain !important;
}

.navbar .nav-brand .brand-name,
nav .nav-brand .brand-name {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.footer .footer-grid,
footer .footer-grid {
  align-items: flex-start !important;
}

.footer .nav-brand,
footer .nav-brand,
.footer-brand {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  line-height: 1 !important;
  margin-top: 0 !important;
}

.footer .nav-brand .logo,
footer .nav-brand .logo,
.footer-brand .logo {
  width: 142px !important;
  min-width: 142px !important;
  height: 47px !important;
  flex: 0 0 142px !important;
  align-self: center !important;
  margin: -4px -8px 0 0 !important;
  background-position: center center !important;
  background-size: contain !important;
}

.footer .nav-brand .brand-name,
footer .nav-brand .brand-name,
.footer-brand .brand-name {
  display: inline-flex !important;
  align-items: flex-start !important;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

@media (max-width: 640px) {
  .navbar .nav-brand .logo,
  nav .nav-brand .logo,
  .footer .nav-brand .logo,
  footer .nav-brand .logo,
  .footer-brand .logo {
    width: 126px !important;
    min-width: 126px !important;
    height: 42px !important;
    flex-basis: 126px !important;
    margin-right: -8px !important;
  }
}

/* SITANO subtle logo vertical reading adjustment. */
/* Shared SITANO V3 lockup based on the portal reference implementation. */
.navbar .nav-brand .logo,
nav .nav-brand .logo,
.footer .nav-brand .logo,
footer .nav-brand .logo,
.footer-brand .logo {
  --sitano-logo-width: clamp(112px, 18vw, 171.3285px);
  width: var(--sitano-logo-width) !important;
  min-width: var(--sitano-logo-width) !important;
  height: auto !important;
  aspect-ratio: 69 / 29 !important;
  flex: 0 0 var(--sitano-logo-width) !important;
  background-size: contain !important;
  background-position: center !important;
  transform: translateY(-10px) !important;
}