/* NalyOS convergence layer for the existing marketing composition. */

.naly-marketing {
  --blue: var(--acc);
  --blue-700: var(--acc-hover);
  --blue-900: var(--acc-grad-a);
  --grey: var(--text-2);
  --grey-2: var(--text-3);
  --line: var(--naly-surface-border);
  --card-border: var(--naly-surface-border);
  --surface: var(--surface-soft);
  --green: var(--emerald);
  --amber: var(--warning);
  --radius: var(--naly-r-control);
  --card-radius: var(--naly-r-card);
  --shadow-soft: var(--naly-elev-1);
  --shadow-card: var(--naly-elev-2);
  --shadow-float: var(--naly-elev-2);
  --shadow-panel: var(--naly-elev-2);
  --shadow-dash: var(--naly-elev-3);
  --text-strong: var(--text-1);
  --text-body: var(--text-2);
  --text-soft: var(--text-3);
  --border-strong: var(--naly-control-border);

  color: var(--text-1);
  background: var(--bg-page);
}

.naly-marketing :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--margherita);
  outline-offset: 3px;
}

.naly-marketing .btn {
  min-height: var(--tap);
  border-radius: var(--naly-r-control);
}

.naly-marketing .btn-primary {
  border-color: var(--naly-surface-border);
  background: var(--naly-cta-bg);
  box-shadow: var(--naly-cta-shadow);
  color: var(--text-on-dark);
}

.naly-marketing .btn-primary:hover {
  border-color: var(--naly-surface-border);
  background: var(--naly-cta-bg);
  box-shadow: var(--naly-elev-2);
}

.naly-marketing .btn-outline {
  border: var(--naly-control-bw) solid var(--naly-control-border);
  background: var(--naly-control-bg);
  box-shadow: var(--naly-control-shadow);
  color: var(--text-1);
}

/* The dark product identity is retained for marketing chrome and hero. */
.naly-marketing .nav {
  border-color: var(--naly-chrome-border);
  background: linear-gradient(180deg, var(--acc-grad-a), var(--ink-0));
  box-shadow: var(--naly-elev-3);
}

.naly-marketing .nav-cta .btn-login {
  min-height: var(--tap);
  border-color: var(--naly-control-border);
  border-radius: var(--naly-r-control);
  background: var(--naly-control-bg);
  box-shadow: var(--naly-control-shadow);
  color: var(--text-on-dark);
}

.naly-marketing .nav-toggle {
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--naly-r-icon);
}

.naly-marketing .nav-drawer {
  border-color: var(--naly-chrome-border);
  background: linear-gradient(180deg, var(--acc-grad-a), var(--ink-0));
  box-shadow: var(--naly-elev-3);
}

.naly-marketing .d-link {
  min-height: var(--tap);
}

.naly-marketing .hero {
  background:
    radial-gradient(
      circle at 50% 0%,
      color-mix(in srgb, var(--acc-lift) 18%, transparent),
      transparent 34rem
    ),
    linear-gradient(165deg, var(--acc-grad-a), var(--ink-0));
}

.naly-marketing .hero::after {
  background: var(--bg-page);
}

.naly-marketing .hero-photo {
  border-color: var(--naly-surface);
  border-radius: var(--naly-r-card);
  box-shadow: var(--naly-elev-3);
}

.naly-marketing
  :is(
    .dash,
    .kpi,
    .wcard,
    .uipanel,
    .tcard,
    .pcard
  ) {
  border-color: var(--naly-surface-border);
  background: var(--naly-surface);
  box-shadow: var(--naly-elev-2);
}

.naly-marketing :is(.dash, .uipanel, .pcard) {
  border-radius: var(--naly-r-card);
}

.naly-marketing :is(.kpi, .wcard, .tcard) {
  border-radius: var(--naly-r-tile);
}

.naly-marketing :is(.dash-top, .rail, .uihead) {
  border-color: var(--naly-surface-border);
  background: var(--surface-soft);
}

.naly-marketing .rail .upgrade {
  border-color: var(--naly-surface-border);
  border-radius: var(--naly-r-control);
  background: var(--naly-surface);
  box-shadow: var(--naly-elev-1);
}

.naly-marketing .rail a {
  border-radius: var(--naly-r-control);
}

.naly-marketing .rail a.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}

.naly-marketing :is(.logos, .sec) {
  background: var(--bg-page);
}

.naly-marketing .logo-grid span {
  color: var(--text-2);
}

.naly-marketing .feat-num {
  color: var(--text-3);
}

.naly-marketing .learn {
  color: var(--acc-ink);
}

.naly-marketing .pcard.pop {
  border-color: var(--acc);
  box-shadow: var(--naly-elev-3);
}

.naly-marketing .pbadge {
  background: var(--acc);
  color: var(--acc-on);
}

.naly-marketing footer {
  padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
  .naly-marketing .wrap {
    padding-inline: var(--space-4);
  }

  .naly-marketing .nav-inner {
    min-height: calc(var(--tap) + var(--space-4));
  }

  .naly-marketing .pcard {
    border-radius: var(--naly-r-card);
  }
}

@media (prefers-reduced-motion: reduce) {
  .naly-marketing *,
  .naly-marketing *::before,
  .naly-marketing *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

:root[data-reduced-motion="true"] .naly-marketing .reveal,
:root[data-reduced-motion="true"] .naly-marketing .stagger > * {
  opacity: 1;
  transform: none;
}

:root[data-reduced-motion="true"] .naly-marketing *,
:root[data-reduced-motion="true"] .naly-marketing *::before,
:root[data-reduced-motion="true"] .naly-marketing *::after {
  scroll-behavior: auto;
  animation-duration: 0.01ms;
  transition-duration: 0.01ms;
}