/* Nocturne bridge for the hand-authored HTML routes in public/. The Next.js
   pages use app/nocturne.css; this file gives standalone pages the same visual
   ground without changing their content or URL. */

:root {
  --color-primary: #9184d9 !important;
  --color-primary-dark: #5d5294 !important;
  --color-primary-light: #b5abfc !important;
  --color-accent: #9184d9 !important;
  --color-dark: #161826 !important;
  --color-dark-secondary: #262a60 !important;
  --color-text: #e9e9ed !important;
  --color-text-secondary: #cfd3e5 !important;
  --color-text-muted: #b2b6ca !important;
  --color-border: #3f424d !important;
  --color-bg: #161826 !important;
  --color-bg-secondary: #232532 !important;
  --color-bg-tertiary: #292b38 !important;
  --shadow-sm: 0 0 0 1px #3f424d !important;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .5) !important;
  --shadow-lg: 0 0 0 1px #595d6c, 0 12px 32px rgba(0, 0, 0, .55) !important;
  color-scheme: dark;
}

html,
body {
  background: #161826 !important;
  color: #e9e9ed !important;
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body :is(h1, h2, h3, h4, h5, h6) {
  color: #f3f5fe !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -.025em;
  text-wrap: balance;
}

body :is(p, li, dd, figcaption) {
  color: inherit;
}

body a {
  color: #b5abfc !important;
}

body :is(p, li, dd, figcaption) a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body :focus-visible {
  outline: 2px solid #9184d9 !important;
  outline-offset: 3px;
}

.site-header,
.site-header.scrolled,
.header,
.main-header,
.hero-section,
.hero-content-wrapper,
.hero,
footer,
.footer,
.site-footer {
  background-color: #161826 !important;
  background-image: radial-gradient(90% 70% at 85% -8%, rgba(145, 132, 217, .18), transparent 52%) !important;
  border-color: #3f424d !important;
  color: #e9e9ed !important;
}

.site-header,
.site-header.scrolled {
  background: rgba(22, 24, 38, .92) !important;
  backdrop-filter: blur(20px) saturate(130%);
}

.nav-link,
.main-nav a,
footer a,
.footer a,
.site-footer a {
  color: #cfd3e5 !important;
}

.nav-link:hover,
.nav-link.active,
.main-nav a:hover,
footer a:hover,
.footer a:hover,
.site-footer a:hover {
  color: #f3f5fe !important;
}

.nav-indicator,
.header-gradient-border {
  background: #9184d9 !important;
}

body :is(main, section):not(.hero):not(.hero-section):not(.hero-content-wrapper) {
  background-color: #161826 !important;
  background-image: none !important;
  border-color: #3f424d !important;
}

body :is(
  .card, .feature-card, .pricing-card, .plan-card, .service-card,
  .review-card, .testimonial-card, .faq-item, .faq-card, .cta-box,
  .content-card, .article-card, .sidebar-card, .info-card, .inline-lead-form
) {
  background: #232532 !important;
  border-color: #3f424d !important;
  color: #cfd3e5 !important;
  box-shadow: 0 0 0 1px #3f424d !important;
}

/* A few older pages used inline light fills on otherwise unclassed content
   panels. Translate those explicit surfaces too so a white slab does not break
   the dark rhythm halfway down the page. */
body :is(
  [style*='background: #ffffff'], [style*='background:#ffffff'],
  [style*='background: white'], [style*='background:white'],
  [style*='background: #f7fafc'], [style*='background:#f7fafc'],
  [style*='background: #f8fafc'], [style*='background:#f8fafc'],
  [style*='background-color: #f8fafc'], [style*='background-color:#f8fafc']
) {
  background: #232532 !important;
  border-color: #3f424d !important;
  color: #cfd3e5 !important;
}

body [style*='background: linear-gradient'][style*='#f7fafc'] {
  background: #232532 !important;
  border-color: #3f424d !important;
}

body :is(p, li, dd, figcaption, span, div):is(
  [style*='color: #0f172a'], [style*='color:#0f172a'],
  [style*='color: #1a1a2e'], [style*='color:#1a1a2e'],
  [style*='color: #1e293b'], [style*='color:#1e293b'],
  [style*='color: #334155'], [style*='color:#334155'],
  [style*='color: #4a5568'], [style*='color:#4a5568'],
  [style*='color: #64748b'], [style*='color:#64748b']
) {
  color: #cfd3e5 !important;
}

.cta-banner {
  background: #262a60 !important;
  border: 1px solid #353b80 !important;
}

.cta-banner-actions .banner-cta-phone,
.inline-lead-form button {
  background: #423a6a !important;
  border-color: #5d5294 !important;
  color: #f5f4ff !important;
}

body :is(.breadcrumbs, .article-meta, .blog-meta, .footer-bottom) {
  background-color: #161826 !important;
  border-color: #3f424d !important;
  color: #b2b6ca !important;
}

body :is(.article-content, .blog-content, .content-container, .content-section) {
  color: #cfd3e5 !important;
}

body :is(blockquote, pre, code, table, th, td) {
  background-color: #232532 !important;
  border-color: #3f424d !important;
  color: #e4e7f5 !important;
}

body :is(input, textarea, select) {
  background: #232532 !important;
  border-color: #595d6c !important;
  color: #f3f5fe !important;
}

body :is(.hero-btn, .nav-cta, .cta-button, .cta-btn-primary, .primary-button, .btn-primary, .btn-secondary, button[type='submit']) {
  background: #423a6a !important;
  border: 1px solid #5d5294 !important;
  color: #f5f4ff !important;
  border-radius: 8px !important;
  box-shadow: 0 0 24px rgba(145, 132, 217, .14) !important;
}

body :is(.hero-btn, .nav-cta, .cta-button, .cta-btn-primary, .primary-button, .btn-primary, .btn-secondary, button[type='submit']):hover {
  background: #5d5294 !important;
  color: #f5f4ff !important;
}

/* Standalone pages predate the Next.js shell. Their shared header now follows
   the same 1200px lockup, four-tab navigation and compact mobile disclosure as
   the homepage instead of showing a large centered logo by itself. */
.hero-header {
  padding: 14px 24px !important;
  border-bottom: 1px solid #3f424d;
  background: rgba(22, 24, 38, .92) !important;
  backdrop-filter: blur(20px) saturate(130%);
}

.hero-header .header-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 20px !important;
}

.hero-header .logo img {
  width: 160px !important;
  max-width: 160px !important;
  height: auto !important;
}

.nk-static-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}

.nk-static-nav a,
.nk-static-mobile-nav a {
  color: #b2b6ca !important;
  text-decoration: none !important;
}

.nk-static-nav a {
  min-height: 44px;
  padding: 10px 11px;
  border-radius: 8px;
  font-size: .9375rem;
}

.nk-static-nav a:hover,
.nk-static-nav a:focus-visible,
.nk-static-mobile-nav a:hover,
.nk-static-mobile-nav a:focus-visible {
  color: #e9e9ed !important;
  background: #232532;
}

.nk-static-menu {
  display: none;
  justify-self: end;
  position: relative;
}

.nk-static-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #3f424d;
  border-radius: 8px;
  color: #cfd3e5;
  cursor: pointer;
  list-style: none;
}

.nk-static-menu summary::-webkit-details-marker {
  display: none;
}

.nk-static-mobile-nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1000;
  width: min(17rem, calc(100vw - 32px));
  padding: 8px;
  display: grid;
  gap: 2px;
  border: 1px solid #3f424d;
  border-radius: 14px;
  background: #232532;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

.nk-static-mobile-nav a {
  min-height: 48px;
  padding: 12px;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .nk-static-nav {
    display: none;
  }

  .nk-static-menu {
    display: block;
  }

  /* Old pages contain several inline fixed-width grids. Collapse those cards
     to one column rather than clipping their content at the viewport edge. */
  body [style*='display: grid'][style*='grid-template-columns'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body :is(.feature-box, .pricing-card, .feature-card, .content-card) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

::selection {
  background: rgba(145, 132, 217, .3);
}