/* =========================================================
   Topi Seleksi — Hogwarts Sorting Ceremony
   Fan-made landing page + quiz  •  Vanilla CSS
   ========================================================= */

:root{
  --night-1:#070b16;
  --night-2:#101731;
  --night-3:#1b2450;
  --ink:#e9e6df;
  --muted:#a9b0c7;
  --gold:#e8c96a;
  --gold-deep:#b8860b;
  --gold-soft:#f6e4b0;
  --parchment:#f3e7c9;
  --parchment-2:#e8d8b0;
  --parch-ink:#3a2c15;

  --g:#ae0001;   --g-2:#ffc500;   /* Gryffindor */
  --s:#1a472a;   --s-2:#a3a3a3;   /* Slytherin */
  --h:#ecb939;   --h-2:#3b3b3b;   /* Hufflepuff */
  --r:#0e1a40;   --r-2:#946b2d;   /* Ravenclaw */

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --maxw:1180px;
  --font-title:"Cinzel", serif;
  --font-deco:"Cinzel Decorative", serif;
  --font-body:"EB Garamond", Georgia, serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(90,70,180,.30), transparent 60%),
    radial-gradient(900px 700px at 0% 100%, rgba(180,120,20,.20), transparent 55%),
    linear-gradient(160deg, var(--night-1), var(--night-2) 55%, var(--night-3));
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- ambient sky ---------- */
.sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.stars{position:absolute; inset:0}
.star{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; opacity:.7; animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.15; transform:scale(.8)}50%{opacity:.9; transform:scale(1.25)}}

.candles{position:absolute; inset:0}
.candles span{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle,#ffe9a8,#ff9d2f 60%,transparent 70%);
  box-shadow:0 0 18px 6px rgba(255,170,60,.55), 0 0 40px 14px rgba(255,150,40,.25);
  animation:floaty 7s ease-in-out infinite;
}
.candles span:nth-child(1){left:8%;  top:22%; animation-delay:.2s}
.candles span:nth-child(2){left:22%; top:64%; animation-delay:1.4s; transform:scale(.8)}
.candles span:nth-child(3){left:38%; top:14%; animation-delay:2.3s}
.candles span:nth-child(4){left:57%; top:48%; animation-delay:.8s; transform:scale(1.2)}
.candles span:nth-child(5){left:72%; top:20%; animation-delay:3.1s}
.candles span:nth-child(6){left:88%; top:58%; animation-delay:1.9s; transform:scale(.9)}
.candles span:nth-child(7){left:14%; top:82%; animation-delay:2.7s}
.candles span:nth-child(8){left:46%; top:76%; animation-delay:.5s; transform:scale(1.1)}
.candles span:nth-child(9){left:66%; top:84%; animation-delay:3.6s}
.candles span:nth-child(10){left:93%; top:32%; animation-delay:1.1s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px clamp(16px,4vw,42px);
  background:linear-gradient(180deg, rgba(7,11,22,.92), rgba(7,11,22,.55) 70%, transparent);
  backdrop-filter:blur(6px);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand-crest{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(232,201,106,.55);
  background:radial-gradient(circle at 30% 25%, #3a2b4d, #120c1e);
  box-shadow:0 0 18px rgba(232,201,106,.35);
}
.brand-text{font-family:var(--font-deco); font-size:20px; letter-spacing:.06em}
.brand-text em{display:block; font-family:var(--font-body); font-style:italic; font-size:11px; letter-spacing:.28em; color:var(--gold); text-transform:uppercase}
.nav-links{display:flex; gap:6px}
.nav-link{
  background:none; border:0; color:var(--muted); cursor:pointer;
  font-family:var(--font-body); font-size:16px; letter-spacing:.04em;
  padding:8px 14px; border-radius:999px; transition:.25s;
}
.nav-link:hover{color:var(--gold-soft); background:rgba(232,201,106,.08)}

/* ---------- layout / views ---------- */
#app{position:relative; z-index:2}
.view{display:none; animation:fadeUp .6s ease both}
.view.is-active{display:block}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-title); letter-spacing:.06em; font-weight:700;
  border-radius:999px; cursor:pointer; border:1px solid transparent;
  padding:14px 26px; font-size:16px; transition:.25s transform,.25s box-shadow,.25s background,.25s border-color;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold) 45%, var(--gold-deep));
  color:#2a1f04; border-color:rgba(255,255,255,.35);
  box-shadow:0 12px 30px rgba(184,134,11,.45), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(232,201,106,.55)}
.btn-ghost{
  background:rgba(255,255,255,.04); color:var(--gold-soft);
  border-color:rgba(232,201,106,.45);
}
.btn-ghost:hover{background:rgba(232,201,106,.12); transform:translateY(-2px)}
.btn-mini{padding:8px 16px; font-size:13px}

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(18px,3vw,40px) clamp(16px,4vw,42px) 40px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,56px);
  align-items:center; min-height:calc(100vh - 78px);
}
.eyebrow{
  display:inline-block; font-family:var(--font-title); font-size:12.5px;
  letter-spacing:.34em; color:var(--gold); text-transform:uppercase;
  padding:7px 14px; border:1px solid rgba(232,201,106,.35); border-radius:999px;
  background:rgba(232,201,106,.06); margin-bottom:22px;
}
.hero-title{margin:0 0 14px; line-height:.98}
.hero-title-top{
  display:block; font-family:var(--font-body); font-style:italic;
  font-size:clamp(20px,2.4vw,28px); color:var(--gold-soft); letter-spacing:.14em;
}
.hero-title-main{
  display:block; font-family:var(--font-deco); font-weight:900;
  font-size:clamp(44px,7.4vw,88px); line-height:1;
  background:linear-gradient(180deg,#fff6da, var(--gold) 45%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 26px rgba(232,201,106,.35));
}
.hero-tagline{
  font-style:italic; color:var(--gold-soft); font-size:clamp(16px,1.7vw,20px);
  margin:0 0 14px; max-width:34ch;
}
.hero-desc{color:var(--muted); font-size:18px; line-height:1.7; max-width:52ch; margin:0 0 28px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px}

.house-chips{list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0}
.chip{
  font-family:var(--font-title); font-size:13.5px; letter-spacing:.04em;
  padding:8px 15px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.045);
}
.chip-g{border-color:rgba(174,0,1,.7);   box-shadow:inset 0 0 22px rgba(174,0,1,.25)}
.chip-s{border-color:rgba(26,71,42,.9);  box-shadow:inset 0 0 22px rgba(26,71,42,.45)}
.chip-h{border-color:rgba(236,185,57,.7);box-shadow:inset 0 0 22px rgba(236,185,57,.22)}
.chip-r{border-color:rgba(148,107,45,.8);box-shadow:inset 0 0 22px rgba(14,26,64,.6)}

.hero-media{display:grid; place-items:center}
.hero-frame{
  position:relative; width:min(430px,42vw); aspect-ratio:2/3;
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(232,201,106,.5);
  box-shadow:var(--shadow), 0 0 60px rgba(232,201,106,.18);
  animation:heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-16px) rotate(.4deg)}}
.hero-frame img{width:100%; height:100%; object-fit:cover; display:block}
.hero-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,11,22,0) 40%, rgba(7,11,22,.78) 100%);
  pointer-events:none;
}
.hero-frame-glow{
  position:absolute; inset:-2px; border-radius:24px; pointer-events:none;
  background:linear-gradient(140deg, rgba(232,201,106,.35), transparent 40%, rgba(120,90,220,.25));
  mix-blend-mode:screen; opacity:.7;
}
.hero-caption{
  position:absolute; left:18px; bottom:16px; z-index:3; display:flex; flex-direction:column;
}
.hero-caption strong{font-family:var(--font-title); font-size:18px; color:var(--gold-soft)}
.hero-caption span{font-size:14px; color:var(--muted)}

.scroll-hint{ text-align:center; color:var(--gold); font-size:20px; animation:bob 2s ease-in-out infinite; padding-bottom:26px}
@keyframes bob{0%,100%{transform:translateY(0); opacity:.6}50%{transform:translateY(8px); opacity:1}}

/* ---------- quiz ---------- */
.quiz-wrap{
  max-width:820px; margin:0 auto; padding:clamp(20px,4vw,54px) clamp(16px,4vw,28px) 70px;
  position:relative;
}
.quiz-hat{
  text-align:center; font-size:clamp(48px,10vw,86px); line-height:1;
  margin-bottom:10px; animation:hatWobble 3.4s ease-in-out infinite;
  filter:drop-shadow(0 10px 26px rgba(232,201,106,.35));
}
@keyframes hatWobble{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.quiz-card{
  background:linear-gradient(180deg, rgba(24,30,58,.92), rgba(12,16,32,.96));
  border:1px solid rgba(232,201,106,.35);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(20px,3.4vw,38px);
}
.quiz-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.quiz-count{font-family:var(--font-title); color:var(--muted); letter-spacing:.05em; font-size:14px}
.quiz-count b{color:var(--gold)}

.progress{height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:26px}
.progress-bar{
  height:100%; width:0%; border-radius:999px; transition:width .45s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  box-shadow:0 0 18px rgba(232,201,106,.6);
}
.question{
  font-family:var(--font-title); font-weight:700; font-size:clamp(20px,2.6vw,29px);
  line-height:1.35; margin:0 0 24px; color:#fff;
}
.question .hl{color:var(--gold)}

.options{display:grid; gap:12px}
.option{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding:16px 18px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.035); color:var(--ink);
  border:1px solid rgba(255,255,255,.12);
  font-family:var(--font-body); font-size:17.5px; line-height:1.4;
  transition:.2s transform,.2s background,.2s border-color,.2s box-shadow;
}
.option:hover{
  background:rgba(232,201,106,.10); border-color:rgba(232,201,106,.55);
  transform:translateX(4px); box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.option.picked{background:rgba(232,201,106,.20); border-color:var(--gold)}
.option-letter{
  flex:0 0 38px; height:38px; display:grid; place-items:center; border-radius:10px;
  font-family:var(--font-title); font-weight:700; color:#2a1f04;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
}
.quiz-note{margin:22px 0 0; color:var(--muted); font-size:14.5px; font-style:italic; text-align:center}

/* ---------- quiz intro (name step) ---------- */
.quiz-intro{text-align:center; padding:6px 4px 2px}
.intro-title{
  font-family:var(--font-title); font-weight:700; font-size:clamp(21px,2.7vw,29px);
  line-height:1.3; margin:0 0 8px; color:#fff;
}
.intro-sub{color:var(--muted); font-size:17px; font-style:italic; margin:0 0 24px}
.name-input{
  width:min(420px,100%); padding:16px 20px; border-radius:14px;
  background:rgba(255,255,255,.05); color:var(--ink);
  border:1px solid rgba(232,201,106,.4); outline:none;
  font-family:var(--font-body); font-size:19px; text-align:center; letter-spacing:.02em;
  transition:.2s border-color,.2s box-shadow,.2s background;
}
.name-input::placeholder{color:var(--muted); opacity:.75}
.name-input:focus{
  border-color:var(--gold); background:rgba(232,201,106,.09);
  box-shadow:0 0 0 4px rgba(232,201,106,.16);
}
.intro-actions{margin-top:20px; display:flex; justify-content:center}
.quiz-stage[hidden]{display:none}

/* result: name greeting */
.result-for{
  font-family:var(--font-title); font-size:15px; letter-spacing:.06em;
  color:var(--gold-soft); margin:12px 0 0;
}
.result-for b{color:#fff}

/* ---------- result ---------- */
.result-wrap{ max-width:900px; margin:0 auto; padding:clamp(20px,4vw,52px) clamp(16px,4vw,28px) 70px; }
.result-card{
  --house:#ae0001; --house-2:#ffc500;
  background:linear-gradient(180deg, rgba(18,22,44,.95), rgba(10,13,26,.98));
  border:1px solid color-mix(in srgb, var(--house) 65%, transparent);
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
  animation:popIn .6s cubic-bezier(.2,.9,.25,1.2) both;
}
@keyframes popIn{from{opacity:0; transform:scale(.94) translateY(20px)}to{opacity:1; transform:none}}
.result-banner{
  position:relative; text-align:center; padding:34px 24px 26px;
  background:
    radial-gradient(600px 200px at 50% -40%, color-mix(in srgb, var(--house) 55%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--house) 22%, transparent), transparent);
  border-bottom:1px solid color-mix(in srgb, var(--house) 40%, transparent);
}
.result-eyebrow{font-family:var(--font-title); font-size:12px; letter-spacing:.32em; color:var(--muted); text-transform:uppercase}
.result-emblem{font-size:clamp(58px,11vw,92px); line-height:1; margin:14px 0 6px; filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
.result-house{
  font-family:var(--font-deco); font-weight:900; margin:0;
  font-size:clamp(34px,6.4vw,62px); line-height:1;
  background:linear-gradient(180deg,#fff, var(--house-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px color-mix(in srgb, var(--house) 60%, transparent);
}
.result-tagline{font-style:italic; color:var(--gold-soft); font-size:clamp(16px,1.9vw,20px); margin:10px auto 0; max-width:44ch}
.result-body{padding:clamp(20px,3.4vw,34px)}
.result-text{font-size:18px; line-height:1.7; color:var(--ink); margin:0 0 22px}
.result-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.result-box{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:16px 18px;
}
.result-box h3{margin:0 0 10px; font-family:var(--font-title); font-size:15px; letter-spacing:.06em; color:var(--gold-soft)}
.pill-list{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.pill-list li{
  font-family:var(--font-title); font-size:13px; padding:6px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--house) 40%, transparent);
  border:1px solid color-mix(in srgb, var(--house-2) 55%, transparent);
}
.fact-list{list-style:none; margin:0; padding:0}
.fact-list li{padding:5px 0; border-bottom:1px dashed rgba(255,255,255,.10); font-size:15.5px; color:var(--muted)}
.fact-list li:last-child{border-bottom:0}
.fact-list b{color:var(--ink); font-weight:600}
.result-figures-box{margin-top:16px}
.figures{margin:0; color:var(--gold-soft); font-size:16px}

/* secondary house badge */
.result-secondary{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:0 0 22px; padding:12px 18px; border-radius:14px;
  background:rgba(255,255,255,.045); border:1px dashed rgba(232,201,106,.3); text-align:center;
}
.rs-label{
  font-family:var(--font-title); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.rs-value{font-family:var(--font-title); font-size:16px; color:#fff}
.rs-sub{color:var(--muted); font-size:13px; font-family:var(--font-body); font-style:italic}

/* identity trinity */
.identity-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px}
.identity-card{
  position:relative; border-radius:16px; padding:18px 18px 20px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid rgba(232,201,106,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.identity-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg, var(--house), var(--house-2)); opacity:.7;
}
.id-kicker{
  display:inline-block; font-family:var(--font-title); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.id-emoji{font-size:44px; line-height:1; margin-bottom:4px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.identity-card h4{
  margin:6px 0 8px; font-family:var(--font-title); font-weight:700;
  font-size:17px; color:#fff; line-height:1.3;
}
.identity-card p{margin:0; color:var(--muted); font-size:15px; line-height:1.55}

/* score breakdown bars */
.score-breakdown{display:grid; gap:9px; margin-top:22px}
.score-row{
  display:grid; grid-template-columns:26px 108px 1fr 48px; align-items:center; gap:10px;
  padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.score-row.is-top{border-color:var(--gold); background:rgba(232,201,106,.12)}
.score-emoji{font-size:18px; text-align:center}
.score-name{font-family:var(--font-title); font-size:13.5px; color:var(--muted)}
.score-row.is-top .score-name{color:#fff}
.score-bar{height:10px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden}
.score-bar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--c), var(--c2));
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.score-pct{font-family:var(--font-title); font-size:13.5px; text-align:right; color:var(--muted)}
.score-row.is-top .score-pct{color:var(--gold-soft)}
.result-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:8px 24px 30px}

/* ---------- houses view ---------- */
.houses-wrap{max-width:var(--maxw); margin:0 auto; padding:clamp(24px,4vw,54px) clamp(16px,4vw,42px) 80px}
.section-title{
  font-family:var(--font-deco); font-weight:900; text-align:center; margin:0 0 10px;
  font-size:clamp(30px,5vw,52px);
  background:linear-gradient(180deg,#fff6da,var(--gold),var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-sub{text-align:center; color:var(--muted); font-size:18px; max-width:60ch; margin:0 auto 38px}
.houses-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.house-card{
  --house:#ae0001; --house-2:#ffc500;
  position:relative; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, rgba(18,22,44,.94), rgba(10,13,26,.98));
  border:1px solid color-mix(in srgb, var(--house) 55%, transparent);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  padding:24px 20px; transition:.3s transform,.3s box-shadow;
}
.house-card:hover{transform:translateY(-8px); box-shadow:0 26px 56px rgba(0,0,0,.6)}
.house-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg,var(--house),var(--house-2));
}
.house-card-top{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.house-emblem{font-size:44px; line-height:1}
.house-name{font-family:var(--font-deco); font-weight:900; font-size:26px; margin:0; color:#fff}
.house-element{font-size:13px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-title)}
.house-card p.desc{color:var(--muted); font-size:15.5px; line-height:1.6; margin:0 0 14px}
.house-card .traits{list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0}
.house-card .traits li{
  font-family:var(--font-title); font-size:12px; padding:5px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--house) 45%, transparent);
  border:1px solid color-mix(in srgb, var(--house-2) 50%, transparent);
}
.houses-cta{text-align:center; margin-top:40px}

/* ---------- footer / toast ---------- */
.site-footer{
  position:relative; z-index:2; text-align:center; padding:30px 20px 46px;
  color:var(--muted); font-size:14px; border-top:1px solid rgba(255,255,255,.07); margin-top:20px;
}
.site-footer p{margin:4px 0}
.footer-fine{font-size:12px; opacity:.65}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%);
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#2a1f04;
  font-family:var(--font-title); font-weight:700; font-size:14px;
  padding:12px 20px; border-radius:999px; box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.2,.9,.25,1.2); z-index:50; max-width:90vw; text-align:center;
}
.toast.show{transform:translate(-50%,0)}

/* ---------- party sparkles ---------- */
.sparkle{
  position:fixed; z-index:40; pointer-events:none; font-size:20px;
  animation:sparkFade 1.4s ease-out forwards;
}
@keyframes sparkFade{
  0%{opacity:0; transform:translateY(0) scale(.6)}
  20%{opacity:1}
  100%{opacity:0; transform:translateY(-140px) scale(1.4)}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero{grid-template-columns:1fr; min-height:auto; padding-top:24px}
  .hero-media{order:-1}
  .hero-frame{width:min(340px,74vw)}
  .hero-desc{font-size:16.5px}
  .result-grid{grid-template-columns:1fr}
  .identity-grid{grid-template-columns:1fr}
  .score-row{grid-template-columns:22px 84px 1fr 44px}
}
@media (max-width:560px){
  .nav-links{gap:0}
  .nav-link{padding:8px 9px; font-size:14.5px}
  .brand-text{font-size:17px}
  .hero-title-main{font-size:clamp(40px,13vw,64px)}
  .question{font-size:20px}
  .option{font-size:16px; padding:14px}
  .btn{padding:12px 20px; font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}