/* ============================================
   Pricing Page 
   ============================================ */

:root{
  --blue-50:#eaf4ff;
  --blue-100:#cfe6ff;
  --blue-300:#6fb4ff;
  --blue-400:#3d97ff;
  --blue-500:#2ea4ff;
  --blue-600:#1478f0;
  --blue-700:#0b52c9;
  --ink:#04122a;
  --ink-2:#0a1d3d;
  --text:#e6eeff;
  --muted:#9fb3d1;
  --card:rgba(255,255,255,0.04);
  --card-brd:rgba(120,170,255,0.18);
  --glow: 0 0 40px rgba(46,164,255,.35);
  --grad: linear-gradient(135deg,#2ea4ff 0%,#1478f0 50%,#7a5bff 100%);
  --grad-soft: linear-gradient(135deg,rgba(46,164,255,.18),rgba(122,91,255,.12));
  --radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 800px at 10% -10%, #0d245a 0%, transparent 60%),
             radial-gradient(1000px 700px at 100% 10%, #1a2a6b 0%, transparent 55%),
             linear-gradient(180deg, #030b1e 0%, #050f28 100%);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ==== Background layers ==== */
.bg-orbs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 14s ease-in-out infinite}
.orb-1{width:520px;height:520px;background:#1478f0;top:-160px;left:-160px}
.orb-2{width:460px;height:460px;background:#7a5bff;bottom:-180px;right:-120px;animation-delay:-4s}
.orb-3{width:380px;height:380px;background:#2ea4ff;top:40%;left:55%;animation-delay:-8s;opacity:.35}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-40px) scale(1.08)}
}

#particles{position:fixed;inset:0;z-index:-1;pointer-events:none}
.grid-overlay{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.25;
  background-image:linear-gradient(rgba(120,170,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,170,255,.06) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* ==== Hero ==== */
.hero{padding:110px 0 60px;position:relative}
.hero-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:rgba(46,164,255,.1);
  border:1px solid rgba(46,164,255,.3);
  color:var(--blue-300);font-weight:600;font-size:.85rem;letter-spacing:.3px;
  backdrop-filter:blur(10px);
}
.hero-chip i{color:var(--blue-400)}
.hero-title{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(2.2rem,5.5vw,4.4rem);
  line-height:1.05;margin:22px 0 18px;letter-spacing:-1.5px;
}
.gradient-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 200%;
  animation:gradShift 6s ease infinite;
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.hero-sub{
  color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem);
  max-width:640px;margin:0 auto;line-height:1.6;
}
.hero-meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;
  margin-top:26px;color:var(--muted);font-size:.9rem;
}
.hero-meta i{color:var(--blue-400);margin-right:6px}
.hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5;align-self:center}

/* ==== Pricing ==== */
.pricing-section{padding:40px 0 120px;position:relative}

.plan-card{
  position:relative;height:100%;
  padding:34px 28px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--card-brd);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -25px rgba(0,10,40,.7), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s;
  overflow:hidden;
  display:flex;flex-direction:column;
  animation:cardFloat 8s ease-in-out infinite;
}
.plan-card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  padding:1px;background:linear-gradient(140deg,rgba(46,164,255,.6),transparent 40%,transparent 60%,rgba(122,91,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.35;transition:opacity .4s;
  pointer-events:none;
}
.plan-card::after{
  content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius) + 2px);
  background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),rgba(46,164,255,.25),transparent 60%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.plan-card:hover{
  transform:translateY(-10px);
  border-color:rgba(46,164,255,.5);
  box-shadow:0 30px 70px -25px rgba(46,164,255,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.plan-card:hover::before{opacity:1}
.plan-card:hover::after{opacity:1}

.plan-card.featured{
  background:linear-gradient(180deg,rgba(46,164,255,.14),rgba(122,91,255,.06));
  border-color:rgba(46,164,255,.5);
  transform:translateY(-6px);
}
.plan-card.featured::before{opacity:.9}
.plan-card.enterprise{
  background:linear-gradient(180deg,rgba(122,91,255,.14),rgba(46,164,255,.05));
}

@keyframes cardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.plan-card.featured{animation-delay:-2s}
.plan-card.enterprise{animation-delay:-4s}

/* Badge */
.plan-badge{
  position:absolute;top:18px;right:18px;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(46,164,255,.15);color:var(--blue-300);
  border:1px solid rgba(46,164,255,.4);
  box-shadow:0 0 20px rgba(46,164,255,.25);
  animation:badgePulse 2.4s ease-in-out infinite;
}
.badge-popular{background:linear-gradient(135deg,#ff8a3d,#ff4d7a);color:#fff;border-color:transparent;box-shadow:0 0 24px rgba(255,77,122,.5)}
.badge-best{background:linear-gradient(135deg,#00d4b4,#2ea4ff);color:#fff;border-color:transparent;box-shadow:0 0 24px rgba(0,212,180,.4)}
.badge-ultimate{background:linear-gradient(135deg,#7a5bff,#2ea4ff);color:#fff;border-color:transparent;box-shadow:0 0 24px rgba(122,91,255,.45)}
.badge-enterprise{background:linear-gradient(135deg,#f7c948,#ff7a3d);color:#1a0f00;border-color:transparent;box-shadow:0 0 24px rgba(247,201,72,.45)}
@keyframes badgePulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}

/* Icon */
.plan-icon{
  width:58px;height:58px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-soft);
  border:1px solid rgba(46,164,255,.3);
  font-size:1.6rem;color:var(--blue-300);
  margin-bottom:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px -8px rgba(46,164,255,.4);
  transition:transform .4s;
}
.plan-card:hover .plan-icon{transform:rotate(-6deg) scale(1.08);color:#fff;background:var(--grad)}

.plan-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.35rem;font-weight:700;margin:0 0 10px;color:#fff;letter-spacing:-.3px;
}

.plan-price{
  display:flex;align-items:baseline;gap:4px;margin:6px 0 18px;
}
.plan-price .currency{font-size:1.4rem;color:var(--blue-300);font-weight:600}
.plan-price .amount{
  font-family:'Space Grotesk',sans-serif;
  font-size:2.6rem;font-weight:700;color:#fff;letter-spacing:-1px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

.plan-desc{
  color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 20px;
}

.plan-features{
  list-style:none;padding:0;margin:0 0 26px;
  display:grid;gap:10px;
  padding-top:18px;border-top:1px solid rgba(120,170,255,.15);
}
.plan-features li{
  display:flex;align-items:center;gap:10px;
  font-size:.92rem;color:#d5e1f5;
}
.plan-features li i{
  width:26px;height:26px;flex:0 0 26px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:rgba(46,164,255,.12);color:var(--blue-300);
  font-size:.85rem;
  transition:all .3s;
}
.plan-card:hover .plan-features li i{background:var(--grad);color:#fff}

/* CTA */
.cta-btn{
  margin-top:auto;
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 22px;
  border:none;border-radius:14px;
  background:var(--grad);color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;font-size:1rem;letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(46,164,255,.7);
  transition:transform .3s, box-shadow .3s;
}
.cta-btn i{transition:transform .3s}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(46,164,255,.9)}
.cta-btn:hover i{transform:translateX(4px)}
.cta-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cta-btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.5);
  transform:scale(0);animation:ripple .6s linear;
  pointer-events:none;
}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .plan-card.featured{transform:none}
  .hero{padding:80px 0 40px}
}
@media (max-width: 575.98px){
  .hero{padding:60px 0 30px}
  .plan-card{padding:28px 22px}
  .plan-price .amount{font-size:2.2rem}
  .hero-meta{gap:8px 14px;font-size:.82rem}
  .hero-meta .dot{display:none}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}