:root{
  --bg1:#0b1220;
  --bg2:#0f1a33;
  --card:#0f172a;
  --stroke:rgba(255,255,255,.08);
  --text:#e7eefc;
  --muted:rgba(231,238,252,.72);
  --primary:#4f8cff;
  --primary2:#2f6bff;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, #1b2d5f 0%, transparent 55%),
              radial-gradient(900px 600px at 90% 20%, #163b75 0%, transparent 60%),
              linear-gradient(160deg, var(--bg1), var(--bg2));
}

.bg{min-height:100%; display:flex; align-items:center; justify-content:center; padding:26px}
.container{width:min(980px, 100%);}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:38px;height:38px;border-radius:12px;
  background: linear-gradient(135deg, var(--primary), #6af0ff);
  box-shadow: 0 10px 25px rgba(79,140,255,.35);
}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-sub{color:var(--muted); font-size:.92rem}
.badge{
  padding:8px 12px; border:1px solid var(--stroke); border-radius:999px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight:600; font-size:.9rem;
}

.card{
  background: rgba(15,23,42,.85);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  backdrop-filter: blur(10px);
}

h1{font-size:1.65rem; line-height:1.2; margin:0 0 10px}
h2{font-size:1.35rem; margin:10px 0 8px}
h3{margin:14px 0 8px}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.tiny{font-size:.9rem}

.bullets{margin:14px 0 18px; padding-left:18px}
.bullets li{margin:6px 0; color:var(--muted)}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.actions.spaced{justify-content:space-between; margin-top:18px}
.btn{
  appearance:none; border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color:var(--text);
  padding:12px 16px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:700;
  transition: transform .06s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:hover{background: rgba(255,255,255,.06)}
.btn:active{transform: translateY(1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn-primary{
  border-color: rgba(79,140,255,.35);
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 10px 26px rgba(47,107,255,.26);
}
.btn-primary:hover{filter: brightness(1.03)}
.btn-ghost{background: rgba(255,255,255,.02)}
.full{width:100%}

.info{
  margin-top:14px;
  padding:12px 14px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

.step{display:none}
.step-active{display:block}

.progress{margin-bottom:14px}
.progress-top{display:flex; justify-content:space-between; margin-bottom:8px; font-weight:600}
.bar{height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden}
.bar-fill{height:100%; background: linear-gradient(90deg, #6af0ff, var(--primary)); width:20%}

.options{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top:12px;
}
.option{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 14px;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:10px;
  transition: border-color .2s ease, background .2s ease, transform .06s ease;
}
.option:hover{background: rgba(255,255,255,.05)}
.option:active{transform: translateY(1px)}
.dot{
  width:18px; height:18px; margin-top:2px;
  border-radius:999px;
  border:2px solid rgba(231,238,252,.55);
  flex: 0 0 auto;
}
.option.selected{
  border-color: rgba(79,140,255,.55);
  background: rgba(79,140,255,.12);
}
.option.selected .dot{
  border-color: rgba(79,140,255,.9);
  background: radial-gradient(circle at 30% 30%, #6af0ff, var(--primary));
}

.result-head{display:flex; gap:14px; align-items:center}
.result-icon{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(79,140,255,.12);
  border:1px solid rgba(79,140,255,.25);
  font-size:26px;
}
.result-box{
  margin-top:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 16px;
}
.result-row{display:flex; justify-content:space-between; padding:8px 0}
.divider{height:1px; background: rgba(255,255,255,.08); margin:10px 0}

.cta{
  margin-top:12px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  border:1px solid rgba(79,140,255,.25);
  background: rgba(79,140,255,.08);
  border-radius: 16px;
  padding: 14px;
  flex-wrap:wrap;
}
.cta-left{display:flex; flex-direction:column; gap:4px}

.footer{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; padding: 0 4px; gap:10px; flex-wrap:wrap;
}
.hidden{display:none}

@media (min-width: 760px){
  .options{grid-template-columns: 1fr 1fr;}
}


/* --- v1.2 Modern conversion upgrades --- */
:root{
  --accent:#6af0ff;
  --gold:#f2c14e;
  --danger:#ff5a6a;
}

.card{ position:relative; overflow:hidden; }
.card:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(800px 500px at 10% 10%, rgba(106,240,255,.12), transparent 55%),
              radial-gradient(800px 500px at 90% 0%, rgba(79,140,255,.16), transparent 55%);
  pointer-events:none;
}

.step-active{ animation: fadeUp .35s ease both; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

.pulse{
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.02); }
}

.offer{
  margin-top:14px;
  border: 1px solid rgba(242,193,78,.35);
  background: radial-gradient(600px 240px at 20% 20%, rgba(242,193,78,.18), rgba(255,255,255,.02));
  border-radius: 16px;
  padding: 16px;
}

.offer-top{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

.offer-cover{
  width: 132px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.offer-copy{ flex:1; min-width:220px; }
.offer-copy h3{ margin:0 0 6px; }
.offer-copy p{ margin:0; color: var(--muted); }

.price-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.price-old{
  color: rgba(231,238,252,.55);
  text-decoration: line-through;
  font-weight:700;
}
.price-new{
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:.2px;
  color: var(--gold);
}
.price-badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(242,193,78,.35);
  background: rgba(242,193,78,.12);
  color: rgba(255,255,255,.92);
  font-weight:800;
  font-size:.86rem;
}

.trust{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.trust .chip{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:999px;
  padding:8px 10px;
  color: rgba(231,238,252,.78);
  font-weight:700;
  font-size:.86rem;
}

.btn-primary.promo{
  border-color: rgba(242,193,78,.45);
  background: linear-gradient(135deg, #f2c14e, #ffda6a);
  color:#0b1220;
  box-shadow: 0 14px 34px rgba(242,193,78,.22);
}
.btn-primary.promo:hover{ filter: brightness(1.02); }

.small-note{ margin-top:10px; font-size:.92rem; color: rgba(231,238,252,.7); }