:root {
  --canvas: #faf9f5;
  --canvas-warm: #f3ebdd;
  --canvas-cool: #e3e8d3;
  --surface: #fffdf8;
  --surface-soft: #faf5ec;
  --surface-tint: #f2e9da;
  --chocolate: #2f2218;
  --chocolate-alt: #3a2a1c;
  --sage: #3f7a56;
  --sage-soft: #ddede2;
  --olive: #8e9472;
  --amber: #f39a3d;
  --amber-soft: #f8e1be;
  --coral: #ed7b8e;
  --text: #1f1e1b;
  --text-secondary: #6f675d;
  --text-tertiary: #a99d8d;
  --border: #e7ded0;
  --border-medium: #d8cbbb;
  --on-dark: #fbf6ea;
  --shadow-card: 0 6px 18px rgba(47, 34, 24, 0.055);
  --shadow-hero: 0 10px 28px rgba(47, 34, 24, 0.08);
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --max-width: 1160px;
  --body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --rounded-font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  color: var(--text);
  background: var(--canvas);
  font-family: var(--body-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(100% - 40px, var(--max-width)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body:not(.lang-en) [data-en], body.lang-en [data-vi] { display: none !important; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 245, 0.82);
  border-bottom: 1px solid rgba(231, 222, 208, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.header-inner, .site-header > .container { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 18px/1 var(--rounded-font); letter-spacing: -0.2px; }
.brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: var(--shadow-card); }
.nav, .nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: 10px 12px; color: var(--text-secondary); font-size: 14px; font-weight: 600; border-radius: var(--radius-full); }
.nav-links a:hover { color: var(--text); background: var(--surface-soft); }
.lang-toggle {
  margin-left: 6px;
  padding: 8px 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.nav-cta, .primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  color: var(--on-dark);
  background: var(--sage);
  border-radius: var(--radius-full);
  font: 600 14px/1 var(--rounded-font);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav-cta:hover, .primary-link:hover, .waitlist-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hero); }

.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 100px;
  background:
    radial-gradient(circle at 82% 13%, rgba(243,154,61,.14), transparent 28%),
    radial-gradient(circle at 4% 84%, rgba(63,122,86,.10), transparent 26%),
    var(--canvas);
}
.hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -220px;
  height: 360px;
  background: var(--canvas-warm);
  border-radius: 50% 50% 0 0;
  opacity: .7;
}
.hero-layout { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); align-items: center; gap: 80px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  color: var(--sage);
  background: var(--sage-soft);
  border-radius: var(--radius-full);
  font: 600 12px/1 var(--rounded-font);
  letter-spacing: .7px;
  text-transform: uppercase;
}
.eyebrow-amber { color: #a85d13; background: var(--amber-soft); }
.hero h1 {
  max-width: 640px;
  margin: 24px 0 22px;
  font: 700 clamp(48px, 5.7vw, 76px)/.98 var(--rounded-font);
  letter-spacing: -2.8px;
}
.hero h1 em { color: var(--sage); font-style: normal; }
.tagline { max-width: 570px; margin: 0 0 34px; color: var(--text-secondary); font-size: clamp(18px, 2vw, 21px); line-height: 1.55; }
.waitlist { width: min(100%, 570px); }
.waitlist-row { display: flex; gap: 10px; padding: 6px; background: rgba(255,253,248,.9); border: 1px solid var(--border); border-radius: var(--radius-full); box-shadow: var(--shadow-card); }
.waitlist-input { min-width: 0; flex: 1; padding: 0 16px; color: var(--text); background: transparent; border: 0; outline: 0; }
.waitlist-input::placeholder { color: var(--text-tertiary); }
.waitlist-row:focus-within { border-color: rgba(63,122,86,.55); box-shadow: 0 0 0 4px rgba(63,122,86,.10); }
.waitlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  color: var(--on-dark);
  background: var(--sage);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  font: 600 15px/1 var(--rounded-font);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.waitlist-btn svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.waitlist-btn:disabled { opacity: .55; cursor: progress; transform: none; }
.waitlist-status { min-height: 20px; margin: 7px 12px 0; font-size: 14px; }
.waitlist-status.is-success { color: var(--sage); font-weight: 600; }
.waitlist-status.is-error { color: #c9483c; font-weight: 600; }
.cta-note { display: block; margin: 0 12px; color: var(--text-tertiary); font-size: 13px; }

.hero-preview { position: relative; min-height: 780px; display: grid; place-items: center; }
.preview-glow { position: absolute; width: 480px; height: 480px; background: var(--amber-soft); border-radius: 50%; filter: blur(4px); opacity: .56; }
.phone-shell {
  --phone-x: 0px;
  --phone-y: 0px;
  --phone-rotate-x: 0deg;
  --phone-rotate-y: 0deg;
  position: relative;
  width: 354px;
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
  padding: 15px 14px 16px;
  background: var(--canvas);
  border: 6px solid var(--chocolate);
  border-radius: 52px;
  box-shadow: 0 28px 70px rgba(47,34,24,.20), inset 0 0 0 1px rgba(255,255,255,.8);
  transform: perspective(1200px) translate3d(var(--phone-x), var(--phone-y), 0) rotate(1.4deg) rotateX(var(--phone-rotate-x)) rotateY(var(--phone-rotate-y));
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
  animation: phone-breathe 7s ease-in-out 1.1s infinite;
}
.phone-status { display: flex; justify-content: space-between; padding: 3px 17px 24px; font: 600 11px/1 var(--rounded-font); }
.app-greeting { position: relative; min-height: 132px; display: flex; align-items: flex-start; padding: 9px 10px 0; }
.app-greeting > div { display: flex; flex-direction: column; gap: 7px; padding-top: 8px; }
.app-greeting strong { max-width: 190px; font: 700 28px/1.05 var(--rounded-font); letter-spacing: -.7px; }
.mini-eyebrow { color: var(--text-secondary); font-size: 14px; }
.app-greeting img { position: absolute; right: -5px; bottom: 3px; width: 128px; }
.app-card { position: relative; margin-top: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.life-card { display: flex; align-items: center; justify-content: space-between; min-height: 148px; }
.mini-pill, .percent-pill { display: inline-flex; padding: 6px 10px; color: var(--sage); background: var(--sage-soft); border-radius: var(--radius-full); font: 600 10px/1 var(--rounded-font); letter-spacing: .5px; text-transform: uppercase; }
.life-number { margin: 12px 0 7px; font: 700 29px/1 var(--rounded-font); letter-spacing: -.8px; }
.life-number small { color: var(--text-secondary); font-size: 17px; }
.percent-pill { padding: 5px 9px; font: 500 10px/1 var(--body-font); letter-spacing: 0; text-transform: none; }
.life-grid { display: grid; grid-template-columns: repeat(8, 9px); grid-auto-rows: 9px; gap: 4px; width: 100px; }
.life-grid::before { content: ""; grid-column: 1/-1; height: 61px; background: radial-gradient(circle, var(--border-medium) 0 4px, transparent 4.5px) 0 0/13px 13px; }
.priority-card { flex: 1; min-height: 210px; overflow: hidden; }
.priority-card::after { content: ""; position: absolute; right: -18px; bottom: -20px; width: 110px; height: 90px; background: url("assets/mascot-garden.png") center/contain no-repeat; opacity: .32; }
.priority { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 13px; padding-right: 52px; font-size: 13px; }
.priority b { flex: 0 0 24px; height: 24px; display: grid; place-items: center; color: var(--sage); background: var(--sage-soft); border-radius: 50%; font-size: 12px; }
.app-tabs { display: flex; justify-content: space-around; margin-top: 14px; padding: 10px; color: var(--text-tertiary); background: rgba(255,253,248,.88); border: 1px solid var(--border); border-radius: var(--radius-full); }
.app-tabs span { width: 35px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-full); }
.app-tabs .active { color: var(--sage); background: var(--sage-soft); }

section { padding: 108px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2, .inside-copy h2, .values h2, .cta-card h2 {
  margin: 18px 0 14px;
  font: 700 clamp(35px, 4.5vw, 54px)/1.05 var(--rounded-font);
  letter-spacing: -1.8px;
}
.section-head p, .inside-copy > p, .cta-card p { margin: 0; color: var(--text-secondary); font-size: 18px; }
.ritual { position: relative; background: var(--canvas-warm); }
.ritual-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ritual-card { position: relative; min-height: 330px; padding: 26px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.ritual-card:nth-child(even) { margin-top: 28px; }
.ritual-card .step-number { color: var(--text-tertiary); font: 600 12px/1 var(--rounded-font); letter-spacing: 1px; }
.ritual-card img { width: 76px; height: 76px; margin: 32px 0 24px; image-rendering: auto; }
.ritual-card h3 { margin: 0 0 10px; font: 600 21px/1.15 var(--rounded-font); letter-spacing: -.3px; }
.ritual-card p { margin: 0; color: var(--text-secondary); font-size: 15px; }

.inside { background: var(--canvas); }
.inside-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 96px; align-items: center; }
.inside-art { position: relative; min-height: 510px; display: grid; place-items: center; background: var(--canvas-cool); border-radius: 48px; overflow: hidden; }
.inside-art::before { content: ""; position: absolute; inset: 38px; border: 1px solid rgba(47,34,24,.08); border-radius: 34px; }
.inside-art img { position: absolute; right: 8px; bottom: -14px; width: 290px; }
.letter-card { position: relative; z-index: 2; width: 67%; margin: 0 24% 70px 0; padding: 26px; background: rgba(255,253,248,.94); border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-xl); box-shadow: var(--shadow-hero); transform: rotate(-2deg); }
.letter-head { display: flex; justify-content: space-between; color: var(--sage); font: 600 18px/1.2 var(--rounded-font); }
.letter-card p { margin: 18px 0 0; color: var(--text-secondary); line-height: 1.75; }
.inside-copy { max-width: 490px; }
.inside-list { display: grid; gap: 14px; padding: 0; margin: 30px 0 0; list-style: none; }
.inside-list li { display: flex; align-items: center; gap: 12px; }
.inside-list li > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; color: var(--sage); background: var(--sage-soft); border-radius: 50%; font-weight: 700; }

.values { color: var(--on-dark); background: var(--chocolate); }
.values-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.eyebrow-dark { color: var(--amber-soft); background: rgba(248,225,190,.1); border: 1px solid rgba(248,225,190,.15); }
.values h2 { max-width: 570px; margin-bottom: 0; }
.value-list { border-top: 1px solid rgba(255,255,255,.14); }
.value-list > div { display: grid; grid-template-columns: 50px 1fr; align-items: center; min-height: 76px; border-bottom: 1px solid rgba(255,255,255,.14); }
.value-list span { color: var(--amber); font: 600 12px/1 var(--rounded-font); }
.value-list p { margin: 0; font: 500 18px/1.3 var(--rounded-font); }

.final-cta { padding: 96px 0; background: var(--canvas-warm); }
.cta-card { position: relative; min-height: 400px; display: flex; align-items: center; padding: 54px 60px 54px 46%; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 40px; box-shadow: var(--shadow-hero); }
.cta-card > img { position: absolute; left: 5%; bottom: -3%; width: 39%; max-height: 440px; object-fit: contain; }
.cta-card > div { position: relative; z-index: 2; }
.cta-card h2 { font-size: clamp(36px, 4vw, 52px); }
.cta-card .primary-link { margin-top: 28px; min-height: 54px; padding-inline: 24px; }

.site-footer { padding: 48px 0; background: var(--canvas); border-top: 1px solid var(--border); }
.footer-layout { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 44px; height: 44px; border-radius: 12px; }
.footer-brand div { display: flex; flex-direction: column; }
.footer-brand strong { font: 700 17px/1.2 var(--rounded-font); }
.footer-brand span { color: var(--text-secondary); font-size: 13px; }
.footer-links { display: flex; gap: 24px; color: var(--text-secondary); font-size: 14px; }
.footer-links a:hover { color: var(--sage); }
.footer-copy { grid-column: 1/-1; margin: 0; color: var(--text-tertiary); font-size: 12px; }

/* Shared legal pages */
.legal { padding: 64px 0 96px; }
.legal .container { max-width: 760px; }
.legal h1 { margin: 0 0 8px; color: var(--chocolate); font: 700 clamp(36px,5vw,52px)/1.05 var(--rounded-font); letter-spacing: -1.5px; }
.legal .updated { margin: 0 0 40px; color: var(--text-secondary); font-weight: 600; }
.legal h2 { margin: 40px 0 12px; color: var(--chocolate); font: 600 23px/1.2 var(--rounded-font); }
.legal p, .legal li { font-size: 16px; }
.legal li { margin-bottom: 8px; }
.back-link { display: inline-flex; margin-bottom: 32px; color: var(--sage); font-weight: 600; }

/* Calm motion: slow entrances, restrained depth, no attention-seeking loops. */
.motion-ready .hero-copy > * {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-enter 900ms cubic-bezier(.22, 1, .36, 1) forwards;
}
.motion-ready .hero-copy > :nth-child(1),
.motion-ready .hero-copy > :nth-child(2) { animation-delay: 80ms; }
.motion-ready .hero-copy > :nth-child(3),
.motion-ready .hero-copy > :nth-child(4) { animation-delay: 180ms; }
.motion-ready .hero-copy > :nth-child(5),
.motion-ready .hero-copy > :nth-child(6) { animation-delay: 300ms; }
.motion-ready .hero-copy > .waitlist { animation-delay: 420ms; }
.motion-ready .hero-preview {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  animation: preview-enter 1100ms 260ms cubic-bezier(.22, 1, .36, 1) forwards;
}
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    transform 900ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
}
.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.ritual-card,
.app-card,
.letter-card,
.cta-card {
  transition: transform 500ms cubic-bezier(.22, 1, .36, 1), box-shadow 500ms ease;
}
@media (hover: hover) {
  .ritual-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-hero); }
  .letter-card:hover { transform: rotate(-1deg) translateY(-4px); box-shadow: 0 16px 36px rgba(47,34,24,.10); }
}
.preview-glow { animation: glow-breathe 8s ease-in-out infinite; }
.inside-art img, .cta-card > img { animation: illustration-breathe 8s ease-in-out infinite; }

@keyframes hero-enter {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes preview-enter {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes phone-breathe {
  0%, 100% {
    transform: perspective(1200px) translate3d(var(--phone-x), var(--phone-y), 0) rotate(1.4deg) rotateX(var(--phone-rotate-x)) rotateY(var(--phone-rotate-y));
  }
  50% {
    transform: perspective(1200px) translate3d(var(--phone-x), calc(var(--phone-y) - 5px), 0) rotate(1deg) rotateX(var(--phone-rotate-x)) rotateY(var(--phone-rotate-y));
  }
}
@keyframes glow-breathe {
  0%, 100% { transform: scale(.96); opacity: .48; }
  50% { transform: scale(1.05); opacity: .64; }
}
@keyframes illustration-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@media (max-width: 980px) {
  .nav-links { display: none; }
  .hero { padding-top: 64px; }
  .hero-layout { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero h1 { max-width: 760px; }
  .hero-preview { min-height: 780px; }
  .ritual-grid { grid-template-columns: repeat(2, 1fr); }
  .ritual-card:nth-child(even) { margin-top: 0; }
  .inside-layout { gap: 48px; }
  .inside-art { min-height: 450px; }
  .values-layout { gap: 52px; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 32px, var(--max-width)); }
  .header-inner, .site-header > .container { height: 64px; }
  .brand span, .nav-cta { display: none !important; }
  .lang-toggle { padding-right: 0; }
  .hero { padding: 58px 0 72px; }
  .hero h1 { margin-top: 20px; font-size: clamp(42px, 13vw, 62px); letter-spacing: -2px; }
  .tagline { font-size: 17px; }
  .hero-preview { min-height: auto; padding: 20px 0; }
  .phone-shell { width: min(354px, 94vw); }
  .preview-glow { width: 330px; height: 330px; }
  section { padding: 78px 0; }
  .section-head { margin-bottom: 40px; }
  .section-head h2, .inside-copy h2, .values h2, .cta-card h2 { font-size: 38px; letter-spacing: -1.2px; }
  .ritual-grid { grid-template-columns: 1fr; }
  .ritual-card { min-height: 0; }
  .ritual-card img { margin: 24px 0 20px; }
  .inside-layout, .values-layout { grid-template-columns: 1fr; gap: 44px; }
  .inside-art { min-height: 430px; order: 2; }
  .letter-card { width: 76%; margin: 0 16% 100px 0; }
  .values-layout { gap: 32px; }
  .cta-card { min-height: 650px; align-items: flex-start; padding: 46px 28px 300px; text-align: center; }
  .cta-card > div { display: flex; flex-direction: column; align-items: center; }
  .cta-card > img { z-index: 1; left: 50%; bottom: -4%; width: 340px; max-width: 94%; transform: translateX(-50%); }
  .footer-layout { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; gap: 16px 24px; }
  .footer-copy { grid-column: auto; }
}

@media (max-width: 520px) {
  .waitlist-row { flex-direction: column; padding: 7px; border-radius: 24px; }
  .waitlist-input { min-height: 48px; text-align: center; }
  .waitlist-btn { width: 100%; }
  .app-greeting strong { font-size: 25px; }
  .app-greeting img { width: 125px; }
  .inside-art { min-height: 390px; border-radius: 32px; }
  .inside-art img { width: 230px; right: -20px; }
  .letter-card { width: 82%; margin: 0 12% 100px 0; padding: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal, .hero-copy > *, .hero-preview { opacity: 1 !important; transform: none !important; }
}