:root {
  --bg: #07111f;
  --bg-soft: #0b1728;
  --panel: rgba(13, 28, 48, 0.92);
  --panel-2: rgba(18, 38, 63, 0.9);
  --line: rgba(136, 176, 220, 0.22);
  --text: #edf6ff;
  --muted: #9fb5ca;
  --accent: #58d6ff;
  --accent-2: #7cf1c8;
  --warn: #ffd36a;
  --danger: #ff7f91;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --radius: 22px;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(88, 214, 255, 0.12), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(124, 241, 200, 0.08), transparent 25%),
    linear-gradient(160deg, #06101c 0%, #091626 52%, #07111f 100%);
}

button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 14, 26, 0.74);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-status {
  color: var(--muted);
  font-size: 0.92rem;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

main { flex: 1; width: 100%; }
.screen { display: none; }
.screen.active { display: block; }

.start-wrap {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 56px;
}

.center-copy { text-align: center; max-width: 850px; margin: 0 auto 36px; }
.eyebrow, .section-kicker {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.76rem;
}

.hero-copy h1 {
  margin: 12px 0 6px;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: 0.04em;
  line-height: 1.06;
}
.hero-subtitle { margin: 0; color: var(--accent-2); font-size: 1.28rem; font-weight: 700; }
.hero-note { max-width: 780px; margin: 18px auto 0; color: var(--muted); line-height: 1.85; }

.start-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 24px; align-items: stretch; }
.card-panel {
  background: linear-gradient(145deg, rgba(17, 36, 59, 0.93), rgba(10, 23, 41, 0.93));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.candidate-card, .ability-card { padding: 30px; }

.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.section-title-row.compact { margin-bottom: 14px; }
.section-title-row h2, .section-title-row h3 { margin: 5px 0 0; }
.required-note { color: var(--muted); font-size: 0.85rem; }

.form-grid { display: grid; grid-template-columns: 0.75fr 1.4fr 0.75fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { color: var(--muted); font-size: 0.9rem; }
.field input {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(4, 13, 24, 0.75);
  color: var(--text);
  border-radius: 13px;
  padding: 13px 14px;
  outline: none;
}
.field input:focus { border-color: rgba(88, 214, 255, 0.75); box-shadow: 0 0 0 3px rgba(88, 214, 255, 0.1); }

.identity-message, .load-message {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.9rem;
}
.load-message.ok { color: var(--accent-2); }
.load-message.error { color: var(--danger); }
.file-fallback { margin-top: 14px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.file-fallback p { margin: 0 0 12px; line-height: 1.7; }
.file-btn input { display: none; }

.primary-btn, .secondary-btn, .danger-btn {
  border: 0;
  border-radius: 13px;
  padding: 12px 18px;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.primary-btn:hover:not(:disabled), .secondary-btn:hover:not(:disabled), .danger-btn:hover:not(:disabled) { transform: translateY(-1px); }
.primary-btn { background: linear-gradient(135deg, var(--accent), #6db8ff); color: #04111f; box-shadow: 0 10px 30px rgba(88, 214, 255, 0.18); }
.secondary-btn { background: rgba(127, 158, 191, 0.12); color: var(--text); border: 1px solid var(--line); }
.danger-btn { background: linear-gradient(135deg, #ffb36b, var(--danger)); color: #261017; }
.wide-btn { width: 100%; margin-top: 22px; padding: 14px 18px; }

.category-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.category-chip {
  padding: 12px 13px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(5, 15, 27, 0.42);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}
.category-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px rgba(88, 214, 255, .6); flex: 0 0 auto; }
.category-chip span { font-weight: 700; }

.quiz-layout {
  width: min(1280px, calc(100% - 34px));
  margin: 0 auto;
  padding: 28px 0 42px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
}
.quiz-sidebar { padding: 22px; align-self: start; position: sticky; top: 92px; }
.candidate-mini { color: var(--muted); font-size: .9rem; line-height: 1.65; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 17px; }
.candidate-mini strong { color: var(--text); }
.stat-box > span, .mini-stat span { color: var(--muted); font-size: .83rem; }
.stat-box > strong { display: block; font-size: 1.7rem; margin: 4px 0 10px; }
.progress-track { height: 8px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s ease; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.mini-stat { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 15, 27, .35); }
.mini-stat strong { display: block; font-size: 1.2rem; margin-top: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .78rem; margin: 12px 0 15px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.answered { background: var(--accent-2); }
.dot.current { background: var(--accent); }
.dot.blank { background: rgba(255,255,255,.22); }
.question-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.palette-btn { border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); border-radius: 9px; min-height: 34px; font-size: .8rem; }
.palette-btn.answered { color: #05151d; background: var(--accent-2); border-color: transparent; }
.palette-btn.current { color: #06131f; background: var(--accent); border-color: transparent; box-shadow: 0 0 0 3px rgba(88,214,255,.12); }

.question-card { min-height: 680px; padding: 34px 38px; }
.question-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.badge, .difficulty { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 11px; font-size: .82rem; font-weight: 800; }
.badge { background: rgba(88,214,255,.12); color: var(--accent); border: 1px solid rgba(88,214,255,.23); }
.difficulty { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--line); }
.question-prompt { font-size: clamp(1.45rem, 2.5vw, 2.05rem); line-height: 1.62; margin: 0 0 16px; white-space: pre-wrap; }
.question-legend { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 211, 106, .08); border: 1px solid rgba(255, 211, 106, .24); color: #ffe3a2; line-height: 1.7; }
.question-image { display: block; max-width: min(100%, 700px); max-height: 310px; object-fit: contain; margin: 12px auto 18px; border-radius: 14px; }
.help-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 10px 0 20px; }
.help-btn { border: 1px solid rgba(124,241,200,.25); background: rgba(124,241,200,.08); color: var(--accent-2); border-radius: 999px; padding: 8px 12px; font-size: .86rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.options-list { display: grid; gap: 11px; margin-top: 20px; }
.option-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  text-align: left;
  gap: 13px;
  padding: 15px 16px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: rgba(4, 13, 24, .48);
  color: var(--text);
  line-height: 1.65;
}
.option-btn:hover { border-color: rgba(88,214,255,.5); background: rgba(88,214,255,.06); }
.option-btn.selected { border-color: var(--accent); background: rgba(88,214,255,.12); box-shadow: inset 0 0 0 1px rgba(88,214,255,.18); }
.option-label { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-weight: 900; }
.option-btn.selected .option-label { background: var(--accent); color: #06131f; border-color: transparent; }
.question-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.question-actions #prevBtn { margin-right: auto; }

.result-header {
  width: min(1180px, calc(100% - 40px));
  margin: 30px auto 22px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.result-header h2 { margin: 7px 0 4px; font-size: 2rem; }
.result-header p { margin: 0; color: var(--muted); }
.result-grid { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: 22px; }
.score-card, .radar-card, .category-result-card, .save-card { padding: 26px; }
.result-identity { color: var(--muted); line-height: 1.7; margin-bottom: 18px; }
.result-identity strong { color: var(--text); }
.score-ring {
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 6px auto 24px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent) 0deg, rgba(255,255,255,.08) 0deg);
  position: relative;
}
.score-ring::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #0d1c30; box-shadow: inset 0 0 30px rgba(0,0,0,.25); }
.score-ring > div { position: relative; z-index: 2; text-align: center; }
.score-ring strong { display: block; font-size: 2.5rem; }
.score-ring span { color: var(--muted); font-size: .85rem; }
.score-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.score-metrics div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.025); }
.score-metrics span { color: var(--muted); font-size: .82rem; }
.score-metrics strong { display: block; margin-top: 4px; font-size: 1.2rem; }
.radar-card canvas { display: block; width: 100%; height: auto; max-height: 610px; }
.category-result-card { width: min(1180px, calc(100% - 40px)); margin: 22px auto 0; }
.category-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.category-result { border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; background: rgba(255,255,255,.025); }
.category-result-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.category-result-head span { font-weight: 800; }
.category-result-head strong { color: var(--accent-2); }
.mini-bar { height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.07); }
.mini-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.save-card { width: min(1180px, calc(100% - 40px)); margin: 22px auto 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.save-copy h3 { margin: 5px 0 8px; }
.save-copy p { margin: 0; color: var(--muted); line-height: 1.75; max-width: 760px; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); backdrop-filter: blur(6px); }
.modal-panel { position: relative; width: min(640px, 100%); max-height: 86vh; overflow: auto; border: 1px solid var(--line); border-radius: 20px; background: #0b192b; box-shadow: 0 30px 100px rgba(0,0,0,.45); padding: 28px; }
.modal-panel h2 { margin: 6px 0 12px; }
.modal-close { position: absolute; right: 14px; top: 12px; border: 0; background: transparent; color: var(--muted); font-size: 2rem; line-height: 1; }
.help-summary { color: var(--text); line-height: 1.8; }
.help-example { margin-top: 14px; padding: 13px 14px; border-left: 3px solid var(--accent); background: rgba(88,214,255,.06); color: var(--muted); line-height: 1.75; }
.help-media { width: 100%; max-height: 330px; object-fit: contain; margin-top: 18px; border-radius: 13px; background: rgba(255,255,255,.03); }
.help-media-note { color: var(--muted); font-size: .86rem; }
.hidden { display: none !important; }

footer { width: 100%; display: flex; justify-content: space-between; gap: 16px; padding: 22px 42px 28px; color: rgba(159,181,202,.7); font-size: .82rem; border-top: 1px solid rgba(136,176,220,.1); }

@media (max-width: 980px) {
  .start-grid, .quiz-layout, .result-grid { grid-template-columns: 1fr; }
  .quiz-sidebar { position: static; }
  .question-palette { grid-template-columns: repeat(10, 1fr); }
  .save-card { align-items: flex-start; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 18px; }
  .start-wrap, .result-header, .result-grid, .category-result-card, .save-card { width: min(100% - 22px, 1180px); }
  .start-wrap { padding-top: 42px; }
  .candidate-card, .ability-card, .question-card, .score-card, .radar-card, .category-result-card, .save-card { padding: 20px; }
  .category-list, .category-results { grid-template-columns: 1fr; }
  .quiz-layout { width: min(100% - 18px, 1280px); }
  .question-palette { grid-template-columns: repeat(5, 1fr); }
  .question-card { min-height: auto; }
  .question-actions { flex-wrap: wrap; }
  .question-actions #prevBtn { margin-right: 0; }
  .question-actions button { flex: 1 1 45%; }
  .result-header { align-items: flex-start; flex-direction: column; }
  footer { padding: 20px; flex-direction: column; }
}
.home-link{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:auto}
.save-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}.auto-save-status{font-size:13px;color:var(--muted)}.auto-save-status.ok{color:#7cf1c8}.auto-save-status.error{color:#ffb4b4}
@media(max-width:760px){.save-actions{align-items:stretch}.home-link{width:auto}}

.school-brand{display:flex;align-items:center;gap:14px}
.school-logo{display:block;height:42px;width:auto;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.school-brand-copy{display:flex;flex-direction:column;line-height:1.05}
.school-brand-copy strong{font-size:1.05rem;letter-spacing:.06em}
.school-brand-copy span{color:var(--muted);font-size:.82rem;letter-spacing:.2em}
.hero-visual{position:relative;max-width:760px;margin:26px auto 0;padding:24px 24px 10px;border-radius:28px;background:radial-gradient(circle at 50% 40%, rgba(88,214,255,.10), transparent 48%),linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));border:1px solid rgba(136,176,220,.12);overflow:hidden}
.hero-visual::before,.hero-visual::after{content:"";position:absolute;border-radius:999px;filter:blur(30px);opacity:.55;pointer-events:none}
.hero-visual::before{width:180px;height:180px;left:6%;top:18%;background:rgba(88,214,255,.13)}
.hero-visual::after{width:170px;height:170px;right:4%;bottom:10%;background:rgba(124,241,200,.12)}
.brain-svg{display:block;width:min(100%,620px);height:auto;margin:0 auto;position:relative;z-index:1}
.hero-chip{position:absolute;z-index:2;padding:10px 14px;border-radius:999px;border:1px solid rgba(136,176,220,.18);background:rgba(10,23,41,.82);color:var(--text);font-size:.88rem;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.hero-chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));margin-right:8px;vertical-align:middle;box-shadow:0 0 14px rgba(88,214,255,.55)}
.chip-left{left:7%;top:17%}.chip-right{right:7%;top:20%}.chip-bottom{left:50%;bottom:12%;transform:translateX(-50%)}
@media (max-width: 980px){.school-brand-copy span{display:none}.hero-visual{padding-top:34px}.chip-left{left:2%;top:8%}.chip-right{right:2%;top:11%}.chip-bottom{bottom:4%}}
@media (max-width: 640px){.school-brand{gap:10px}.school-logo{height:34px;padding:4px 6px}.school-brand-copy strong{font-size:.92rem}.topbar-status{font-size:.78rem;padding:6px 10px}.hero-copy h1{margin-top:10px}.hero-subtitle{font-size:1.08rem}.hero-visual{padding:40px 8px 16px}.hero-chip{font-size:.76rem;padding:8px 10px}.chip-left{left:2%;top:4%}.chip-right{right:2%;top:18%}.chip-bottom{bottom:0}}

/* === 首頁 V3：首屏優先、SVG 校識別、精簡運算思維圖示 === */
.topbar{
  min-height:60px;
  padding:0 34px;
}
.school-brand{display:flex;align-items:center;min-width:0}
.school-brand-svg{display:block;width:330px;max-width:45vw;height:46px;object-fit:contain;object-position:left center}

.start-wrap{
  width:min(1180px,calc(100% - 34px));
  padding:24px 0 26px;
}
.hero-compact{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  align-items:center;
  gap:28px;
  min-height:160px;
  margin-bottom:18px;
  padding:16px 28px 14px;
  border:1px solid rgba(136,176,220,.12);
  border-radius:22px;
  background:
    radial-gradient(circle at 82% 45%,rgba(88,214,255,.08),transparent 34%),
    linear-gradient(145deg,rgba(17,36,59,.42),rgba(10,23,41,.28));
}
.compact-copy{text-align:left;max-width:none;margin:0}
.hero-copy h1{
  margin:5px 0 3px;
  font-size:clamp(2.15rem,4vw,3.55rem);
  line-height:1.04;
}
.hero-subtitle{font-size:1.15rem}
.hero-tagline{
  margin:9px 0 0;
  color:var(--muted);
  font-size:.93rem;
  letter-spacing:.04em;
}
.hero-symbol-wrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:140px;
}
.thinking-symbol{
  width:min(100%,330px);
  height:145px;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 10px 28px rgba(88,214,255,.12));
}

.start-grid{grid-template-columns:1.05fr .95fr;gap:18px}
.candidate-card,.ability-card{padding:20px 22px}
.section-title-row{margin-bottom:14px}
.section-title-row h2{font-size:1.2rem}
.form-grid{gap:10px}
.field{gap:5px}
.field input{padding:10px 12px;border-radius:11px}
.identity-message,.load-message{margin-top:10px;font-size:.82rem}
.wide-btn{margin-top:14px;padding:12px 16px}
.category-list{gap:7px}
.category-chip{padding:8px 10px;min-height:38px;border-radius:11px}
.category-chip span{font-size:.9rem}
.category-chip i{width:7px;height:7px}

/* 讓常見 1366x768 螢幕在不捲動時看到開始測驗按鈕 */
@media (min-width:981px) and (max-height:820px){
  .start-wrap{padding-top:16px;padding-bottom:18px}
  .hero-compact{min-height:132px;margin-bottom:14px;padding:10px 24px}
  .hero-symbol-wrap{min-height:118px}
  .thinking-symbol{height:120px;width:290px}
  .hero-copy h1{font-size:2.85rem}
  .hero-subtitle{font-size:1.02rem}
  .hero-tagline{font-size:.84rem;margin-top:6px}
  .candidate-card,.ability-card{padding:16px 18px}
  .section-title-row{margin-bottom:10px}
  .field input{padding:9px 11px}
  .identity-message,.load-message{margin-top:7px}
  .wide-btn{margin-top:10px;padding:10px 15px}
  .category-chip{min-height:34px;padding:6px 9px}
  .category-chip span{font-size:.84rem}
  footer{padding-top:14px;padding-bottom:16px}
}

@media (max-width:980px){
  .school-brand-svg{width:285px;max-width:60vw;height:42px}
  .hero-compact{grid-template-columns:1fr;gap:2px;text-align:center;padding:18px 20px 10px}
  .compact-copy{text-align:center}
  .hero-symbol-wrap{justify-content:center;min-height:112px}
  .thinking-symbol{height:112px;width:260px}
  .hero-tagline{font-size:.86rem}
}

@media (max-width:640px){
  .topbar{min-height:54px;padding:0 14px}
  .school-brand-svg{width:220px;max-width:65vw;height:36px}
  .topbar-status{font-size:.7rem;padding:5px 8px}
  .start-wrap{width:min(100% - 18px,1180px);padding:12px 0 18px}
  .hero-compact{padding:14px 12px 8px;margin-bottom:12px;border-radius:17px}
  .hero-copy h1{font-size:2.05rem}
  .hero-subtitle{font-size:.96rem}
  .hero-tagline{font-size:.75rem;line-height:1.5}
  .hero-symbol-wrap{min-height:90px}
  .thinking-symbol{height:92px;width:220px}
  .candidate-card,.ability-card{padding:16px}
}


/* ===== Homepage V5: layered avatar + animated dot field ===== */
.hero-compact{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(310px,430px);
  align-items:center;
  gap:18px;
  min-height:192px;
  margin-bottom:18px;
  padding:18px 28px 16px;
  border:1px solid rgba(136,176,220,.12);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(17,36,59,.48),rgba(10,23,41,.34));
}
.dot-field-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:.92;pointer-events:none;
}
.hero-compact > *:not(.dot-field-canvas){position:relative;z-index:1}
.compact-copy{max-width:560px; padding-left:4px}
.hero-tagline{max-width:33ch}
.hero-visual-cluster{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:158px;
}
.hero-avatar-stage{
  position:relative;
  width:min(100%,320px);
  aspect-ratio:1.18/1;
  transform-style:preserve-3d;
  perspective:1200px;
}
.avatar-glow{
  position:absolute; inset:14% 10% 8% 14%;
  background:radial-gradient(circle at 56% 42%, rgba(105,242,214,.28), rgba(88,214,255,.16) 34%, rgba(88,214,255,.06) 52%, transparent 70%);
  filter:blur(18px);
  animation:glowPulse 5.8s ease-in-out infinite;
}
.avatar-layer, .brain-overlay{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; transform-origin:52% 50%;
}
.avatar-base{
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.34));
  animation:avatarFloat 7.2s ease-in-out infinite;
}
.avatar-brain{
  clip-path:ellipse(31% 28% at 56% 27%);
  filter:brightness(1.18) saturate(1.12) drop-shadow(0 0 20px rgba(96,222,255,.34));
  opacity:.88;
  animation:brainParallax 7.2s ease-in-out infinite;
}
.avatar-spark{
  clip-path:ellipse(33% 31% at 56% 27%);
  mix-blend-mode:screen;
  opacity:.42;
  filter:blur(7px) brightness(1.65) saturate(1.35);
  animation:sparkPulse 4.4s ease-in-out infinite;
}
.brain-overlay{
  opacity:.94;
  animation:brainParallax 7.2s ease-in-out infinite reverse;
}
.overlay-lines path{stroke:rgba(152,226,255,.88);stroke-width:3}
.overlay-nodes circle{fill:#8ff0d2;filter:drop-shadow(0 0 8px rgba(111,246,221,.55))}
.hero-point-label{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; border:1px solid rgba(108,151,200,.22);
  background:rgba(8,20,35,.78); color:#eaf6ff; font-size:.86rem; font-weight:800; letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.hero-point-label::before{content:""; width:8px; height:8px; border-radius:50%; background:#5fd8ff; box-shadow:0 0 10px rgba(95,216,255,.72)}
.label-top{top:6px; left:50%; transform:translateX(-50%)}
.label-right{top:50%; right:-4px; transform:translateY(-50%)}
.label-bottom{bottom:6px; left:50%; transform:translateX(-50%)}

@keyframes avatarFloat{
  0%,100%{transform:translate3d(0,0,0) rotateY(0deg) rotateX(0deg) scale(1)}
  25%{transform:translate3d(4px,-3px,8px) rotateY(-2.6deg) rotateX(1deg) scale(1.012)}
  50%{transform:translate3d(0,-5px,0) rotateY(0deg) rotateX(-1deg) scale(1.006)}
  75%{transform:translate3d(-4px,-2px,8px) rotateY(2.8deg) rotateX(.6deg) scale(1.012)}
}
@keyframes brainParallax{
  0%,100%{transform:translate3d(0,0,20px) rotateY(0deg) scale(1)}
  25%{transform:translate3d(5px,-3px,35px) rotateY(-3.4deg) scale(1.018)}
  50%{transform:translate3d(0,-2px,22px) rotateY(0deg) scale(1.01)}
  75%{transform:translate3d(-5px,-2px,35px) rotateY(3.6deg) scale(1.018)}
}
@keyframes sparkPulse{
  0%,100%{opacity:.28; transform:scale(1)}
  50%{opacity:.58; transform:scale(1.022)}
}
@keyframes glowPulse{
  0%,100%{opacity:.42; transform:scale(1)}
  50%{opacity:.8; transform:scale(1.06)}
}

@media (min-width:981px) and (max-height:820px){
  .hero-compact{min-height:166px;padding:14px 24px 12px;gap:12px}
  .hero-visual-cluster{min-height:132px}
  .hero-avatar-stage{width:min(100%,278px)}
  .hero-copy h1{font-size:2.68rem}
  .hero-subtitle{font-size:1rem}
  .hero-tagline{font-size:.81rem;max-width:36ch}
  .hero-point-label{padding:6px 11px;font-size:.76rem}
}
@media (max-width:980px){
  .hero-compact{grid-template-columns:1fr;gap:10px;text-align:center;padding:16px 18px 12px}
  .compact-copy{text-align:center;max-width:none;padding-left:0}
  .hero-tagline{max-width:none;margin-left:auto;margin-right:auto}
  .hero-visual-cluster{min-height:160px}
  .label-right{right:10px}
}
@media (max-width:640px){
  .hero-compact{padding:14px 12px 12px;border-radius:17px}
  .hero-visual-cluster{min-height:138px}
  .hero-avatar-stage{width:min(100%,248px)}
  .hero-copy h1{font-size:2rem}
  .hero-subtitle{font-size:.95rem}
  .hero-tagline{font-size:.74rem}
  .hero-point-label{padding:5px 9px;font-size:.68rem;gap:6px}
  .hero-point-label::before{width:6px;height:6px}
  .label-right{right:0}
}

@media (prefers-reduced-motion: reduce){
  .avatar-base,.avatar-brain,.avatar-spark,.brain-overlay,.avatar-glow{animation:none !important}
}


/* ===== V5.1 quick fixes ===== */
.compact-copy{
  position:relative;
  z-index:3;
  isolation:isolate;
}
.compact-copy::before{
  content:"";
  position:absolute;
  inset:-16px -26px -16px -14px;
  z-index:-1;
  border-radius:24px;
  background:linear-gradient(90deg, rgba(3,11,22,.88) 0%, rgba(3,11,22,.72) 58%, rgba(3,11,22,.18) 86%, rgba(3,11,22,0) 100%);
  backdrop-filter:blur(2px);
}
.eyebrow,.hero-copy h1,.hero-subtitle,.hero-tagline{
  text-shadow:0 2px 12px rgba(0,0,0,.46), 0 0 2px rgba(0,0,0,.35);
}
.dot-field-canvas{opacity:.68}
.hero-visual-cluster{
  min-height:174px;
  padding-top:24px;
  padding-bottom:26px;
}
.hero-avatar-stage{width:min(100%,302px)}
.avatar-brain,
.avatar-spark,
.brain-overlay{
  clip-path:polygon(43% 6%, 53% 2%, 67% 4%, 79% 11%, 88% 24%, 89% 39%, 83% 51%, 75% 58%, 67% 61%, 61% 62%, 55% 61%, 49% 59%, 44% 54%, 40% 45%, 39% 34%, 39% 22%);
}
.avatar-brain{
  filter:brightness(1.12) saturate(1.08) drop-shadow(0 0 14px rgba(96,222,255,.26));
}
.avatar-spark{
  opacity:.34;
  filter:blur(6px) brightness(1.45) saturate(1.2);
}
.hero-point-label{z-index:4}
.label-top{top:-8px; left:54%; transform:translateX(-50%)}
.label-right{top:54%; right:-6px; transform:translateY(-50%)}
.label-bottom{bottom:-10px; left:56%; transform:translateX(-50%)}
@media (min-width:981px) and (max-height:820px){
  .hero-visual-cluster{min-height:146px;padding-top:18px;padding-bottom:22px}
  .hero-avatar-stage{width:min(100%,264px)}
  .label-top{top:-6px}
  .label-bottom{bottom:-8px}
}
@media (max-width:980px){
  .compact-copy::before{inset:-14px -10px -10px -10px;background:linear-gradient(180deg, rgba(3,11,22,.84) 0%, rgba(3,11,22,.68) 60%, rgba(3,11,22,.20) 100%)}
  .hero-visual-cluster{min-height:174px;padding-top:28px;padding-bottom:28px}
  .hero-avatar-stage{width:min(100%,286px)}
  .label-top{top:0;left:50%}
  .label-right{right:2px}
  .label-bottom{bottom:0;left:50%}
}
@media (max-width:640px){
  .compact-copy::before{inset:-10px -8px -10px -8px;border-radius:18px}
  .hero-visual-cluster{min-height:156px;padding-top:26px;padding-bottom:24px}
  .hero-avatar-stage{width:min(100%,240px)}
  .label-top{top:-2px}
  .label-bottom{bottom:-2px}
}


/* ===== V5.2 text readability cleanup ===== */
.compact-copy::before{
  display:none !important;
  background:none !important;
  backdrop-filter:none !important;
}
.eyebrow{
  color:#ffe680 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.35) !important;
}
.hero-copy h1,
.hero-subtitle,
.hero-tagline{
  text-shadow:0 2px 12px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.38) !important;
}


/* ===== V5.3 head motion + contained brain flow ===== */
.hero-avatar-stage{
  animation: avatarWholeFloat 7.2s ease-in-out infinite;
}
.avatar-glow{
  z-index:1;
  inset:14% 12% 10% 16%;
}
.avatar-base{
  z-index:2;
  animation:none !important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.34));
}
.brain-mask-wrap{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  -webkit-clip-path: polygon(
    45% 8%,
    53% 4%,
    64% 5%,
    75% 10%,
    83% 19%,
    86% 31%,
    85% 42%,
    80% 52%,
    72% 58%,
    63% 61%,
    55% 60%,
    48% 57%,
    43% 51%,
    40% 43%,
    39% 34%,
    39% 23%,
    42% 14%
  );
  clip-path: polygon(
    45% 8%,
    53% 4%,
    64% 5%,
    75% 10%,
    83% 19%,
    86% 31%,
    85% 42%,
    80% 52%,
    72% 58%,
    63% 61%,
    55% 60%,
    48% 57%,
    43% 51%,
    40% 43%,
    39% 34%,
    39% 23%,
    42% 14%
  );
}
.brain-flow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.flow-dot{
  fill: rgba(178,255,231,.95);
}
.flow-dot.s2,.flow-dot.s4,.flow-dot.s6,.flow-dot.s8{
  fill: rgba(97,221,255,.92);
}
/* disable old layered pieces if still present */
.avatar-brain,.avatar-spark,.brain-overlay{display:none !important}
@keyframes avatarWholeFloat{
  0%,100%{transform:translate3d(0,0,0) rotateY(0deg) rotateX(0deg) scale(1)}
  25%{transform:translate3d(4px,-3px,0) rotateY(-2deg) rotateX(0.8deg) scale(1.012)}
  50%{transform:translate3d(0,-5px,0) rotateY(0deg) rotateX(-0.8deg) scale(1.006)}
  75%{transform:translate3d(-4px,-2px,0) rotateY(2deg) rotateX(0.5deg) scale(1.012)}
}
@media (prefers-reduced-motion: reduce){
  .hero-avatar-stage{animation:none !important}
}


/* ===== V6 hero video ===== */
.hero-video-wrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:158px;
  overflow:hidden;
  border-radius:20px;
}
.hero-video{
  display:block;
  width:min(100%,360px);
  height:170px;
  object-fit:contain;
  object-position:center center;
  background:transparent;
  border:0;
  outline:0;
}
/* obsolete layered-head elements are no longer used */
.hero-visual-cluster,.hero-avatar-stage,.avatar-glow,.avatar-layer,.brain-mask-wrap,.brain-flow,.hero-point-label{display:none !important;}
@media (min-width:981px) and (max-height:820px){
  .hero-video-wrap{min-height:132px;}
  .hero-video{height:138px;width:min(100%,320px);}
}
@media (max-width:980px){
  .hero-video-wrap{min-height:150px;}
  .hero-video{height:150px;width:min(100%,330px);}
}
@media (max-width:640px){
  .hero-video-wrap{min-height:124px;}
  .hero-video{height:124px;width:min(100%,270px);}
}