body{margin:0;background:#0a0a0a;color:#fff;font-family:system-ui,Arial,sans-serif;text-align:center}
a{color:#9be7ff;text-decoration:none}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#111;position:sticky;top:0}
.call-pill{background:#2ecc71;color:#000;padding:8px 14px;border-radius:999px;font-weight:bold}
.container{padding:20px}
.cta-big{display:block;margin:20px auto;padding:14px;background:#2ecc71;color:#000;border-radius:999px;width:80%;max-width:300px;font-size:20px;font-weight:bold}
.cards{display:grid;gap:12px;margin:20px}
.card{background:#1a1a1a;padding:16px;border-radius:12px}
.steps{list-style:decimal;text-align:left;margin:20px auto;max-width:500px}
.footer{padding:20px;font-size:14px;color:#aaa}
.footer-nav a{margin:0 6px}
.sticky-call{position:fixed;bottom:10px;left:10px;right:10px;padding:14px;background:#2ecc71;color:#000;font-weight:bold;border-radius:999px;font-size:20px}
.popup{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:10000}
.popup-card{background:#222;padding:20px;border-radius:16px;max-width:320px;z-index:10001}
button{margin-top:10px;padding:8px 12px;border:none;border-radius:8px}

/* --- Modal styles for frosted card popup --- */
.popup{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:10000;padding:16px;}

/* Lift card slightly from bottom with safe-area padding */
@supports (padding: max(0px)) {
  .popup{padding-bottom:max(16px, env(safe-area-inset-bottom));}
}

.modal-card{
  width:100%;max-width:640px;
  background:rgba(24,24,24,.82);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.04) inset;
  padding:18px 18px 14px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transform:translateY(6px);
  animation:modalIn .18s ease-out both;
}

@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(6px)}}

.modal-card h2{
  margin:0 0 6px;font-size:20px;font-weight:800;letter-spacing:.2px;
}
.modal-card p{
  margin:0 0 12px;color:#d3d3d3;line-height:1.35;
}

.modal-actions{display:flex;gap:12px;justify-content:space-between}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;
  flex:1;padding:14px 16px;border-radius:999px;border:1px solid transparent;
  font-weight:800;text-decoration:none;cursor:pointer;user-select:none;
}
.btn-ico{font-size:18px;line-height:1}

.btn-primary{
  background:#2ecc71;color:#0a0a0a;border-color:#27c267;box-shadow:0 6px 18px rgba(46,204,113,.35);
}
.btn-primary:active{transform:translateY(1px)}

.btn-ghost{
  background:#141414;color:#fff;border-color:#2a2a2a;
}

@media (min-width:600px){
  .modal-card h2{font-size:22px}
  .btn{padding:16px 18px}
}

@media (prefers-reduced-motion: reduce){
  .modal-card{animation:none;transform:none}
}

/* Prevent background scroll when popup open */
body.modal-open{overflow:hidden}


/* Ensure popup buttons are always clickable on iOS */
.modal-card, .modal-actions, .btn { position: relative; z-index: 10002; pointer-events: auto; }
.popup { pointer-events: auto; }
.btn:active { transform: translateY(1px); }