:root {
  --ink: #0a1714;
  --muted: #66736f;
  --paper: #f4f7f2;
  --card: #ffffff;
  --forest: #071714;
  --forest-2: #0d2b24;
  --lime: #c8ff48;
  --lime-2: #a9ef25;
  --mint: #8ceacb;
  --red: #ef5d4d;
  --amber: #ffb84d;
  --blue: #3986ef;
  --line: rgba(10, 23, 20, .11);
  --shadow: 0 20px 60px rgba(10, 23, 20, .09);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --header-h: 76px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 999; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-140%); background: white; border-radius: 9px; }
.skip-link:focus { transform: none; }

.site-header {
  position: sticky; z-index: 100; top: 0; height: var(--header-h); padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
  color: white; background: rgba(7, 23, 20, .88); border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px); transition: background .3s ease, box-shadow .3s ease;
}
.site-header.light { color: var(--ink); background: rgba(244,247,242,.9); border-color: var(--line); box-shadow: 0 8px 30px rgba(10,23,20,.04); }
.brand { width: max-content; padding: 0; border: 0; display: flex; gap: 11px; align-items: center; background: none; font-size: 17px; font-weight: 600; cursor: pointer; }
.brand b { color: var(--lime-2); }
.brand-mark { width: 33px; height: 33px; position: relative; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 11px; transform: rotate(-2deg); }
.light .brand-mark { border-color: var(--line); }
.brand-mark i { position: absolute; width: 5px; height: 17px; background: var(--lime); border-radius: 10px; transform: rotate(29deg) translateX(-3px); }
.brand-mark i:last-child { transform: rotate(29deg) translateX(5px); height: 11px; }
.brand-mark.small { width: 28px; height: 28px; border-color: var(--line); }
.top-nav { display: flex; gap: 4px; padding: 5px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.light .top-nav { background: #fff; border-color: var(--line); }
.top-nav button { border: 0; padding: 8px 16px; border-radius: 10px; color: inherit; background: transparent; opacity: .75; cursor: pointer; transition: .2s ease; }
.top-nav button:hover, .top-nav button.active { opacity: 1; background: rgba(255,255,255,.13); }
.light .top-nav button:hover, .light .top-nav button.active { background: var(--paper); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.icon-button, .language-toggle, .menu-button { min-height: 39px; border: 1px solid rgba(255,255,255,.16); color: inherit; background: rgba(255,255,255,.06); border-radius: 12px; cursor: pointer; }
.light .icon-button, .light .language-toggle, .light .menu-button { border-color: var(--line); background: white; }
.icon-button { width: 40px; }
.icon-button.muted { opacity: .45; }
.language-picker { position: relative; }
.language-toggle { display: flex; gap: 2px; padding: 3px; }
.language-toggle span { min-width: 31px; padding: 6px 7px; border-radius: 8px; text-align: center; font-size: 12px; }
.language-toggle .active-lang { color: var(--ink); background: var(--lime); font-weight: 700; }
.language-toggle .lang-chevron { min-width: 22px; padding-inline: 3px; }
.language-menu { position: absolute; z-index: 120; top: calc(100% + 10px); right: 0; width: 235px; padding: 8px; display: none; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: rgba(255,255,255,.98); box-shadow: 0 22px 55px rgba(7,23,20,.2); backdrop-filter: blur(18px); }
.language-menu.open { display: grid; animation: pageIn .22s ease both; }
.language-menu button { padding: 10px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; border: 0; border-radius: 11px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.language-menu button:hover, .language-menu button.active { background: var(--paper); }
.language-menu b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e8eee9; font-size: 11px; }
.language-menu button.active b { background: var(--lime); }
.language-menu span { font-size: 13px; font-weight: 600; }
.language-menu i { color: var(--muted); font-size: 11px; font-style: normal; }
.menu-button { display: none; width: 40px; position: relative; }
.menu-button span { position: absolute; left: 11px; width: 18px; height: 1.5px; background: currentColor; }
.menu-button span:first-child { top: 15px; } .menu-button span:last-child { top: 22px; }

#app { min-height: 78vh; }
.page { animation: pageIn .52s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } }
.container { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #497067; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime-2); box-shadow: 0 0 0 5px rgba(169,239,37,.16); }
.display { margin: 20px 0; font-size: clamp(47px, 7vw, 94px); line-height: .96; letter-spacing: -.065em; }
.display em { color: var(--lime); font-style: normal; }
.section-title { margin: 12px 0 16px; font-size: clamp(32px, 4vw, 54px); line-height: 1.02; letter-spacing: -.045em; }
.lead { max-width: 650px; color: rgba(255,255,255,.64); font-size: clamp(16px, 2vw, 19px); line-height: 1.75; }
.lead.dark { color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 15px; cursor: pointer; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--lime); box-shadow: 0 13px 34px rgba(200,255,72,.2); }
.button.primary:hover { background: var(--lime-2); box-shadow: 0 16px 44px rgba(200,255,72,.28); }
.button.secondary { color: white; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.button.ink { color: white; background: var(--forest); }
.button.ghost { background: white; border: 1px solid var(--line); }
.button.small { min-height: 42px; padding: 0 16px; border-radius: 12px; font-size: 13px; }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.arrow { display: inline-block; transition: transform .2s ease; } .button:hover .arrow { transform: translateX(3px); }

/* Home */
.hero { position: relative; overflow: hidden; min-height: calc(100vh - var(--header-h)); color: white; background: var(--forest); }
.hero-grid { min-height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 50px; padding-block: 70px; }
.hero-copy { position: relative; z-index: 2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 52px; color: rgba(255,255,255,.55); font-size: 12px; }
.hero-proof strong { display: block; color: white; font-size: 18px; }
.hero-proof .divider { width: 1px; height: 38px; background: rgba(255,255,255,.15); }
.hero-visual { position: relative; min-height: 610px; }
.orbit { position: absolute; inset: 3% -18% auto auto; width: 620px; aspect-ratio: 1; border: 1px solid rgba(200,255,72,.16); border-radius: 50%; animation: rotate 26s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.orbit::before { inset: 12%; } .orbit::after { inset: 27%; }
.orbit-dot { position: absolute; top: 48%; left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 30px var(--lime); }
@keyframes rotate { to { transform: rotate(360deg); } }
.road-card { position: absolute; z-index: 2; inset: 72px 0 auto auto; width: min(100%, 535px); aspect-ratio: .94; overflow: hidden; border-radius: 38px; background: #17362e; box-shadow: 0 40px 90px rgba(0,0,0,.32); transform: rotate(2deg); }
.road-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 35%, rgba(0,0,0,.13)); pointer-events: none; }
.road-map { width: 100%; height: 100%; }
.road-map .car { transform-box: fill-box; transform-origin: center; animation: carDrive 8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes carDrive { 0% { transform: translate(-160px,120px) rotate(-4deg); } 44% { transform: translate(45px,80px) rotate(-4deg); } 50% { transform: translate(58px,68px) rotate(-32deg); } 100% { transform: translate(270px,-80px) rotate(-32deg); } }
.float-stat { position: absolute; z-index: 3; padding: 15px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 17px; color: white; background: rgba(9,32,27,.7); backdrop-filter: blur(14px); box-shadow: 0 15px 40px rgba(0,0,0,.18); animation: float 4s ease-in-out infinite; }
.float-stat b { display: block; font-size: 22px; color: var(--lime); }
.float-stat small { color: rgba(255,255,255,.65); }
.stat-one { left: -10px; top: 130px; } .stat-two { right: -15px; bottom: 80px; animation-delay: -1.7s; }
@keyframes float { 50% { transform: translateY(-10px); } }
.feature-strip { padding: 90px 0; background: var(--paper); }
.feature-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 44px; }
.feature-intro p { color: var(--muted); line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: 1.18fr .82fr .82fr; gap: 18px; }
.feature-card { position: relative; overflow: hidden; min-height: 290px; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; transition: transform .28s ease, box-shadow .28s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-card:first-child { color: white; background: var(--forest-2); border-color: transparent; }
.feature-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--lime); color: var(--ink); font-weight: 800; }
.feature-card h3 { margin: 70px 0 10px; font-size: 24px; letter-spacing: -.03em; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 14px; }
.feature-card:first-child p { color: rgba(255,255,255,.6); }
.mini-road { position: absolute; right: -20px; top: -10px; width: 190px; height: 110px; border-radius: 0 0 0 80px; border-bottom: 18px solid rgba(255,255,255,.1); transform: rotate(-12deg); }

/* Selector and dashboards */
.subpage-head { padding: 70px 0 45px; background: var(--forest); color: white; }
.subpage-head .container { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.subpage-head p { max-width: 560px; color: rgba(255,255,255,.58); line-height: 1.7; }
.choice-section { padding: 56px 0 100px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.exam-choice { position: relative; min-height: 390px; padding: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: white; text-align: left; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease; }
.exam-choice:hover:not(.locked) { transform: translateY(-6px); box-shadow: var(--shadow); }
.exam-choice.btt { color: white; background: var(--forest-2); }
.exam-choice .choice-code { font-size: clamp(72px,10vw,130px); line-height: 1; letter-spacing: -.08em; opacity: .1; position: absolute; right: 28px; top: 20px; }
.choice-meta { position: absolute; inset: auto 34px 32px; }
.choice-meta h2 { margin: 0 0 12px; font-size: 34px; letter-spacing: -.04em; }
.choice-meta p { max-width: 440px; margin: 0 0 25px; color: var(--muted); line-height: 1.65; }
.btt .choice-meta p { color: rgba(255,255,255,.62); }
.choice-chip { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: var(--lime); font-size: 12px; font-weight: 700; }
.choice-graphic { width: 170px; height: 100px; position: absolute; left: 32px; top: 42px; }
.choice-graphic .lane { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.16); border-radius: 90px 90px 0 0; border-bottom: 0; }
.choice-graphic .lane::after { content: ""; position: absolute; inset: 23px; border: 2px dashed rgba(200,255,72,.65); border-radius: 70px 70px 0 0; border-bottom: 0; }
.exam-choice.locked { cursor: default; opacity: .7; }
.lock-badge { position: absolute; top: 30px; left: 30px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 12px; }
.dashboard { padding: 48px 0 100px; }
.dashboard-top { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin-bottom: 34px; }
.dashboard-top h1 { margin: 8px 0 0; font-size: clamp(38px,6vw,66px); letter-spacing: -.055em; }
.dashboard-stat { display: flex; align-items: center; gap: 15px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.progress-ring { --p: 0; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--lime-2) calc(var(--p)*1%), #e7ece8 0); font-weight: 800; font-size: 12px; position: relative; }
.progress-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: white; }
.progress-ring span { position: relative; }
.chapter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.chapter-card { min-height: 220px; padding: 25px; display: grid; grid-template-columns: 64px 1fr auto; gap: 18px; align-items: start; text-align: left; border: 1px solid var(--line); border-radius: 22px; background: white; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.chapter-card:hover { transform: translateY(-4px); border-color: rgba(10,23,20,.25); box-shadow: var(--shadow); }
.chapter-index { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 17px; background: var(--paper); font-weight: 800; color: #64716d; }
.chapter-card.complete .chapter-index { color: var(--ink); background: var(--lime); }
.chapter-card h3 { margin: 4px 0 8px; font-size: 21px; letter-spacing: -.025em; }
.chapter-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
.chapter-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 21px; }
.tag { padding: 6px 9px; border-radius: 8px; background: var(--paper); color: #60706b; font-size: 11px; }
.chapter-time { white-space: nowrap; color: var(--muted); font-size: 12px; }

/* Learning article */
.lesson-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 44px; padding: 42px 0 100px; }
.lesson-sidebar { position: sticky; top: calc(var(--header-h) + 25px); height: fit-content; }
.back-link { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; }
.lesson-nav { margin-top: 28px; display: grid; gap: 5px; }
.lesson-nav button { display: grid; grid-template-columns: 27px 1fr; gap: 10px; padding: 11px 12px; border: 0; border-radius: 11px; background: none; text-align: left; color: var(--muted); cursor: pointer; font-size: 13px; }
.lesson-nav button:hover, .lesson-nav button.active { color: var(--ink); background: white; }
.lesson-nav i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #e4e9e5; font-style: normal; font-size: 10px; }
.lesson-nav button.done i { background: var(--lime); }
.lesson-article { min-width: 0; }
.lesson-hero { position: relative; overflow: hidden; min-height: 290px; padding: 42px; display: flex; flex-direction: column; justify-content: end; border-radius: var(--radius-xl); color: white; background: var(--forest-2); }
.lesson-hero::before { content: ""; position: absolute; width: 340px; height: 340px; right: -80px; top: -170px; border-radius: 50%; border: 65px solid rgba(200,255,72,.09); }
.lesson-hero h1 { position: relative; margin: 10px 0 8px; font-size: clamp(36px,6vw,62px); letter-spacing: -.055em; }
.lesson-hero p { position: relative; max-width: 670px; margin: 0; color: rgba(255,255,255,.62); line-height: 1.65; }
.lesson-body { max-width: 850px; padding: 20px 15px 0; }
.lesson-section { padding: 34px 0 10px; }
.lesson-section h2 { margin: 0 0 14px; font-size: 28px; letter-spacing: -.035em; }
.lesson-section p { color: #4e5d58; font-size: 16px; line-height: 1.85; }
.fact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 22px 0; }
.fact { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.fact b { display: block; margin-bottom: 6px; font-size: 21px; }
.fact span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.callout { margin: 22px 0; padding: 20px 22px; display: grid; grid-template-columns: 34px 1fr; gap: 13px; border-radius: 17px; background: #e8f7ee; border: 1px solid #cae8d5; }
.callout.warn { background: #fff5df; border-color: #f0dfb8; }
.callout.danger { background: #fff0ee; border-color: #f3d1cc; }
.callout-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: white; font-weight: 800; }
.callout strong { display: block; margin-bottom: 5px; }
.callout p { margin: 0; font-size: 14px; line-height: 1.6; }
.rule-list { display: grid; gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.rule-list li { position: relative; padding: 15px 18px 15px 47px; border: 1px solid var(--line); border-radius: 14px; background: white; color: #485651; line-height: 1.55; }
.rule-list li::before { content: "✓"; position: absolute; left: 16px; top: 14px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 800; }
.interactive-card { margin: 34px 0; overflow: hidden; border-radius: 25px; color: white; background: var(--forest); box-shadow: var(--shadow); }
.interactive-head { padding: 24px 26px 13px; display: flex; justify-content: space-between; gap: 20px; }
.interactive-head h3 { margin: 0 0 5px; font-size: 20px; }
.interactive-head p { margin: 0; color: rgba(255,255,255,.58); font-size: 13px; }
.demo-stage { min-height: 310px; position: relative; overflow: hidden; }
.demo-controls { padding: 15px 24px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.demo-button { padding: 9px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: white; background: rgba(255,255,255,.08); cursor: pointer; }
.demo-button.active { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.lesson-footer { margin-top: 45px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 22px; background: white; border: 1px solid var(--line); }
.lesson-trust-strip { margin: 14px 0 0; padding: 11px 15px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: white; }
.lesson-trust-strip span { padding: 5px 7px; border-radius: 7px; color: #52615a; background: #edf3ee; font-size: 8px; }
.lesson-trust-strip button { margin-left: auto; padding: 0; border: 0; color: var(--muted); background: none; font-size: 9px; text-decoration: underline; cursor: pointer; }
.animation-label { align-self: start; max-width: 210px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; color: rgba(255,255,255,.64); font-size: 10px; line-height: 1.35; text-align: right; }

/* Faithful crops from the supplied official handbook */
.manual-visuals { margin-top: 48px; padding-top: 42px; border-top: 1px solid var(--line); }
.manual-visuals-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 25px; }
.manual-visuals-head h2 { margin: 12px 0 8px; font-size: 28px; letter-spacing: -.035em; }
.manual-visuals-head p { max-width: 700px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.manual-count { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); font-size: 12px; }
.manual-page-list { display: grid; gap: 15px; }
.manual-page-group { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.manual-page-group > header { margin-bottom: 13px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.manual-page-group > header strong { font-size: 13px; }
.manual-page-group > header a { color: var(--muted); font-size: 11px; }
.manual-figure-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; align-items: stretch; }
.manual-teaching-card { min-width: 0; display: grid; grid-template-rows: 185px 1fr; overflow: hidden; border: 1px solid #e3e9e4; border-radius: 16px; background: #fbfcfa; }
.manual-figure { position: relative; min-width: 0; min-height: 110px; padding: 16px; display: grid; place-items: center; overflow: hidden; border: 0; border-bottom: 1px solid #e6ebe7; border-radius: 0; background: white; cursor: zoom-in; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.manual-figure:hover { z-index: 1; transform: translateY(-2px); border-color: #aab8b1; box-shadow: 0 12px 28px rgba(10,23,20,.09); }
.manual-figure img { display: block; max-width: 100%; width: auto; height: auto; max-height: 155px; object-fit: contain; }
.manual-figure > span { position: absolute; right: 6px; bottom: 6px; padding: 3px 5px; border-radius: 6px; color: white; background: rgba(7,23,20,.7); font-size: 9px; }
.manual-explanation { padding: 16px; display: flex; flex-direction: column; }
.manual-explanation > small { color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.manual-explanation h3 { margin: 7px 0; font-size: 15px; line-height: 1.45; }
.official-explanation { margin: 0 0 13px; color: #4e5c56; font-size: 11px; line-height: 1.65; }
.study-cue { margin-top: auto; padding: 12px; border-radius: 11px; background: #eef6ef; }
.study-cue b { display: block; margin-bottom: 4px; color: var(--forest); font-size: 9px; }
.study-cue p { margin: 0; color: #53625a; font-size: 10px; line-height: 1.55; }
.image-lightbox { position: fixed; z-index: 1000; inset: 0; padding: 65px 24px 28px; display: none; place-items: center; color: white; background: rgba(3,12,10,.9); backdrop-filter: blur(16px); }
.image-lightbox.open { display: grid; grid-template-rows: minmax(0,1fr) auto; }
.image-lightbox img { max-width: min(1120px,94vw); max-height: calc(100vh - 125px); width: auto; height: auto; object-fit: contain; border-radius: 8px; background: white; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.lightbox-close { position: absolute; right: 22px; top: 18px; width: 43px; height: 43px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: white; background: rgba(255,255,255,.08); cursor: pointer; font-size: 26px; }
.lightbox-meta { padding-top: 13px; color: rgba(255,255,255,.68); font-size: 12px; }

/* Demos */
.follow-road { position: absolute; inset: 40px -30px; background: #35413d; transform: rotate(-3deg); }
.follow-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dashed rgba(255,255,255,.4); }
.demo-car { position: absolute; top: calc(50% - 27px); width: 76px; height: 45px; border-radius: 23px 18px 12px 12px; background: var(--lime); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.demo-car::before, .demo-car::after { content: ""; position: absolute; bottom: -6px; width: 14px; height: 11px; background: #050807; border-radius: 50%; }
.demo-car::before { left: 12px; } .demo-car::after { right: 12px; }
.demo-car.lead-car { left: 62%; background: #edf2ee; animation: leadDrive 5s ease-in-out infinite; }
.demo-car.follow-car { left: 18%; animation: followDrive 5s ease-in-out infinite; }
@keyframes leadDrive { 50% { transform: translateX(52px); } }
@keyframes followDrive { 50% { transform: translateX(20px); } }
.count-marker { position: absolute; top: 65px; left: 43%; color: var(--lime); font-size: 40px; font-weight: 800; }
.count-label { position: absolute; bottom: 46px; left: 39%; color: rgba(255,255,255,.64); }
.roundabout { position: absolute; width: 230px; height: 230px; left: 50%; top: 48%; transform: translate(-50%,-50%); border: 47px solid #3e4a46; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), 0 0 0 3px rgba(255,255,255,.15); }
.roundabout::before { content: ""; position: absolute; inset: 25px; border-radius: 50%; background: #1b5f42; }
.roundabout-road { position: absolute; width: 100%; height: 70px; left: 0; top: calc(50% - 35px); background: #3e4a46; }
.roundabout-road.vertical { transform: rotate(90deg); }
.round-car { position: absolute; z-index: 2; width: 42px; height: 24px; left: calc(50% - 21px); top: calc(50% + 65px); border-radius: 12px 9px 7px 7px; background: var(--lime); transform-origin: 21px -65px; animation: circleCar 6s ease-in-out infinite; }
@keyframes circleCar { 0%,12% { transform: rotate(0deg); } 72%,100% { transform: rotate(-270deg); } }
.giveway-label { position: absolute; right: 22px; bottom: 20px; padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.75); }
.box-stage { background: repeating-linear-gradient(90deg,#3c4743 0 58px,#f2f2f0 59px 62px); }
.yellow-box { position: absolute; width: 230px; height: 230px; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 5px solid #ffd11a; background: repeating-linear-gradient(45deg, transparent 0 23px,#ffd11a 24px 27px), repeating-linear-gradient(-45deg,transparent 0 23px,#ffd11a 24px 27px),#3b4642; }
.box-car { position: absolute; width: 54px; height: 31px; left: 14%; top: calc(50% - 15px); border-radius: 14px 10px 8px 8px; background: var(--lime); animation: boxBlocked 5s ease-in-out infinite; }
@keyframes boxBlocked { 0%,18% { left: 14%; } 48%,100% { left: calc(50% - 96px); } }
.box-x { position: absolute; left: calc(50% - 16px); top: 32px; font-size: 34px; color: var(--red); animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.14); } }
.signal-stage { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%,#163f35,#071714); }
.signal-unit { width: 92px; padding: 12px; display: grid; gap: 8px; border-radius: 25px; background: #17211f; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.signal-light { aspect-ratio: 1; border-radius: 50%; background: #27302e; border: 4px solid #0b100f; }
.signal-light.red.on { background: #ff473d; box-shadow: 0 0 38px rgba(255,71,61,.85); }
.signal-light.amber.on { background: #ffc23e; box-shadow: 0 0 38px rgba(255,194,62,.8); }
.signal-light.green.on { background: #75ed78; box-shadow: 0 0 38px rgba(117,237,120,.8); }
.signal-copy { position: absolute; left: 25px; bottom: 22px; right: 25px; text-align: center; color: rgba(255,255,255,.68); font-size: 13px; }
.sign-wall { min-height: 380px; padding: 28px; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; background: #f4f7f2; }
.sign-tile { min-height: 140px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 13px; border-radius: 16px; color: var(--ink); background: white; border: 1px solid var(--line); text-align: center; font-size: 11px; }
.sign-tile.official { cursor: pointer; }
.sign-tile.official img { width: 74px; height: 74px; object-fit: contain; }
.sign-tile.official b { min-height: 28px; display: grid; place-items: center; line-height: 1.3; }
.sign-tile.official.revealed { border-color: var(--forest); background: #eff7ef; }
.road-sign { position: relative; display: grid; place-items: center; width: 62px; height: 62px; flex: none; color: #111; font-weight: 800; }
.road-sign.circle { border: 6px solid #e62d37; border-radius: 50%; background: white; }
.road-sign.blue { border: 0; border-radius: 50%; background: #1d8bd5; color: white; }
.road-sign.triangle { width: 0; height: 0; border-left: 37px solid transparent; border-right: 37px solid transparent; border-bottom: 66px solid #e62d37; }
.road-sign.triangle::before { content: ""; position: absolute; left: -28px; top: 11px; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 50px solid white; }
.road-sign.triangle span { position: absolute; z-index: 1; top: 28px; transform: translateX(-50%); }
.road-sign.stop { width: 68px; height: 68px; clip-path: polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); background: #e62d37; color: white; font-size: 13px; }
.road-sign.info { border-radius: 7px; background: #168fc6; color: white; }
.road-sign.work { transform: rotate(45deg); border: 4px solid #111; background: #f5a623; }
.road-sign.work span { transform: rotate(-45deg); }
.road-sign .slash { position: absolute; width: 6px; height: 62px; background: #e62d37; transform: rotate(-43deg); }

/* Practice */
.practice-hero { padding: 58px 0 44px; color: white; background: var(--forest); }
.practice-hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
.practice-count { width: 165px; height: 165px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: rgba(255,255,255,.55); text-align: center; }
.practice-count strong { display: block; color: var(--lime); font-size: 45px; line-height: 1; }
.practice-main { padding: 45px 0 95px; }
.practice-modes { display: grid; grid-template-columns: 1.3fr .7fr; gap: 15px; margin-bottom: 38px; }
.mode-card { position: relative; min-height: 175px; overflow: hidden; padding: 25px; border: 1px solid var(--line); border-radius: 22px; background: white; text-align: left; cursor: pointer; transition: .25s ease; }
.mode-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mode-card.mock { color: white; background: var(--forest-2); }
.mode-card h3 { margin: 36px 0 7px; font-size: 22px; }
.mode-card p { margin: 0; color: var(--muted); font-size: 13px; }
.mode-card.mock p { color: rgba(255,255,255,.6); }
.mode-icon { position: absolute; top: 22px; right: 23px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--lime); color: var(--ink); font-weight: 800; }
.category-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; }
.category-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.category-card { min-height: 160px; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: white; text-align: left; cursor: pointer; transition: .25s ease; }
.category-card:hover, .category-card.selected { border-color: var(--forest); transform: translateY(-2px); }
.category-card.selected { box-shadow: inset 0 0 0 1px var(--forest); }
.category-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--paper); }
.category-card h4 { margin: 23px 0 5px; font-size: 15px; }
.category-card span { color: var(--muted); font-size: 11px; }
.practice-bar { position: sticky; bottom: 16px; z-index: 20; margin-top: 30px; padding: 14px 15px 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: white; background: rgba(7,23,20,.94); backdrop-filter: blur(16px); border-radius: 18px; box-shadow: 0 18px 55px rgba(7,23,20,.25); }
.question-count-control { display: flex; gap: 6px; }
.question-count-control button { padding: 8px 12px; color: white; background: transparent; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; cursor: pointer; }
.question-count-control button.active { color: var(--ink); background: var(--lime); border-color: var(--lime); }

/* Informed-consent gates */
.consent-page { min-height: calc(100vh - var(--header-h)); padding: 70px 0 100px; background: linear-gradient(145deg,#edf2ec,#f8f9f6); }
.consent-wrap { width: min(880px,calc(100% - 40px)); }
.consent-wrap > header { max-width: 760px; margin-bottom: 30px; }
.consent-wrap > header h1 { margin: 13px 0 15px; font-size: clamp(38px,5.5vw,62px); line-height: 1.03; letter-spacing: -.055em; }
.consent-wrap > header p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.consent-card { padding: 31px; border: 1px solid var(--line); border-radius: 26px; background: white; box-shadow: var(--shadow); }
.consent-source { padding-bottom: 23px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.ai-seal { width: 52px; height: 52px; display: grid; place-items: center; flex: none; border-radius: 16px; color: var(--forest); background: var(--lime); font-weight: 900; letter-spacing: -.04em; }
.consent-source small,.consent-source strong { display: block; }
.consent-source small { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.consent-source strong { font-size: 14px; }
.risk-block { margin: 24px 0 17px; padding: 21px; display: grid; grid-template-columns: 35px 1fr; gap: 14px; border: 1px solid #efd6ad; border-radius: 17px; background: #fff7e9; }
.risk-block > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #6a430b; background: #ffd994; font-weight: 900; }
.risk-block h2 { margin: 0 0 7px; font-size: 16px; }
.risk-block p,.liability-copy { margin: 0; color: #665d50; font-size: 12px; line-height: 1.75; }
.liability-copy { padding: 0 3px 22px; color: var(--muted); }
.consent-check { padding: 17px; display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; border: 1px solid #bfc9c2; border-radius: 15px; background: #f8faf7; cursor: pointer; }
.consent-check input { position: absolute; opacity: 0; pointer-events: none; }
.consent-check i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #aab7af; border-radius: 7px; background: white; font-style: normal; }
.consent-check input:checked + i { color: var(--forest); border-color: var(--lime-2); background: var(--lime); }
.consent-check input:checked + i::after { content: "✓"; font-weight: 900; }
.consent-check input:focus-visible + i { outline: 3px solid rgba(57,134,239,.25); }
.consent-check span { font-size: 13px; line-height: 1.6; }
.consent-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consent-actions .button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.consent-actions a { margin-left: auto; color: var(--muted); font-size: 10px; text-decoration: underline; }

/* Practical licence guide */
.guide-page { padding-bottom: 105px; background: #f3f5f1; }
.guide-page h1,.guide-page h2,.guide-page h3,.guide-page p,.guide-page span,.guide-page small { overflow-wrap: anywhere; }
.guide-hero { overflow: hidden; padding: 70px 0 62px; color: white; background: var(--forest); }
.guide-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 75px; align-items: center; }
.guide-hero h1 { max-width: 820px; margin: 18px 0; font-size: clamp(42px,6.4vw,82px); line-height: .98; letter-spacing: -.06em; }
.guide-hero p { max-width: 735px; margin: 0; color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.75; }
.guide-verified { width: fit-content; max-width: 100%; margin-top: 25px; padding: 9px 13px; display: flex; gap: 9px; align-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); font-size: 11px; line-height: 1.45; }
.guide-verified i { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: var(--forest); background: var(--lime); font-style: normal; font-weight: 800; }
.guide-cover { position: relative; margin: 0; padding: 13px; transform: rotate(2.5deg); border-radius: 19px; background: white; box-shadow: 0 32px 70px rgba(0,0,0,.35); }
.guide-cover::before { content: ""; position: absolute; z-index: -1; inset: 18px -20px -18px 20px; border: 1px solid rgba(200,255,72,.4); border-radius: inherit; }
.guide-cover img { width: 100%; display: block; border-radius: 10px; }
.guide-cover figcaption { padding: 10px 5px 1px; color: #5c6762; font-size: 9px; line-height: 1.4; text-align: center; }
.guide-content { display: grid; gap: 18px; padding-top: 28px; }
.guide-section { padding: 34px; border: 1px solid var(--line); border-radius: 25px; background: white; }
.guide-heading { margin-bottom: 26px; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 16px; align-items: start; }
.guide-heading > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--forest); background: var(--lime); font-size: 12px; font-weight: 800; }
.guide-heading h2 { margin: 1px 0 7px; font-size: 26px; letter-spacing: -.035em; }
.guide-heading p { max-width: 850px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.guide-heading.split { grid-template-columns: 42px minmax(0,1fr) 210px; }
.guide-progress { align-self: center; }
.guide-progress strong { display: block; margin-bottom: 9px; font-size: 13px; text-align: right; }
.guide-progress > div { height: 7px; overflow: hidden; border-radius: 99px; background: #e7ece7; }
.guide-progress i { display: block; height: 100%; border-radius: inherit; background: var(--lime-2); transition: width .4s ease; }
.licence-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.licence-choice { min-height: 145px; padding: 24px; display: grid; grid-template-columns: auto 85px 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: #f8faf7; text-align: left; cursor: pointer; transition: .22s ease; }
.licence-choice:hover { transform: translateY(-2px); border-color: #a3b1aa; }
.licence-choice.selected { border-color: var(--forest); background: #edf7ef; box-shadow: inset 0 0 0 1px var(--forest); }
.licence-choice > span { writing-mode: vertical-rl; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }
.licence-choice > strong { font-size: 55px; line-height: 1; letter-spacing: -.07em; }
.licence-choice div b,.licence-choice div small { display: block; }
.licence-choice div b { margin-bottom: 7px; }
.licence-choice div small { color: var(--muted); line-height: 1.45; }
.licence-choice > i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #cbd4ce; border-radius: 50%; color: transparent; font-style: normal; }
.licence-choice.selected > i { color: var(--forest); border-color: var(--lime-2); background: var(--lime); }
.guide-timeline { display: grid; gap: 9px; }
.guide-step { width: 100%; padding: 20px 21px; display: grid; grid-template-columns: 39px 1fr auto; gap: 17px; align-items: start; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: white; text-align: left; cursor: pointer; transition: .2s ease; }
.guide-step:hover { transform: translateX(3px); border-color: #a7b4ad; }
.guide-step > span { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #cfd8d2; border-radius: 50%; font-size: 12px; font-weight: 800; }
.guide-step.complete { border-color: #b9ddc6; background: #f0faf3; }
.guide-step.complete > span { color: white; border-color: var(--lime-2); background: var(--lime-2); }
.guide-step small { color: #98a29d; font-size: 9px; letter-spacing: .15em; }
.guide-step h3 { margin: 4px 0 5px; font-size: 17px; }
.guide-step p { max-width: 900px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.guide-step > i { align-self: center; color: var(--muted); font-size: 10px; font-style: normal; }
.fee-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }
.fee-card { min-height: 164px; padding: 20px; display: flex; flex-direction: column; border-radius: 17px; color: white; background: var(--forest-2); }
.fee-card span { min-height: 36px; color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.4; }
.fee-card strong { margin: 15px 0 8px; color: var(--lime); font-size: 34px; letter-spacing: -.04em; }
.fee-card small { margin-top: auto; color: rgba(255,255,255,.5); line-height: 1.45; }
.inline-official { margin-top: 16px; display: inline-block; color: var(--forest); font-size: 11px; font-weight: 700; }
.centre-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.centre-card { min-height: 190px; padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); transition: .22s ease; }
.centre-card:hover { transform: translateY(-3px); border-color: var(--forest); box-shadow: 0 14px 35px rgba(7,23,20,.08); }
.centre-card > span { width: fit-content; padding: 6px 8px; border-radius: 8px; color: var(--forest); background: var(--lime); font-size: 10px; font-weight: 800; }
.centre-card h3 { margin: 25px 0 7px; font-size: 17px; }
.centre-card p { margin: 0; color: var(--muted); font-size: 12px; }
.centre-card > i { margin-top: auto; color: var(--forest); font-size: 10px; font-style: normal; font-weight: 700; }
.guide-lower-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.guide-heading.compact { margin-bottom: 20px; }
.check-item { width: 100%; padding: 13px 0; display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: center; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.check-item i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #bec9c2; border-radius: 7px; font-style: normal; }
.check-item.checked { color: #76817b; text-decoration: line-through; }
.check-item.checked i { color: white; border-color: var(--lime-2); background: var(--lime-2); text-decoration: none; }
.check-item span { font-size: 12px; line-height: 1.45; }
.text-button { margin-top: 18px; padding: 0; border: 0; color: var(--muted); background: none; font-size: 10px; text-decoration: underline; cursor: pointer; }
.guide-foreign { color: white; background: var(--forest); border-color: var(--forest); }
.guide-foreign .guide-heading h2 { color: white; }
.guide-foreign > p { margin: 0 0 25px; color: rgba(255,255,255,.63); font-size: 13px; line-height: 1.75; }
.guide-foreign .button { color: white; border-color: rgba(255,255,255,.24); }
.official-link-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.official-link-grid a { min-height: 70px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); font-size: 12px; font-weight: 700; transition: .2s ease; }
.official-link-grid a:hover { color: var(--forest); border-color: var(--forest); background: #f3f9f4; }
.official-link-grid i { color: var(--muted); font-style: normal; }

/* Quiz */
.quiz-shell { min-height: calc(100vh - var(--header-h)); padding: 34px 0 70px; background: #eef2ed; }
.quiz-top { width: min(1120px,calc(100% - 40px)); margin: 0 auto 22px; display: grid; grid-template-columns: 1fr auto auto auto; gap: 15px; align-items: center; }
.quiz-progress { height: 8px; border-radius: 99px; overflow: hidden; background: #dce3dd; }
.quiz-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lime-2); transition: width .35s ease; }
.quiz-timer { min-width: 95px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: white; text-align: center; font-variant-numeric: tabular-nums; }
.quiz-card { width: min(820px,calc(100% - 40px)); min-height: 530px; margin: auto; padding: 34px; border-radius: 28px; background: white; box-shadow: var(--shadow); }
.mock-quiz-layout { width: min(1120px,calc(100% - 40px)); margin: auto; display: grid; grid-template-columns: minmax(0,1fr) 285px; gap: 18px; align-items: start; }
.mock-quiz-layout .quiz-card { width: 100%; }
.question-meta { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 12px; }
.question-number { color: var(--ink); font-weight: 700; }
.question-trust { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 7px; }
.question-trust span { padding: 5px 8px; border-radius: 7px; color: #59665f; background: #eef2ee; font-size: 9px; }
.question-trust button { width: 23px; height: 23px; border: 1px solid #d2dad4; border-radius: 50%; color: var(--muted); background: white; cursor: pointer; font-size: 10px; }
.question-text { margin: 28px 0; font-size: clamp(22px,3.3vw,32px); line-height: 1.35; letter-spacing: -.03em; }
.question-visual { min-height: 150px; margin: -5px 0 23px; display: grid; place-items: center; border-radius: 19px; background: var(--paper); }
.official-question-visual { width: 100%; padding: 18px; border: 1px solid var(--line); cursor: zoom-in; }
.official-question-visual img { max-width: 280px; max-height: 180px; object-fit: contain; }
.official-question-visual span { margin-top: 8px; color: var(--muted); font-size: 9px; }
.answers { display: grid; gap: 10px; }
.answer { width: 100%; min-height: 59px; padding: 13px 16px; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: white; text-align: left; cursor: pointer; transition: .18s ease; }
.answer:hover:not(:disabled) { border-color: #7f9089; transform: translateX(3px); }
.answer-key { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--paper); font-size: 12px; font-weight: 700; }
.answer.correct { border-color: #43a76e; background: #effaf3; }
.answer.correct .answer-key { color: white; background: #43a76e; }
.answer.wrong { border-color: var(--red); background: #fff2ef; }
.answer.wrong .answer-key { color: white; background: var(--red); }
.answer.selected { border-color: var(--forest); background: #eef7ef; box-shadow: inset 0 0 0 1px var(--forest); }
.answer.selected .answer-key { color: var(--forest); background: var(--lime); }
.answer:disabled { cursor: default; }
.answer-feedback { margin-top: 18px; padding: 17px 19px; border-radius: 14px; background: #eef7f1; color: #355246; line-height: 1.6; font-size: 14px; animation: pageIn .3s ease both; }
.answer-feedback.wrong { background: #fff3e8; color: #654832; }
.quiz-actions { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.quiz-step-actions { display: flex; gap: 8px; align-items: center; }
.flag-button { border: 0; background: none; color: var(--muted); cursor: pointer; }
.exam-navigator { position: sticky; top: calc(var(--header-h) + 18px); padding: 21px; border: 1px solid var(--line); border-radius: 21px; background: white; box-shadow: var(--shadow); }
.exam-navigator > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exam-navigator h2 { margin: 0; font-size: 17px; }
.exam-navigator > div:first-child span { color: var(--muted); font-size: 11px; }
.exam-status { margin: 15px 0; display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 8px; }
.exam-status span { display: flex; gap: 4px; align-items: center; }
.exam-status i { width: 8px; height: 8px; border: 1px solid #bdc8c1; border-radius: 3px; }
.exam-status i.answered { border-color: var(--forest); background: var(--forest); }
.exam-status i.flagged { border-color: var(--amber); background: var(--amber); }
.question-map { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.question-map button { aspect-ratio: 1; padding: 0; border: 1px solid #d6ddd8; border-radius: 8px; color: #68746e; background: #f8faf8; cursor: pointer; font-size: 10px; }
.question-map button.answered { color: white; border-color: var(--forest); background: var(--forest); }
.question-map button.flagged { box-shadow: inset 0 -4px 0 var(--amber); }
.question-map button.current { outline: 3px solid rgba(169,239,37,.55); outline-offset: 1px; }
.exam-submit { width: 100%; margin-top: 17px; }
.exam-navigator > small { display: block; margin-top: 10px; color: var(--muted); text-align: center; font-size: 9px; }
.exam-submit-dialog { position: fixed; z-index: 1200; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(3,12,10,.75); backdrop-filter: blur(12px); }
.exam-submit-dialog > div { width: min(460px,100%); padding: 30px; border-radius: 24px; background: white; box-shadow: 0 35px 90px rgba(0,0,0,.32); }
.exam-submit-dialog h2 { margin: 20px 0 8px; font-size: 27px; }
.exam-submit-dialog p { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
.exam-submit-dialog > div > div { display: flex; justify-content: flex-end; gap: 9px; }

/* Results / progress */
.result-page { padding: 55px 0 100px; }
.result-hero { padding: 42px; display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; border-radius: var(--radius-xl); color: white; background: var(--forest); }
.result-score { width: 155px; height: 155px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--lime) var(--score),rgba(255,255,255,.1) 0); position: relative; }
.result-score::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--forest); }
.result-score strong { position: relative; font-size: 39px; }
.result-copy h1 { margin: 0 0 8px; font-size: 38px; letter-spacing: -.04em; }
.result-copy p { margin: 0; color: rgba(255,255,255,.6); }
.result-status { width: fit-content; margin-bottom: 10px; padding: 6px 9px; display: block; border-radius: 8px; color: var(--ink); background: var(--lime); font-size: 10px; font-weight: 800; }
.result-status.fail { color: white; background: var(--red); }
.result-grid { margin-top: 20px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.panel { padding: 27px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.panel h2 { margin: 0 0 20px; font-size: 21px; }
.breakdown-row { display: grid; grid-template-columns: 120px 1fr 45px; align-items: center; gap: 13px; margin: 14px 0; font-size: 13px; }
.bar { height: 8px; background: #e6ece7; border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--lime-2); }
.insight { padding: 16px; border-radius: 14px; background: var(--paper); margin-bottom: 10px; }
.insight strong { display: block; margin-bottom: 5px; }
.insight p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.answer-review { margin-top: 20px; padding: 27px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.answer-review-head { margin-bottom: 15px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.answer-review-head h2 { margin: 0; }
.answer-review-head p { margin: 0; color: var(--muted); font-size: 10px; }
.review-item { border-bottom: 1px solid var(--line); }
.review-item summary { padding: 15px 4px; display: grid; grid-template-columns: 32px 1fr 24px; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.review-item summary::-webkit-details-marker { display: none; }
.review-item summary > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--paper); font-size: 10px; }
.review-item summary strong,.review-item summary small { display: block; }
.review-item summary strong { font-size: 12px; line-height: 1.45; }
.review-item summary small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.review-item summary > i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--red); font-style: normal; }
.review-item.correct summary > i { background: #43a76e; }
.review-body { margin: 0 0 18px 48px; padding: 17px; border-radius: 13px; background: var(--paper); font-size: 12px; line-height: 1.65; }
.review-body p { margin: 0 0 7px; }
.review-body > div { margin: 12px 0; }
.review-body > small { color: var(--muted); }

/* Exam setup */
.exam-setup { min-height: calc(100vh - var(--header-h)); padding: 68px 0 100px; background: #edf2ed; }
.exam-setup-grid { display: grid; grid-template-columns: minmax(0,1fr) 365px; gap: 60px; align-items: center; }
.exam-setup h1 { max-width: 760px; margin: 15px 0; font-size: clamp(44px,6vw,74px); line-height: 1; letter-spacing: -.06em; }
.exam-setup-grid > div > p { max-width: 750px; color: var(--muted); line-height: 1.75; }
.exam-rule-grid { margin: 27px 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.exam-rule-grid div { min-height: 105px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.exam-rule-grid strong,.exam-rule-grid span { display: block; }
.exam-rule-grid strong { font-size: 34px; letter-spacing: -.05em; }
.exam-rule-grid span { margin-top: 8px; color: var(--muted); font-size: 9px; }
.exam-setup ul { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; }
.exam-setup li { position: relative; padding: 12px 12px 12px 34px; border-radius: 12px; background: rgba(255,255,255,.6); font-size: 11px; line-height: 1.5; }
.exam-setup li::before { content:"✓"; position:absolute; left:12px; color:#398d5d; font-weight:800; }
.exam-setup-actions { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 10px; }
.exam-source-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px; }
.exam-source-links a,.exam-source-links button { padding: 0; border: 0; color: var(--muted); background: none; font-size: 9px; text-decoration: underline; cursor: pointer; }
.exam-setup aside { padding: 27px; border-radius: 28px; color: white; background: var(--forest); box-shadow: 0 30px 70px rgba(7,23,20,.22); }
.mock-clock { display: block; margin-bottom: 22px; color: var(--lime); font-size: 48px; font-weight: 800; letter-spacing: -.05em; text-align: center; }
.mock-sheet { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.mock-sheet i { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; color: rgba(255,255,255,.5); font-size: 9px; font-style: normal; }
.mock-sheet i.answered { color: var(--forest); border-color: var(--lime); background: var(--lime); }
.exam-setup aside small { margin-top: 18px; display: block; color: rgba(255,255,255,.5); font-size: 8px; text-align: center; }

/* Search, glossary and sign atlas */
.library-page { min-height: 80vh; padding-bottom: 100px; background: #f2f5f1; }
.library-page h1,.library-page h2,.library-page h3,.library-page p,.trust-page h1,.trust-page h2,.trust-page p,.exam-setup h1,.exam-setup p { overflow-wrap: anywhere; }
.library-hero { padding: 55px 0 0; color: white; background: var(--forest); }
.library-hero h1 { max-width: 780px; margin: 14px 0; font-size: clamp(42px,6vw,72px); line-height: 1; letter-spacing: -.055em; }
.library-hero p { margin: 0; color: rgba(255,255,255,.6); }
.library-hero nav { margin-top: 38px; display: flex; gap: 4px; }
.library-hero nav button { padding: 14px 19px; border: 0; border-radius: 13px 13px 0 0; color: rgba(255,255,255,.6); background: rgba(255,255,255,.07); cursor: pointer; }
.library-hero nav button.active { color: var(--ink); background: #f2f5f1; }
.library-body { padding-top: 31px; }
.library-search { height: 70px; padding: 0 21px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 19px; background: white; box-shadow: var(--shadow); }
.library-search > span { font-size: 27px; }
.library-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 17px; }
.library-search kbd { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--paper); }
.search-results { margin-top: 20px; }
.library-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.library-overview button { min-height: 165px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; border: 1px solid var(--line); border-radius: 20px; background: white; cursor: pointer; text-align: left; transition: .2s ease; }
.library-overview button:hover { transform: translateY(-3px); border-color: var(--forest); }
.library-overview strong { color: var(--forest); font-size: 42px; }
.library-overview span { color: var(--muted); font-size: 12px; }
.search-summary { margin: 5px 0 14px; display: flex; gap: 7px; align-items: baseline; }
.search-summary strong { font-size: 25px; }
.search-summary span { color: var(--muted); font-size: 11px; }
.unified-results { display: grid; gap: 9px; }
.search-result { min-height: 95px; padding: 17px; display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: white; }
.search-result > div > span { color: #607068; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.search-result h3 { margin: 6px 0 4px; font-size: 15px; }
.search-result p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.search-result > i { font-style: normal; }
.search-result.sign-result { grid-template-columns: 90px 1fr; }
.search-result.sign-result > button { width: 80px; height: 65px; border: 0; background: #f6f8f5; cursor: zoom-in; }
.search-result.sign-result img { max-width: 100%; max-height: 100%; object-fit: contain; }
.empty-result { padding: 40px; color: var(--muted); text-align: center; }
.empty-result.hidden { display: none; }
.library-section-head { margin-bottom: 21px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.library-section-head h2 { margin: 0 0 5px; font-size: 31px; }
.library-section-head p { margin: 0; color: var(--muted); font-size: 11px; }
.compact-search { width: min(280px,100%); padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; outline: 0; }
.glossary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.glossary-card { border: 1px solid var(--line); border-radius: 17px; background: white; }
.glossary-card summary { padding: 19px; display: grid; grid-template-columns: 33px 1fr auto; gap: 13px; align-items: center; cursor: pointer; list-style: none; }
.glossary-card summary::-webkit-details-marker { display:none; }
.glossary-card summary > span { color: var(--muted); font-size: 9px; }
.glossary-card h3 { margin: 0 0 4px; font-size: 15px; }
.glossary-card summary small { color: var(--muted); font-size: 9px; }
.glossary-card summary i { font-style: normal; }
.glossary-card > p { margin: 0; padding: 0 19px 15px 65px; color: #53615a; font-size: 11px; line-height: 1.65; }
.glossary-card > div { padding: 0 19px 17px 65px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.glossary-card > div a { color: var(--muted); font-size: 8px; text-decoration: underline; }
.trust-badge { padding: 5px 7px; border-radius: 6px; font-size: 8px; }
.trust-badge.derived { color: #78511d; background: #fff1d9; }
.atlas-filters { margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.atlas-filters button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: white; cursor: pointer; font-size: 9px; }
.atlas-filters button.active { color: var(--forest); border-color: var(--lime-2); background: var(--lime); }
.atlas-count { margin-bottom: 12px; display: flex; align-items: baseline; gap: 5px; }
.atlas-count strong { font-size: 27px; }
.atlas-count span { color: var(--muted); font-size: 11px; }
.atlas-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.atlas-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: white; }
.atlas-card > button { width: 100%; height: 170px; padding: 18px; border: 0; border-bottom: 1px solid var(--line); background: #fafcf9; cursor: zoom-in; }
.atlas-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
.atlas-card > div { padding: 15px; }
.atlas-card span,.atlas-card small { color: var(--muted); font-size: 8px; }
.atlas-card h3 { margin: 7px 0; font-size: 14px; }
.atlas-card p { max-height: 78px; margin: 0 0 9px; overflow: hidden; color: #56635d; font-size: 9px; line-height: 1.55; }
.official-original { margin-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.official-original summary { padding: 10px 0 2px; cursor: pointer; font-weight: 700; }
.official-original strong { display: block; padding-top: 7px; color: var(--ink); font-size: 12px; }
.official-original p { max-height: none; margin: 6px 0 0; overflow: visible; color: var(--muted); font-size: 10px; line-height: 1.6; }

/* Trust centre */
.trust-page { padding: 65px 0 110px; background: #eef2ed; }
.trust-page header { max-width: 900px; }
.trust-page header h1 { margin: 15px 0; font-size: clamp(45px,6.5vw,78px); line-height: 1; letter-spacing: -.06em; }
.trust-page header > p { max-width: 760px; color: var(--muted); line-height: 1.7; }
.trust-date { width: fit-content; margin-top: 20px; padding: 8px 11px; border-radius: 9px; color: var(--forest); background: var(--lime); font-size: 9px; font-weight: 700; }
.trust-type-grid { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trust-type-grid article { min-height: 205px; padding: 25px; display: grid; grid-template-columns: 40px 1fr; gap: 16px; border: 1px solid var(--line); border-radius: 21px; background: white; }
.trust-type-grid article > span { color: var(--muted); font-size: 10px; }
.trust-type-grid small { color: #678075; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.trust-type-grid h2 { margin: 10px 0; font-size: 21px; }
.trust-type-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.trust-action { margin: 17px 0; padding: 22px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; border-radius: 17px; color: white; background: var(--forest); }
.trust-action span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--forest); background: var(--amber); font-weight: 900; }
.trust-action p { margin: 0; color: rgba(255,255,255,.7); line-height: 1.7; }
.source-register { padding: 28px; border: 1px solid var(--line); border-radius: 21px; background: white; }
.source-register h2 { margin: 0 0 17px; }
.source-register > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.source-register a { padding: 15px; display: flex; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 12px; }
.source-register strong { font-size: 11px; }
.source-register span { color: var(--muted); font-size: 9px; }
.progress-page { padding: 55px 0 100px; }
.progress-overview { display: grid; grid-template-columns: 1.2fr repeat(3,.6fr); gap: 15px; margin: 30px 0; }
.metric { padding: 24px; min-height: 145px; border: 1px solid var(--line); border-radius: 21px; background: white; }
.metric.primary-metric { color: white; background: var(--forest-2); }
.metric span { display: block; color: var(--muted); font-size: 12px; }
.primary-metric span { color: rgba(255,255,255,.55); }
.metric strong { display: block; margin-top: 25px; font-size: 34px; }
.heatmap { display: grid; grid-template-columns: repeat(14,1fr); gap: 5px; }
.heatmap i { aspect-ratio: 1; border-radius: 4px; background: #e5ebe6; }
.heatmap i.active { background: var(--lime-2); }

.site-footer { width: min(var(--max),calc(100% - 48px)); margin: 0 auto; padding: 32px 0 44px; display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.footer-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.site-footer p { margin: 0; text-align: center; }
.site-footer a:hover { color: var(--ink); }
.toast-region { position: fixed; z-index: 999; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { padding: 13px 17px; border-radius: 12px; color: white; background: var(--forest); box-shadow: var(--shadow); animation: toastIn .25s ease both; }
@keyframes toastIn { from { opacity:0; transform: translateY(10px); } }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; padding-inline: 20px; }
  .top-nav { position: fixed; left: 16px; right: 16px; top: 82px; display: none; background: rgba(7,23,20,.97); padding: 9px; box-shadow: var(--shadow); }
  .site-header.light .top-nav { background: white; }
  .top-nav.open { display: flex; }
  .menu-button { display: block; }
  .sound-toggle { display: none; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; padding-top: 75px; }
  .hero-visual { min-height: 490px; }
  .road-card { inset: 15px auto auto 50%; transform: translateX(-50%) rotate(2deg); }
  .feature-grid { grid-template-columns: 1fr 1fr; } .feature-card:first-child { grid-column: 1/-1; }
  .choice-grid { grid-template-columns: 1fr; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-sidebar { position: static; }
  .lesson-nav { display: flex; overflow-x: auto; padding-bottom: 5px; }
  .lesson-nav button { min-width: 170px; }
  .category-grid { grid-template-columns: repeat(2,1fr); }
  .progress-overview { grid-template-columns: 1fr 1fr; }
  .metric.primary-metric { grid-column: 1/-1; }
  .result-hero { grid-template-columns: auto 1fr; } .result-hero .button { grid-column: 1/-1; }
  .result-grid { grid-template-columns: 1fr; }
  .mock-quiz-layout { grid-template-columns: 1fr; }
  .exam-navigator { position: static; }
  .question-map { grid-template-columns: repeat(10,1fr); }
  .guide-hero-grid { grid-template-columns: 1fr 200px; gap: 35px; }
  .licence-choice-grid { grid-template-columns: 1fr; }
  .fee-grid { grid-template-columns: 1fr 1fr; }
  .guide-lower-grid { grid-template-columns: 1fr; }
  .exam-setup-grid { grid-template-columns: 1fr; }
  .exam-setup aside { max-width: 430px; }
  .atlas-grid { grid-template-columns: repeat(3,1fr); }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .site-footer p { text-align: center; } .site-footer > div { justify-content: center; }
}

@media (max-width: 620px) {
  :root { --header-h: 68px; --radius-xl: 25px; }
  .container { width: min(100% - 30px,var(--max)); }
  .site-header { height: var(--header-h); }
  .brand { font-size: 15px; } .brand-mark { width: 30px; height: 30px; }
  .language-toggle span { min-width: 27px; padding-inline: 5px; }
  .display { font-size: 50px; }
  .hero-grid { padding-block: 55px 35px; }
  .hero-proof { gap: 14px; } .hero-proof strong { font-size: 15px; }
  .hero-visual { min-height: 390px; }
  .road-card { width: 365px; max-width: 105vw; border-radius: 28px; }
  .float-stat { padding: 11px 13px; } .float-stat b { font-size: 17px; }
  .stat-one { left: 0; top: 65px; } .stat-two { right: 0; bottom: 40px; }
  .feature-strip { padding: 65px 0; } .feature-intro { grid-template-columns: 1fr; gap: 5px; }
  .feature-grid { grid-template-columns: 1fr; } .feature-card:first-child { grid-column: auto; }
  .subpage-head { padding: 48px 0 35px; } .subpage-head .container { display: block; }
  .exam-choice { min-height: 355px; padding: 25px; } .choice-meta { inset: auto 25px 25px; }
  .dashboard { padding-top: 32px; } .dashboard-top { grid-template-columns: 1fr; }
  .dashboard-stat { width: fit-content; }
  .chapter-grid { grid-template-columns: 1fr; }
  .chapter-card { grid-template-columns: 52px 1fr; padding: 19px; min-height: 190px; }
  .chapter-index { width: 50px; height: 50px; } .chapter-time { grid-column: 2; }
  .lesson-layout { padding-top: 25px; } .lesson-hero { min-height: 270px; padding: 27px; }
  .lesson-body { padding-inline: 0; } .fact-grid { grid-template-columns: 1fr; }
  .interactive-head { display: block; } .interactive-head .eyebrow { margin-top: 8px; }
  .sign-wall { grid-template-columns: repeat(2,1fr); }
  .lesson-footer { align-items: stretch; flex-direction: column; }
  .manual-visuals-head { grid-template-columns: 1fr; }
  .manual-count { width: fit-content; }
  .manual-page-group { padding: 12px; }
  .manual-figure-grid { grid-template-columns: 1fr; }
  .manual-teaching-card { grid-template-rows: 190px 1fr; }
  .practice-hero-grid { grid-template-columns: 1fr; }
  .practice-count { width: 115px; height: 115px; } .practice-count strong { font-size: 34px; }
  .practice-modes { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .practice-bar { align-items: stretch; flex-direction: column; bottom: 8px; }
  .practice-bar { position: static; }
  .practice-bar .button { width: 100%; }
  .quiz-top { grid-template-columns: 1fr auto; } .quiz-top .button { display: none; }
  .quiz-card { padding: 22px; min-height: 510px; }
  .mock-quiz-layout { width: min(100% - 24px,1120px); }
  .quiz-step-actions { width: 100%; justify-content: flex-end; }
  .quiz-actions { align-items: flex-start; flex-direction: column; }
  .question-map { grid-template-columns: repeat(5,1fr); }
  .answer-review { padding: 19px; }
  .answer-review-head { align-items: flex-start; flex-direction: column; }
  .review-body { margin-left: 0; }
  .result-hero { padding: 27px; grid-template-columns: 1fr; }
  .result-score { width: 125px; height: 125px; }
  .progress-overview { grid-template-columns: 1fr; } .metric.primary-metric { grid-column: auto; }
  .breakdown-row { grid-template-columns: 90px 1fr 38px; }
  .guide-page { padding-bottom: 70px; }
  .exam-setup { padding: 45px 0 70px; }
  .exam-setup h1 { font-size: 47px; }
  .exam-rule-grid { grid-template-columns: 1fr 1fr; }
  .exam-setup ul { grid-template-columns: 1fr; }
  .library-hero { padding-top: 43px; }
  .library-hero h1 { font-size: 47px; }
  .library-hero nav { overflow-x: auto; }
  .library-hero nav button { white-space: nowrap; }
  .library-overview,.glossary-grid,.trust-type-grid,.source-register > div { grid-template-columns: 1fr; }
  .library-section-head { align-items: stretch; flex-direction: column; }
  .compact-search { width: 100%; }
  .atlas-grid { grid-template-columns: 1fr 1fr; }
  .atlas-card > button { height: 145px; }
  .trust-page { padding: 45px 0 75px; }
  .trust-page header h1 { font-size: 48px; }
  .library-hero nav { width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; }
  .library-hero nav button { min-width: 0; padding-inline: 7px; white-space: normal; overflow-wrap: anywhere; }
  .guide-hero { padding: 48px 0; }
  .guide-hero-grid { grid-template-columns: 1fr; }
  .guide-hero h1 { font-size: 48px; }
  html[lang="ta"] .guide-hero h1 { font-size: 39px; line-height: 1.08; letter-spacing: -.04em; }
  .guide-cover { width: 165px; margin-left: 12px; }
  .consent-page { padding: 45px 0 70px; }
  .consent-wrap { width: min(100% - 30px,880px); }
  .consent-wrap > header h1 { font-size: 42px; }
  html[lang="ta"] .consent-wrap > header h1 { font-size: 35px; overflow-wrap: anywhere; }
  .consent-card { padding: 21px; border-radius: 20px; }
  .consent-actions { align-items: stretch; flex-direction: column; }
  .consent-actions .button { width: 100%; }
  .consent-actions a { margin: 8px 0 0; text-align: center; }
  .guide-section { padding: 22px; border-radius: 20px; }
  .guide-heading,.guide-heading.split { grid-template-columns: 36px 1fr; }
  .guide-heading > span { width: 36px; height: 36px; }
  .guide-heading h2 { font-size: 22px; }
  .guide-progress { grid-column: 2; }
  .guide-progress strong { text-align: left; }
  .licence-choice { grid-template-columns: auto 70px 1fr auto; padding: 18px; gap: 12px; }
  .licence-choice > strong { font-size: 43px; }
  .guide-step { grid-template-columns: 35px 1fr; padding: 17px; gap: 13px; }
  .guide-step > i { display: none; }
  .fee-grid,.centre-grid,.official-link-grid { grid-template-columns: 1fr; }
  .fee-card { min-height: 145px; }
  .centre-card { min-height: 165px; }
}

@media (max-width: 440px) {
  .category-grid { grid-template-columns: 1fr; }
  .atlas-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 125px; }
  .hero-proof .divider { display: none; }
  .hero-proof > div { min-width: 28%; }
}

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

/* Complete footer and policy pages */
.site-footer { width: 100%; margin: 0; padding: 0; display: block; border: 0; background: #071714; color: rgba(255,255,255,.68); font-size: 13px; }
.footer-shell { width: min(var(--max),calc(100% - 48px)); margin: 0 auto; padding: 64px 0 28px; }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 45px; border-bottom: 1px solid rgba(255,255,255,.13); }
.footer-kicker { display: block; margin-bottom: 9px; color: var(--lime); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.footer-cta h2 { max-width: 650px; margin: 0; color: white; font-size: clamp(27px,3vw,46px); line-height: 1.05; letter-spacing: -.04em; }
.footer-cta-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.footer-primary { background: var(--lime); color: #06120f; border-color: var(--lime); }
.footer-secondary { color: white; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.footer-grid { display: grid; grid-template-columns: minmax(240px,1.35fr) repeat(3,minmax(145px,.75fr)); gap: 54px; padding: 50px 0; }
.footer-about { max-width: 330px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; color: white; }
.footer-about p { margin: 20px 0; text-align: left; line-height: 1.75; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.footer-badges span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.8); font-size: 10px; letter-spacing: .03em; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-column h3 { margin: 0 0 8px; color: white; font-size: 12px; letter-spacing: .06em; }
.footer-column a { color: rgba(255,255,255,.66); line-height: 1.35; transition: color .2s ease,transform .2s ease; }
.footer-column a:hover { color: var(--lime); transform: translateX(2px); }
.footer-data-link { margin-top: 5px; color: var(--lime) !important; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); font-size: 11px; }
.footer-bottom p { margin: 0; text-align: left; }
.footer-bottom p:last-child { display: flex; gap: 8px; }

.legal-page { padding: 54px 0 100px; background: #f5f7f4; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0,760px); gap: 80px; justify-content: center; }
.legal-layout > * { min-width: 0; }
.legal-layout aside { position: sticky; top: 90px; align-self: start; }
.legal-layout aside nav { display: grid; gap: 5px; margin-top: 24px; }
.legal-layout aside nav a { padding: 11px 13px; border-radius: 9px; color: var(--muted); font-size: 13px; }
.legal-layout aside nav a:hover,.legal-layout aside nav a.active { background: white; color: var(--forest); box-shadow: 0 5px 18px rgba(10,30,23,.06); }
.legal-layout article { padding: 42px 48px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 22px 60px rgba(10,30,23,.06); }
.legal-layout article header { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.legal-layout article h1 { max-width: 680px; margin: 10px 0 15px; font-size: clamp(38px,5vw,66px); line-height: .98; letter-spacing: -.055em; }
.legal-layout article header > p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.legal-layout article header > small { color: #78847f; }
.legal-layout article > section { padding-top: 32px; }
.legal-layout article > section h2 { margin: 0 0 13px; font-size: 22px; }
.legal-layout article > section p,.legal-layout article > section li { color: #46534e; line-height: 1.8; }
.legal-layout article > section ul { padding-left: 21px; }
.data-settings-card { width: min(760px,calc(100% - 36px)); padding: 46px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.data-settings-card > h1 { margin: 12px 0 16px; font-size: clamp(36px,5vw,60px); line-height: 1; letter-spacing: -.05em; }
.data-settings-card > p { color: var(--muted); line-height: 1.7; }
.data-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0; }
.data-summary > div { display: flex; flex-direction: column; padding: 22px; border-radius: 15px; background: #edf2ee; }
.data-summary strong { font-size: 32px; }
.data-summary span { color: var(--muted); font-size: 12px; }
.data-settings-card details { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; }
.data-settings-card code { font-size: 12px; }
.data-danger { margin-top: 32px; padding: 25px; border: 1px solid #efc7c3; border-radius: 16px; background: #fff5f4; }
.data-danger h2 { margin: 0 0 7px; font-size: 19px; }
.data-danger p { color: #76504c; line-height: 1.6; }
.button.danger { color: white; border-color: #9a3027; background: #9a3027; }
.question-trust a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.answer-feedback small { display: block; margin-top: 12px; }
.answer-feedback small a { color: inherit; text-decoration: underline; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; max-width: 600px; }
  .legal-layout { grid-template-columns: 1fr; gap: 20px; }
  .legal-layout aside { position: static; }
  .legal-layout aside nav { display: flex; overflow-x: auto; }
  .legal-layout aside nav a { white-space: nowrap; }
}
@media (max-width: 640px) {
  .site-header { max-width: 100vw; padding-inline: 14px; gap: 10px; }
  .header-actions { min-width: 0; }
  .footer-shell { width: min(100% - 30px,var(--max)); padding-top: 44px; }
  .footer-cta { align-items: stretch; flex-direction: column; }
  .footer-cta-actions { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 24px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .legal-page { padding-top: 28px; }
  .legal-layout { width: min(100% - 28px,var(--max)); max-width: 100%; justify-content: stretch; }
  .legal-layout aside,.legal-layout article,.legal-layout aside nav { min-width: 0; max-width: 100%; }
  .legal-layout article,.data-settings-card { padding: 26px 21px; border-radius: 18px; }
  .legal-layout article h1 { font-size: 40px; }
  .data-summary { grid-template-columns: 1fr; }
}

/* ================================================================
   Jeton-inspired visual system — RoadReady SG original adaptation
   Oversized type, warm gradient stages, framed surfaces and pill UI.
   ================================================================ */
:root {
  --theme-primary:#d83668;
  --theme-secondary:#c94137;
  --theme-tertiary:#ff9f72;
  --theme-accent:#ffc862;
  --theme-alt:#c6b5ff;
  --theme-paper:#f8f2ed;
  --theme-surface:#fffdfb;
  --theme-ink:#211a19;
  --theme-muted:#746b68;
  --theme-dark:#1d1717;
  --theme-dark-2:#4a2526;
  --theme-soft:#fff0e6;
  --theme-soft-2:#f2e8e1;
  --theme-soft-3:#eadfd8;
  --theme-road:#9b294f;
  --theme-road-dark:#572139;
  --theme-road-block:#ffc49f;
  --theme-coin-1:linear-gradient(165deg,#ffd3aa,#ee5471 74%);
  --theme-coin-2:linear-gradient(160deg,#ffbd8c,#e72f6b);
  --theme-hero:radial-gradient(circle at 72% 24%,rgba(255,205,154,.96) 0 8%,transparent 29%),radial-gradient(circle at 24% 84%,rgba(191,31,93,.72),transparent 37%),linear-gradient(125deg,#d82f68 0%,#ed485b 42%,#ff9f72 100%);
  --theme-stage:radial-gradient(circle at 82% 20%,rgba(255,202,151,.55),transparent 25rem),linear-gradient(125deg,#cb2d64,#f25855 55%,#ff9e72);
  --theme-accent-gradient:linear-gradient(120deg,#e83d72,#ff5b4d);
  --theme-footer-gradient:linear-gradient(115deg,#d82f68,#f25455 60%,#ff9d70);
  --theme-dark-gradient:linear-gradient(145deg,#252020,#4a2728);
  --theme-body-glow:rgba(255,177,128,.12);
  --theme-shadow:rgba(86,43,34,.12);
  --theme-on-accent:#fff;
  --ink:var(--theme-ink);
  --muted:var(--theme-muted);
  --paper:var(--theme-paper);
  --card:var(--theme-surface);
  --forest:var(--theme-dark);
  --forest-2:var(--theme-dark-2);
  --lime:var(--theme-secondary);
  --lime-2:var(--theme-tertiary);
  --mint:var(--theme-tertiary);
  --red: #d93c49;
  --amber:var(--theme-accent);
  --blue:var(--theme-alt);
  --pink:var(--theme-primary);
  --peach:var(--theme-tertiary);
  --lavender:var(--theme-alt);
  --line: rgba(40,25,23,.11);
  --line-strong: rgba(40,25,23,.18);
  --shadow:0 24px 70px var(--theme-shadow);
  --shadow-soft:0 12px 34px color-mix(in srgb,var(--theme-shadow) 68%,transparent);
  --radius-xl: 44px;
  --radius-lg: 32px;
  --radius-md: 22px;
  --header-h: 66px;
  --max: 1320px;
}

html[data-theme="aurora"] {
  --theme-primary:#007b71;--theme-secondary:#256dce;--theme-tertiary:#74d8c1;--theme-accent:#b7ed68;--theme-alt:#8bc4ff;
  --theme-paper:#eff7f5;--theme-surface:#fbfffd;--theme-ink:#102823;--theme-muted:#61766f;--theme-dark:#0b2421;--theme-dark-2:#164a42;
  --theme-soft:#e3f5ef;--theme-soft-2:#dfeeea;--theme-soft-3:#d3e7e1;--theme-road:#126e67;--theme-road-dark:#103f3c;--theme-road-block:#85d6c2;
  --theme-coin-1:linear-gradient(165deg,#d7ffe9,#39bfa5 72%);--theme-coin-2:linear-gradient(160deg,#9cebd4,#2c7de5);
  --theme-hero:radial-gradient(circle at 72% 22%,rgba(189,255,220,.85) 0 8%,transparent 29%),radial-gradient(circle at 22% 88%,rgba(10,88,119,.55),transparent 38%),linear-gradient(125deg,#087d78,#198fa0 43%,#3d8ee6 100%);
  --theme-stage:radial-gradient(circle at 82% 18%,rgba(184,255,218,.48),transparent 25rem),linear-gradient(125deg,#087d78,#2788cf 60%,#73d6bf);
  --theme-accent-gradient:linear-gradient(120deg,#008f83,#2878e8);--theme-footer-gradient:linear-gradient(115deg,#087d78,#258acb 58%,#76d8bf);--theme-dark-gradient:linear-gradient(145deg,#0b2421,#164a42);
  --theme-body-glow:rgba(70,191,163,.12);--theme-shadow:rgba(22,87,77,.13);
}
html[data-theme="violet"] {
  --theme-primary:#7134d8;--theme-secondary:#b436c7;--theme-tertiary:#ff79aa;--theme-accent:#ffc96b;--theme-alt:#9ea8ff;
  --theme-paper:#f7f2fb;--theme-surface:#fffaff;--theme-ink:#24192d;--theme-muted:#75687e;--theme-dark:#1a1122;--theme-dark-2:#44225a;
  --theme-soft:#f2e7fb;--theme-soft-2:#ece2f2;--theme-soft-3:#e4d8eb;--theme-road:#592b75;--theme-road-dark:#2c173b;--theme-road-block:#d29cde;
  --theme-coin-1:linear-gradient(165deg,#f9d6ff,#a34be8 72%);--theme-coin-2:linear-gradient(160deg,#ffb2dc,#7942e7);
  --theme-hero:radial-gradient(circle at 72% 22%,rgba(255,198,234,.8) 0 8%,transparent 29%),radial-gradient(circle at 20% 88%,rgba(49,23,108,.58),transparent 38%),linear-gradient(125deg,#6532c8,#a43fdb 45%,#f16d9f 100%);
  --theme-stage:radial-gradient(circle at 82% 18%,rgba(255,201,235,.42),transparent 25rem),linear-gradient(125deg,#6532c8,#a83ed4 58%,#f071a1);
  --theme-accent-gradient:linear-gradient(120deg,#7c3aed,#d946ef);--theme-footer-gradient:linear-gradient(115deg,#6532c8,#a33ed4 58%,#ef72a2);--theme-dark-gradient:linear-gradient(145deg,#1a1122,#44225a);
  --theme-body-glow:rgba(160,92,221,.12);--theme-shadow:rgba(75,39,98,.14);
}
html[data-theme="ocean"] {
  --theme-primary:#075fcf;--theme-secondary:#00788f;--theme-tertiary:#62d6ee;--theme-accent:#76edcf;--theme-alt:#9caeff;
  --theme-paper:#eff6fa;--theme-surface:#fbfdff;--theme-ink:#102334;--theme-muted:#627584;--theme-dark:#081b2d;--theme-dark-2:#123d5a;
  --theme-soft:#e4f3fa;--theme-soft-2:#deebf1;--theme-soft-3:#d3e3eb;--theme-road:#175076;--theme-road-dark:#0b304b;--theme-road-block:#80bdd5;
  --theme-coin-1:linear-gradient(165deg,#d8f8ff,#3e9de6 72%);--theme-coin-2:linear-gradient(160deg,#8eeaf4,#176edb);
  --theme-hero:radial-gradient(circle at 72% 22%,rgba(194,244,255,.84) 0 8%,transparent 29%),radial-gradient(circle at 20% 88%,rgba(4,48,111,.62),transparent 38%),linear-gradient(125deg,#075bc8,#087fbf 45%,#29b9c9 100%);
  --theme-stage:radial-gradient(circle at 82% 18%,rgba(196,247,255,.45),transparent 25rem),linear-gradient(125deg,#075bc8,#078ac4 58%,#3cc8ca);
  --theme-accent-gradient:linear-gradient(120deg,#0769e8,#00a9c7);--theme-footer-gradient:linear-gradient(115deg,#075bc8,#078ac4 58%,#3ec8c9);--theme-dark-gradient:linear-gradient(145deg,#081b2d,#123d5a);
  --theme-body-glow:rgba(58,153,211,.12);--theme-shadow:rgba(25,72,105,.14);
}
html[data-theme="gold"] {
  --theme-primary:#b88932;--theme-secondary:#d3a748;--theme-tertiary:#eed08d;--theme-accent:#ffe2a1;--theme-alt:#9eacc3;
  --theme-paper:#f6f2e9;--theme-surface:#fffdf7;--theme-ink:#242017;--theme-muted:#756f61;--theme-dark:#11141b;--theme-dark-2:#393324;
  --theme-soft:#f5ead0;--theme-soft-2:#eee6d6;--theme-soft-3:#e3d9c4;--theme-road:#5d4b29;--theme-road-dark:#29251c;--theme-road-block:#cfb676;
  --theme-coin-1:linear-gradient(165deg,#fff2c4,#d5a845 72%);--theme-coin-2:linear-gradient(160deg,#f7d88e,#94701f);
  --theme-hero:radial-gradient(circle at 72% 22%,rgba(255,232,171,.78) 0 8%,transparent 29%),radial-gradient(circle at 20% 88%,rgba(8,13,27,.68),transparent 38%),linear-gradient(125deg,#161b27,#66502a 52%,#c19742 100%);
  --theme-stage:radial-gradient(circle at 82% 18%,rgba(255,232,171,.38),transparent 25rem),linear-gradient(125deg,#171c28,#765c2d 58%,#c79b46);
  --theme-accent-gradient:linear-gradient(120deg,#9d7226,#d3a748);--theme-footer-gradient:linear-gradient(115deg,#181c25,#715729 58%,#bd913f);--theme-dark-gradient:linear-gradient(145deg,#11141b,#393324);
  --theme-body-glow:rgba(190,146,57,.12);--theme-shadow:rgba(69,57,34,.14);--theme-on-accent:#211b10;
}
html[data-theme="sage"] {
  --theme-primary:#835264;--theme-secondary:#5f7a63;--theme-tertiary:#d3a0a9;--theme-accent:#e3c685;--theme-alt:#a8b39b;
  --theme-paper:#f3f3ed;--theme-surface:#fdfdf9;--theme-ink:#25271f;--theme-muted:#70756a;--theme-dark:#1c241e;--theme-dark-2:#465548;
  --theme-soft:#eee8e4;--theme-soft-2:#e6e8df;--theme-soft-3:#dce1d6;--theme-road:#566d59;--theme-road-dark:#29372d;--theme-road-block:#b6c3ad;
  --theme-coin-1:linear-gradient(165deg,#f2dedf,#aa7080 72%);--theme-coin-2:linear-gradient(160deg,#d7c4b4,#708d72);
  --theme-hero:radial-gradient(circle at 72% 22%,rgba(237,217,199,.78) 0 8%,transparent 29%),radial-gradient(circle at 20% 88%,rgba(47,74,55,.55),transparent 38%),linear-gradient(125deg,#8f586b,#9b6c72 46%,#789178 100%);
  --theme-stage:radial-gradient(circle at 82% 18%,rgba(241,218,203,.4),transparent 25rem),linear-gradient(125deg,#8f586b,#9f7075 56%,#7e987d);
  --theme-accent-gradient:linear-gradient(120deg,#955b6d,#6f8d72);--theme-footer-gradient:linear-gradient(115deg,#8f586b,#986d71 55%,#789178);--theme-dark-gradient:linear-gradient(145deg,#1c241e,#465548);
  --theme-body-glow:rgba(123,151,121,.12);--theme-shadow:rgba(56,73,59,.13);
}
html[data-theme="white"] {
  --theme-primary:#202a38;--theme-secondary:#3f6fe5;--theme-tertiary:#a8b5c6;--theme-accent:#8fd3ff;--theme-alt:#cdbfff;
  --theme-paper:#f7f8fa;--theme-surface:#ffffff;--theme-ink:#151a22;--theme-muted:#687281;--theme-dark:#121820;--theme-dark-2:#2d3948;
  --theme-soft:#f5f7f9;--theme-soft-2:#edf1f5;--theme-soft-3:#e2e8ef;--theme-road:#394655;--theme-road-dark:#171e27;--theme-road-block:#dce4ec;
  --theme-coin-1:linear-gradient(165deg,#ffffff,#cbd6e4 72%);--theme-coin-2:linear-gradient(160deg,#eaf5ff,#87b9f5);
  --theme-hero:radial-gradient(circle at 74% 20%,rgba(255,255,255,.98) 0 10%,transparent 31%),radial-gradient(circle at 18% 88%,rgba(150,185,225,.22),transparent 38%),linear-gradient(125deg,#ffffff 0%,#f1f4f8 48%,#dce5ef 100%);
  --theme-stage:radial-gradient(circle at 82% 18%,rgba(255,255,255,.95),transparent 24rem),linear-gradient(125deg,#ffffff,#f2f5f8 58%,#e1e8f0);
  --theme-accent-gradient:linear-gradient(120deg,#171d26,#4b5d73);--theme-footer-gradient:linear-gradient(115deg,#111821,#2b3949 58%,#63758a);--theme-dark-gradient:linear-gradient(145deg,#11171f,#303d4d);
  --theme-body-glow:rgba(110,156,210,.08);--theme-shadow:rgba(31,42,56,.11);--theme-on-accent:#fff;
  --line:rgba(24,31,41,.10);--line-strong:rgba(24,31,41,.18);
}

body {
  background:
    radial-gradient(circle at 6% 18%,var(--theme-body-glow),transparent 23rem),
    var(--paper);
}
::selection { color: white; background: var(--pink); }

/* Floating glass navigation */
.site-header {
  position: fixed;
  top: 14px;
  left: 50%;
  width: min(1320px,calc(100% - 32px));
  height: var(--header-h);
  padding: 0 12px 0 18px;
  grid-template-columns: 1fr auto 1fr;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 20px;
  color: white;
  background: rgba(72,25,39,.13);
  box-shadow: 0 12px 36px rgba(50,20,23,.08);
  backdrop-filter: blur(18px) saturate(140%);
  transition: background .3s ease,border-color .3s ease,box-shadow .3s ease,top .3s ease;
}
.site-header:not(.light) { background:color-mix(in srgb,var(--theme-dark) 34%,transparent); box-shadow:0 14px 42px color-mix(in srgb,var(--theme-dark) 18%,transparent); }
.site-header.scrolled { top:8px; background:color-mix(in srgb,var(--theme-dark) 91%,transparent); box-shadow:0 16px 48px color-mix(in srgb,var(--theme-dark) 30%,transparent); }
.site-header.light { color:var(--ink); background:color-mix(in srgb,var(--theme-surface) 88%,transparent); border-color:var(--line); box-shadow:var(--shadow-soft); }
.site-header.light.scrolled { background:color-mix(in srgb,var(--theme-surface) 95%,transparent); }
.brand { gap: 10px; font-size: 16px; letter-spacing: -.02em; }
.brand b { color: currentColor; }
.brand-mark { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(255,255,255,.12); transform: none; }
.light .brand-mark { border-color:color-mix(in srgb,var(--pink) 24%,transparent); background:color-mix(in srgb,var(--lime) 10%,transparent); }
.brand-mark i { width:4px; height:16px; background:var(--theme-tertiary); transform:rotate(29deg) translateX(-3px); }
.brand-mark i:last-child { background:var(--theme-secondary); transform:rotate(29deg) translateX(5px); }
.top-nav { gap: 2px; padding: 4px; border-color: rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.11); }
.light .top-nav { border-color: var(--line); background: rgba(255,255,255,.68); box-shadow: none; }
.top-nav button { padding:8px 15px; border-radius:999px; font-size:12px; font-weight:600; }
.site-header:not(.light) .top-nav button { opacity:.9; text-shadow:0 1px 8px color-mix(in srgb,var(--theme-dark) 65%,transparent); }
.top-nav button:hover,.top-nav button.active { background: rgba(255,255,255,.22); }
.light .top-nav button:hover,.light .top-nav button.active { color: white; background: var(--ink); }
.icon-button,.language-toggle,.theme-toggle,.menu-button { border-radius:999px; }
.theme-picker { position:relative; }
.theme-toggle { width:40px; min-height:39px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.18); color:inherit; background:rgba(255,255,255,.07); cursor:pointer; }
.site-header.light .theme-toggle { border-color:var(--line); background:color-mix(in srgb,var(--theme-surface) 82%,transparent); }
.theme-toggle-art { position:relative; width:20px; height:20px; display:block; transform:rotate(-12deg); }
.theme-toggle-art i { position:absolute; width:11px; height:11px; border:2px solid rgba(255,255,255,.92); border-radius:50%; box-shadow:0 0 0 2px rgba(0,0,0,.04); }
.theme-toggle-art i:nth-child(1) { left:0; top:1px; background:var(--theme-primary); }
.theme-toggle-art i:nth-child(2) { right:0; top:1px; background:var(--theme-secondary); }
.theme-toggle-art i:nth-child(3) { left:5px; bottom:0; background:var(--theme-tertiary); }
.site-header.light .theme-toggle-art i { border-color:var(--theme-surface); }
.theme-menu { position:absolute; z-index:125; top:calc(100% + 14px); right:0; width:330px; padding:12px; display:none; border:1px solid var(--line); border-radius:25px; color:var(--ink); background:color-mix(in srgb,var(--theme-surface) 97%,transparent); box-shadow:var(--shadow); backdrop-filter:blur(20px) saturate(140%); }
.theme-menu.open { display:block; animation:pageIn .22s ease both; }
.theme-menu-head { padding:5px 7px 12px; display:flex; justify-content:space-between; align-items:center; }
.theme-menu-head span { font-size:13px; font-weight:700; }
.theme-menu-head small { color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.theme-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.theme-options > button { min-width:0; padding:9px; display:grid; grid-template-columns:48px minmax(0,1fr) 16px; gap:8px; align-items:center; border:1px solid transparent; border-radius:17px; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.theme-options > button:hover { background:var(--theme-soft); }
.theme-options > button.active { border-color:color-mix(in srgb,var(--theme-primary) 32%,transparent); background:var(--theme-soft); }
.theme-options > button > span:nth-child(2) { overflow:hidden; font-size:11px; font-weight:650; white-space:nowrap; text-overflow:ellipsis; }
.theme-options > button > b { color:var(--theme-primary); opacity:0; font-size:11px; }
.theme-options > button.active > b { opacity:1; }
.theme-preview { position:relative; width:48px; height:33px; display:block; overflow:hidden; border:1px solid rgba(255,255,255,.65); border-radius:11px; background:linear-gradient(135deg,var(--preview-a),var(--preview-b) 58%,var(--preview-c)); box-shadow:0 5px 14px rgba(20,20,20,.1); }
.theme-preview i { position:absolute; border-radius:50%; background:rgba(255,255,255,.38); }
.theme-preview i:nth-child(1) { width:23px; height:23px; right:-5px; top:-6px; }
.theme-preview i:nth-child(2) { width:13px; height:13px; left:6px; bottom:-4px; }
.theme-preview i:nth-child(3) { width:5px; height:5px; left:20px; top:8px; background:rgba(255,255,255,.8); }
.theme-preview.sunset { --preview-a:#d82f68;--preview-b:#ef4d5f;--preview-c:#ff9f72; }
.theme-preview.aurora { --preview-a:#087d78;--preview-b:#198fa0;--preview-c:#3d8ee6; }
.theme-preview.violet { --preview-a:#6532c8;--preview-b:#a43fdb;--preview-c:#f16d9f; }
.theme-preview.ocean { --preview-a:#075bc8;--preview-b:#087fbf;--preview-c:#29b9c9; }
.theme-preview.gold { --preview-a:#161b27;--preview-b:#66502a;--preview-c:#c19742; }
.theme-preview.sage { --preview-a:#8f586b;--preview-b:#9b6c72;--preview-c:#789178; }
.theme-preview.white { --preview-a:#ffffff;--preview-b:#eef2f6;--preview-c:#b9c8d9; border-color:rgba(28,37,49,.16); }
.site-header:not(.light) .language-toggle { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.1); }
.site-header:not(.light) .language-toggle .active-lang { color:#72243c; background:rgba(255,247,235,.94); }
.site-header:not(.light) .language-toggle .lang-chevron { color:white; }
.site-header.light .language-toggle { border-color:var(--line); background:rgba(255,255,255,.72); }
.site-header.light .language-toggle .active-lang { color:white; background:linear-gradient(135deg,var(--pink),var(--lime)); }
.site-header.light .language-toggle .lang-chevron { color:var(--muted); }
.language-menu { top: calc(100% + 14px); border-radius: 22px; box-shadow: 0 24px 70px rgba(55,25,22,.17); }
.language-menu button,.language-menu b { border-radius: 14px; }
.language-menu { background:color-mix(in srgb,var(--theme-surface) 97%,transparent); }
.language-menu button:hover,.language-menu button.active { background:var(--theme-soft); }
.language-menu button.active b { color: white; background: linear-gradient(135deg,var(--pink),var(--lime)); }

/* Global typography and controls */
.container { width: min(var(--max),calc(100% - 56px)); }
.page { animation: jetonPageIn .62s cubic-bezier(.16,1,.3,1) both; }
@keyframes jetonPageIn { from { opacity: 0; transform: translateY(18px) scale(.995); } }
.eyebrow { color: #875f58; font-size: 11px; letter-spacing: .14em; }
.eyebrow::before { width: 8px; height: 8px; background: var(--lime); box-shadow: 0 0 0 5px rgba(255,91,77,.14); }
.display,.section-title,.dashboard-top h1,.lesson-hero h1,.practice-hero h1,.library-hero h1,.trust-page header h1,.guide-hero h1,.exam-setup h1,.legal-layout article h1,.data-settings-card > h1 {
  font-weight: 500;
  letter-spacing: -.065em;
}
.section-title { font-size: clamp(38px,5vw,66px); }
.button { min-height: 52px; padding-inline: 24px; border-radius: 999px; box-shadow: none; transition: transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,background .28s ease; }
.button:hover { transform: translateY(-3px) scale(1.015); }
.button.primary { color: white; background: linear-gradient(120deg,var(--pink),var(--lime)); box-shadow: 0 15px 34px rgba(221,53,79,.22); }
.button.primary:hover { background: linear-gradient(120deg,#ef3975,#ff6f4d); box-shadow: 0 18px 42px rgba(221,53,79,.3); }
.button.ink { background: var(--ink); }
.button.ghost { background: rgba(255,255,255,.75); border-color: var(--line); }
.button.secondary { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.tag,.choice-chip,.trust-badge,.footer-badges span,.atlas-filters button { border-radius: 999px; }

/* Home: warm immersive framed hero */
.hero {
  min-height: 100svh;
  padding: 14px;
  color: white;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,205,154,.96) 0 8%, transparent 29%),
    radial-gradient(circle at 24% 84%, rgba(191,31,93,.72), transparent 37%),
    linear-gradient(125deg,#d82f68 0%,#ed485b 42%,#ff9f72 100%);
}
.hero::before,.hero::after { content:""; position:absolute; pointer-events:none; border-radius:50%; filter:blur(2px); opacity:.62; }
.hero::before { width:420px; height:420px; right:-110px; top:-120px; border:72px solid rgba(255,232,205,.2); animation:heroOrb 14s ease-in-out infinite alternate; }
.hero::after { width:280px; height:280px; left:42%; bottom:-160px; background:rgba(100,22,65,.2); animation:heroOrb 11s ease-in-out -4s infinite alternate-reverse; }
@keyframes heroOrb { to { transform:translate3d(34px,28px,0) rotate(18deg) scale(1.08); } }
.hero-grid {
  position: relative;
  width: min(var(--max),100%);
  min-height: calc(100svh - 28px);
  padding: 132px clamp(30px,5vw,74px) 58px;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px,3vw,46px);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 30px;
  background:
    radial-gradient(circle at var(--glow-x,72%) var(--glow-y,24%),rgba(255,239,213,.18),transparent 24rem),
    linear-gradient(110deg,rgba(121,21,57,.08),rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.hero-copy { max-width: 690px; }
.hero .eyebrow { color: rgba(255,255,255,.8); }
.hero .eyebrow::before { background: #ffd6a9; box-shadow: 0 0 0 5px rgba(255,226,194,.16); }
.display { margin: 24px 0 26px; font-size: clamp(62px,6.1vw,96px); line-height: .91; font-weight: 500; }
.display em { color: white; text-decoration: underline; text-decoration-thickness: .055em; text-underline-offset: .11em; text-decoration-color: rgba(255,224,196,.76); }
.lead { max-width: 590px; color: rgba(255,255,255,.78); font-size: clamp(16px,1.5vw,20px); line-height: 1.65; }
.hero-actions { margin-top: 34px; }
.hero .button.primary { color: var(--ink); background: white; box-shadow: 0 18px 44px rgba(99,22,46,.18); }
.hero .button.primary:hover { background: #fff3ea; }
.hero-proof { margin-top: 48px; color: rgba(255,255,255,.66); }
.hero-proof strong { font-size: 19px; font-weight: 600; }
.hero-visual { min-height: 600px; perspective: 1100px; transform-style:preserve-3d; }
.hero-visual::before { content:""; position:absolute; z-index:0; width:76%; height:66%; right:4%; top:18%; border:1px solid rgba(255,255,255,.28); border-radius:48px; background:linear-gradient(145deg,rgba(255,232,210,.18),rgba(95,22,50,.1)); box-shadow:0 42px 100px rgba(91,19,47,.14); transform:translate3d(calc(var(--hero-x,0) * -5px),calc(var(--hero-y,0) * -4px),-25px) rotate(-7deg); backdrop-filter:blur(5px); }
.hero-visual::after { content:"BTT  •  ROAD SENSE  •  3 / 3A"; position:absolute; z-index:4; left:7%; bottom:7%; padding:10px 15px; border:1px solid rgba(255,255,255,.3); border-radius:999px; color:rgba(255,255,255,.8); background:rgba(90,21,46,.28); font-size:10px; font-weight:700; letter-spacing:.12em; backdrop-filter:blur(12px); transform:translate3d(calc(var(--hero-x,0) * -12px),calc(var(--hero-y,0) * -8px),150px); }
.hero-coins { position:absolute; z-index:1; inset:-5% -8%; pointer-events:none; transform-style:preserve-3d; }
.hero-coin { position:absolute; display:block; border-radius:50%; transform-style:preserve-3d; will-change:transform; }
.hero-coin::before,.hero-coin::after { content:""; position:absolute; border-radius:inherit; pointer-events:none; }
.hero-coin::before { inset:8% 6% 16%; border:1px solid rgba(255,255,255,.38); background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 38%); }
.hero-coin::after { left:12%; right:12%; bottom:-12%; height:30%; background:rgba(78,16,43,.2); filter:blur(16px); }
.coin-a { width:245px; height:92px; right:-22px; top:22px; background:linear-gradient(165deg,#ffd3aa,#ee5471 74%); box-shadow:inset 0 -17px 28px rgba(118,21,57,.2),0 32px 50px rgba(100,23,51,.22); animation:coinA 8s ease-in-out infinite; }
.coin-b { width:174px; height:63px; left:-48px; top:260px; background:linear-gradient(160deg,#ffbd8c,#e72f6b); box-shadow:inset 0 -12px 22px rgba(100,20,51,.24),0 28px 45px rgba(91,20,48,.25); animation:coinB 6.7s ease-in-out -2s infinite; }
.coin-c { width:138px; height:48px; right:4px; bottom:34px; background:linear-gradient(160deg,#ffe1b8,#f46a6f); box-shadow:inset 0 -10px 18px rgba(103,24,47,.2),0 24px 40px rgba(91,20,48,.22); animation:coinC 7.4s ease-in-out -3.5s infinite; }
.coin-d { width:76px; height:76px; left:26%; top:8%; border:1px solid rgba(255,255,255,.55); background:radial-gradient(circle at 34% 27%,#fff1dc 0 8%,#ffb889 35%,#df356d 78%); box-shadow:inset -10px -12px 20px rgba(103,20,54,.22),0 26px 44px rgba(92,21,48,.2); animation:coinD 5.8s ease-in-out -1s infinite; }
@keyframes coinA { 0%,100% { transform:translate3d(calc(var(--hero-x,0) * 20px),calc(var(--hero-y,0) * 13px),70px) rotate(-20deg) rotateY(-12deg); } 50% { transform:translate3d(calc(var(--hero-x,0) * 20px),calc(-16px + var(--hero-y,0) * 13px),100px) rotate(-12deg) rotateY(8deg); } }
@keyframes coinB { 0%,100% { transform:translate3d(calc(var(--hero-x,0) * -14px),calc(var(--hero-y,0) * -10px),120px) rotate(17deg); } 50% { transform:translate3d(calc(var(--hero-x,0) * -14px),calc(13px + var(--hero-y,0) * -10px),145px) rotate(27deg); } }
@keyframes coinC { 0%,100% { transform:translate3d(calc(var(--hero-x,0) * 24px),calc(var(--hero-y,0) * 17px),135px) rotate(-14deg); } 50% { transform:translate3d(calc(var(--hero-x,0) * 24px),calc(-18px + var(--hero-y,0) * 17px),165px) rotate(-2deg); } }
@keyframes coinD { 0%,100% { transform:translate3d(calc(var(--hero-x,0) * -22px),calc(var(--hero-y,0) * 18px),180px) rotate(0); } 50% { transform:translate3d(calc(var(--hero-x,0) * -22px),calc(-22px + var(--hero-y,0) * 18px),210px) rotate(24deg); } }
.orbit { inset: 2% -10% auto auto; width: 560px; border-color: rgba(255,255,255,.25); }
.orbit::before,.orbit::after { border-color: rgba(255,255,255,.16); }
.orbit-dot { background: #ffe2be; box-shadow: 0 0 34px #ffe2be; }
.road-card {
  inset: 62px 2% auto auto;
  width: min(100%,540px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 46px;
  background: #92294d;
  box-shadow: 0 50px 100px rgba(93,22,51,.34),inset 0 1px rgba(255,255,255,.2);
  animation:roadFloat 7s ease-in-out infinite;
}
@keyframes roadFloat {
  0%,100% { transform:translate3d(calc(var(--hero-x,0) * 9px),calc(var(--hero-y,0) * 7px),20px) rotate(4deg) rotateY(-5deg); }
  50% { transform:translate3d(calc(var(--hero-x,0) * 9px),calc(-12px + var(--hero-y,0) * 7px),30px) rotate(2deg) rotateY(2deg); }
}
.hero .road-map > rect { fill:#9b294f; }
.hero .road-map > g:first-of-type { fill:#ef8b80; opacity:.3; }
.hero .road-map path[stroke="#34433f"] { stroke:#572139; }
.hero .road-map path[stroke="#ffcf35"] { stroke:#ffd29b; }
.hero .road-map g[fill="#d5e3da"] { fill:#ffc49f; opacity:.55; }
.hero .road-map .car rect { fill:#fff3dc; }
.float-stat { z-index:6; border-color:rgba(255,255,255,.34); border-radius:22px; background:rgba(81,20,47,.5); box-shadow:0 16px 40px rgba(83,20,44,.19); }
.float-stat b { color:#ffe0bc; }
@keyframes float { 0%,100% { transform:translateZ(220px); } 50% { transform:translate3d(0,-10px,240px); } }
.feature-strip { padding: 120px 0 132px; background: var(--paper); }
.feature-intro { margin-bottom: 54px; }
.feature-intro p { max-width: 550px; justify-self:end; font-size:16px; }
.feature-grid { grid-template-columns:1.25fr .88fr .88fr; gap:18px; }
.feature-card { min-height:350px; padding:32px; border-radius:36px; background:#fffdfa; box-shadow:var(--shadow-soft); }
.feature-card:first-child { color:white; background:linear-gradient(145deg,#222 0%,#37201f 100%); }
.feature-card:nth-child(2) { background:#ffc46d; }
.feature-card:nth-child(3) { background:#c6b5ff; }
.feature-number { width:48px; height:48px; border-radius:50%; color:white; background:var(--ink); }
.feature-card:first-child .feature-number { color:var(--ink); background:white; }
.feature-card h3 { margin-top:105px; font-size:30px; font-weight:500; }
.feature-card p,.feature-card:first-child p { color:rgba(34,24,23,.68); font-size:15px; }
.feature-card:first-child p { color:rgba(255,255,255,.66); }
.mini-road { border-bottom-color:rgba(255,154,118,.25); }

/* Shared page stages */
.subpage-head,.practice-hero,.guide-hero,.library-hero {
  color:white;
  background:
    radial-gradient(circle at 82% 20%,rgba(255,202,151,.55),transparent 25rem),
    linear-gradient(125deg,#cb2d64,#f25855 55%,#ff9e72);
}
.subpage-head { padding: 150px 0 72px; }
.subpage-head .section-title { max-width:760px; }
.subpage-head .container > p { color:rgba(255,255,255,.7); }
.subpage-head .eyebrow,.practice-hero .eyebrow,.guide-hero .eyebrow,.library-hero .eyebrow { color:rgba(255,255,255,.78); }
.subpage-head .eyebrow::before,.practice-hero .eyebrow::before,.guide-hero .eyebrow::before,.library-hero .eyebrow::before { background:#ffe0ba; }
.choice-section,.dashboard,.progress-page,.practice-main,.result-page,.trust-page,.legal-page,.consent-page,.exam-setup,.library-body { background:var(--paper); }
.choice-section { padding-block:72px 120px; }
.exam-choice { min-height:520px; border:1px solid var(--line); border-radius:42px; box-shadow:var(--shadow-soft); }
.exam-choice.btt { background:linear-gradient(145deg,#282020,#422524); }
.exam-choice.btt::after { content:""; position:absolute; width:310px; height:310px; right:-80px; top:-90px; border-radius:50%; background:linear-gradient(145deg,#ef3d6d,#ff9b70); opacity:.9; filter:blur(1px); }
.exam-choice.locked { background:#e8ded7; }
.choice-code { font-size:clamp(78px,10vw,138px); font-weight:500; letter-spacing:-.08em; opacity:.09; }
.choice-chip { color:var(--ink); background:#ffbd72; }
.choice-meta { z-index:2; }

/* Learning centre and handbook lessons */
.dashboard { padding: 136px 0 120px; }
.dashboard-top { margin-bottom:42px; }
.dashboard-top h1 { font-size:clamp(55px,7vw,90px); font-weight:500; }
.dashboard-stat { padding:14px 19px 14px 14px; border:1px solid var(--line); border-radius:999px; background:white; box-shadow:var(--shadow-soft); }
.progress-ring { background:conic-gradient(var(--pink) calc(var(--p)*1%),#eee1da 0); }
.chapter-grid { gap:15px; }
.chapter-card { min-height:190px; padding:27px; border-radius:30px; background:rgba(255,253,251,.92); box-shadow:var(--shadow-soft); }
.chapter-card:hover { border-color:rgba(232,61,114,.25); box-shadow:0 24px 64px rgba(89,41,35,.14); transform:translateY(-4px); }
.chapter-card:nth-child(4n+1) .chapter-index { background:#ffb86f; }
.chapter-card:nth-child(4n+2) .chapter-index { background:#c2b0ff; }
.chapter-card:nth-child(4n+3) .chapter-index { background:#ff8f99; }
.chapter-index { color:var(--ink); background:#ffe0b6; border-radius:50%; }
.chapter-card.complete .chapter-index { color:white; background:#24976e; }
.chapter-tags .tag { background:#f3e9e3; }
.lesson-layout { padding-top:118px; padding-bottom:120px; gap:34px; }
.lesson-sidebar { top:100px; }
.back-link { border-radius:999px; }
.lesson-nav { padding:9px; border:1px solid var(--line); border-radius:24px; background:rgba(255,253,251,.8); }
.lesson-nav button { border-radius:17px; }
.lesson-nav button.active { color:white; background:linear-gradient(120deg,var(--pink),var(--lime)); }
.lesson-nav button i { border-radius:50%; }
.lesson-hero { min-height:390px; padding:clamp(32px,6vw,70px); border-radius:44px; background:linear-gradient(135deg,#241c1c,#4a2526 65%,#84303e); box-shadow:var(--shadow); }
.lesson-hero::after { content:""; position:absolute; width:240px; height:240px; right:-40px; top:-70px; border-radius:50%; border:54px solid rgba(255,137,112,.18); }
.lesson-hero h1 { max-width:850px; font-size:clamp(48px,7vw,88px); }
.lesson-trust-strip { margin:14px 0; border-radius:18px; background:#efe4dd; }
.lesson-body { padding-top:24px; }
.lesson-section { margin:24px 0; padding:clamp(26px,4vw,48px); border:1px solid var(--line); border-radius:34px; background:var(--card); box-shadow:var(--shadow-soft); }
.lesson-section h2 { font-size:clamp(28px,3vw,40px); font-weight:500; letter-spacing:-.04em; }
.fact { border-radius:22px; background:#f7eee8; }
.callout { border:0; border-radius:24px; background:#fff0e5; }
.callout.danger { background:#ffebeb; }
.callout-icon { border-radius:50%; color:white; background:var(--lime); }
.interactive-card { border:0; border-radius:36px; background:#211a1a; box-shadow:var(--shadow); }
.interactive-card .eyebrow { color:#ffb59a; }
.demo-stage { border-radius:26px; background:#372425; }
.demo-button { border-radius:999px; }
.demo-button.active { color:white; background:var(--lime); }
.manual-visuals { margin-top:48px; }
.manual-visuals-head { padding:0 4px 24px; }
.manual-count { color:white; background:var(--ink); border-radius:999px; }
.manual-page-group { padding:18px; border:1px solid var(--line); border-radius:34px; background:#eee3dc; }
.manual-page-group > header { padding:5px 8px 16px; }
.manual-teaching-card { overflow:hidden; border:0; border-radius:26px; background:#fffdfb; box-shadow:0 10px 28px rgba(71,38,31,.08); }
.manual-figure { background:#f5eee9; }
.manual-figure > span { border-radius:999px; background:rgba(31,24,23,.86); }
.manual-explanation { padding:24px; }
.study-cue { border-radius:18px; background:#fff0e4; }
.lesson-footer { margin-top:34px; padding:28px; border-radius:28px; background:#eadfd8; }

/* Consent */
.consent-page { padding:136px 0 110px; }
.consent-wrap > header h1 { font-size:clamp(48px,7vw,82px); font-weight:500; letter-spacing:-.065em; }
.consent-card { padding:clamp(28px,5vw,52px); border:1px solid var(--line); border-radius:40px; background:white; box-shadow:var(--shadow); }
.ai-seal { color:white; background:linear-gradient(145deg,var(--pink),var(--lime)); border-radius:50%; }
.risk-block { border-radius:24px; background:#fff0e5; }
.consent-check { border-radius:20px; background:#f2e9e3; }
.consent-check input { accent-color:var(--pink); }

/* Practice, quiz, exam and results */
.practice-hero { padding:142px 0 84px; }
.practice-hero h1 { font-size:clamp(55px,8vw,96px); }
.practice-count { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 8px rgba(255,255,255,.06); }
.practice-main { padding:72px 0 120px; }
.mode-card { min-height:240px; padding:30px; border-radius:32px; background:white; box-shadow:var(--shadow-soft); }
.mode-card:first-child { color:white; background:linear-gradient(145deg,#252020,#4a2728); }
.mode-icon,.category-icon { border-radius:50%; }
.category-grid { gap:14px; }
.category-card { min-height:160px; padding:22px; border-radius:27px; background:#fffdfb; box-shadow:var(--shadow-soft); }
.category-card.selected { color:white; border-color:transparent; background:linear-gradient(135deg,var(--pink),var(--lime)); }
.question-count-control { border-radius:999px; background:#eee3dc; }
.question-count-control button { border-radius:999px; }
.question-count-control button.active { color:white; background:var(--ink); }
.practice-bar { border-radius:999px; box-shadow:0 24px 70px rgba(63,31,27,.17); }
.quiz-shell { padding-top:112px; background:var(--paper); }
.quiz-top { border-radius:26px; }
.quiz-progress,.bar { background:#eadfd8; }
.quiz-progress i,.bar i { background:linear-gradient(90deg,var(--pink),var(--lime)); }
.quiz-card { padding:clamp(26px,5vw,52px); border-radius:40px; box-shadow:var(--shadow); }
.question-number { color:white; background:var(--ink); border-radius:999px; }
.question-text { font-size:clamp(25px,3vw,39px); font-weight:500; letter-spacing:-.03em; }
.answer { border-radius:22px; }
.answer:hover { border-color:rgba(232,61,114,.35); background:#fff4ed; }
.answer.selected { border-color:var(--pink); background:#fff0e8; }
.answer.correct { border-color:#3ca87e; background:#eaf8f2; }
.answer.wrong { border-color:#dd4c5d; background:#fff0f1; }
.answer-key { border-radius:50%; }
.answer-feedback { border-radius:24px; }
.exam-navigator,.exam-status { border-radius:28px; box-shadow:var(--shadow-soft); }
.question-map button { border-radius:50%; }
.question-map button.answered { color:white; background:var(--ink); }
.question-map button.active { color:white; background:var(--pink); }
.exam-setup { padding:138px 0 110px; }
.exam-setup-grid > section,.exam-setup aside { border-radius:40px; }
.exam-setup-grid > section { background:linear-gradient(140deg,#251d1d,#5a292e); }
.exam-rule-grid > div { border-radius:24px; }
.result-page { padding:130px 0 110px; }
.result-hero { border-radius:42px; background:linear-gradient(135deg,#241d1d,#552a2c); box-shadow:var(--shadow); }
.result-score { border-color:var(--lime); }
.panel,.answer-review { border-radius:32px; background:white; box-shadow:var(--shadow-soft); }
.review-item { border-radius:24px; }

/* Guide, resource library, trust and progress */
.guide-hero { padding:144px 0 88px; }
.guide-cover { padding:12px; border-radius:28px; background:rgba(255,255,255,.15); }
.guide-cover img { border-radius:18px; }
.guide-verified { border-radius:999px; background:rgba(255,255,255,.14); }
.guide-content { padding-block:72px 120px; }
.guide-section { padding:clamp(26px,4vw,48px); border-radius:36px; box-shadow:var(--shadow-soft); }
.guide-heading > span { color:white; background:var(--ink); border-radius:50%; }
.licence-choice { border-radius:27px; }
.licence-choice.selected { border-color:transparent; background:#fff0e6; box-shadow:inset 0 0 0 2px var(--lime); }
.licence-choice > i { border-radius:50%; background:var(--lime); }
.guide-progress > div { background:#eadfd8; }
.guide-progress > div i { background:linear-gradient(90deg,var(--pink),var(--lime)); }
.guide-step,.fee-card,.centre-card,.check-item,.official-link-grid a { border-radius:22px; }
.guide-step.complete { background:#fff0e7; }
.guide-step > span { border-radius:50%; }
.fee-card:nth-child(1) { background:#ffc472; }
.fee-card:nth-child(2) { background:#c6b4ff; }
.fee-card:nth-child(3) { background:#ff98a5; }
.fee-card:nth-child(4) { background:#fff0dd; }
.centre-card:hover { color:white; border-color:var(--pink); background:var(--pink); }
.library-hero { padding:145px 0 64px; }
.library-hero nav { padding:5px; border-radius:999px; background:rgba(255,255,255,.13); }
.library-hero nav button { border-radius:999px; }
.library-hero nav button.active { color:var(--ink); background:white; }
.library-body { padding:65px 0 120px; }
.library-search,.compact-search { border-radius:999px; box-shadow:var(--shadow-soft); }
.library-overview article,.search-result,.glossary-card,.atlas-card { border-radius:26px; background:#fffdfb; box-shadow:var(--shadow-soft); }
.atlas-card { overflow:hidden; }
.atlas-card > button { background:#f2e9e3; }
.atlas-filters button.active { color:white; border-color:var(--pink); background:var(--pink); }
.trust-page { padding:140px 0 120px; }
.trust-date { color:white; background:var(--ink); border-radius:999px; }
.trust-type-grid article,.source-register { border-radius:30px; box-shadow:var(--shadow-soft); }
.trust-action { border-radius:28px; background:linear-gradient(135deg,#231c1c,#51292b); }
.trust-action span { border-radius:50%; }
.source-register a { border-radius:18px; }
.progress-page { padding:140px 0 120px; }
.metric { min-height:170px; border-radius:30px; box-shadow:var(--shadow-soft); }
.metric.primary-metric { background:linear-gradient(135deg,#251e1e,#582a2d); }
.heatmap i { border-radius:50%; }
.heatmap i.active { background:var(--pink); }

/* Legal, data settings and footer */
.legal-page { padding:132px 0 110px; }
.legal-layout aside { top:100px; }
.legal-layout aside nav a { border-radius:999px; }
.legal-layout aside nav a:hover,.legal-layout aside nav a.active { color:white; background:var(--ink); }
.legal-layout article,.data-settings-card { border-radius:40px; box-shadow:var(--shadow); }
.legal-layout article > section { border-bottom:1px solid var(--line); padding-bottom:32px; }
.legal-layout article > section:last-child { border-bottom:0; }
.data-summary > div { border-radius:24px; background:#f2e8e1; }
.data-settings-card details,.data-danger { border-radius:22px; }
.button.danger { background:#a9303e; }
.site-footer { color:rgba(255,255,255,.66); background:#1e1717; }
.footer-shell { display:block; padding-top:76px; }
.footer-cta { padding:46px; border:0; border-radius:40px; background:linear-gradient(115deg,#d82f68,#f25455 60%,#ff9d70); }
.footer-kicker { color:#ffe1ba; }
.footer-cta h2 { font-size:clamp(34px,4.2vw,60px); font-weight:500; }
.footer-primary { color:var(--ink); background:white; }
.footer-secondary { background:rgba(255,255,255,.12); }
.footer-cta,.footer-grid,.footer-bottom { width:100%; min-width:0; }
.footer-grid { padding-top:64px; }
.footer-grid > * { min-width:0; }
.footer-bottom p { min-width:0; }
.footer-about .brand-mark { background:rgba(255,255,255,.08); }
.footer-column a:hover,.footer-data-link { color:#ff9e82 !important; }

/* Dynamic theme application across every route */
.site-header:not(.light) .language-toggle .active-lang { color:var(--theme-dark); background:color-mix(in srgb,var(--theme-surface) 94%,transparent); }
.site-header.light .language-toggle .active-lang,.language-menu button.active b,.ai-seal,.category-card.selected { color:var(--theme-on-accent); background:var(--theme-accent-gradient); }
.eyebrow { color:color-mix(in srgb,var(--theme-ink) 55%,var(--theme-primary)); }
.eyebrow::before { background:var(--theme-secondary); box-shadow:0 0 0 5px color-mix(in srgb,var(--theme-secondary) 16%,transparent); }
.button.primary,.quiz-progress i,.bar i,.guide-progress > div i { background:var(--theme-accent-gradient); }
.button.primary { color:var(--theme-on-accent); }
.button.primary { box-shadow:0 15px 34px color-mix(in srgb,var(--theme-primary) 25%,transparent); }
.button.primary:hover { background:var(--theme-accent-gradient); box-shadow:0 18px 42px color-mix(in srgb,var(--theme-primary) 34%,transparent); filter:saturate(1.08) brightness(1.04); }
.hero { background:var(--theme-hero); }
.subpage-head,.practice-hero,.guide-hero,.library-hero { background:var(--theme-stage); }
.hero-grid { background:radial-gradient(circle at var(--glow-x,72%) var(--glow-y,24%),rgba(255,255,255,.18),transparent 24rem),linear-gradient(110deg,color-mix(in srgb,var(--theme-dark) 18%,transparent),rgba(255,255,255,.04)); }
.hero-visual::before { background:linear-gradient(145deg,rgba(255,255,255,.18),color-mix(in srgb,var(--theme-dark) 13%,transparent)); box-shadow:0 42px 100px color-mix(in srgb,var(--theme-dark) 20%,transparent); }
.hero-visual::after,.float-stat { background:color-mix(in srgb,var(--theme-dark) 58%,transparent); }
.hero-coin.coin-a,.hero-coin.coin-c { background:var(--theme-coin-1); }
.hero-coin.coin-b { background:var(--theme-coin-2); }
.hero-coin.coin-d { background:radial-gradient(circle at 34% 27%,#fff 0 8%,var(--theme-tertiary) 35%,var(--theme-primary) 78%); }
.road-card { background:var(--theme-road); box-shadow:0 50px 100px color-mix(in srgb,var(--theme-dark) 38%,transparent),inset 0 1px rgba(255,255,255,.2); }
.hero .road-map > rect { fill:var(--theme-road); }
.hero .road-map > g:first-of-type { fill:var(--theme-tertiary); }
.hero .road-map path[stroke="#34433f"] { stroke:var(--theme-road-dark); }
.hero .road-map path[stroke="#ffcf35"] { stroke:var(--theme-accent); }
.hero .road-map g[fill="#d5e3da"] { fill:var(--theme-road-block); }
.hero .road-map .car rect { fill:color-mix(in srgb,var(--theme-accent) 60%,white); }
.orbit-dot { background:var(--theme-accent); box-shadow:0 0 34px var(--theme-accent); }
.feature-card,.chapter-card,.mode-card,.category-card,.lesson-section,.manual-teaching-card,.consent-card,.quiz-card,.panel,.answer-review,.guide-section,.library-overview article,.search-result,.glossary-card,.atlas-card,.trust-type-grid article,.source-register,.metric,.legal-layout article,.data-settings-card { background:var(--theme-surface); }
.feature-card:first-child,.exam-choice.btt,.mode-card:first-child,.lesson-hero,.exam-setup-grid > section,.result-hero,.trust-action,.metric.primary-metric { background:var(--theme-dark-gradient); }
.feature-card:nth-child(2),.fee-card:nth-child(1) { background:color-mix(in srgb,var(--theme-accent) 78%,white); }
.feature-card:nth-child(3),.fee-card:nth-child(2) { background:color-mix(in srgb,var(--theme-alt) 75%,white); }
.fee-card:nth-child(3) { background:color-mix(in srgb,var(--theme-tertiary) 67%,white); }
.fee-card:nth-child(4) { background:var(--theme-soft); }
.feature-number,.guide-heading > span,.question-number,.question-count-control button.active,.question-map button.answered,.trust-date { background:var(--theme-dark); }
.exam-choice.btt::after { background:var(--theme-accent-gradient); }
.chapter-card:nth-child(4n+1) .chapter-index { background:color-mix(in srgb,var(--theme-accent) 75%,white); }
.chapter-card:nth-child(4n+2) .chapter-index { background:color-mix(in srgb,var(--theme-alt) 78%,white); }
.chapter-card:nth-child(4n+3) .chapter-index { background:color-mix(in srgb,var(--theme-tertiary) 75%,white); }
.chapter-card:nth-child(4n+4) .chapter-index { background:color-mix(in srgb,var(--theme-secondary) 40%,white); }
.chapter-tags .tag,.fact,.lesson-trust-strip,.manual-page-group,.lesson-footer,.consent-check,.question-count-control,.quiz-progress,.bar,.guide-progress > div,.atlas-card > button,.data-summary > div { background:var(--theme-soft-2); }
.callout,.risk-block,.study-cue,.answer:hover,.answer.selected,.licence-choice.selected,.guide-step.complete { background:var(--theme-soft); }
.answer.selected { border-color:var(--theme-primary); }
.demo-stage { background:color-mix(in srgb,var(--theme-dark-2) 72%,var(--theme-dark)); }
.interactive-card,.site-footer { background:var(--theme-dark); }
.demo-button.active,.licence-choice > i,.heatmap i.active,.atlas-filters button.active,.question-map button.active { color:var(--theme-on-accent); background:var(--theme-primary); }
.manual-count { background:var(--theme-dark); }
.practice-bar { background:color-mix(in srgb,var(--theme-dark) 96%,transparent); }
.centre-card:hover { border-color:var(--theme-primary); background:var(--theme-primary); }
.library-hero nav button.active { color:var(--theme-ink); background:var(--theme-surface); }
.atlas-filters button.active { border-color:var(--theme-primary); }
.legal-layout aside nav a:hover,.legal-layout aside nav a.active { background:var(--theme-dark); }
.footer-cta { background:var(--theme-footer-gradient); }
.footer-kicker { color:color-mix(in srgb,var(--theme-accent) 75%,white); }
.footer-column a:hover,.footer-data-link { color:var(--theme-tertiary) !important; }
.toast { background:var(--theme-dark); }
body,.hero,.subpage-head,.practice-hero,.guide-hero,.library-hero,.site-footer,.footer-cta,.road-card,.feature-card,.chapter-card,.mode-card,.category-card { transition:background .46s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease; }

/* Motion language shared across every view */
.reveal-item { opacity:0; transform:translateY(28px) scale(.985); transition:opacity .72s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),transform .72s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms); }
.reveal-item.is-visible { opacity:1; transform:none; }
.chapter-card,.category-card,.mode-card,.guide-step,.atlas-card,.glossary-card,.search-result,.centre-card { transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,background .3s ease,border-color .3s ease; }
.chapter-card:hover,.category-card:hover,.mode-card:hover,.atlas-card:hover,.glossary-card:hover,.search-result:hover,.centre-card:hover { transform:translateY(-5px); box-shadow:0 25px 65px rgba(73,35,31,.14); }

@media (max-width: 1000px) {
  .site-header { grid-template-columns:1fr auto; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:820px; }
  .hero-visual { min-height:520px; }
  .road-card { inset:18px auto auto 50%; transform:translateX(-50%) rotate(2deg); animation:roadFloatTablet 7s ease-in-out infinite; }
  @keyframes roadFloatTablet {
    0%,100% { transform:translate3d(calc(-50% + var(--hero-x,0) * 8px),calc(var(--hero-y,0) * 6px),20px) rotate(2deg); }
    50% { transform:translate3d(calc(-50% + var(--hero-x,0) * 8px),calc(-10px + var(--hero-y,0) * 6px),28px) rotate(-1deg); }
  }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .feature-card:first-child { grid-column:1/-1; }
}

@media (max-width: 900px) {
  .site-header { top:10px; padding-inline:14px; }
  .top-nav { top:84px; left:16px; right:16px; width:auto; padding:10px; border-radius:24px; background:color-mix(in srgb,var(--theme-dark) 96%,transparent); }
  .site-header.light .top-nav { background:color-mix(in srgb,var(--theme-surface) 97%,transparent); }
  .top-nav.open { display:grid; grid-template-columns:repeat(5,1fr); }
  .top-nav button { padding:11px 8px; }
  .hero-grid { padding-top:118px; }
  .lesson-layout { padding-top:106px; }
}

@media (max-width: 620px) {
  :root { --header-h:60px; --radius-xl:30px; --radius-lg:26px; }
  .container { width:min(100% - 28px,var(--max)); }
  .site-header { width:calc(100% - 20px); top:10px; height:60px; border-radius:18px; }
  .site-header.scrolled { top:6px; }
  .brand { font-size:14px; }
  .brand-mark { width:32px; height:32px; }
  .header-actions { gap:5px; }
  .theme-toggle { width:38px; min-height:38px; }
  .theme-menu { position:fixed; top:76px; left:10px; right:10px; width:auto; max-height:calc(100svh - 90px); overflow:auto; }
  .top-nav { top:76px; left:10px; right:10px; }
  .top-nav.open { grid-template-columns:1fr 1fr; }
  .top-nav button:last-child { grid-column:1/-1; }
  .hero { padding:8px; }
  .hero-grid { min-height:calc(100svh - 16px); width:100%; padding:105px 22px 28px; border-radius:25px; }
  .display { font-size:clamp(50px,15vw,68px); line-height:.91; }
  html[lang="ta"] .display { font-size:43px; line-height:1.02; }
  .hero-actions .button { flex:1 1 150px; }
  .hero-proof { margin-top:38px; gap:12px; }
  .hero-proof > div { min-width:27%; }
  .hero-visual { min-height:390px; }
  .hero-visual::before { width:88%; height:70%; right:1%; top:15%; border-radius:32px; }
  .hero-visual::after { left:2%; bottom:0; font-size:8px; }
  .hero-coins { inset:-4% -14%; }
  .coin-a { width:170px; height:64px; top:-14px; right:-18px; }
  .coin-b { width:110px; height:42px; left:-18px; top:110px; }
  .coin-c { width:94px; height:36px; bottom:12px; right:0; }
  .coin-d { width:48px; height:48px; top:0; left:25%; }
  .road-card { width:360px; max-width:106vw; border-radius:30px; }
  .feature-strip { padding:75px 0; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card:first-child { grid-column:auto; }
  .feature-card { min-height:290px; border-radius:28px; }
  .feature-card h3 { margin-top:72px; }
  .subpage-head { padding:118px 0 54px; }
  .choice-section { padding:36px 0 72px; }
  .exam-choice { min-height:390px; border-radius:30px; }
  .dashboard,.progress-page,.trust-page { padding-top:112px; }
  .dashboard-top h1 { font-size:53px; }
  .dashboard-stat { border-radius:24px; }
  .chapter-card { border-radius:24px; }
  .lesson-layout { padding-top:95px; }
  .lesson-hero { min-height:300px; border-radius:30px; }
  .lesson-section,.manual-page-group,.interactive-card { border-radius:26px; }
  .manual-teaching-card { border-radius:20px; }
  .consent-page,.exam-setup,.result-page,.legal-page { padding-top:108px; }
  .consent-card,.quiz-card,.result-hero,.legal-layout article,.data-settings-card { border-radius:28px; }
  .practice-hero,.guide-hero,.library-hero { padding-top:118px; }
  .practice-bar { border-radius:26px; }
  .quiz-shell { padding-top:92px; }
  .guide-section { border-radius:28px; }
  .library-hero nav { border-radius:22px; }
  .library-search,.compact-search { border-radius:22px; }
  .metric,.panel,.trust-type-grid article,.source-register { border-radius:25px; }
  .footer-shell { width:min(100% - 22px,var(--max)); }
  .footer-cta { padding:30px 24px; border-radius:28px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-about { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item { opacity:1; transform:none; }
  .hero::before,.hero::after,.road-card { animation:none !important; }
}

/* Immersive product homepage */
.home-motion-hero {
  min-height:100svh;
  padding:14px;
  isolation:isolate;
  background:var(--paper);
}
.home-motion-hero::before,.home-motion-hero::after { display:none; }
.home-motion-frame {
  position:relative;
  min-height:calc(100svh - 28px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.44);
  border-radius:clamp(30px,3vw,48px);
  color:#fff;
  background:
    radial-gradient(circle at var(--glow-x,70%) var(--glow-y,24%),rgba(255,255,255,.3),transparent 22rem),
    radial-gradient(circle at 12% 92%,color-mix(in srgb,var(--theme-dark) 28%,transparent),transparent 31rem),
    var(--theme-hero);
  box-shadow:0 28px 90px color-mix(in srgb,var(--theme-dark) 22%,transparent),inset 0 1px rgba(255,255,255,.16);
  transition:background .46s ease,box-shadow .46s ease;
}
.motion-kicker {
  position:absolute;
  z-index:9;
  left:clamp(24px,4vw,68px);
  top:clamp(100px,13vh,145px);
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  color:rgba(255,255,255,.72);
}
.home-motion-stage {
  position:absolute;
  z-index:1;
  inset:70px 2% 70px;
  perspective:1500px;
  transform-style:preserve-3d;
  contain:layout paint style;
}
.motion-aura { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; }
.aura-one { width:48vw; height:48vw; min-width:460px; min-height:460px; right:9%; top:3%; background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,.05) 38%,transparent 69%); animation:motionAura 9s ease-in-out infinite alternate; }
.aura-two { width:32vw; height:32vw; min-width:300px; min-height:300px; left:8%; bottom:-16%; background:radial-gradient(circle,color-mix(in srgb,var(--theme-tertiary) 42%,transparent),transparent 68%); animation:motionAura 11s ease-in-out -4s infinite alternate-reverse; }
@keyframes motionAura { to { transform:translate3d(4vw,-2vw,20px) scale(1.12); } }
.motion-grid {
  position:absolute;
  inset:9% 7%;
  opacity:.18;
  border-radius:50%;
  background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(circle,#000,transparent 70%);
  transform:rotateX(65deg) translateZ(-180px) scale(1.35);
}
.motion-rings {
  position:absolute;
  z-index:1;
  width:min(73vw,970px);
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate3d(-50%,-50%,-80px) rotateX(66deg) rotateZ(-8deg);
  transform-style:preserve-3d;
}
.motion-rings i { position:absolute; border:1px solid rgba(255,255,255,.28); border-radius:50%; animation:motionRing 18s linear infinite; }
.motion-rings i:nth-child(1) { inset:0; border-width:2px; }
.motion-rings i:nth-child(2) { inset:12%; animation-duration:14s; animation-direction:reverse; }
.motion-rings i:nth-child(3) { inset:26%; border-color:color-mix(in srgb,var(--theme-accent) 76%,white); animation-duration:9s; }
.motion-rings i::after { content:""; position:absolute; width:14px; height:14px; top:50%; left:-7px; border-radius:50%; background:var(--theme-accent); box-shadow:0 0 28px var(--theme-accent); }
.motion-rings b { position:absolute; inset:42%; border-radius:50%; background:rgba(255,255,255,.2); box-shadow:0 0 80px rgba(255,255,255,.35); animation:pulse 2.8s ease-in-out infinite; }
@keyframes motionRing { to { transform:rotate(360deg); } }
.motion-coins { z-index:5; inset:-2% 0; }
.home-motion-stage .coin-a { right:2%; top:6%; width:clamp(190px,19vw,340px); height:clamp(70px,7vw,125px); }
.home-motion-stage .coin-b { left:3%; top:35%; width:clamp(150px,15vw,270px); height:clamp(54px,5.4vw,96px); }
.home-motion-stage .coin-c { right:4%; bottom:8%; width:clamp(130px,13vw,230px); height:clamp(46px,4.7vw,84px); }
.home-motion-stage .coin-d { left:27%; top:3%; width:clamp(65px,7vw,118px); height:clamp(65px,7vw,118px); }
.home-motion-stage .motion-road {
  z-index:3;
  inset:50% auto auto 50%;
  width:min(43vw,650px);
  min-width:520px;
  border-radius:clamp(36px,4vw,62px);
  transform-origin:center;
  animation:motionRoadHero 8s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes motionRoadHero {
  0%,100% { transform:translate3d(calc(-50% + var(--hero-x,0) * 12px),calc(-50% + var(--hero-y,0) * 9px),120px) rotate(-5deg) rotateY(-6deg); }
  50% { transform:translate3d(calc(-50% + var(--hero-x,0) * 12px),calc(-53% + var(--hero-y,0) * 9px),150px) rotate(-1deg) rotateY(4deg); }
}
.motion-card-label { position:absolute; left:28px; bottom:25px; padding:10px 15px; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:rgba(255,255,255,.82); background:color-mix(in srgb,var(--theme-dark) 55%,transparent); backdrop-filter:blur(14px); font-size:10px; font-weight:800; letter-spacing:.14em; }
.motion-token {
  position:absolute;
  z-index:6;
  min-width:160px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:25px;
  background:color-mix(in srgb,var(--theme-dark) 50%,transparent);
  box-shadow:0 24px 70px color-mix(in srgb,var(--theme-dark) 23%,transparent);
  backdrop-filter:blur(18px);
  transform-style:preserve-3d;
}
.motion-token small { display:block; margin-bottom:5px; color:rgba(255,255,255,.64); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.motion-token strong { display:block; color:color-mix(in srgb,var(--theme-accent) 74%,white); font-size:clamp(25px,2.5vw,42px); line-height:1; }
.token-score { left:13%; top:17%; animation:tokenFloat 5.8s ease-in-out infinite; }
.token-book { right:13%; top:21%; animation:tokenFloat 6.7s ease-in-out -2.1s infinite; }
.token-gap { right:15%; bottom:13%; animation:tokenFloat 5.2s ease-in-out -3.3s infinite; }
.token-question { left:19%; bottom:12%; min-width:0; width:88px; height:88px; display:grid; place-items:center; padding:0; border-radius:50%; color:var(--theme-dark); background:color-mix(in srgb,var(--theme-accent) 80%,white); font-size:50px; font-weight:800; animation:questionFloat 5s ease-in-out infinite; }
@keyframes tokenFloat { 0%,100% { transform:translate3d(calc(var(--hero-x,0) * -14px),calc(var(--hero-y,0) * -10px),240px) rotate(-2deg); } 50% { transform:translate3d(calc(var(--hero-x,0) * -14px),calc(-15px + var(--hero-y,0) * -10px),280px) rotate(2deg); } }
@keyframes questionFloat { 0%,100% { transform:translate3d(calc(var(--hero-x,0) * 16px),calc(var(--hero-y,0) * 9px),260px) rotate(-8deg); } 50% { transform:translate3d(calc(var(--hero-x,0) * 16px),calc(-18px + var(--hero-y,0) * 9px),290px) rotate(8deg); } }
.motion-footer { position:absolute; z-index:10; left:clamp(24px,4vw,68px); right:clamp(24px,4vw,68px); bottom:25px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:rgba(255,255,255,.7); font-size:12px; }
.motion-footer > span { max-width:360px; }
.motion-footer button { display:flex; align-items:center; gap:10px; padding:10px 0; color:#fff; background:none; border:0; cursor:pointer; font:inherit; font-weight:700; }
.motion-footer button i { position:relative; width:34px; height:34px; border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.motion-footer button i::before { content:""; position:absolute; width:5px; height:5px; left:13px; top:10px; border-right:1.5px solid white; border-bottom:1.5px solid white; transform:rotate(45deg); animation:scrollCue 1.7s ease-in-out infinite; }
@keyframes scrollCue { 50% { transform:translateY(6px) rotate(45deg); opacity:.45; } }

.home-intro { padding:clamp(105px,13vw,190px) 0 105px; background:var(--paper); }
.home-intro-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr); gap:clamp(45px,9vw,140px); align-items:end; }
.home-intro h1 { max-width:930px; margin:20px 0 0; font-size:clamp(65px,9.2vw,142px); line-height:.84; letter-spacing:-.085em; }
html[lang="ta"] .home-intro h1 { font-size:clamp(50px,7.6vw,110px); line-height:.94; letter-spacing:-.055em; }
.home-intro-copy { padding-bottom:7px; }
.home-intro-copy p { margin:0; color:var(--muted); font-size:clamp(17px,1.5vw,22px); line-height:1.75; }
.home-intro .hero-actions { margin-top:32px; }
.home-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(75px,10vw,140px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.home-proof-grid div { min-height:145px; display:flex; flex-direction:column; justify-content:center; padding:22px 28px; border-right:1px solid var(--line); }
.home-proof-grid div:first-child { padding-left:0; }
.home-proof-grid div:last-child { border-right:0; }
.home-proof-grid strong { font-size:clamp(37px,4vw,64px); line-height:1; letter-spacing:-.055em; }
.home-proof-grid span { margin-top:9px; color:var(--muted); font-size:12px; }

.home-story-index { padding:130px 0 80px; color:#fff; background:var(--theme-dark); }
.home-story-index span { color:var(--theme-tertiary); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.home-story-index h2 { max-width:1140px; margin:32px 0 0; font-size:clamp(55px,7.6vw,112px); line-height:.91; letter-spacing:-.075em; }
html[lang="ta"] .home-story-index h2 { font-size:clamp(45px,6.2vw,88px); line-height:1; }
.home-story { position:relative; overflow:hidden; padding:clamp(100px,11vw,165px) 0; background:var(--theme-soft); }
.home-story:nth-child(even) { background:var(--theme-surface); }
.home-story:nth-child(3n) { color:#fff; background:var(--theme-dark-gradient); }
.home-story-grid { display:grid; grid-template-columns:minmax(300px,.68fr) minmax(0,1.32fr); gap:clamp(45px,7vw,110px); align-items:center; }
.home-story.reverse .home-story-copy { order:2; }
.home-story.reverse .home-shot { order:1; }
.home-story-copy { position:relative; z-index:2; }
.home-story-number { display:block; margin-bottom:clamp(55px,7vw,100px); color:var(--theme-primary); font-size:12px; font-weight:800; letter-spacing:.12em; }
.home-story:nth-child(3n) .home-story-number { color:var(--theme-tertiary); }
.home-story-copy small { display:block; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.home-story:nth-child(3n) .home-story-copy small,.home-story:nth-child(3n) .home-story-copy p { color:rgba(255,255,255,.66); }
.home-story-copy h2 { margin:18px 0 27px; font-size:clamp(43px,5.2vw,78px); line-height:.95; letter-spacing:-.065em; }
html[lang="ta"] .home-story-copy h2 { font-size:clamp(38px,4.4vw,64px); line-height:1.03; }
.home-story-copy p { margin:0; color:var(--muted); font-size:16px; line-height:1.82; }
.home-story-copy > b { display:block; width:fit-content; margin-top:30px; padding:10px 13px; border:1px solid currentColor; border-radius:999px; color:var(--theme-primary); font-size:11px; }
.home-story:nth-child(3n) .home-story-copy > b { color:var(--theme-tertiary); }
.home-text-link { display:flex; align-items:center; gap:10px; margin-top:42px; padding:0 0 7px; border:0; border-bottom:1px solid currentColor; color:inherit; background:none; cursor:pointer; font:inherit; font-weight:700; }
.home-text-link i { font-style:normal; transition:transform .25s ease; }
.home-text-link:hover i { transform:translate(4px,-4px); }
.home-shot { position:relative; z-index:1; margin:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--line) 70%,white); border-radius:clamp(28px,3.4vw,52px); background:var(--theme-surface); box-shadow:0 45px 100px color-mix(in srgb,var(--theme-dark) 18%,transparent); transform:perspective(1200px) rotateY(calc(var(--hero-x,0) * -2deg)); transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .5s ease; }
.home-story.reverse .home-shot { transform:perspective(1200px) rotateY(2.5deg) rotateZ(-.6deg); }
.home-story:not(.reverse) .home-shot { transform:perspective(1200px) rotateY(-2.5deg) rotateZ(.6deg); }
.home-shot:hover,.home-story.reverse .home-shot:hover,.home-story:not(.reverse) .home-shot:hover { transform:perspective(1200px) rotateY(0) rotateZ(0) translateY(-8px); box-shadow:0 60px 125px color-mix(in srgb,var(--theme-dark) 24%,transparent); }
.home-shot-bar { height:44px; display:flex; align-items:center; gap:7px; padding:0 17px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--theme-surface) 92%,var(--theme-soft)); }
.home-shot-bar i { width:7px; height:7px; border-radius:50%; background:var(--theme-primary); opacity:.4; }
.home-shot-bar i:nth-child(2) { background:var(--theme-accent); opacity:.7; }
.home-shot-bar i:nth-child(3) { background:var(--theme-alt); opacity:.7; }
.home-shot-bar span { margin-left:auto; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.home-shot img { display:block; width:100%; aspect-ratio:1.48; object-fit:cover; object-position:top; background:var(--theme-soft); transition:transform 1s cubic-bezier(.16,1,.3,1),filter .5s ease; }
.home-shot:hover img { transform:scale(1.018); }
.home-shot figcaption { position:absolute; right:18px; bottom:17px; max-width:70%; padding:9px 12px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#fff; background:color-mix(in srgb,var(--theme-dark) 70%,transparent); backdrop-filter:blur(12px); font-size:9px; font-weight:700; letter-spacing:.08em; }

.home-workflow { padding:clamp(110px,12vw,180px) 0; background:var(--paper); }
.home-workflow-head { display:grid; grid-template-columns:.45fr 1.1fr .65fr; gap:50px; align-items:start; }
.home-workflow-head h2 { margin:0; font-size:clamp(53px,6.7vw,100px); line-height:.92; letter-spacing:-.075em; }
.home-workflow-head p { margin:0; color:var(--muted); font-size:15px; line-height:1.8; }
.home-step-grid { display:grid; grid-template-columns:repeat(5,1fr); margin-top:105px; border-top:1px solid var(--line); }
.home-step { position:relative; min-height:300px; padding:28px 25px 22px 0; border-right:1px solid var(--line); }
.home-step:not(:first-child) { padding-left:25px; }
.home-step:last-child { border-right:0; }
.home-step > span { color:var(--theme-primary); font-size:11px; font-weight:800; }
.home-step h3 { margin:100px 0 15px; font-size:24px; letter-spacing:-.04em; }
.home-step p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.home-step i { position:absolute; width:9px; height:9px; top:-5px; left:0; border-radius:50%; background:var(--theme-primary); box-shadow:0 0 0 8px color-mix(in srgb,var(--theme-primary) 11%,transparent); }

.home-bento { padding:clamp(110px,12vw,180px) 0; color:#fff; background:var(--theme-dark); }
.home-bento-head { display:grid; grid-template-columns:.65fr 1.35fr; gap:50px; margin-bottom:75px; align-items:start; }
.home-bento-head .eyebrow { color:var(--theme-tertiary); }
.home-bento-head h2 { max-width:980px; margin:0; font-size:clamp(52px,6.2vw,92px); line-height:.94; letter-spacing:-.07em; }
.home-bento-grid { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:auto auto; gap:18px; }
.home-bento-card { position:relative; min-height:360px; overflow:hidden; padding:36px; border:1px solid rgba(255,255,255,.13); border-radius:38px; background:rgba(255,255,255,.065); }
.home-bento-card > span { display:inline-flex; min-width:48px; height:48px; align-items:center; justify-content:center; padding:0 10px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:var(--theme-tertiary); font-size:12px; font-weight:800; }
.home-bento-card h3 { max-width:600px; margin:74px 0 17px; font-size:clamp(31px,3.2vw,48px); line-height:1; letter-spacing:-.055em; }
.home-bento-card p { max-width:570px; margin:0; color:rgba(255,255,255,.62); font-size:14px; line-height:1.75; }
.home-bento-card button { margin-top:28px; padding:0 0 7px; border:0; border-bottom:1px solid currentColor; color:var(--theme-tertiary); background:none; cursor:pointer; font:inherit; font-size:12px; font-weight:700; }
.theme-card { background:linear-gradient(145deg,color-mix(in srgb,var(--theme-primary) 75%,var(--theme-dark)),color-mix(in srgb,var(--theme-secondary) 55%,var(--theme-dark))); }
.language-card { color:var(--theme-dark); background:var(--theme-accent); }
.language-card > span { color:var(--theme-dark); border-color:color-mix(in srgb,var(--theme-dark) 28%,transparent); }
.language-card p { color:color-mix(in srgb,var(--theme-dark) 68%,transparent); }
.trust-card { grid-column:1/2; }
.local-card { grid-column:2/3; background:color-mix(in srgb,var(--theme-alt) 78%,var(--theme-dark)); }
.bento-swatches { position:absolute; right:28px; top:28px; display:flex; }
.bento-swatches i { width:44px; height:44px; margin-left:-8px; border:3px solid color-mix(in srgb,var(--theme-dark) 35%,transparent); border-radius:50%; background:#ef4d5f; }
.bento-swatches i:nth-child(2){background:#0f8e91}.bento-swatches i:nth-child(3){background:#7c3aed}.bento-swatches i:nth-child(4){background:#0669e8}.bento-swatches i:nth-child(5){background:#b88932}.bento-swatches i:nth-child(6){background:#8f5969}

.home-final { padding:14px; color:#fff; background:var(--paper); }
.home-final-inner { width:100%; max-width:none; min-height:75svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 30px; border-radius:48px; text-align:center; background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.22),transparent 27rem),var(--theme-hero); }
.home-final-inner > span { font-size:10px; font-weight:800; letter-spacing:.18em; color:rgba(255,255,255,.68); }
.home-final h2 { max-width:1120px; margin:40px auto 25px; font-size:clamp(60px,8.4vw,132px); line-height:.86; letter-spacing:-.08em; }
html[lang="ta"] .home-final h2 { font-size:clamp(48px,7vw,98px); line-height:.96; }
.home-final p { max-width:650px; margin:0 auto; color:rgba(255,255,255,.72); font-size:17px; line-height:1.7; }
.home-final-inner > div { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:40px; }

.home-intro.reveal-item h1,.home-story-index.reveal-item h2,.home-workflow-head.reveal-item h2,.home-bento-head.reveal-item h2,.home-final-inner.reveal-item h2 { transform:translateY(34px); opacity:0; transition:opacity .9s ease .05s,transform 1s cubic-bezier(.16,1,.3,1) .05s; }
.home-intro.reveal-item.is-visible h1,.home-story-index.reveal-item.is-visible h2,.home-workflow-head.reveal-item.is-visible h2,.home-bento-head.reveal-item.is-visible h2,.home-final-inner.reveal-item.is-visible h2 { transform:none; opacity:1; }

@media (max-width: 1000px) {
  .home-motion-stage .motion-road { width:min(64vw,590px); min-width:450px; }
  .token-score { left:5%; }.token-book { right:5%; }.token-gap { right:7%; }.token-question { left:10%; }
  .home-intro-grid { grid-template-columns:1fr; gap:45px; }
  .home-intro-copy { max-width:720px; }
  .home-story-grid { grid-template-columns:1fr; }
  .home-story.reverse .home-story-copy,.home-story.reverse .home-shot { order:initial; }
  .home-story-copy { max-width:760px; }
  .home-story-number { margin-bottom:45px; }
  .home-shot { transform:none !important; }
  .home-workflow-head { grid-template-columns:1fr; gap:25px; }
  .home-workflow-head p { max-width:650px; }
  .home-step-grid { grid-template-columns:repeat(2,1fr); border-top:0; gap:1px; background:var(--line); }
  .home-step { min-height:240px; padding:25px !important; border:0; background:var(--paper); }
  .home-step h3 { margin-top:65px; }
  .home-step i { top:25px; left:auto; right:25px; }
  .home-bento-head { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .home-motion-hero { min-height:100svh; padding:7px; }
  .home-motion-frame { min-height:calc(100svh - 14px); border-radius:25px; }
  .motion-kicker { left:20px; top:92px; max-width:230px; font-size:8px; }
  .home-motion-stage { inset:72px 0 74px; }
  .motion-grid { inset:12% -28%; background-size:42px 42px; }
  .motion-rings { width:150vw; }
  .home-motion-stage .motion-road { width:390px; min-width:390px; max-width:112vw; border-radius:34px; }
  .motion-card-label { left:17px; bottom:15px; padding:7px 9px; font-size:7px; }
  .motion-token { min-width:115px; padding:13px 14px; border-radius:18px; }
  .motion-token small { font-size:8px; }
  .motion-token strong { font-size:24px; }
  .token-score { left:3%; top:19%; }
  .token-book { right:2%; top:15%; }
  .token-gap { right:2%; bottom:15%; }
  .token-question { left:5%; bottom:14%; width:58px; height:58px; min-width:0; padding:0; font-size:32px; }
  .home-motion-stage .coin-a { width:150px; height:56px; right:-28px; top:2%; }
  .home-motion-stage .coin-b { width:105px; height:40px; left:-18px; top:43%; }
  .home-motion-stage .coin-c { width:95px; height:36px; right:-10px; bottom:3%; }
  .home-motion-stage .coin-d { width:52px; height:52px; left:24%; top:5%; }
  .motion-footer { left:20px; right:20px; bottom:17px; }
  .motion-footer > span { display:none; }
  .motion-footer button { margin-left:auto; font-size:10px; }
  .home-intro { padding:92px 0 70px; }
  .home-intro h1 { font-size:clamp(58px,18vw,80px); line-height:.87; }
  html[lang="ta"] .home-intro h1 { font-size:49px; line-height:.98; }
  .home-intro-copy p { font-size:16px; }
  .home-intro .hero-actions { display:grid; grid-template-columns:1fr; }
  .home-proof-grid { grid-template-columns:1fr 1fr; margin-top:70px; }
  .home-proof-grid div { min-height:115px; padding:18px 13px; border-bottom:1px solid var(--line); }
  .home-proof-grid div:nth-child(2) { border-right:0; }
  .home-proof-grid div:first-child { padding-left:13px; }
  .home-proof-grid div:nth-child(n+3) { border-bottom:0; }
  .home-story-index { padding:88px 0 60px; }
  .home-story-index h2 { font-size:52px; }
  html[lang="ta"] .home-story-index h2 { font-size:42px; }
  .home-story { padding:82px 0; }
  .home-story-grid { gap:45px; }
  .home-story-copy h2 { font-size:43px; }
  html[lang="ta"] .home-story-copy h2 { font-size:37px; }
  .home-story-copy p { font-size:14px; }
  .home-shot { border-radius:27px; }
  .home-shot-bar { height:34px; }
  .home-shot-bar span { font-size:7px; }
  .home-shot img { aspect-ratio:1.18; }
  .home-shot figcaption { display:none; }
  .home-workflow { padding:90px 0; }
  .home-workflow-head h2 { font-size:50px; }
  .home-step-grid { grid-template-columns:1fr; margin-top:65px; }
  .home-step { min-height:205px; }
  .home-bento { padding:90px 0; }
  .home-bento-head h2 { font-size:48px; }
  .home-bento-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .home-bento-card,.trust-card,.local-card { grid-column:auto; min-height:330px; padding:27px; border-radius:28px; }
  .home-bento-card h3 { margin-top:65px; font-size:35px; }
  .bento-swatches i { width:32px; height:32px; }
  .home-final { padding:7px; }
  .home-final-inner { min-height:78svh; padding:75px 20px; border-radius:28px; }
  .home-final h2 { font-size:58px; }
  html[lang="ta"] .home-final h2 { font-size:45px; }
  .home-final p { font-size:15px; }
  .home-final-inner > div { display:grid; width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-aura,.motion-rings i,.motion-rings b,.motion-road,.motion-token,.hero-coin,.motion-footer button i::before { animation:none !important; }
  .home-shot,.home-shot img { transform:none !important; transition:none !important; }
}

/* Separate marketing navigation */
.landing-nav,.landing-enter { display:none; }
.site-header.landing:not(.light) { background:color-mix(in srgb,var(--theme-dark) 76%,transparent); box-shadow:0 16px 48px color-mix(in srgb,var(--theme-dark) 28%,transparent); }
.site-header.landing .top-nav { display:none; }
.site-header.landing .landing-nav { display:flex; gap:2px; padding:4px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(255,255,255,.11); }
.landing-nav button { padding:8px 15px; border:0; border-radius:999px; color:inherit; background:transparent; opacity:.88; cursor:pointer; font:inherit; font-size:12px; font-weight:650; transition:background .25s ease,opacity .25s ease; }
.landing-nav button:hover { opacity:1; background:rgba(255,255,255,.2); }
.landing-nav .landing-nav-enter { display:none; }
.site-header.landing .landing-enter { display:flex; align-items:center; gap:12px; min-height:40px; padding:0 7px 0 17px; border:0; border-radius:999px; color:var(--theme-on-accent); background:var(--theme-accent-gradient); box-shadow:0 12px 30px color-mix(in srgb,var(--theme-primary) 27%,transparent); cursor:pointer; font:inherit; font-size:12px; font-weight:750; }
.landing-enter i { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:var(--theme-dark); background:color-mix(in srgb,var(--theme-surface) 93%,transparent); font-style:normal; transition:transform .25s ease; }
.landing-enter:hover i { transform:translateX(3px); }
.site-header.landing .sound-toggle { display:none; }

/* RoadReady Knowledge Engine — completely new homepage motion system */
.engine-country { position:absolute; z-index:0; left:50%; top:8%; display:flex; gap:.02em; transform:translate3d(-50%,0,-120px); white-space:nowrap; font-size:clamp(92px,15.6vw,238px); font-weight:900; line-height:.72; letter-spacing:-.085em; color:rgba(255,255,255,.055); -webkit-text-stroke:1px rgba(255,255,255,.34); text-shadow:0 25px 70px color-mix(in srgb,var(--theme-dark) 18%,transparent); pointer-events:none; user-select:none; }
.engine-country span:last-child { color:rgba(255,255,255,.11); -webkit-text-stroke-color:rgba(255,255,255,.2); }
.engine-space { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.engine-space i { position:absolute; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.74); box-shadow:0 0 22px rgba(255,255,255,.72); animation:engineParticle 9s ease-in-out infinite; }
.engine-space i:nth-child(1){left:8%;top:24%}.engine-space i:nth-child(2){left:17%;top:70%;animation-delay:-4s}.engine-space i:nth-child(3){left:35%;top:14%;animation-delay:-2s}.engine-space i:nth-child(4){left:48%;top:82%;animation-delay:-6s}.engine-space i:nth-child(5){left:66%;top:11%;animation-delay:-3s}.engine-space i:nth-child(6){left:77%;top:70%;animation-delay:-7s}.engine-space i:nth-child(7){left:91%;top:28%;animation-delay:-5s}.engine-space i:nth-child(8){left:87%;top:88%;animation-delay:-1s}
@keyframes engineParticle { 0%,100%{transform:translate3d(0,0,0) scale(.7);opacity:.25}50%{transform:translate3d(22px,-35px,100px) scale(1.6);opacity:1} }
.engine-road { position:absolute; z-index:1; inset:2% -2% -2%; width:104%; height:100%; overflow:visible; transform:translate3d(calc(var(--hero-x,0) * -8px),calc(var(--hero-y,0) * -6px),-50px) rotateX(4deg); will-change:transform; }
.engine-road path { fill:none; stroke-linecap:round; }
.engine-road-glow { stroke:color-mix(in srgb,var(--theme-accent) 52%,transparent); stroke-width:154; opacity:.42; }
.engine-road-edge { stroke:color-mix(in srgb,var(--theme-accent) 58%,white); stroke-width:130; opacity:.62; }
.engine-road-bed { stroke:color-mix(in srgb,var(--theme-road-dark) 86%,#111); stroke-width:116; }
.engine-road-lane { stroke:rgba(255,255,255,.78); stroke-width:4; stroke-dasharray:22 28; animation:engineLane 1.1s linear infinite; }
.engine-road .edge-right { stroke:rgba(255,255,255,.16); stroke-width:104; stroke-dasharray:1 19; opacity:.7; }
@keyframes engineLane { to { stroke-dashoffset:-50; } }
.engine-car rect:first-child { fill:color-mix(in srgb,var(--theme-accent) 70%,white); filter:drop-shadow(0 0 14px var(--theme-accent)); }
.engine-car rect:nth-child(2) { fill:var(--theme-road-dark); }
.engine-car circle { fill:#090909; }
.engine-core { position:absolute; z-index:4; width:clamp(330px,35vw,540px); aspect-ratio:1; left:50%; top:50%; transform:translate3d(-50%,-50%,150px); transform-style:preserve-3d; }
.engine-halo { position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.34),color-mix(in srgb,var(--theme-tertiary) 26%,transparent) 35%,transparent 67%); animation:engineHalo 4.2s ease-in-out infinite; will-change:transform,opacity; }
@keyframes engineHalo { 50% { transform:scale(1.13); opacity:.64; } }
.engine-orbit { position:absolute; inset:0; border:1px solid rgba(255,255,255,.42); border-radius:50%; transform-style:preserve-3d; will-change:transform; }
.engine-orbit::before,.engine-orbit::after { content:""; position:absolute; inset:12%; border:1px solid rgba(255,255,255,.19); border-radius:50%; }
.engine-orbit::after { inset:27%; }
.engine-orbit i { position:absolute; width:21px; height:21px; left:-11px; top:calc(50% - 10px); border:3px solid rgba(255,255,255,.7); border-radius:50%; background:var(--theme-accent); box-shadow:0 0 28px var(--theme-accent); }
.engine-orbit b { position:absolute; width:11px; height:11px; right:10%; top:14%; border-radius:50%; background:white; box-shadow:0 0 20px white; }
.orbit-outer { animation:engineOrbit 15s linear infinite; }
.orbit-inner { inset:13%; border-color:color-mix(in srgb,var(--theme-tertiary) 65%,white); transform:rotateX(68deg) rotateZ(20deg); animation:engineOrbitTilt 10s linear infinite reverse; }
@keyframes engineOrbit { to { transform:rotate(360deg); } }
@keyframes engineOrbitTilt { from { transform:rotateX(68deg) rotateZ(20deg); } to { transform:rotateX(68deg) rotateZ(380deg); } }
.engine-shell { position:absolute; z-index:3; width:52%; aspect-ratio:1; left:24%; top:24%; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.64),color-mix(in srgb,var(--theme-tertiary) 36%,var(--theme-primary)) 34%,color-mix(in srgb,var(--theme-dark) 76%,var(--theme-primary)) 76%); box-shadow:inset -28px -35px 60px color-mix(in srgb,var(--theme-dark) 23%,transparent),inset 12px 13px 30px rgba(255,255,255,.16),0 45px 90px color-mix(in srgb,var(--theme-dark) 32%,transparent); animation:engineShell 6s ease-in-out infinite; will-change:transform; }
@keyframes engineShell { 0%,100%{transform:translate3d(calc(var(--hero-x,0) * 10px),calc(var(--hero-y,0) * 8px),100px) rotate(-2deg)}50%{transform:translate3d(calc(var(--hero-x,0) * 10px),calc(-13px + var(--hero-y,0) * 8px),135px) rotate(2deg)} }
.engine-scan { position:absolute; inset:-35%; background:conic-gradient(from 0deg,transparent 0 67%,rgba(255,255,255,.28) 74%,transparent 82%); animation:engineScan 5.5s linear infinite; }
@keyframes engineScan { to { transform:rotate(360deg); } }
.engine-brand-mark { position:relative; width:54px; height:54px; margin-bottom:11px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(255,255,255,.1); }
.engine-brand-mark i { position:absolute; width:7px; height:31px; left:19px; top:10px; border-radius:10px; background:var(--theme-tertiary); transform:rotate(31deg); }
.engine-brand-mark i:last-child { left:31px; height:21px; top:20px; background:var(--theme-secondary); }
.engine-shell small,.engine-shell span { position:relative; z-index:1; color:rgba(255,255,255,.62); font-size:8px; font-weight:800; letter-spacing:.15em; }
.engine-shell strong { position:relative; z-index:1; margin:4px 0; color:#fff; font-size:clamp(42px,5vw,76px); line-height:.9; letter-spacing:-.07em; text-shadow:0 8px 30px color-mix(in srgb,var(--theme-dark) 45%,transparent); }
.engine-module { position:absolute; z-index:6; min-width:235px; display:flex; align-items:center; gap:15px; padding:15px 18px; border:1px solid rgba(255,255,255,.35); border-radius:24px; color:#fff; background:color-mix(in srgb,var(--theme-dark) 78%,transparent); box-shadow:0 18px 42px color-mix(in srgb,var(--theme-dark) 20%,transparent); animation:engineModule 7.5s cubic-bezier(.45,0,.2,1) infinite; will-change:transform; }
.engine-module > span { flex:0 0 58px; width:58px; height:58px; position:relative; display:grid; place-items:center; }
.engine-module small { display:block; margin-bottom:5px; color:rgba(255,255,255,.6); font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.engine-module strong { display:block; color:#fff; font-size:13px; line-height:1.25; }
.module-sign { left:9%; top:18%; animation-delay:-1s; }
.module-source { right:8%; top:19%; animation-delay:-3.7s; }
.module-quiz { right:10%; bottom:13%; animation-delay:-2.2s; }
.module-gap { left:10%; bottom:14%; animation-delay:-4.8s; }
@keyframes engineModule { 0%,100%{transform:translate3d(calc(var(--hero-x,0) * -12px),calc(var(--hero-y,0) * -9px),240px) rotate(-1deg)}50%{transform:translate3d(calc(var(--hero-x,0) * -12px),calc(-14px + var(--hero-y,0) * -9px),280px) rotate(1.5deg)} }
.engine-sign { border:5px solid var(--theme-secondary); border-radius:50%; color:#111; background:#fff; font-size:20px; font-weight:900; }
.engine-pages i { position:absolute; width:35px; height:43px; border:1px solid rgba(255,255,255,.55); border-radius:8px; background:color-mix(in srgb,var(--theme-tertiary) 36%,transparent); transform:rotate(-10deg) translate(-4px,1px); }
.engine-pages i:nth-child(2) { transform:rotate(7deg) translate(7px,-2px); background:color-mix(in srgb,var(--theme-primary) 43%,transparent); }
.engine-pages b { position:relative; z-index:2; color:#fff; font-size:19px; }
.engine-progress { border-radius:50%; background:conic-gradient(var(--theme-accent) 0 92%,rgba(255,255,255,.14) 92%); }
.engine-progress::before { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--theme-dark); }
.engine-progress b { position:relative; z-index:1; font-size:17px; }
.engine-pulse i { position:absolute; inset:8px; border:1px solid var(--theme-accent); border-radius:50%; animation:enginePulse 2s ease-out infinite; }
.engine-pulse i:nth-child(2){animation-delay:-1s}.engine-pulse b{width:10px;height:10px;border-radius:50%;background:var(--theme-accent);box-shadow:0 0 18px var(--theme-accent)}
@keyframes enginePulse { from{transform:scale(.25);opacity:1}to{transform:scale(1.35);opacity:0} }
.engine-caption { position:absolute; z-index:7; left:50%; bottom:4%; display:flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:rgba(255,255,255,.72); background:color-mix(in srgb,var(--theme-dark) 35%,transparent); backdrop-filter:blur(12px); transform:translateX(-50%); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.engine-caption i { width:7px; height:7px; border-radius:50%; background:var(--theme-accent); box-shadow:0 0 14px var(--theme-accent); animation:pulse 1.7s ease-in-out infinite; }

@media (max-width: 1000px) {
  .site-header.landing .landing-nav { position:fixed; top:84px; left:16px; right:16px; display:none; padding:9px; border-color:var(--line); border-radius:25px; color:var(--ink); background:color-mix(in srgb,var(--theme-surface) 97%,transparent); box-shadow:var(--shadow); }
  .site-header.landing .landing-nav.open { display:grid; grid-template-columns:1fr 1fr; }
  .site-header.landing .landing-nav button { min-height:43px; text-align:left; }
  .site-header.landing .landing-nav button:hover { background:var(--theme-soft); }
  .engine-core { width:min(53vw,490px); }
  .module-sign,.module-gap { left:3%; }
  .module-source,.module-quiz { right:3%; }
}

@media (max-width: 620px) {
  .site-header.landing .landing-enter { display:none; }
  .site-header.landing .landing-nav { top:76px; left:10px; right:10px; }
  .site-header.landing .landing-nav .landing-nav-enter { display:flex; align-items:center; justify-content:center; grid-column:1/-1; color:var(--theme-on-accent); background:var(--theme-accent-gradient); text-align:center; }
  .engine-road { inset:5% -58% -3%; width:210%; transform:translateX(-24%) rotate(-5deg); }
  .engine-country { top:17%; display:block; width:100%; font-size:25vw; line-height:.69; text-align:center; white-space:normal; opacity:.85; }
  .engine-country span { display:block; }
  .engine-country span:last-child { transform:translateX(8%); }
  .engine-space i:nth-child(n+5) { display:none; }
  .engine-core { width:330px; max-width:94vw; top:49%; }
  .engine-shell { width:54%; left:23%; top:23%; }
  .engine-brand-mark { width:43px; height:43px; margin-bottom:6px; }
  .engine-brand-mark i { width:6px; height:25px; left:15px; top:8px; }
  .engine-brand-mark i:last-child { left:25px; height:17px; top:17px; }
  .engine-shell strong { font-size:45px; }
  .engine-module { min-width:0; width:142px; gap:8px; padding:10px; border-radius:18px; }
  .engine-module > span { flex-basis:42px; width:42px; height:42px; }
  .engine-module small { font-size:6px; }
  .engine-module strong { font-size:9px; }
  .engine-sign { border-width:4px; font-size:15px; }
  .engine-pages i { width:27px; height:32px; }
  .engine-pages b { font-size:14px; }
  .module-sign { left:-8px; top:19%; }
  .module-source { right:-8px; top:21%; }
  .module-quiz { right:-8px; bottom:13%; }
  .module-gap { left:-8px; bottom:14%; }
  .engine-caption { bottom:5%; white-space:nowrap; font-size:7px; }
  .engine-module,.engine-halo,.orbit-inner { animation:none; }
}

@media (prefers-reduced-motion: reduce) {
  .engine-space i,.engine-road-lane,.engine-halo,.engine-orbit,.engine-shell,.engine-scan,.engine-module,.engine-pulse i,.engine-caption i { animation:none !important; }
}

/* Theme-aware language control */
.site-header:not(.light) .language-toggle { border-color:color-mix(in srgb,var(--theme-tertiary) 34%,rgba(255,255,255,.24)); background:color-mix(in srgb,var(--theme-dark) 58%,transparent); }
.site-header:not(.light) .language-toggle .active-lang { color:color-mix(in srgb,var(--theme-tertiary) 38%,white); background:transparent; }
.site-header.light .language-toggle { border-color:color-mix(in srgb,var(--theme-primary) 18%,var(--line)); background:color-mix(in srgb,var(--theme-surface) 84%,transparent); }
.site-header.light .language-toggle .active-lang { color:var(--theme-primary); background:transparent; }
.language-menu { border-color:color-mix(in srgb,var(--theme-primary) 22%,var(--line)); color:var(--theme-ink); background:color-mix(in srgb,var(--theme-surface) 96%,transparent); box-shadow:0 24px 70px color-mix(in srgb,var(--theme-dark) 22%,transparent); }
.language-menu button { border:1px solid transparent; color:var(--theme-ink); }
.language-menu button:hover { border-color:color-mix(in srgb,var(--theme-primary) 16%,transparent); background:color-mix(in srgb,var(--theme-primary) 7%,var(--theme-surface)); }
.language-menu button.active { border-color:color-mix(in srgb,var(--theme-primary) 31%,transparent); background:linear-gradient(135deg,color-mix(in srgb,var(--theme-primary) 13%,var(--theme-surface)),color-mix(in srgb,var(--theme-secondary) 9%,var(--theme-surface))); box-shadow:inset 3px 0 var(--theme-primary); }
.language-menu b,.language-menu button.active b { border:1px solid color-mix(in srgb,var(--theme-primary) 30%,transparent); color:var(--theme-primary); background:transparent; box-shadow:none; }
.language-menu button.active b { border-color:color-mix(in srgb,var(--theme-primary) 68%,transparent); color:var(--theme-primary); }
.language-menu i { color:color-mix(in srgb,var(--theme-ink) 52%,var(--theme-primary)); }

/* Porcelain White — high-contrast light treatment for every route */
html[data-theme="white"] body { background:linear-gradient(180deg,#fff 0,#f7f8fa 44%,#f1f4f7 100%); }
html[data-theme="white"] .home-motion-frame {
  color:var(--theme-ink);
  border-color:rgba(24,31,41,.12);
  box-shadow:0 28px 90px rgba(36,49,65,.13),inset 0 1px rgba(255,255,255,.9);
}
html[data-theme="white"] .motion-kicker,
html[data-theme="white"] .motion-footer { color:rgba(21,26,34,.62); }
html[data-theme="white"] .motion-footer button { color:var(--theme-ink); }
html[data-theme="white"] .motion-footer button i { border-color:rgba(21,26,34,.28); background:rgba(255,255,255,.42); }
html[data-theme="white"] .motion-footer button i::before { border-color:var(--theme-ink); }
html[data-theme="white"] .engine-country { color:rgba(21,26,34,.025); -webkit-text-stroke-color:rgba(21,26,34,.18); }
html[data-theme="white"] .engine-country span:last-child { color:rgba(21,26,34,.055); -webkit-text-stroke-color:rgba(21,26,34,.12); }
html[data-theme="white"] .engine-space i { background:rgba(63,111,229,.48); box-shadow:0 0 22px rgba(63,111,229,.28); }
html[data-theme="white"] .engine-orbit { border-color:rgba(32,42,56,.25); }
html[data-theme="white"] .engine-orbit::before,
html[data-theme="white"] .engine-orbit::after { border-color:rgba(32,42,56,.12); }
html[data-theme="white"] .engine-orbit i { border-color:rgba(255,255,255,.94); }
html[data-theme="white"] .engine-orbit b { background:#3f6fe5; box-shadow:0 0 20px rgba(63,111,229,.45); }
html[data-theme="white"] .engine-halo { background:radial-gradient(circle,rgba(255,255,255,.9),rgba(142,183,229,.18) 36%,transparent 68%); }
html[data-theme="white"] .engine-caption { color:rgba(255,255,255,.78); background:rgba(18,24,32,.72); }

html[data-theme="white"] .site-header:not(.light),
html[data-theme="white"] .site-header.landing:not(.light),
html[data-theme="white"] .site-header.scrolled {
  color:var(--theme-ink);
  border-color:var(--line);
  background:rgba(255,255,255,.82);
  box-shadow:0 16px 48px rgba(30,41,55,.12);
}
html[data-theme="white"] .site-header:not(.light) .brand-mark { border-color:rgba(32,42,56,.16); background:rgba(237,241,245,.82); }
html[data-theme="white"] .site-header:not(.light) .top-nav,
html[data-theme="white"] .site-header.landing .landing-nav { border-color:var(--line); background:rgba(239,242,246,.84); }
html[data-theme="white"] .site-header:not(.light) .top-nav button { text-shadow:none; }
html[data-theme="white"] .site-header:not(.light) .top-nav button:hover,
html[data-theme="white"] .site-header:not(.light) .top-nav button.active,
html[data-theme="white"] .landing-nav button:hover { color:#fff; background:var(--theme-dark); }
html[data-theme="white"] .site-header:not(.light) .theme-toggle,
html[data-theme="white"] .site-header:not(.light) .language-toggle,
html[data-theme="white"] .site-header:not(.light) .icon-button,
html[data-theme="white"] .site-header:not(.light) .menu-button { color:var(--theme-ink); border-color:var(--line); background:rgba(255,255,255,.72); }
html[data-theme="white"] .site-header:not(.light) .language-toggle .active-lang { color:var(--theme-primary); background:transparent; }
html[data-theme="white"] .site-header:not(.light) .language-toggle .lang-chevron { color:var(--theme-muted); }

html[data-theme="white"] .subpage-head,
html[data-theme="white"] .practice-hero,
html[data-theme="white"] .guide-hero,
html[data-theme="white"] .library-hero { color:var(--theme-ink); border-bottom:1px solid var(--line); }
html[data-theme="white"] .subpage-head .container > p,
html[data-theme="white"] .subpage-head p,
html[data-theme="white"] .guide-hero p,
html[data-theme="white"] .library-hero p { color:var(--theme-muted); }
html[data-theme="white"] .subpage-head .eyebrow,
html[data-theme="white"] .practice-hero .eyebrow,
html[data-theme="white"] .guide-hero .eyebrow,
html[data-theme="white"] .library-hero .eyebrow { color:color-mix(in srgb,var(--theme-primary) 72%,var(--theme-secondary)); }
html[data-theme="white"] .subpage-head .eyebrow::before,
html[data-theme="white"] .practice-hero .eyebrow::before,
html[data-theme="white"] .guide-hero .eyebrow::before,
html[data-theme="white"] .library-hero .eyebrow::before { background:var(--theme-secondary); }
html[data-theme="white"] .practice-count { color:var(--theme-muted); border-color:rgba(32,42,56,.16); background:rgba(255,255,255,.62); box-shadow:inset 0 0 0 8px rgba(225,231,238,.58); }
html[data-theme="white"] .practice-count strong { color:var(--theme-secondary); }
html[data-theme="white"] .library-hero nav { background:rgba(225,231,238,.72); }
html[data-theme="white"] .library-hero nav button { color:var(--theme-muted); background:transparent; }
html[data-theme="white"] .library-hero nav button.active { color:#fff; background:var(--theme-dark); }

html[data-theme="white"] .home-final { color:var(--theme-ink); }
html[data-theme="white"] .home-final-inner { border:1px solid var(--line); box-shadow:0 25px 80px rgba(32,42,56,.10); }
html[data-theme="white"] .home-final-inner > span,
html[data-theme="white"] .home-final p { color:var(--theme-muted); }
html[data-theme="white"] .home-final .button.ghost { color:var(--theme-ink); border-color:rgba(21,26,34,.25); background:rgba(255,255,255,.58); }

html[data-theme="white"] .theme-menu,
html[data-theme="white"] .language-menu { border-color:rgba(32,42,56,.14); background:rgba(255,255,255,.97); box-shadow:0 24px 70px rgba(32,42,56,.14); }