.topnav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); background: rgba(var(--bg-rgb), 0.6); border-bottom: 1px solid var(--border); }
.topnav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 64px; }
.topnav-links { display: flex; gap: var(--space-5); }
.topnav-links a { color: var(--muted); font-size: 14px; font-weight: 500; transition: color var(--t) var(--ease); }
.topnav-links a:hover { color: var(--text); }
.topnav-actions { display: flex; align-items: center; gap: var(--space-3); }

.hero { position: relative; text-align: center; padding: var(--space-8) 0 var(--space-7); }
.hero h1 { font-size: clamp(36px, 7vw, 68px); font-weight: 800; margin: var(--space-4) auto; max-width: 14ch; background: linear-gradient(180deg, #ffffff, #9a9a9a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { font-size: clamp(16px, 2vw, 19px); max-width: 600px; margin: 0 auto var(--space-6); }
.hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.hero-glow { position: absolute; inset: 10% 25% auto; height: 300px; background: var(--accent); filter: blur(140px); opacity: 0.07; z-index: -1; animation: float 12s var(--ease) infinite alternate; }
@keyframes float { from { transform: translateY(0) scale(1); } to { transform: translateY(40px) scale(1.15); } }

.section { padding: var(--space-7) 0; }
.section-head { text-align: center; margin-bottom: var(--space-6); }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); }

.grid-4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }

.feature-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-2); background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.25); margin-bottom: var(--space-4); }
.card p { margin: 0; font-size: 14px; }

.price { position: relative; display: flex; flex-direction: column; }
.price ul { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-5); flex: 1; }
.price li { padding: 7px 0 7px 26px; position: relative; color: var(--muted); font-size: 14px; }
.price li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 14px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.2); box-shadow: inset 0 0 0 4px var(--accent); }
.price-amount { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; }
.price-amount span { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.price-featured { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: var(--shadow), 0 0 40px rgba(var(--accent-rgb), 0.18); }
.price-badge { position: absolute; top: var(--space-5); right: var(--space-5); }

.footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-6) 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }

@media (max-width: 640px) {
  .topnav-links { display: none; }
  .hero { padding-top: var(--space-7); }
}