/* V3 Modern: animated gradient + glassmorphism */
:root{
  --bg:#0b0f19;
  --bg-soft:#0e1526;
  --card:rgba(255,255,255,.08);
  --text:#e6eefc;
  --muted:#9fb3d1;
  --brand:#7c3aed;
  --brand-2:#22d3ee;
  --accent:#a3e635;
  --border:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7fafc; --bg-soft:#ecf3ff;
    --card:rgba(255,255,255,.75);
    --text:#0f172a; --muted:#475569;
    --border:rgba(15,23,42,.12);
    --shadow:0 10px 30px rgba(2,8,23,.08);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -20%, rgba(124,58,237,.25), transparent 40%),
              radial-gradient(1200px 800px at 110% 0%, rgba(34,211,238,.22), transparent 40%),
              var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family: 'Sora', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
h1{font-size:clamp(2rem, 3.8vw, 3.2rem); letter-spacing:-0.02em}
h2{font-size:clamp(1.4rem, 2.5vw, 2rem)}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px; margin:0 auto; padding:0 1.1rem}
.section{padding:4rem 0}
.section.compact{padding:2.5rem 0}

.topbar{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.6rem}
.brand .logo{width:34px; height:34px; border-radius:10px; background:conic-gradient(from 180deg, var(--brand), var(--brand-2), var(--brand)); box-shadow:var(--shadow)}
.brand .name{font-weight:900; letter-spacing:.2px}
.brand small{display:block; color:var(--muted); font-weight:700; font-size:.72rem; letter-spacing:.4px}
.menu{display:flex; gap:.25rem; align-items:center; flex-wrap:wrap}
.menu a{padding:.55rem .8rem; border-radius:999px; font-weight:800; color:var(--text)}
.menu a[aria-current="page"]{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff}
.cta{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; padding:.7rem 1.1rem; border-radius:999px; font-weight:900; display:inline-block; box-shadow:var(--shadow)}
.cta.secondary{background:linear-gradient(90deg, var(--accent), var(--brand-2)); color:#041016}
.cta:hover{text-decoration:none; filter:saturate(108%)}
.mobile-toggle{display:none}
@media (max-width: 880px){
  .menu{display:none; width:100%; flex-direction:column; align-items:flex-start; padding:.6rem 0}
  .menu.open{display:flex}
  .mobile-toggle{display:inline-flex; border:1px solid var(--border); padding:.45rem .7rem; border-radius:999px; background:transparent; color:var(--text); font-weight:800}
}

.ribbon{ text-align:center; padding:.45rem .75rem; font-weight:800; letter-spacing:.02em; color:#0b1220;
         background:linear-gradient(90deg, var(--accent), var(--brand-2)); border-bottom:1px solid var(--border) }

.hero{ padding:5.5rem 0 4rem; position:relative; overflow:hidden; }
.hero .bg-blob{
  position:absolute; inset:-10% -10% auto auto; width:720px; height:720px; filter: blur(80px); opacity:.35;
  background: radial-gradient(closest-side, var(--brand-2), transparent),
              radial-gradient(closest-side, var(--brand), transparent);
  animation: float 18s ease-in-out infinite alternate;
}
@keyframes float{ 0%{transform: translateY(-20px) translateX(0)} 100%{transform: translateY(30px) translateX(-20px)} }

.badges{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.badge{background:var(--card); color:var(--text); border:1px solid var(--border); padding:.4rem .6rem; border-radius:999px; font-weight:800; font-size:.88rem}

.grid{display:grid; gap:1.1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width: 980px){ .grid-3,.grid-2{grid-template-columns:1fr} }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow); backdrop-filter: blur(12px) saturate(120%) }
.card h3{margin:.1rem 0 .45rem; font-size:1.1rem}

.pill{display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--border); background:var(--card); font-weight:800}
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.plan{position:relative}
.price{font-size:1.9rem; font-weight:900; letter-spacing:-.01em}
.pop::after{ content:"POPULAR"; position:absolute; top:10px; right:10px; font-size:.65rem; font-weight:900; letter-spacing:.12em;
             background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; padding:.25rem .45rem; border-radius:6px }

.kicker{color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:900; font-size:.74rem}

.inline{display:flex; gap:.6rem; flex-wrap:wrap}
.inline input, .inline select, .inline textarea{
  padding:.65rem .8rem; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.06);
  color:var(--text); outline:none; width:100%;
}
.inline textarea{min-height:120px}
.inline button{border:none}

.footer{padding:3rem 0 4rem; background:linear-gradient(180deg, rgba(124,58,237,.12), rgba(34,211,238,.10), transparent), var(--bg-soft); color:var(--text); border-top:1px solid var(--border)}
.footer .grid-3{grid-template-columns:2fr 1fr 1fr}
small,.small{font-size:.88rem; color:var(--muted)}
hr{border:0; border-top:1px solid var(--border); margin:1.2rem 0}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border); padding:.6rem; text-align:left}
.notice{background:linear-gradient(120deg, rgba(163,230,53,.2), rgba(34,211,238,.18)); border:1px solid var(--border); padding:1rem; border-radius:12px; color:var(--text)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.sticky-cta{position:fixed; bottom:16px; left:16px; right:16px; display:none; z-index:60}
.sticky-cta a{display:block; text-align:center}
@media (max-width: 740px){ .sticky-cta{display:block} }
.theme-toggle{display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem; border-radius:999px; border:1px solid var(--border); background:var(--card); font-weight:800}