/* Marketing pages — visual polish layer. Loaded after app.css, only adds/overrides. */

html { scroll-behavior: smooth; }

/* Sticky, blurred nav */
.mkt-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.mkt-nav.scrolled { border-bottom-color: var(--border); box-shadow: 0 2px 14px rgba(0,0,0,.06); }

/* Hero: soft glow + floating illustration */
.hero { position: relative; padding-top: 72px; padding-bottom: 72px; }
.hero::before {
  content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 340px; max-width: 90vw;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 70%);
  filter: blur(10px); z-index: -1; pointer-events: none;
}
.hero img { animation: fs-float 5s ease-in-out infinite; }
@keyframes fs-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero .badge { animation: fs-pulse 2.4s ease-in-out infinite; }
@keyframes fs-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--secondary) 30%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* Section rhythm */
.feature-grid { margin-top: 64px; margin-bottom: 64px; }
.feature-grid h2, section.hero h2 { position: relative; display: inline-block; }
.feature-grid > h2::after, section.hero > h2::after {
  content: ""; display: block; width: 52px; height: 3px; margin: 10px auto 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 999px;
}

/* Card lift on hover — feature cards, integration cards, plan cards */
.card, .card.feature {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card:hover, .card.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(23,32,51,.05), 0 16px 32px rgba(23,32,51,.10);
  border-color: color-mix(in srgb, var(--secondary) 35%, var(--border));
}
:root[data-theme="dark"] a.card:hover, :root[data-theme="dark"] .card.feature:hover,
:root.dark a.card:hover, :root.dark .card.feature:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 18px 36px rgba(0,0,0,.4);
}
.feature .ico { transition: transform .18s ease, background .18s ease; }
.card.feature:hover .ico, a.card:hover .ico { transform: scale(1.08) rotate(-4deg); }

/* Buttons: tactile hover/press */
.btn { transition: transform .12s ease, filter .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary:hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--secondary); outline-offset: 2px;
}

/* Pricing "Popular" card gets a subtle glow */
.feature-grid .grid .card[style*="border:2px solid"] {
  box-shadow: 0 4px 8px rgba(23,32,51,.06), 0 20px 40px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Courier badges: gentle hover */
.badge { transition: transform .15s ease, background .15s ease; }
.badge:hover { transform: translateY(-2px); }

/* Scroll-reveal (progressive enhancement — see reveal.js) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero img, .hero .badge { animation: none; }
  html { scroll-behavior: auto; }
}

/* Slim, brand-tinted scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--secondary) 50%, transparent); }

/* Footer: a touch more breathing room */
footer.mkt { padding-top: 40px; padding-bottom: 40px; }