*{box-sizing:border-box;}
:root{
  --blue:#2FA8FF; --orange:#FF7A1A;
  --bg:#08090B; --surface:rgba(255,255,255,0.05); --surface2:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.16);
  --text:#EEF1F5; --text-dim:#8B93A1; --text-faint:#565f6c;
  --success:#4FD07C;
  --body-font:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display-font:'Arial Narrow',var(--body-font);
}
html,body{margin:0;padding:0;}
body{
  min-height:100vh; font-family:var(--body-font); color:var(--text); background:
    radial-gradient(circle at 12% -5%, rgba(255,122,26,0.14), transparent 42%),
    radial-gradient(circle at 88% 15%, rgba(47,168,255,0.16), transparent 48%), var(--bg);
  display:flex; flex-direction:column;
}
a{color:var(--blue);}

.topbar{ padding:20px clamp(20px,5vw,60px); }
.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--text-dim); font-size:13.5px; font-weight:600; }
.brand-dot{ width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--blue)); }
.brand:hover{ color:var(--text); }

.app{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px clamp(20px,5vw,60px) 60px; }

/* Intro */
.intro{ max-width:640px; text-align:center; }
.intro .eyebrow{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:14px; }
.intro h1{ font-size:clamp(30px,5vw,46px); font-weight:800; margin:0 0 18px; text-wrap:balance; font-family:var(--display-font); }
.intro p{ color:var(--text-dim); font-size:15.5px; line-height:1.7; max-width:56ch; margin:0 auto 14px; }
.intro .disclaimer{ font-size:12.5px; color:var(--text-faint); margin-top:22px; }
.intro .meta-row{ display:flex; gap:22px; justify-content:center; margin:26px 0 30px; flex-wrap:wrap; }
.intro .meta-row .m{ text-align:center; }
.intro .meta-row .m b{ display:block; font-size:22px; font-weight:800; }
.intro .meta-row .m span{ font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; }

.btn{
  font-family:var(--body-font); font-weight:650; font-size:15px; padding:15px 30px; border-radius:11px;
  border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--orange),color-mix(in srgb,var(--orange) 60%, white 10%));
  color:#0a0a0a; box-shadow:0 10px 30px rgba(255,122,26,0.35); transition:transform .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn.ghost{ background:none; box-shadow:none; color:var(--text-dim); border:1px solid var(--border-strong); }
.btn.ghost:hover{ color:var(--text); }

/* Question flow */
.quiz{ width:100%; max-width:640px; }
.progress-wrap{ display:flex; align-items:center; gap:12px; margin-bottom:30px; }
.progress-track{ flex:1; height:6px; border-radius:99px; background:var(--surface); overflow:hidden; }
.progress-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--orange),var(--blue)); transition:width .35s ease; }
.progress-label{ font-size:12px; color:var(--text-faint); white-space:nowrap; font-variant-numeric:tabular-nums; }

.q-category{ font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue); font-weight:700; margin-bottom:10px; }
.q-text{ font-size:clamp(21px,3.4vw,28px); font-weight:750; margin:0 0 26px; line-height:1.35; text-wrap:balance; font-family:var(--display-font); }

.answers{ display:flex; flex-direction:column; gap:10px; }
.answer-btn{
  text-align:left; width:100%; font-family:var(--body-font); font-size:15px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px;
  cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.answer-btn:hover{ border-color:var(--border-strong); background:var(--surface2); transform:translateX(2px); }
.answer-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.q-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:24px; }

/* Results */
.results{ width:100%; max-width:720px; }
.results .r-head{ text-align:center; margin-bottom:34px; }
.results .r-head .eyebrow{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:10px; }
.results .r-head h1{ font-size:clamp(26px,4vw,36px); font-weight:800; margin:0; font-family:var(--display-font); }

.match-card{
  background:linear-gradient(155deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03) 60%);
  border:1px solid var(--border); border-radius:18px; padding:26px 26px 24px; margin-bottom:18px;
}
.match-card.top{ border-color:color-mix(in srgb, var(--m-color, var(--orange)) 45%, transparent); }
.match-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.match-name{ display:flex; align-items:center; gap:10px; }
.match-swatch{ width:12px; height:12px; border-radius:4px; background:var(--m-color, var(--orange)); flex:none; }
.match-name h2{ font-size:20px; margin:0; font-weight:750; }
.match-pct{ font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--m-color, var(--orange)); }
.match-rank{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:16px; }

.match-section{ margin-top:16px; }
.match-section h3{ font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-dim); margin:0 0 6px; }
.match-section p{ font-size:14px; line-height:1.7; color:var(--text-dim); margin:0; white-space:pre-line; }

.match-cta{ margin-top:20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pill{ font-size:10.5px; padding:4px 11px; border-radius:20px; border:1px solid var(--border-strong); color:var(--text-dim); }
.pill.live{ background:rgba(79,208,124,0.16); border-color:rgba(79,208,124,0.4); color:var(--success); }
.pill.planned{ background:var(--surface2); }

.r-foot{ text-align:center; margin-top:34px; }
.r-foot p{ color:var(--text-faint); font-size:12px; margin:0 0 18px; max-width:52ch; margin-left:auto; margin-right:auto; }

.foot{ text-align:center; padding:20px 20px 40px; }
.foot p{ color:var(--text-faint); font-size:11.5px; margin:0; }

@media (max-width: 560px){
  .match-top{ flex-direction:column; }
}