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

:root {
  --bg:#05050a;
  --bg-secondary:#0b0d16;
  --glass:rgba(15,17,29,0.72);
  --glass-border:rgba(255,255,255,0.12);
  --text:#f2f5ff;
  --muted:#a7adbf;
  --accent:#a970ff;
  --accent-2:#f1c75b;
  --radius:22px;
  --shadow:0 25px 60px rgba(0,0,0,0.55);
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  font-family:'Inter', 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--text);
  background:var(--bg);
  position:relative;
  min-height:100dvh;
  overflow-x:hidden;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 900px at 10% -10%, rgba(169,112,255,0.25), transparent 65%),
    radial-gradient(900px 700px at 95% 15%, rgba(241,199,91,0.18), transparent 60%),
    linear-gradient(160deg, rgba(26,20,49,0.95), rgba(5,5,10,0.95));
  z-index:-1;
  filter:saturate(1.1);
}

body::after {
  content:"";
  position:fixed;
  inset:-80px;
  background:radial-gradient(circle, rgba(169,112,255,0.08) 0%, rgba(0,0,0,0) 65%);
  pointer-events:none;
  z-index:-1;
}

a { color:var(--accent-2); text-decoration:none; }
a:hover { text-decoration:underline; }

.app {
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:32px 16px 48px;
  gap:28px;
}

.card {
  position:relative;
  width:min(860px, 100%);
  padding:32px clamp(20px, 4vw, 40px);
  border-radius:var(--radius);
  border:1px solid var(--glass-border);
  background:
    linear-gradient(135deg, rgba(241,199,91,0.06), rgba(169,112,255,0.05)) border-box,
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)) padding-box,
    var(--glass);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
  display:grid;
  gap:18px;
}

.card.intro {
  text-align:center;
  gap:16px;
}

.card.intro h1 {
  font-size:clamp(28px, 5vw, 42px);
  font-weight:700;
  margin:8px 0 0;
}

.card.intro .lead {
  font-size:clamp(16px, 3.5vw, 20px);
  color:var(--muted);
  max-width:560px;
  margin:0 auto;
}

.badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  padding:6px 14px;
  border-radius:999px;
  background:linear-gradient(120deg, rgba(241,199,91,0.35), rgba(169,112,255,0.4));
  color:var(--text);
  font-weight:600;
}

.card.thanks {
  text-align:center;
  overflow:hidden;
}

.card.thanks .thanks-glow {
  position:absolute;
  inset:-40% -20% auto;
  height:65%;
  background:radial-gradient(circle at 50% 0%, rgba(241,199,91,0.55), transparent 65%);
  opacity:0.75;
  filter:blur(40px);
  z-index:-1;
}

.card.thanks h2 {
  font-size:clamp(26px, 4vw, 34px);
  margin-top:8px;
}

.card.blocked {
  text-align:center;
  gap:14px;
}

.hidden { display:none !important; }

.lead { color:var(--muted); }

.btn {
  border:none;
  border-radius:16px;
  padding:14px 22px;
  font-weight:700;
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.35s ease, filter 0.35s ease, opacity 0.2s ease;
  font-size:16px;
}

.btn:active { transform:translateY(1px); }

.btn-gold {
  color:#1a1626;
  background:linear-gradient(120deg, var(--accent-2), #ffe6a3 40%, var(--accent));
  box-shadow:0 16px 40px rgba(241,199,91,0.35);
}

.btn-gold:hover:not(:disabled) { filter:saturate(1.05); box-shadow:0 22px 48px rgba(241,199,91,0.45); }

.btn-ghost {
  background:rgba(255,255,255,0.04);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.18);
}

.btn-ghost:hover:not(:disabled) { background:rgba(255,255,255,0.08); }

.btn:disabled {
  cursor:not-allowed;
  opacity:0.55;
  box-shadow:none;
}

.survey-header {
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 18px;
  align-items:center;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#f7f3ff;
}

.dot {
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
  box-shadow:0 0 18px rgba(241,199,91,0.55);
}

.progress {
  grid-column:1 / -1;
  height:10px;
  background:rgba(255,255,255,0.06);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
}

.bar {
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width 0.45s ease;
}

.step { color:var(--muted); font-size:14px; justify-self:end; }

.qwrap { display:grid; gap:18px; }

.q-title { font-size:clamp(20px, 3.3vw, 28px); margin:6px 0; }

.q-image {
  max-width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 18px 42px rgba(0,0,0,0.35);
}

.options { display:grid; gap:12px; }

.opt {
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:rgba(15,17,29,0.65);
  border:1px solid rgba(255,255,255,0.12);
  padding:14px 16px;
  border-radius:14px;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}

.opt:hover { border-color:rgba(241,199,91,0.45); box-shadow:0 12px 30px rgba(241,199,91,0.18); }

.opt input { accent-color:var(--accent-2); margin-top:2px; }

textarea,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"] {
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(7,9,18,0.75);
  color:var(--text);
  padding:12px 14px;
  font-size:16px;
  font-family:inherit;
  transition:border-color 0.3s ease;
}

textarea:focus,
input:focus { outline:none; border-color:rgba(241,199,91,0.45); }

.range { display:flex; align-items:center; gap:14px; }

.range input[type="range"] { width:100%; accent-color:var(--accent-2); }

.nav { display:flex; justify-content:space-between; margin-top:10px; gap:12px; flex-wrap:wrap; }

.consent-overlay {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,4,10,0.8);
  backdrop-filter:blur(10px);
  z-index:100;
}

.consent-card {
  width:min(520px, 100%);
  padding:32px clamp(20px, 5vw, 36px);
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(160deg, rgba(241,199,91,0.08), rgba(169,112,255,0.16)) border-box,
             rgba(11,12,23,0.9) padding-box;
  box-shadow:0 30px 70px rgba(0,0,0,0.55);
  display:grid;
  gap:18px;
  text-align:center;
}

.consent-logo {
  font-family:'Montserrat', 'Inter', sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-2);
}

.consent-text { color:var(--muted); line-height:1.5; }

.consent-checkbox {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
}

.consent-checkbox input { width:18px; height:18px; accent-color:var(--accent-2); }

.consent-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

.consent-notice {
  font-size:12px;
  color:rgba(255,255,255,0.55);
  line-height:1.5;
}

@media (min-width:720px) {
  .options { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px) {
  .card { padding:28px 20px; }
  .nav { flex-direction:column; }
  .nav .btn { width:100%; }
  .consent-card { padding:28px 18px; }
}