:root{
  --bg-1:#06081a;
  --bg-2:#0a1433;
  --bg-3:#121a3f;
  --card:#0f1735cc;
  --card-2:#121d45e8;
  --line:rgba(255,255,255,.10);
  --text:#f7fbff;
  --muted:#b9c4e3;
  --purple:#8b3dff;
  --blue:#2fc6ff;
  --yellow:#ffd84e;
  --green:#17d975;
  --red:#ff4058;
  --shadow:0 24px 60px rgba(0,0,0,.35);
  --radius:28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:"Montserrat",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(139,61,255,.16), transparent 30%),
    radial-gradient(circle at top right, rgba(47,198,255,.12), transparent 26%),
    linear-gradient(180deg, #040611 0%, #09122d 42%, #060916 100%);
  overflow-x:hidden;
}
.bg-orb{
  position:fixed;
  border-radius:50%;
  filter:blur(8px);
  pointer-events:none;
  z-index:0;
  animation:floatOrb 12s ease-in-out infinite;
}
.orb-1{
  width:340px;height:340px;left:-120px;top:-70px;
  background:radial-gradient(circle, rgba(139,61,255,.30) 0%, rgba(139,61,255,0) 70%);
}
.orb-2{
  width:420px;height:420px;right:-140px;bottom:-120px;
  background:radial-gradient(circle, rgba(47,198,255,.20) 0%, rgba(47,198,255,0) 70%);
  animation-duration:16s;
}
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, rgba(255,255,255,.35), transparent 85%);
}
.app-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  position:relative;
  z-index:1;
}
.app-card{
  width:min(100%, 960px);
  min-height:760px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(145deg, var(--card) 0%, var(--card-2) 100%);
  backdrop-filter: blur(16px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px 24px 30px;
  position:relative;
  overflow:hidden;
}
.app-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,216,78,.08), transparent 20%),
    radial-gradient(circle at 80% 0%, rgba(139,61,255,.14), transparent 24%);
  pointer-events:none;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{
  width:58px;height:46px;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;
}
.piece{display:block;border-radius:14px 14px 6px 6px;position:relative}
.piece::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:inherit}
.red{background:#f2323e}.red::after{right:-5px;top:8px}
.yellow{background:#ffcf32}.yellow::after{left:-5px;top:8px}
.blue{background:#1db6ff}.blue::after{right:-5px;bottom:8px}
.green{background:#18d56a}.green::after{left:-5px;bottom:8px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{
  font-size:1.55rem;font-weight:900;letter-spacing:.03em;
  background:linear-gradient(90deg,#ff4058 0 22%, #ffd84e 22% 42%, #17d975 42% 64%, #2fc6ff 64% 86%, #b18cff 86% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-text span{font-size:.88rem;font-weight:800;letter-spacing:.22em;color:#fff}
.progress-wrap{margin-bottom:24px}
.progress-meta{
  display:flex;justify-content:space-between;align-items:center;
  color:var(--muted);font-size:.9rem;margin-bottom:10px;
}
.progress-bar{
  height:12px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;border:1px solid rgba(255,255,255,.06);
}
.progress-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg, var(--purple) 0%, var(--blue) 55%, var(--yellow) 100%);
  box-shadow:0 0 24px rgba(47,198,255,.35);
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.screen{display:none;min-height:610px;animation:fadeSlide .55s ease both}
.screen.active{display:flex;align-items:center;justify-content:center}
.hero-badge,.question-badge,.result-pill{
  display:inline-flex;align-items:center;min-height:34px;padding:0 14px;
  border-radius:999px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);color:#dfe7ff;
  font-size:.78rem;font-weight:800;letter-spacing:.08em;
}
#welcomeScreen{flex-direction:column;text-align:center;gap:18px;padding:18px 10px}
#welcomeScreen h1{
  margin:0;font-size:clamp(2rem, 4.8vw, 4rem);
  line-height:1.04;font-weight:900;letter-spacing:-.03em;
}
.hero-text{
  max-width:720px;margin:0 auto;color:var(--muted);
  line-height:1.9;font-size:1.02rem;
}
.highlight-box{
  width:100%;max-width:760px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;
}
.highlight-item{
  padding:20px 18px;border-radius:22px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);text-align:left;
}
.highlight-item strong{display:block;font-size:1.4rem;margin-bottom:8px}
.highlight-item span{color:var(--muted);line-height:1.55;font-size:.92rem}
.primary-btn,.ghost-btn{
  border:none;cursor:pointer;font-family:inherit;
  transition:transform .2s ease, filter .2s ease;
}
.primary-btn{
  min-height:58px;padding:0 28px;border-radius:18px;
  background:linear-gradient(135deg, #8b3dff 0%, #2fc6ff 65%, #ffd84e 100%);
  color:#09111f;font-weight:900;letter-spacing:.02em;
  box-shadow:0 18px 30px rgba(47,198,255,.18);
}
.primary-btn:hover,.ghost-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.big-btn{width:100%;text-decoration:none;display:flex;align-items:center;justify-content:center}
.ghost-btn{
  min-height:48px;padding:0 18px;border-radius:14px;
  background:rgba(255,255,255,.06);color:var(--text);
  border:1px solid rgba(255,255,255,.10);
}
.helper-text{color:#8fa1c8;font-size:.9rem;margin:0}
.pulse{animation:pulse 1.9s ease-in-out infinite}
.question-card,.result-card,.loading-content{
  width:100%;max-width:780px;padding:18px 6px;
}
.question-card h2,.result-card h2,.loading-content h2{
  margin:18px 0 10px;font-size:clamp(1.8rem, 3.2vw, 3rem);
  line-height:1.08;font-weight:900;
}
.question-description,.result-text,.loading-content p{
  color:var(--muted);line-height:1.85;font-size:1rem;margin:0 0 24px;
}
.answers{display:grid;gap:14px}
.answer-btn{
  width:100%;text-align:left;padding:18px 20px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:var(--text);font-size:1rem;font-weight:700;cursor:pointer;position:relative;
  overflow:hidden;transition:transform .2s ease, border-color .2s ease, background .25s ease;
}
.answer-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(139,61,255,.18), rgba(47,198,255,.12));
  opacity:0;transition:opacity .25s ease;
}
.answer-btn span{position:relative;z-index:1}
.answer-btn:hover,.answer-btn.selected{
  transform:translateY(-2px);
  border-color:rgba(47,198,255,.35);
  background:rgba(255,255,255,.09);
}
.answer-btn:hover::before,.answer-btn.selected::before{opacity:1}
.nav-row{display:flex;justify-content:space-between;margin-top:18px}
.loading-content{text-align:center;position:relative;padding-top:70px}
.scan-ring{
  position:absolute;left:50%;top:20px;width:120px;height:120px;border-radius:50%;
  border:2px solid rgba(47,198,255,.26);transform:translateX(-50%);
  animation:scanPulse 1.8s ease-out infinite;
}
.ring-2{animation-delay:.35s}.ring-3{animation-delay:.7s}
.analysis-list{max-width:420px;margin:24px auto 24px;display:grid;gap:10px}
.analysis-item{
  padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);
  color:var(--muted);border:1px solid rgba(255,255,255,.08);
}
.analysis-item.active{
  color:var(--text);border-color:rgba(47,198,255,.28);background:rgba(47,198,255,.08);
}
.loading-bar{max-width:520px;margin:0 auto}
.score-panel{
  display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:center;margin:28px 0 24px;
}
.score-circle{
  width:180px;height:180px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at center, rgba(15,23,53,1) 50%, transparent 51%),
    conic-gradient(var(--green) 0 35%, var(--blue) 35% 68%, var(--yellow) 68% 86%, var(--red) 86% 100%);
  box-shadow:0 20px 36px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
}
.score-circle span{font-size:3rem;font-weight:900;line-height:1}
.score-circle small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.score-points{display:grid;gap:12px}
.score-point,.break-belief{
  padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.break-belief strong{display:block;margin-bottom:8px;font-size:1.05rem}
.break-belief p{margin:0;color:var(--muted);line-height:1.7}
.cta-panel{display:grid;gap:14px;margin-top:22px}
@keyframes fadeSlide{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes scanPulse{
  0%{transform:translateX(-50%) scale(.85);opacity:.8}
  100%{transform:translateX(-50%) scale(1.25);opacity:0}
}
@keyframes floatOrb{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@media (max-width:860px){
  .highlight-box,.score-panel{grid-template-columns:1fr}
  .score-circle{margin:0 auto}
}
@media (max-width:640px){
  .app-shell{padding:14px}
  .app-card{min-height:auto;padding:18px 16px 22px;border-radius:24px}
  .topbar{align-items:flex-start;flex-direction:column}
  .screen{min-height:560px}
}