/* Palette mirrors constants/colors.ts in the app. */
:root {
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --amber-300: #fcd34d;

  --bg: var(--slate-900);
  --surface: var(--slate-800);
  --border: var(--slate-700);
  --text: var(--slate-200);
  --muted: var(--slate-400);
  --accent: var(--emerald-400);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --font-head: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; overscroll-behavior: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sky-400); }
a:hover { color: var(--slate-200); }

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 96px) 16px 48px;
}

/* Hero */
.hero { text-align: center; }

.app-icon {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.logo {
  display: block;
  width: min(391px, 80vw);
  height: auto;
  margin: 28px auto 0;
}

.tagline {
  font-family: var(--font-head);
  font-size: clamp(22px, 3.6vw, 32px);
  font-weight: 700;
  color: #fff;
  margin: 28px 0 12px;
  line-height: 1.25;
}

.accent { color: var(--accent); }

.lede {
  max-width: 600px;
  margin: 0 auto;
  color: var(--slate-300);
  font-size: clamp(16px, 2.2vw, 19px);
}

/* Store badges: official artwork. Google's PNG ships with transparent padding,
   so it is rendered taller and pulled in with negative margins to match
   Apple's badge height, per Google's guideline that the two sit equal. */
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 36px;
}

.store-badge {
  display: inline-flex;
  line-height: 0;
  border-radius: 8px;
  transition: transform 120ms ease, opacity 120ms ease;
}
.store-badge:hover,
.store-badge:focus-visible { transform: translateY(-1px); opacity: 0.9; }
.store-badge img { display: block; height: auto; }
.store-badge--apple img { width: 144px; }
.store-badge--google { margin: -11px -14px; }
.store-badge--google img { width: 181px; }

/* Sections */
section { margin-top: clamp(56px, 10vw, 96px); }

h2 {
  font-family: var(--font-head);
  font-size: clamp(20px, 3vw, 26px);
  color: #fff;
  margin: 0 0 24px;
  text-align: center;
}

h3 { font-size: 18px; margin: 0 0 6px; color: #fff; }
p { margin: 0; }

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.feature {
  position: relative;
  padding: 22px 20px 22px 64px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.feature p { color: var(--muted); font-size: 15.5px; }

.step {
  position: absolute;
  left: 20px;
  top: 22px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--slate-900);
  background: var(--accent);
}

/* Language pair cards */
.pair-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.pair-card {
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 16px;
}
.pair-card p { color: var(--muted); }
.pair-card--sky { border-left-color: var(--sky-500); }
.pair-card--emerald { border-left-color: var(--emerald-500); }

.pair-flag {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--slate-400);
  margin-bottom: 8px;
}
.pair-card--sky .pair-flag { color: var(--sky-400); }
.pair-card--emerald .pair-flag { color: var(--emerald-400); }

/* Footer */
.footer {
  margin-top: clamp(56px, 10vw, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--slate-500);
  font-size: 14px;
}
.footer p + p { margin-top: 6px; }
.footer a { color: var(--slate-400); }
.footer a:hover { color: var(--slate-200); }
.dot { margin: 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .store-badge { transition: none; }
}