/* IQ Atlas — public site styles. Brand: teal, white, violet/pink.
   Deliberately light-only (white-led brand); dark tokens can be added
   later by redefining the :root variables. */
:root {
  color-scheme: light;
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-300: #5eead4;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --grad: linear-gradient(120deg, #14b8a6 0%, #8b5cf6 58%, #ec4899 100%);
  --grad-soft: linear-gradient(120deg, rgba(20, 184, 166, 0.12), rgba(139, 92, 246, 0.12) 60%, rgba(236, 72, 153, 0.12));

  --bg: #ffffff;
  --bg-tint: #f7f8fc;
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --text: #121826;
  --text-muted: #5b6475;
  --border: #e6e8f0;
  --ink: #1d2433;
  --fig-grey: #a9b2c3;
  --fig-bg: #ffffff;
  --accent: var(--teal-600);
  --accent-2: var(--violet-600);
  --error: #dc2626;
  --success: #059669;
  --warn: #d97706;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05), 0 1px 3px rgba(17, 24, 39, 0.04);
  --shadow: 0 10px 30px -12px rgba(30, 27, 75, 0.18), 0 4px 10px -6px rgba(30, 27, 75, 0.08);
  --shadow-lg: 0 30px 60px -20px rgba(30, 27, 75, 0.28);
  --ring: 0 0 0 3px rgba(20, 184, 166, 0.35);
  --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --container: 1160px;
}


*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 750; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
.muted { color: var(--text-muted); }
.small { font-size: 0.86rem; }
.hidden { display: none !important; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.page-narrow { max-width: 760px; padding-top: 48px; padding-bottom: 64px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; color: var(--accent); margin-bottom: 0.8rem; }
.eyebrow.light { color: rgba(255, 255, 255, 0.85); }

:is(a, button, input, select, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font: inherit; font-weight: 650; font-size: 0.95rem;
  padding: 0.72em 1.35em; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s;
  color: var(--text); background: var(--surface-2);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 22px -8px rgba(124, 58, 237, 0.55); background-size: 140% 100%; }
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 12px 28px -10px rgba(124, 58, 237, 0.6); }
.btn-soft { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-100); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-light { background: #fff; color: var(--violet-600); box-shadow: var(--shadow); }
.btn-sm { padding: 0.48em 1em; font-size: 0.86rem; }
.btn-lg { padding: 0.95em 1.8em; font-size: 1.04rem; }
.btn-block { width: 100%; }
.btn.is-loading { opacity: 0.7; pointer-events: none; position: relative; }
.btn.is-loading::after { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }

/* --- Header --- */
.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border); }
.topbar-inner { max-width: var(--container); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; color: var(--text); letter-spacing: -0.02em; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 0.94rem; font-weight: 550; }
.site-nav > a, .site-nav-pages a { color: var(--text-muted); }
.site-nav > a:hover, .site-nav-pages a:hover { color: var(--text); text-decoration: none; }
.site-nav-pages, .site-nav-auth { display: flex; align-items: center; gap: 14px; }
.site-nav-auth > a:not(.btn) { color: var(--text); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: transform 0.2s; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 20px 20px; box-shadow: var(--shadow); display: none; }
  .site-nav.open { display: flex; }
  .site-nav > a, .site-nav-pages a { padding: 10px 0; }
  .site-nav-pages, .site-nav-auth { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* --- User menu & notifications --- */
.user-menu, .notif-menu { position: relative; }
.user-menu-trigger { font: inherit; font-weight: 600; background: none; border: 0; color: var(--text); cursor: pointer; padding: 6px 4px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-dropdown, .notif-dropdown { position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; transition: opacity 0.15s, transform 0.15s; }
.user-menu-dropdown.closed, .notif-dropdown.closed { opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: hidden; }
.user-menu-dropdown a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--text); }
.user-menu-dropdown a:hover { background: var(--surface-2); text-decoration: none; }
.notif-bell { background: none; border: 0; cursor: pointer; font-size: 1.15rem; position: relative; padding: 6px; color: var(--text); }
.notif-badge { position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--pink-500); color: #fff; font-size: 0.68rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.notif-dropdown { width: 320px; }
.notif-list { max-height: 340px; overflow-y: auto; }
.notif-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--text); }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unseen { font-weight: 650; }
.notif-item.unseen .notif-item-title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink-500); margin-right: 7px; vertical-align: middle; }
.notif-item-date { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
.notif-empty { padding: 16px; color: var(--text-muted); text-align: center; }
.notif-view-all { display: block; text-align: center; padding: 10px; font-weight: 600; border-top: 1px solid var(--border); margin-top: 4px; }
.notif-list-page .notif-item { border-bottom: 1px solid var(--border); border-radius: 0; padding: 14px 4px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.modal-overlay { position: fixed; inset: 0; background: rgba(10, 12, 20, 0.5); display: grid; place-items: center; z-index: 100; padding: 20px; animation: fadein 0.2s; }
.modal { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); animation: popin 0.25s; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal-actions button.secondary, .modal-actions .button-link { font: inherit; font-weight: 600; padding: 0.6em 1.2em; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.modal-actions .button-link { background: var(--grad); color: #fff; border: 0; }
.notif-modal-body { white-space: pre-line; }

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-tint); margin-top: 40px; }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 44px 20px 24px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-brand p { color: var(--text-muted); max-width: 340px; margin-top: 10px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px; }
.footer-col a, .footer-pages a { color: var(--text); font-size: 0.93rem; display: block; margin-bottom: 8px; }
.footer-bottom { max-width: var(--container); margin: 0 auto; padding: 16px 20px 32px; font-size: 0.82rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* --- Home --- */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0 clamp(48px, 7vw, 88px); }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.45; animation: float 14s ease-in-out infinite; }
.b1 { width: 420px; height: 420px; background: #5eead4; top: -120px; left: -80px; }
.b2 { width: 380px; height: 380px; background: #c4b5fd; top: 40px; right: -60px; animation-delay: -4s; }
.b3 { width: 300px; height: 300px; background: #f9a8d4; bottom: -120px; left: 40%; animation-delay: -8s; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); letter-spacing: -0.035em; margin-bottom: 0.4em; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-muted); max-width: 560px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 36px; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; margin: 0; }
.hero-stats dt { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.hero-stats dd { margin: 0; color: var(--text-muted); font-size: 0.86rem; }
.demo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; transform: rotate(1.5deg); animation: bob 7s ease-in-out infinite; }
.matrix.demo { gap: 8px; }
.matrix.demo .tile { animation: popin 0.5s both; animation-delay: calc(var(--i) * 0.12s); }
.demo-q span { animation: pulse 1.6s ease-in-out infinite; }
.demo-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.demo-opt { animation: popin 0.4s both; animation-delay: calc(1.2s + var(--i) * 0.1s); }
.demo-opt.is-answer { animation: popin 0.4s both, found 4s 2.4s ease-in-out infinite; animation-delay: 1.3s, 2.4s; }

.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-tint { background: var(--bg-tint); }
.section-title { text-align: center; }
.section-title.left, .section-lead.left { text-align: left; margin-left: 0; }
.section-lead { text-align: center; color: var(--text-muted); max-width: 680px; margin: 0 auto 40px; font-size: 1.06rem; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: transform 0.25s, box-shadow 0.25s; position: relative; overflow: hidden; }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-card p { color: var(--text-muted); font-size: 0.95rem; }
.cat-meta { font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.cat-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--grad); margin-bottom: 14px; flex: none; }
.cat-icon svg { width: 60%; height: 60%; }
.cat-icon.small { width: 30px; height: 30px; border-radius: 9px; margin: 0; }
.cat-icon.big { width: 64px; height: 64px; border-radius: 18px; margin: 0; }
[data-icon="pattern"], .cat-pattern .cat-icon { background: linear-gradient(135deg, #14b8a6, #0d9488); }
[data-icon="logic"], .cat-logic .cat-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
[data-icon="numeric"], .cat-numeric .cat-icon { background: linear-gradient(135deg, #ec4899, #be185d); }
[data-icon="spatial"], .cat-spatial .cat-icon { background: linear-gradient(135deg, #06b6d4, #7c3aed); }
[data-icon="memory"], .cat-memory .cat-icon { background: linear-gradient(135deg, #a855f7, #ec4899); }
[data-icon="speed"], .cat-speed .cat-icon { background: linear-gradient(135deg, #f59e0b, #ec4899); }

.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.steps li { background: var(--surface); border-radius: var(--radius); padding: 26px 22px; border: 1px solid var(--border); }
.steps p { color: var(--text-muted); font-size: 0.94rem; margin: 0; }
.step-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; margin-bottom: 14px; }
.split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; }
.map-teaser { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 18px; box-shadow: var(--shadow); min-height: 200px; }
.fair-list { list-style: none; padding: 0; margin: 32px auto 0; max-width: 860px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fair-list li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 18px 52px; position: relative; }
.fair-list li::before { content: "✓"; position: absolute; left: 18px; top: 16px; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-100); color: var(--teal-700); display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; }
.final-cta { background: var(--grad); color: #fff; border-radius: var(--radius-lg); padding: clamp(36px, 6vw, 64px); text-align: center; box-shadow: var(--shadow-lg); }
.final-cta p { opacity: 0.9; font-size: 1.1rem; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cat-grid, .steps, .fair-list { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; }
}

/* --- Forms / auth --- */
.auth-page { display: grid; place-items: start center; padding: 56px 20px 72px; background: radial-gradient(800px 400px at 50% -10%, rgba(139, 92, 246, 0.12), transparent), radial-gradient(600px 300px at 10% 10%, rgba(20, 184, 166, 0.12), transparent); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); }
.auth-card.wide { max-width: 520px; }
form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
label small, .hint { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }
.hint { margin-top: -10px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
  font: inherit; font-weight: 400; padding: 0.75em 0.9em; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); width: 100%; transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus { outline: none; border-color: var(--teal-500); box-shadow: var(--ring); }
input.invalid, select.invalid { border-color: var(--error); }
.field-error { color: var(--error); font-size: 0.8rem; margin: -2px 0 0; font-weight: 500; }
.form-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.checkbox { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal-600); flex: none; }
.message { margin: 0; font-size: 0.9rem; min-height: 1.2em; }
.message.error { color: var(--error); }
.message.success { color: var(--success); }
.form-footnote { text-align: center; margin: 14px 0 0; font-size: 0.9rem; color: var(--text-muted); }
.cms h2 { margin-top: 1.6em; }

/* --- Cards / dashboard --- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow-sm); }
.dashboard { padding-top: 40px; padding-bottom: 64px; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.dash-progress { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 18px; }
.dash-progress > div { display: flex; flex-direction: column; }
.progress-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.progress-ring .ring-text { transform: rotate(90deg); transform-origin: 18px 18px; font-size: 8px; font-weight: 800; fill: var(--text); }
.ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 3.4; }
.ring-fg { fill: none; stroke: url(#none); stroke: var(--teal-500); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 1s ease; }
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 4px; transition: transform 0.2s, box-shadow 0.2s; }
.dash-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dash-card .muted { font-size: 0.92rem; margin: 0 0 6px; }
.dash-card .btn { margin-top: auto; align-self: flex-start; }
.dash-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.status-pill { font-size: 0.74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.status-pill.completed { background: rgba(5, 150, 105, 0.12); color: var(--success); }
.status-pill.in_progress { background: rgba(139, 92, 246, 0.14); color: var(--violet-600); }
.status-completed { background: linear-gradient(180deg, var(--surface), var(--surface)) padding-box, var(--grad-soft) border-box; }
.score-bar { margin-top: auto; position: relative; background: var(--surface-2); border-radius: 999px; height: 34px; overflow: hidden; display: flex; align-items: center; padding: 0 14px; }
.score-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--grad); opacity: 0.25; border-radius: 999px; animation: grow 1s ease both; }
.score-bar strong { position: relative; font-size: 0.9rem; }
.result-banner { display: flex; align-items: center; gap: 22px; background: var(--grad); color: #fff; border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 24px; box-shadow: var(--shadow-lg); text-decoration: none; animation: popin 0.5s; }
.result-banner:hover { text-decoration: none; }
.rb-iq { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, 0.18); border-radius: 18px; padding: 8px 18px; }
.rb-iq span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; }
.rb-iq strong { font-size: 2rem; line-height: 1; }
.rb-text { display: flex; flex-direction: column; flex: 1; }
.preview-card { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: center; margin-bottom: 24px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr 1fr; } .preview-card { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .dash-grid { grid-template-columns: 1fr; } .result-banner { flex-wrap: wrap; } }

/* --- Radar & charts --- */
.radar-wrap { max-width: 340px; margin: 0 auto; }
.radar { width: 100%; height: auto; overflow: visible; }
.radar-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.radar-ring.mid { stroke-dasharray: 4 3; stroke: var(--text-muted); opacity: 0.5; }
.radar-axis { stroke: var(--border); }
.radar-label { font-size: 11px; font-weight: 650; fill: var(--text-muted); }
.radar-shape { fill: rgba(139, 92, 246, 0.22); stroke: var(--violet-500); stroke-width: 2.5; stroke-linejoin: round; animation: popin 0.8s ease both; transform-origin: center; }
.radar-dot { fill: var(--pink-500); stroke: var(--surface); stroke-width: 2; }

/* --- Test page --- */
.test-page { padding: 32px 0 64px; background: radial-gradient(900px 300px at 50% -60px, rgba(20, 184, 166, 0.1), transparent); }
.test-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.test-head h1 { margin: 0; }
.test-head .eyebrow { margin-bottom: 4px; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 36px; }
.intro-card h2 { font-size: 1.1rem; }
.how-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.how-list li::marker { color: var(--accent); font-weight: 800; }
.examples { margin-bottom: 36px; }
.ex-tabs { display: inline-flex; gap: 6px; background: var(--surface-2); padding: 5px; border-radius: 999px; margin: 6px 0 18px; }
.ex-tab { font: inherit; font-weight: 650; font-size: 0.9rem; border: 0; background: none; padding: 8px 18px; border-radius: 999px; cursor: pointer; color: var(--text-muted); }
.ex-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ex-tab.diff-easy.active { color: var(--success); }
.ex-tab.diff-medium.active { color: var(--warn); }
.ex-tab.diff-hard.active { color: var(--pink-600); }
.ex-card { padding: clamp(18px, 3vw, 28px); }
.ex-feedback { font-weight: 650; margin: 14px 0 0; color: var(--text-muted); }
.ex-feedback.good { color: var(--success); }
.ex-feedback.bad { color: var(--pink-600); }
.ex-explain { background: var(--grad-soft); border-radius: var(--radius); padding: 0; margin-top: 14px; overflow: hidden; }
.ex-explain:not(:empty) { padding: 16px 18px; }
.ex-explain.pop { animation: slidein 0.35s ease; }
.ex-step-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ex-step-count { font-size: 0.78rem; font-weight: 700; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.06em; }
.ex-dots { display: flex; gap: 5px; }
.ex-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.2s, transform 0.2s; }
.ex-dots span.done { background: var(--teal-300); }
.ex-dots span.on { background: var(--violet-500); transform: scale(1.3); }
.ex-step-text { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.ex-step-text .fig-inline { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin: 0 0.1em; }
.ex-controls { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.ready-card { text-align: center; max-width: 640px; margin: 0 auto; }
.ready-card .btn { margin-top: 8px; }
.notice { background: rgba(139, 92, 246, 0.1); color: var(--violet-600); padding: 10px 14px; border-radius: 12px; font-weight: 600; }
@media (max-width: 760px) { .intro-grid { grid-template-columns: 1fr; } }

.test-shell { max-width: 920px; margin: 0 auto; }
.test-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 10px; }
.test-bar-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.test-counter { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
.test-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 20px; }
.test-progress span { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform 0.5s ease; }
.timer { position: relative; width: 56px; height: 56px; flex: none; }
.timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .ring-fg { transition: stroke-dashoffset 0.25s linear, stroke 0.3s; }
.timer-text { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.timer.warn .ring-fg { stroke: var(--warn); }
.timer.urgent .ring-fg { stroke: var(--pink-500); }
.timer.urgent .timer-text { color: var(--pink-600); animation: pulse 0.8s infinite; }
.test-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 18px; }
.q-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(16px, 3vw, 28px); box-shadow: var(--shadow); }
.q-box.example { box-shadow: none; border: 0; padding: 0; }
.q-box.enter { animation: slidein 0.35s ease; }
.q-prompt { font-weight: 700; font-size: 1.05rem; text-align: center; margin-bottom: 16px; }
.q-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.q-options { margin: 22px auto 0; max-width: 600px; }
.q-matrix + .q-options { max-width: 520px; }
.q-cube + .q-options, .q-folding + .q-options { max-width: 560px; }
.done-card { text-align: center; max-width: 560px; margin: 40px auto; position: relative; overflow: hidden; }
.done-card .cat-icon { margin: 0 auto 16px; }
.done-score { display: inline-flex; flex-direction: column; align-items: center; background: var(--grad-soft); border-radius: var(--radius); padding: 14px 32px; margin: 8px 0 22px; }
.done-score span { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.done-score strong { font-size: 2.6rem; line-height: 1.1; }
.done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -10px; left: calc(var(--i) * 5.6%); width: 8px; height: 14px; border-radius: 2px; background: var(--grad); animation: confetti 2.6s ease-in calc(var(--i) * 0.08s) both; }
.confetti i:nth-child(3n) { background: var(--pink-500); }
.confetti i:nth-child(3n + 1) { background: var(--teal-500); }

/* --- Figure tiles & options --- */
.tile { background: var(--fig-bg); border: 1.5px solid var(--border); border-radius: 12px; display: grid; place-items: center; aspect-ratio: 1; padding: 4%; transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s, background 0.25s; position: relative; color: var(--ink); }
.tile .fig { width: 100%; height: 100%; display: block; }
.tile.unknown { border-style: dashed; border-color: var(--teal-300); background: var(--teal-50); }
.tile.unknown span { font-size: 2.2rem; font-weight: 800; color: var(--teal-600); }
.matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 380px); padding: 8px; background: var(--surface-2); border-radius: 16px; }
.matrix .tile { border-radius: 10px; }
.options { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 10px; }
.option { font: inherit; background: var(--fig-bg); border: 2px solid var(--border); border-radius: 14px; aspect-ratio: 1; padding: 6%; cursor: pointer; display: grid; place-items: center; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; color: var(--ink); position: relative; }
.option .fig { width: 100%; height: 100%; }
.option:hover { border-color: var(--teal-300); transform: translateY(-2px); }
.option.selected { border-color: var(--teal-500); box-shadow: var(--ring); background: color-mix(in srgb, var(--teal-50) 60%, var(--fig-bg)); }
.option.correct { border-color: var(--success) !important; box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.25) !important; }
.option.correct::after { content: "✓"; position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; background: var(--success); color: #fff; font-size: 0.8rem; font-weight: 800; display: grid; place-items: center; }
.option.wrong { border-color: var(--pink-500); background: #fff5fa; }
.options.numeric .option { aspect-ratio: auto; padding: 14px 6px; }
.num { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.locked .option { cursor: default; }
.locked .option:hover { transform: none; }
.hl { animation: hlpulse 1.6s ease-in-out infinite; border-color: var(--violet-500) !important; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.28); z-index: 1; }
.matrix .tile.hl { transform: scale(1.04); }
.hero-tile { width: min(240px, 60vw); }
@media (max-width: 760px) {
  .options { grid-template-columns: repeat(min(var(--cols, 4), 4), 1fr); }
  .options[style*="--cols:6"] { grid-template-columns: repeat(3, 1fr); }
  .options.numeric[style*="--cols:6"] { grid-template-columns: repeat(3, 1fr); }
}

/* series */
.series-wrap { position: relative; padding-top: 34px; width: 100%; display: flex; justify-content: center; }
.series { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.series-term { min-width: 58px; height: 62px; padding: 0 10px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--fig-bg); display: grid; place-items: center; font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; transition: all 0.25s; }
.series-term.unknown { border-style: dashed; border-color: var(--teal-300); background: var(--teal-50); color: var(--teal-600); }
.series-marks { position: absolute; top: 0; left: 0; right: 0; height: 34px; pointer-events: none; }
.series-mark { position: absolute; top: 12px; height: 18px; border: 2px solid var(--violet-500); border-bottom: 0; border-radius: 12px 12px 0 0; animation: fadein 0.4s; }
.series-mark span { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--violet-500); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 600px) { .series-term { min-width: 46px; height: 52px; font-size: 1.15rem; } .series { gap: 6px; } }

/* folding */
.fold-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fold-steps .tile { width: min(150px, 26vw); }
.fold-steps .tile.final { border-color: var(--violet-500); }
.fold-next { font-size: 1.4rem; color: var(--text-muted); font-weight: 700; }

/* cube net */
.net-tile { width: min(360px, 90vw); aspect-ratio: auto; padding: 14px; }
.net-tile .fig { height: auto; }

/* scales */
.scales { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.scale-tile { aspect-ratio: auto; width: min(260px, 80vw); padding: 6px 10px; }
.scale-tile .fig { height: auto; }
.scale-tile.order-tile { width: min(180px, 42vw); padding: 4px 6px; }
.ask-tile { border-color: var(--teal-300); border-style: dashed; background: color-mix(in srgb, var(--teal-50) 50%, var(--fig-bg)); }

/* induction */
.pairs { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 28px; justify-content: center; }
.pair { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; border: 1.5px solid transparent; transition: all 0.25s; }
.pair .tile.small { width: min(110px, 22vw); }
.pair-arrow { font-size: 1.3rem; font-weight: 800; color: var(--text-muted); }
.test-pair { background: var(--teal-50); border-color: var(--teal-100); }
@media (max-width: 640px) { .pairs { grid-template-columns: 1fr; } }

/* memory */
.mem-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; width: min(360px, 88vw); }
.mem-cell { aspect-ratio: 1; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-2); cursor: default; font: inherit; font-weight: 800; font-size: 1.2rem; color: #fff; transition: background 0.15s, transform 0.15s; }
.mem-grid.recall .mem-cell { cursor: pointer; background: var(--fig-bg); }
.mem-grid.recall .mem-cell:hover { border-color: var(--teal-300); }
.mem-grid .mem-cell.lit { background: var(--grad); border-color: transparent; transform: scale(1.04); box-shadow: 0 6px 18px -6px rgba(124, 58, 237, 0.6); }
.mem-grid .mem-cell.on { background: var(--teal-500); border-color: var(--teal-600); }
.mem-grid .mem-cell.answer { background: var(--success); border-color: var(--success); }
.exposure-bar { width: min(360px, 88vw); height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.exposure-bar span { display: block; height: 100%; background: var(--grad); transform-origin: left; }
.mem-tools { display: flex; align-items: center; justify-content: center; gap: 14px; }
.mem-counter { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }
.binding.tile { width: min(300px, 80vw); background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: calc(100% / var(--n)) calc(100% / var(--n)); padding: 0; }
.option .fig-binding { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 25% 25%; }

/* speed */
.odd-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(480px, 92vw); }
.odd-cell { aspect-ratio: 1; padding: 12%; border-radius: 10px; }
.count-target { display: flex; align-items: center; gap: 10px; }
.count-target .tile.small { width: 84px; border-color: var(--violet-500); }
.field-tile { width: min(460px, 92vw); padding: 2%; }

/* SVG figure inks */
.fig { color: var(--ink); overflow: visible; }
.fig-shape > * { stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fig-shape.f-none > * { fill: none; }
.fig-shape.f-solid > * { fill: currentColor; }
.fig-shape.f-grey > * { fill: var(--fig-grey); }
.fig-shape.f-hatch > * { fill: url(#fig-hatch); }
.fig-shape.f-dots > * { fill: url(#fig-dots); }
.fig-shape .fig-inner { fill: var(--fig-bg) !important; }
.fig-shape.f-solid .fig-inner { fill: var(--fig-bg) !important; }
.fig-bgfill { fill: var(--fig-bg); }
.fig-hatchline { stroke: var(--ink); stroke-width: 3; }
.fig-dotfill { fill: var(--ink); }
.fig-seg { stroke: currentColor; stroke-linecap: round; }
.fig-frame { fill: none; stroke: var(--border); stroke-width: 1.5; }
.fig-inline .fig-shape > * { stroke-width: 1.2; }
.cg-on { fill: var(--ink); }
.cg-off { fill: var(--surface-2); stroke: var(--border); stroke-width: 0.6; }
.cg-two { fill: url(#fig-hatch2); stroke: var(--violet-600); stroke-width: 1; }
.fig-accent2-bg { fill: rgba(139, 92, 246, 0.25); }
.fig-accent2-line { stroke: var(--violet-600); stroke-width: 1.6; }
.cube-face { stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.cube-top { fill: #ffffff; }
.cube-left { fill: #eef1f6; }
.cube-right { fill: #dde3ec; }
.cs-ink { fill: var(--ink); }
.cs-line { fill: none; stroke: var(--ink); stroke-width: 8; }
.cs-thick { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; }
.net-face { fill: var(--fig-bg); stroke: var(--ink); stroke-width: 3; }
.fig-net [data-hl].hl .net-face { fill: rgba(139, 92, 246, 0.15); }
.paper-ghost { fill: none; stroke: var(--border); stroke-dasharray: 3 3; }
.paper { fill: #fffdf7; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12)); }
.fold-line { stroke: var(--violet-600); stroke-width: 1.6; stroke-dasharray: 4 3; }
.fold-arrow { fill: none; stroke: var(--pink-500); stroke-width: 2.2; stroke-linecap: round; }
.fold-arrowhead { fill: var(--pink-500); }
.hole { fill: var(--ink); }
.scale-stand, .scale-pivot { fill: var(--text-muted); }
.scale-beam { fill: var(--ink); }
.scale-string { stroke: var(--text-muted); stroke-width: 1.2; }
.scale-pan { fill: var(--surface-2); stroke: var(--ink); stroke-width: 1.4; }
.scale-q { font-size: 20px; font-weight: 800; fill: var(--teal-600); }
.scale-x { font-size: 14px; font-weight: 700; fill: var(--text-muted); }
.fig-scale .fig-shape > * { stroke-width: 1.6; }

/* --- Result page --- */
.result-page { padding: 28px 0 64px; }
.result-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); color: #fff; text-align: center; padding: clamp(36px, 6vw, 64px) 20px; margin-bottom: 24px; background: var(--grad); box-shadow: var(--shadow-lg); }
.result-hero-bg { position: absolute; inset: 0; background: radial-gradient(400px 200px at 20% 0%, rgba(255, 255, 255, 0.25), transparent), radial-gradient(500px 260px at 90% 100%, rgba(255, 255, 255, 0.18), transparent); pointer-events: none; }
.iq-badge { display: inline-flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 28px; padding: 14px 36px; margin-bottom: 16px; backdrop-filter: blur(6px); animation: popin 0.6s; }
.iq-badge span { font-weight: 800; letter-spacing: 0.2em; font-size: 0.85rem; opacity: 0.9; }
.iq-number { font-size: clamp(4rem, 12vw, 6.5rem); line-height: 1; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.result-hero h1 { color: #fff; margin-bottom: 0.2em; }
.hero-sub { font-size: 1.15rem; opacity: 0.92; }
.hero-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.bell { width: 100%; height: auto; margin: 10px 0; }
.bell-area { fill: var(--surface-2); }
.bell-fill { fill: rgba(139, 92, 246, 0.35); }
.bell-tick { font-size: 9px; fill: var(--text-muted); }
.bell-marker { stroke: var(--pink-500); stroke-width: 2.5; stroke-dasharray: 4 3; }
.bell-you { font-size: 10px; font-weight: 800; fill: var(--pink-600); }
.breakdown { display: grid; gap: 12px; margin-top: 10px; }
.bd-row { display: flex; gap: 12px; align-items: center; }
.bd-main { flex: 1; }
.bd-head { display: flex; justify-content: space-between; font-size: 0.94rem; }
.bd-score { font-weight: 800; }
.bd-bar, .compare-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 5px 0 3px; }
.bd-bar span, .compare-bar span { display: block; height: 100%; width: var(--w); background: var(--grad); border-radius: 999px; animation: grow 1.2s ease both; }
.pill-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { padding: 8px 14px; border-radius: 999px; background: var(--surface-2); font-weight: 650; font-size: 0.92rem; }
.pill-list.good li { background: rgba(5, 150, 105, 0.12); color: var(--success); }
.mini-map { margin: 6px 0 14px; }
.compare { display: grid; gap: 10px; }
.compare-row { display: grid; grid-template-columns: 1fr 110px 44px; gap: 10px; align-items: center; font-size: 0.88rem; }
.compare-row strong { text-align: right; }
.compare-row.you .compare-bar span { background: var(--pink-500); }
.compare-row.world .compare-bar span { background: var(--text-muted); }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer; text-decoration: none; transition: transform 0.15s, background 0.15s; }
.share-btn:hover { transform: translateY(-1px); text-decoration: none; background: var(--surface-2); }
.share-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-btn.x { background: #0f1419; color: #fff; border-color: #0f1419; }
.share-btn.facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.share-btn.whatsapp { background: #25d366; color: #fff; border-color: #25d366; }
.share-btn.telegram { background: #229ed9; color: #fff; border-color: #229ed9; }
.share-btn.linkedin { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.share-btn.reddit { background: #ff4500; color: #fff; border-color: #ff4500; }
.share-btn.native, .share-btn.copy { background: var(--grad); color: #fff; border: 0; }
.cta-card { text-align: center; background: var(--grad-soft); }
.disclaimer { text-align: center; max-width: 760px; margin: 28px auto 0; }
@media (max-width: 860px) { .result-grid { grid-template-columns: 1fr; } }

/* --- World map --- */
.world-page { padding-top: 40px; padding-bottom: 64px; }
.map-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(10px, 2vw, 20px); box-shadow: var(--shadow); margin-bottom: 36px; }
.world-map { position: relative; }
.world-svg { width: 100%; height: auto; display: block; }
.country { fill: var(--surface-2); stroke: var(--bg); stroke-width: 0.5; transition: opacity 0.15s; }
.country.has-data { cursor: pointer; }
.country:hover { opacity: 0.8; }
.country.mine { stroke: var(--pink-500); stroke-width: 2; animation: hlpulse 2s infinite; }
.world-svg.compact .country { stroke-width: 0.3; }
.map-tip { position: absolute; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px 12px; display: flex; flex-direction: column; font-size: 0.86rem; pointer-events: none; min-width: 160px; }
.map-tip[hidden] { display: none; }
.map-legend { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); }
.legend-ramp { display: inline-block; width: 160px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #ccfbf1, #2dd4bf, #0d9488, #7c3aed, #db2777); }
.rank-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.rank-table th, .rank-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.rank-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: var(--bg-tint); }
.rank-table tr:last-child td { border-bottom: 0; }
.empty-state { padding: 28px; text-align: center; background: var(--surface-2); border-radius: var(--radius); color: var(--text-muted); }

/* --- Animations --- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes popin { from { opacity: 0; transform: scale(0.92); } }
@keyframes slidein { from { opacity: 0; transform: translateY(10px); } }
@keyframes grow { from { width: 0; } }
@keyframes pulse { 50% { opacity: 0.45; } }
@keyframes hlpulse { 50% { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.12); } }
@keyframes float { 50% { transform: translate(30px, 20px) scale(1.08); } }
@keyframes bob { 50% { transform: rotate(1.5deg) translateY(-8px); } }
@keyframes found { 0%, 60%, 100% { box-shadow: none; border-color: var(--border); } 70%, 90% { box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.3); border-color: var(--success); } }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(420px) rotate(540deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --- Mistake review --- */
.review { max-width: 920px; margin: 0 auto 40px; }
.review:empty { display: none; }
.review-card { margin-top: 18px; }
.review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.review-num { font-weight: 800; color: var(--accent-2); }
.review-explain { padding: 16px 18px; }
.review-explain p + p { margin-top: 8px; }
.review-perfect { font-weight: 700; color: var(--success); margin-bottom: 16px; }
.mem-grid .mem-cell.wrong { background: var(--pink-500); border-color: var(--pink-600); }
/* Right square, wrong position in the sequence. */
.mem-grid .mem-cell.answer.wrong { background: var(--success); box-shadow: inset 0 0 0 4px var(--pink-500); }
.option.selected.wrong { box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.25); background: #fff5fa; }

/* --- Genius Test --- */
[data-icon^="g-"] { background: linear-gradient(135deg, #f59e0b, #7c3aed 70%); }
#dash-genius { margin-top: 36px; }
.genius-locked { display: flex; gap: 18px; align-items: center; padding: 22px 26px; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg-tint); }
.genius-locked h2 { margin-bottom: 4px; }
.genius-locked p { margin: 0; }
.genius-lock { font-size: 2rem; }
.genius-section .dash-grid { grid-template-columns: repeat(4, 1fr); }
.genius-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 34px); margin-bottom: 20px; color: #fff; background: radial-gradient(500px 200px at 90% 0%, rgba(245, 158, 11, 0.35), transparent), linear-gradient(135deg, #1e1b4b, #4c1d95 55%, #7c3aed); box-shadow: var(--shadow-lg); }
.genius-hero h2 { color: #fff; margin-top: 10px; }
.genius-hero p { opacity: 0.92; max-width: 720px; }
.genius-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #3b0764; }
.result-banner.genius { background: linear-gradient(135deg, #1e1b4b, #7c3aed); }
.result-genius { text-align: center; }
.result-genius p { margin-left: auto; margin-right: auto; }
.result-genius .genius-iq { margin-top: 16px; }
.genius-breakdown { max-width: 520px; margin: 18px auto; text-align: left; }
.genius-breakdown .bd-head, .genius-breakdown .small { color: #fff; }
.genius-note { opacity: 0.75 !important; }
.cube-views { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cube-views .tile.cube-view { width: min(170px, 28vw); flex: 0 0 auto; }
.prompt-symbol { display: inline-block; width: 44px; height: 44px; vertical-align: middle; color: var(--ink); }
.prompt-symbol .fig { width: 100%; height: 100%; }
.fig-inline.fig-symbol { width: 1.4em; height: 1.4em; }
@media (max-width: 900px) { .genius-section .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .genius-section .dash-grid { grid-template-columns: 1fr; } }
.q-prompt .fig-inline { width: 1.4em; height: 1.4em; vertical-align: -0.3em; margin: 0 0.15em; }

/* --- Content pages (guides, section pages, countries) --- */
a.cat-card { display: block; color: inherit; text-decoration: none; }
a.cat-card:hover { text-decoration: none; }
.article { max-width: 860px; padding-top: 28px; padding-bottom: 56px; }
.breadcrumbs { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs .sep { opacity: 0.5; }
.article-head h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); letter-spacing: -0.03em; }
.article-head .lead { max-width: none; font-size: 1.15rem; }
.article-section { margin: 34px 0; }
.article-section h2 { margin-bottom: 0.6em; }
.article-section p, .article-section li { font-size: 1.04rem; line-height: 1.7; color: var(--text); }
.article-section ul, .article-section ol { padding-left: 1.3em; display: grid; gap: 8px; }
.article-section li::marker { color: var(--accent); font-weight: 700; }
.article-section a { text-decoration: underline; text-decoration-color: rgba(13, 148, 136, 0.35); text-underline-offset: 3px; }
.table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th, .data-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.data-table th { background: var(--bg-tint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.data-table tr:last-child td { border-bottom: 0; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 18px; margin-bottom: 10px; background: var(--surface); }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 16px; }
.seo-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--grad); color: #fff; border-radius: var(--radius-lg); padding: 26px 30px; margin: 40px 0; box-shadow: var(--shadow-lg); }
.seo-cta h2 { color: #fff; margin-bottom: 4px; }
.seo-cta p { margin: 0; opacity: 0.92; }
.link-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.link-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s; }
.link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.link-card span:not(.cat-icon) { color: var(--text-muted); font-size: 0.92rem; }
.link-card .cat-icon { margin-bottom: 4px; }
.try-examples .ex-card { margin-top: 10px; }
.calc { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.calc label { max-width: 180px; }
.calc-out { display: grid; gap: 6px; }
.calc-out strong { font-size: 1.2rem; }
.seo-widget .bell { max-width: 520px; }
.country-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
.country-stats .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.country-stats span { display: block; color: var(--text-muted); font-size: 0.82rem; }
.country-stats strong { font-size: 1.6rem; letter-spacing: -0.02em; }
.country-links { display: flex; flex-wrap: wrap; gap: 8px; }
.country-links a { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.9rem; }
.country.linked { cursor: pointer; }
@media (max-width: 700px) { .country-stats { grid-template-columns: 1fr 1fr; } }