/* =========================================================
   Websting day/night theme layer |
   Loads after styles.css so the existing dark design remains
   the default and light mode can be maintained independently.
   ========================================================= */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #020204;
  --theme-page-soft: #090a0f;
  --theme-surface: rgba(255, 255, 255, 0.055);
  --theme-surface-strong: rgba(12, 13, 18, 0.92);
  --theme-border: rgba(255, 255, 255, 0.12);
  --theme-text: #ffffff;
  --theme-text-soft: rgba(255, 255, 255, 0.78);
  --theme-text-dim: rgba(255, 255, 255, 0.62);
  --theme-control-bg: rgba(255, 255, 255, 0.055);
  --theme-control-text: #ffffff;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-soft: #eaedf5;
  --bg-elevated: rgba(255, 255, 255, 0.86);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --line: rgba(28, 31, 45, 0.13);
  --line-strong: rgba(160, 111, 19, 0.28);
  --text: #171925;
  --text-soft: rgba(23, 25, 37, 0.78);
  --text-dim: rgba(23, 25, 37, 0.6);
  --gold-300: #9a6815;
  --gold-400: #b67a18;
  --gold-500: #9a6410;
  --pink-300: #9a4e80;
  --teal-300: #276e73;
  --purple-300: #674eb7;
  --shadow: 0 24px 70px -42px rgba(29, 33, 51, 0.38);
  --shadow-strong: 0 32px 90px -48px rgba(29, 33, 51, 0.48);
  --theme-page: #f4f6fb;
  --theme-page-soft: #e9edf5;
  --theme-surface: rgba(255, 255, 255, 0.78);
  --theme-surface-strong: rgba(255, 255, 255, 0.96);
  --theme-border: rgba(28, 31, 45, 0.13);
  --theme-text: #171925;
  --theme-text-soft: rgba(23, 25, 37, 0.78);
  --theme-text-dim: rgba(23, 25, 37, 0.6);
  --theme-control-bg: rgba(255, 255, 255, 0.78);
  --theme-control-text: #202333;
}

html,
body,
.site-header,
.nav-shell,
.glass-panel,
.metric-chip,
.button,
.pill-button,
.segmented-button,
.industry-tab,
input,
select,
textarea,
.mobile-site-nav {
  transition:
    background-color 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

/* Header controls */
.nav-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 4.6rem;
  min-height: 3rem;
  padding: 0.68rem 0.86rem;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-pill);
  background: var(--theme-control-bg);
  color: var(--theme-control-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--gold-rgb), 0.42);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

.theme-icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

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

html[data-theme="dark"] .theme-icon-sun {
  color: var(--gold-300);
}

html[data-theme="light"] .theme-icon-moon {
  color: #5a469f;
}

/* Light page foundation. The cinematic hero intentionally stays dark. */
html[data-theme="light"] body,
html[data-theme="light"] body.index-page {
  background:
    radial-gradient(circle at 10% 8%, rgba(var(--gold-rgb), 0.08), transparent 25%),
    radial-gradient(circle at 88% 13%, rgba(var(--purple-rgb), 0.08), transparent 28%),
    linear-gradient(180deg, #f7f8fc 0%, #edf1f7 100%);
  color: var(--text);
}

html[data-theme="light"] ::selection {
  background: rgba(var(--purple-rgb), 0.2);
  color: #171925;
}

html[data-theme="light"] .grain {
  opacity: 0.018;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .section-dark {
  background:
    radial-gradient(circle at 8% 14%, rgba(var(--teal-rgb), 0.09), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(var(--purple-rgb), 0.08), transparent 30%),
    linear-gradient(180deg, rgba(226, 231, 241, 0.72), rgba(247, 248, 252, 0.82));
}

html[data-theme="light"] .section-dark::before {
  opacity: 0.65;
  background:
    radial-gradient(circle at 15% 12%, rgba(var(--purple-rgb), 0.1), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(var(--teal-rgb), 0.09), transparent 34%),
    radial-gradient(circle at 60% 10%, rgba(var(--gold-rgb), 0.07), transparent 30%);
}

/* Cards and shared surfaces */
html[data-theme="light"] .glass-panel,
html[data-theme="light"] .metric-chip {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb, 176, 144, 255), 0.1), transparent 40%),
    radial-gradient(circle at 96% 88%, rgba(var(--accent-secondary-rgb, 108, 184, 190), 0.08), transparent 44%),
    rgba(255, 255, 255, 0.78);
  border-color: rgba(34, 37, 53, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 22px 60px -42px rgba(31, 37, 58, 0.42);
}

html[data-theme="light"] .glass-panel:hover {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb, 176, 144, 255), 0.14), transparent 42%),
    radial-gradient(circle at 96% 88%, rgba(var(--accent-secondary-rgb, 108, 184, 190), 0.11), transparent 46%),
    rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 26px 68px -40px rgba(var(--accent-rgb, 176, 144, 255), 0.34);
}

html[data-theme="light"] .glass-panel::before,
html[data-theme="light"] .nav-shell::before,
html[data-theme="light"] .metric-chip::before {
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.18) 34%,
    rgba(var(--accent-secondary-rgb, 108, 184, 190), 0.12) 62%,
    rgba(var(--accent-rgb, 176, 144, 255), 0.28)
  );
}

html[data-theme="light"] .glass-panel::after,
html[data-theme="light"] .metric-chip::after {
  opacity: 0.58;
}

html[data-theme="light"] p,
html[data-theme="light"] .feature-card ul,
html[data-theme="light"] .plan-card ul,
html[data-theme="light"] .output-list,
html[data-theme="light"] .summary-list,
html[data-theme="light"] .lead-summary-checklist {
  color: var(--text-soft);
}

html[data-theme="light"] .helper-text,
html[data-theme="light"] .brand-text span,
html[data-theme="light"] .chat-meta,
html[data-theme="light"] .footer-nav a,
html[data-theme="light"] .footer-meta a,
html[data-theme="light"] .footer-meta p,
html[data-theme="light"] .plan-setup,
html[data-theme="light"] .plan-period,
html[data-theme="light"] .image-fallback,
html[data-theme="light"] .question-flow-stage small,
html[data-theme="light"] .system-source-card small,
html[data-theme="light"] .system-core-card small,
html[data-theme="light"] .knowledge-fallback-core small {
  color: var(--text-dim);
}

html[data-theme="light"] .field-group label,
html[data-theme="light"] .index-page .field-group label,
html[data-theme="light"] .details-panel summary,
html[data-theme="light"] .mini-ui strong,
html[data-theme="light"] .metric-chip strong,
html[data-theme="light"] .plan-price-main,
html[data-theme="light"] .question-flow-stage strong,
html[data-theme="light"] .industry-screen-copy strong,
html[data-theme="light"] .owner-laptop strong,
html[data-theme="light"] .owner-notification strong {
  color: var(--text);
}

/* Navigation. Initial hero navigation stays dark for contrast. */
html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .nav-shell {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(39, 30, 53, 0.5), rgba(8, 12, 17, 0.72)),
    rgba(7, 8, 12, 0.72);
  color: #ffffff;
}

html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .brand-text span,
html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .site-nav a {
  color: rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .theme-toggle {
  --theme-border: rgba(255, 255, 255, 0.16);
  --theme-control-bg: rgba(255, 255, 255, 0.06);
  --theme-control-text: #ffffff;
}

html[data-theme="light"] .site-header.is-scrolled {
  background: rgba(244, 246, 251, 0.88);
  box-shadow: 0 18px 42px -32px rgba(31, 37, 58, 0.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-theme="light"] .site-header.is-scrolled .nav-shell {
  border-color: rgba(34, 37, 53, 0.13);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 20px 48px -36px rgba(31, 37, 58, 0.38);
}

html[data-theme="light"] .site-header.is-scrolled .site-nav a {
  color: rgba(23, 25, 37, 0.78);
}

html[data-theme="light"] .site-header.is-scrolled .site-nav a:hover,
html[data-theme="light"] .site-header.is-scrolled .site-nav a:focus-visible {
  color: #171925;
  background: rgba(var(--purple-rgb), 0.08);
}

html[data-theme="light"] .mobile-site-nav {
  border-color: rgba(34, 37, 53, 0.14);
  background: rgba(249, 250, 253, 0.97);
  color: var(--text);
  box-shadow: 0 20px 50px rgba(31, 37, 58, 0.2);
}

html[data-theme="light"] .mobile-site-nav a:not(.button):hover,
html[data-theme="light"] .mobile-site-nav a:not(.button):focus-visible {
  background: rgba(var(--purple-rgb), 0.08);
}

html[data-theme="light"] .nav-toggle {
  border-color: rgba(34, 37, 53, 0.15);
  background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .nav-toggle span {
  background: #202333;
}

html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .nav-toggle span {
  background: #ffffff;
}

/* Buttons and controls */
html[data-theme="light"] .button-primary {
  border-color: rgba(var(--purple-rgb), 0.34);
  background: linear-gradient(180deg, #34384d, #242738);
  color: #ffffff;
  box-shadow: 0 16px 42px -26px rgba(var(--purple-rgb), 0.55);
}

html[data-theme="light"] .button-secondary {
  border-color: rgba(34, 37, 53, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: #202333;
}

html[data-theme="light"] .button-secondary:hover {
  border-color: rgba(var(--teal-rgb), 0.34);
  background: rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .pill-button,
html[data-theme="light"] .segmented-button,
html[data-theme="light"] .industry-tab,
html[data-theme="light"] .index-page .pill-button,
html[data-theme="light"] .index-page .segmented-button,
html[data-theme="light"] .index-page .industry-tab {
  border-color: rgba(34, 37, 53, 0.14);
  background: rgba(255, 255, 255, 0.66);
  color: var(--text-soft);
}

html[data-theme="light"] .pill-button:hover,
html[data-theme="light"] .segmented-button:hover,
html[data-theme="light"] .industry-tab:hover,
html[data-theme="light"] .segmented-button.is-active,
html[data-theme="light"] .industry-tab.is-active,
html[data-theme="light"] .index-page .pill-button:hover,
html[data-theme="light"] .index-page .segmented-button:hover,
html[data-theme="light"] .index-page .industry-tab:hover,
html[data-theme="light"] .index-page .segmented-button.is-active,
html[data-theme="light"] .index-page .industry-tab.is-active {
  border-color: rgba(var(--purple-rgb), 0.3);
  background: rgba(var(--purple-rgb), 0.1);
  color: #171925;
}

html[data-theme="light"] .field-group input,
html[data-theme="light"] .field-group select,
html[data-theme="light"] .field-group textarea,
html[data-theme="light"] .assistant-form input,
html[data-theme="light"] .index-page .field-group input,
html[data-theme="light"] .index-page .field-group select,
html[data-theme="light"] .index-page .field-group textarea,
html[data-theme="light"] .index-page .assistant-form input {
  border-color: rgba(34, 37, 53, 0.14);
  background: rgba(255, 255, 255, 0.78);
  color: #171925;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .field-group input::placeholder,
html[data-theme="light"] .field-group textarea::placeholder,
html[data-theme="light"] .assistant-form input::placeholder {
  color: rgba(23, 25, 37, 0.43);
}

html[data-theme="light"] select {
  color-scheme: light;
}

/* Interior UI surfaces */
html[data-theme="light"] .mini-ui,
html[data-theme="light"] .knowledge-diagram,
html[data-theme="light"] .result-box,
html[data-theme="light"] .process-timeline li,
html[data-theme="light"] .message-assistant,
html[data-theme="light"] .message-user,
html[data-theme="light"] .index-page .mini-ui,
html[data-theme="light"] .index-page .result-box,
html[data-theme="light"] .index-page .process-timeline li,
html[data-theme="light"] .index-page .message {
  border-color: rgba(34, 37, 53, 0.11);
  background: rgba(248, 249, 253, 0.82);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .message-user,
html[data-theme="light"] .index-page .message-user {
  background: rgba(var(--gold-rgb), 0.11);
}

html[data-theme="light"] .mini-ui-chat span,
html[data-theme="light"] .index-page .mini-ui-chat span,
html[data-theme="light"] .screen-lines,
html[data-theme="light"] .screen-lines::before,
html[data-theme="light"] .screen-lines::after {
  background: rgba(34, 37, 53, 0.12);
}

html[data-theme="light"] .knowledge-diagram > div,
html[data-theme="light"] .diagram-output-row span {
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .success-card {
  border-color: rgba(var(--teal-rgb), 0.22);
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.09), rgba(var(--teal-rgb), 0.08));
}

html[data-theme="light"] .plan-card-featured,
html[data-theme="light"] #plans .plan-card-featured {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--teal-rgb), 0.12), transparent 40%),
    rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .footer-layout {
  border-top-color: rgba(34, 37, 53, 0.12);
}

html[data-theme="light"] .noscript-note {
  background: rgba(255, 255, 255, 0.82);
  color: #171925;
}

/* Generated-image fallbacks */
html[data-theme="light"] .index-page .system-source-card,
html[data-theme="light"] .index-page .system-core-card,
html[data-theme="light"] .index-page .question-flow-stage,
html[data-theme="light"] .index-page .knowledge-fallback-core,
html[data-theme="light"] .index-page .industry-fallback-screen,
html[data-theme="light"] .index-page .industry-phone-card,
html[data-theme="light"] .index-page .owner-laptop,
html[data-theme="light"] .index-page .owner-notification {
  border-color: rgba(34, 37, 53, 0.14);
  background: rgba(249, 250, 253, 0.92);
  color: var(--text);
}

html[data-theme="light"] .index-page .system-output-grid span,
html[data-theme="light"] .index-page .knowledge-source-row span,
html[data-theme="light"] .index-page .knowledge-output-row span {
  border-color: rgba(34, 37, 53, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(23, 25, 37, 0.82);
}

html[data-theme="light"] .index-page .industry-browser-bar {
  border-bottom-color: rgba(34, 37, 53, 0.1);
}

html[data-theme="light"] .index-page .industry-browser-bar span {
  background: rgba(34, 37, 53, 0.18);
}

html[data-theme="light"] .index-page .industry-screen-copy > span {
  background: rgba(34, 37, 53, 0.1);
}

/* Light-mode heading gradients use a dark base instead of white. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-theme="light"] .section-heading h2,
  html[data-theme="light"] .lively-title {
    color: transparent;
    background-image: linear-gradient(
      90deg,
      #171925 0%,
      #171925 28%,
      #7254c8 42%,
      #2b7b80 55%,
      #a66e16 67%,
      #674eb7 80%,
      #171925 92%,
      #171925 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* Preserve the intentionally dark hero and its controls in both modes. */
html[data-theme="light"] .index-page .home-hero,
html[data-theme="light"] .index-page .home-hero p,
html[data-theme="light"] .index-page .home-hero .hero-text,
html[data-theme="light"] .index-page .home-hero .hero-support-text {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .index-page .home-hero .hero-actions .button-primary {
  border-color: rgba(var(--gold-rgb), 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045)),
    rgba(11, 11, 13, 0.82);
  color: #ffffff;
}

html[data-theme="light"] .index-page .home-hero .hero-actions .button-secondary {
  border-color: rgba(113, 217, 212, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(7, 9, 13, 0.68);
  color: #ffffff;
}

html[data-theme="light"] .index-page .home-hero .image-slot-hero {
  background:
    linear-gradient(145deg, rgba(var(--gold-rgb), 0.05), rgba(var(--purple-rgb), 0.08) 58%, rgba(var(--teal-rgb), 0.055)),
    rgba(4, 6, 11, 0.78);
}

@media (max-width: 80rem) {
  .nav-shell {
    gap: 0.7rem;
    padding-inline: clamp(0.85rem, 2vw, 1.1rem);
  }

  .site-header .site-nav {
    display: none !important;
  }

  .site-header .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .nav-actions {
    margin-left: auto;
  }

  .site-header .brand,
  .site-header .brand-text {
    min-width: 0;
  }

  .site-header .brand-text span {
    white-space: nowrap;
  }

  .mobile-site-nav {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 6.6rem);
    right: clamp(1rem, 4vw, 2rem);
    left: clamp(1rem, 4vw, 2rem);
    z-index: 10010;
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.25rem;
    background: rgba(6, 8, 18, 0.97);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.mobile-menu-open .mobile-site-nav {
    display: flex;
  }

  .mobile-site-nav a {
    display: block;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    color: inherit;
    text-decoration: none;
  }

  .mobile-site-nav a:not(.button):hover,
  .mobile-site-nav a:not(.button):focus-visible {
    background: rgba(255, 255, 255, 0.07);
  }

  .mobile-site-nav .nav-cta {
    margin-top: 0.35rem;
    text-align: center;
  }
}

@media (max-width: 35rem) {
  .theme-toggle {
    min-width: 3rem;
    width: 3rem;
    padding-inline: 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,
  .nav-shell,
  .glass-panel,
  .metric-chip,
  .button,
  .pill-button,
  .segmented-button,
  .industry-tab,
  input,
  select,
  textarea,
  .mobile-site-nav,
  .theme-toggle {
    transition: none !important;
  }
}

/* =========================================================
   Light-mode visual preview | CSS-only background system
   This temporary artwork uses static gradients rather than a
   second image file. It keeps the page fast while establishing
   the final day-mode direction: gold, teal, and purple energy
   moving across a bright neutral canvas.
   ========================================================= */

html[data-theme="light"] .index-page .home-hero {
  background:
    radial-gradient(ellipse at -8% 92%, rgba(var(--gold-rgb), 0.2), transparent 40%),
    radial-gradient(ellipse at 57% 98%, rgba(var(--teal-rgb), 0.16), transparent 44%),
    radial-gradient(ellipse at 108% 84%, rgba(var(--purple-rgb), 0.2), transparent 42%),
    linear-gradient(180deg, #fbfcff 0%, #f5f7fc 50%, #edf1f8 100%);
  color: var(--text);
}

html[data-theme="light"] .index-page .home-hero .hero-background {
  background-color: #f6f8fc !important;
  background-image:
    radial-gradient(ellipse 72% 42% at -8% 88%, rgba(var(--gold-rgb), 0.28), transparent 60%),
    radial-gradient(ellipse 72% 40% at 58% 96%, rgba(var(--teal-rgb), 0.22), transparent 62%),
    radial-gradient(ellipse 68% 44% at 108% 82%, rgba(var(--purple-rgb), 0.26), transparent 62%),
    radial-gradient(circle at 72% 16%, rgba(255, 255, 255, 0.95), transparent 30%),
    linear-gradient(180deg, #fcfdff 0%, #f5f7fc 54%, #edf2f9 100%) !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Soft energy ribbons, inspired by the dark Websting artwork. */
html[data-theme="light"] .index-page .home-hero .hero-background::before {
  content: "" !important;
  position: absolute;
  inset: -18% -12% -34%;
  display: block !important;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 58% 34% at 2% 78%,
      transparent 0 54%,
      rgba(var(--gold-rgb), 0.2) 56%,
      rgba(var(--gold-rgb), 0.06) 61%,
      transparent 67%
    ),
    radial-gradient(
      ellipse 70% 34% at 58% 92%,
      transparent 0 51%,
      rgba(var(--teal-rgb), 0.17) 54%,
      rgba(var(--teal-rgb), 0.045) 60%,
      transparent 67%
    ),
    radial-gradient(
      ellipse 58% 38% at 105% 76%,
      transparent 0 52%,
      rgba(var(--purple-rgb), 0.19) 55%,
      rgba(var(--purple-rgb), 0.05) 61%,
      transparent 68%
    );
  opacity: 0.92;
  filter: blur(7px) saturate(112%);
  transform: rotate(-1.4deg);
  transform-origin: center;
}

/* Fine static dust. No animation or extra request is used. */
html[data-theme="light"] .index-page .home-hero .hero-background::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  display: block !important;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(153, 105, 24, 0.18) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 76% 20%, rgba(79, 93, 150, 0.15) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 42% 76%, rgba(43, 123, 128, 0.14) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 90% 66%, rgba(103, 78, 183, 0.13) 0 0.9px, transparent 1.5px);
  background-position: 0 0, 12px 19px, 31px 8px, 7px 37px;
  background-size: 52px 52px, 68px 68px, 76px 76px, 92px 92px;
  opacity: 0.52;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), #000 74%, transparent 100%);
}

html[data-theme="light"] .index-page .home-hero .hero-background-vignette {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.7) 31%,
      rgba(255, 255, 255, 0.2) 58%,
      rgba(255, 255, 255, 0.04) 78%,
      rgba(255, 255, 255, 0.15) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0) 55%,
      rgba(237, 241, 248, 0.36) 100%
    ) !important;
}

/* The existing canvas is reused at lower intensity in day mode. */
html[data-theme="light"] .index-page .home-hero .hero-particles {
  opacity: 0.24;
  mix-blend-mode: multiply;
  filter: saturate(0.78) contrast(0.92);
}

/* Light hero copy and controls. */
html[data-theme="light"] .index-page .home-hero,
html[data-theme="light"] .index-page .home-hero p,
html[data-theme="light"] .index-page .home-hero .hero-text,
html[data-theme="light"] .index-page .home-hero .hero-support-text {
  color: var(--text-soft);
}

html[data-theme="light"] .index-page .home-hero .hero-text {
  color: rgba(23, 25, 37, 0.76);
}

html[data-theme="light"] .index-page .home-hero .hero-support-text {
  color: rgba(23, 25, 37, 0.58);
}

html[data-theme="light"] .index-page .home-hero .hero-badge {
  border-color: rgba(var(--gold-rgb), 0.25);
  background:
    linear-gradient(135deg, rgba(var(--gold-rgb), 0.1), rgba(var(--purple-rgb), 0.06)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 42px -32px rgba(var(--gold-rgb), 0.42);
}

html[data-theme="light"] .index-page .home-hero .hero-badge-label {
  color: #8a5c12;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-theme="light"] .index-page .home-hero .hero-title-desktop > span,
  html[data-theme="light"] .index-page .home-hero .hero-title-mobile > span {
    background-image: linear-gradient(
      105deg,
      #171925 0%,
      #25283a 22%,
      #694fb8 48%,
      #347d83 74%,
      #946316 100%
    );
  }
}

html[data-theme="light"] .index-page .home-hero .hero-actions .button-primary {
  border-color: rgba(var(--purple-rgb), 0.34);
  background:
    linear-gradient(180deg, rgba(64, 68, 92, 0.98), rgba(34, 37, 53, 0.99));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 20px 45px -28px rgba(var(--purple-rgb), 0.62);
}

html[data-theme="light"] .index-page .home-hero .hero-actions .button-secondary {
  border-color: rgba(var(--teal-rgb), 0.28);
  background: rgba(255, 255, 255, 0.72);
  color: #202333;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 42px -32px rgba(var(--teal-rgb), 0.4);
}

html[data-theme="light"] .index-page .home-hero .button-play-icon {
  border-left-color: #2f7b80;
  filter: none;
}

html[data-theme="light"] .index-page .home-hero .hero-support-icon {
  border-color: rgba(var(--gold-rgb), 0.36);
  background: rgba(255, 255, 255, 0.58);
  color: #8a5c12;
}

/* Keep the existing dark system illustration as a deliberate focal card. */
html[data-theme="light"] .index-page .home-hero .image-slot-hero {
  border-color: rgba(var(--purple-rgb), 0.3);
  background:
    linear-gradient(145deg, rgba(var(--gold-rgb), 0.06), rgba(var(--purple-rgb), 0.09) 58%, rgba(var(--teal-rgb), 0.07)),
    rgba(255, 255, 255, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 38px 90px -52px rgba(31, 37, 58, 0.52),
    0 0 70px -42px rgba(var(--purple-rgb), 0.46);
}

/* Day-mode header now matches the bright hero instead of staying dark. */
html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .nav-shell {
  border-color: rgba(34, 37, 53, 0.13);
  background:
    linear-gradient(90deg, rgba(255, 251, 242, 0.76), rgba(247, 249, 253, 0.82)),
    rgba(255, 255, 255, 0.78);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 22px 58px -42px rgba(31, 37, 58, 0.34);
}

html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .brand-text span,
html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .site-nav a {
  color: rgba(23, 25, 37, 0.74);
}

html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .site-nav a:hover,
html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .site-nav a:focus-visible {
  color: #171925;
  background: rgba(var(--purple-rgb), 0.08);
}

html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .theme-toggle {
  --theme-border: rgba(34, 37, 53, 0.14);
  --theme-control-bg: rgba(255, 255, 255, 0.72);
  --theme-control-text: #202333;
}

html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .nav-toggle {
  border-color: rgba(34, 37, 53, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .index-page .site-header:not(.is-scrolled) .nav-toggle span {
  background: #202333;
}

/* Replace the dark desktop bottom blend with a light page transition. */
@media (min-width: 901px) {
  html[data-theme="light"] .index-page .home-hero::after {
    background: linear-gradient(
      to bottom,
      rgba(237, 242, 249, 0) 0%,
      rgba(237, 242, 249, 0.16) 42%,
      rgba(237, 242, 249, 0.7) 80%,
      #f4f6fb 100%
    );
  }
}

@media (max-width: 700px) {
  html[data-theme="light"] .index-page .home-hero .hero-background {
    background-image:
      radial-gradient(ellipse 82% 34% at -12% 76%, rgba(var(--gold-rgb), 0.24), transparent 62%),
      radial-gradient(ellipse 92% 32% at 58% 94%, rgba(var(--teal-rgb), 0.2), transparent 64%),
      radial-gradient(ellipse 82% 36% at 112% 70%, rgba(var(--purple-rgb), 0.24), transparent 62%),
      linear-gradient(180deg, #fcfdff 0%, #f5f7fc 56%, #edf2f9 100%) !important;
    background-position: center !important;
    background-size: cover !important;
  }

  html[data-theme="light"] .index-page .home-hero .hero-background-vignette {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.54) 0%,
        rgba(255, 255, 255, 0.28) 30%,
        rgba(255, 255, 255, 0.08) 58%,
        rgba(237, 242, 249, 0.24) 100%
      ),
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.24),
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0.24)
      ) !important;
  }

  html[data-theme="light"] .index-page .home-hero .hero-background::before {
    inset: -8% -48% -18%;
    opacity: 0.78;
    filter: blur(9px) saturate(110%);
  }

  html[data-theme="light"] .index-page .home-hero .hero-particles {
    opacity: 0.18;
  }

  html[data-theme="light"] .index-page .site-header.is-scrolled {
    background: rgba(244, 246, 251, 0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .index-page .home-hero .hero-background::before,
  html[data-theme="light"] .index-page .home-hero .hero-background::after {
    transform: none;
  }
}

/* =========================================================
   Light-mode header CTA and support icon refinements
   ========================================================= */

/* Use a CSS-drawn checkmark so the icon does not depend on a font glyph. */
.index-page .home-hero .hero-support-icon {
  position: relative;
}

.index-page .home-hero .hero-support-icon::before {
  content: "";
  width: 0.38rem;
  height: 0.68rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.06rem) rotate(45deg);
}

/* Brighten the navigation CTA and keep its label readable in day mode. */
html[data-theme="light"] .index-page .site-header .site-nav .nav-cta,
html[data-theme="light"] .index-page .mobile-site-nav .nav-cta {
  border-color: rgba(var(--gold-rgb), 0.5);
  background:
    linear-gradient(135deg, #7758cf 0%, #5b67be 56%, #367f86 100%);
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(20, 22, 35, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 16px 34px -22px rgba(92, 75, 184, 0.72);
}

html[data-theme="light"] .index-page .site-header .site-nav .nav-cta:hover,
html[data-theme="light"] .index-page .site-header .site-nav .nav-cta:focus-visible,
html[data-theme="light"] .index-page .mobile-site-nav .nav-cta:hover,
html[data-theme="light"] .index-page .mobile-site-nav .nav-cta:focus-visible {
  border-color: rgba(var(--gold-rgb), 0.68);
  background:
    linear-gradient(135deg, #8263d8 0%, #6672c9 56%, #3c8d93 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 18px 38px -20px rgba(92, 75, 184, 0.78);
}



/* =========================================================
   2026-07-13 Safari-safe support check and brighter header CTA
   ========================================================= */

/* The support mark is an inline SVG so it cannot disappear because of
   pseudo-element rendering or font differences. */
.index-page .home-hero .hero-support-icon::before {
  content: none !important;
  display: none !important;
}

.index-page .home-hero .hero-support-check {
  display: block;
  width: 0.82rem;
  height: 0.82rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A dedicated class plus important declarations prevents older button and
   navigation rules from darkening the day-mode header call to action. */
html[data-theme="light"] body.index-page .site-header .header-cta,
html[data-theme="light"] body.index-page .mobile-site-nav .header-cta,
html[data-theme="light"] body.ai-tools-page .site-header .header-cta,
html[data-theme="light"] body.ai-tools-page .mobile-site-nav .header-cta {
  border-color: rgba(103, 78, 183, 0.46) !important;
  background: linear-gradient(135deg, #8b6ee8 0%, #667fdc 52%, #3d9ea2 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(24, 22, 48, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 12px 28px -16px rgba(103, 78, 183, 0.8),
    0 8px 22px -18px rgba(61, 158, 162, 0.72) !important;
}

html[data-theme="light"] body.index-page .site-header .header-cta:hover,
html[data-theme="light"] body.index-page .site-header .header-cta:focus-visible,
html[data-theme="light"] body.index-page .mobile-site-nav .header-cta:hover,
html[data-theme="light"] body.index-page .mobile-site-nav .header-cta:focus-visible,
html[data-theme="light"] body.ai-tools-page .site-header .header-cta:hover,
html[data-theme="light"] body.ai-tools-page .site-header .header-cta:focus-visible,
html[data-theme="light"] body.ai-tools-page .mobile-site-nav .header-cta:hover,
html[data-theme="light"] body.ai-tools-page .mobile-site-nav .header-cta:focus-visible {
  border-color: rgba(154, 104, 21, 0.6) !important;
  background: linear-gradient(135deg, #987bed 0%, #718ae4 52%, #46aaad 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 14px 32px -14px rgba(103, 78, 183, 0.84),
    0 10px 24px -16px rgba(61, 158, 162, 0.78) !important;
}

/* Live demo light-mode readability correction */
html[data-theme="light"] .index-page #live-demo .system-benefits .metric-chip {
  border-color: rgba(34, 37, 53, 0.12);
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--accent-rgb,176,144,255),0.09), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(var(--accent-secondary-rgb,108,184,190),0.07), transparent 46%),
    rgba(255,255,255,0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    0 20px 48px -40px rgba(31,37,58,0.24);
}

html[data-theme="light"] .index-page #live-demo .metric-chip-kicker {
  color: rgba(var(--accent-rgb,176,144,255),0.95);
}

html[data-theme="light"] .index-page #live-demo .system-benefits .metric-chip strong {
  color: #171925 !important;
}

html[data-theme="light"] .index-page #live-demo .system-benefits .metric-chip span {
  color: rgba(23,25,37,0.66) !important;
}

/* =========================================================
   Light-mode pricing contrast and industry-image definition
   ========================================================= */

html[data-theme="light"] #plans .plan-price-main,
html[data-theme="light"] #plans .plan-amount {
  color: #242738;
}

html[data-theme="light"] #plans .plan-currency {
  color: #9a6410;
}

html[data-theme="light"] #plans .plan-period,
html[data-theme="light"] #plans .plan-setup {
  color: rgba(23, 25, 37, 0.68);
}

html[data-theme="light"] .index-page #examples .industry-visual {
  border: 2px solid rgba(var(--purple-rgb), 0.3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.92),
    0 18px 42px -28px rgba(31, 37, 58, 0.34),
    0 0 0 4px rgba(var(--purple-rgb), 0.045);
}

html[data-theme="light"] .index-page #examples .industry-visual:hover {
  border-color: rgba(var(--purple-rgb), 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.96),
    0 22px 48px -28px rgba(31, 37, 58, 0.38),
    0 0 0 4px rgba(var(--purple-rgb), 0.065);
}


/* =========================================================
   Working project inquiry form: light-mode states
   ========================================================= */

html[data-theme="light"] .index-page #contact .inquiry-status-card,
html[data-theme="light"] .index-page #contact .success-card {
  border-color: rgba(34, 37, 53, 0.12);
  background: rgba(248, 249, 253, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .index-page #contact .inquiry-status-card > strong,
html[data-theme="light"] .index-page #contact .success-card > strong {
  color: var(--text);
}

html[data-theme="light"] .index-page #contact .inquiry-status-loading {
  border-color: rgba(var(--purple-rgb), 0.24);
}

html[data-theme="light"] .index-page #contact .inquiry-status-spinner {
  border-color: rgba(34, 37, 53, 0.13);
  border-top-color: var(--purple-300);
}

html[data-theme="light"] .index-page #contact .inquiry-status-error {
  border-color: rgba(172, 54, 69, 0.28);
  background: rgba(172, 54, 69, 0.07);
}

html[data-theme="light"] .index-page #contact .inquiry-status-error > strong {
  color: #922f3f;
}

html[data-theme="light"] .index-page #contact .inquiry-status-success {
  border-color: rgba(var(--teal-rgb), 0.24);
  background:
    linear-gradient(135deg, rgba(var(--purple-rgb), 0.07), rgba(var(--teal-rgb), 0.07)),
    rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .index-page #contact .inquiry-status-success > strong {
  color: #276e73;
}


/* Pickaxe project inquiry review in light mode */
html[data-theme="light"] .index-page #contact .inquiry-review-section,
html[data-theme="light"] .index-page #contact .inquiry-contact-summary {
  border-top-color: rgba(34, 37, 53, 0.1);
}

html[data-theme="light"] .index-page #contact .inquiry-plan-fit {
  border-color: rgba(var(--purple-rgb), 0.22);
  background: rgba(var(--purple-rgb), 0.075);
}