:root{
  --radius: 24px;
}
html,body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-logo{height:26px; width:auto;}
.brand-title{font-weight:800; letter-spacing:0.2px;}
.hero{min-height: 88vh;}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 300px at 20% 15%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(700px 300px at 90% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events:none;
}
.hero-content{position:relative; z-index:2;}
.kicker{
  display:inline-block;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font-size:14px;
  letter-spacing:.3px;
  opacity:.95;
}
.hero-card{box-shadow: 0 10px 30px rgba(0,0,0,.15);}
.clean-ul{list-style:none; margin:0; padding:0;}
.clean-ul li{border-bottom:none !important; padding:8px 0;}
.badge{
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
  padding:14px 14px;
  background: rgba(0,0,0,.18);
}
.badge-num{font-size:22px; font-weight:800;}
.badge-txt{opacity:.9;}
.stat{font-size:44px; font-weight:800; margin:4px 0;}
.card-hover{transition: transform .15s ease, box-shadow .15s ease;}
.card-hover:hover{transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.12);}
.mini-card{
  border-radius: var(--radius);
  padding:14px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}
.mini-title{font-weight:800;}
.mini-txt{opacity:.85;}
.plan{position:relative;}
.plan-featured{transform: translateY(-4px); border: 2px solid rgba(0,0,0,.18);}
.ribbon{
  position:absolute; top:14px; right:14px;
  background:#000;
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}
.price{font-size:28px; font-weight:800; margin:8px 0 14px;}
.w3-round-xxlarge{border-radius: var(--radius);}
@media (max-width: 600px){
  .brand-title{display:none;}
  .hero{min-height:auto;}
}