/* ===== The 3% Club — Shared Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  --gold: #D4AF37;
  --gold-light: #E5C158;
  --bg: #050505;
  --card: #0A0A0A;
  --card-form: #0C0C0C;
  --border-subtle: rgba(255,255,255,0.08);
  --border-gold: rgba(212,175,55,0.3);
  --text: #F5F5F5;
  --text-muted: #A1A1AA;
  --text-dim: #71717A;
  --text-dark: #52525B;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

::selection { background: rgba(212,175,55,0.3); color: #F5F5F5; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 2px; }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.fade-in { animation: fadeIn 0.8s ease-out forwards; }
.fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
.scale-in { animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.slide-in-right { animation: slideInRight 0.6s ease-out forwards; }

.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.delay-4 { animation-delay: 0.4s; opacity: 0; }
.delay-5 { animation-delay: 0.5s; opacity: 0; }
.delay-6 { animation-delay: 0.6s; opacity: 0; }
.delay-7 { animation-delay: 0.7s; opacity: 0; }
.delay-8 { animation-delay: 0.8s; opacity: 0; }
.delay-9 { animation-delay: 0.9s; opacity: 0; }
.delay-10 { animation-delay: 1.0s; opacity: 0; }
.delay-11 { animation-delay: 1.1s; opacity: 0; }
.delay-12 { animation-delay: 1.2s; opacity: 0; }
.delay-14 { animation-delay: 1.4s; opacity: 0; }

/* Ping dot */
.ping-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.ping-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: 0.75; animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
.ping-dot::after { content: ''; position: relative; display: inline-flex; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.ping-green::before { background: #10B981; }
.ping-green::after { background: #10B981; }

/* Quiz option */
.quiz-option {
  display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.4); backdrop-filter: blur(16px); cursor: pointer; width: 100%;
  text-align: left; transition: border-color 0.3s, background 0.3s; color: var(--text);
}
.quiz-option:hover { border-color: rgba(212,175,55,0.3); }
.quiz-option.selected { border-color: var(--gold); background: rgba(212,175,55,0.05); }
.quiz-option .key {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.2); font-size: 12px; font-weight: 600; flex-shrink: 0;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.quiz-option:hover .key { border-color: rgba(212,175,55,0.5); color: rgba(212,175,55,0.5); }
.quiz-option.selected .key { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,0.1); }

/* Progress bar */
.progress-bar { height: 2px; background: #18181b; width: 100%; overflow: hidden; }
.progress-bar .fill { height: 100%; background: var(--gold); transition: width 0.7s ease-out; }

/* Input */
.vip-input {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15);
  padding: 12px 16px; font-size: 16px; color: white; outline: none; font-family: 'Manrope', sans-serif;
  transition: border-color 0.3s;
}
.vip-input::placeholder { color: #52525b; }
.vip-input:focus { border-color: var(--gold); }

/* Gold button */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--gold); color: black;
  font-weight: 700; padding: 16px 32px; text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px;
  border: none; cursor: pointer; font-family: 'Manrope', sans-serif; transition: background 0.3s; width: 100%;
}
.btn-gold:hover { background: var(--gold-light); }
.btn-gold:disabled { opacity: 0.5; cursor: not-allowed; background: #27272a; color: #71717a; }

/* Glass card */
.glass { background: rgba(0,0,0,0.4); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); }

/* Testimonial */
.testimonial-card {
  flex-shrink: 0; width: 260px; padding: 16px 20px; border: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(16px); cursor: pointer; transition: border-color 0.5s, opacity 0.4s;
}
.testimonial-card.active { border-color: rgba(212,175,55,0.4); box-shadow: 0 0 20px -5px rgba(212,175,55,0.15); opacity: 1 !important; }

/* Popup overlay */
.popup-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); animation: fadeIn 0.3s ease-out;
}
.popup-modal {
  background: #0A0A0A; border: 1px solid rgba(212,175,55,0.3); width: 100%; max-width: 420px;
  box-shadow: 0 0 80px -20px rgba(212,175,55,0.2); overflow: hidden; animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scrollbar hide for testimonials */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }

/* Analyzing step dot */
.step-dot { width: 8px; height: 8px; border-radius: 50%; transition: background 0.5s; }
.step-dot.done { background: var(--gold); }
.step-dot.active { background: var(--gold); animation: pulse 1.5s ease-in-out infinite; }
.step-dot.pending { background: #27272a; }

@media (min-width: 640px) {
  .testimonial-card { width: 280px; padding: 20px; }
}