@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800;900&display=swap');

:root{
  --bg:#07080C;
  --panel:rgba(255,255,255,.04);
  --muted:#9AA3B2;
  --text:#E8EAF3;
  --brand1:#8b5cf6;
  --brand2:#60a5fa;
  --brand3:#22d3ee;
  --ring:0 0 40px rgba(139,92,246,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55; overflow-x:hidden;
}

/* background mesh + grid glow */
.bg-wrap{position:fixed; inset:0; z-index:-2; overflow:hidden}
.mesh{position:absolute; filter:blur(70px); opacity:.22; width:70vw; height:70vh; border-radius:50%}
.m1{top:-12vh; left:-12vw; background:radial-gradient(closest-side, var(--brand1),transparent)}
.m2{top:-22vh; right:-10vw; background:radial-gradient(closest-side, var(--brand2),transparent)}
.m3{bottom:-18vh; left:5vw; background:radial-gradient(closest-side, var(--brand3),transparent)}
.grid{position:absolute; inset:0; background:
  linear-gradient(transparent 95%, rgba(255,255,255,.05) 95%) 0 0/100% 42px,
  linear-gradient(90deg, transparent 95%, rgba(255,255,255,.05) 95%) 0 0/42px 100%;
  mask-image:radial-gradient(1200px 650px at 70% -10%, #000 55%, transparent 75%);
  opacity:.6}

/* layout */
.container{max-width:1200px; margin:0 auto; padding:0 20px}

/* nav (glass, sticky, animated underline) */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(12px);
  background:rgba(7,8,12,.55); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand-badge{width:30px; height:30px; display:grid; place-items:center; font-weight:900; border-radius:9px;
  background:linear-gradient(135deg, var(--brand1), var(--brand2)); box-shadow:var(--ring)}
.brand-name{font-weight:800; letter-spacing:.2px}
.brand-name em{font-style:normal; color:#cdd2f6}
.nav-links{position:relative; display:flex; gap:18px; align-items:center}
.nav-links a{position:relative; color:#c9cee2; text-decoration:none; font-weight:600; padding:10px 12px; border-radius:10px}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.06)}
.nav-links .cta{background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; box-shadow:var(--ring); border-radius:999px}
.nav-underline{position:absolute; height:2px; background:linear-gradient(90deg,var(--brand2),var(--brand3));
  bottom:6px; left:0; width:0; border-radius:2px; transition: all .25s ease}

.nav-toggle{display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px}
.nav-toggle span{width:26px; height:2px; background:#c8cde0; border-radius:2px; display:block}
.mobile-menu{display:none; position:fixed; inset:70px 0 auto 0; background:rgba(7,8,12,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06); z-index:35}
.mobile-menu a{display:block; padding:16px 20px; color:#c8cde0; text-decoration:none; border-top:1px solid rgba(255,255,255,.06)}
.mobile-menu a.cta{margin:10px; text-align:center; border-radius:12px; background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff}

/* hero */
.hero{padding:84px 0 48px}
.hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:36px; align-items:center}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03); border-radius:999px; font-size:12px; color:#d7dbef}
.badge .dot{width:6px; height:6px; background:#22e6a8; border-radius:50%; box-shadow:0 0 10px #22e6a8}
h1{margin:12px 0 10px; font-size: clamp(34px, 6vw, 60px); line-height:1.05; letter-spacing:-.02em}
.grad{-webkit-background-clip:text; background-clip:text; color:transparent;
  background-image:linear-gradient(90deg,var(--brand1),var(--brand3))}
.glow{text-shadow:0 0 24px rgba(139,92,246,.65)}
.hero p{color:#cfd3ea; margin:12px 0 24px; max-width:54ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.08); color:#dbe0f7; background:rgba(255,255,255,.03)}
.btn.primary{color:#fff; border:none; background:linear-gradient(90deg,var(--brand1),var(--brand2)); box-shadow:var(--ring)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}

/* device */
.hero-art{position:relative}
.device{position:relative; width:min(520px, 92%); margin:0 auto; transform:rotate(-1.5deg); transition:transform .25s ease}
.device-top{display:flex; gap:6px; margin:0 0 10px 4px}
.device-top .l{width:8px; height:8px; border-radius:50%; background:#50546a}
.r{background:#ff5f57}.y{background:#febc2e}.g{background:#28c840}
.device-body{border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:14px;
  background:#0c0f17; box-shadow: 0 25px 80px rgba(0,0,0,.5), var(--ring)}
.cmds{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.chip{padding:8px 12px; font-size:12px; border-radius:999px; color:#dbe0f7;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}
.skeleton{height:12px; border-radius:6px; margin:12px 0;
  background:linear-gradient(90deg,#1a1e2a,#23283a,#1a1e2a); background-size:180% 100%; animation:shimmer 3s infinite}
.skeleton.long{width:85%}
.live{display:flex; align-items:center; gap:8px; color:#aeb6d6; font-size:13px}
.pulse{width:8px; height:8px; border-radius:50%; background:#22e6a8; box-shadow:0 0 12px #22e6a8; animation:pulse 1.4s infinite}
.ring-glow{position:absolute; inset:-20px -30px -30px -20px; border-radius:24px; pointer-events:none;
  box-shadow:0 0 140px rgba(139,92,246,.35), 0 0 120px rgba(34,211,238,.18) inset}

/* sections */
.section-pad{padding:96px 0}
.section-head{margin-bottom:20px}
.section-head .muted{color:var(--muted)}

/* cards (services) */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.25)}
.card-top{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.icon{width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,211,238,.22))}
.card .note{margin-top:10px}
.muted{color:var(--muted)}

/* pricing (packages) */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.price-card{position:relative; background:linear-gradient(180deg, rgba(139,92,246,.10), rgba(34,211,238,.08));
  border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:22px; box-shadow:var(--ring)}
.price-card h3{margin:0 0 6px}
.price-card .features{list-style:none; padding:0; margin:12px 0 18px}
.price-card .features li{padding-left:18px; position:relative; color:#cfd3ea}
.price-card .features li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(90deg,var(--brand1),var(--brand2))}
.ribbon{position:absolute; top:14px; right:14px; font-size:12px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; box-shadow:var(--ring)}
.purchase{width:100%}

/* contact */
.contact{padding:64px 0 96px}
.contact-card{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px;
  background:linear-gradient(180deg, rgba(139,92,246,.10), rgba(34,211,238,.08));
  border:1px solid rgba(255,255,255,.12); border-radius:16px; box-shadow:var(--ring)}

/* footer */
.footer{border-top:1px solid rgba(255,255,255,.06); padding:20px 0; background:rgba(255,255,255,.02)}
.foot-row{display:flex; align-items:center; justify-content:space-between}
.tiny{color:#aeb6d6; font-size:13px}
.tiny.links{display:flex; gap:10px}
.tiny a{color:#cbd2f0; text-decoration:none}
.tiny a:hover{color:#fff}

/* reveal + motion */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1; transform:none}
.up{}
.tilt{transform-style:preserve-3d; perspective:800px; transition:transform .25s ease, box-shadow .25s ease}
.tilt:hover{transform:translateY(-6px) rotateX(2deg) rotateY(-3deg); box-shadow:0 16px 60px rgba(0,0,0,.35), var(--ring)}

/* keyframes */
@keyframes shimmer{0%{background-position:-180% 0}100%{background-position:180% 0}}
@keyframes pulse{0%{transform:scale(.9);opacity:.65}50%{transform:scale(1.1);opacity:1}100%{transform:scale(.9);opacity:.65}}

/* responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .contact-card{flex-direction:column; align-items:flex-start}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .mobile-menu.show{display:block}
}

/* ===== Popup Redesign ===== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 15, 0.75);
  backdrop-filter: blur(18px);
  z-index: 200;
  transition: opacity 0.3s ease;
}
.modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-content {
  position: relative;
  width: min(750px, 90%);
  background: radial-gradient(circle at top right, rgba(139,92,246,0.1), rgba(34,211,238,0.1)),
              rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  box-shadow:
    0 0 50px rgba(139,92,246,0.3),
    0 0 80px rgba(34,211,238,0.2) inset;
  padding: 36px;
  animation: modalEnter 0.5s ease forwards;
  transform: translateY(30px) scale(0.96);
  opacity: 0;
}
@keyframes modalEnter {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.close-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 28px;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s;
}
.close-btn:hover {
  opacity: 1;
  transform: rotate(90deg);
  color: #a78bfa;
}

.modal-content h2 {
  font-size: 1.8rem;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  color: transparent;
}
.modal-content p.muted {
  font-size: 0.95rem;
  color: #c3c8de;
  margin-bottom: 20px;
}

.price-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 26px;
  box-shadow: 0 0 25px rgba(139,92,246,0.15);
}
.price {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}
.price .sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-left: 4px;
}

details {
  margin: 12px 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  transition: all 0.3s ease;
}
details[open] {
  background: linear-gradient(180deg, rgba(139,92,246,0.12), rgba(34,211,238,0.08));
  box-shadow: 0 0 20px rgba(139,92,246,0.2);
}
summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  color: #e8eaf3;
}
summary::after {
  content: "›";
  font-size: 16px;
  transform: rotate(90deg);
  transition: transform 0.3s;
}
details[open] summary::after {
  transform: rotate(-90deg);
}
.dropdown-content {
  padding: 0 18px 14px;
  font-size: 0.92rem;
  color: #cfd3ea;
}
.dropdown-content code {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  margin-top: 4px;
}
.dropdown-content .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.dropdown-content .tag {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: #bfc5df;
}

.choose-plan {
  text-align: center;
  margin-top: 30px;
}
.btn.wide {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn.wide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand1), var(--brand3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 0;
  border-radius: inherit;
}
.btn.wide:hover::before {
  transform: scaleX(1);
}
.btn.wide span {
  position: relative;
  z-index: 1;
}

/* ===== Magnetic Cursor Glow Fix ===== */
.btn.primary,
.purchase {
  position: relative;
  overflow: hidden;
  cursor: pointer; /* restore visible cursor */
}

.btn.primary::after,
.purchase::after {
  content: "";
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.45), transparent 40%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition:
    width 0.3s ease,
    height 0.3s ease,
    opacity 0.4s,
    transform 0.2s ease;
  opacity: 0;
  z-index: 0;
}

.btn.primary:hover::after,
.purchase:hover::after {
  width: 160px;
  height: 160px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* ===== Payment Method Popup ===== */
.payment-modal {
  position: fixed;
  inset: 0;
  background: rgba(7,8,12,0.7);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  transition: opacity 0.3s ease;
}
.payment-modal.hidden {
  opacity: 0;
  pointer-events: none;
}
.payment-content {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 28px;
  width: min(400px, 90%);
  text-align: center;
  box-shadow: 0 0 40px rgba(139,92,246,0.3);
  animation: slideUp 0.4s ease forwards;
  transform: translateY(20px);
  opacity: 0;
}
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.payment-content h3 {
  margin-top: 0;
  font-size: 1.4rem;
  background: linear-gradient(90deg, var(--brand1), var(--brand3));
  -webkit-background-clip: text;
  color: transparent;
}
.payment-options {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}
.payment-btn {
  min-width: 120px;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}
.payment-btn:hover {
  transform: translateY(-2px);
}

/* ===== Redirect Loading Overlay ===== */
.redirect-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  background: rgba(10,10,15,0.6);
  border-radius: 20px;
  gap: 16px;
  transition: opacity 0.3s ease;
  z-index: 400;
}
.redirect-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.redirect-overlay p {
  color: #e8eaf3;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: 0 0 12px rgba(139,92,246,0.5);
}
.loader {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top: 3px solid #a78bfa;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  filter: drop-shadow(0 0 6px rgba(139,92,246,0.4));
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Ensure dynamically added packages show immediately */
.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== Smooth Modal Fade (used by improved JS) ===== */
.modal,
.payment-modal {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.modal.show,
.payment-modal.show {
  opacity: 1;
}

.fade-out {
  opacity: 0 !important;
  transition: opacity 0.25s ease;
}

/* polished email block */
.contact-email {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  width: fit-content;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 18px rgba(139,92,246,0.18);
  transition: all .25s ease;
}

.contact-email:hover {
  border-color: rgba(139,92,246,0.45);
  box-shadow: 0 0 26px rgba(139,92,246,0.35);
  transform: translateY(-2px);
}

.email-icon {
  font-size: 20px;
  line-height: 1;
}

.email-content {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.email-content span {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 600;
}

.email-link {
  font-weight: 700;
  font-size: 0.95rem;
  background: linear-gradient(90deg, var(--brand1), var(--brand3));
  -webkit-background-clip: text;
  color: transparent;
  text-decoration: none;
  position: relative;
}

.email-link::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  border-radius: 2px;
  transition: width .3s ease;
}

.email-link:hover::after {
  width: 100%;
}