:root{
  --ink:#0A2540; --blue:#1D4ED8; --blue-600:#2563EB; --blue-700:#1E40AF;
  --sky:#0EA5E9; --sky-soft:#38BDF8;
  --bg:#EEF4FF; --surface:#FFFFFF; --line:#DCE6FB; --muted:#5B6B82;
  --green:#16A34A; --green-bg:#E7F8EE; --green-line:#A7E6BE;
  --red:#DC2626; --red-bg:#FDECEC; --red-line:#F4B4B4;
  --amber:#B45309; --amber-bg:#FEF3DA;
  --shadow:0 10px 30px -12px rgba(29,78,216,.28);
  --shadow-sm:0 4px 14px -8px rgba(10,37,64,.25);
  --r:18px; --r-sm:12px;
  --display:'Sora',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --deva:'Noto Sans Devanagari','Inter',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body); color:var(--ink); line-height:1.55;
  background:
    radial-gradient(1100px 480px at 80% -10%, #DBE8FF 0%, transparent 60%),
    radial-gradient(900px 420px at -10% 0%, #E4F1FF 0%, transparent 55%),
    var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:980px; margin:0 auto; padding:0 18px}

/* ---------- Top bar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:12px; height:62px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand .logo{width:34px; height:34px; border-radius:10px;
  background:linear-gradient(150deg,var(--blue-600),var(--sky)); display:grid; place-items:center;
  color:#fff; font-size:18px; box-shadow:var(--shadow-sm)}
.brand b{font-family:var(--display); font-weight:700; letter-spacing:-.2px; font-size:1.02rem}
.brand small{display:block; font-size:.66rem; color:var(--muted); font-weight:600; letter-spacing:.3px; text-transform:uppercase}
.topbar .spacer{flex:1}
.pill-link{font-size:.8rem; font-weight:600; color:var(--blue); text-decoration:none;
  padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:#fff}

/* ---------- Hero ---------- */
.hero{padding:38px 0 14px; position:relative; overflow:hidden}
.hero .eyebrow{display:inline-flex; gap:7px; align-items:center; font-weight:700;
  font-size:.74rem; letter-spacing:.6px; text-transform:uppercase; color:var(--blue);
  background:#fff; border:1px solid var(--line); padding:6px 12px; border-radius:999px}
.hero h1{font-family:var(--display); font-size:clamp(1.9rem,6vw,3rem); line-height:1.05;
  letter-spacing:-1px; margin:16px 0 10px; font-weight:800}
.hero h1 .grad{background:linear-gradient(100deg,var(--blue-600),var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{max-width:560px; color:var(--muted); font-size:1.02rem}
.hero .stats{display:flex; gap:22px; margin-top:18px; flex-wrap:wrap}
.hero .stats div{display:flex; flex-direction:column}
.hero .stats b{font-family:var(--display); font-size:1.5rem; color:var(--ink); font-weight:800}
.hero .stats span{font-size:.78rem; color:var(--muted); font-weight:600}
.rocket-deco{position:absolute; right:-10px; top:24px; font-size:120px; opacity:.08;
  transform:rotate(-18deg); pointer-events:none}

/* ---------- Sections ---------- */
.section{margin:30px 0}
.section-head{display:flex; align-items:baseline; gap:10px; margin:0 2px 14px}
.section-head h2{font-family:var(--display); font-size:1.15rem; font-weight:700; letter-spacing:-.3px}
.section-head span{font-size:.82rem; color:var(--muted)}

/* ---------- Exam cards ---------- */
.exam-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.exam-card{appearance:none; text-align:left; cursor:pointer; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; gap:13px;
  align-items:center; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.exam-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#BFD3FB}
.exam-card:focus-visible{outline:3px solid var(--sky-soft); outline-offset:2px}
.exam-card .ico{width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center;
  font-size:21px; background:linear-gradient(150deg,#EAF2FF,#DCEBFF); border:1px solid var(--line)}
.exam-card .txt b{display:block; font-family:var(--display); font-weight:700; font-size:1rem}
.exam-card .txt span{font-size:.76rem; color:var(--muted)}
.exam-card .lean{margin-left:auto; font-size:.64rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--blue); background:#EAF2FF; padding:3px 8px; border-radius:999px}

/* ---------- Topic chips ---------- */
.topic-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.topic-card{appearance:none; cursor:pointer; text-align:left; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:18px 16px; position:relative; overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease}
.topic-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.topic-card:focus-visible{outline:3px solid var(--sky-soft); outline-offset:2px}
.topic-card .te{font-size:30px}
.topic-card b{display:block; font-family:var(--display); font-weight:700; font-size:1.08rem; margin-top:8px}
.topic-card span{font-size:.78rem; color:var(--muted)}
.topic-card .go{position:absolute; right:14px; top:16px; color:var(--blue); font-weight:700}
.topic-card.mixed{grid-column:1 / -1; background:linear-gradient(120deg,var(--blue-700),var(--blue-600) 55%,var(--sky));
  color:#fff; border:none}
.topic-card.mixed b,.topic-card.mixed .go{color:#fff}
.topic-card.mixed span{color:#DCE9FF}

/* ---------- Buttons ---------- */
.btn{appearance:none; cursor:pointer; font-family:var(--display); font-weight:700; font-size:1rem;
  border:none; border-radius:14px; padding:14px 22px; color:#fff;
  background:linear-gradient(120deg,var(--blue-600),var(--sky)); box-shadow:var(--shadow);
  transition:transform .12s ease, filter .12s ease}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55; cursor:not-allowed; filter:grayscale(.2)}
.btn.ghost{background:#fff; color:var(--blue); border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.btn.block{width:100%}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- Quiz ---------- */
.quiz-head{position:sticky; top:62px; z-index:30; background:rgba(238,244,255,.9);
  backdrop-filter:blur(8px); padding:12px 0 10px}
.qh-row{display:flex; align-items:center; gap:12px}
.counter{font-family:var(--display); font-weight:700; font-size:.92rem}
.counter span{color:var(--muted); font-weight:600}
.score-tag{margin-left:auto; font-family:var(--display); font-weight:700; font-size:.9rem;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 13px; color:var(--blue)}
/* rocket progress track */
.track{position:relative; height:8px; margin-top:11px; border-radius:999px; background:#D6E3FB; overflow:visible}
.track .fill{height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg,var(--blue-600),var(--sky)); transition:width .45s cubic-bezier(.2,.8,.2,1)}
.track .rkt{position:absolute; top:-9px; left:0; transform:translateX(-50%); font-size:18px;
  transition:left .45s cubic-bezier(.2,.8,.2,1)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:22px; margin-top:16px}
.q-top{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.q-emoji{font-size:30px}
.diff{font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:4px 9px; border-radius:999px}
.diff.easy{color:var(--green); background:var(--green-bg)}
.diff.medium{color:var(--amber); background:var(--amber-bg)}
.diff.hard{color:var(--red); background:var(--red-bg)}
.q-topic{margin-left:auto; font-size:.72rem; font-weight:700; color:var(--muted)}

.stem{font-size:1.32rem; font-family:var(--display); font-weight:600; line-height:1.5; letter-spacing:-.2px}
.stem .blank{display:inline-block; min-width:64px; border-bottom:3px solid var(--sky);
  text-align:center; color:var(--blue); font-weight:800}
.stem .blank.filled{border-bottom-style:solid}

.hint{margin-top:12px}
.hint button{appearance:none; cursor:pointer; background:#F2F7FF; border:1px solid var(--line);
  color:var(--blue); font-weight:600; font-size:.8rem; border-radius:999px; padding:6px 12px}
.hint .box{display:none; margin-top:10px; padding:11px 14px; border-radius:var(--r-sm);
  background:#F6FAFF; border:1px dashed #C7D9F7}
.hint .box.show{display:block}
.hint .hi{font-family:var(--deva); font-size:1.02rem; color:var(--ink)}
.hint .hg{font-size:.86rem; color:var(--muted); margin-top:2px}

.options{display:grid; gap:10px; margin-top:18px}
.opt{appearance:none; cursor:pointer; text-align:left; font-size:1.04rem; font-weight:600;
  background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:14px 16px;
  display:flex; align-items:center; gap:12px; transition:border-color .12s, background .12s, transform .1s}
.opt:hover:not(:disabled){border-color:var(--blue-600); background:#F7FAFF}
.opt:focus-visible{outline:3px solid var(--sky-soft); outline-offset:2px}
.opt:active:not(:disabled){transform:scale(.99)}
.opt .key{width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center;
  font-size:.8rem; font-weight:800; background:#EEF4FF; color:var(--blue); font-family:var(--display)}
.opt.correct{border-color:var(--green-line); background:var(--green-bg)}
.opt.correct .key{background:var(--green); color:#fff}
.opt.wrong{border-color:var(--red-line); background:var(--red-bg)}
.opt.wrong .key{background:var(--red); color:#fff}
.opt:disabled{cursor:default}
.opt .mark{margin-left:auto; font-weight:800}

.explain{margin-top:16px; border-radius:var(--r-sm); padding:14px 16px; display:none;
  background:#F4F9FF; border:1px solid #CFE0FB}
.explain.show{display:block; animation:rise .25s ease}
.explain .rule{font-weight:700; color:var(--ink); display:flex; gap:8px; align-items:flex-start}
.explain .rule i{font-style:normal}
.explain .tip{margin-top:7px; font-size:.9rem; color:var(--muted); display:flex; gap:8px}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.next-row{margin-top:18px}

/* ---------- Result ---------- */
.result{text-align:center; padding:30px 22px}
.launch{font-size:64px; animation:liftoff 1.1s cubic-bezier(.3,.7,.2,1) both}
@keyframes liftoff{0%{transform:translateY(40px) scale(.6); opacity:0}
  60%{transform:translateY(-6px) scale(1.05); opacity:1} 100%{transform:translateY(0) scale(1)}}
.ring{--p:0; width:148px; height:148px; margin:8px auto 4px; border-radius:50%;
  background:conic-gradient(var(--blue-600) calc(var(--p)*1%), #DCE6FB 0);
  display:grid; place-items:center}
.ring .inner{width:118px; height:118px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:inset 0 2px 10px rgba(10,37,64,.06)}
.ring .pct{font-family:var(--display); font-weight:800; font-size:2rem; color:var(--ink)}
.ring .lbl{font-size:.72rem; color:var(--muted); font-weight:700; letter-spacing:.4px}
.result h2{font-family:var(--display); font-size:1.5rem; margin:10px 0 4px}
.result .msg{color:var(--muted); margin-bottom:18px}
.result .mini{display:flex; justify-content:center; gap:18px; margin-bottom:20px; flex-wrap:wrap}
.result .mini div{display:flex; flex-direction:column}
.result .mini b{font-family:var(--display); font-size:1.2rem}
.result .mini b.ok{color:var(--green)} .result .mini b.no{color:var(--red)}
.result .mini span{font-size:.72rem; color:var(--muted); font-weight:600}

.review{margin-top:8px; text-align:left}
.review h3{font-family:var(--display); font-size:1.05rem; margin:24px 2px 12px}
.rv{background:#fff; border:1px solid var(--line); border-left:4px solid var(--green);
  border-radius:var(--r-sm); padding:13px 15px; margin-bottom:10px}
.rv.miss{border-left-color:var(--red)}
.rv .rq{font-weight:600}
.rv .ra{font-size:.86rem; margin-top:6px}
.rv .ra .good{color:var(--green); font-weight:700}
.rv .ra .bad{color:var(--red); font-weight:700; text-decoration:line-through}
.rv .rr{font-size:.82rem; color:var(--muted); margin-top:6px}

/* ---------- Loader / states ---------- */
.center-state{text-align:center; padding:70px 20px}
.spin{width:40px; height:40px; border-radius:50%; border:4px solid #D6E3FB; border-top-color:var(--blue-600);
  margin:0 auto 16px; animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- Footer ---------- */
.foot{margin-top:48px; border-top:1px solid var(--line); background:rgba(255,255,255,.6)}
.foot .wrap{padding:24px 18px; text-align:center}
.foot .fb{font-family:var(--display); font-weight:800; color:var(--ink)}
.foot .fb .r{color:var(--blue)}
.foot p{font-size:.8rem; color:var(--muted); margin-top:6px}
.foot .made{margin-top:10px; font-size:.74rem; color:var(--muted)}

.hidden{display:none !important}

/* ---------- Responsive ---------- */
@media(min-width:680px){
  .exam-grid{grid-template-columns:repeat(4,1fr)}
  .topic-grid{grid-template-columns:repeat(3,1fr)}
  .topic-card.mixed{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ============================================================
   v2 — dark mode, bottom tab bar, share buttons, app feel
   ============================================================ */

/* keep content clear of the fixed tab bar */
body{padding-bottom:90px}

/* ---------- Theme toggle (top bar) ---------- */
.theme-tg{appearance:none; cursor:pointer; width:38px; height:38px; flex:none;
  border-radius:11px; border:1px solid var(--line); background:var(--surface);
  font-size:17px; display:grid; place-items:center; transition:transform .12s, background .2s}
.theme-tg:hover{transform:translateY(-1px)}
.theme-tg:focus-visible{outline:3px solid var(--sky-soft); outline-offset:2px}

/* ---------- Bottom tab bar (mobile-app nav) ---------- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); display:flex;
  padding:7px 8px calc(8px + env(safe-area-inset-bottom))}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:9px 2px; margin:0 4px; border-radius:16px;
  text-decoration:none; color:var(--muted);
  font-size:.68rem; font-weight:700; letter-spacing:.1px; transition:color .15s, background .15s}
.tabbar a .ti{font-size:22px; line-height:1}
.tabbar a.active{color:var(--blue); background:rgba(29,78,216,.09)}
.tabbar a:active{transform:scale(.96)}

/* ---------- Share buttons ---------- */
/* ---------- Action buttons (WhatsApp / Telegram / Copy) ---------- */
.sbar{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:4px 0 2px}
.sb{appearance:none; cursor:pointer; font-family:var(--display);
  font-weight:700; font-size:.95rem; border:none; border-radius:13px; padding:13px 18px;
  display:inline-flex; align-items:center; gap:8px; color:#fff; transition:transform .12s, filter .12s}
.sb:hover{filter:brightness(1.06)} .sb:active{transform:scale(.97)}
.sb:focus-visible{outline:3px solid var(--sky-soft); outline-offset:2px}
.sb.wa{background:#25D366}
.sb.tg{background:#229ED9}
.sb.cp{background:var(--surface); color:var(--blue); border:1px solid var(--line)}
.sb .ci{font-size:17px}
.sb-label{font-size:.78rem; color:var(--muted); font-weight:600; margin:18px 0 9px; text-align:center}

/* ============================================================
   DARK MODE
   ============================================================ */
html[data-theme="dark"]{
  --ink:#E8EFFB; --muted:#9AB0D0;
  --bg:#0A1326; --surface:#13203A; --line:#26344F;
  --blue:#5B8DEF; --blue-600:#4D81EE; --blue-700:#3D6FE0; --sky:#38BDF8; --sky-soft:#7DD3FC;
  --green:#34D399; --green-bg:#10291F; --green-line:#1F6B4C;
  --red:#F87171; --red-bg:#2A1414; --red-line:#7A2E2E;
  --amber:#FBBF24; --amber-bg:#2A2110;
  --shadow:0 12px 34px -14px rgba(0,0,0,.6);
  --shadow-sm:0 6px 18px -10px rgba(0,0,0,.55);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1100px 480px at 80% -10%, #15233F 0%, transparent 60%),
    radial-gradient(900px 420px at -10% 0%, #122036 0%, transparent 55%),
    var(--bg);
}
html[data-theme="dark"] .topbar{background:rgba(13,23,42,.82)}
html[data-theme="dark"] .quiz-head{background:rgba(10,19,38,.88)}
html[data-theme="dark"] .tabbar{background:rgba(13,23,42,.92)}
html[data-theme="dark"] .pill-link,
html[data-theme="dark"] .hero .eyebrow,
html[data-theme="dark"] .score-tag,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .ring .inner,
html[data-theme="dark"] .rv,
html[data-theme="dark"] .opt,
html[data-theme="dark"] .sb.cp{background:var(--surface)}
html[data-theme="dark"] .opt:hover:not(:disabled){background:#1A2A47}
html[data-theme="dark"] .opt .key{background:#22324F; color:var(--sky-soft)}
html[data-theme="dark"] .exam-card .ico{background:linear-gradient(150deg,#1A2A47,#16243E)}
html[data-theme="dark"] .track{background:#22324F}
html[data-theme="dark"] .explain{background:#16243E; border-color:#2B3C5C}
html[data-theme="dark"] .hint button{background:#1A2A47}
html[data-theme="dark"] .hint .box{background:#16243E; border-color:#2B3C5C}
html[data-theme="dark"] .foot{background:rgba(13,23,42,.5)}
html[data-theme="dark"] .stem .blank{color:var(--sky-soft)}

/* hide tab bar on wide screens — it's a phone pattern */
@media(min-width:760px){
  .tabbar{max-width:520px; left:50%; transform:translateX(-50%); right:auto;
    border-radius:18px 18px 0 0; border:1px solid var(--line); border-bottom:none}
}

/* ---------- View counter badge ---------- */
.views{margin-top:10px; font-size:.82rem; color:var(--muted); font-weight:600}
.views b{font-family:var(--display); color:var(--blue); font-weight:800}

/* ============================================================
   v3 — dark text fix, animated emojis, answer feedback
   ============================================================ */

/* FIX: buttons don't inherit text colour -> was black-on-dark (invisible).
   Force inheritance; explicit-colour buttons (.btn, .sb, .hint button) still win. */
button{color:inherit}
.exam-card,.topic-card,.opt{color:var(--ink)}

/* dark-mode light chips that were left bright */
html[data-theme="dark"] .exam-card .lean{background:#22324F; color:var(--sky-soft)}
html[data-theme="dark"] .stem{color:var(--ink)}
html[data-theme="dark"] .topic-card b,
html[data-theme="dark"] .exam-card .txt b{color:var(--ink)}

/* ---------- Animated question emoji ---------- */
.q-emoji{font-size:36px; display:inline-block; transform-origin:50% 80%;
  animation:emoFloat 1.8s ease-in-out infinite}
@keyframes emoFloat{
  0%,100%{transform:translateY(0) rotate(-4deg) scale(1)}
  50%    {transform:translateY(-8px) rotate(4deg) scale(1.08)}
}

/* ---------- Right / wrong greeting banner ---------- */
.feedback{display:none; align-items:center; gap:11px; margin-top:15px;
  padding:12px 16px; border-radius:15px; font-family:var(--display);
  font-weight:700; font-size:1.08rem}
.feedback.show{display:flex; animation:fbPop .4s cubic-bezier(.2,1.25,.4,1)}
.feedback.ok{background:var(--green-bg); color:var(--green); border:1px solid var(--green-line)}
.feedback.no{background:var(--red-bg);  color:var(--red);   border:1px solid var(--red-line)}
.feedback .fe{font-size:2rem; line-height:1; animation:emoBurst .7s ease both, emoIdle 1.5s ease-in-out .7s infinite}
@keyframes fbPop{from{transform:scale(.82); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes emoBurst{0%{transform:scale(0) rotate(-40deg)}60%{transform:scale(1.4) rotate(12deg)}100%{transform:scale(1) rotate(0)}}
@keyframes emoIdle{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-4px) rotate(5deg)}}

/* result launch emoji keeps bouncing too */
.launch{animation:liftoff 1.1s cubic-bezier(.3,.7,.2,1) both, emoFloat 2s ease-in-out 1.1s infinite}

/* ============================================================
   v5 — result greeting + more animated emojis everywhere
   ============================================================ */

/* Result win/lose greeting row */
.greet{display:flex; justify-content:center; gap:8px; margin-bottom:4px; flex-wrap:wrap}
.greet .ge{font-size:42px; display:inline-block;
  animation:greetPop .5s ease both, greetBounce 1.4s ease-in-out infinite}
.greet .ge:nth-child(1){animation-delay:0s, .50s}
.greet .ge:nth-child(2){animation-delay:.08s, .60s}
.greet .ge:nth-child(3){animation-delay:.16s, .70s}
.greet .ge:nth-child(4){animation-delay:.24s, .80s}
.greet .ge:nth-child(5){animation-delay:.32s, .90s}
@keyframes greetPop{0%{transform:scale(0) rotate(-35deg); opacity:0}
  70%{transform:scale(1.3) rotate(8deg)} 100%{transform:scale(1) rotate(0); opacity:1}}
@keyframes greetBounce{0%,100%{transform:translateY(0)} 50%{transform:translateY(-13px)}}
.greet-title{font-family:var(--display); font-weight:800; font-size:1.55rem; margin:4px 0 8px}
.greet-title.win{color:var(--green)}
.greet-title.lose{color:var(--blue)}

/* Landing topic emojis gently float */
.topic-card .te{display:inline-block; animation:emoFloat 2.4s ease-in-out infinite}
.topic-card:nth-child(2) .te{animation-delay:.2s}
.topic-card:nth-child(3) .te{animation-delay:.4s}
.topic-card:nth-child(4) .te{animation-delay:.6s}
.topic-card:nth-child(5) .te{animation-delay:.8s}

/* Hero rocket drifts up and down */
.rocket-deco{animation:heroDrift 3.4s ease-in-out infinite}
@keyframes heroDrift{0%,100%{transform:rotate(-18deg) translateY(0)}
  50%{transform:rotate(-14deg) translateY(-14px)}}

/* Brand logo rocket nudge on hover */
.brand .logo{transition:transform .2s} .brand:hover .logo{transform:translateY(-2px) rotate(-8deg)}