:root{
  --bg0:#020617;
  --bg1:#0b1224;
  --card:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.10);
  --text:#f8fafc;
  --muted:#94a3b8;

  --blue:#3b82f6;
  --indigo:#4f46e5;
  --violet:#8b5cf6;
  --gold:#f59e0b;
  --green:#10b981;

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 40px rgba(0,0,0,.30);
  --radius: 22px;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:"Hind Siliguri",sans-serif;-webkit-tap-highlight-color:transparent}
body{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(79,70,229,.35), transparent 60%),
    radial-gradient(700px 380px at 85% 10%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(700px 380px at 10% 30%, rgba(139,92,246,.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:22px 16px 40px}
.glass{
  background:var(--card);
  border:1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.3px;
}
.brand .logo{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(59,130,246,.24), rgba(139,92,246,.18));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(59,130,246,.20);
  position:relative; overflow:hidden;
}
.brand .logo::before{
  content:"";
  position:absolute; inset:-70%;
  background:conic-gradient(transparent, rgba(245,158,11,.18), transparent 35%);
  animation: spin 5s linear infinite;
}
.brand .logo i{z-index:2;color:var(--gold);font-size:18px}
.brand small{display:block;color:var(--muted);font-weight:700;font-size:12px;margin-top:2px}

.top-actions{display:flex; gap:10px; align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.35);
  font-weight:800; font-size:13px; color:#dbeafe;
}
.pill i{color:#93c5fd}

/* Hero */
.hero{
  margin-top:14px;
  padding:22px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}
.hero-left{padding:10px 10px 10px 4px}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:900; letter-spacing:.7px;
  color:#e0f2fe;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(59,130,246,.12);
  margin-bottom:12px;
}
.kicker i{color:#60a5fa}

h1{
  font-size:34px;
  line-height:1.08;
  margin-bottom:10px;
  font-weight:900;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.sub{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  margin-bottom:14px;
  max-width:52ch;
}

/* ✅ CTA Center: Button will be centered (no side shifting) */
.cta-center{
  display:flex;
  flex-direction:column;
  align-items:center;     /* center horizontally */
  justify-content:center;
  gap:12px;
  margin-top:8px;
}
.cta-center .btn{
  width: min(360px, 100%);   /* fixed-looking centered width */
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:16px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
  transition:.25s ease;
  user-select:none;
}
.btn-primary{
  background: linear-gradient(90deg, #2563eb, #4f46e5);
  box-shadow: 0 12px 34px rgba(37, 99, 235, .32);
  font-size:16px;
}
.btn-primary:hover{transform: translateY(-2px); box-shadow: 0 16px 44px rgba(37,99,235,.45)}
.btn-primary:active{transform: scale(.98)}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color:#e2e8f0;
}
.btn-ghost:hover{transform: translateY(-2px); background: rgba(255,255,255,.09)}

.trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  font-size:12px;font-weight:900;color:#e2e8f0;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.35);
}
.badge i{color:var(--green)}
.badge.gold i{color:var(--gold)}
.badge.blue i{color:#60a5fa}

/* Hero right card */
.hero-right{
  padding:18px;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.hero-right::before{
  content:"";
  position:absolute; inset:-70%;
  background: conic-gradient(transparent, rgba(59,130,246,.16), transparent 35%);
  animation: spin 6s linear infinite;
}
.hero-right-inner{position:relative; z-index:2}
.mini-title{font-weight:900;font-size:16px;margin-bottom:10px;color:#e2e8f0}

.pricebox{
  padding:14px 14px;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  margin-bottom:12px;
}
.pricebox .row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.pricebox .row strong{font-size:18px}
.pricebox .row span{color:var(--muted);font-weight:800}
.note{font-size:12px;color:var(--muted);line-height:1.5}

/* Stats */
.stats{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.stat{
  padding:16px 14px;
  text-align:center;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  transition:.25s ease;
}
.stat:hover{transform: translateY(-4px); background: rgba(255,255,255,.08)}
.stat .ic{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  margin:0 auto 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.stat h3{font-size:18px;font-weight:900;margin-bottom:2px}
.stat p{font-size:12px;color:var(--muted);font-weight:800}
.s1 .ic i{color:#60a5fa}
.s2 .ic i{color:#34d399}
.s3 .ic i{color:#fbbf24}
.s4 .ic i{color:#a78bfa}

/* Sections */
.section{margin-top:22px;padding:20px}
.section h2{font-size:22px;font-weight:900;margin-bottom:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature{
  padding:16px 16px;border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  display:flex; gap:12px; align-items:flex-start;
  transition:.25s ease;
}
.feature:hover{transform: translateY(-3px); background: rgba(255,255,255,.08)}
.feature .ficon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.30);
  flex:0 0 auto;
}
.feature .ficon i{font-size:18px}
.feature h4{font-size:16px;font-weight:900;margin-bottom:2px}
.feature p{font-size:12px;color:var(--muted);line-height:1.45}
.fi1 i{color:#60a5fa}
.fi2 i{color:#34d399}
.fi3 i{color:#fbbf24}
.fi4 i{color:#a78bfa}

/* Steps */
.steps{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
  margin-top:6px;
}
.step{
  padding:16px;border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  transition:.25s ease;
}
.step:hover{transform: translateY(-3px); background: rgba(255,255,255,.08)}
.step .num{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background: rgba(59,130,246,.18);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
  margin-bottom:10px;
  color:#bfdbfe;
}
.step h4{font-weight:900;margin-bottom:4px}
.step p{font-size:12px;color:var(--muted);line-height:1.45}

/* FAQ */
details{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  border-radius:18px;
  padding:14px 14px;
}
details + details{margin-top:10px}
summary{
  cursor:pointer;
  list-style:none;
  font-weight:900;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
summary::-webkit-details-marker{display:none}
summary span{color:#e2e8f0}
summary i{color:#93c5fd}
details p{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.55}

/* Footer */
.footer{
  margin-top:18px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding:18px 10px 0;
}
.footer a{color:#93c5fd;font-weight:900}

/* Floating buttons */
.float-wrap{
  position:fixed;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:99;
}
.fab{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transition:.25s ease;
}
.fab:hover{transform: translateY(-2px); filter: brightness(1.08)}
.wa{background:#25d366}
.tg{background:#0088cc}
.call{background: linear-gradient(135deg, #2563eb, #4f46e5)}

@keyframes spin{to{transform: rotate(360deg)}}

/* Helpers */
.mt6{margin-top:6px}
.mt8{margin-top:8px}
.mt10{margin-top:10px}
.mt14{margin-top:14px}

/* Responsive */
@media (max-width: 860px){
  .hero{grid-template-columns: 1fr}
  .stats{grid-template-columns: 1fr 1fr}
  .steps{grid-template-columns: 1fr}
  .grid{grid-template-columns: 1fr}
  h1{font-size:30px}
}