/* ═══════════════════════════════════════════════
   VAULTX — Aurora Premium
   Palette: Rose #ec4899 → Violet #8b5cf6 → Cyan #06b6d4
═══════════════════════════════════════════════ */

:root {
  --bg:        #02020a;
  --card-bg:   rgba(12,6,28,0.85);

  /* Aurora gradient */
  --rose:      #ec4899;
  --violet:    #8b5cf6;
  --cyan:      #06b6d4;
  --gold:      #fbbf24;
  --green:     #10b981;

  --grad-aurora:  linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
  --grad-buy:     linear-gradient(135deg, #059669, #10b981);
  --grad-border:  linear-gradient(135deg, rgba(236,72,153,0.6), rgba(139,92,246,0.6), rgba(6,182,212,0.4));

  --glow-rose:   rgba(236,72,153,0.4);
  --glow-violet: rgba(139,92,246,0.35);
  --glow-cyan:   rgba(6,182,212,0.3);

  --t1: #f8f4ff;
  --t2: #b8aed4;
  --t3: #5a4e75;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px;

  --r1:8px; --r2:14px; --r3:18px; --rf:9999px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding: var(--s6) var(--s4);
}

button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
img,video { display:block; max-width:100%; }
.hidden { display:none !important; }

/* ─ CANVAS ──────────────────────────────────── */
#canvas { display:none; }

/* ─ GALAXY BG (Three.js WebGL) ─────────────── */
#galaxyBg {
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  overflow:hidden;
}
#galaxyBg canvas {
  display:block; width:100% !important; height:100% !important;
}

/* ─ AURORA ORBS ─────────────────────────────── */
.orb {
  position:fixed; border-radius:50%;
  pointer-events:none; z-index:0;
}
.orb-1 {
  width:600px; height:600px;
  background: radial-gradient(circle,
    rgba(236,72,153,0.12) 0%,
    rgba(139,92,246,0.08) 40%,
    transparent 70%);
  top:-200px; left:-200px;
  filter: blur(80px);
  animation: orbDrift 16s ease-in-out infinite;
}
.orb-2 {
  width:500px; height:500px;
  background: radial-gradient(circle,
    rgba(6,182,212,0.1) 0%,
    rgba(139,92,246,0.07) 40%,
    transparent 70%);
  bottom:-150px; right:-150px;
  filter: blur(80px);
  animation: orbDrift 20s ease-in-out infinite reverse;
}
.orb-3 {
  width:300px; height:300px;
  background: radial-gradient(circle, rgba(236,72,153,0.08) 0%, transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  filter: blur(60px);
  animation: orbPulse 8s ease-in-out infinite;
}
@keyframes orbDrift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(30px,25px) scale(1.05); }
  66%      { transform:translate(-20px,35px) scale(0.95); }
}
@keyframes orbPulse {
  0%,100% { opacity:0.5; }
  50%      { opacity:1; }
}

/* ════════════════════════════════════════════
   LANGUAGE SCREEN
════════════════════════════════════════════ */
#langScreen {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background: rgba(1,0,12,0.55);
  padding: var(--s6) var(--s4);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#langScreen.fade-out { opacity:0; visibility:hidden; pointer-events:none; }

.lang-inner {
  width:100%; max-width:360px;
  display:flex; flex-direction:column;
  align-items:center; gap:28px;
  position:relative; z-index:1;
  padding: 36px 28px;
  background: rgba(3,1,20,0.45);
  border-radius: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 0 80px rgba(100,55,210,0.12),
    0 32px 64px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
/* subtle border on the glass panel */
.lang-inner::before {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background: linear-gradient(135deg,
    rgba(139,92,246,0.35),
    rgba(236,72,153,0.25),
    rgba(6,182,212,0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.lang-logo { display:flex; align-items:center; gap:12px; }
.lang-mega-logo { width:38px; height:38px; border-radius:50%; flex-shrink:0; }
.logo-txt {
  font-family:'Orbitron',sans-serif;
  font-weight:900; font-size:20px; letter-spacing:0.08em;
}
.logo-x {
  background: var(--grad-aurora);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.lang-head { text-align:center; }
.lang-head h1 {
  font-family:'Orbitron',sans-serif;
  font-size:16px; font-weight:700; margin-bottom:6px;
}
.lang-head p { font-size:13px; color:var(--t2); }

.lang-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--s2); width:100%;
}
.lang-card {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; gap:6px;
  padding:14px var(--s2);
  background: rgba(8,3,30,0.55);
  border-radius:var(--r2);
  transition: transform 0.18s, background 0.22s, box-shadow 0.22s;
}
/* gradient border via pseudo */
.lang-card::before {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(236,72,153,0.3), rgba(139,92,246,0.3), rgba(6,182,212,0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.lang-card:hover {
  background: rgba(139,92,246,0.16);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(139,92,246,0.25);
}
.lang-card:active { transform: translateY(-1px); }
.lang-card:hover .lg-glow { opacity:1; }
.lg-glow {
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 110%, rgba(139,92,246,0.35), transparent 65%);
  opacity:0; transition:opacity 0.25s; pointer-events:none;
}
.lf { font-size:22px; line-height:1; }
.ln { font-size:10px; font-weight:600; color:var(--t2); letter-spacing:0.04em; }

/* ════════════════════════════════════════════
   LANG TOGGLE
════════════════════════════════════════════ */
.lang-toggle {
  position:fixed; top:16px; right:16px; z-index:10;
  padding:7px 12px;
  background: rgba(12,6,28,0.8);
  border-radius:var(--rf);
  font-size:16px;
  backdrop-filter:blur(12px);
  transition:all 0.2s;
}
.lang-toggle::before {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.lang-toggle:hover { background: rgba(20,10,40,0.9); }

/* ════════════════════════════════════════════
   APP / CARD
════════════════════════════════════════════ */
#app {
  position:relative; z-index:1;
  width:100%; display:flex; justify-content:center;
  animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

.card {
  width:100%; max-width:370px;
  position:relative;
  border-radius:var(--r3);
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s4);

  background: linear-gradient(160deg, rgba(14,7,32,0.95) 0%, rgba(8,4,20,0.98) 100%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  box-shadow:
    0 0 80px rgba(139,92,246,0.12),
    0 40px 80px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
/* gradient border */
.card::before {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:0.7;
}
/* subtle inner glow top */
.card::after {
  content:'';
  position:absolute;
  top:0; left:10%; width:80%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(236,72,153,0.5), rgba(139,92,246,0.5), transparent);
  pointer-events:none;
}

/* ─ Badge ────────────────────────────────── */
.card-badge {
  display:flex; align-items:center; gap:7px;
}
.badge-dot {
  width:6px; height:6px; border-radius:50%;
  background: var(--rose);
  box-shadow: 0 0 8px var(--glow-rose);
  animation: dotBlink 2s ease-in-out infinite;
}
.badge-dot:nth-child(2) {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--glow-cyan);
  animation-delay:0.5s;
}
@keyframes dotBlink { 0%,100%{opacity:1;} 50%{opacity:0.2;} }
#rareBadge {
  font-size:10px; font-weight:700;
  letter-spacing:0.16em;
  background: var(--grad-aurora);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 200%;
  animation: auroraShift 4s ease infinite;
}
@keyframes auroraShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* ─ Preview ──────────────────────────────── */
.preview-wrap {
  position:relative;
  width:100%; aspect-ratio:16/9;
  border-radius:var(--r2); overflow:hidden;
  background:#050210;
}
.preview-video {
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
}
.preview-blur {
  position:absolute; inset:0;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  background: linear-gradient(
    180deg,
    rgba(8,4,20,0.4) 0%,
    rgba(236,72,153,0.08) 50%,
    rgba(8,4,20,0.7) 100%
  );
}
/* corner mega badge */
.preview-wrap::after {
  content:'18,77 GB · MEGA';
  position:absolute; bottom:8px; right:8px;
  font-size:10px; font-weight:600; color:var(--t2);
  padding:3px 9px;
  background:rgba(8,4,20,0.85);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--rf);
  backdrop-filter:blur(6px);
  letter-spacing:0.04em;
}

.lock-icon {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px;
}

/* Triple ring */
.lock-rings {
  position:relative;
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
}
.lock-ring {
  position:absolute;
  border-radius:50%;
  animation:lockRipple 2.8s ease-out infinite;
}
.lock-ring:nth-child(1) {
  width:64px; height:64px;
  background:rgba(236,72,153,0.2);
}
.lock-ring:nth-child(2) {
  width:64px; height:64px;
  background:rgba(139,92,246,0.2);
  animation-delay:0.93s;
}
.lock-ring:nth-child(3) {
  width:64px; height:64px;
  background:rgba(6,182,212,0.15);
  animation-delay:1.86s;
}
@keyframes lockRipple {
  0%  { transform:scale(0.6); opacity:0.9; }
  100%{ transform:scale(2.6); opacity:0;   }
}
.lock-svg {
  width:32px; height:32px;
  position:relative; z-index:1;
  color:#fff;
  filter:
    drop-shadow(0 0 8px rgba(236,72,153,0.7))
    drop-shadow(0 0 16px rgba(139,92,246,0.5));
  animation:lockFloat 4s ease-in-out infinite;
}
@keyframes lockFloat {
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%    { transform:translateY(-6px) rotate(2deg); }
}
.lock-sublabel {
  font-size:11px; font-weight:600;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
}

/* ─ Size ─────────────────────────────────── */
.size-row {
  display:flex; align-items:center;
  justify-content:center; gap:var(--s2);
}
.mega-logo { width:26px; height:26px; }
.size-txt {
  font-family:'Orbitron',sans-serif;
  font-size:20px; font-weight:900;
  background: var(--grad-aurora);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% auto;
  animation: auroraShift 4s ease infinite;
}

/* ─ Headline ─────────────────────────────── */
.card-headline {
  font-size:13px; font-weight:400;
  color:var(--t2); text-align:center;
  line-height:1.55;
}

/* ─ Steps ────────────────────────────────── */
.steps-list { display:flex; flex-direction:column; gap:var(--s3); }
.step-item {
  display:flex; gap:var(--s3); align-items:flex-start;
}
.step-num {
  min-width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800;
  color:#fff; flex-shrink:0;
  position:relative;
}
.step-num::before {
  content:'';
  position:absolute; inset:0; border-radius:50%;
  background: var(--grad-aurora);
  background-size:200% auto;
  animation: auroraShift 4s ease infinite;
}
.step-num span { position:relative; z-index:1; }
.step-item p {
  font-size:13px; color:var(--t2);
  line-height:1.55; padding-top:2px;
}
.step-item strong {
  color:var(--t1); font-weight:600;
}
.step-free {
  color:var(--gold) !important;
  font-weight:700 !important;
}

/* ─ Progress ─────────────────────────────── */
.prog-block { display:flex; flex-direction:column; gap:7px; }
.prog-row {
  display:flex; justify-content:space-between; align-items:center;
}
.prog-row > span { font-size:12px; color:var(--t3); }
.prog-pct {
  font-family:'Orbitron',sans-serif !important;
  font-size:11px !important;
  background: var(--grad-aurora) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
.prog-track {
  height:4px;
  background:rgba(255,255,255,0.05);
  border-radius:var(--rf); overflow:hidden;
}
.prog-fill {
  height:100%; width:0%;
  background: var(--grad-aurora);
  background-size:200% auto;
  animation: auroraShift 4s ease infinite;
  border-radius:var(--rf);
  position:relative; overflow:hidden;
  transition:width 40ms linear;
}
.prog-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer {
  0%  { transform:translateX(-100%); }
  100%{ transform:translateX(100%);  }
}

/* ─ Link box ─────────────────────────────── */
.link-box {
  display:flex; align-items:center; gap:var(--s2);
  padding:10px var(--s3);
  background:rgba(255,255,255,0.03);
  border-radius:var(--r1);
  color:var(--t3);
  position:relative;
}
.link-box::before {
  content:'';
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,rgba(236,72,153,0.3),rgba(139,92,246,0.3));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.link-url {
  font-size:11px; color:var(--t2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
  font-family:'Inter',sans-serif; letter-spacing:0.02em;
}

/* ─ Copy button ──────────────────────────── */
.btn-copy {
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; padding:14px;
  border-radius:var(--r2);
  font-size:13px; font-weight:700;
  letter-spacing:0.1em; color:#fff;
  position:relative; overflow:hidden;
  transition:transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 0 30px rgba(236,72,153,0.35), 0 0 60px rgba(139,92,246,0.2);
}
.btn-copy::before {
  content:'';
  position:absolute; inset:0;
  background: var(--grad-aurora);
  background-size:200% auto;
  animation: auroraShift 3s ease infinite;
}
.btn-copy::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,transparent 60%);
}
.btn-copy svg, .btn-copy span { position:relative; z-index:1; }
.btn-copy:hover {
  transform:translateY(-2px);
  box-shadow:0 0 50px rgba(236,72,153,0.5), 0 0 80px rgba(139,92,246,0.3);
}
.btn-copy:active { transform:translateY(0); }

/* ─ Dots ─────────────────────────────────── */
.dots-wrap {
  display:flex; align-items:center;
  justify-content:center; gap:var(--s3);
}
.dots-row { display:flex; gap:var(--s1); }
.dot {
  width:28px; height:5px; border-radius:var(--rf);
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.dot.filled {
  background: var(--grad-aurora);
  background-size:200% auto;
  border-color:transparent;
  box-shadow:0 0 8px rgba(139,92,246,0.6);
  animation:auroraShift 3s ease infinite;
}
.dots-label { font-size:11px; color:var(--t3); }

/* ─ OR ───────────────────────────────────── */
.or-row {
  display:flex; align-items:center; gap:var(--s3);
}
.or-line { flex:1; height:1px; background:rgba(255,255,255,0.06); }
.or-row span {
  font-size:10px; font-weight:700;
  color:var(--t3); letter-spacing:0.14em;
}

/* ─ Buy button ───────────────────────────── */
.btn-buy {
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; padding:14px;
  background: var(--grad-buy);
  border-radius:var(--r2);
  font-size:13px; font-weight:700;
  letter-spacing:0.08em; color:#fff;
  transition:all 0.2s;
  box-shadow:0 0 28px rgba(16,185,129,0.35);
  position:relative; overflow:hidden;
}
.btn-buy::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.1) 0%,transparent 60%);
}
.btn-buy svg, .btn-buy span { position:relative; z-index:1; }
.btn-buy:hover {
  transform:translateY(-2px);
  box-shadow:0 0 50px rgba(16,185,129,0.55);
}
.btn-buy:active { transform:translateY(0); }

/* ─ Previas ──────────────────────────────── */
.btn-previas {
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; padding:12px;
  border-radius:var(--r2);
  font-size:13px; font-weight:600;
  letter-spacing:0.08em;
  background:rgba(255,255,255,0.03);
  color:var(--t2);
  position:relative; overflow:hidden;
  transition:all 0.2s;
}
.btn-previas::before {
  content:'';
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,rgba(236,72,153,0.25),rgba(139,92,246,0.25),rgba(6,182,212,0.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.btn-previas:hover {
  background:rgba(139,92,246,0.1);
  color:var(--t1);
}

/* ─ Card footer ──────────────────────────── */
.card-footer {
  font-size:11px; color:var(--t3);
  text-align:center; letter-spacing:0.05em;
}

/* ════════════════════════════════════════════
   TOAST
════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(64px);
  display:flex; align-items:center; gap:8px;
  padding:10px 20px;
  background:rgba(16,185,129,0.12);
  border:1px solid rgba(16,185,129,0.3);
  border-radius:var(--rf);
  font-size:13px; font-weight:500; color:#6ee7b7;
  z-index:999; white-space:nowrap;
  backdrop-filter:blur(12px);
  opacity:0;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
}
.toast.show {
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width:480px) {
  .lang-inner {
    padding: 28px 18px;
    gap: 22px;
    border-radius: 22px;
    max-width: 100%;
  }
  .lang-head h1 { font-size:14px; }
  .lang-grid { gap:var(--s1); }
  .lang-card { padding:12px 6px; }
  .lf { font-size:20px; }
  .ln { font-size:9px; }
}

@media (max-width:400px) {
  body  { padding:var(--s4) var(--s3); }
  .card { padding:var(--s4); gap:var(--s3); }
  .size-txt { font-size:17px; }
  .dot  { width:22px; }
  .lang-inner { padding:22px 14px; border-radius:18px; }
  .lang-card  { padding:10px 4px; border-radius:10px; }
  .lf { font-size:18px; }
}