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

:root {
  --background: 210 20% 99.2%;
  --foreground: 220 5% 18%;
  --card: 210 20% 99.2%;
  --card-foreground: 220 5% 18%;
  --primary: 220 12% 8.5%;
  --primary-foreground: 210 20% 99.2%;
  --secondary: 216 12% 91%;
  --secondary-foreground: 220 12% 8.5%;
  --muted: 216 12% 91%;
  --muted-foreground: 220 3% 46%;
  --accent: 40 42% 56%;
  --accent-foreground: 210 20% 99.2%;
  --border: 216 12% 91%;
  --ring: 40 42% 56%;
  --radius: 0.5rem;
  --headline: 220 12% 8.5%;
  --subtle: 216 12% 91%;
  --body: 220 5% 18%;
  --input: 216 12% 91%;
  --destructive: 0 84.2% 60.2%;
  --gold: 40 42% 56%;
  --gold-hover: 40 42% 48%;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6;
  color:hsl(var(--foreground));
  background:hsl(var(--background));
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button,input { font-family:inherit; font-size:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }

/* Page Layout */
.page-wrapper {
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-height:100vh; padding:2rem 1rem;
  overflow:hidden;
}
.page-wrapper::before {
  content:''; position:absolute; top:-40%; left:-20%;
  width:80%; height:80%;
  background:radial-gradient(ellipse at center,hsla(var(--accent),0.06) 0%,transparent 70%);
  pointer-events:none; z-index:0;
}
.page-wrapper::after {
  content:''; position:absolute; bottom:-30%; right:-20%;
  width:70%; height:70%;
  background:radial-gradient(ellipse at center,hsla(var(--accent),0.04) 0%,transparent 70%);
  pointer-events:none; z-index:0;
}

.bg-line {
  position:absolute; width:1px; height:60%;
  background:linear-gradient(to bottom,transparent,hsla(var(--accent),0.1),transparent);
  pointer-events:none; z-index:0;
}
.bg-line--left { left:10%; top:20%; }
.bg-line--right { right:12%; top:10%; }

.main-content {
  position:relative; z-index:1;
  width:100%; max-width:36rem;
  text-align:center;
}

/* Badge */
.badge {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin-bottom:1.5rem;
}
.badge__line {
  flex:0 1 4rem; height:1px;
  background:linear-gradient(to right,transparent,hsl(var(--subtle)));
}
.badge__line--right {
  background:linear-gradient(to left,transparent,hsl(var(--subtle)));
}
.badge__text {
  font-size:0.7rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase;
  color:hsl(var(--muted-foreground));
  white-space:nowrap;
}

/* Headline */
.headline {
  font-family:'Lora',Georgia,serif;
  font-size:2.5rem; font-weight:700;
  line-height:1.15; letter-spacing:-0.02em;
  margin-bottom:1rem;
  background:linear-gradient(135deg,hsl(var(--headline)) 40%,hsl(var(--accent)) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.headline--sm { font-size:1.75rem; }

/* Divider line */
.divider-line {
  width:4rem; height:2px; margin:0 auto 1.25rem;
  border:none; border-radius:999px;
  background:linear-gradient(to right,hsl(var(--accent)),hsla(var(--accent),0.2));
}

/* Subtitle */
.subtitle {
  font-size:1.05rem; line-height:1.7;
  color:hsl(var(--muted-foreground));
  margin-bottom:1.5rem;
  max-width:32rem; margin-left:auto; margin-right:auto;
}

/* Social Proof Pill */
.social-proof {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.4rem 1rem; border-radius:999px;
  background:hsla(var(--secondary),0.7);
  border:1px solid hsl(var(--border));
  font-size:0.8rem; color:hsl(var(--muted-foreground));
  margin-bottom:2rem; backdrop-filter:blur(4px);
}
.social-proof__dot-wrapper {
  position:relative; width:8px; height:8px;
}
.social-proof__dot {
  width:8px; height:8px; border-radius:50%;
  background:hsl(142 70% 36%);
}
.social-proof__ping {
  position:absolute; inset:0; border-radius:50%;
  background:hsl(142 70% 36%);
  animation:ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping {
  0% { transform:scale(1); opacity:0.75; }
  75%,100% { transform:scale(2.2); opacity:0; }
}

/* Gold CTA Button */
.btn-gold {
  display:inline-flex; align-items:center; justify-content:center;
  gap:0.5rem; width:100%;
  padding:0.9rem 2rem; border-radius:var(--radius);
  font-size:0.95rem; font-weight:600;
  color:hsl(var(--accent-foreground));
  background:linear-gradient(135deg,hsl(var(--gold)),hsl(var(--gold-hover)));
  box-shadow:0 0 20px hsla(var(--gold),0.3),0 4px 12px hsla(var(--gold),0.15);
  transition:all 0.25s; border:none;
}
.btn-gold:hover {
  box-shadow:0 0 30px hsla(var(--gold),0.4),0 6px 20px hsla(var(--gold),0.2);
  transform:translateY(-1px);
}
.btn-gold:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

/* Submit Button */
.btn-submit {
  display:inline-flex; align-items:center; justify-content:center;
  gap:0.5rem; width:100%;
  padding:0.75rem 1.5rem; margin-top:0.5rem;
  border-radius:var(--radius);
  font-size:0.9rem; font-weight:600;
  color:hsl(var(--accent-foreground));
  background:linear-gradient(135deg,hsl(var(--gold)),hsl(var(--gold-hover)));
  box-shadow:0 0 16px hsla(var(--gold),0.25),0 2px 8px hsla(var(--gold),0.1);
  border:none; cursor:pointer; transition:all 0.25s;
}
.btn-submit:hover {
  box-shadow:0 0 24px hsla(var(--gold),0.35),0 4px 14px hsla(var(--gold),0.15);
  transform:translateY(-1px);
}
.btn-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

/* WhatsApp Button */
.btn-whatsapp {
  display:inline-flex; align-items:center; justify-content:center;
  gap:0.6rem; width:100%;
  padding:0.85rem 1.5rem; border-radius:var(--radius);
  font-size:0.95rem; font-weight:600; color:#fff;
  background:hsl(142 70% 36%);
  box-shadow:0 0 20px hsla(142,70%,36%,0.3),0 4px 12px hsla(142,70%,36%,0.15);
  border:none; cursor:pointer; transition:all 0.25s;
}
.btn-whatsapp:hover {
  background:hsl(142 70% 30%);
  box-shadow:0 0 28px hsla(142,70%,36%,0.4),0 6px 18px hsla(142,70%,36%,0.2);
  transform:translateY(-1px);
}

/* Outline Button */
.btn-outline {
  display:inline-flex; align-items:center; justify-content:center;
  gap:0.5rem; width:100%;
  padding:0.75rem 1.5rem; border-radius:var(--radius);
  font-size:0.9rem; font-weight:500;
  color:hsl(var(--muted-foreground));
  background:transparent;
  border:1px solid hsl(var(--border));
  cursor:pointer; transition:all 0.2s;
}
.btn-outline:hover {
  background:hsl(var(--secondary));
  border-color:hsl(var(--muted-foreground));
  color:hsl(var(--foreground));
}

/* Modal */
.modal-overlay {
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  background:hsla(var(--primary),0.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadeIn 0.3s ease;
}
.modal-overlay.hidden { display:none; }

.modal-card {
  position:relative; width:100%; max-width:28rem;
  max-height:90vh; overflow-y:auto;
  background:hsl(var(--card));
  border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) * 2);
  padding:2rem;
  box-shadow:0 25px 50px -12px hsla(var(--primary),0.15);
  animation:slideUp 0.35s ease;
}
.modal-card__close {
  position:absolute; top:1rem; right:1rem;
  width:2rem; height:2rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
  color:hsl(var(--muted-foreground));
  transition:background 0.15s,color 0.15s;
  font-size:1.25rem;
}
.modal-card__close:hover {
  background:hsl(var(--secondary));
  color:hsl(var(--foreground));
}

.modal-card__divider {
  width:3rem; height:1px; margin:0 auto 1rem;
  background:linear-gradient(to right,transparent,hsla(var(--accent),0.6),transparent);
}
.modal-card__title {
  font-family:'Lora',Georgia,serif;
  font-size:1.35rem; font-weight:700;
  color:hsl(var(--headline));
  margin-bottom:0.25rem; text-align:center;
}
.modal-card__subtitle {
  font-size:0.85rem; color:hsl(var(--muted-foreground));
  text-align:center; margin-bottom:1.5rem;
}

/* Form */
.form-group { margin-bottom:1rem; }
.form-label {
  display:block;
  font-size:11px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:hsl(var(--muted-foreground));
  margin-bottom:0.35rem;
}
.form-input {
  width:100%; padding:0.65rem 0.85rem;
  font-size:0.9rem; border-radius:var(--radius);
  border:1px solid hsl(var(--input));
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  transition:border-color 0.2s,box-shadow 0.2s;
  outline:none;
}
.form-input::placeholder { color:hsla(var(--muted-foreground),0.5); }
.form-input:focus {
  border-color:hsl(var(--ring));
  box-shadow:0 0 0 3px hsla(var(--ring),0.15);
}
.form-input--error { border-color:hsl(var(--destructive)); }
.form-error {
  font-size:0.75rem; color:hsl(var(--destructive));
  margin-top:0.25rem; display:none;
}
.form-error.show { display:block; }

/* Phone prefix */
.phone-wrapper { display:flex; }
.phone-prefix {
  display:flex; align-items:center;
  padding:0 0.75rem;
  border:1px solid hsl(var(--input));
  border-right:none;
  border-radius:var(--radius) 0 0 var(--radius);
  background:hsl(var(--muted));
  font-size:0.9rem; font-weight:700;
  color:hsl(var(--accent));
}
.phone-wrapper .form-input {
  border-radius:0 var(--radius) var(--radius) 0;
}

/* Form social proof */
.form-social-proof {
  margin-top:1rem; text-align:center;
  font-size:0.7rem; letter-spacing:0.05em;
  color:hsla(var(--muted-foreground),0.6);
}

/* Thank-you page */
.thankyou { text-align:center; animation:fadeIn 0.5s ease; }
.thankyou__icon {
  width:4rem; height:4rem; margin:0 auto 1.25rem;
  border-radius:50%;
  background:linear-gradient(135deg,hsla(var(--accent),0.2),hsla(var(--accent),0.05));
  border:1px solid hsla(var(--accent),0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem;
  animation:scaleIn 0.5s ease;
}
.thankyou__heading {
  font-family:'Lora',Georgia,serif;
  font-size:1.5rem; font-weight:700;
  color:hsl(var(--headline));
  margin-bottom:0.5rem;
}
.thankyou__text {
  font-size:0.95rem; color:hsl(var(--muted-foreground));
  margin-bottom:1.5rem; line-height:1.7;
  max-width:28rem; margin-left:auto; margin-right:auto;
}
.thankyou__buttons {
  display:flex; flex-direction:column;
  gap:0.75rem; max-width:22rem; margin:0 auto;
}
.thankyou__divider {
  display:flex; align-items:center; gap:1rem;
  margin:0.25rem 0;
  color:hsl(var(--muted-foreground));
  font-size:0.75rem; text-transform:uppercase;
  letter-spacing:0.1em;
}
.thankyou__divider::before,.thankyou__divider::after {
  content:''; flex:1; height:1px;
  background:hsl(var(--border));
}

/* Quiz */
.quiz-container { width:100%; animation:fadeIn 0.35s ease; }
.quiz-progress { margin-bottom:1.5rem; }
.quiz-progress__bar-track {
  width:100%; height:4px;
  background:hsl(var(--secondary));
  border-radius:999px; overflow:hidden; margin-bottom:0.5rem;
}
.quiz-progress__bar-fill {
  height:100%;
  background:linear-gradient(to right,hsl(var(--gold)),hsl(var(--gold-hover)));
  border-radius:999px; transition:width 0.4s ease;
}
.quiz-progress__text {
  font-size:0.75rem; color:hsl(var(--muted-foreground));
  text-align:right;
}
.quiz-question {
  font-family:'Lora',Georgia,serif;
  font-size:1.15rem; font-weight:600;
  color:hsl(var(--headline));
  margin-bottom:1.25rem; text-align:left;
}
.quiz-options { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.5rem; }
.quiz-option {
  width:100%; padding:0.8rem 1rem;
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  background:hsl(var(--background));
  font-size:0.9rem; text-align:left;
  color:hsl(var(--foreground));
  cursor:pointer; transition:all 0.2s;
}
.quiz-option:hover {
  border-color:hsl(var(--accent));
  background:hsla(var(--accent),0.05);
}
.quiz-option--selected {
  border-color:hsl(var(--accent));
  background:hsla(var(--accent),0.08);
  box-shadow:0 0 0 2px hsla(var(--accent),0.15);
}
.quiz-back {
  display:inline-flex; align-items:center; gap:0.35rem;
  font-size:0.8rem; color:hsl(var(--muted-foreground));
  cursor:pointer; padding:0.25rem 0; transition:color 0.15s;
}
.quiz-back:hover { color:hsl(var(--foreground)); }

/* Popup overlay */
.popup-overlay {
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  background:hsla(var(--primary),0.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:fadeIn 0.25s ease;
}
.popup-card {
  width:100%; max-width:24rem;
  background:hsl(var(--card));
  border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) * 2);
  padding:2rem; text-align:center;
  box-shadow:0 25px 50px -12px hsla(var(--primary),0.2);
  animation:slideUp 0.3s ease;
}
.popup-card__icon { font-size:2rem; margin-bottom:0.75rem; }
.popup-card__title {
  font-family:'Lora',Georgia,serif;
  font-size:1.2rem; font-weight:700;
  color:hsl(var(--headline)); margin-bottom:0.5rem;
}
.popup-card__text {
  font-size:0.85rem; color:hsl(var(--muted-foreground));
  margin-bottom:1.25rem; line-height:1.6;
}
.popup-card__actions { display:flex; flex-direction:column; gap:0.6rem; }

/* Success state */
.success-state { text-align:center; padding:1rem 0; animation:fadeIn 0.4s ease; }
.success-icon {
  width:4rem; height:4rem; margin:0 auto 1.25rem;
  border-radius:50%;
  background:linear-gradient(135deg,hsla(var(--accent),0.2),hsla(var(--accent),0.05));
  border:1px solid hsla(var(--accent),0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem;
  animation:scaleIn 0.4s ease;
}
.success-heading {
  font-family:'Lora',Georgia,serif;
  font-size:1.25rem; font-weight:700;
  color:hsl(var(--headline)); margin-bottom:0.5rem;
}
.success-text {
  font-size:0.85rem; color:hsl(var(--muted-foreground));
  margin-bottom:1.5rem; line-height:1.6;
}

/* Spinner */
.spinner {
  display:inline-block; width:1.25rem; height:1.25rem;
  border:2px solid hsla(var(--accent-foreground),0.3);
  border-top-color:hsl(var(--accent-foreground));
  border-radius:50%; animation:spin 0.6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Animations */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.8); } to { opacity:1; transform:scale(1); } }

/* Responsive */
@media (max-width:640px) {
  .headline { font-size:1.85rem; }
  .headline--sm { font-size:1.4rem; }
  .subtitle { font-size:0.95rem; }
  .modal-card { padding:1.5rem; margin:0.5rem; }
  .page-wrapper { padding:1.5rem 1rem; }
  .thankyou__heading { font-size:1.3rem; }
  .badge__line { max-width:2.5rem; }
}