/* ── Reset & base ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0a10;
  --border:#262633;
  --input:#101018;
  --accent:#4f43cf;
  --accent-h:#5c50e0;
  --accent2:#3b7ad6;
  --text:#f0eff6;
  --muted:#9c99b2;
  --sub:#6f6c85;
  --ph:#56536b;
  --err:#e0a0a8;
  --err-b:#8c4a56;
  --req:#c98a95;
  --green:#4caf77;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px;
}

a{color:var(--muted);text-underline-offset:2px}
a:hover{color:var(--text)}

/* ── Animated background blobs ──────────────────────────────── */
.bg{
  position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;
}
.blob{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;
}
.b1{
  width:520px;height:520px;left:-80px;top:-120px;
  background:radial-gradient(circle,#4f43cf 0%,transparent 70%);
  animation:drift1 18s ease-in-out infinite;
}
.b2{
  width:460px;height:460px;right:-60px;bottom:-80px;
  background:radial-gradient(circle,#3b7ad6 0%,transparent 70%);
  animation:drift2 22s ease-in-out infinite;
}

@keyframes drift1{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6%,4%,0) scale(1.12)}
  66%{transform:translate3d(-4%,7%,0) scale(.95)}
}
@keyframes drift2{
  0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  40%{transform:translate3d(-7%,-5%,0) scale(.94)}
  75%{transform:translate3d(5%,3%,0) scale(1.08)}
}
@keyframes pulseDot{
  0%,100%{opacity:1}50%{opacity:.25}
}
@keyframes sweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(340%)}
}

/* ── Card ───────────────────────────────────────────────────── */
.card{
  position:relative;z-index:1;
  width:100%;max-width:520px;
  padding:36px 32px 40px;
}

/* ── Header ─────────────────────────────────────────────────── */
.hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:28px;
}
.brand{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--muted);
}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  animation:pulseDot 2.4s ease-in-out infinite;flex-shrink:0;
}

/* ── Language picker ────────────────────────────────────────── */
.lang-wrap{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--border);border-radius:6px;
  padding:6px 10px;color:var(--muted);font:inherit;font-size:13px;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.lang-btn:hover{border-color:var(--accent);color:var(--text)}
.lang-btn svg{opacity:.6;transition:transform .2s}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.lang-menu{
  position:absolute;right:0;top:calc(100% + 6px);
  background:#14141f;border:1px solid var(--border);border-radius:8px;
  min-width:150px;padding:4px;list-style:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:100;
}
.lang-menu li{
  padding:8px 12px;border-radius:5px;font-size:13px;color:var(--muted);
  cursor:pointer;transition:background .1s,color .1s;
}
.lang-menu li:hover,.lang-menu li.active{background:rgba(79,67,207,.3);color:var(--text)}

/* ── Stats ──────────────────────────────────────────────────── */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--border);border-radius:10px;
  margin-bottom:32px;overflow:hidden;
}
.stat{
  padding:14px 16px;display:flex;flex-direction:column;gap:3px;
  border-right:1px solid var(--border);
}
.stat:last-child{border-right:none}
.sv{font-size:18px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.sl{font-size:11.5px;color:var(--sub);line-height:1.35}

/* ── Form section ───────────────────────────────────────────── */
#xForm h1{font-size:22px;font-weight:600;margin-bottom:10px;line-height:1.3}
#xForm>p{font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.6}

form{display:flex;flex-direction:column;gap:18px}

.g2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  gap:18px;
}

.fld{display:flex;flex-direction:column;gap:7px}
.lbl{font-size:13px;color:var(--muted)}
.req{color:var(--req)}

input,select{
  background:var(--input);
  border:1px solid var(--border);
  border-radius:6px;
  padding:11px 13px;
  font-family:inherit;font-size:15px;color:var(--text);
  outline:none;width:100%;
  transition:border-color .15s;
  appearance:none;-webkit-appearance:none;
}
input::placeholder{color:var(--ph)}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2356536b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  padding-right:34px;cursor:pointer;
}
select option{background:#14141c;color:var(--text)}
input:focus,select:focus{border-color:var(--accent)}

.hint{font-size:12.5px;color:var(--sub);margin-top:-2px}

.err{
  font-size:14px;color:var(--err);
  border-left:2px solid var(--err-b);
  padding:3px 0 3px 12px;
}

/* ── Progress ───────────────────────────────────────────────── */
.prog-row{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--sub);
}
.prog-bar{
  flex:1;height:3px;background:var(--border);border-radius:999px;overflow:hidden;
}
.prog-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:999px;transition:width .3s ease;
}
.prog-n{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Submit button ──────────────────────────────────────────── */
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:4px}
.btn{
  position:relative;overflow:hidden;
  border:none;cursor:pointer;
  border-radius:6px;padding:13px 26px;
  font-family:inherit;font-size:15px;font-weight:500;color:#fff;
  background:var(--accent);transition:background .15s,opacity .15s;
  flex-shrink:0;
}
.btn:hover:not(:disabled){background:var(--accent-h)}
.btn:disabled{cursor:not-allowed}
.shine{
  position:absolute;top:0;left:0;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  animation:sweep 3.6s linear infinite;
}
.privacy{font-size:12.5px;color:var(--sub)}

/* ── Chips ──────────────────────────────────────────────────── */
.chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;
}
.chip{
  font-size:12px;color:var(--sub);
  border:1px solid var(--border);border-radius:999px;
  padding:4px 11px;
}

/* ── FAQ accordions ─────────────────────────────────────────── */
.faq{margin-top:22px;display:flex;flex-direction:column;gap:2px}
.faq details{
  border-top:1px solid var(--border);
}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{
  padding:12px 0;font-size:13.5px;color:var(--muted);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;user-select:none;
}
.faq summary::after{
  content:'';display:inline-block;
  width:10px;height:6px;flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f6c85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;transition:transform .2s;margin-left:12px;
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary::-webkit-details-marker{display:none}
.faq details p{
  padding:0 0 14px;font-size:13.5px;color:var(--sub);line-height:1.65;
}
.faq details a{color:var(--muted)}

/* ── Done / success ─────────────────────────────────────────── */
#xDone{text-align:center;padding:12px 0 4px}
.done-icon{
  width:52px;height:52px;border-radius:50%;
  background:rgba(76,175,119,.15);border:1px solid rgba(76,175,119,.35);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;font-size:22px;color:var(--green);
}
#xDone h2{font-size:20px;font-weight:600;margin-bottom:10px}
.done-lead{font-size:14px;color:var(--muted);margin-bottom:28px;line-height:1.6}
.done-lead strong{color:var(--text)}

.steps{
  display:flex;flex-direction:column;gap:12px;
  text-align:left;margin-bottom:28px;
}
.step{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:var(--sub);
}
.step.done{color:var(--muted)}
.step.active{color:var(--text)}

.step-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--border);
}
.step.done .step-dot{background:var(--green)}
.step.active .step-dot{
  background:var(--accent);
  animation:pulseDot 1.6s ease-in-out infinite;
}
.step em{font-style:normal;font-size:12px;opacity:.7}

.done-notes{
  border-top:1px solid var(--border);padding-top:20px;text-align:left;
  display:flex;flex-direction:column;gap:10px;
}
.done-notes p{font-size:13px;color:var(--sub);line-height:1.6}
.done-notes strong{color:var(--muted)}

/* ── Reset / submit-another button ─────────────────────────── */
.btn-reset{
  margin-top:24px;background:none;border:1px solid var(--border);
  border-radius:6px;padding:10px 22px;font-family:inherit;font-size:14px;
  color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s;
}
.btn-reset:hover{border-color:var(--accent);color:var(--text)}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:600px){
  body{padding:16px 12px;align-items:flex-start}
  .card{padding:24px 16px 32px}
  .stats{grid-template-columns:1fr 1fr;border-radius:8px}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(3){
    grid-column:span 2;border-top:1px solid var(--border);
  }
  .sv{font-size:16px}
  #xForm h1{font-size:19px}
  .btn{width:100%}
  .form-foot{flex-direction:column;align-items:flex-start;gap:12px}
}