:root {
  --forest: #123f37;
  --cream: #faf7ef;
  --sage: #d7e5cf;
  --gold: #d9ab56;
  --text: #15302a;
  --bg: #f8f4ea;
  --card: #fffdf8;
  --shadow: 0 16px 40px rgba(18, 63, 55, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Cairo", "Arial", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 0% 0%, rgba(18, 63, 55, 0.12), transparent 45%),
    linear-gradient(160deg, var(--bg), var(--cream));
  line-height: 1.75;
}

.skip-link {
  position: absolute;
  top: -100vh;
  left: 12px;
  background: var(--forest);
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  z-index: 30;
}

.container {
  width: min(1080px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 247, 239, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(18, 63, 55, 0.15);
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
}

.brand {
  text-decoration: none;
  color: var(--forest);
  font-size: 1.1rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.nav {
  margin-inline-start: auto;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.nav a {
  color: var(--forest);
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
}

.nav a:hover,
.nav a:focus-visible {
  background: var(--sage);
}

.menu-button {
  margin-inline-start: auto;
  display: none;
  background: var(--forest);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 0.58rem 0.9rem;
}

.menu-button:focus-visible,
.btn:focus-visible,
.option-btn:focus-visible,
#retry-practice:focus-visible,
#start-practice:focus-visible,
#reset-practice:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

main {
  padding-top: 2rem;
}

.section {
  padding: 2.2rem 0;
}

h1,
h2,
h3,
h4 {
  color: var(--forest);
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.2;
  margin-bottom: 0.7rem;
}

h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  margin-bottom: 0.7rem;
}

.eyebrow {
  margin: 0;
  color: #36584f;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.section-intro {
  margin-top: 0.2rem;
  color: #2d4f47;
}

.hero {
  padding-top: 2.5rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  align-items: center;
}

.hero-copy p {
  margin: 0.5rem 0 1rem;
}

.hero-art {
  margin: 0;
  background: var(--card);
  border: 1px solid rgba(18, 63, 55, 0.16);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.hero-art img {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.hero-art figcaption {
  margin-top: 0.6rem;
  color: #36584f;
  font-size: 0.95rem;
}

.note,
.practice-top p {
  color: #355b51;
}

.cta-row {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(18, 63, 55, 0.2);
}

.btn-primary {
  background: var(--forest);
  color: white;
}

.btn-secondary,
.btn-ghost {
  background: transparent;
  color: var(--forest);
  border: 1px solid var(--forest);
}

.grid {
  display: grid;
  gap: 1rem;
}

.cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card,
.module-card,
.practice-shell {
  background: var(--card);
  border: 1px solid rgba(18, 63, 55, 0.13);
  border-radius: 14px;
  padding: 1.1rem;
  box-shadow: var(--shadow);
}

.step-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: white;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.module-card ul,
.faq p {
  margin: 0.55rem 0 0;
  padding-inline-start: 1.1rem;
}

.practice-shell {
  margin-top: 1rem;
}

.practice-top {
  margin-bottom: 0.8rem;
}

.meta-row {
  color: #23463f;
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.question-box {
  background: #fff6df;
  border: 1px solid rgba(217, 171, 86, 0.35);
  border-radius: 12px;
  padding: 1rem;
  min-height: 110px;
  margin-bottom: 0.8rem;
}

.question-box p {
  margin: 0;
  font-size: 1.05rem;
}

.options {
  display: grid;
  gap: 0.55rem;
}

.option-btn {
  text-align: start;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 11px;
  border: 1px solid rgba(21, 48, 42, 0.26);
  background: #fff;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}

.option-btn:hover:not(:disabled),
.option-btn:focus-visible {
  border-color: var(--forest);
}

.option-btn[aria-pressed="true"] {
  border-color: var(--forest);
  border-width: 2px;
  background: #ecf5f3;
}

.option-btn.correct {
  border-color: #0b7a55;
  background: #d7efe4;
}

.option-btn.incorrect {
  border-color: #8f2c2c;
  background: #f6d9d9;
}

.feedback {
  min-height: 74px;
  margin-top: 0.8rem;
  border-inline-start: 4px solid transparent;
  padding-inline-start: 0.8rem;
}

.feedback.correct {
  border-inline-start-color: #0b7a55;
}

.feedback.incorrect {
  border-inline-start-color: #8f2c2c;
}

.practice-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.review-panel {
  margin-top: 1rem;
  border-top: 1px solid rgba(18, 63, 55, 0.14);
  padding-top: 1rem;
}

.review-panel h4 {
  margin-bottom: 0.5rem;
}

.result-categories {
  margin-bottom: 0.7rem;
  font-size: 0.98rem;
}

.kg1-card-grid {
  margin-top: 1rem;
}

.kg1-letter-card {
  text-align: center;
  background: var(--card);
  border: 1px solid rgba(18, 63, 55, 0.14);
  border-radius: 14px;
  padding: 0.9rem 0.75rem 0.95rem;
  box-shadow: var(--shadow);
}

.kg1-letter-card h3 {
  margin: 0.3rem 0 0.5rem;
}

.kg1-letter-card img {
  width: 100%;
  max-width: 130px;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid rgba(18, 63, 55, 0.18);
}

.kg1-large-letter {
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  color: var(--forest);
}

.kg1-animal-view {
  margin: 0.7rem 0 0.95rem;
  background: #fffdfa;
  border: 1px solid rgba(21, 48, 42, 0.18);
  border-radius: 12px;
  padding: 0.8rem;
  text-align: center;
}

.kg1-animal-view img {
  max-width: 180px;
  width: 45%;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.kg1-animal-view figcaption {
  margin: 0.55rem 0 0;
  color: var(--forest);
  font-weight: 700;
}

.kg1-shell .question-box {
  margin-top: 0.4rem;
  margin-bottom: 0.7rem;
}

.speech-controls {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.5rem;
}

.speech-controls label,
.kg1-note {
  color: #355b51;
}

.kg1-note {
  margin: 0;
  font-size: 0.92rem;
}

.kg1-note + #kg1-voice-select {
  margin-bottom: 0.25rem;
}

.kg1-local-progress,
.kg1-result-note {
  margin: 0.4rem 0 0.85rem;
  color: #2f564c;
}

.kg1-parent-guide {
  margin-top: 1.1rem;
  background: #fffaf0;
  border: 1px dashed rgba(18, 63, 55, 0.23);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}

.kg1-parent-guide h4 {
  margin: 0 0 0.45rem;
}

.review-panel ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.review-panel li {
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: #f4fbf9;
}

.stage-selector {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.55rem;
}

.stage-tab {
  justify-content: center;
  padding-inline: 0.5rem;
  white-space: nowrap;
}

.stage-tab[aria-selected="true"] {
  background: var(--forest);
  color: white;
}

#stage-question {
  min-height: 118px;
}

#stage-result ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#stage-result li {
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: #f4fbf9;
}

.faq details {
  border: 1px solid rgba(18, 63, 55, 0.15);
  background: var(--card);
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  margin-bottom: 0.6rem;
}

.faq summary {
  cursor: pointer;
  color: var(--forest);
  font-weight: 700;
}

.faq p {
  margin: 0.8rem 0 0;
}

.site-footer {
  margin-top: 1.6rem;
  background: var(--forest);
  color: white;
  padding: 2rem 0;
}

.site-footer a {
  color: #ffe4a8;
}

@media (max-width: 960px) {
  .cards,
  .two-col,
  .three-col,
  .four-col {
    grid-template-columns: 1fr;
  }

  .stage-selector {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-art {
    order: -1;
  }
}

@media (max-width: 780px) {
  .menu-button {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    top: 64px;
    inset-inline: 0.8rem;
    background: var(--card);
    border: 1px solid rgba(18, 63, 55, 0.2);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 0.5rem;
    flex-direction: column;
    align-items: stretch;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
  }

  .nav.open {
    max-height: 260px;
    opacity: 1;
    padding: 0.8rem;
  }

  .nav a {
    width: 100%;
  }

  .stage-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 100px; }
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
.brand { white-space: nowrap; }
.brand img { background: var(--forest); padding: 5px; width: 46px; height: 46px; border-radius: 14px; }
.hero-copy h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.5; letter-spacing: -0.04em; }
.hero-copy p { max-width: 40rem; }
.hero .btn { font-size: .9rem; }
.hero-art { overflow: hidden; border-radius: 28px; box-shadow: 0 22px 65px #123f3712; }
.hero-art img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.section { padding: 3.5rem 0; }
#stage-explorer { background: #e9efe3; }
#kg1-beginnings { background: #fcfaf4; }
.kg1-letter-card img { aspect-ratio: 1; object-fit: contain; }
.kg1-large-letter { font-size:3.2rem; line-height:1.3; }
.practice-shell { border-radius:24px; }
.option-btn { min-height: 54px; }
.nav a { white-space: nowrap; font-size:.87rem; padding:.4rem .45rem; }
@media (max-width:1100px) {
  .menu-button { display:inline-flex; }
  .nav { visibility:hidden; position:absolute; top:75px; inset-inline:1rem; background:var(--card); border:1px solid #123f3726; border-radius:16px; padding:1rem; flex-direction:column; align-items:stretch; max-height:none; opacity:0; }
  .nav.open { visibility:visible; max-height:75vh; overflow:auto; opacity:1; }
  .nav a { padding:.5rem; }
}
@media (max-width:960px) {
  .hero-art { order:0; max-width:620px; }
  .hero-grid { gap:1.5rem; }
  .four-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero { padding-top:1rem; }
}
@media (max-width:480px) {
  .section { padding:2.5rem 0; }
  .hero-copy h1 { font-size:2.1rem; }
  .hero-art { padding:.65rem; }
  .cta-row { align-items:stretch; }
  .cta-row .btn { width:100%; text-align:center; }
  .kg1-letter-card { padding:.6rem; }
  .practice-shell { padding:1rem; }
}
/* Madarik forest identity and motion */
:root { --forest:#ebf5dd; --cream:#123e37; --sage:#285c4f; --gold:#efbe64; --text:#e9f2e2; --bg:#0b2d28; --card:#17483d; }
body { background:radial-gradient(ellipse at 85% 5%,#2e634f 0,transparent 38%),radial-gradient(ellipse at 5% 45%,#24564a 0,transparent 45%),#0b2d28; color:var(--text); }
h1,h2,h3,h4 { color:#eff6e4; }
.site-header { background:#0b2d28ed; border-color:#c0df9a24; }
.brand,.nav a { color:#edf6de; }
.brand img { background:#17483d; }
.hero { position:relative; overflow:hidden; }
.hero:before,.hero:after { content:""; position:absolute; width:22rem; height:22rem; border:1px solid #c6dc9a16; border-radius:50%; pointer-events:none; z-index:-1; animation:orbit-drift 20s ease-in-out infinite alternate; }
.hero:before { top:-10rem; right:8%; }.hero:after { bottom:-12rem;left:8%;width:30rem;height:30rem;animation-delay:-8s; }
.hero-art { background:#224e41; border-color:#c1db9d44; transform:rotate(-2deg); animation:book-float 7s ease-in-out infinite; }
.hero-art figcaption,.eyebrow,.section-intro,.hero-copy .note { color:#c2d5b8; }
.hero-copy h1 { color:#f5ecd2; }
#stage-explorer { background:linear-gradient(120deg,#164639,#205442); }
#kg1-beginnings { background:linear-gradient(130deg,#0e332b,#133f36); }
.card,.module-card,.practice-shell,.kg1-letter-card,.kg1-parent-guide,.faq details { color:#e5efdc; background:#1c4a3d; border-color:#d9e6b72b; box-shadow:0 10px 35px #001a1324; }
.card p,.module-card p,.practice-top p,.kg1-note,.kg1-local-progress,.meta-row,.kg1-parent-guide p { color:#c6d9bd; }
.step-badge { background:#efbe64; color:#173b2c; }
.btn-primary { background:#eac26f;color:#17392c;border-color:#eac26f; }
.btn-secondary,.btn-ghost,.stage-tab { background:#214f41;color:#e9f4dc;border-color:#a8c58d66; }
.btn:hover { transform:translateY(-3px);filter:brightness(1.08); }
.stage-tab[aria-selected="true"],.stage-tab.active { background:#eac26f; color:#153e2e; border-color:#eac26f; }
.option-btn { background:#123c31;color:#eef5e0;border-color:#bfd79b60; transition:transform .2s,background .2s; }
.option-btn:hover:not(:disabled) { background:#2b6050;transform:translateX(-5px); }
.option-btn.correct,.feedback.correct { background:#315d39; color:#f3ffce; border-color:#9bcb7c; }
.option-btn.incorrect,.feedback.incorrect { background:#655236; color:#fff0ce; border-color:#d9b46c; }
.feedback { color:#eaf2dc; }
.question-box,.review-panel { color:#f0f4df;background:#12372e;border-color:#bad49735; }
.result-categories,.kg1-parent-guide h4 { color:#dcecc5; }
.kg1-letter-card { overflow:hidden;transition:transform .3s,box-shadow .3s; }
.kg1-letter-card:hover { transform:translateY(-7px) rotate(1deg);box-shadow:0 20px 35px #061b1640; }
.kg1-letter-card img { border-radius:20px; }
.kg1-large-letter { color:#f2ca77; }
.site-footer { background:#071f1b; border-top:1px solid #cee8a72b; }
select { background:#12392e;color:#edf4e0; }
.btn { transition:transform .22s,filter .22s; }
.scroll-reveal { opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease; }
.scroll-reveal.is-visible { opacity:1;transform:none; }
.feedback:not(:empty) { animation:feedback-pop .25s ease-out; }
@keyframes book-float { 0%,100% {transform:translateY(0) rotate(-2deg)}50% {transform:translateY(-12px) rotate(0deg)} }
@keyframes orbit-drift { to { transform:translate(40px,35px) scale(1.12); } }
@keyframes feedback-pop { from{transform:scale(.98);opacity:.5}to{transform:scale(1);opacity:1} }
@media(max-width:1100px) { .menu-button{background:#efbe64;color:#123e2d} .nav {background:#123b31;border-color:#bfd3a944} }
@media(prefers-reduced-motion:reduce) { .scroll-reveal {opacity:1;transform:none} .hero-art{transform:none} }