:root {
  --ink: #24333a;
  --muted: #66777c;
  --paper: #fffaf3;
  --paper-deep: #f4eee4;
  --white: #fff;
  --orange: #e67e22;
  --orange-dark: #bd5c0d;
  --orange-soft: #fff0dc;
  --teal: #147d78;
  --teal-dark: #0c5956;
  --teal-soft: #e3f4f1;
  --blue: #3498db;
  --gold: #d7a700;
  --green: #2b9d66;
  --red: #d9524f;
  --line: #e7dfd3;
  --shadow-sm: 0 10px 30px rgb(54 42 25 / 8%);
  --shadow-lg: 0 28px 70px rgb(58 39 14 / 14%);
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 34px;
  --shell: min(1180px, calc(100vw - 40px));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.account-provider-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.facebook-button span:first-child { color: #1877f2; font-weight: 800; }
.consent-check { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; font-size: .78rem; line-height: 1.35; color: var(--muted, #5d6470); }
.consent-check input { flex: 0 0 auto; margin-top: 3px; }
.account-switch { width: 100%; border: 0; background: transparent; color: var(--accent, #bb1e23); cursor: pointer; padding: 10px 0; font: inherit; font-size: .88rem; }
.account-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff0f0; color: #a11e23; font-size: .86rem; }
.legal-page { max-width: 760px; padding-top: 48px; padding-bottom: 80px; }
.legal-page h1 { margin: 18px 0 12px; }
.legal-card { margin: 24px 0; padding: 24px; border: 1px solid rgba(44, 39, 34, .12); border-radius: 18px; background: rgba(255,255,255,.72); }
.legal-card h2 { margin-top: 0; }
.legal-card ul { padding-left: 1.2rem; }
.cookie-consent { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; background: rgb(26 40 37 / 16%); pointer-events: auto; }
.cookie-panel { width: min(720px, 100%); border: 1px solid rgb(42 78 49 / 18%); border-radius: 20px; padding: 1.35rem 1.5rem; background: #fffdf9; box-shadow: 0 18px 50px rgb(26 40 37 / 22%); pointer-events: auto; }
.cookie-panel h2 { margin: .2rem 0 .55rem; font-family: Georgia, serif; font-size: 1.55rem; }
.cookie-panel p { margin: .45rem 0; color: var(--muted); font-size: .84rem; }
.cookie-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; margin-top: 1rem; }
.cookie-actions .button { min-height: 40px; }
.cookie-options { display: grid; gap: .55rem; margin-top: 1rem; }
.cookie-options .consent-check { align-items: flex-start; }
.cookie-options small { display: block; margin-top: .2rem; color: var(--muted); font-size: .76rem; font-weight: 500; }
.cookie-manage { position: fixed; z-index: 900; right: 1rem; bottom: 1rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: 999px; padding: .55rem .8rem; background: #1e2c31; color: white; font-size: .72rem; cursor: pointer; box-shadow: 0 5px 16px rgb(0 0 0 / 15%); }
.cookie-consent + .cookie-manage { display: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.button-danger { background: #8f2027; color: #fff; }
@media (max-width: 560px) { .account-provider-row { grid-template-columns: 1fr; } }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 8% 7%, rgb(230 126 34 / 8%), transparent 24rem),
    linear-gradient(180deg, #fffaf3 0, #fffdf9 34rem, #fff 100%);
  color: var(--ink);
  line-height: 1.55;
}

body:has(dialog[open]) { overflow: hidden; }

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid rgb(20 125 120 / 35%);
  outline-offset: 3px;
}

.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: .75rem 1rem; background: var(--ink); color: white; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: rgb(255 250 243 / 86%);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgb(231 223 211 / 70%);
}

.nav-wrap { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.brand img { border-radius: 11px; box-shadow: 0 5px 12px rgb(42 78 49 / 15%); }
.brand strong { color: var(--orange-dark); }
.main-nav { display: flex; align-items: center; gap: 2.1rem; color: #55666a; font-size: .91rem; font-weight: 650; }
.main-nav a { position: relative; padding: .8rem 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: .45rem; height: 2px; background: var(--orange); transition: right .2s ease; }
.main-nav a:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: .65rem; }
.language-select select { min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); padding: 0 2rem 0 .8rem; cursor: pointer; }

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .75rem 1.25rem;
  background: var(--orange);
  color: white;
  box-shadow: 0 9px 20px rgb(230 126 34 / 22%);
  font-weight: 760;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); background: var(--orange-dark); box-shadow: 0 12px 24px rgb(189 92 13 / 25%); }
.button-small { min-height: 40px; padding: .55rem 1rem; font-size: .88rem; }
.button-large { min-height: 54px; padding-inline: 1.65rem; }
.button-ghost { background: transparent; color: var(--ink); box-shadow: none; }
.button-ghost:hover { background: white; box-shadow: none; }
.button-secondary { background: white; color: var(--orange-dark); border-color: #edc29c; box-shadow: none; }
.button-secondary:hover { color: white; }
.button-light { background: white; color: var(--teal-dark); box-shadow: 0 10px 26px rgb(0 0 0 / 15%); }
.button-light:hover { background: var(--orange-soft); color: var(--orange-dark); }
.full-width { width: 100%; }

.hero { min-height: 690px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 4rem; padding-block: 5.8rem 5rem; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.2rem; color: var(--teal); font-size: .77rem; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow.centered { justify-content: center; }
.eyebrow-dot { width: 22px; height: 2px; background: currentColor; }
.hero h1, .section-heading h2, .demo-intro h2, .final-cta h2 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.4rem, 6.2vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .94;
}
.hero h1 em, .section-heading h2 em, .demo-intro h2 em, .final-cta h2 em { color: var(--orange); font-weight: 500; }
.hero-lead { max-width: 620px; margin: 1.65rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 1.4rem; margin-top: 2rem; }
.text-link { display: inline-flex; align-items: center; gap: .6rem; border: 0; background: none; color: var(--teal-dark); font-weight: 760; cursor: pointer; }
.text-link span:last-child { transition: transform .18s ease; }
.text-link:hover span:last-child { transform: translateX(4px); }
.hero-points { display: flex; flex-wrap: wrap; gap: 1.15rem; margin: 2rem 0 0; padding: 0; color: var(--muted); list-style: none; font-size: .87rem; font-weight: 600; }
.hero-points li { display: flex; align-items: center; gap: .4rem; }
.hero-points li > span:first-child { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: .7rem; }

.hero-visual { position: relative; min-height: 505px; isolation: isolate; }
.brush-shape { position: absolute; z-index: -2; border-radius: 54% 46% 52% 48% / 42% 61% 39% 58%; transform: rotate(-9deg); }
.brush-one { inset: 3% 2% 4% 8%; background: #f1dfc6; }
.brush-two { width: 66%; height: 52%; right: -3%; bottom: -5%; background: #d9eae4; transform: rotate(15deg); }
.readiness-card { position: absolute; z-index: 1; top: 10%; left: 0; width: 74%; padding: 1.5rem; border: 1px solid rgb(255 255 255 / 80%); border-radius: var(--radius); background: rgb(255 255 255 / 90%); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); }
.card-kicker, .exercise-topline { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .75rem; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.card-kicker .level-pill { margin-left: auto; }
.level-pill { display: inline-flex; align-items: center; min-height: 27px; border-radius: 999px; padding: .25rem .65rem; background: var(--orange-soft); color: var(--orange-dark); font-weight: 850; letter-spacing: .04em; }
.readiness-main { display: flex; align-items: center; gap: 1rem; margin-top: 1.3rem; }
.score-ring, .small-ring { display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--orange) 0 68%, #efe5d8 68%); }
.score-ring { width: 108px; height: 108px; }
.score-ring::before, .small-ring::before { content: ""; grid-area: 1 / 1; border-radius: 50%; background: white; }
.score-ring::before { width: 84px; height: 84px; }
.score-ring span { z-index: 1; grid-area: 1 / 1; font-family: Georgia, serif; font-size: 1.75rem; font-weight: 700; }
.score-ring small { font: 700 .7rem Inter, sans-serif; }
.readiness-copy { display: grid; gap: .2rem; }
.readiness-copy strong { font-size: 1.08rem; }
.readiness-copy span { color: var(--muted); font-size: .83rem; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mini-stats div { display: grid; }
.mini-stats strong { color: var(--teal-dark); font-size: 1.25rem; }
.mini-stats span { color: var(--muted); font-size: .72rem; }
.hero-panda { position: absolute; z-index: 2; right: -2%; bottom: 2%; width: 60%; filter: drop-shadow(0 20px 22px rgb(50 38 21 / 14%)); mix-blend-mode: multiply; }
.floating-badge { position: absolute; z-index: 3; display: grid; gap: .05rem; padding: .75rem 1rem; border: 1px solid white; border-radius: 15px; background: rgb(255 255 255 / 94%); box-shadow: var(--shadow-sm); font-size: .72rem; }
.floating-badge strong { color: var(--green); font-size: .9rem; }
.floating-badge span:last-child { color: var(--muted); }
.badge-xp { right: 3%; top: 7%; transform: rotate(2deg); }
.badge-audio { left: 10%; bottom: 1%; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; transform: rotate(-2deg); }
.audio-wave { color: var(--teal) !important; letter-spacing: 2px; }

.proof-strip { border-block: 1px solid var(--line); background: white; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 112px; align-items: center; }
.proof-grid div { display: grid; gap: .1rem; padding: .4rem 2rem; border-right: 1px solid var(--line); text-align: center; }
.proof-grid div:last-child { border: 0; }
.proof-grid strong { color: var(--teal-dark); font-family: Georgia, serif; font-size: 1.7rem; }
.proof-grid span { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.section { padding-block: 7.5rem; }
.section-heading { max-width: 740px; margin-bottom: 3.2rem; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2, .demo-intro h2, .final-cta h2 { font-size: clamp(2.8rem, 5vw, 4.6rem); }
.section-heading > p:last-child, .demo-intro > p { color: var(--muted); font-size: 1.05rem; }
.method-section { position: relative; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.feature-card { position: relative; min-height: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; background: white; box-shadow: var(--shadow-sm); }
.feature-card.featured { transform: translateY(-16px); background: var(--teal-dark); color: white; }
.feature-number { position: absolute; top: 1.4rem; right: 1.4rem; color: #d9d2c8; font-family: Georgia, serif; font-size: 3.5rem; font-style: italic; opacity: .55; }
.featured .feature-number { color: white; opacity: .18; }
.feature-icon { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 20px; background: var(--orange-soft); color: var(--orange-dark); font-family: Georgia, serif; font-size: 2rem; }
.featured .feature-icon { background: rgb(255 255 255 / 13%); color: #ffe2b6; }
.feature-card h3 { max-width: 260px; margin: 2.2rem 0 .8rem; font-family: Georgia, serif; font-size: 1.55rem; line-height: 1.15; }
.feature-card p { margin: 0; color: var(--muted); }
.featured p { color: rgb(255 255 255 / 72%); }

.demo-section { background: var(--paper-deep); border-block: 1px solid var(--line); }
.demo-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 5rem; }
.demo-intro { position: sticky; top: 130px; }
.demo-note { display: flex; gap: .8rem; margin-top: 1.8rem; padding: 1rem; border-left: 3px solid var(--teal); background: rgb(255 255 255 / 55%); color: var(--muted); font-size: .84rem; }
.demo-note > span { display: grid; flex: 0 0 auto; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--teal); color: white; font-family: Georgia, serif; font-style: italic; }
.demo-note p { margin: 0; }
.exercise-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; background: white; box-shadow: var(--shadow-lg); }
.exercise-type { color: var(--teal); }
.question-count { margin-left: auto; color: #9a958f; font-size: .68rem; }
.instruction-panel { margin: 1.6rem 0; border-radius: var(--radius-sm); padding: .85rem 1rem; background: #f8f4ed; }
.instruction-label { color: var(--teal); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.instruction-panel p { margin: .2rem 0 0; font-weight: 650; }
.word-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem .4rem 1.5rem; }
.hanzi { margin: 0; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: clamp(3rem, 7vw, 4.5rem); font-weight: 650; line-height: 1; }
.pinyin { margin: .5rem 0 0; color: var(--muted); font-size: 1rem; letter-spacing: .08em; }
.audio-button { display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; border: 1px solid #b9d9d5; border-radius: 999px; padding: .6rem 1rem; background: var(--teal-soft); color: var(--teal-dark); font-weight: 760; cursor: pointer; }
.audio-button:hover { background: #cfe9e5; }
.audio-button.playing .speaker { animation: pulse .65s ease infinite alternate; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.answer-option { display: flex; min-height: 58px; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; background: white; color: var(--ink); text-align: left; cursor: pointer; transition: border .18s ease, transform .18s ease, background .18s ease; }
.answer-option:hover { transform: translateY(-2px); border-color: #d2a67f; background: #fffaf4; }
.answer-letter { display: grid; flex: 0 0 auto; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: #f3eee6; color: var(--muted); font-size: .75rem; font-weight: 850; }
.answer-option.selected-correct { border-color: var(--green); background: #edf9f2; }
.answer-option.selected-wrong { border-color: var(--red); background: #fff0ef; }
.answer-option.reveal-correct { border-color: var(--green); }
.answer-option:disabled { color: var(--ink); cursor: default; transform: none; }
.answer-option.image-option { display: block; min-height: 0; padding: .45rem; overflow: hidden; text-align: center; }
.answer-option.image-option img { width: 100%; height: clamp(150px, 20vw, 220px); object-fit: contain; border-radius: 10px; background: #faf8f3; }
.feedback { margin-top: 1.2rem; border-radius: 18px; padding: 1.2rem; background: #eff9f3; border: 1px solid #c3e7d1; }
.feedback.wrong { background: #fff3f1; border-color: #efcbc7; }
.feedback-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; }
.feedback-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--green); color: white; font-weight: 900; }
.feedback-head .feedback-icon { color: white; font-size: 1rem; }
.wrong .feedback-icon { background: var(--red); }
.feedback-head > div { display: grid; }
.feedback-head span { color: var(--muted); font-size: .84rem; }
.feedback-head img { border-radius: 50%; mix-blend-mode: multiply; }
.reveal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1rem 0 0; }
.reveal-grid div { min-width: 0; border-radius: 12px; padding: .75rem; background: rgb(255 255 255 / 72%); }
.reveal-grid dt { color: var(--muted); font-size: .65rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.reveal-grid dd { margin: .25rem 0 0; font-size: .86rem; font-weight: 720; overflow-wrap: anywhere; }
.feedback-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1rem; }

.dashboard-preview { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 4rem; }
.dashboard-preview .section-heading { margin: 0; }
.dashboard-preview .section-heading .button { margin-top: 1.2rem; }
.dashboard-mock { display: grid; grid-template-columns: 180px 1fr; min-height: 475px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-lg); transform: perspective(1600px) rotateY(-4deg) rotateX(1deg); }
.mock-sidebar { display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem; background: var(--teal-dark); color: white; }
.mock-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem; }
.mock-brand img { border-radius: 10px; }
.mock-nav { display: flex; align-items: center; gap: .65rem; border-radius: 9px; padding: .7rem; color: rgb(255 255 255 / 66%); font-size: .69rem; }
.mock-nav.active { background: rgb(255 255 255 / 12%); color: white; }
.mock-content { padding: 1.3rem; background: #fbf8f3; }
.mock-head { display: flex; align-items: center; justify-content: space-between; }
.mock-head div { display: grid; }
.mock-head small { color: var(--muted); font-size: .62rem; }
.mock-head strong { font-family: Georgia, serif; font-size: 1.2rem; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--orange); color: white; font-weight: 800; }
.mock-levels { display: inline-flex; gap: .25rem; margin: 1.2rem 0; border-radius: 10px; padding: .25rem; background: #eee8de; font-size: .67rem; font-weight: 800; }
.mock-levels span { border-radius: 8px; padding: .45rem 1rem; }
.mock-levels .active { background: white; color: var(--orange-dark); box-shadow: 0 3px 8px rgb(0 0 0 / 7%); }
.mock-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: .8rem; }
.mock-readiness, .mock-goal { min-height: 135px; border-radius: 14px; background: white; box-shadow: 0 8px 20px rgb(0 0 0 / 5%); }
.mock-readiness { display: flex; align-items: center; gap: .7rem; padding: .8rem; overflow: hidden; }
.small-ring { width: 62px; height: 62px; color: var(--ink); font-size: .72rem; font-weight: 850; }
.small-ring::before { width: 48px; height: 48px; }
.small-ring { position: relative; }
.small-ring::after { content: "68%"; position: absolute; }
.mock-readiness > div:nth-child(2) { display: grid; min-width: 0; }
.mock-readiness small, .mock-goal small { color: var(--muted); font-size: .57rem; }
.mock-readiness strong { font-size: .75rem; }
.mock-readiness img { align-self: end; width: 72px; margin-left: auto; mix-blend-mode: multiply; }
.mock-goal { display: flex; flex-direction: column; justify-content: center; padding: 1rem; }
.mock-goal strong { margin: .3rem 0 .7rem; font-size: 1rem; }
.mock-goal > span { height: 7px; overflow: hidden; border-radius: 999px; background: #eee7dd; }
.mock-goal i { display: block; width: 67%; height: 100%; border-radius: inherit; background: var(--teal); }
.mock-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .8rem; }
.mock-actions > span { display: flex; min-width: 0; min-height: 90px; flex-direction: column; justify-content: space-between; border-radius: 13px; padding: .8rem; background: white; box-shadow: 0 7px 18px rgb(0 0 0 / 5%); }
.mock-actions > span.orange { background: var(--orange); color: white; }
.mock-actions b { font-family: Georgia, serif; font-size: 1.3rem; }
.mock-actions small { font-size: .6rem; font-weight: 750; }

.level-section { padding-top: 0; }
.level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.level-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; min-height: 250px; border-radius: var(--radius); padding: 2rem; color: white; }
.level-card > span { font: italic 3.5rem Georgia, serif; opacity: .25; }
.level-card small { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.level-card h3 { margin: .25rem 0 .8rem; font-family: Georgia, serif; font-size: 2.3rem; }
.level-card p { margin: 0; font-size: .88rem; opacity: .82; }
.level-one { background: #c56618; }
.level-two { background: #287db7; }
.level-three { background: #8f6f04; }

.final-cta { overflow: hidden; padding: 4.8rem 0; background: var(--teal-dark); color: white; }
.final-cta-inner { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 2.5rem; }
.final-cta img { align-self: end; margin-bottom: -4.8rem; border-radius: 45%; mix-blend-mode: screen; }
.eyebrow.light { color: #a9ded5; }
.final-cta h2 { color: white; font-size: clamp(2.6rem, 4.2vw, 4.2rem); }
.final-cta h2 em { color: #ffc886; }

.site-footer { padding: 4rem 0 1.3rem; background: #1e2c31; color: rgb(255 255 255 / 70%); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; }
.footer-brand p { max-width: 380px; font-size: .84rem; }
.site-footer .brand { color: white; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: .6rem; font-size: .82rem; }
.footer-grid strong { color: white; margin-bottom: .4rem; }
.footer-grid a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid rgb(255 255 255 / 10%); font-size: .7rem; }

.account-dialog { width: min(92vw, 470px); border: 0; border-radius: 25px; padding: 2rem; color: var(--ink); box-shadow: 0 30px 100px rgb(0 0 0 / 35%); }
.account-dialog::backdrop { background: rgb(21 31 34 / 65%); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: .8rem; right: .8rem; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: #f3eee7; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.dialog-icon img { border-radius: 14px; }
.prototype-label { margin: 1.3rem 0 .3rem; color: var(--orange-dark); font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.account-dialog h2 { margin: 0; font-family: Georgia, serif; font-size: 2rem; line-height: 1.05; }
.account-dialog > p:not(.prototype-label) { color: var(--muted); font-size: .87rem; }
.google-button { display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: center; gap: .7rem; border: 1px solid var(--line); border-radius: 12px; background: white; color: #777; font-weight: 700; }
.google-button span:first-child { color: #4285f4; font-size: 1.2rem; font-weight: 900; }
.divider { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; color: #aaa; font-size: .75rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.account-dialog label { display: grid; gap: .4rem; color: var(--muted); font-size: .75rem; font-weight: 700; }
.account-dialog input { min-height: 49px; border: 1px solid var(--line); border-radius: 12px; padding: 0 .9rem; color: var(--ink); }
.account-dialog form .button { margin-top: .8rem; }
.account-dialog > small { display: block; margin-top: .8rem; color: #9c9690; text-align: center; }

@keyframes pulse { to { transform: scale(1.15); } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }

html[dir="rtl"] .eyebrow-dot { order: 2; }
html[dir="rtl"] .card-kicker .level-pill, html[dir="rtl"] .question-count { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .hero-panda { right: auto; left: -2%; }
html[dir="rtl"] .badge-xp { right: auto; left: 3%; }
html[dir="rtl"] .badge-audio { left: auto; right: 10%; }
html[dir="rtl"] .demo-note { border-left: 0; border-right: 3px solid var(--teal); }
html[dir="rtl"] .dialog-close { right: auto; left: .8rem; }

@media (max-width: 1040px) {
  .main-nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 4rem; }
  .hero-copy { max-width: 760px; }
  .hero-visual { width: min(650px, 100%); min-height: 500px; margin: 0 auto; }
  .demo-layout, .dashboard-preview { grid-template-columns: 1fr; }
  .demo-intro { position: static; max-width: 720px; }
  .dashboard-preview .section-heading { max-width: 720px; }
  .dashboard-mock { max-width: 800px; width: 100%; margin-inline: auto; transform: none; }
  .final-cta-inner { grid-template-columns: 140px 1fr; }
  .final-cta .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .nav-wrap { min-height: 66px; }
  .nav-actions .login-trigger { display: none; }
  .language-select select { width: 60px; }
  .language-select select { padding-inline: .65rem; }
  .brand span { font-size: .94rem; }
  .hero { min-height: auto; gap: 2rem; padding-block: 3.8rem 2.5rem; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .text-link { justify-content: center; }
  .hero-points { gap: .75rem; }
  .hero-visual { min-height: 430px; }
  .readiness-card { top: 5%; width: 88%; padding: 1.1rem; }
  .hero-panda { width: 58%; }
  .score-ring { width: 86px; height: 86px; }
  .score-ring::before { width: 66px; height: 66px; }
  .badge-xp { right: 0; }
  .badge-audio { left: 3%; }
  .proof-grid { grid-template-columns: 1fr 1fr; padding-block: .7rem; }
  .proof-grid div { padding: .8rem; border-bottom: 1px solid var(--line); }
  .proof-grid div:nth-child(2) { border-right: 0; }
  .proof-grid div:nth-child(n+3) { border-bottom: 0; }
  .section { padding-block: 5rem; }
  .method-grid, .level-grid { grid-template-columns: 1fr; }
  .feature-card.featured { transform: none; }
  .exercise-card { padding: 1.2rem; border-radius: var(--radius); }
  .question-count { display: none; }
  .answer-grid { grid-template-columns: 1fr; }
  .reveal-grid { grid-template-columns: 1fr; }
  .feedback-actions { flex-direction: column-reverse; }
  .feedback-actions .button { width: 100%; }
  .dashboard-mock { grid-template-columns: 1fr; min-height: 420px; }
  .mock-sidebar { display: none; }
  .mock-grid { grid-template-columns: 1fr; }
  .mock-goal { min-height: 100px; }
  .final-cta-inner { grid-template-columns: 1fr; text-align: center; }
  .final-cta img { width: 150px; margin: -3rem auto -1rem; }
  .final-cta .eyebrow { justify-content: center; }
  .final-cta .button { grid-column: auto; justify-self: stretch; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .nav-actions .button-small { display: none; }
  .hero-visual { min-height: 390px; }
  .readiness-card { width: 96%; }
  .hero-panda { right: -7%; bottom: -2%; width: 60%; }
  .floating-badge { padding: .6rem .7rem; }
  .badge-audio { bottom: -1%; }
  .mini-stats { width: 62%; }
  .word-row { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .audio-button { align-self: stretch; justify-content: center; }
  .mock-actions { grid-template-columns: 1fr 1fr; }
  .mock-actions span:last-child { display: none; }
}

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