@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Noto+Sans+JP:wght@500;700;800&display=swap");

:root {
  color-scheme: light;
  --ink: #26272d;
  --muted: #777983;
  --paper: #fffaf4;
  --card: #ffffff;
  --line: #eee6dc;
  --orange: #e79055;
  --orange-dark: #c96f36;
  --orange-soft: #fff0e2;
  --green: #5fc381;
  --blue: #6aa3f0;
  --purple: #9a8be7;
  --shadow: 0 24px 70px rgba(86, 59, 37, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
}
a { color: inherit; }
img { max-width: 100%; }
.site-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px max(22px, calc((100vw - 1160px) / 2));
  border-bottom: 1px solid rgba(238, 230, 220, .8);
  background: rgba(255, 250, 244, .88);
  backdrop-filter: blur(18px) saturate(140%);
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; text-decoration: none; }
.nav-brand img, .footer-brand img { border-radius: 10px; }
.nav-links { display: flex; gap: 26px; }
.nav-links a, .footer-links a { color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.nav-links a:hover, .footer-links a:hover { color: var(--orange-dark); }
main { overflow: hidden; }
.hero, .section { width: min(calc(100% - 40px), 1160px); margin: 0 auto; }
.hero {
  min-height: 700px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px;
  padding: 70px 0 76px;
}
.eyebrow { margin: 0 0 13px; color: var(--orange-dark); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(44px, 5.6vw, 72px); line-height: 1.08; letter-spacing: -.055em; }
h1 span { color: var(--orange); }
.lead { max-width: 640px; margin: 26px 0 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.button {
  min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 24px; border-radius: 16px; font-weight: 800; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-2px); }
.appstore { min-width: 198px; background: #1e2024; color: #fff; box-shadow: 0 7px 0 #090a0c; }
.appstore span { display: flex; flex-direction: column; font-size: 16px; line-height: 1.05; }
.appstore small { margin-bottom: 2px; font-size: 9px; letter-spacing: .05em; }
.secondary { border: 2px solid var(--line); background: #fff; color: var(--orange-dark); box-shadow: 0 4px 0 #eadfd3; }
.hero-points { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: var(--muted); font-size: 12px; font-weight: 700; }
.hero-visual { position: relative; min-height: 570px; display: flex; align-items: center; justify-content: center; }
.hero-visual::before {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: linear-gradient(145deg, #ffe3c9, #fff5e9 65%); box-shadow: inset 0 0 0 1px #ffe6ce;
}
.sun { position: absolute; top: 38px; right: 66px; width: 64px; height: 64px; border-radius: 50%; background: #ffd677; }
.hero-landmark { position: absolute; width: 174px; right: 1px; top: 125px; opacity: .2; }
.phone {
  position: relative; overflow: hidden; padding: 9px; border-radius: 39px; background: #17181b;
  box-shadow: 0 28px 60px rgba(42, 32, 24, .25);
}
.phone::before {
  content: ""; position: absolute; z-index: 5; top: 16px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 20px; border-radius: 99px; background: #111;
}
.hero-phone { width: 273px; height: 554px; transform: rotate(3deg); }
.phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 31px; background: #f7f8fb; }
.reel-demo > img { width: 100%; height: 100%; object-fit: cover; }
.reel-shade { position: absolute; inset: 0; background: linear-gradient(transparent 25%, rgba(10, 10, 14, .05) 45%, rgba(10, 10, 14, .86)); }
.reel-top { position: absolute; inset: 40px 18px auto; display: flex; justify-content: space-between; color: white; font-size: 12px; font-weight: 800; }
.quiz-card {
  position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 15px; border-radius: 22px;
  background: rgba(20, 21, 25, .86); backdrop-filter: blur(12px); color: white;
}
.quiz-card p { margin: 0 0 5px; color: #f6c28f; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.quiz-card strong { display: block; margin-bottom: 10px; font-size: 16px; }
.quiz-card button { width: 100%; margin-top: 7px; padding: 8px 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; text-align: start; font: 700 11px inherit; }
.hero-mascot { position: absolute; width: 140px; left: -3px; bottom: 18px; transform: rotate(-7deg); filter: drop-shadow(0 15px 18px rgba(86, 59, 37, .18)); }
.floating-chip { position: absolute; padding: 11px 15px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); font-size: 12px; font-weight: 800; }
.chip-one { top: 110px; left: -22px; }
.chip-two { right: 0; bottom: 84px; color: var(--green); }
.section { padding: 90px 0; border-top: 1px solid var(--line); }
.section-heading { max-width: 680px; margin: 0 auto 46px; text-align: center; }
.section-heading.left { margin: 0; text-align: start; }
.section-heading h2, .feature-band h2, .languages h2, .cta h2 { margin: 0; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.16; letter-spacing: -.04em; }
.section-heading > p:last-child { margin: 17px 0 0; color: var(--muted); line-height: 1.8; }

.data-use { max-width: 900px; }
.data-use-card {
  padding: 30px 34px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.data-use-card p { margin: 0; color: var(--muted); line-height: 1.8; }
.data-use-card a { display: inline-block; margin-top: 18px; color: var(--orange-dark); font-weight: 800; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card {
  position: relative; padding: 18px 18px 24px; border: 1px solid var(--line); border-radius: 26px; background: #fff;
  box-shadow: 0 12px 30px rgba(86, 59, 37, .05);
}
.step-card.featured { transform: translateY(-12px); }
.step-number { position: absolute; z-index: 2; top: 30px; left: 30px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; }
.step-media, .mini-quiz, .explain-card { height: 265px; border-radius: 19px; overflow: hidden; background: var(--orange-soft); }
.step-media img { width: 100%; height: 100%; object-fit: cover; }
.step-card h3 { margin: 22px 6px 8px; font-size: 20px; }
.step-card > p { margin: 0 6px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.mini-quiz { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 30px 22px; background: #2e3036; color: #fff; }
.mini-quiz > span { align-self: flex-end; color: #ffd777; font-size: 10px; font-style: normal; }
.mini-quiz strong { margin-bottom: 6px; font-size: 17px; }
.mini-quiz i { padding: 11px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.08); font-size: 11px; font-style: normal; }
.mini-quiz i:first-of-type { border-color: #77d39c; background: rgba(95,195,129,.2); }
.explain-card { display: flex; flex-direction: column; justify-content: center; padding: 32px 24px; background: #effaf3; }
.explain-card span { color: #42a868; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.explain-card strong { margin-top: 18px; font-size: 24px; }
.explain-card em { margin-top: 5px; color: var(--muted); font-size: 13px; font-style: normal; }
.explain-card p { margin: 24px 0 0; padding-top: 17px; border-top: 1px solid #cde9d7; color: #5f7466; font-size: 12px; }
.feature-band { display: grid; grid-template-columns: .78fr 1.22fr; gap: 76px; align-items: start; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feature-list article { display: flex; gap: 14px; min-height: 164px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.feature-list article > span { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--orange-soft); color: var(--orange-dark); font-size: 20px; font-weight: 800; }
.feature-list article:nth-child(2) > span { background: #effaf3; color: #3caa64; }
.feature-list article:nth-child(3) > span { background: #eef4fd; color: #568dd6; }
.feature-list article:nth-child(4) > span { background: #f1effd; color: #8372d7; }
.feature-list h3 { margin: 3px 0 8px; font-size: 16px; }
.feature-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.inside { text-align: center; }
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: center; max-width: 920px; margin: 0 auto; }
.screens figure { margin: 0; }
.screens-main { transform: translateY(-18px); }
.screen-phone { width: min(100%, 260px); aspect-ratio: 427 / 788; margin: 0 auto; padding: 7px; border-radius: 34px; }
.screen-phone > img { width: 100%; height: 100%; border-radius: 27px; object-fit: cover; object-position: center; }
.screens figure:first-child .screen-phone > img { object-fit: cover; object-position: center; }
.screens figcaption { display: flex; flex-direction: column; gap: 5px; margin-top: 20px; }
.screens figcaption strong { font-size: 16px; }
.screens figcaption span { color: var(--muted); font-size: 12px; }
.mock-review { padding: 45px 18px 20px; background: #f6f7fb; text-align: start; }
.mock-review::before { top: 12px; }
.review-head small { color: var(--purple); font-size: 9px; font-weight: 800; }
.review-head strong { display: block; margin-top: 5px; font-size: 19px; }
.review-head > span { color: var(--muted); font-size: 10px; }
.review-item { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 5px 14px rgba(20,28,48,.06); }
.review-item b { font-size: 12px; }
.review-item span { color: var(--muted); font-size: 9px; }
.review-item i { position: absolute; right: 12px; top: 18px; color: var(--orange); font-size: 10px; font-style: normal; }
.review-streak { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px; margin-top: 14px; padding: 14px; border-radius: 14px; background: #fff2e6; font-size: 14px; }
.review-streak strong { font-size: 20px; }
.review-streak span { color: var(--muted); font-size: 9px; }
.languages { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.language-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.language-grid span { display: flex; align-items: center; gap: 10px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: 23px; }
.language-grid b { font-size: 12px; }
.cta { position: relative; overflow: hidden; padding: 78px 30px; border: 0; border-radius: 34px; background: #e79055; color: #fff; text-align: center; }
.cta::before, .cta::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); }
.cta::before { width: 320px; height: 320px; left: -120px; top: -160px; }
.cta::after { width: 260px; height: 260px; right: -80px; bottom: -130px; }
.cta > * { position: relative; z-index: 1; }
.cta img { position: absolute; z-index: 2; left: 45px; bottom: -8px; width: 176px; }
.cta .eyebrow { color: #ffe8d5; }
.cta p:not(.eyebrow) { margin: 18px 0 28px; color: #fff3e8; }
.cta .appstore { margin: 0 auto; }
.site-footer { margin-top: 90px; padding: 40px max(22px, calc((100vw - 1160px) / 2)); border-top: 1px solid var(--line); background: #fff; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-copy { margin: 24px 0 0; color: var(--muted); font-size: 11px; }
.legal-page { width: min(calc(100% - 40px), 780px); margin: 0 auto; padding: 70px 0 90px; }
.legal-page h1 { font-size: clamp(36px, 6vw, 56px); }
.legal-page h2 { margin: 38px 0 10px; font-size: 22px; }
.legal-page h3 { margin: 28px 0 7px; }
.legal-page p, .legal-page li { color: var(--muted); line-height: 1.8; }
.legal-page a { color: var(--orange-dark); font-weight: 700; }
/* Eight locales, so the switcher wraps rather than forcing the footer to scroll. */
.lang-toggle { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.lang-toggle a, .lang-toggle span { padding: 7px 14px; border-radius: 12px; color: var(--muted); font: 800 12px inherit; text-decoration: none; }
.lang-toggle a:hover { background: var(--orange-soft); color: var(--ink); }
.lang-toggle .active { background: var(--orange); color: #fff; }

@media (max-width: 820px) {
  .nav-links a:nth-child(-n+3) { display: none; }
  .site-nav { gap: 12px; }
  .hero { grid-template-columns: 1fr; padding-top: 50px; }
  .hero-copy { text-align: center; }
  .lead { margin-left: auto; margin-right: auto; }
  .actions, .hero-points { justify-content: center; }
  .hero-visual { min-height: 560px; }
  .step-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .step-card.featured { transform: none; }
  .feature-band, .languages { grid-template-columns: 1fr; gap: 38px; }
  .section-heading.left { text-align: center; margin: 0 auto; }
  .screens { grid-auto-flow: column; grid-auto-columns: 68%; grid-template-columns: none; gap: 22px; overflow-x: auto; margin: 0 -20px; padding: 20px; scroll-snap-type: x mandatory; }
  .screens figure { scroll-snap-align: center; }
  .screens-main { transform: none; }
  .cta img { opacity: .24; left: -12px; width: 165px; }
}

@media (max-width: 560px) {
  .site-nav { padding: 11px 16px; }
  .hero, .section { width: min(calc(100% - 30px), 1160px); }
  .hero { gap: 22px; padding-bottom: 54px; }
  h1 { font-size: 43px; }
  .lead { font-size: 15px; }
  .hero-visual { min-height: 500px; transform: scale(.9); margin: -20px -25px; }
  .hero-visual::before { width: 410px; height: 410px; }
  .hero-phone { width: 246px; height: 500px; }
  .hero-mascot { width: 115px; }
  .chip-one { left: 2px; }
  .section { padding: 70px 0; }
  .feature-list { grid-template-columns: 1fr; }
  .language-grid { grid-template-columns: repeat(2, 1fr); }
  .cta { width: min(calc(100% - 30px), 1160px); padding: 66px 22px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .footer-links { gap: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

/* The phone mock-ups show the learning language — Latin script — beside a gloss in the
   page's own language. On the RTL build the browser reorders those Latin runs: "1 / 12"
   came out as "12 / 1", "+15 XP" as "XP 15+", and the question mark in "What is she
   doing?" jumped to the left. Isolating them keeps each run in its own direction. The
   glosses next to them are deliberately not listed, so they stay RTL. No effect on the
   seven LTR locales. */
.reel-top, .chip-two, .button.appstore,
.quiz-card p, .quiz-card button,
.mini-quiz i,
.explain-card span, .explain-card strong, .explain-card p,
.review-item b { direction: ltr; unicode-bidi: isolate; }

/* Arabic stacks diacritics above the line and reaches below it, so the display
   line-heights tuned for Latin clip them — the shadda on تعلّم was being cut off the top
   of the headline. Negative tracking also pulls joined letterforms apart, so it goes. */
[dir="rtl"] h1 { line-height: 1.42; letter-spacing: normal; }
[dir="rtl"] .section-heading h2,
[dir="rtl"] .feature-band h2,
[dir="rtl"] .languages h2,
[dir="rtl"] .cta h2 { line-height: 1.5; letter-spacing: normal; }

/* Header language menu. A disclosure rather than a row: eight locale names do not fit in
   a sticky nav, and burying the only switcher in the footer meant scrolling the whole
   page to change language. Needs no script. */
.lang-menu { position: relative; }
.lang-menu summary {
  display: flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line);
  border-radius: 99px; background: #fff; color: var(--muted); font-weight: 700; font-size: 13px;
  cursor: pointer; list-style: none; white-space: nowrap;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::before { content: "🌐"; font-size: 12px; }
.lang-menu summary::after { content: "▾"; color: var(--orange-dark); }
.lang-menu summary:hover { border-color: var(--orange); color: var(--ink); }
.lang-menu > div {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
  display: flex; flex-direction: column; min-width: 165px; padding: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow);
}
[dir="rtl"] .lang-menu > div { right: auto; left: 0; }
.lang-menu a {
  padding: 8px 12px; border-radius: 9px; color: var(--muted);
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.lang-menu a:hover { background: var(--orange-soft); color: var(--ink); }