/* Base (no Tailwind @apply; pure CSS for CDN setup) */
:root{
  --grad: linear-gradient(90deg,#2563eb,#d946ef);
  --grad2: linear-gradient(135deg,#2563eb,#22d3ee);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}

/* Links */
.nav-link{color:#cbd5e1;transition:color .2s ease}
.nav-link:hover{color:#fff}
.nav-link.active{color:#fff}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:0.75rem;background-image:var(--grad);color:#fff;font-weight:600;box-shadow:0 10px 20px rgba(0,0,0,.25);transition:filter .2s ease,transform .2s ease,box-shadow .2s ease}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 16px 28px rgba(0,0,0,.3)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:0.75rem;border:1px solid rgba(255,255,255,.1);color:#e2e8f0;background:transparent;transition:background-color .2s ease}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* Cards & utilities */
.card{border-radius:1rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.card-title{margin-top:.5rem;font-weight:700}
.card-text{margin-top:.25rem;color:#cbd5e1;font-size:.95rem}
.icon{height:2.75rem;width:2.75rem;border-radius:.75rem;background-image:var(--grad2)}
.check{display:inline-block;height:1rem;width:1rem;border-radius:9999px;background:linear-gradient(135deg,#10b981,#22c55e)}
.badge{position:absolute;top:-.5rem;right:-.5rem;font-size:10px;font-weight:700;background-image:var(--grad);border-radius:9999px;padding:.15rem .35rem}

/* Forms */
.label{display:block;margin-bottom:.25rem;font-size:.9rem;color:#cbd5e1}
.input{width:100%;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);padding:.5rem 1rem;color:#fff;outline:none;transition:border-color .2s ease}
.input::placeholder{color:#94a3b8}
.input:focus{border-color:#3b82f6}

/* Stats */
.stat{border-radius:1rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);padding:1.25rem;text-align:center}
.stat-number{font-size:1.875rem;font-weight:800;background-image:linear-gradient(90deg,#60a5fa,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{color:#94a3b8;font-size:.875rem}

/* Pricing */
.plan-card{position:relative;border-radius:1rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);padding:1.5rem;transition:box-shadow .2s ease}
.plan-card.featured{border-width:2px;background:rgba(255,255,255,.08)}
.plan-name{font-weight:700;font-size:1.125rem}
.plan-price{margin-top:.25rem;font-size:1.75rem;font-weight:800;color:#93c5fd}
.plan-list{margin-top:1rem;color:#cbd5e1;font-size:.95rem}
.plan-list li{margin:.35rem 0}
.ribbon{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);border-radius:9999px;background-image:var(--grad);padding:.25rem .6rem;font-size:.75rem;font-weight:700}

/* FAQ */
.faq>summary{cursor:pointer;list-style:none;padding:1rem;font-weight:700;transition:background-color .2s ease}
.faq[open]>summary{background:rgba(255,255,255,.05)}
.faq>p{padding:1rem;color:#cbd5e1}