/* AIO AFS landing. Tokens follow docs/app-design-system.md: earth brown on cream. */

@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/BeVietnamPro-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/BeVietnamPro-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #faf7f3;
  --surface: #ffffff;
  --inset: #f4efe9;
  --line: #e5d9cc;
  --ink: #1b1d22;
  --muted: #5d6470;
  --accent: #8b5a3c;
  --accent-deep: #6b4226;
  --on-accent: #ffffff;
  --tint: #f5ece3;
  --furrow: #d9c4ae;
  --veil-strong: rgb(250 247 243 / 0.94);
  --veil-soft: rgb(250 247 243 / 0);
  --shadow: 0 1px 2px rgb(74 46 26 / 0.08), 0 8px 20px rgb(74 46 26 / 0.1), 0 24px 48px rgb(74 46 26 / 0.1);
  --phone-edge: #1b1d22;

  --font: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --fs-display: clamp(2.5rem, 4.6vw + 1rem, 5.25rem);
  --fs-h2: clamp(1.75rem, 2.4vw + 1rem, 3.25rem);
  --fs-h3: clamp(1.0625rem, 0.5vw + 0.95rem, 1.375rem);
  --fs-lead: clamp(1.0625rem, 0.6vw + 0.95rem, 1.5rem);
  --fs-body: clamp(1rem, 0.3vw + 0.94rem, 1.1875rem);
  --fs-small: 0.875rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: clamp(16px, 5vw, 96px);
  --nav-h: 64px;
  --r-card: 16px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-state: 240ms;
}

/* Dark values, applied for the system preference and for the explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1a1512; --surface: #241d18; --inset: #2b231d; --line: #3f342b;
    --ink: #f3ece4; --muted: #bbaea2;
    --accent: #dba67f; --accent-deep: #e9bd9b; --on-accent: #1a1512;
    --tint: #2f2620; --furrow: #55463a;
    --veil-strong: rgb(26 21 18 / 0.92); --veil-soft: rgb(26 21 18 / 0.35);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px rgb(0 0 0 / 0.3), 0 24px 48px rgb(0 0 0 / 0.3);
    --phone-edge: #4a3d33;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1512; --surface: #241d18; --inset: #2b231d; --line: #3f342b;
  --ink: #f3ece4; --muted: #bbaea2;
  --accent: #dba67f; --accent-deep: #e9bd9b; --on-accent: #1a1512;
  --tint: #2f2620; --furrow: #55463a;
  --veil-strong: rgb(26 21 18 / 0.92); --veil-soft: rgb(26 21 18 / 0.35);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px rgb(0 0 0 / 0.3), 0 24px 48px rgb(0 0 0 / 0.3);
  --phone-edge: #4a3d33;
}

/* Large frames (16:9 at 1920, 9:16 at 1080x1920): scale the rem-based type up
   so a section fills the frame instead of floating in it. */
@media (min-width: 1800px) { html { font-size: 118%; } }
@media (min-width: 1000px) and (min-height: 1500px) { html { font-size: 130%; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1, h2 { text-wrap: balance; letter-spacing: -0.02em; line-height: 1.12; font-weight: 700; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); max-width: 20ch; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
p { text-wrap: pretty; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Language switch: both languages live in the markup, one is shown. */
html[data-lang="vi"] body [lang="en"],
html[data-lang="en"] body [lang="vi"] { display: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s5);
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink); text-decoration: none; font-weight: 700; min-height: 44px; }
.brand img { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); }
.nav-links { display: flex; gap: var(--s5); margin-left: auto; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: var(--fs-small); font-weight: 600; padding-block: var(--s3); transition: color var(--t-state) var(--ease); }
.nav-links a:hover { color: var(--accent); }
.nav-tools { display: flex; gap: var(--s2); }
.tool {
  min-width: 44px; min-height: 44px; padding-inline: var(--s3);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: 600 var(--fs-small) / 1 var(--font); color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; transition: background-color var(--t-state) var(--ease), transform var(--t-fast) var(--ease);
}
.tool:hover { background: var(--tint); }
.tool:active { transform: scale(0.97); }
.tool svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .nav-links { display: none; } .nav-tools { margin-left: auto; } }

/* ---------- Sections ---------- */
.section {
  min-height: 100dvh;
  padding: calc(var(--nav-h) + var(--s6)) var(--gutter) var(--s7);
  display: grid; align-content: center;
  position: relative;
}
.section > * { width: 100%; max-width: 1440px; margin-inline: auto; }
.section + .section { border-top: 1px solid var(--line); }
.lead { font-size: var(--fs-lead); color: var(--muted); max-width: 46ch; line-height: 1.5; }
.kicker { font-size: var(--fs-small); font-weight: 600; color: var(--accent); letter-spacing: 0.02em; }

/* ---------- Hero ---------- */
.hero { overflow: clip; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -2; max-width: none; margin: 0; }
.hero-photo img { width: 100%; height: 112%; object-fit: cover; object-position: 72% 60%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--veil-strong) 0%, var(--veil-strong) 28%, var(--veil-soft) 62%);
}
.hero-copy { display: grid; gap: var(--s5); justify-items: start; }
.hero-copy h1 { max-width: 15ch; }
.hero-copy .lead { color: var(--ink); max-width: 36ch; }
.stores { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.store {
  display: inline-grid; gap: 2px; min-height: 56px; padding: var(--s2) var(--s5);
  align-content: center; text-decoration: none; border-radius: var(--r-pill);
  border: 1px solid var(--accent);
  transition: transform var(--t-state) var(--ease), background-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease);
}
.store small { font-size: 0.75rem; line-height: 1.2; font-weight: 400; }
.store b { font-size: 1.0625rem; line-height: 1.2; font-weight: 700; }
.store.primary { background: var(--accent); color: var(--on-accent); }
.store.ghost { background: var(--surface); color: var(--accent-deep); }
.store:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.store:active { transform: translateY(1px); box-shadow: none; }

.tag {
  display: inline-flex; align-items: center; justify-self: start; width: fit-content;
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  background: var(--tint); border: 1px solid var(--line);
  color: var(--accent-deep); font-size: var(--fs-small); font-weight: 600; line-height: 1.5;
}
.soon-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  max-width: 44ch; min-height: 44px; margin-top: var(--s2);
  color: var(--ink); font-size: var(--fs-small); font-weight: 600; text-decoration: none;
}
.soon-link .tag { background: var(--surface); }
.soon-link:hover { color: var(--accent-deep); text-decoration: underline; }

/* Portrait and square frames: copy on top over the sky, machine below. */
@media (max-aspect-ratio: 11/10) {
  .hero { align-content: start; padding-top: calc(var(--nav-h) + var(--s8)); }
  .hero::before { background: linear-gradient(180deg, var(--veil-strong) 0%, var(--veil-strong) 24%, var(--veil-soft) 46%); }
  .hero-photo img { object-position: 78% 100%; }
}

/* ---------- AI ---------- */
.ai-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: center; }
.ai-copy { display: grid; gap: var(--s5); }
.ai-shot { order: -1; }
.browser { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--inset); box-shadow: var(--shadow); }
/* Window bar with three dots, drawn from one element. */
.browser::before {
  content: ""; display: block; width: 8px; height: 8px; margin: var(--s2) var(--s3); border-radius: 50%;
  background: var(--furrow); box-shadow: 14px 0 var(--furrow), 28px 0 var(--furrow);
}
.browser img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-top: 1px solid var(--line); }
@media (max-aspect-ratio: 11/10), (max-width: 900px) {
  .ai-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .ai-shot { order: 0; }
}
@media (max-aspect-ratio: 11/10) and (min-aspect-ratio: 8/10) { .ai-shot .browser img { aspect-ratio: 16 / 5; } }

/* ---------- Owners ---------- */
.owners-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: center; }
.owners-copy { display: grid; gap: var(--s6); }
.feature-list { display: grid; gap: var(--s5); }
.feature-list li { display: grid; gap: var(--s1); align-content: start; padding-top: var(--s5); border-top: 1px solid var(--line); }
.feature-list p { color: var(--muted); max-width: 44ch; }
.note { font-size: var(--fs-small); color: var(--muted); background: var(--tint); border-radius: var(--r-card); padding: var(--s4) var(--s5); max-width: 48ch; }

.phones { --ph: clamp(300px, 62dvh, 760px); display: flex; justify-content: center; align-items: center; gap: clamp(8px, 1.6vw, 24px); }
.phone {
  flex: 0 1 calc(var(--ph) * 0.4615); min-width: 0;
  border: 5px solid var(--phone-edge); border-radius: clamp(18px, 2.4vw, 30px);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow);
}
/* Captures are 9:20 with the emulator status bar on top; anchoring to the bottom crops it. */
.phone img { width: 100%; height: auto; aspect-ratio: 1080 / 2300; object-fit: cover; object-position: bottom; }
.phones .phone:nth-child(2) { translate: 0 calc(var(--ph) * -0.06); }
.shot-credit { font-size: var(--fs-small); color: var(--muted); text-align: center; margin-top: var(--s6); }

@media (max-aspect-ratio: 11/10), (max-width: 900px) {
  .owners-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .phones { --ph: clamp(260px, 42dvh, 820px); }
  .feature-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
/* Near-square frames have less height to give the phones. */
@media (max-aspect-ratio: 11/10) and (min-aspect-ratio: 8/10) { .phones { --ph: clamp(260px, 35dvh, 820px); } }
@media (max-width: 560px) { .phones .phone:nth-child(3) { display: none; } }

/* ---------- Flow ---------- */
.flow-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: end; }
.types { display: grid; gap: var(--s3); }
.types li { display: grid; grid-template-columns: 11ch 1fr; gap: var(--s4); align-items: baseline; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.types b { font-weight: 600; }
.types span { color: var(--muted); }
.furrow { margin-top: var(--s7); }
.furrow svg { width: 100%; height: auto; overflow: visible; }
.furrow .row { fill: none; stroke: var(--furrow); stroke-width: 2; stroke-linecap: round; }
.furrow .track { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.furrow .stop { fill: var(--bg); stroke: var(--accent); stroke-width: 5; }
.furrow .stop.done { fill: var(--accent); }
.stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s4); }
.stops li { display: grid; gap: var(--s1); text-align: center; justify-items: center; }
.stops p { color: var(--muted); max-width: 24ch; line-height: 1.5; }

@media (max-width: 760px) {
  .flow-head { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .furrow svg { display: none; }
  .stops { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; border-left: 4px solid var(--accent); }
  .stops li { text-align: left; justify-items: start; padding: var(--s3) 0 var(--s3) var(--s5); position: relative; }
  .stops li::before { content: ""; position: absolute; left: -12px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 4px solid var(--accent); }
  .stops p { max-width: none; }
}

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--s8); align-items: start; }
.team-intro { display: grid; gap: var(--s5); }
.portal-shot .shot-credit { margin-top: var(--s4); text-align: left; }
.duties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); }
.duties div { padding-block: var(--s5); border-top: 1px solid var(--line); display: grid; gap: var(--s1); align-content: start; }
.duties dt { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.duties dd { color: var(--muted); max-width: 40ch; }
.roles { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--muted); grid-column: 1 / -1; }
.roles b { color: var(--ink); font-weight: 600; }
@media (max-aspect-ratio: 11/10), (max-width: 900px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .portal-shot .browser img { aspect-ratio: 16 / 6; }
}
/* Near-square frames have no height to spare for the portal capture. */
@media (max-aspect-ratio: 11/10) and (min-aspect-ratio: 8/10) { .portal-shot { display: none; } }
@media (max-width: 620px) { .duties { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Download ---------- */
.get-head { display: flex; align-items: center; gap: var(--s5); }
.get-head img { width: clamp(72px, 8vw, 112px); border-radius: 22%; border: 1px solid var(--line); }
.get-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.get-card {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center;
  padding: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.get-card > div { display: grid; gap: var(--s3); justify-items: start; }
.get-card p { color: var(--muted); font-size: var(--fs-small); }
.get-card .qr { width: clamp(104px, 11vw, 168px); padding: var(--s2); background: #ffffff; border-radius: var(--s2); border: 1px solid var(--line); }
.refs { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); display: grid; gap: var(--s2); }
.refs ol { display: grid; gap: var(--s1); list-style: decimal inside; }
.refs a { overflow-wrap: anywhere; display: inline-block; padding-block: var(--s3); }
@media (max-width: 820px) { .get-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .get-card { grid-template-columns: 1fr; } .get-card .qr { display: none; } }

/* ---------- Motion: scroll-linked, purely additive ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-photo img { animation: drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes drift { to { transform: translateY(-10%); } }
    .phones .phone { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .phones .phone:nth-child(2) { animation-range: entry 10% cover 46%; }
    .phones .phone:nth-child(3) { animation-range: entry 20% cover 52%; }
    @keyframes rise { from { transform: translateY(24px); } to { transform: none; } }
    .furrow .track { animation: plough linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes plough { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .store, .tool { transition: none; }
}