:root{
  --primary:#0d6efd;
  --accent:#ffd166;
  --accent-2:#7c3aed;
  --bg:#eef9ff;
  --muted:#6c757d;
  --glass: rgba(255,255,255,0.9);
  --radius:14px;
  --rs-color:#0b486b;
  font-family: 'Poppins', sans-serif;
}

/* base */
*{box-sizing:border-box}
body{margin:0;padding-top:84px;background: linear-gradient(180deg,#f6fbff,#ffffff);color:#071234}

/* NAV */
.nav-glass{
  background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  box-shadow: 0 12px 30px rgba(9,30,97,0.06);
  backdrop-filter: blur(6px);
  padding:12px 0;
}
.brand-logo{ height:56px; border-radius:10px }
.brand-stack{ line-height:1 }
.brand-big{ font-size:20px; font-weight:900; color:#071234 }
.brand-tag{ font-size:12px; color:var(--muted) }

/* Nav buttons */
.btn-gradient{ background: linear-gradient(90deg,var(--primary),var(--accent-2)); color:#fff; border-radius:10px; padding:8px 14px; font-weight:800; box-shadow:0 10px 28px rgba(13,110,253,0.12); transition: transform .18s ease }
.btn-gradient:hover{ transform: translateY(-3px); box-shadow:0 18px 40px rgba(13,110,253,0.16) }
.btn-ghost{ color:#072a57; background:transparent; border-radius:10px; padding:8px 12px }

/* HERO */
.hero{ padding:120px 0 60px; position:relative; overflow:hidden }
.hero-overlay{ position:absolute; inset:0; background: radial-gradient(ellipse at top left, rgba(13,110,253,0.05), transparent 20%), radial-gradient(ellipse at bottom right, rgba(124,58,237,0.03), transparent 22%); pointer-events:none }
.hero-title{ font-size:44px; line-height:1.02; font-weight:900; margin-bottom:12px }
.accent{ color:var(--primary) }
.lead{ color:#4b647a; font-size:1.02rem }
.hero-features{ margin-left:18px; padding-left:0; list-style:none; display:inline-block; margin-top:12px; color:var(--muted) }
.hero-features li{ margin-bottom:6px }

/* CTA buttons */
.btn-cta{ background: linear-gradient(90deg,#0d6efd,#7c3aed); color:#fff; border-radius:12px; padding:12px 20px; font-weight:800; box-shadow:0 12px 30px rgba(13,110,253,0.12) }
.btn-outline-xl{ border-radius:12px; padding:12px 20px; color:var(--primary); border:2px solid rgba(13,110,253,0.12); background:transparent }

/* Visual area */
.visual-wrap{ position:relative; width:100%; max-width:420px; margin:0 auto; }
.gradient-orb{ width:220px; height:220px; margin:0 auto 18px; border-radius:50%; background: conic-gradient(from 90deg at 50% 50%, #ffd166, #ff7a7a, #7c3aed, #0d6efd); filter: blur(6px); box-shadow:0 20px 50px rgba(13,110,253,0.12); animation: orb-rotate 10s linear infinite }
@keyframes orb-rotate { 0%{transform: rotate(0deg) scale(1)} 50%{transform: rotate(180deg) scale(1.02)} 100%{transform: rotate(360deg) scale(1)} }

/* Mock card */
.mock-card{ background: linear-gradient(180deg,#ffffff,#f3f8ff); border-radius:14px; width:260px; margin:-40px auto 0; padding:14px; box-shadow:0 18px 40px rgba(13,110,253,0.06); text-align:center }
.mc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.mc-balance{ font-size:12px; color:var(--muted) }
.mc-amt{ font-size:18px; color:var(--rs-color); font-weight:800 }

/* floating dots */
.float-dots .dot{ position:absolute; width:22px; height:22px; border-radius:50%; background: linear-gradient(180deg,#fff7cc,#ffd166); box-shadow:0 8px 18px rgba(10,30,60,0.08) }
.float-dots .d1{ left:6%; top:68%; animation:rise 10s linear infinite }
.float-dots .d2{ left:22%; top:82%; animation:rise 12s linear infinite }
.float-dots .d3{ left:56%; top:78%; animation:rise 9s linear infinite }
.float-dots .d4{ left:76%; top:72%; animation:rise 11s linear infinite }
@keyframes rise { 0%{transform:translateY(0)} 50%{transform:translateY(-90px)} 100%{transform:translateY(-200px); opacity:0} }

/* CTA bubble */
.cta-bubble{ max-width:980px; margin-top:-40px; background:var(--glass); border-radius:12px; box-shadow:0 12px 30px rgba(10,30,60,0.04); padding:12px 18px; display:flex; justify-content:space-between; align-items:center }

/* PLANS */
.section-title{ font-weight:900; font-size:26px; color:#071234; margin-bottom:12px }
.plan-card{ border-radius:12px; padding:18px; transition: transform .22s, box-shadow .22s; text-align:center }
.plan-card:hover{ transform: translateY(-10px); box-shadow:0 20px 40px rgba(10,30,60,0.06) }
.glass{ background: linear-gradient(180deg,#ffffff,#fbfdff); border:1px solid rgba(13,110,253,0.04); box-shadow:0 12px 30px rgba(10,30,60,0.04) }
.plan-head{ font-weight:800; margin-bottom:6px }
.plan-price{ font-weight:900; color:#0d3b66; font-size:20px; margin-bottom:6px }
.plan-payout{ font-size:16px; margin-bottom:8px }
.plan-note{ color:var(--muted); font-size:13px }
.btn-small{ display:inline-block; background: linear-gradient(90deg,#0d6efd,#6610f2); color:#fff; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:800 }

/* featured plan */
.featured{ background: linear-gradient(90deg,#0d6efd,#6610f2); color:#fff }

/* small glass cards */
.glass-sm{ padding:12px; border-radius:10px; background:#fff; box-shadow:0 8px 22px rgba(10,30,60,0.04); text-align:center }
.glass-lg{ padding:18px; border-radius:12px; background:#fff; box-shadow:0 12px 30px rgba(10,30,60,0.04) }

/* referral */
.referral{ text-align:center }

/* misc */
.bg-soft{ background:#f7fbff }
footer{ color:#64748b; margin-top:30px; padding-bottom:40px }

/* responsive */
@media (max-width:991px){
  .hero-title{ font-size:28px }
  .gradient-orb{ width:140px; height:140px }
  .mock-card{ width:200px; margin-top:-24px }
  .brand-big{ font-size:18px }
}
<style>
@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr !important; }
  .glass { margin: 10px auto; width: 90% !important; }
  iframe { height: 200px !important; }
  .text-3xl { font-size: 1.8rem !important; }
  .p-6, .p-5 { padding: 1rem !important; }
}
</style>