/* Solar Symphony Holdings — funnel styles. Mobile-first, no framework. */
:root{
  --bg:#0b1020; --card:#121a31; --ink:#f4f7ff; --muted:#9fb0d0;
  --brand:#ffb020; --brand-ink:#1a1205; --line:#26324f; --ok:#2ecc71;
  --radius:14px; --maxw:520px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand)}
.hp{position:absolute;left:-9999px}

/* top bar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;max-width:var(--maxw);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700}
.logo-dot{width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffd97a,var(--brand));
  box-shadow:0 0 14px var(--brand)}
.lang-toggle{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:6px 13px;font-weight:600;cursor:pointer;
}
.lang-toggle:hover{border-color:var(--brand);color:var(--ink)}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:6px 18px 40px}

/* trust strip */
.trust{display:flex;align-items:center;gap:10px;margin:6px 0 18px}
.stars{color:var(--brand);letter-spacing:2px;font-size:18px}
.trust-text{margin:0;color:var(--muted);font-size:13px}

/* progress */
.progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,#ffd97a,var(--brand));
  transition:width .35s ease;width:25%}
.step-count{text-align:right;color:var(--muted);font-size:12px;margin:6px 2px 16px}

/* card / steps */
#quiz{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.step{display:none;animation:fade .3s ease}
.step.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1{font-size:22px;line-height:1.25;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 18px;font-size:14px}

/* options */
.options{display:grid;gap:10px}
.opt{
  text-align:left;background:#0e1730;border:1.5px solid var(--line);color:var(--ink);
  padding:15px 16px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;
  transition:border-color .15s,background .15s,transform .05s;
}
.opt:hover{border-color:var(--brand)}
.opt:active{transform:scale(.99)}
.opt.selected{border-color:var(--brand);background:rgba(255,176,32,.12)}

/* fields */
.field{
  width:100%;background:#0e1730;border:1.5px solid var(--line);color:var(--ink);
  padding:14px 15px;border-radius:12px;font-size:16px;margin-bottom:12px;
}
.field:focus{outline:none;border-color:var(--brand)}
.field::placeholder{color:#6f80a3}

/* consent */
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:8px;
  font-size:12.5px;color:var(--muted);line-height:1.45}
.consent input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand)}

/* errors */
.err{color:#ff7676;font-size:13px;margin:2px 0 0}
.submit-err{text-align:center;margin-top:12px}

/* nav */
.nav{display:flex;gap:10px;margin-top:22px}
.btn-primary{
  flex:1;background:var(--brand);color:var(--brand-ink);border:none;border-radius:12px;
  padding:15px;font-size:16px;font-weight:800;cursor:pointer;text-align:center;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:filter .15s,transform .05s;
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:scale(.99)}
.btn-ghost{
  background:transparent;border:1.5px solid var(--line);color:var(--muted);
  border-radius:12px;padding:15px 20px;font-weight:700;cursor:pointer;
}
.btn-ghost:hover{border-color:var(--brand);color:var(--ink)}

/* success */
.success{text-align:center}
.check{width:62px;height:62px;border-radius:50%;background:var(--ok);color:#06231a;
  font-size:34px;font-weight:900;display:grid;place-items:center;margin:0 auto 14px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.gallery img{width:100%;height:90px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* footer */
.foot{max-width:var(--maxw);margin:0 auto;padding:20px 18px 40px;text-align:center;
  color:var(--muted);font-size:12.5px}
.foot a{color:var(--muted);text-decoration:underline}
.fine{margin-top:4px;opacity:.8}

@media (max-width:380px){ h1{font-size:20px} }