:root{
  --bg-1:#f7f9fe;
  --bg-2:#e9eff8;
  --ink:#0b0c0f;
  --muted:#4c5874;
  --card:#ffffff;
  --line:#d9e3f4;
  --accent:#3d4e6f;
  --accent-2:#00d5ff;
  --shadow:0 16px 40px rgba(27,47,83,.12);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: var(--ink);
}

.hero{
  position: relative;
  text-align: center;
  padding: 64px 16px 40px;
  overflow: hidden;
}

.hero::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 320px at 15% -10%, rgba(61,78,111,.18), transparent 60%),
    radial-gradient(700px 280px at 85% -15%, rgba(0,213,255,.12), transparent 55%);
  pointer-events: none;
}

.hero h1{
  position: relative;
  margin: 0 0 8px;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: .2px;
}

.hero p{
  position: relative;
  margin: 0 auto;
  max-width: 720px;
  color: var(--muted);
  font-size: 1.05rem;
}

.pricing-section{
  padding: 20px 16px 72px;
}

.pricing-inner{
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-header{
  text-align: center;
  margin-bottom: 22px;
}

.pricing-header h2{
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 32px);
}

.pricing-header p{
  margin: 0;
  color: var(--muted);
}

.pricing-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.pricing-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 420px;
}

.pricing-card.featured{
  border-color: var(--accent);
  box-shadow: 0 20px 46px rgba(27,47,83,.18);
}

.tier-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(61,78,111,.12);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2px;
  width: fit-content;
}

.pricing-card h3{
  margin: 0;
  font-size: 1.35rem;
}

.tier-desc{
  margin: 0;
  color: var(--muted);
}

.price{
  margin-top: 6px;
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
}

.price small{
  display: block;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
}

.feature-list{
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}

.pricing-btn{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.pricing-btn.secondary{
  background: transparent;
  color: var(--accent);
}

.pricing-note{
  margin-top: 22px;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
}