:root {
  --fr-ink: var(--heading-color); --fr-muted: var(--muted-color);
  --fr-line: var(--border-color); --fr-soft: var(--background-color);
  --fr-primary: var(--accent-color); --fr-primary-dark: var(--accent-color);
  --fr-accent: var(--info-color);
}
html { scroll-behavior: smooth; }

.marketing-nav {
  background: var(--surface-color);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(16,24,40,.06);
}
.brand-mark {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}
.hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(124,58,237,.14), transparent 24rem),
    radial-gradient(circle at 15% 0%, rgba(79,70,229,.13), transparent 30rem),
    linear-gradient(180deg, var(--surface-color), var(--background-color));
  border-bottom: 1px solid var(--fr-line);
}
.eyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 800;
  color: var(--fr-primary);
}
.display-tight { letter-spacing: -.045em; }
.text-balance { text-wrap: balance; }
.hero-panel {
  background: var(--surface-color);
  border: 1px solid var(--fr-line);
  border-radius: 1.5rem;
  box-shadow: 0 1.5rem 4rem rgba(16,24,40,.10);
}
.mock-browser {
  border: 1px solid var(--fr-line);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface-color);
}
.mock-bar {
  border-bottom: 1px solid var(--fr-line);
  background: var(--background-color);
}
.mock-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #d0d5dd;
}
.metric {
  border: 1px solid var(--fr-line);
  border-radius: 1rem;
  padding: 1rem;
  background: var(--surface-color);
}
.scan-demo {
  border: 1px solid var(--fr-line);
  border-radius: 1.5rem;
  background: var(--surface-color);
  overflow: hidden;
  box-shadow: 0 1.25rem 3rem rgba(16,24,40,.07);
}
.scan-demo-header {
  border-bottom: 1px solid var(--fr-line);
  background: var(--background-color);
}
.scan-progress-track {
  height: .45rem;
  border-radius: 999px;
  background: #eaecf0;
  overflow: hidden;
}
.scan-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fr-primary), var(--fr-accent));
  transition: width .08s linear;
}
.scan-stat {
  padding: 1.15rem 0;
  border-top: 1px solid var(--fr-line);
}
.scan-stat-value {
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -.045em;
  line-height: 1;
}
.feature-card, .price-card {
  border: 1px solid var(--fr-line);
  border-radius: 1.25rem;
  background: var(--surface-color);
  height: 100%;
}
.feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: .85rem;
  background: #eef2ff;
  color: var(--fr-primary);
  font-size: 1.2rem;
}
.section-soft { background: var(--fr-soft); }
.section-dark {
  --heading-color: #fff;
  color: #fff;
  background: linear-gradient(145deg, #101828, #1d2939 60%, #312e81);
}
.price-card.featured {
  border: 2px solid var(--fr-primary);
  box-shadow: 0 1.2rem 3rem rgba(79,70,229,.12);
  position: relative;
}
.price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.check-list { list-style: none; padding-left: 0; }
.check-list li { display: flex; gap: .65rem; margin-bottom: .75rem; }
.check-list i { color: #12b76a; }
.muted { color: var(--fr-muted); }


.marketing-footer { border-top: 1px solid var(--fr-line); }
.sticky-pricing { position: sticky; top: 6rem; }
@media (max-width: 991.98px) {
  .sticky-pricing { position: static; }
}