:root{
  --v3d-violet:#7c3aed;
  --v3d-light:#a78bfa;
  --v3d-indigo:#4f46e5;
  --v3d-cyan:#22d3ee;
  --v3d-ink:#07070c;
  --v3d-line:rgba(255,255,255,.08);
}

.v3d-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1);
}
.v3d-canvas.v3d-on{ opacity:1; }
.v3d-canvas canvas{ display:block; width:100%; height:100%; }

.v3d-fallback{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 55% at 22% 30%, rgba(124,58,237,.32), transparent 70%),
    radial-gradient(50% 50% at 80% 25%, rgba(34,211,238,.16), transparent 70%),
    radial-gradient(55% 60% at 70% 85%, rgba(79,70,229,.22), transparent 70%);
}

.v3d-hero-canvas{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity 1.2s cubic-bezier(.22,.61,.36,1);
}
.v3d-hero-canvas.v3d-on{ opacity:.95; }
.v3d-hero-canvas canvas{ display:block; width:100%; height:100%; }
/* Phones: the canvas is full-bleed behind the copy — dim it so text always wins. */
@media (max-width:760px){
  .v3d-hero-canvas.v3d-on{ opacity:.42; }
}

.v3d-accent{
  position:relative;
  width:100%;
  min-height:340px;
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(124,58,237,.18), transparent 70%),
    linear-gradient(160deg, rgba(21,21,42,.6), rgba(7,7,12,.2));
  border:1px solid var(--v3d-line);
}
.v3d-accent .v3d-canvas{ opacity:0; }
.v3d-accent .v3d-canvas.v3d-on{ opacity:1; }

.v3d-announce{
  position:relative;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:9px 18px;
  font-size:.86rem;
  font-weight:600;
  color:#f4f4fb;
  text-align:center;
  background:linear-gradient(120deg,#4f46e5,#7c3aed 55%,#a78bfa);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 6px 24px -10px rgba(124,58,237,.8);
}
.v3d-announce .v3d-announce-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.2);
  font-weight:800; font-size:.78rem; letter-spacing:.01em;
}
.v3d-announce a{
  color:#fff; text-decoration:underline; text-underline-offset:3px; font-weight:800;
}
.v3d-announce .v3d-announce-x{
  position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:grid; place-items:center;
  border:none; background:transparent; color:#fff; cursor:pointer; font-size:1.1rem; line-height:1; opacity:.85;
}
.v3d-announce .v3d-announce-x:hover{ opacity:1; }
.v3d-announce.hide{ display:none; }
@media (max-width:560px){
  .v3d-announce{ font-size:.78rem; padding:8px 34px 8px 14px; }
  .v3d-announce .v3d-announce-tag{ display:none; }
}

.v3d-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
@media (max-width:760px){ .v3d-stats{ grid-template-columns:repeat(2,1fr); gap:14px; } }
.v3d-stat{
  position:relative;
  padding:30px 22px;
  border-radius:22px;
  text-align:center;
  background:linear-gradient(165deg, rgba(21,21,42,.75), rgba(12,12,20,.65));
  border:1px solid var(--v3d-line);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s;
}
.v3d-stat::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 0%, rgba(124,58,237,.22), transparent 70%);
  opacity:.7;
}
.v3d-stat:hover{ transform:translateY(-6px); border-color:rgba(124,58,237,.45); }
.v3d-stat .v3d-stat-ic{
  position:relative; width:52px; height:52px; margin:0 auto 14px;
  display:grid; place-items:center; border-radius:15px;
  background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; font-size:1.5rem;
  box-shadow:0 12px 28px -10px rgba(124,58,237,.9);
}
.v3d-stat .v3d-stat-num{
  position:relative; font-size:clamp(1.9rem,1.3rem+2vw,2.7rem); font-weight:900; line-height:1;
  background:linear-gradient(120deg,#a78bfa,#7c3aed); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.v3d-stat .v3d-stat-num .suf{ -webkit-text-fill-color:#a78bfa; }
.v3d-stat .v3d-stat-lbl{ position:relative; margin-top:8px; color:#a3a3c2; font-size:.92rem; font-weight:600; }

.v3d-tilt{ transform-style:preserve-3d; transition:transform .2s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.v3d-tilt-inner{ transform:translateZ(40px); }

.v3d-glow-ring{
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(38px); opacity:.55;
}

@media (prefers-reduced-motion: reduce){
  .v3d-canvas, .v3d-hero-canvas{ display:none !important; }
  .v3d-stat:hover{ transform:none; }
  .v3d-tilt{ transform:none !important; }
}

.v3d-pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
@media (max-width:980px){ .v3d-pkg-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.v3d-pkg{
  position:relative; display:flex; flex-direction:column;
  padding:30px 26px; border-radius:24px;
  background:linear-gradient(168deg, rgba(21,21,42,.82), rgba(12,12,20,.78));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s, box-shadow .35s;
  overflow:hidden;
}
.v3d-pkg::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(460px circle at 50% -10%, rgba(124,58,237,.2), transparent 60%);
}
.v3d-pkg:hover{ transform:translateY(-8px); border-color:rgba(124,58,237,.5); box-shadow:0 30px 70px -28px rgba(124,58,237,.7); }
.v3d-pkg:hover::before{ opacity:1; }
.v3d-pkg.pop{ border-color:rgba(124,58,237,.6); background:linear-gradient(168deg, rgba(36,26,66,.9), rgba(16,14,30,.85)); transform:translateY(-6px) scale(1.015); }
.v3d-pkg.pop:hover{ transform:translateY(-12px) scale(1.02); }
.v3d-pkg-badge{
  position:absolute; inset-inline-end:18px; top:18px;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:999px; font-size:.72rem; font-weight:800; color:#fff;
  background:linear-gradient(120deg,#7c3aed,#a78bfa); box-shadow:0 8px 20px -8px rgba(124,58,237,.9);
}
.v3d-pkg-name{ font-size:1.18rem; font-weight:800; color:var(--px-text,#f4f4fb); margin:0 0 4px; }
.v3d-pkg-tag{ font-size:.82rem; color:var(--px-mut,#a3a3c2); margin:0 0 18px; }
.v3d-pkg-price{ display:flex; align-items:baseline; gap:6px; margin:0 0 4px; }
.v3d-pkg-price .num{ font-size:2.5rem; font-weight:900; line-height:1; background:linear-gradient(120deg,#a78bfa,#7c3aed); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.v3d-pkg-price .cur{ font-size:.95rem; font-weight:700; color:var(--px-mut,#a3a3c2); }
.v3d-pkg-deliv{ font-size:.8rem; color:#22d3ee; margin:0 0 20px; display:inline-flex; align-items:center; gap:6px; }
.v3d-pkg-feats{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:11px; }
.v3d-pkg-feats li{ display:flex; align-items:flex-start; gap:9px; font-size:.88rem; color:var(--px-text,#e8e8f0); line-height:1.5; }
.v3d-pkg-feats li i{ color:#10b981; font-size:.95em; margin-top:3px; flex-shrink:0; }
.v3d-pkg-cta{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 18px; border-radius:14px; font-weight:800; font-size:.95rem; text-decoration:none;
  color:#fff; background:linear-gradient(120deg,#7c3aed,#a78bfa); transition:transform .25s, box-shadow .25s;
}
.v3d-pkg-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(124,58,237,.8); }
.v3d-pkg.ghost .v3d-pkg-cta{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); }
.v3d-pkg.ghost .v3d-pkg-cta:hover{ background:rgba(124,58,237,.18); }