:root {
  --ink: #17184F;
  --muted: #5A5F86;
  --subtle: #8A8FB5;
  --paper: #F3F7FB;
  --surface: #FFFFFF;
  --line: #E6EBF5;
  --line-strong: #C9D2E6;

  --ocean: #1473D6;
  --ocean-soft: #E3F5FD;
  --ocean-ink: #0D4F94;

  --voice: #D8325F;
  --voice-soft: #FFE1E8;
  --voice-ink: #A3244A;

  --can: #0A8A76;
  --can-soft: #D4F6EC;
  --can-ink: #07695A;

  --read: #6A4FD8;
  --read-soft: #ECE8FF;
  --read-ink: #5A3FC0;

  --nav-pill: #17184F;
  --nav-inactive: #AAB0DC;
  --on-strong: #FFFFFF;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Figtree', sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EEF2FB;
    --muted: #A3A8C8;
    --subtle: #6D7197;
    --paper: #0C0E24;
    --surface: #171A3A;
    --line: #262A52;
    --line-strong: #343968;

    --ocean-soft: #12305A;
    --ocean-ink: #9FD3FF;

    --voice-soft: #3A1428;
    --voice-ink: #FFB3C4;

    --can-soft: #0D3A33;
    --can-ink: #7FE3CC;

    --read-soft: #2A2350;
    --read-ink: #C9BDFF;

    --nav-pill: #20244A;
    --nav-inactive: #8A8FB5;
  }
}

:root[data-theme="dark"] {
  --ink: #EEF2FB;
  --muted: #A3A8C8;
  --subtle: #6D7197;
  --paper: #0C0E24;
  --surface: #171A3A;
  --line: #262A52;
  --line-strong: #343968;

  --ocean-soft: #12305A;
  --ocean-ink: #9FD3FF;

  --voice-soft: #3A1428;
  --voice-ink: #FFB3C4;

  --can-soft: #0D3A33;
  --can-ink: #7FE3CC;

  --read-soft: #2A2350;
  --read-ink: #C9BDFF;

  --nav-pill: #20244A;
  --nav-inactive: #8A8FB5;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
}

p { margin: 0; }

a { text-decoration: none; color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}

.btn:active { transform: scale(0.96); }

.btn-voice { background: var(--voice); color: var(--on-strong); }
.btn-voice:hover { background: #A3244A; }

.btn-white { background: var(--on-strong); color: var(--ocean); }
.btn-white:hover { background: #E3F5FD; }

.btn-ghost { background: transparent; color: var(--on-strong); border: 1.5px solid rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

.field {
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}

.field::placeholder { color: var(--subtle); }

/* Nav */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.nav-brand { display: flex; align-items: center; gap: 12px; }

.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; }

.nav-links { display: flex; align-items: center; gap: 36px; }

.nav-links a { font-weight: 600; font-size: 15px; }
.nav-links a:hover { color: var(--ocean); }

.nav-right { display: flex; align-items: center; gap: 16px; }

/* Theme toggle */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 200ms ease-out;
}

.theme-toggle:hover { color: var(--ocean); }

.theme-toggle-window {
  position: relative;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 9999px;
}

.theme-toggle-icon {
  position: absolute;
  inset: 0;
  width: 28px;
  height: 28px;
  transform: translateY(0);
  opacity: 1;
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease-out;
}

.theme-toggle-icon--moon { transform: translateY(140%); opacity: 0; }

.theme-toggle[data-state="dark"] .theme-toggle-icon--sun { transform: translateY(140%); opacity: 0; }
.theme-toggle[data-state="dark"] .theme-toggle-icon--moon { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-icon { transition: none; }
}

/* Language picker */

.lang-picker { position: relative; }

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  border: none;
  border-radius: 9999px;
  padding: 0 18px 0 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: color 200ms ease-out;
}

.lang-trigger:hover { color: var(--ocean); }
.lang-trigger:hover .lang-chevron { color: var(--ocean); }

.lang-trigger-flag { display: flex; flex-shrink: 0; }

.lang-chevron { color: var(--subtle); flex-shrink: 0; }

.flag-chip {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid rgba(23, 24, 79, 0.12);
  flex-shrink: 0;
}

.flag-chip svg {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  display: block;
}

.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 10px);
  z-index: 20;
  margin: 0;
  padding: 8px;
  list-style: none;
  width: 240px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(13, 29, 66, 0.18), 0 2px 8px rgba(13, 29, 66, 0.08);
  border: 1px solid var(--line);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 22px;
  cursor: pointer;
  color: var(--ink);
}

.lang-option:hover,
.lang-option:focus-visible { background: var(--paper); outline: none; }

.lang-option-name { flex: 1; font-size: 14px; font-weight: 600; }

.lang-check { color: var(--ocean); flex-shrink: 0; visibility: hidden; }

.lang-option.is-selected { background: var(--ocean-soft); }
.lang-option.is-selected .lang-check { visibility: visible; }

/* Hero */

.hero {
  position: relative;
  background: var(--ocean);
  padding: 96px 64px 120px;
  overflow: hidden;
}

.hero-watermark { position: absolute; top: -140px; right: -100px; opacity: 0.14; }

.hero-inner {
  position: relative;
  max-width: 1312px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 64px;
}

.hero-copy { flex: 1; display: flex; flex-direction: column; gap: 28px; }

.eyebrow {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-strong);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  padding: 8px 16px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.eyebrow--ocean { background: none; color: var(--ocean); padding: 0; text-transform: uppercase; }

.hero h1 { color: var(--on-strong); font-size: 60px; line-height: 1.05; letter-spacing: -2px; max-width: 620px; }

.lead { color: #BFE6FF; font-size: 19px; line-height: 1.5; max-width: 520px; font-weight: 500; }
.lead--can { color: #D4F6EC; }

.hero-actions { display: flex; gap: 16px; margin-top: 8px; }


/* Section basics */

.section { padding: 96px 64px; max-width: 1312px; margin: 0 auto; }

.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 56px; max-width: 640px; }

.section-head h2, .how > h2 { font-size: 36px; letter-spacing: -1.2px; }

/* How it works */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.tile { border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.tile p { font-size: 15px; line-height: 1.6; color: var(--ink); }

.tile--voice { background: var(--voice-soft); }
.tile--read { background: var(--read-soft); }
.tile--can { background: var(--can-soft); }

.icon-box { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--on-strong); }
.icon-box--voice { background: var(--voice); }
.icon-box--read { background: var(--read); }
.icon-box--can { background: var(--can); }

.tile-title { font-size: 20px; }
.tile-title--voice { color: var(--voice-ink); }
.tile-title--read { color: var(--read-ink); }
.tile-title--can { color: var(--can-ink); }

/* Full-bleed sections */

.section-bleed { padding: 96px 64px; }
.section-bleed--voice { background: var(--voice); display: flex; align-items: center; gap: 64px; }
.section-bleed--can { background: var(--can); }

.bleed-inner { max-width: 1312px; margin: 0 auto; display: flex; align-items: center; gap: 64px; }

.bleed-copy { flex: 1; display: flex; flex-direction: column; gap: 24px; }

.on-strong { color: var(--on-strong); font-size: 38px; letter-spacing: -1.2px; max-width: 640px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }

.chip {
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-strong);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 9999px;
}

/* Mission */

.mission {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 110px 64px;
}

.mission h2 { font-size: 34px; line-height: 1.3; letter-spacing: -1px; max-width: 780px; }

.mission-caption { color: var(--muted); font-weight: 600; font-size: 15px; }

/* FAQ */

.faq-band { background: var(--ocean-soft); }
.faq-band .eyebrow--ocean { color: var(--ocean-ink); }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.faq-item { border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
.faq-item h3 { font-size: 20px; color: var(--ink); }
.faq-item p { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Early access */

.early {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 110px 64px;
}

.early h2 { font-size: 36px; letter-spacing: -1px; }
.early .lead { color: var(--muted); max-width: 480px; }

.waitlist-form { display: flex; gap: 12px; width: 100%; max-width: 440px; }
.waitlist-form .field { flex: 1; }
.waitlist-form .btn:disabled { opacity: 0.6; cursor: wait; }
.waitlist-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.waitlist-status { color: var(--muted); font-weight: 600; min-height: 1.5em; }

/* Footer */

.footer {
  background: var(--nav-pill);
  padding: 48px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand span { color: var(--on-strong); font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.footer p { color: var(--nav-inactive); font-size: 13px; font-weight: 600; }

/* App screen cards: HTML/CSS copies of app screens, sized in --u (1/390 of the screen width) so they scale to any width */

.svg-defs { position: absolute; }

.screen-card {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 46px;
  cursor: zoom-in;
  transition: transform 240ms ease-out;
}

.screen-card:hover { transform: translateY(-6px) rotate(-1deg); }
.screen-card:focus-visible { outline: 3px solid var(--on-strong); outline-offset: 8px; }
.screen-card.is-lifted { visibility: hidden; }

.phone {
  --phone-width: 280px;
  display: block;
  container-type: inline-size;
  width: var(--phone-width);
  padding: calc(var(--phone-width) * 0.035);
  background: #17184F;
  border-radius: calc(var(--phone-width) * 0.16);
  box-shadow: 0 30px 60px rgba(40, 6, 20, 0.35);
}

.phone-screen {
  --u: calc(100cqw / 390);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: calc(var(--u) * 48);
  padding: calc(var(--u) * 64) 0 calc(var(--u) * 40);
  color: #FFFFFF;
  font-family: var(--font-body);
  text-align: start;
}

.phone-screen::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 14);
  left: 50%;
  width: calc(var(--u) * 110);
  height: calc(var(--u) * 32);
  transform: translateX(-50%);
  border-radius: 9999px;
  background: #17184F;
}

.call-screen { background: var(--voice); animation: call-turn-background var(--turn-cycle) infinite; }

.phone-screen { --turn-cycle: 8s; }

.call-header { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 20); }

.call-title { flex: 1; font-weight: 700; font-size: calc(var(--u) * 15); line-height: 1.45; }

.call-turn-chip {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 12);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 700;
  font-size: calc(var(--u) * 12);
  opacity: 0;
  animation: call-glota-turn-only var(--turn-cycle) infinite;
}

.call-stages { display: grid; align-items: center; }

.call-stage { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 24); }

.call-stage--glota { gap: calc(var(--u) * 16); opacity: 0; animation: call-glota-turn-only var(--turn-cycle) infinite; }
.call-stage--learner { animation: call-learner-turn-only var(--turn-cycle) infinite; }

.call-shape { position: relative; display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 230); height: calc(var(--u) * 230); }
.call-shape-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.call-shape-mascot { position: relative; width: calc(var(--u) * 176); height: calc(var(--u) * 176); }

.call-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--u) * 31);
  line-height: 1.16;
  letter-spacing: calc(var(--u) * -0.6);
  text-align: center;
}

.call-status { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); min-height: calc(var(--u) * 35); font-weight: 600; font-size: calc(var(--u) * 13); color: #BFE6FF; }
.call-status-wave { display: flex; align-items: center; gap: calc(var(--u) * 3); height: calc(var(--u) * 22); }

.call-status-wave span {
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 16);
  border-radius: 9999px;
  background: #BFE6FF;
  animation: call-status-wave 1140ms ease-in-out infinite;
}

.call-status-wave span:nth-child(2) { animation-delay: 220ms; }
.call-status-wave span:nth-child(3) { animation-delay: 410ms; }

.call-asked {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 24);
  border-end-start-radius: calc(var(--u) * 6);
  background: rgba(255, 255, 255, 0.18);
}

.call-asked-label { font-weight: 700; font-size: calc(var(--u) * 12); line-height: 1.33; color: #FFD3DE; }
.call-question { font-weight: 700; font-size: calc(var(--u) * 17); line-height: 1.4; }

.call-mascot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 149);
  height: calc(var(--u) * 149);
  border-radius: 9999px;
  background: #FFFFFF;
}

.call-mascot svg { width: calc(var(--u) * 120); height: calc(var(--u) * 120); }

.call-your-turn {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--u) * 52);
  line-height: 1.04;
  letter-spacing: calc(var(--u) * -2);
  text-align: center;
}

.call-wave { display: flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 44); }

.call-wave span {
  width: calc(var(--u) * 10);
  height: 100%;
  border-radius: 9999px;
  background: #FFFFFF;
  transform: scaleY(var(--rest));
  animation: call-wave 520ms ease-in-out calc(var(--i) * 70ms) infinite;
}

.call-hint { font-weight: 500; font-size: calc(var(--u) * 15); line-height: 1.47; color: #FFD3DE; text-align: center; }

.call-controls { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 24); }

.call-side {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
}

.call-side svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }

.call-mic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 104);
  height: calc(var(--u) * 104);
}

.call-mic-frame {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
  animation: call-learner-turn-only var(--turn-cycle) infinite;
}

.call-mic-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: calc(var(--u) * 52);
  opacity: 0;
  animation: call-mic-ring 2600ms linear infinite, call-ring-shape var(--turn-cycle) infinite;
}

.call-mic-ring + .call-mic-ring { animation-delay: 1300ms, 0s; }

.call-mic-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 88);
  height: calc(var(--u) * 88);
  position: relative;
  border-radius: calc(var(--u) * 44);
  background: #FFFFFF;
  color: var(--voice);
  animation: call-mic-shape var(--turn-cycle) infinite;
}

.call-mic-button svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }

@keyframes call-turn-background {
  0%, 46%, 100% { background-color: #1473D6; }
  50%, 96% { background-color: #D8325F; }
}

@keyframes call-glota-turn-only {
  0%, 46%, 100% { opacity: 1; }
  50%, 96% { opacity: 0; }
}

@keyframes call-learner-turn-only {
  0%, 46%, 100% { opacity: 0; }
  50%, 96% { opacity: 1; }
}

@keyframes call-mic-shape {
  0%, 46%, 100% { border-radius: calc(var(--u) * 32); color: #1473D6; }
  50%, 96% { border-radius: calc(var(--u) * 44); color: #D8325F; }
}

@keyframes call-ring-shape {
  0%, 46%, 100% { border-radius: calc(var(--u) * 40); }
  50%, 96% { border-radius: calc(var(--u) * 52); }
}

@keyframes call-status-wave {
  0%, 61%, 100% { transform: scaleY(1); }
  31% { transform: scaleY(0.45); }
}

@keyframes call-wave {
  50% { transform: scaleY(1); }
}

@keyframes call-mic-ring {
  from { opacity: 0.8; transform: scale(0.9); }
  to { opacity: 0; transform: scale(1.35); }
}

/* App screens that follow the site theme: Home, Read and Progress */

.screen-card--hero .phone { --phone-width: 300px; box-shadow: 0 30px 60px rgba(13, 29, 66, 0.35); }

.app-screen {
  justify-content: flex-start;
  gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 58) 0 0;
  background: var(--paper);
  color: var(--ink);
}

.app-icon { width: calc(var(--u) * 22); height: calc(var(--u) * 22); flex-shrink: 0; }
[dir="rtl"] .app-chevron { transform: scaleX(-1); }

.app-header { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 16); }
.app-brand { flex: 1; display: flex; align-items: center; gap: calc(var(--u) * 8); }
.app-logo { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.app-wordmark { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 24); letter-spacing: calc(var(--u) * -1); }
.app-title { flex: 1; font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 34); letter-spacing: calc(var(--u) * -1.2); line-height: 1.1; }

.app-chip {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14);
  border-radius: 9999px;
  background: var(--surface);
  font-weight: 700;
  font-size: calc(var(--u) * 14);
  white-space: nowrap;
}

.app-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 9999px;
  background: #17184F;
  color: #FFFFFF;
  font-weight: 700;
  font-size: calc(var(--u) * 16);
}

.app-body { display: flex; flex-direction: column; gap: calc(var(--u) * 14); padding: 0 calc(var(--u) * 16); }

.app-deco { position: absolute; width: calc(var(--u) * 190); height: calc(var(--u) * 190); top: calc(var(--u) * -50); inset-inline-end: calc(var(--u) * -60); opacity: 0.14; }

.app-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: calc(var(--u) * 12);
  background: var(--surface);
  flex-shrink: 0;
}

.app-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(var(--u) * 150);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 24);
}

.app-tile-text, .app-row-text { display: flex; flex-direction: column; gap: calc(var(--u) * 4); min-width: 0; }
.app-tile-title, .app-row-title { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--u) * 19); line-height: 1.16; }
.app-tile-caption, .app-row-caption { font-weight: 600; font-size: calc(var(--u) * 13); line-height: 1.38; }

.app-tile--ocean { background: var(--ocean-soft); color: var(--ocean-ink); }
.app-tile--ocean .app-icon-box { color: var(--ocean); }
.app-tile--can { background: var(--can-soft); color: var(--can-ink); }
.app-tile--can .app-icon-box { color: var(--can); }

.app-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 18) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 24);
}

.app-row-text { flex: 1; }
.app-row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-row--read { background: var(--read-soft); color: var(--read-ink); }
.app-row--read .app-icon-box { color: var(--read); }
.app-row--can { background: var(--can-soft); color: var(--can-ink); }
.app-row--can .app-icon-box { color: var(--can); }

.app-tabs {
  position: absolute;
  bottom: calc(var(--u) * 26);
  left: 50%;
  display: flex;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 6);
  border-radius: 9999px;
  background: var(--nav-pill);
  transform: translateX(-50%);
}

.app-tab {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 20);
  border-radius: 9999px;
  color: var(--nav-inactive);
  font-weight: 700;
  font-size: calc(var(--u) * 14);
  white-space: nowrap;
}

.app-tab.is-active { background: #FFFFFF; color: #17184F; }

/* Home */

.home-hero { position: relative; margin-bottom: calc(var(--u) * 36); }

.home-hero-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  min-height: calc(var(--u) * 270);
  padding: calc(var(--u) * 24) calc(var(--u) * 22) calc(var(--u) * 64);
  overflow: hidden;
  border-radius: calc(var(--u) * 34);
  background: var(--ocean);
  color: #FFFFFF;
}

.home-hero-eyebrow { font-weight: 600; font-size: calc(var(--u) * 13); color: #BFE6FF; }
.home-hero-title { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 36); line-height: 1.06; letter-spacing: calc(var(--u) * -1.2); }
.home-hero-body { font-weight: 500; font-size: calc(var(--u) * 16); line-height: 1.44; color: #E3F5FD; }

.home-hero-tail {
  position: absolute;
  top: 100%;
  inset-inline-start: calc(var(--u) * 42);
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 34);
  margin-top: -1px;
  background: var(--ocean);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

[dir="rtl"] .home-hero-tail { clip-path: polygon(0 0, 100% 0, 100% 100%); }

.home-talk {
  position: absolute;
  bottom: calc(var(--u) * -44);
  inset-inline-end: calc(var(--u) * 24);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  width: calc(var(--u) * 98);
  height: calc(var(--u) * 98);
  border: calc(var(--u) * 5) solid var(--paper);
  border-radius: 9999px;
  background: var(--voice);
  color: #FFFFFF;
}

.home-talk .app-icon { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.home-talk-label { font-weight: 700; font-size: calc(var(--u) * 15); }

.home-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); }

.home-can-row { display: flex; align-items: center; gap: calc(var(--u) * 10); min-width: 0; }
.home-can-text { font-weight: 700; font-size: calc(var(--u) * 15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-can-chip {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  flex-shrink: 0;
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: 9999px;
  background: var(--can-soft);
  color: var(--can-ink);
  font-weight: 700;
  font-size: calc(var(--u) * 12);
}

.app-can-chip .app-icon { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }

/* Progress */

.progress-level-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); }

.progress-level {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(var(--u) * 146);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 26);
  background: var(--ocean);
  color: #FFFFFF;
}

.progress-level-shape { width: calc(var(--u) * 84); height: calc(var(--u) * 84); }

.progress-level-code {
  position: absolute;
  top: calc(var(--u) * 16);
  inset-inline-start: calc(var(--u) * 16);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
  color: var(--ocean);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--u) * 24);
}

.progress-level-label { font-weight: 600; font-size: calc(var(--u) * 13); color: #BFE6FF; }

.progress-count {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 26);
  background: var(--surface);
}

.progress-count-number { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 46); line-height: 1; letter-spacing: calc(var(--u) * -1.5); }
.progress-count-total { font-size: calc(var(--u) * 22); letter-spacing: 0; color: var(--subtle); }
.progress-track { display: block; height: calc(var(--u) * 8); border-radius: 9999px; background: var(--line); overflow: hidden; }
.progress-track span { display: block; width: 25%; height: 100%; border-radius: 9999px; background: var(--ocean); }
.progress-count-caption { font-weight: 600; font-size: calc(var(--u) * 13); line-height: 1.38; color: var(--muted); }

.progress-can, .progress-conversations {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 18) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 26);
}

.progress-can { background: var(--can-soft); }
.progress-conversations { gap: 0; background: var(--surface); }

.progress-block-title { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 21); color: var(--can-ink); }
.progress-conversations .progress-block-title { margin-bottom: calc(var(--u) * 6); color: var(--ink); }

.progress-can-item {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 13) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--surface);
}

.progress-can-item .app-check { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--can); }
.progress-can-text, .progress-conversation-title { flex: 1; min-width: 0; font-weight: 700; font-size: calc(var(--u) * 15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-can-date { flex-shrink: 0; font-weight: 600; font-size: calc(var(--u) * 13); color: var(--muted); }
.progress-see-all { padding-top: calc(var(--u) * 6); font-weight: 700; font-size: calc(var(--u) * 15); color: var(--can-ink); }
.progress-conversations .progress-see-all { padding-top: calc(var(--u) * 12); color: var(--ocean); }

.progress-conversation { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 14) 0; border-bottom: 1px solid var(--line); }

/* Read: the article list, then an article read aloud */

.read-screen { --turn-cycle: 16s; padding: 0; }

.read-list, .read-article {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  padding-top: calc(var(--u) * 58);
}

.read-list { background: var(--paper); animation: read-list-only var(--turn-cycle) infinite; }
.read-article { gap: calc(var(--u) * 14); padding-inline: calc(var(--u) * 24); background: var(--surface); opacity: 0; animation: read-article-only var(--turn-cycle) infinite; }

.read-add {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(var(--u) * 10);
  height: calc(var(--u) * 58);
  padding: 0 calc(var(--u) * 24);
  border-radius: 9999px;
  background: var(--read);
  color: #FFFFFF;
  font-weight: 700;
  font-size: calc(var(--u) * 16);
}

.read-intro { font-weight: 500; font-size: calc(var(--u) * 15); line-height: 1.47; color: var(--muted); }

.read-card { display: flex; flex-direction: column; overflow: hidden; border-radius: calc(var(--u) * 30); background: var(--surface); }

.read-cover { position: relative; display: flex; align-items: flex-end; height: calc(var(--u) * 116); padding: calc(var(--u) * 16); overflow: hidden; background: var(--read); }
.read-cover .app-deco { top: calc(var(--u) * -20); inset-inline-end: calc(var(--u) * -50); opacity: 0.18; }

.read-cover-chip {
  position: relative;
  padding: calc(var(--u) * 6) calc(var(--u) * 14);
  border-radius: 9999px;
  background: #FFFFFF;
  color: #5A3FC0;
  font-weight: 700;
  font-size: calc(var(--u) * 13);
}

.read-card-body { display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 16); }
.read-source { font-weight: 600; font-size: calc(var(--u) * 13); color: var(--muted); }
.read-card-title { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 24); line-height: 1.15; letter-spacing: calc(var(--u) * -0.6); }

.read-card-excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-weight: 500;
  font-size: calc(var(--u) * 15);
  line-height: 1.47;
  color: var(--muted);
}

.read-actions { display: flex; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 6); }

.read-action {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 12);
  border-radius: 9999px;
  background: var(--read-soft);
  color: var(--read-ink);
  font-weight: 700;
  font-size: calc(var(--u) * 15);
  white-space: nowrap;
}

.read-action--voice { background: var(--voice); color: #FFFFFF; }

.reader-top { display: flex; align-items: center; gap: calc(var(--u) * 12); margin-inline: calc(var(--u) * -8); }
.reader-meta { flex: 1; font-weight: 600; font-size: calc(var(--u) * 13); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reader-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: 9999px;
  background: var(--paper);
}

.reader-button--delete { color: var(--voice); }

.reader-title { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 36); line-height: 1.06; letter-spacing: calc(var(--u) * -1.2); }
.reader-text { font-weight: 500; font-size: calc(var(--u) * 19); line-height: 1.58; }

.reader-word { border-radius: calc(var(--u) * 4); }
.reader-word[data-state="ahead"] { color: var(--subtle); }
.reader-word[data-state="speaking"] { background: var(--read-soft); color: var(--read-ink); }

.reader-player {
  position: absolute;
  inset-inline: calc(var(--u) * 14);
  bottom: calc(var(--u) * 14);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 32);
  background: var(--read);
  color: #FFFFFF;
}

.reader-player-row { display: flex; align-items: center; gap: calc(var(--u) * 12); }

.reader-mascot { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: calc(var(--u) * 62); height: calc(var(--u) * 62); border-radius: 9999px; background: #FFFFFF; }
.reader-mascot svg { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }

.reader-status { flex: 1; font-weight: 700; font-size: calc(var(--u) * 15); }

.reader-speed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border: calc(var(--u) * 2) solid #FFFFFF;
  border-radius: 9999px;
  font-weight: 700;
  font-size: calc(var(--u) * 14);
}

.reader-play { display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 56); height: calc(var(--u) * 56); border-radius: 9999px; background: #FFFFFF; color: var(--read); }

.reader-track { display: block; height: calc(var(--u) * 5); border-radius: 9999px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.reader-track span { display: block; height: 100%; width: calc(var(--read-progress, 0.3) * 100%); border-radius: 9999px; background: #FFFFFF; }

.reader-discuss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  height: calc(var(--u) * 58);
  border-radius: 9999px;
  background: var(--voice);
  font-weight: 700;
  font-size: calc(var(--u) * 16);
}

@keyframes read-list-only {
  0%, 30%, 100% { opacity: 1; }
  34%, 96% { opacity: 0; }
}

@keyframes read-article-only {
  0%, 30%, 100% { opacity: 0; }
  34%, 96% { opacity: 1; }
}

/* How it works: the tiles beside the Read screen */

.how-layout { display: flex; align-items: center; gap: 64px; }
.how-copy { flex: 1; min-width: 0; }
.how-copy .grid-3 { grid-template-columns: 1fr; gap: 16px; }
.how .screen-card:focus-visible { outline-color: var(--ocean); }

/* Screen zoom: the enlarged card over a dimmed, blurred page */

.screen-zoom {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

.screen-zoom[open] { display: grid; place-items: center; }

html:has(.screen-zoom[open]) { overflow: hidden; }

.screen-zoom::backdrop {
  background: rgba(12, 14, 36, 0.72);
  animation: screen-zoom-fade 240ms ease-out;
}

.screen-zoom.is-closing::backdrop { opacity: 0; transition: opacity 240ms ease-out; }

.screen-zoom-stage { cursor: zoom-out; }

.screen-zoom-stage .phone { will-change: transform; }

.screen-zoom-stage .phone { --phone-width: min(390px, calc(100vw - 32px), calc((100dvh - 144px) * 0.45)); }

.screen-zoom-close {
  position: fixed;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  cursor: pointer;
}

.screen-zoom-close:hover { background: rgba(255, 255, 255, 0.28); }
.screen-zoom-close:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

@keyframes screen-zoom-fade {
  from { opacity: 0; }
}

/* Scroll-reveal transitions between sections, driven by IntersectionObserver in app.js */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .screen-card { transition: none; }
  .call-wave span, .call-mic-ring, .call-status-wave span, .screen-zoom::backdrop { animation: none; }
  .call-screen, .call-turn-chip, .call-stage, .call-mic-frame, .call-mic-button { animation: none; }
  .read-list, .read-article { animation: none; }
}

/* Responsive */

@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero-inner, .bleed-inner, .section-bleed--voice { flex-direction: column; text-align: center; }
  .hero h1 { font-size: 42px; }
  .grid-3, .faq-list { grid-template-columns: 1fr; }
  .how-layout { flex-direction: column; }
  .waitlist-form { flex-direction: column; }
  .chip-row, .hero-actions { justify-content: center; }
}

@media (max-width: 600px) {
  .nav { padding: 12px 16px; }
  .nav-right { gap: 4px; }
  .nav-right > .btn { display: none; }
  .lang-trigger { padding: 0 10px; }
  .lang-trigger-name { display: none; }
  .hero { padding: 56px 16px 72px; }
  .hero h1 { font-size: 36px; letter-spacing: -1px; }
  .lead { font-size: 17px; }
  .hero-actions { flex-direction: column; align-self: stretch; }
    .section, .section-bleed { padding: 64px 16px; }
  .section-head { margin-bottom: 36px; }
  .tile, .faq-item { padding: 24px; }
  .on-strong { font-size: 30px; }
  .mission { padding: 72px 16px; }
  .mission h2 { font-size: 26px; }
  .phone, .screen-card--hero .phone { --phone-width: 240px; }
  .early { padding: 72px 16px; }
  .early h2 { font-size: 28px; }
  .footer { flex-direction: column; gap: 12px; padding: 32px 16px; text-align: center; }
}