#pricing { position: relative; overflow: hidden; }
.bg-grid {
    position: absolute; inset: 0; pointer-events: none; z-index: -2;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(2,8,23,0.06) 1px, transparent 0);
    background-size: 24px 24px;
    mask-image: radial-gradient(65% 55% at 50% 0%, #000 30%, transparent 70%);
}
.bg-aurora {
    position: absolute; inset: -20% -10% auto -10%; height: 48vh; z-index: -1; filter: blur(32px);
    background:
        radial-gradient(30% 40% at 20% 20%, rgba(99,102,241,0.12), transparent 60%),
        radial-gradient(30% 40% at 80% 0%, rgba(34,211,238,0.12), transparent 70%),
        radial-gradient(25% 30% at 50% 80%, rgba(2,8,23,0.06), transparent 70%);
}

/* Hero */
.pricing-hero { padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(28px, 5vw, 60px); text-align: center; }
.pricing-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
    background: #f3f4f6; border: 1px solid var(--border); color: #374151; font-size: 14px;
}
.pricing-hero h1 { margin-top: 14px; }
.pricing-hero .subtitle { margin-top: 12px; }
.pricing-hero .hero-ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Billing toggle (non-functional hint) */
.billing-toggle {
    display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-bottom: 18px; color: #6b7280;
}
.billing-toggle .label { font-weight: 700; }
.billing-toggle .label.active { color: #111827; }
.billing-toggle .save {
    background: #ecfeff; color: #0b0f19; border: 1px solid #c6f6fd; border-radius: 999px; padding: 2px 8px; font-size: 12px; margin-left: 6px;
}

/* Plans grid */
.plan-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 18px; }
.plan-card {
    grid-column: span 3; display: grid; gap: 14px; padding: 20px; border-radius: 18px;
    border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-elev);
    transform: translateY(10px); opacity: 0;
    transition: transform var(--speed-3) var(--easing), opacity var(--speed-3) var(--easing), box-shadow var(--speed-2) var(--easing);
}
.plan-card.visible { transform: translateY(0); opacity: 1; }
.plan-card:hover { box-shadow: 0 16px 44px rgba(2,8,23,0.10); }
.plan-card .head { display: grid; gap: 6px; }
.plan-card .name { font-weight: 800; letter-spacing: .2px; }
.plan-card .desc { color: #596072; }
.plan-card .price { font-size: 34px; font-weight: 800; letter-spacing: -.01em; }
.plan-card .period { color: #6b7280; font-weight: 600; margin-left: 6px; font-size: 14px; }
.plan-card .features { display: grid; gap: 8px; padding-left: 18px; color: #2b3343; }
.plan-card .cta { margin-top: 6px; display: grid; gap: 10px; }
.plan-card .badge {
    justify-self: end;
    padding: 6px 10px; border-radius: 999px; background: #111827; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .2px;
}

/* Featured (Most Popular) */
.plan-card.featured {
    border-color: rgba(16,185,129,.25);
    box-shadow: 0 18px 56px rgba(16,185,129,0.15), var(--shadow-elev);
    position: relative;
}
.plan-card.featured::after {
    content: "";
    position: absolute; inset: -1px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(16,185,129,0.12), transparent 30%, transparent 100%);
    pointer-events: none;
}

/* Micro motion: icon bullets */
.plan-card li { position: relative; }
.plan-card li::marker { color: #111827; }
.plan-card:hover li::marker { color: #10b981; }

/* CTA buttons inside cards */
.plan-card .btn { width: 100%; }
.plan-card .btn-ghost { background: #fff; }

/* FAQ */
.faq header { text-align: center; margin-bottom: 22px; }
.faq-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.qa { grid-column: span 6; }

/* CTA polish (reuse from global) */
.cta .cta-inner { text-align: center; padding: clamp(24px, 6vw, 48px); }

/* Responsive */
@media (max-width: 1199px) {
    .plan-card { grid-column: span 6; }
    .qa { grid-column: span 12; }
}
@media (max-width: 699px) {
    .plan-card { grid-column: span 12; }
    .pricing-hero { text-align: left; }
    .pricing-hero .hero-ctas { justify-content: flex-start; }
}