/* Focus Land: trang giới thiệu theo kiểu trang sản phẩm Apple (nền sáng như trang iPad mini).
   Phần mở đầu và phần tải về nền trời như biểu tượng app (ios/Runner/Assets.xcassets/AppIcon.appiconset);
   các phần khác xen kẽ trắng và xanh trời rất nhạt. Chữ "Focus Land" như màn splash của app
   (lib/ui/splash.dart): Nunito ExtraBold, "Focus" nâu đậm, "Land" xanh primary (Palette.leafDark).
   Còn lại font hệ thống (SF Pro trên máy Apple). */

@font-face {
  font-family: "Nunito Wordmark";
  src: url("fonts/nunito-wordmark.woff2") format("woff2"); /* chỉ có các chữ "Focus Land" */
  font-weight: 800;
  font-display: block;
}

:root {
  --ink: #1d1d1f;
  --gray: #6e6e73;
  --brown: #3b2b20; /* Palette.inkStrong */
  --brown-soft: #5b4636; /* Palette.ink */
  --primary: #4e9a35; /* Palette.leafDark */
  --primary-deep: #3a8228; /* primary đậm hơn: nổi trên nền trời */
  --green: #3a8228; /* primary đậm hơn chút cho chữ trắng trên nút đủ tương phản */
  --green-hover: #326f22;
  --tint: #f2f8fc; /* xanh trời rất nhạt */
  --line: #dde6ec;
  --nav: 48px;
  --wrap: 980px;
  /* Tiêu đề phần: luôn một dòng, co theo cả bề ngang lẫn chiều cao màn hình. */
  --h2: clamp(24px, min(7.4vw, 7.5vh), 72px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI",
    Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; }

.wrap {
  width: min(var(--wrap), 100% - 2 * max(22px, 4vw));
  margin-inline: auto;
}

.tint { background: var(--tint); }
/* Nền trời của biểu tượng app. */
.sky-full { background: linear-gradient(180deg, #9fdaf1 0%, #b9e4f4 60%, #c8eaf6 100%); }

/* Chữ "Focus Land" như trong app. */
.wordmark {
  color: var(--brown);
  font-family: "Nunito Wordmark", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.wordmark span { color: var(--primary); }
/* Trên nền trời: chữ cùng tông nâu của app, "Land" xanh đậm hơn cho đủ tương phản. */
.sky-full { color: var(--brown); }
.sky-full .wordmark span { color: var(--primary-deep); }
.sky-full .intro, .sky-full .copy { color: var(--brown-soft); }

/* Nhảy tới một phần (như nút Tải về) thì phần đó nằm ngay dưới thanh nav. */
main > section { scroll-margin-top: var(--nav); }

/* ---------------------------------------------------------------- thanh nav */

/* Ẩn khi đang ở phần mở đầu (đã có tên và nút tải về); main.js thêm .show khi cuộn qua. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
  background: rgb(255 255 255 / 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgb(0 0 0 / 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.nav.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.no-js .nav { position: sticky; top: 0; opacity: 1; visibility: visible; transform: none; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--wrap), 100% - 2 * max(22px, 4vw));
  height: var(--nav);
  margin-inline: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  text-decoration: none;
}
.brand img { border-radius: 5px; }

.button {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 980px;
  background: var(--green);
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.button:hover { background: var(--green-hover); }
.button-small { padding: 4px 12px; font-size: 13px; }
.button:focus-visible, .brand:focus-visible, .foot a:focus-visible, .replay:focus-visible {
  outline: 3px solid rgb(78 154 53 / 0.5);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- mở đầu */

/* Phủ kín màn hình màu trời, nội dung ở giữa. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(32px, 7vh, 80px) 0;
  text-align: center;
}
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
}
.hero h1 {
  font-size: clamp(48px, 9vw, 104px);
  line-height: 1.05;
}
.tagline {
  margin-top: 6px;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
}
.intro {
  max-width: 34em;
  margin: 14px auto 0;
  color: var(--gray);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.4;
}
.actions { margin-top: clamp(20px, 3vh, 32px); }

/* ---------------------------------------------------------------- các phần có video */

.feature { padding: clamp(80px, 13vh, 150px) 0; }
.feature h2, .more h2, .pro-head h2, .download h2 {
  font-size: var(--h2);
  line-height: 1.08;
  white-space: nowrap;
}
.copy {
  max-width: 34em;
  margin-top: clamp(28px, 4vh, 48px);
  color: var(--gray);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: 0.002em;
}
.copy strong { color: var(--green); font-weight: 600; }
.copy.center { margin-inline: auto; text-align: center; }

/* Khung video: 16:9, rộng hơn cột chữ (như ảnh lớn trên trang Apple); điện thoại thì vuông
   (main.js chọn bản video theo khổ). */
.media {
  position: relative;
  width: min(1260px, 100% - 2 * max(16px, 3vw));
  margin: clamp(40px, 6vh, 64px) auto 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: clamp(16px, 2vw, 28px);
  background: #c9e48a center / cover no-repeat;
}
.media-hero {
  width: min(1440px, 100%);
  margin-top: clamp(40px, 6vh, 72px);
  border-radius: 0;
}
@media (min-width: 1460px) {
  .media-hero { border-radius: 28px; }
}
.media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .media { aspect-ratio: 1; }
}

/* Nút phát lại ở góc, hiện khi video đã phát xong (như trang Apple). */
.replay {
  position: absolute;
  right: clamp(12px, 1.6vw, 22px);
  bottom: clamp(12px, 1.6vw, 22px);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a8228' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.2-5.3'/%3E%3Cpath d='M4.5 4.5v4h4'/%3E%3C/svg%3E") center / 20px no-repeat;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.replay:hover { background-color: #fff; }
.replay.play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233a8228' d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E");
}

/* Hiện dần khi cuộn tới, lệch nhịp như trang Apple (main.js thêm .seen). */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.js .reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; transition: opacity 0.3s ease; }
}

/* ---------------------------------------------------------------- tính năng khác */

.more { padding: clamp(80px, 13vh, 150px) 0; }
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 20px;
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.tile {
  padding: 32px 30px 34px;
  border-radius: 28px;
  background: var(--tint);
}
.tile svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile h3 { margin: 20px 0 6px; font-size: 21px; line-height: 1.2; }
.tile p { color: var(--gray); font-size: 17px; line-height: 1.47; }

/* ---------------------------------------------------------------- Pro */

.pro { padding: clamp(80px, 13vh, 150px) 0; }
.pro-head { text-align: center; }
.pro-badge { width: 88px; height: auto; }
.pro-head h2 { margin-top: 14px; }
.pro-head .copy { margin-top: 16px; }
.pro-garden {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(40px, 6vh, 64px);
  border-radius: clamp(16px, 2vw, 28px);
}
.pro-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 28px 32px;
  margin: clamp(40px, 6vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.pro-list img { width: 56px; height: 56px; }
.pro-list h3 { margin: 12px 0 4px; font-size: 21px; }
.pro-list p { color: var(--gray); }

/* ---------------------------------------------------------------- tải về */

.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(80px, 13vh, 150px) 22px;
  text-align: center;
}
.download img { border-radius: 22px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.download h2 { margin-top: 24px; }
.download .copy { margin-top: 14px; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 9px 20px 9px 16px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
  text-decoration: none;
}
.store small { display: block; font-size: 11px; font-weight: 400; }
.store[aria-disabled="true"] { cursor: default; }

/* ---------------------------------------------------------------- chân trang */

.foot {
  padding: 20px 0 max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--gray);
  font-size: 12px;
  letter-spacing: -0.01em;
}
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- vừa một màn hình */

/* Máy tính, tablet: mỗi phần cao đúng một màn hình và nằm trọn trong đó. Video (ngang 16:9, tablet
   dọc thì vuông, --ratio) co theo chiều cao còn lại sau tiêu đề, khoảng cách và đoạn chữ
   (--reserve); cột chữ không rộng hơn video. */
@media (min-width: 700px) {
  :root {
    --ratio: 1.7778;
    --screen: calc(100vh - var(--nav) - 1px); /* trừ viền dưới thanh nav */
    --pad: clamp(24px, 5vh, 56px);
    --gap1: clamp(20px, 3.5vh, 40px);
    --gap2: clamp(14px, 2.4vh, 28px);
    --copy: clamp(17px, min(1.8vw, 2.6vh), 24px);
    --h1: clamp(40px, min(7vw, 8.5vh), 88px);
    --tag: clamp(20px, min(3vw, 3.8vh), 36px);
    --full: 100vh; /* phần mở đầu: thanh nav ẩn nên phủ cả màn hình */
  }
  @supports (height: 100svh) {
    :root { --screen: calc(100svh - var(--nav) - 1px); --full: 100svh; }
  }

  .hero, .feature, .more, .pro, .download {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--screen);
    padding-block: var(--pad);
  }

  .hero {
    --reserve: calc(2 * var(--pad) + 1.05 * var(--h1) + 6px + 1.15 * var(--tag) + 14px + 1.4 * var(--copy)
      + var(--gap1) + 44px + var(--gap1) + 8px);
    min-height: var(--full);
  }
  .hero h1 { font-size: var(--h1); }
  .tagline { font-size: var(--tag); }
  .intro { font-size: var(--copy); }
  .actions { margin-top: var(--gap1); }
  .media-hero {
    width: min(1440px, 100% - 2 * max(16px, 3vw), (var(--full) - var(--reserve)) * var(--ratio));
    margin-top: var(--gap1);
    border-radius: clamp(16px, 2vw, 28px);
  }

  .feature {
    --reserve: calc(2 * var(--pad) + 1.08 * var(--h2) + var(--gap1) + var(--gap2) + 2.7 * var(--copy));
    --media: min(1260px, 100% - 2 * max(16px, 3vw), (var(--screen) - var(--reserve)) * var(--ratio));
  }
  .feature .wrap { width: min(var(--wrap), var(--media)); }
  .feature .media { width: var(--media); margin-top: var(--gap1); }
  .feature .copy { max-width: 40em; margin-top: var(--gap2); font-size: var(--copy); }

  .tiles { margin-top: var(--gap1); }

  .pro-badge { width: clamp(56px, 9vh, 88px); }
  .pro-head .copy { margin-top: var(--gap2); font-size: var(--copy); }
  .pro-garden {
    width: auto;
    max-width: 100%;
    height: clamp(160px, var(--screen) - 2 * var(--pad) - 1.08 * var(--h2) - 2.7 * var(--copy) - 2 * var(--gap1) - 9vh - 190px, 560px);
    margin: var(--gap1) auto 0;
    object-fit: cover;
  }
  .pro-list { margin-top: var(--gap1); }

  .download .copy { font-size: var(--copy); }
}
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  :root { --ratio: 1; }
}

/* ---------------------------------------------------------------- trang chữ (chính sách) */

.doc { padding: calc(var(--nav) + clamp(48px, 8vh, 96px)) 0 clamp(64px, 10vh, 120px); }
.doc article { max-width: 720px; }
.doc article + article { margin-top: clamp(64px, 10vh, 120px); padding-top: clamp(48px, 8vh, 96px); border-top: 1px solid var(--line); }
.doc article { scroll-margin-top: calc(var(--nav) + 24px); }
.doc h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.1; }
.doc .updated { margin-top: 10px; color: var(--gray); font-size: 15px; }
.doc h2 { margin-top: 40px; font-size: 24px; line-height: 1.25; }
.doc p, .doc li { color: #424245; font-size: 17px; line-height: 1.55; }
.doc p { margin-top: 14px; }
.doc ul { margin: 14px 0 0; padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--green); }

.langs { display: flex; gap: 18px; font-size: 13px; }
.langs a { color: var(--gray); text-decoration: none; }
.langs a:hover { color: var(--ink); }