@font-face{
  font-family:"Inter";
  src:url("assets/InterVariable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root{
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Ba sắc tím dưới đây lấy nguyên từ Palette.swift của app iOS (trường veilHex
     — màu phụ dùng cho quầng sáng và gradient). Web dùng đúng ba giá trị này,
     không tự pha thêm tím mới:
       #B79BFF  ironTemple      → màu thương hiệu của web (--core)
       #C77DFF  origin/thunder  → vệt sáng ấm, dùng cho quầng CTA và hero
       #9B8CFF  gravityMaster   → vệt sáng ngả xanh, dùng cho vùng chuyển section
     Trong app, tím không bao giờ lên chữ thân bài; trên web nó cũng chỉ đứng ở
     eyebrow, dòng nhấn của tiêu đề và các quầng sáng — không đụng vào body copy. */
  --core:#B79BFF;
  --core-rgb:183,155,255;
  --veil:#C77DFF;
  --veil-rgb:199,125,255;
  --veil-cool:#9B8CFF;
  --veil-cool-rgb:155,140,255;
  --crest:#221B33;
  --page-top:#1A1229;
  --haze:#16131F;
  --abyss:#050409;
  --text-bright:#F5F1FF;
  --text:rgba(255,255,255,.92);
  --secondary:rgba(255,255,255,.60);
  --caption:rgba(255,255,255,.40);
  --glass:rgba(0,0,0,.46);
  --hairline:rgba(183,155,255,.12);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --radius-lg:30px;
  --radius-md:20px;
  --radius-sm:16px;
  --page-gutter:clamp(16px,4vw,56px);
}

*,*::before,*::after{
  box-sizing:border-box;
  -webkit-user-select:none;
  user-select:none;
}

::selection{
  background:transparent;
  color:inherit;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
  color-scheme:dark;
  min-height:100%;
  /* No background here: the body gradient propagates to the canvas instead, so
     the safe areas and the overscroll edges keep the colour of the page next to
     them rather than a flat violet. */
}

body{
  margin:0;
  min-height:100svh;
  /* Keep content in its original safe region while the background reaches every edge. */
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* Nền gần đen với sắc tím rất sâu, bám theo nền màn hình app. motion.js đọc
     lại chính chuỗi này để chỉnh theme-color của Safari, nên phải giữ nguyên
     dạng "#rrggbb NN%" ở từng điểm dừng. */
  --page-gradient:linear-gradient(
    135deg,
    #1A1229 0%,
    #150F22 28%,
    #0F0B1A 55%,
    #0A0712 78%,
    #050409 100%
  );
  background:var(--page-top) var(--page-gradient);
  color:var(--text);
  font-family:var(--font-sans);
  font-optical-sizing:auto;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  isolation:isolate;
}

/* Lớp không khí của trang: hạt sáng thưa và những đường nét mảnh nghiêng, đúng
   thứ nền màn hình app đang có. Cố định, không filter, không animation — trình
   duyệt tách nó thành một lớp tĩnh nên cuộn trên iPhone không phải vẽ lại. */
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.6;
  background:
    radial-gradient(1.4px 1.4px at 11% 14%,rgba(255,255,255,.55),transparent 62%),
    radial-gradient(1.2px 1.2px at 27% 31%,rgba(var(--core-rgb),.6),transparent 62%),
    radial-gradient(1.5px 1.5px at 43% 9%,rgba(255,255,255,.42),transparent 62%),
    radial-gradient(1.2px 1.2px at 61% 24%,rgba(var(--veil-rgb),.5),transparent 62%),
    radial-gradient(1.6px 1.6px at 79% 12%,rgba(255,255,255,.5),transparent 62%),
    radial-gradient(1.2px 1.2px at 92% 33%,rgba(var(--core-rgb),.45),transparent 62%),
    radial-gradient(1.3px 1.3px at 8% 52%,rgba(255,255,255,.38),transparent 62%),
    radial-gradient(1.5px 1.5px at 34% 67%,rgba(var(--veil-cool-rgb),.5),transparent 62%),
    radial-gradient(1.2px 1.2px at 56% 58%,rgba(255,255,255,.34),transparent 62%),
    radial-gradient(1.4px 1.4px at 71% 78%,rgba(var(--core-rgb),.45),transparent 62%),
    radial-gradient(1.3px 1.3px at 88% 63%,rgba(255,255,255,.4),transparent 62%),
    radial-gradient(1.2px 1.2px at 19% 88%,rgba(var(--veil-rgb),.4),transparent 62%),
    radial-gradient(1.5px 1.5px at 47% 93%,rgba(255,255,255,.3),transparent 62%),
    radial-gradient(1.3px 1.3px at 66% 42%,rgba(255,255,255,.28),transparent 62%),
    repeating-linear-gradient(
      101deg,
      transparent 0 96px,
      rgba(var(--core-rgb),.05) 96px 97.5px,
      transparent 97.5px 214px
    );
}

/* Trang trí thuần túy: bỏ hẳn khi người dùng cần tương phản cao. */
@media(prefers-contrast:more){
  body:before{display:none}
}

/* Các quầng sáng cố ý tràn qua mép khung chữ. overflow:clip giữ phần tràn đó ở
   trong section: nếu không, vùng sáng sẽ nong chiều rộng cuộn và cả trang bị
   cuộn ngang trên mọi kích thước màn hình. Dùng clip (không phải hidden) vì
   clip không biến section thành vùng cuộn, nên position:sticky vẫn hoạt động.

   .reviews KHÔNG có trong danh sách này, và có lý do: vùng sáng của nó không tràn
   ra ngoài (inset:0), còn băng chuyền tự cắt ở .review-viewport. Cắt thêm ở
   section chỉ cắt đúng một thứ — bóng đổ 48px của các thẻ đánh giá — tại mép
   section, vốn thụt 12px so với mép màn điện thoại. Vết cắt đó là hai vạch dọc
   hai bên thẻ (bước nhảy ~2,7), góp phần vào "hình vuông" từng lộ ra ở khu này. */
.hero,
.intelligence,
.waitlist{
  overflow:clip;
}

/* Vùng sáng tím mềm — luôn được đặt ở một vị trí có lý do (sau màn app, tại
   điểm chuyển section, ở khối đăng ký), không phủ đều toàn trang. */
.hero-halo,
.feature-halo,
.intelligence:before,
.reviews:before,
.waitlist:before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  /* Hình dạng vùng sáng nằm trong bản thân gradient. Bo góc phần tử ở đây sẽ
     cắt nền thành một hình bầu dục có rìa thấy được trên nền tối.

     LUẬT: mọi radial-gradient ở đây phải chạm transparent TRƯỚC mép của chính
     phần tử — nghĩa là tâm + bán kính ≤ 100% theo cả hai trục. Section bọc
     ngoài có overflow:clip, nên một gradient còn dư dù chỉ alpha .01 lúc bị cắt
     sẽ để lại một vệt dọc thấy rõ ngay tại mép section. Đó chính là "vệt bị cắt
     ở mép phải" từng có ở phần cá nhân hóa: gradient thứ hai đặt tâm 58% với
     bán kính 50% nên còn sáng ở tận 108%. Phần nằm ngoài mép section không bao
     giờ hiện ra được, chỉ tạo thêm chỗ để bị cắt. */
}

/* Từng có một đường kẻ mảnh ở đầu mỗi section để phân nhịp. Bỏ rồi: quầng sáng
   và khoảng đệm của từng section đã đủ tách chúng ra, thêm đường kẻ chỉ tổ
   chia trang thành từng ô. Đừng dựng lại. */

button,a{
  -webkit-tap-highlight-color:transparent;
}

button{
  font:inherit;
  color:inherit;
  cursor:pointer;
}

button,a,summary{
  touch-action:manipulation;
}

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

img{
  display:block;
  max-width:100%;
}

button:disabled{
  cursor:default;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--core);
  outline-offset:6px;
}

::selection{
  background:var(--core);
  color:#101117;
}

[hidden]{
  display:none!important;
}

h1,h2,h3,h4,p{
  margin:0;
}

h1,h2{
  color:var(--text-bright);
  font-weight:500;
  letter-spacing:-.045em;
  text-wrap:balance;
  text-shadow:0 0 42px rgba(183,155,255,.07);
}

h1 span,h2 span{
  color:var(--core);
}

h2{
  font-size:clamp(36px,4.1vw,54px);
  line-height:1.17;
}

h3{
  font-weight:550;
  letter-spacing:-.025em;
}

p{
  color:var(--secondary);
}

.wrap{
  width:calc(100% - 2 * var(--page-gutter));
  max-width:1240px;
  margin-inline:auto;
}

.section{
  padding-block:118px;
  scroll-margin-top:20px;
  /* Nền của từng section là lớp riêng, nên quầng sáng neo vào đúng section
     chứ không trôi ra toàn trang. */
  position:relative;
  isolation:isolate;
}

.eyebrow{
  color:var(--core);
  font-size:10px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.17em;
  margin-bottom:24px;
}

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  transform:translateY(-180%);
  z-index:60;
  background:var(--core);
  color:#101117;
  padding:12px 18px;
  border-radius:16px;
}

.skip-link:focus{
  transform:translateY(0);
}

.site-header{
  width:max-content;
  max-width:min(1240px,calc(100% - 2 * var(--page-gutter)));
  min-height:55px;
  margin:18px auto 0;
  padding:7px 17px 7px 10px;
  gap:28px;
  border-radius:999px;
  position:sticky;
  top:18px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(10,8,15,.86);
  border:1px solid var(--hairline);
  box-shadow:
    0 9px 32px rgba(5,5,8,.18),
    inset 0 1px 0 rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:17px;
  letter-spacing:-.03em;
  font-weight:500;
  flex-shrink:0;
  white-space:nowrap;
}

.brand img{
  width:29px;
  height:29px;
  object-fit:contain;
}

.brand-light{
  font-weight:400;
  color:var(--secondary);
}

.site-nav{
  display:flex;
  align-items:center;
  gap:22px;
  font-size:13px;
}

.site-nav a{
  color:var(--secondary);
  transition:color 180ms ease;
  padding-block:10px;
}

.site-nav a:hover{
  color:var(--text-bright);
}

.site-nav .desktop-nav-only{display:none}

/* The sliding indicator belongs to the desktop bar; the mobile menu tints its own row. */
.nav-indicator{display:none}

.menu-toggle{
  display:none;
}

.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  align-items:center;
  padding-top:clamp(32px,5svh,64px);
  column-gap:clamp(24px,3vw,48px);
}

/* Những đường nét mảnh của app, đậm hơn một chút ở hero rồi tắt dần xuống dưới.
   Đủ mờ để không tranh với chữ, nhưng đủ để hero và ảnh app cùng một chất liệu. */
.hero:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-18% -30% 8%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 82%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 82%);
  background:repeating-linear-gradient(
    98deg,
    transparent 0 54px,
    rgba(var(--core-rgb),.07) 54px 55.5px,
    transparent 55.5px 128px
  );
}

.hero-copy{
  position:relative;
  z-index:3;
  min-width:0;
}

.hero h1{
  font-size:clamp(32px,4.35vw,64px);
  line-height:1.2;
  white-space:nowrap;
}

.hero-description{
  font-size:18px;
  line-height:1.8;
  margin-top:28px;
  max-width:460px;
  letter-spacing:-.015em;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:23px;
  margin-top:35px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:50px;
  padding:13px 24px;
  border:0;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0;
  white-space:nowrap;
  transition:
    transform 160ms var(--ease-out),
    box-shadow 200ms ease;
}

.primary{
  background:linear-gradient(180deg,#DFD2FF,var(--core));
  color:#101117;
  box-shadow:
    0 4px 26px rgba(183,155,255,.12),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.button:hover:not([aria-disabled="true"]){
  box-shadow:0 5px 32px rgba(183,155,255,.24);
  transform:translateY(-2px);
}

.button:active:not([aria-disabled="true"]){
  transform:scale(.97);
}

.button>span[aria-hidden]{
  font-size:18px;
  font-weight:400;
}

.hero-visual{
  /* Both viewport dimensions constrain the same naturally sized composition. */
  width:min(100%,640px,68svh);
  justify-self:center;
  position:relative;
  isolation:isolate;
  min-width:0;
}

/* Quầng lavender sau màn app: nối màu của ảnh chụp với nền trang, để hai phần
   không còn là hai hệ hình ảnh khác nhau. Mỗi quầng tắt qua ba chặng thay vì
   một — chuyển một nhịp trên nền tối sẽ lộ rõ đường viền của vùng sáng. */
.hero-halo{
  inset:-20% -18% -8%;
  background:
    radial-gradient(32% 28% at 52% 42%,rgba(var(--veil-rgb),.3),rgba(var(--veil-rgb),.1) 46%,rgba(var(--veil-rgb),.02) 74%,transparent 100%),
    radial-gradient(44% 42% at 48% 50%,rgba(var(--core-rgb),.16),rgba(var(--core-rgb),.05) 50%,rgba(var(--core-rgb),.01) 76%,transparent 100%),
    radial-gradient(50% 50% at 50% 54%,rgba(var(--veil-cool-rgb),.08),rgba(var(--veil-cool-rgb),.02) 56%,transparent 100%);
}

.hero-phones{
  transform:scale(1.075);
  transform-origin:center;
}

/* Khung máy dựng theo số đo thật của iPhone 16 Pro — cùng dòng máy đã chụp bộ
   ảnh trong images/ (912×1982 trùng tỉ lệ màn 402×874pt):
     · bo góc màn 62pt            → 15,42% bề ngang màn
     · Dynamic Island 126×37,33pt → cách mép trên màn 11pt
     · viền quanh màn 2,455mm trên thân rộng 71,5mm → 3,43% bề ngang thân
   Thân máy là container, mọi số đo tính bằng cqw (1% bề ngang thân) nên khung
   giữ đúng tỉ lệ ở mọi kích thước hiển thị, không cần sửa theo từng breakpoint. */
.device{
  --frame:3.43cqw;          /* tổng viền: vành titan + viền đen quanh màn */
  --rail:1cqw;              /* phần vành titan nhìn thấy từ chính diện */
  --screen-radius:14.36cqw; /* 62pt quy về bề ngang thân */
  --island-width:29.19cqw;  /* 126pt */
  --island-height:8.65cqw;  /* 37,33pt */
  --island-top:2.55cqw;     /* 11pt tính từ mép trên màn */
  container-type:inline-size;
  display:block;
  position:relative;
  width:290px;
  max-width:100%;
  /* Bo góc thân = bo góc màn + viền, để hai đường bo đồng tâm như máy thật. */
  border-radius:17.79% / 8.5%;
  /* Vành titan tối hơn hẳn màu bạc đánh bóng, và có lý do đo được: ở khổ điện
     thoại ảnh sau đứng thẳng (--phone-angle:0deg) và chỉ hở đúng mép phải, nên
     vành trở thành một VẠCH DỌC thẳng đứng cạnh ảnh chụp. Với hai chặng sáng cũ
     (#8a8891/#7d7b84) vạch ấy đo được 200/765 trong khi nền trang chỉ 79 — sáng
     gấp 2,5 lần mọi thứ quanh nó, nên nó đọc ra thành một đường kẻ lạc chứ không
     thành cạnh máy. Giữ chặng sáng ngang với phím cứng ở dưới (#5c5a63): vẫn là
     kim loại bắt sáng, nhưng là cạnh của một cái máy. */
  background:linear-gradient(145deg,#5a5862,#37353d 22%,#2e2c33 50%,#3d3b44 78%,#54525c);
  box-shadow:
    0 14px 32px rgba(5,5,8,.3),
    0 2px 5px rgba(0,0,0,.2);
}

/* Phím cứng: nút tác vụ + tăng/giảm âm lượng bên trái, nút nguồn bên phải.
   Dùng phần trăm (không dùng cqw) vì pseudo-element của chính container sẽ
   không tra được kích thước container, còn phần trăm ở đây đã tính theo .device. */
.device:before,
.device:after{
  content:"";
  position:absolute;
  width:.8%;
  background:linear-gradient(180deg,#5c5a63,#3c3a42);
  pointer-events:none;
}

.device:before{
  left:-.8%;
  top:16%;
  height:22%;
  border-radius:1px 0 0 1px;
  background:linear-gradient(
    180deg,
    #5c5a63 0 21%,transparent 21% 30%,
    #5c5a63 30% 61%,transparent 61% 69%,
    #5c5a63 69% 100%
  );
}

.device:after{
  right:-.8%;
  top:24%;
  height:11%;
  border-radius:0 1px 1px 0;
}

.device-screen{
  display:block;
  position:relative;
  width:auto;
  /* Lề tạo viền; phần trong cùng tô đen bằng spread shadow nên viền đen và
     vành titan luôn đồng tâm với bo góc màn. */
  margin:var(--frame);
  aspect-ratio:912 / 1982;
  border-radius:var(--screen-radius);
  overflow:hidden;
  background:linear-gradient(165deg,#251f34,#100e16 45%,#0b0910);
  box-shadow:0 0 0 calc(var(--frame) - var(--rail)) #06060a;
  text-align:left;
}

/* Gờ kính mỏng ở rìa màn, vẽ đè lên ảnh vì ảnh là nội dung chứ không phải nền. */
.device-screen:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(245,241,255,.07);
  pointer-events:none;
}

/* Ảnh chụp từ iPhone không chứa phần khoét Dynamic Island, nên trang vẽ lại
   đúng kích thước và vị trí của nó. */
.device-screen:has(.real-screenshot)::before{
  content:"";
  position:absolute;
  z-index:2;
  top:var(--island-top);
  left:50%;
  width:var(--island-width);
  height:var(--island-height);
  transform:translateX(-50%);
  border-radius:999px;
  background:#000;
  pointer-events:none;
}

.hero-phone{
  --phone-angle:-7deg;
  grid-row:1;
  width:100%;
  align-self:start;
  transform:rotate(var(--phone-angle));
  transform-origin:center;
  transition:transform 250ms var(--ease-out);
}

.hero-phone-front{
  z-index:2;
  grid-column:3 / 12;
}

.hero-phone-back{
  --phone-angle:8deg;
  z-index:1;
  grid-column:11 / 19;
  margin-top:24%;
}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:64px;
}

.section-heading>p{
  max-width:325px;
  font-size:15px;
  line-height:1.8;
  margin-bottom:7px;
}

.features{
  position:relative;
  isolation:isolate;
}

/* Bố cục mặc định (mobile, và cả khi không có JavaScript): lần lượt một màn app
   rồi một phần nội dung. Đọc hết được mà không cần hiệu ứng nào chạy. */
.feature-flow{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  gap:22px 0;
}

.feature-halo{
  display:none;
}

.feature-shot{
  width:100%;
  border:0;
  padding:0;
  margin:0;
  background:none;
  display:grid;
  place-items:center;
  position:relative;
  border-radius:var(--radius-lg);
}

.feature-shot .device{
  width:min(100%,300px);
  transform-origin:center;
  transition:transform 250ms var(--ease-out);
}

.feature-copy{
  padding:4px 7px 40px;
  max-width:460px;
  width:100%;
}

.feature-index{
  font-size:9px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--core);
}

.feature-copy h3{
  font-size:24px;
  line-height:1.4;
  margin:12px 0 11px;
}

.feature-copy p{
  font-size:15px;
  line-height:1.85;
  max-width:34ch;
}

/* Bố cục dính (desktop, do script.js bật): cả bốn màn app chồng vào cùng một ô
   lưới trải suốt chiều cao khu vực, nên chúng cùng dính ở một vị trí và chỉ đổi
   nhau bằng crossfade. Trang vẫn cuộn bình thường — không có đoạn nào bị khóa. */
@media(min-width:900px){
  .feature-flow.is-staged{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    /* Bốn hàng tường minh: có hàng tường minh thì grid-row:1/-1 bên dưới mới trải
       hết khu vực để các màn app dính được suốt chiều dài phần nội dung. */
    /* Hàng cao hơn khối chữ, và đó là toàn bộ quãng đứng yên: position:sticky
       chỉ được phép trượt trong phần ô lưới còn dư ra ngoài hộp lề của chính
       nó. Để hàng tự co theo nội dung (auto) rồi chèn margin-bottom thì hộp lề
       lấp kín ô — quãng trượt bằng 0 và khối chữ trôi đi như cũ.

       BỐN hàng bằng nhau, kể cả hàng cuối. Hàng cuối từng chỉ cao 58svh, tức
       quãng đứng yên của cặp "Hồi phục" chỉ bằng 14svh so với 48svh của ba cặp
       trước — vừa đọc xong tiêu đề là section đã hết. */
    --stage-top:max(88px,calc(50svh - 300px));
    /* Chiều cao thật của khung máy: 2,09 × bề ngang, mà bề ngang là
       min(300px,33svh) — xem .feature-shot .device bên dưới. Quầng sáng dùng
       chung con số này để hai lớp dính và buông y hệt nhau. */
    --stage-height:min(627px,69svh);
    /* Mép dưới của khối chữ lúc đứng yên: 28svh (chỗ dính) + 44svh (chiều cao).
       Màn app rời đi theo mốc này, xem margin-bottom bên dưới. */
    --hold-end:72svh;
    grid-template-rows:repeat(4,92svh);
    column-gap:clamp(40px,5vw,86px);
    justify-items:stretch;
    row-gap:0;
  }

  /* Màn app và khối chữ phải rời section CÙNG NHAU. Cả hai đều thôi dính khi
     chạm đáy khung chứa, nhưng chúng cao khác nhau và dính ở hai mốc khác
     nhau, nên mặc định màn app buông sớm hơn khối chữ khoảng một trăm pixel —
     đủ để thấy ảnh nhích lên trong lúc chữ còn đứng im. Lề âm này kéo mốc
     buông của ảnh xuống đúng mép dưới của khối chữ. Hàng lưới cao tường minh
     nên lề này không làm đổi chiều cao của bất cứ hàng nào. */
  .feature-flow.is-staged .feature-halo,
  .feature-flow.is-staged .feature-shot{
    margin-bottom:calc(var(--hold-end) - var(--stage-top) - var(--stage-height));
  }

  .feature-flow.is-staged .feature-halo{
    display:block;
    grid-column:1;
    grid-row:1/-1;
    align-self:start;
    position:sticky;
    top:var(--stage-top);
    height:var(--stage-height);
    margin-top:24px;
    background:
      radial-gradient(34% 30% at 50% 46%,rgba(var(--veil-rgb),.26),rgba(var(--veil-rgb),.09) 48%,rgba(var(--veil-rgb),.02) 76%,transparent 100%),
      radial-gradient(50% 48% at 50% 50%,rgba(var(--core-rgb),.12),rgba(var(--core-rgb),.04) 52%,transparent 100%);
  }

  .feature-flow.is-staged .feature-shot{
    grid-column:1;
    grid-row:1/-1;
    align-self:start;
    position:sticky;
    top:var(--stage-top);
    opacity:0;
    pointer-events:none;
    transform:translateY(10px) scale(.985);
    transition:
      opacity 420ms var(--ease-out),
      transform 420ms var(--ease-out);
  }

  .feature-flow.is-staged .feature-shot.is-active{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  /* Chiều cao khung máy ≈ 2,09 lần bề ngang. Giới hạn theo svh để màn app không
     bao giờ thò xuống dưới mép màn hình trong lúc nó chưa kịp dính. */
  .feature-flow.is-staged .feature-shot .device{
    width:min(100%,300px,33svh);
  }

  /* Quãng đứng yên của từng tính năng. Ô lưới cao 92svh là quãng cuộn dành cho
     một tính năng; .feature-hold bên trong chỉ cao 44svh và dính ở chỗ đọc, nên
     nó đứng im suốt 48svh còn lại rồi mới rời đi để tính năng sau vào chỗ.
     Trước đây khối chữ trôi liên tục nên vừa vào giữa màn hình đã đi mất.

     Quãng giữ phải nằm ở phần tử BÊN TRONG chứ không phải ở chính ô lưới: một
     grid item dính bị giới hạn theo cả lưới chứ không theo hàng của nó, nên gắn
     sticky thẳng lên .feature-copy sẽ làm cả bốn khối chữ chồng lên nhau ở cùng
     một chỗ.

     28svh + nửa của 44svh = 50svh, đúng tâm của màn app dính bên trái, nên hai
     cột ngang hàng ở mọi chiều cao khung nhìn. Bám theo svh chứ không phải
     pixel: khung nhìn thấp thì quãng giữ ngắn lại theo, không đẩy section dài
     ra vô lý. */
  .feature-flow.is-staged .feature-copy{
    grid-column:2;
    padding:0 0 0 4px;
    max-width:none;
  }

  .feature-flow.is-staged .feature-hold{
    position:sticky;
    top:28svh;
    min-height:44svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .feature-flow.is-staged .feature-copy:nth-of-type(1){grid-row:1}
  .feature-flow.is-staged .feature-copy:nth-of-type(2){grid-row:2}
  .feature-flow.is-staged .feature-copy:nth-of-type(3){grid-row:3}
  .feature-flow.is-staged .feature-copy:nth-of-type(4){grid-row:4}

  .feature-flow.is-staged .feature-copy h3{
    font-size:34px;
    line-height:1.3;
    margin:16px 0 16px;
  }

  .feature-flow.is-staged .feature-copy p{
    font-size:17px;
    line-height:1.8;
    max-width:42ch;
  }

  /* Bước đang đọc sáng hơn hẳn các bước còn lại, để mắt biết màn app đang nói về
     phần nào. Làm mờ phần chữ bên trong, không đụng tới .feature-copy — ô đó
     đang thuộc về hiệu ứng xuất hiện khi cuộn, đè lên là hỏng cả hai. */
  .feature-flow.is-staged .feature-copy>*{
    transition:opacity 420ms var(--ease-out);
  }

  .feature-flow.is-staged .feature-copy:not(.is-active)>*{
    opacity:.42;
  }
}

.intelligence{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(34px,4.4vw,74px);
  align-items:start;
}

/* Ánh sáng đặt sau sân khấu, phía phải — nơi người đọc đang nhìn khi ba cảnh
   lần lượt đi qua. Dừng đúng ở mép section (inset phải bằng 0) và cả hai
   gradient tắt hẳn trước 100%, nên không còn mép cắt nào ở bên phải. */
.intelligence:before{
  inset:4% 0 8% 30%;
  background:
    radial-gradient(34% 30% at 54% 42%,rgba(var(--veil-cool-rgb),.18),rgba(var(--veil-cool-rgb),.06) 48%,rgba(var(--veil-cool-rgb),.01) 76%,transparent 100%),
    radial-gradient(46% 46% at 52% 50%,rgba(var(--core-rgb),.08),rgba(var(--core-rgb),.03) 52%,transparent 100%);
}

.intelligence-copy>p:not(.eyebrow){
  max-width:430px;
  font-size:15px;
  line-height:1.9;
  margin-top:27px;
}

.plan-footnote{
  font-size:10px;
  max-width:345px;
  margin-top:26px;
  color:var(--caption);
}

@media(min-width:900px){
  /* Tiêu đề ở lại trong tầm mắt suốt ba cảnh, nên người xem luôn biết mình đang
     đọc phần giải thích cho điều gì. */
  .intelligence-copy{
    position:sticky;
    top:max(96px,calc(50svh - 200px));
  }
}

/*
  Bản mặc định của sân khấu: ba cảnh xếp dọc, đọc hết từ trên xuống mà không cần
  hiệu ứng nào chạy. Đây cũng là bản dành cho trình duyệt không chạy JavaScript
  và cho người đã bật giảm chuyển động. Mọi quy tắc của chế độ kể chuyện đều nằm
  sau .is-scrolling — lớp đó do script.js gắn, và chỉ gắn khi cảnh cao nhất còn
  vừa màn hình.
*/
.plan-track{
  position:relative;
}

.plan-rail{
  display:grid;
  /* Chỉ có tác dụng ở bản xếp dọc; lúc kể chuyện các cảnh chồng lên nhau. Khoảng
     cách rộng để ba bước vẫn đọc ra là ba bước khi không có hiệu ứng nào chạy. */
  gap:44px;
}

.plan-scene{
  display:flex;
  flex-direction:column;
}

/* Mỗi cảnh một sắc nhấn riêng, lấy trong đúng ba mã tím của app. Khác biệt chính
   giữa hai cảnh nằm ở cấu trúc minh họa (thẻ bài tập đã ghi / ba bậc phân tích),
   màu chỉ là dấu hiệu phụ để mắt biết đã sang bước khác. */
.plan-scene:nth-child(1){--scene-accent:var(--core);--scene-accent-rgb:var(--core-rgb)}
.plan-scene:nth-child(2){--scene-accent:var(--veil);--scene-accent-rgb:var(--veil-rgb)}

.plan-step{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0;
  font-size:10px;
  font-weight:600;
  letter-spacing:.17em;
  color:var(--scene-accent,var(--core));
}

.plan-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:26px;
  border-radius:9px;
  border:1px solid rgba(var(--scene-accent-rgb,var(--core-rgb)),.32);
  background:rgba(var(--scene-accent-rgb,var(--core-rgb)),.1);
  font-size:11px;
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}

.plan-scene h3{
  margin:18px 0 0;
  font-size:28px;
  line-height:1.28;
  max-width:20ch;
  color:var(--text-bright);
}

.plan-lead{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.8;
  max-width:48ch;
  color:var(--secondary);
}

.plan-card{
  margin-top:21px;
  /* Giữ các hàng đủ chặt để đọc theo cặp nhãn–giá trị; cột phải trên màn rộng
     còn dư chỗ thì để dư, đừng kéo giãn nội dung. */
  max-width:540px;
  padding:22px;
  border-radius:var(--radius-md);
  border:1px solid rgba(var(--core-rgb),.15);
  background:linear-gradient(168deg,rgba(40,32,60,.5),rgba(12,9,20,.62));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.plan-card-tag{
  flex-shrink:0;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid rgba(var(--core-rgb),.18);
  font-size:10px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--secondary);
}

/* Cảnh 01 — dựng lại đúng thẻ bài tập trong app: tên bài và khoảng mục tiêu ở
   trên, ba hiệp đã ghi ở giữa, mức độ mệt mỏi ở chân thẻ. Dựng bằng HTML/CSS
   chứ không cắt ảnh chụp màn hình — chữ nét ở mọi mật độ điểm ảnh, đọc được cả
   trên màn 375px, và không mang theo mép bị lẹm của một bản cắt vội. */
/* Hẹp hơn các thẻ khác, để giữ đúng tỉ lệ của thẻ bài tập trong app thay vì
   kéo ba hàng số ra suốt bề ngang cột phải. */
.plan-card-log{
  max-width:470px;
}

.plan-log-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.plan-log-name{
  margin:0;
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.015em;
  color:var(--text-bright);
}

.plan-log-name>span{
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  color:var(--secondary);
}

.plan-log-count{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:15px 0 0;
  font-size:12px;
  letter-spacing:.05em;
  color:var(--secondary);
  font-variant-numeric:tabular-nums;
}

.plan-log-pips{
  display:flex;
  gap:5px;
}

.plan-log-pips i{
  width:17px;
  height:3px;
  border-radius:999px;
  background:var(--scene-accent,var(--core));
}

.plan-log-label{
  margin:12px 0 0;
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--secondary);
}

.plan-sets{
  margin:4px 0 0;
  padding:0;
  list-style:none;
  font-variant-numeric:tabular-nums;
}

.plan-set-row{
  display:flex;
  align-items:baseline;
  gap:11px;
  padding:10px 0;
  border-bottom:1px solid rgba(var(--core-rgb),.1);
  font-size:17px;
  font-weight:600;
  color:var(--text-bright);
}

.plan-set-row:last-child{
  border-bottom:0;
  padding-bottom:2px;
}

.plan-set-index{
  min-width:11px;
  font-size:12px;
  font-weight:400;
  color:var(--secondary);
}

.plan-set-load small,
.plan-set-mark{
  font-size:12px;
  font-weight:400;
  color:var(--secondary);
}

.plan-set-load small{
  margin-left:3px;
}

.plan-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  margin:12px 0 0;
  padding-top:11px;
  border-top:1px solid rgba(var(--core-rgb),.12);
  font-size:12px;
  color:var(--secondary);
}

.plan-card-foot strong{
  font-size:14px;
  color:var(--text-bright);
  font-weight:600;
}

/* Cảnh 02 — ba bậc đọc đúng theo thứ tự người ta cần hiểu: dữ liệu vừa ghi →
   điều Lyrion nhận ra → gợi ý cho buổi sau. Một vạch nối mảnh dẫn mắt đi xuống
   thay cho ba cái hộp rời. Chỉ bậc cuối được viết to và sáng: đó là thứ người
   dùng thật sự nhận được, hai bậc trên chỉ là đường dẫn tới nó. */
.plan-card-read{
  background:
    radial-gradient(120% 90% at 50% -18%,rgba(var(--veil-rgb),.16),transparent 62%),
    linear-gradient(168deg,rgba(46,35,70,.6),rgba(13,10,22,.7));
  border-color:rgba(var(--veil-rgb),.26);
}

.plan-flow{
  display:grid;
  gap:17px;
  margin:0;
  padding:0 0 0 25px;
  list-style:none;
}

.plan-flow-step{
  position:relative;
}

.plan-flow-step:before{
  content:"";
  position:absolute;
  left:-25px;
  top:4px;
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid rgba(var(--scene-accent-rgb,var(--core-rgb)),.5);
}

/* Vạch nối chạy từ dưới chấm này tới sát chấm kế tiếp, nên không có đường kẻ
   nào đi xuyên qua chấm. */
.plan-flow-step:not(:last-child):after{
  content:"";
  position:absolute;
  left:-21px;
  top:17px;
  bottom:-17px;
  width:1px;
  background:rgba(var(--scene-accent-rgb,var(--core-rgb)),.4);
}

.plan-flow-end:before{
  background:var(--scene-accent,var(--core));
  border-color:var(--scene-accent,var(--core));
  box-shadow:0 0 0 4px rgba(var(--scene-accent-rgb,var(--core-rgb)),.16);
}

.plan-flow-label{
  margin:0;
  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--secondary);
}

.plan-flow-end .plan-flow-label{
  color:var(--scene-accent,var(--core));
}

.plan-flow-value{
  margin:7px 0 0;
  font-size:13px;
  line-height:1.65;
  color:var(--text);
}

.plan-flow-end{
  margin-top:3px;
}

.plan-suggest{
  display:block;
  margin-top:9px;
  font-size:21px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--text-bright);
}

/* Hai nhánh còn lại của quy tắc tăng tiến. Chúng không phải thứ người mới cần
   đọc trước, nên nằm dưới vạch, cỡ nhỏ, một dòng. */
.plan-rule-note{
  margin:20px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(var(--core-rgb),.12);
  font-size:11px;
  line-height:1.7;
  color:var(--secondary);
}

/* Chỉ báo tiến độ. Chỉ là chỉ báo: cuộn vẫn là cách xem hết ba cảnh, các nút ở
   đây chỉ để nhảy nhanh và để bàn phím có lối đi. */
.plan-progress{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:20px;
}

.plan-progress[hidden]{
  display:none;
}

.plan-counter{
  margin:0;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--caption);
  font-variant-numeric:tabular-nums;
}

.plan-counter strong{
  color:var(--text-bright);
  font-weight:600;
}

.plan-dots{
  display:flex;
  gap:8px;
}

.plan-dots button{
  display:grid;
  place-items:center;
  width:34px;
  height:22px;
  padding:0;
  border:0;
  background:none;
}

.plan-dots button:before{
  content:"";
  width:100%;
  height:2px;
  border-radius:999px;
  background:rgba(var(--core-rgb),.22);
  transition:background 240ms ease;
}

.plan-dots button[aria-current="true"]:before{
  background:var(--core);
}

.plan-dots button:hover:before{
  background:rgba(var(--core-rgb),.5);
}

.plan-dots button:focus-visible{
  outline-offset:2px;
  border-radius:6px;
}

/*
  Chế độ kể chuyện. Chiều cao đường ray = một sân khấu + tổng quãng cuộn của
  timeline: mỗi cảnh một quãng ĐỨNG YÊN để đọc, giữa hai cảnh một quãng CHUYỂN.
  Không có khoảng trống nào phải cuộn qua — suốt cả đoạn luôn có một cảnh trên
  màn hình. script.js đo và đặt --plan-stage / --plan-top / --plan-span bằng
  pixel, rồi mỗi khung hình ghi --scene-x/--scene-o cho từng cảnh. Chỉ transform
  và opacity, không blur, không parallax, và không transition nào — cảnh bám
  đúng vị trí cuộn nên ngừng cuộn là cảnh đứng yên ngay.
*/
.plan-track.is-scrolling{
  height:calc(var(--plan-stage,520px) + var(--plan-span,120svh));
}

.plan-track.is-scrolling .plan-viewport{
  position:sticky;
  top:var(--plan-top,96px);
  height:var(--plan-stage,520px);
  /* Cảnh trượt ra ngoài mép phải phải bị cắt ở đây; thiếu dòng này là cả trang
     cuộn ngang. Dùng clip chứ không phải hidden để sticky còn hiệu lực. */
  overflow:clip;
}

.plan-track.is-scrolling .plan-rail{
  display:block;
  position:relative;
  height:100%;
}

.plan-track.is-scrolling .plan-scene{
  position:absolute;
  inset:0;
  pointer-events:none;
  transform:translate3d(calc(var(--scene-x,0) * 106%),0,0);
  opacity:var(--scene-o,1);
  will-change:transform,opacity;
}

.plan-track.is-scrolling .plan-scene.is-current{
  pointer-events:auto;
}

.plan-track.is-scrolling .plan-progress{
  position:sticky;
  top:calc(var(--plan-top,96px) + var(--plan-stage,520px) + 16px);
  margin-top:16px;
}

blockquote{
  margin:0;
  position:relative;
}

blockquote>p{
  color:var(--text);
  font-size:clamp(20px,2.2vw,29px);
  line-height:1.65;
  letter-spacing:-.035em;
  max-width:920px;
}

blockquote footer{
  margin-top:29px;
  display:flex;
  align-items:center;
  gap:13px;
}

.avatar{
  /* Ảnh bên trong định vị tuyệt đối theo khối này, xem .review-card .avatar img. */
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(183,155,255,.1);
  color:var(--core);
  font-size:11px;
  border:1px solid var(--hairline);
}

blockquote footer strong{
  display:block;
  font-size:11px;
  font-weight:550;
}

blockquote footer>span>span{
  display:block;
  font-size:10px;
  color:var(--secondary);
  margin-top:2px;
}

.faq{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px;
  padding-top:140px;
}

/* Từng câu hỏi là một thẻ riêng, cùng bề ngang, cùng bo góc, cách nhau một
   khoảng thấy được. Trước đây cả bốn câu bị hàn vào một khung duy nhất nên
   chúng đọc thành một bảng dài, và khi mở nhiều câu cùng lúc thì các mảng tím
   nối liền nhau. Thuộc tính name="faq" trong HTML giữ cho mỗi lúc chỉ một câu
   mở. */
.faq-items{
  display:grid;
  gap:12px;
  align-content:start;
}

.faq-items details{
  border:1px solid var(--hairline);
  border-radius:18px;
  /* Nền của câu trả lời dừng đúng trong bo góc của thẻ. */
  overflow:hidden;
  transition:border-color 200ms ease;
}

.faq-items details[open]{
  border-color:rgba(var(--core-rgb),.34);
}

.faq-items summary{
  padding:18px 22px;
  background:transparent;
  color:var(--text-bright);
  list-style:none;
  cursor:pointer;
  font-size:16px;
  line-height:1.65;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:62px;
  font-weight:500;
  transition:color 180ms ease;
}

.faq-items summary:focus-visible{outline-offset:-4px}

/* Mở ra bằng chiều cao thật thay vì nhảy một nấc. ::details-content và
   interpolate-size là tăng cường dần: trình duyệt chưa hỗ trợ thì thẻ vẫn mở
   như cũ, chỉ không có chuyển động.

   Chỉ lúc MỞ mới có chuyển động. Cho content-visibility chuyển dần (bằng
   allow-discrete) thì lúc đóng thẻ cũng co lại từ từ, và trong suốt 260ms đó
   thẻ khai báo một chiều cao chưa phải chiều cao thật — đủ để một phép đo ngay
   sau khi đóng đọc nhầm. Đóng thì đóng dứt khoát. */
@supports selector(::details-content){
  @media(prefers-reduced-motion:no-preference){
    :root{interpolate-size:allow-keywords}

    .faq-items details::details-content{
      block-size:0;
      overflow:hidden;
      transition:block-size 260ms var(--ease-out);
    }

    .faq-items details[open]::details-content{
      block-size:auto;
    }
  }
}

summary::-webkit-details-marker{
  display:none;
}

.faq-plus{
  display:block;
  position:relative;
  width:11px;
  height:11px;
  flex-shrink:0;
}

.faq-plus:before,
.faq-plus:after{
  content:"";
  position:absolute;
  background:var(--core);
  top:5px;
  left:0;
  width:11px;
  height:1px;
}

.faq-plus:after{
  transform:rotate(90deg);
  transition:transform 180ms var(--ease-out);
}

details[open] .faq-plus:after{
  transform:rotate(0);
}

/* Câu trả lời mở ra ngay trong chính thẻ của câu hỏi: một đường kẻ mảnh và một
   lớp sáng hơn đúng một nấc, không phải một mảng màu mới. */
.faq-items details>p{
  background:#241d38;
  color:#f1f1f3;
  border-top:1px solid rgba(var(--core-rgb),.14);
  font-size:16px;
  line-height:1.85;
  margin:0;
  padding:16px 22px 22px;
}

.site-footer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:25px;
  padding-top:55px;
  padding-bottom:35px;
  position:relative;
  z-index:1;
}

.site-footer .brand{
  justify-self:start;
  font-size:17px;
}

.site-footer .brand img{
  width:23px;
  height:25px;
  margin-right:4px;
}

.site-footer>p,
.site-footer>span{
  color:var(--secondary);
  font-size:10px;
}

.site-footer>p{
  text-align:center;
}

.site-footer>span{
  justify-self:end;
}

.site-footer .support-line{
  grid-column:1/-1;
  text-align:center;
  font-size:11px;
  line-height:1.8;
  color:var(--secondary);
}

.support-line a{
  color:var(--text-bright);
  text-decoration:underline;
  text-decoration-color:var(--hairline);
  text-underline-offset:4px;
}

.footer-contact{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:12px;
  line-height:1.8;
  text-align:center;
  color:var(--glass-muted,var(--secondary));
}

.footer-contact p{
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:16px;
}

.footer-policy,.footer-safety{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px;
  color:var(--text-bright);
  text-decoration:underline;
  text-underline-offset:4px;
}

.modal-open{
  overflow:hidden;
}

.preview-dialog{
  position:fixed;
  padding:20px 24px;
  width:430px;
  max-width:calc(100% - 24px);
  max-height:calc(100dvh - 24px);
  overflow:auto;
  border:1px solid rgba(183,155,255,.24);
  border-radius:var(--radius-lg);
  color:var(--text);
  background:rgba(27,23,38,.9);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  box-shadow:0 25px 90px rgba(0,0,0,.5);
}

.preview-dialog::backdrop{
  background:rgba(5,5,8,.84);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.dialog-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  font-size:12px;
  margin-bottom:18px;
}

.dialog-close{
  border:0;
  background:rgba(183,155,255,.08);
  border-radius:999px;
  font-size:11px;
  min-height:40px;
  padding:7px 12px;
  white-space:nowrap;
}

.dialog-close span{
  font-size:18px;
  margin-left:7px;
}

.dialog-preview{
  display:grid;
  place-items:center;
}

.dialog-preview .device{
  width:min(290px,100%,calc((100svh - 180px) * .46));
}

.dialog-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 5px 0;
}

.dialog-controls button{
  width:44px;
  height:44px;
  border:1px solid var(--hairline);
  border-radius:50%;
  background:rgba(183,155,255,.06);
  color:var(--core);
  font-size:20px;
}

.dialog-controls p{
  text-align:center;
  font-size:10px;
  font-variant-numeric:tabular-nums;
}

.dialog-controls p>span{
  display:block;
}

.real-screenshot{
  width:100%;
  height:100%;
  /* Khung màn đã đúng tỉ lệ ảnh; contain giữ nguyên tỉ lệ nếu sau này thay ảnh
     chụp từ máy khác, thay vì kéo giãn hay cắt mất nội dung. */
  object-fit:contain;
  object-position:center;
  background:#100d18;
}

.phone-preview{
  display:flex;
  flex-direction:column;
  height:100%;
  color:var(--text);
  font-family:var(--font-sans);
  font-size:11px;
  line-height:1.45;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

.phone-status{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:34px;
  min-height:34px;
  padding:8px 23px 0;
  font-size:10px;
  font-weight:600;
}

/* Giao diện minh họa dùng chung số đo Dynamic Island với ảnh chụp thật. */
.phone-island{
  position:absolute;
  top:var(--island-top);
  left:50%;
  transform:translateX(-50%);
  width:var(--island-width);
  height:var(--island-height);
  border-radius:999px;
  background:#000;
}

.phone-battery{
  width:17px;
  height:8px;
  border:1px solid var(--secondary);
  border-radius:2px;
  position:relative;
  background:linear-gradient(
    90deg,
    var(--text) 75%,
    transparent 75%
  );
  background-clip:content-box;
  padding:1px;
}

.phone-battery:after{
  content:"";
  position:absolute;
  right:-3px;
  top:2px;
  height:3px;
  width:1px;
  background:var(--secondary);
}

.app-screen{
  flex:1;
  min-height:0;
  /* Giao diện minh họa dài hơn màn thì cắt gọn ở đáy, không đè lên thanh điều hướng. */
  overflow:hidden;
  padding:12px 17px 0;
}

.app-brand{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
  font-size:8px;
  letter-spacing:.17em;
  color:var(--secondary);
  font-weight:600;
}

.app-brand img{
  width:16px;
  height:18px;
  object-fit:contain;
}

.app-eyebrow{
  font-size:8px;
  color:var(--core);
  font-weight:500;
  letter-spacing:.08em;
}

.app-heading{
  font-size:25px;
  line-height:1.2;
  color:var(--text-bright);
  margin-top:5px;
  letter-spacing:-.045em;
  font-weight:550;
}

.app-muted{
  color:var(--secondary);
}

.app-card{
  padding:11px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  background:rgba(0,0,0,.3);
}

.app-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.app-action{
  display:block;
  text-align:center;
  background:linear-gradient(180deg,#DFD2FF,var(--core));
  color:#101117;
  border-radius:999px;
  padding:8px 7px;
  font-size:10px;
  font-weight:600;
}

.app-section-title{
  font-size:11px;
  margin:12px 0 7px;
  font-weight:500;
}

.app-ring{
  width:var(--ring-size);
  height:var(--ring-size);
  border-radius:50%;
  background:
    conic-gradient(
      var(--core) var(--ring-progress),
      rgba(255,255,255,.08) 0
    );
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.app-ring-center{
  width:calc(100% - 9px);
  height:calc(100% - 9px);
  border-radius:50%;
  background:#17121f;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.app-ring-center strong{
  font-size:20px;
  font-weight:550;
  letter-spacing:-.06em;
  color:var(--text-bright);
}

.app-ring-center span{
  font-size:8px;
  color:var(--secondary);
}

.app-macro-row{
  font-size:10px;
}

.app-meter{
  height:3px;
  background:rgba(255,255,255,.07);
  border-radius:9px;
  margin-top:5px;
  overflow:hidden;
}

.app-meter>span{
  height:100%;
  display:block;
  background:var(--core);
  border-radius:inherit;
}

.app-week{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-top:12px;
}

.app-week-day{
  text-align:center;
  font-size:9px;
  color:var(--secondary);
}

.app-week-day i{
  display:block;
  width:20px;
  height:20px;
  margin:8px auto 0;
  border-radius:50%;
  background:rgba(183,155,255,.08);
  border:1px solid var(--hairline);
}

.app-week-day.is-complete i{
  background:var(--core);
}

.app-week-day.is-current i{
  box-shadow:inset 0 0 0 6px var(--core);
  background:#16131f;
}

.app-exercise{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-size:10px;
}

.app-exercise:nth-child(even){
  background:rgba(183,155,255,.025);
  margin-inline:-7px;
  padding-inline:7px;
  border-radius:10px;
}

.app-exercise strong{
  display:block;
  font-size:10px;
  font-weight:500;
  margin-bottom:4px;
}

.app-exercise .app-muted{
  display:block;
  font-size:9px;
}

.app-exercise-number{
  font-size:9px;
  color:var(--core);
}

.app-meal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:5px 0;
  font-size:10px;
}

.app-meal strong{
  display:block;
  font-size:10px;
  font-weight:500;
}

.app-meal .app-muted{
  display:block;
  font-size:8px;
  margin-top:3px;
}

.app-meal small.app-muted{
  display:inline;
  font-size:8px;
}

.app-entry-options{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin-top:10px;
}

.app-entry-options span{
  padding:8px 2px;
  text-align:center;
  border-radius:9px;
  border:1px solid var(--hairline);
  font-size:8px;
  color:var(--core);
  background:rgba(183,155,255,.04);
}

.app-streak{
  padding:10px;
  border-radius:var(--radius-sm);
  background:rgba(255,224,163,.04);
  border:1px solid rgba(255,224,163,.1);
}

.app-chart-labels{
  font-size:8px;
  color:var(--secondary);
}

.app-chart-bar i{
  font-style:normal;
}

.app-recovery{
  font-size:10px;
  padding:11px 0;
}

.app-recovery strong{
  font-weight:500;
}

.app-bottom-nav{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  text-align:center;
  font-size:8px;
  gap:8px;
  padding:12px 12px 9px;
  background:rgba(0,0,0,.2);
  color:var(--secondary);
}

.app-bottom-nav .is-active{
  color:var(--core);
}

/* Thanh home 140×5pt, cách mép dưới màn 8pt — cùng hệ số đo với khung máy. */
.phone-home-indicator{
  width:32.42cqw;
  height:1.16cqw;
  min-height:2px;
  flex-shrink:0;
  background:rgba(245,241,255,.8);
  border-radius:999px;
  margin:5px auto 1.85cqw;
}

/* Một hiệu ứng xuất hiện duy nhất cho cả trang: mờ dần + nhích lên một quãng
   ngắn, không blur, không scale, không hai animation chồng nhau trên cùng khối.
   380ms + trễ tối đa 135ms: trước đây là 480ms + 260ms, gần ba phần tư giây cho
   khối cuối một nhóm — đủ lâu để đọc ra thành "tiêu đề tới muộn" chứ không thành
   một nhịp. transform ở đây không tham gia layout, nên không có gì nhảy chỗ. */
.will-reveal{
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity 380ms var(--ease-out),
    transform 380ms var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}

.will-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.will-reveal.reveal-instant{
  opacity:1;
  transform:none;
  transition:none!important;
}

.device-screen:empty{
  background:#17121f url("assets/lyrion-mark.png") center 45% / 80px auto no-repeat;
}

/* Waitlist — đích cuối của trang.
   Section này nằm thẳng trên nền trang, cùng lề với các section khác. Trước đây cả lời dẫn lẫn form bị bọc trong một khung tím khổng
   lồ: khung đó to đến mức nó mới là thứ nổi bật, còn form thì chìm bên trong.
   Giờ chỉ .waitlist-board — đúng phần nhập tên, email, xác minh và nút gửi — là
   một mặt phẳng riêng. */
.waitlist{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(44px,5vw,96px);
}

/* Quầng sáng nằm sau khung form. inset phải/trái bằng 0 và cả ba gradient tắt
   trước 100%, nên overflow:clip của section không cắt vào chỗ nào còn sáng. */
.waitlist:before{
  inset:2% 0 2% 26%;
  background:
    radial-gradient(34% 30% at 58% 46%,rgba(var(--veil-rgb),.24),rgba(var(--veil-rgb),.08) 46%,rgba(var(--veil-rgb),.02) 74%,transparent 100%),
    radial-gradient(44% 44% at 52% 50%,rgba(var(--core-rgb),.12),rgba(var(--core-rgb),.04) 50%,rgba(var(--core-rgb),.01) 76%,transparent 100%),
    radial-gradient(46% 46% at 50% 54%,rgba(var(--veil-cool-rgb),.06),rgba(var(--veil-cool-rgb),.02) 56%,transparent 100%);
}

.waitlist-copy>p:not(.eyebrow){
  max-width:405px;
  font-size:16px;
  line-height:1.85;
  margin-top:26px;
}

.waitlist-copy .waitlist-note{
  font-size:13px;
  color:var(--core);
  margin-top:30px;
}

/* Giờ đây là vật thể nổi duy nhất của section: nền sâu hơn nền trang, một viền
   lavender mảnh và một cái bóng đủ để nó tách khỏi nền. Không quầng tím to, vì
   một quầng to lại thành đúng cái khối khổng lồ vừa bỏ đi. */
.waitlist-board{
  padding:34px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 80% at 50% -24%,rgba(var(--veil-rgb),.14),transparent 60%),
    linear-gradient(168deg,rgba(52,42,80,.78),rgba(14,10,24,.9));
  border:1px solid rgba(var(--core-rgb),.32);
  color:var(--text);
  color-scheme:dark;
  box-shadow:
    0 30px 70px rgba(3,2,8,.55),
    inset 0 1px 0 rgba(255,255,255,.1);
}

/* Thứ bậc trong khung: đây là nhãn của form, không phải tiêu đề thứ hai của
   section — h2 bên trái đã giữ vai trò đó. Lớn hơn nhãn ô nhập, nhỏ hơn h2. */
.waitlist-board h3{
  font-size:23px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.025em;
  color:var(--text-bright);
}

.board-description{
  font-size:14px;
  margin-top:11px;
  color:var(--secondary);
}

.board-intro:after{
  content:"";
  display:block;
  height:1px;
  margin-top:26px;
  background:linear-gradient(90deg,rgba(var(--core-rgb),.36),rgba(var(--core-rgb),.06) 72%,transparent);
}

.waitlist-board.is-resolved{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.waitlist-board.is-resolved .board-intro{
  display:none;
}

.waitlist-result{
  text-align:center;
  padding:18px 4px 6px;
}

/*
  Trạng thái thành công diễn ra NGAY TRONG khung form, không có lớp nào phủ lên
  trang: dấu tick hiện nhẹ, một vùng sáng tím rất mờ lan sau nó, rồi tới lời
  báo và lối sang hướng dẫn TestFlight. Mọi chuyển động chạy đúng một lần, lúc
  thẻ rời `hidden` — không gắn với cuộn hay resize, nên không có gì chạy lại —
  và kết thúc ở trạng thái đứng yên để đọc. Tắt chuyển động thì hiện ngay trạng
  thái cuối: mọi keyframe dưới đây chỉ có `from`, trạng thái gốc là trạng thái
  cuối.
*/
.waitlist-success{
  position:relative;
  isolation:isolate;
}

/* Vùng sáng tím sau dấu tick. Hộp 240×190 đặt tâm đúng tâm dấu tick (đệm trên
   18px + nửa dấu 32px), gradient `closest-side` tắt hẳn ở chính mép hộp, và hộp
   đủ hẹp để nằm trong khung form cả ở màn 320px — không có mép nào để lộ. Chỉ
   chuyển opacity, thứ bộ ghép lớp làm được mà không phải vẽ lại. */
.waitlist-success:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50px;
  width:240px;
  height:190px;
  margin:-95px 0 0 -120px;
  pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--veil-rgb),.18),rgba(var(--core-rgb),.07) 46%,rgba(var(--core-rgb),.02) 74%,transparent);
  animation:success-glow .9s var(--ease-out) .08s both;
}

.result-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  color:#fff;
  animation:result-in .42s var(--ease-out) both;
}

/* Cùng chất liệu với nút "Đăng ký làm tester" vừa bấm: nền lavender, nét đậm
   màu chữ của nút. Dấu tick xanh lá cũ là màu duy nhất ngoài bảng màu của cả
   trang, và đứng cạnh vùng sáng tím thì nó đọc ra thành hai hệ màu. */
.success-mark{
  background:linear-gradient(180deg,#EFE7FF,var(--core));
  color:#16101F;
  box-shadow:
    0 10px 28px rgba(var(--core-rgb),.26),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.failure-mark{
  background:#D9485A;
  box-shadow:0 10px 26px rgba(217,72,90,.3);
}

.result-mark svg{
  width:32px;
  height:32px;
}

/* Each stroke starts fully dashed out, then the offset animates to zero so the
   mark draws itself. The dash length matches the path so the timing reads even. */
.success-mark svg path{
  stroke-dasharray:23;
  stroke-dashoffset:23;
  animation:result-draw .36s ease-out .24s both;
}

.failure-mark svg path{
  stroke-dasharray:15;
  stroke-dashoffset:15;
  animation:result-draw .26s ease-out both;
}

.failure-mark svg path:first-child{
  animation-delay:.3s;
}

.failure-mark svg path:last-child{
  animation-delay:.46s;
}

.waitlist-result h3,
.waitlist-result .board-description,
.waitlist-result .waitlist-submit,
.waitlist-result .form-note{
  animation:result-rise .4s var(--ease-out) .34s both;
}

.waitlist-result .board-description{
  animation-delay:.44s;
}

/* The hand-off to the TestFlight guide arrives last, after the card has said
   the signup worked. */
.waitlist-result .waitlist-submit{
  animation-delay:.54s;
}

.waitlist-result .form-note{
  animation-delay:.64s;
}

/* Hiện nhẹ, không nảy: bản cũ phóng từ 40% lên với đường cong vượt quá 100%,
   đọc ra thành một cú bật chứ không phải một dấu xác nhận. */
@keyframes result-in{
  from{transform:scale(.9);opacity:0}
}

@keyframes success-glow{
  from{opacity:0}
}

@keyframes result-draw{
  to{stroke-dashoffset:0}
}

@keyframes result-rise{
  from{transform:translateY(6px);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .result-mark,
  .result-mark svg path,
  .waitlist-success:before,
  .waitlist-result h3,
  .waitlist-result .board-description,
  .waitlist-result .waitlist-submit,
  .waitlist-result .form-note{
    animation:none;
  }

  .result-mark svg path{
    stroke-dashoffset:0;
  }
}

.waitlist-board .waitlist-result h3{
  margin-top:22px;
  font-size:19px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.waitlist-board .waitlist-result h3:focus-visible{
  outline:2px solid var(--core);
  outline-offset:6px;
  border-radius:6px;
}

.waitlist-result .board-description{
  margin-top:14px;
  max-width:34ch;
  margin-inline:auto;
  line-height:1.6;
}

.waitlist-fields{
  border:0;
  padding:0;
  margin:24px 0 0;
  min-width:0;
}

.form-field+.form-field{
  margin-top:20px;
}

/* Widget Turnstile rộng cố định 300px và không nhận thuộc tính chỉnh bề ngang
   từ ngoài vào. Trên màn hẹp, thu cả widget lại theo tỉ lệ để nó nằm trọn trong
   khung form thay vì bị cắt mất một mép — đây là chỗ duy nhất của trang dùng
   zoom, và chỉ dùng cho iframe của bên thứ ba. */
/* Cùng mép trái với nhãn, ô nhập và nút gửi: bốn bước của form đọc thành một
   cột thẳng thay vì một widget trôi giữa khung. */
.waitlist-turnstile{
  margin-top:20px;
  display:flex;
  justify-content:flex-start;
  max-width:100%;
}

@media(max-width:409px){
  .waitlist-turnstile{zoom:.88}
}

@media(max-width:369px){
  .waitlist-turnstile{zoom:.8}
}

@media(max-width:339px){
  .waitlist-turnstile{zoom:.72}
}

.waitlist-turnstile:empty{
  display:none;
}

.form-field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text-bright);
  margin-bottom:8px;
}

.form-field input{
  width:100%;
  min-width:0;
  min-height:54px;
  padding:14px 16px;
  border:1px solid rgba(var(--core-rgb),.3);
  border-radius:14px;
  background:rgba(6,4,12,.62);
  font:inherit;
  font-size:15px;
  color:var(--text-bright);
  outline-offset:3px;
  transition:border-color 180ms ease;
}

/* Chữ gợi ý vẫn phải đạt tỉ lệ tương phản 4.5:1 trên nền ô nhập tối. */
.form-field input::placeholder{
  color:rgba(245,241,255,.66);
  font-size:13px;
  opacity:1;
}

.form-field input:focus-visible{
  outline:2px solid var(--core);
  border-color:var(--core);
}

.form-field input[aria-invalid="true"]{
  border-color:#E4697A;
}

/* Cùng một nút lavender với CTA ở hero: mọi lối vào đều dẫn về đúng chỗ này.
   Trong khung form nó là thứ sáng nhất, đứng sau tiêu đề và hai ô nhập. */
.waitlist-submit{
  margin-top:26px;
  width:100%;
  min-height:56px;
  padding:15px 16px;
  background:linear-gradient(180deg,#EFE7FF,var(--core));
  color:#16101F;
  border:0;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:
    0 10px 34px rgba(var(--core-rgb),.26),
    inset 0 1px 0 rgba(255,255,255,.55);
  transition:
    box-shadow 200ms ease,
    transform 160ms var(--ease-out);
}

.waitlist-submit:hover{
  box-shadow:
    0 12px 40px rgba(var(--core-rgb),.38),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.waitlist-submit:active{
  transform:scale(.98);
}

/* Trạng thái đang gửi: nút lắng xuống một tông và con trỏ báo chờ. Không dùng
   opacity — làm mờ cả nút sẽ kéo chữ "Đang gửi…" xuống dưới ngưỡng tương phản. */
.waitlist-submit:disabled{
  background:linear-gradient(180deg,#CBBCF0,#A692E0);
  opacity:1;
  cursor:wait;
}

/* Same look as the <button>; an <a> needs an explicit flex display for the
   width:100% + centered label above to apply. */
a.waitlist-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Decorative signup celebration. Covers the viewport so the burst is not
   clipped by the board, sits under the header, and never blocks a click. */
.waitlist-confetti{
  position:fixed;
  inset:0;
  z-index:55;
  pointer-events:none;
}

.waitlist-capacity{
  margin-top:12px;
  color:var(--secondary);
  font-size:12px;
  line-height:1.5;
  text-align:center;
}

/* The global p rule matches this paragraph directly, and a direct match always
   beats an inherited colour, so the light board would render it in the dark
   theme's near-white secondary. Opt back into the surrounding colour. */
.waitlist-capacity p{
  color:inherit;
}

.waitlist-capacity strong{
  color:var(--core);
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.waitlist-capacity progress{
  display:block;
  width:128px;
  height:3px;
  margin:7px auto 0;
  overflow:hidden;
  border:0;
  border-radius:999px;
  background:rgba(var(--core-rgb),.16);
  color:var(--core);
  appearance:none;
}

.waitlist-capacity progress::-webkit-progress-bar{
  border-radius:999px;
  background:rgba(var(--core-rgb),.16);
}

.waitlist-capacity progress::-webkit-progress-value{
  border-radius:999px;
  background:var(--core);
}

.waitlist-capacity progress::-moz-progress-bar{
  border-radius:999px;
  background:var(--core);
}

.form-note{
  font-size:11px;
  line-height:1.7;
  color:var(--secondary);
  margin-top:18px;
  text-align:center;
  text-wrap:balance;
}

.form-consent{
  font-size:12px;
  line-height:1.8;
}

.form-consent a{
  color:inherit;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
}

.form-consent a:focus-visible{
  outline-color:var(--core);
  outline-offset:3px;
}

/* Ba trạng thái của form đều phải đọc rõ trên nền tối: mặc định, lỗi, thành công. */
.form-status{
  font-size:13px;
  line-height:1.65;
  margin-top:14px;
  color:var(--text);
}

.form-status:empty{
  display:none;
}

.form-status[data-state="error"]{
  color:#FF9DAB;
}

.form-status[data-state="success"]{
  color:#8FE4B6;
}

.form-trap,
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Reviews */
/* Phần đánh giá nằm thẳng trên nền trang, rồi khoảng trống dài phía dưới làm
   quãng nghỉ trước khi tới điểm sáng của khu đăng ký. */
.reviews{
  position:relative;
  isolation:isolate;
  margin:50px 24px 0;
  padding-block:88px 128px;
  background:transparent;
}

/* Chỉ còn một vùng sáng tím lan nhẹ sau tiêu đề và hàng thẻ đầu, tắt hẳn trước
   cả bốn mép của section: tâm ± bán kính nằm trong 0–100% theo cả hai trục.

   Từng có thêm một lớp làm tối — linear-gradient từ rgba(6,4,12,.5) xuống
   trong suốt — để khu này "lùi xuống nền sâu nhất". Lớp đó bắt đầu ở độ đậm .5
   ngay tại mép trên và phủ đủ bề ngang, trong khi section thụt vào 12px (điện
   thoại) / 24px (máy tính) so với mép màn và cắt bằng overflow:clip. Kết quả là
   một hình chữ nhật tối có mép trên và hai mép dọc sắc cạnh: đo được bước nhảy
   ~8 ở mép trên và ~10–13 ở hai bên, trong khi nền trơn chỉ dưới 2. Mọi lớp
   làm tối trải đều theo chiều ngang ở đây đều sẽ lộ hai mép dọc đó, nên đừng
   dựng lại — nền trang ở độ sâu này vốn đã gần tối nhất. */
.reviews:before{
  inset:0;
  background:
    radial-gradient(46% 30% at 50% 32%,rgba(var(--veil-cool-rgb),.1),rgba(var(--veil-cool-rgb),.035) 48%,rgba(var(--veil-cool-rgb),.01) 76%,transparent 100%);
}

.reviews h2,
.reviews h2 span{
  color:#fff;
  text-shadow:none;
}

.reviews .eyebrow{
  color:#fff;
}

.reviews-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:42px;
}

.reviews-controls{
  display:flex;
  align-items:center;
  gap:22px;
  flex-shrink:0;
  padding-bottom:5px;
}

.review-counter{
  font-size:12px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  color:rgba(255,255,255,.76);
}

.reviews-next{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  font-size:24px;
  transition:
    background 180ms ease,
    transform 160ms var(--ease-out);
}

.reviews-next:hover{
  background:rgba(255,255,255,.18);
}

.reviews-next:active{
  transform:scale(.96);
}

.review-track{
  position:relative;
}

.review-group{
  /* Số thẻ hiện cùng lúc. reviews.js đọc lại đúng giá trị này để biết cụm còn
     bao nhiêu vị trí, nên đổi số ở đây là đổi cả timeline — đừng để nó lệch
     với grid-template-columns ngay bên dưới. */
  --review-per:3;
  --review-gap:22px;
  --review-card-w:calc((100% - 2 * var(--review-gap)) / 3);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--review-gap);
}

/* Trước đây đây là ba thẻ trắng nổi bật đột ngột giữa nền tối. Giờ chúng dùng
   chung hệ màu với phần còn lại: nền tím rất sâu, viền lavender mảnh, chữ sáng.
   Nội dung từng lời nhận xét không đổi một chữ nào. */
.review-card{
  --text:rgba(245,241,255,.92);
  --text-bright:#F5F1FF;
  --secondary:rgba(245,241,255,.64);
  --caption:rgba(245,241,255,.46);
  --hairline:rgba(var(--core-rgb),.16);
  min-width:0;
  min-height:330px;
  padding:32px;
  border-radius:26px;
  border:1px solid var(--hairline);
  background:linear-gradient(165deg,rgba(45,36,67,.62),rgba(17,13,27,.74));
  color:var(--text);
  color-scheme:dark;
  box-shadow:
    0 20px 48px rgba(4,3,10,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:22px;
}

.review-rating{
  color:var(--core);
  font-size:18px;
  line-height:1;
  letter-spacing:.15em;
}

.review-star-empty{
  color:rgba(245,241,255,.3);
}

.review-card blockquote{
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:space-between;
  width:100%;
}

.review-card blockquote>p{
  font-size:20px;
  line-height:1.8;
  letter-spacing:-.01em;
}

.review-card blockquote footer{
  margin-top:26px;
}

.review-card blockquote footer strong{
  font-size:14px;
}

.review-card blockquote footer>span>span{
  font-size:13px;
}

.review-card .avatar{
  font-family:var(--font-sans);
  font-size:11px;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(var(--core-rgb),.14);
  color:var(--text-bright);
}

/* Định vị tuyệt đối chứ không để ảnh làm flex item: phần trăm trên một flex item
   thay thế (replaced element) phải giải qua thuật toán flex trước, và đó là chỗ
   Safari trên iOS hay giải sai. Ảnh đại diện từng được báo là biến mất trên điện
   thoại trong khi Chrome ở mọi khổ màn vẫn đủ. Ra khỏi dòng flex thì 100% chỉ còn
   là 100% của một khối cao rộng 40px, không còn gì để giải sai. */
.review-card .avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Chỗ trống chờ biên tập, chỉ hiện khi mở ?reviews=draft. Cố tình trông không
   giống một nhận xét: viền đứt, không sao, không tên, không ảnh đại diện. */
.review-card.is-draft{
  display:grid;
  align-content:center;
  gap:10px;
  border-style:dashed;
  border-color:rgba(var(--core-rgb),.32);
  background:rgba(var(--core-rgb),.04);
  box-shadow:none;
  text-align:center;
}

.review-draft-label{
  margin:0;
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--core);
}

.review-draft-note{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--secondary);
}

/*
  Băng chuyền đánh giá. Cùng cách làm với sân khấu hai cảnh ở phần kế hoạch:
  chiều cao đường ray = một sân khấu + tổng quãng cuộn, mỗi vị trí của cụm có
  một quãng ĐỨNG YÊN để đọc rồi mới tới một quãng CHUYỂN. reviews.js đo và đặt
  --review-stage / --review-top / --review-span / --review-step bằng pixel, rồi
  mỗi khung hình chỉ ghi ĐÚNG MỘT biến --review-x lên đường ray; khoảng dịch của
  cụm và điểm nhấn của thẻ đang đi vào đều do CSS tự tính từ biến đó.

  Cả nhóm nằm trong @media(prefers-reduced-motion:no-preference): tắt chuyển
  động là không một dòng nào ở đây có hiệu lực, và lưới đọc từ trên xuống ở trên
  tự động quay lại, đúng với bố cục của từng khổ màn hình.
*/
@media(prefers-reduced-motion:no-preference){
  .review-track.is-sliding{
    height:calc(var(--review-stage,420px) + var(--review-span,0px));
  }

  .review-track.is-sliding .review-stage{
    position:sticky;
    top:var(--review-top,96px);
  }

  /* Sân khấu dính phải vừa một màn hình, kể cả màn 800px. Khoảng cách tiêu đề →
     thẻ rút lại ở đây chứ không ở bố cục thường, vì chỉ chế độ này mới phải
     tiết kiệm chiều cao. */
  .review-track.is-sliding .reviews-heading{
    margin-bottom:30px;
  }

  .review-track.is-sliding .review-viewport{
    /* Thẻ trượt ra ngoài mép phải phải bị cắt ở đây, thiếu dòng này là cả trang
       cuộn ngang. clip chứ không phải hidden để sticky còn hiệu lực. Đệm dọc
       rồi kéo lại bằng lề âm, để bóng đổ của thẻ không bị cắt ngang thân. */
    padding-block:20px 30px;
    margin-block:-20px -30px;
    overflow:clip;
  }

  .review-track.is-sliding .review-group{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:var(--review-card-w);
    transform:translate3d(calc(var(--review-x,0) * var(--review-step,0px) * -1),0,0);
    will-change:transform;
  }

  /* Thẻ vừa bước vào từ mép phải được nhấn rất nhẹ rồi ổn định cùng những thẻ
     đã ở đó. --review-lead = 0 khi thẻ đã vào đúng ô ngoài cùng bên phải và = 1
     khi nó còn nằm trọn ngoài khung; kẹp lại bằng clamp nên những thẻ chỉ dịch
     chỗ không bao giờ nhấp nháy hay xuất hiện lại từ đầu. */
  .review-track.is-sliding .review-card{
    --review-lead:calc(var(--card-index,0) - var(--review-x,0) - (var(--review-per) - 1));
    --review-enter:clamp(0,var(--review-lead),1);
    opacity:calc(1 - var(--review-enter) * .55);
    transform:translate3d(0,calc(var(--review-enter) * 12px),0) scale(calc(1 - var(--review-enter) * .03));
  }
}

main,
.site-footer{
  position:relative;
  z-index:1;
}

@media(max-width:1199px){
  .site-nav{
    gap:18px;
    font-size:11px;
  }

  .brand{
    font-size:17px;
  }

  .hero-actions{
    gap:15px;
  }

  .hero-actions .button{
    font-size:12px;
    padding-inline:19px;
  }
      .feature-flow.is-staged .feature-copy h3{
    font-size:26px;
  }

  .feature-flow.is-staged .feature-shot .device{
    width:min(100%,286px,35svh);
  }

  /* Khung máy hẹp lại thì mốc buông của nó cũng đổi: 2,09 × min(286px,35svh). */
  .feature-flow.is-staged{
    --stage-height:min(598px,73svh);
  }

  .intelligence,
  .faq{
    gap:50px;
  }

  .plan-scene h3{
    font-size:26px;
  }

  .waitlist{
    gap:55px;
  }

  .waitlist-board{
    padding:32px;
  }

  .review-card{
    padding:24px;
    min-height:330px;
  }
}

@media(max-width:1023px) and (min-width:768px){
  .site-header{
    padding-inline:16px;
    gap:12px;
  }

  .site-nav{
    gap:13px;
    font-size:10px;
  }
    .hero .eyebrow{
    font-size:9px;
  }

  .hero-description{
    font-size:15px;
  }

  .hero-actions{
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
    margin-top:25px;
  }
        .section{
    padding-block:85px;
  }

  .feature-flow.is-staged{
    column-gap:36px;
  }

  .feature-copy{
    padding-inline:14px;
  }

  .intelligence{
    gap:28px;
  }

  .intelligence h2,

  .faq h2{
    font-size:35px;
  }

  .plan-scene h3{
    font-size:25px;
  }

  .plan-card{
    padding:19px;
  }

  .faq{
    gap:35px;
  }

  .faq-items summary{
    font-size:15px;
  }

  .hero-actions .button{
    font-size:14px;
  }

  /* Hai cột vẫn còn ở dải này nhưng đã chật: nới lại chỗ cho widget Turnstile
     300px bằng cách thu bớt lề của khung form. */
  .waitlist{
    gap:30px;
  }

  .waitlist h2{
    font-size:35px;
  }

  .waitlist-board{
    padding:25px 20px;
  }

  .review-group{
    --review-gap:14px;
    --review-card-w:calc((100% - 2 * var(--review-gap)) / 3);
  }

  .review-card{
    padding:22px 18px;
    min-height:355px;
  }

  .review-card blockquote>p{
    font-size:18px;
  }
}

/* Stack once the headline and the phone pair no longer fit comfortably. */
@media(max-width:899px){
  .hero{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(28px,5svh,48px);
    padding-top:clamp(32px,7svh,60px);
  }

  /* Cùng ngưỡng với lúc cột tiêu đề thôi dính: sân khấu ba cảnh xuống dưới phần
     dẫn, và bị giới hạn bề ngang để dòng chữ không kéo quá dài. */
  .intelligence{
    grid-template-columns:minmax(0,1fr);
    gap:34px;
  }

  .plan-track{
    max-width:600px;
  }

  /* Ảnh của từng tính năng đi vào sau khi phần chữ của chính nó đã vào màn hình
     — script.js gắn .is-sequenced rồi mở từng ảnh một, xem initFeatureStage. */
  .feature-flow.is-sequenced .feature-shot{
    opacity:0;
    transform:translateY(24px) scale(.972);
    transition:
      opacity 640ms var(--ease-out),
      transform 640ms var(--ease-out);
  }

  .feature-flow.is-sequenced .feature-shot.is-entered{
    opacity:1;
    transform:none;
  }

  .hero h1{
    font-size:clamp(26px,8.3vw,54px);
    line-height:1.23;
  }

  .hero-visual{
    width:min(100%,430px,65svh);
  }

  .hero-phone{
    --phone-angle:0deg;
  }

  .hero-phone-front{
    grid-column:2 / 9;
  }

  .hero-phone-back{
    grid-column:6 / 12;
    margin-top:28%;
  }
}

@media(max-width:767px){
  :root{
    --page-gutter:clamp(16px,5.13vw,20px);
  }

  html{
    scroll-padding-top:28px;
  }

  /*
    ── Nhịp phân tách trên điện thoại ──────────────────────────────────────
    Ba mức, mức nào cũng làm bằng BỐ CỤC trước rồi mới tới màu:

    1. Giữa các tính năng trong khu tính năng: thêm khoảng thở, giữ nguyên nền —
       bốn tính năng vẫn phải đọc ra là một nhóm.
    2. Giữa các section lớn: khoảng thở rộng hơn hẳn, cộng một lớp sắc độ rất
       mềm tắt dần về trong suốt ở CẢ BỐN phía, nên ranh giới không bao giờ
       thành một vạch ngang cứng. Chỉ dùng ba mã tím sẵn có.
    3. Ngay đầu section: nhãn mục vốn đã có, thêm một nét ngắn rất mờ ở đúng hai
       chỗ mà ranh giới không có gì khác đánh dấu.
  */
  .section{
    padding-block:88px;
  }

  .site-header{
    min-height:52px;
    max-width:calc(100% - 32px);
    margin-top:12px;
    /* Preserve the same 12px offset below the safe edge, including when sticky. */
    top:calc(12px + env(safe-area-inset-top,0px));
    padding:5px 13px 5px 9px;
    gap:30px;
  }

  .site-header .brand{
    font-size:18px;
  }

  .site-header .brand img{
    width:29px;
    height:29px;
  }
    .menu-toggle{
    display:flex;
    align-items:center;
    gap:13px;
    padding:8px 3px 8px 0;
    min-height:42px;
    font-size:12px;
    border:0;
    background:none;
    color:var(--secondary);
  }

  .menu-lines{
    position:relative;
    width:17px;
    height:12px;
  }

  .menu-lines:before,
  .menu-lines:after{
    content:"";
    position:absolute;
    left:0;
    width:17px;
    height:1px;
    background:var(--text);
    transition:transform 200ms var(--ease-out);
    top:3px;
  }

  .menu-lines:after{
    top:9px;
  }

  .menu-toggle[aria-expanded="true"] .menu-lines:before{
    transform:translateY(3px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-lines:after{
    transform:translateY(-3px) rotate(-45deg);
  }

  .site-nav{
    display:none;
    position:absolute;
    top:calc(100% + 9px);
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:310px;
    max-width:calc(100vw - 40px);
    padding:15px;
    background:#1a1624;
    border:1px solid rgba(183,155,255,.24);
    border-radius:24px;
    box-shadow:0 20px 45px rgba(5,5,8,.25);
  }

  .site-nav.is-open{
    display:flex;
    flex-direction:column;
    gap:0;
    align-items:stretch;
  }

  .site-nav a{
    padding:14px;
    font-size:16px;
    color:var(--text);
  }

  .site-nav a.is-active{
    color:var(--text-bright);
    background:rgba(183,155,255,.14);
    border-radius:16px;
  }

  .hero .eyebrow{
    font-size:9px;
    margin-bottom:19px;
  }

  .hero-description{
    font-size:16px;
    line-height:1.85;
    margin-top:22px;
    max-width:350px;
  }

  .hero-actions{
    gap:20px;
    margin-top:27px;
    flex-wrap:wrap;
  }

  .hero-actions .button{
    font-size:14px;
    padding:13px 20px;
  }

  /*
    Đổi ảnh trước/sau bằng một cú chạm. CHỈ transform + z-index: hai ảnh giữ
    nguyên ô lưới của mình, nên không có gì bên dưới nhảy chỗ và không lần cuộn
    nào phải tính lại bố cục. script.js gắn .can-swap rồi bật/tắt .is-swapped,
    xem initHeroPhoneSwap(). Ở đây không còn chuyển động nào bám theo vị trí
    cuộn: motion.js đã ngừng chỉnh scale của cả cụm dưới 768px.
  */
  .hero-phones.can-swap .hero-phone{
    transition:transform 420ms var(--ease-out);
  }

  /* Con trỏ chỉ báo bấm được ở ĐÚNG ảnh đang nằm sau — ảnh đang ở trước không
     nhận thao tác nào, để một cú chạm trượt tay không làm cụm nhấp nháy. */
  .hero-phones.can-swap .hero-phone-back,
  .hero-phones.can-swap.is-swapped .hero-phone-front{
    cursor:pointer;
  }

  .hero-phones.can-swap.is-swapped .hero-phone-back{
    cursor:default;
  }

  /* Lùi ra sau là chìm xuống và nhỏ lại một quãng ngắn; tiến lên trước là nhích
     lên và lớn thêm đúng ngần ấy. Hai mức đều nằm gọn trong .hero-visual nên
     không nong chiều rộng cuộn, và ảnh lùi sau vẫn lộ đủ phần để chạm lại. */
  .hero-phones.is-swapped .hero-phone-front{
    z-index:1;
    transform:translateY(10px) rotate(var(--phone-angle)) scale(.93);
  }

  .hero-phones.is-swapped .hero-phone-back{
    z-index:3;
    transform:translateY(-10px) rotate(var(--phone-angle)) scale(1.07);
  }

              .section-heading{
    display:block;
    margin-bottom:42px;
  }

  .section-heading>p{
    max-width:390px;
    margin-top:23px;
    font-size:13px;
  }

  .eyebrow{
    font-size:9px;
    margin-bottom:19px;
  }

  h2{
    font-size:36px;
    letter-spacing:-.05em;
  }

  /*
    Mức 2. Sắc độ, đặt sau khoảng thở chứ không thay cho nó. Mỗi lớp là MỘT
    radial-gradient tắt hẳn trước cả bốn mép của chính nó (tâm 50% + bán kính
    ≤ 50% theo cả hai trục), nên:
      · không có mép nào bị cắt thành vạch — kể cả trong section có overflow:clip;
      · không phần tử nào tràn ra ngoài khung, nên chiều rộng cuộn không bị nong.
    Section nào đã có lớp nền riêng (.reviews là một mặt phẳng sâu hơn, .waitlist
    là quầng sau khung form) thì chỉ chỉnh lại cho cân giữa màn hẹp, không chồng
    thêm lớp mới.
  */
  .features:after,
  .faq:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
  }

  .features:after{
    background:radial-gradient(50% 32% at 50% 20%,rgba(var(--core-rgb),.09),rgba(var(--core-rgb),.03) 50%,transparent 100%);
  }

  .faq:after{
    background:radial-gradient(50% 34% at 50% 26%,rgba(var(--veil-cool-rgb),.08),rgba(var(--veil-cool-rgb),.025) 52%,transparent 100%);
  }

  /* Trên màn rộng hai quầng này lệch phải, nơi sân khấu và khung form đứng. Ở
     bố cục một cột thì chúng phải về giữa, nếu không nửa trái của section tối
     hơn nửa phải mà chẳng vì lý do gì. */
  .intelligence:before{
    inset:0;
    background:radial-gradient(50% 30% at 50% 26%,rgba(var(--veil-cool-rgb),.14),rgba(var(--veil-cool-rgb),.04) 50%,transparent 100%);
  }

  .waitlist:before{
    inset:0;
    background:
      radial-gradient(50% 32% at 50% 56%,rgba(var(--veil-rgb),.2),rgba(var(--veil-rgb),.06) 48%,transparent 100%),
      radial-gradient(50% 40% at 50% 52%,rgba(var(--core-rgb),.1),rgba(var(--core-rgb),.03) 54%,transparent 100%);
  }

  /* Mức 3. Một nét ngắn rất mờ ngay trên nhãn mục, chỉ ở hai chỗ mà ranh giới
     không có gì khác đánh dấu: tính năng → kế hoạch, và đăng ký → hỏi đáp. Cố ý
     KHÔNG lặp ở mọi section, và cố ý không kéo hết bề ngang màn hình — trang
     này không có đường kẻ giữa các section, xem architecture.md. */
  .intelligence-copy .eyebrow:before,
  .faq .eyebrow:before{
    content:"";
    display:block;
    width:34px;
    height:1px;
    margin-bottom:21px;
    background:linear-gradient(90deg,rgba(var(--core-rgb),.45),rgba(var(--core-rgb),0));
  }

  /* Mức 1. Khoảng cách được đo bằng tay chứ không để gap rải đều: phần chữ phải
     dính lấy ảnh CỦA CHÍNH NÓ, và khoảng giữa hai tính năng phải rộng hơn hẳn.
     Bản cũ để ngược — 66px giữa chữ và ảnh của cùng một tính năng, 36px giữa
     hai tính năng — nên mắt gom nhầm: ảnh của tính năng này đọc ra như mở đầu
     của tính năng sau. Nền không đổi, không tô màu riêng cho từng tính năng. */
  .feature-flow{
    gap:0;
  }

  .feature-shot .device{
    width:min(78%,264px);
  }

  .feature-copy{
    padding:0 6px 22px;
    max-width:420px;
  }

  .feature-shot + .feature-copy{
    margin-top:72px;
  }

  .feature-copy h3{
    font-size:25px;
    margin-top:10px;
  }

  .feature-copy p{
    font-size:15px;
    max-width:35ch;
  }

  .feature-index{
    font-size:9px;
  }

  .intelligence,

  .faq{
    grid-template-columns:1fr;
    gap:38px;
  }

  .intelligence-copy>p:not(.eyebrow){
    font-size:15px;
    margin-top:23px;
    max-width:400px;
  }

  .plan-footnote{
    max-width:360px;
    margin-top:22px;
  }

  /* Hai bước đọc như hai phần liên tiếp của trang: script.js không bật sân khấu
     dính dưới 768px, nên đây là bản xếp dọc và là bản duy nhất. Một nét nối rất
     mờ chạy từ ô số 01 xuống ô số 02 cho thấy đây là một vòng lặp chứ không
     phải hai mục rời nhau — ngắn, nằm đúng dưới ô số, không phải một đường kẻ
     chạy hết bề ngang. */
  .plan-rail{
    gap:0;
  }

  .plan-scene + .plan-scene{
    position:relative;
    margin-top:58px;
  }

  .plan-scene + .plan-scene:before{
    content:"";
    position:absolute;
    /* 14px là đúng tâm ô số: .plan-step-num rộng tối thiểu 28px. */
    left:14px;
    top:-42px;
    width:1px;
    height:30px;
    background:linear-gradient(180deg,rgba(var(--core-rgb),.38),rgba(var(--veil-rgb),.06));
  }

  .plan-scene h3{
    font-size:24px;
    max-width:none;
  }

  .plan-lead{
    font-size:14px;
  }

  .plan-card{
    margin-top:20px;
    padding:18px;
  }

  .plan-log-name{
    font-size:17px;
  }

  .plan-set-row{
    padding:10px 0;
    font-size:16px;
  }

  .plan-suggest{
    font-size:19px;
  }

  blockquote>p{
    font-size:22px;
    line-height:1.65;
  }

  blockquote footer{
    margin-top:24px;
  }

  .faq-items{
    gap:10px;
  }

  .faq-items details{
    border-radius:16px;
  }

  .faq-items summary{
    font-size:15px;
    min-height:64px;
    padding:17px 18px;
  }

  .faq-items details>p{
    padding:15px 18px 20px;
  }

  .faq-items details>p{font-size:15px}

  .site-footer{
    grid-template-columns:1fr;
    justify-items:center;
    gap:20px;
    padding-block:40px 28px;
    text-align:center;
  }

  .site-footer .brand{
    justify-self:center;
    justify-content:center;
  }

  .site-footer>span{
    justify-self:center;
    font-size:9px;
  }

  /* Lời dẫn ở trên, form ngay dưới — không dựng lại một khung lớn nào khác. */
  .waitlist{
    grid-template-columns:1fr;
    gap:28px;
  }

  .waitlist-board{
    padding:26px 20px;
  }

  .waitlist-copy>p:not(.eyebrow){
    font-size:15px;
  }

  .waitlist-board h3{
    font-size:27px;
  }

  .reviews{
    padding-block:62px 54px;
    margin:36px 12px 0;
  }

  /* Tiêu đề một hàng, bộ đếm + nút tròn một hàng riêng ngay dưới, rồi mới tới
     thẻ. Để hai khối đứng cạnh nhau như trên máy tính thì nút 50px lấy mất bề
     ngang của tiêu đề và nó gãy thành bốn dòng. Khoảng dưới rút lại để tiêu đề,
     nút và thẻ đầu đọc ra thành một phần đầu duy nhất của khu đánh giá. */
  .reviews-heading{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-bottom:18px;
  }

  .reviews-heading h2{
    font-size:29px;
  }

  .reviews-heading .eyebrow{
    max-width:220px;
    font-size:9px;
  }

  /* Trên điện thoại không còn băng chuyền theo cuộn, nhưng bộ điều khiển thì
     vẫn y nguyên: reviews.js chuyển sang .is-stepped và chính cái nút tròn này
     đổi nhóm khi bấm. Nút nằm cạnh tiêu đề nên nó vào khung nhìn cùng lúc với
     thẻ đầu tiên — người đọc biết còn nhận xét nữa trước khi bắt đầu đọc. */
  .reviews-controls{
    justify-content:flex-end;
    gap:16px;
    padding-bottom:0;
  }

  /* Các thẻ xếp dọc ở bề ngang đầy đủ và cỡ chữ đọc được — reviews.js mở đúng
     ba thẻ một lúc, xem initStepping(). Ba thẻ tí hon nhét vào bề ngang điện
     thoại thì không thẻ nào đọc được, mà một thẻ ló nửa bên cạnh thì người ta
     phải đoán còn gì phía sau. */
  .review-group{
    --review-gap:18px;
    grid-template-columns:minmax(0,1fr);
  }

  .review-card{
    min-height:0;
    padding:26px;
  }

  .review-card blockquote>p{
    font-size:18px;
  }
}

@media(max-width:374px){
  .hero-description{
    font-size:14px;
  }

  .hero-actions{
    gap:17px;
  }

  .hero-actions .button{
    font-size:11px;
    padding-inline:18px;
  }
  h2{
    font-size:32px;
  }

  .plan-scene h3{
    font-size:22px;
  }

  .plan-card{
    padding:16px;
  }

  .reviews-heading h2{
    font-size:25px;
  }

  .waitlist-board{
    padding:28px 20px;
  }

  .waitlist-board h3{
    font-size:25px;
  }
}

/* Desktop navigation only; the mobile menu keeps its original controls and sizing. */
@media(min-width:768px){
  .site-header{
    min-height:66px;
    padding:10px 22px 10px 16px;
    gap:34px;
    background:rgba(22,19,31,.72);
    border-color:rgba(183,155,255,.2);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    backdrop-filter:blur(24px) saturate(140%);
    box-shadow:0 12px 36px rgba(5,5,8,.22),inset 0 1px 0 rgba(255,255,255,.06);
  }
  /* One track rather than five loose buttons: the links sit close enough to read as
     a group, and a single indicator slides between them behind the text. */
  .site-nav{
    position:relative;
    isolation:isolate;
    gap:4px;
    font-size:14px;
  }
  .site-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 18px;
    border-radius:999px;
    white-space:nowrap;
    color:rgba(255,255,255,.76);
    transition:color 220ms ease,text-shadow 220ms ease;
  }
  .site-nav .desktop-nav-only{display:inline-flex}
  .site-nav a.is-active{color:var(--text-bright)}

  /* Hovering lights the label in place. Only scrolling moves the pill. */
  .site-nav a:hover{
    color:var(--text-bright);
    text-shadow:0 0 14px rgba(183,155,255,.6);
  }

  /* Script measures the target link, so the pill fits any label at any width. */
  .nav-indicator{
    display:block;
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:var(--nav-pill-width,0px);
    height:var(--nav-pill-height,0px);
    border-radius:999px;
    background:linear-gradient(160deg,rgba(183,155,255,.3),rgba(183,155,255,.13));
    border:1px solid rgba(183,155,255,.26);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(30,14,55,.22);
    transform:translate(var(--nav-pill-x,0px),var(--nav-pill-y,0px));
    opacity:0;
    pointer-events:none;
    transition:
      transform 420ms var(--ease-out),
      width 420ms var(--ease-out),
      height 420ms var(--ease-out),
      opacity 200ms ease;
  }

  .nav-indicator.is-visible{
    opacity:1;
  }

  /* First placement and resizes land without sliding in from the corner. */
  .nav-indicator.is-instant{
    transition:opacity 200ms ease;
  }

  /* The signup link is already a filled pill, so it carries its own active state. */
  .site-nav a[href="#waitlist"].is-active{
    box-shadow:
      inset 0 0 0 1px var(--glass-border-bright),
      inset 0 1px 0 rgba(255,255,255,.4),
      0 0 0 3px rgba(183,155,255,.22),
      0 8px 22px rgba(196,168,255,.34);
  }
}
@media(min-width:768px) and (max-width:1023px){
  .site-header{padding-inline:14px;gap:12px}
  .site-nav{gap:2px;font-size:11px}
  .site-nav a{padding-inline:9px}
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *:before,
  *:after{
    animation:none!important;
    transition:none!important;
  }

  .will-reveal{
    opacity:1;
    transform:none;
  }

  .hero-phones{
    transform:none;
  }

  .feature-shot:hover .device{
    transform:none;
  }

  /* script.js đã không bật hai chế độ này khi người dùng tắt chuyển động; đây là
     lớp chặn thứ hai, phòng trường hợp lớp còn sót lại sau khi đổi thiết lập
     giữa chừng. Nội dung phải hiện đủ và đọc theo đúng thứ tự. */
  .feature-flow.is-sequenced .feature-shot{
    opacity:1;
    transform:none;
  }

  .plan-track.is-scrolling{
    height:auto;
  }

  .plan-track.is-scrolling .plan-viewport{
    position:static;
    height:auto;
    overflow:visible;
  }

  .plan-track.is-scrolling .plan-rail{
    display:grid;
    height:auto;
  }

  .plan-track.is-scrolling .plan-scene{
    position:static;
    transform:none;
    opacity:1;
    pointer-events:auto;
    will-change:auto;
  }

  .plan-track.is-scrolling .plan-progress{
    display:none;
  }

  .intelligence-copy{
    position:static;
  }

  /* Quãng đứng yên của khu tính năng chỉ có ý nghĩa khi nội dung còn chuyển
     động. Tắt chuyển động thì trả về bố cục ngắn, đọc thẳng từ trên xuống. */
  .feature-flow.is-staged{
    grid-template-rows:repeat(4,auto);
  }

  .feature-flow.is-staged .feature-copy{
    min-height:58svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .feature-flow.is-staged .feature-hold{
    position:static;
    min-height:0;
  }

  /* Không còn quãng đứng yên thì cũng không còn mốc buông nào phải khớp. */
  .feature-flow.is-staged .feature-halo,
  .feature-flow.is-staged .feature-shot{
    margin-bottom:0;
  }
}

@media(prefers-reduced-transparency:reduce){
  .site-header{
    background:#191520;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .preview-dialog::backdrop{
    background:#08060c;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .preview-dialog,.reviews-next,.faq-items details{
    background:#262136;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .plan-card{background:#221b33}
}

@supports not (backdrop-filter:blur(20px)){
  .site-header{
    background:#191520;
  }
  .preview-dialog,.reviews-next,.faq-items details{background:#262136}
}

@media(prefers-contrast:more){
  .preview-dialog,.reviews-next,.faq-items details{background:#262136;border-color:var(--text-bright)}
  .plan-card{background:#221b33;border-color:var(--text-bright)}
  /* Bước chưa đọc tới vẫn phải đủ tương phản khi người dùng yêu cầu. */
  .feature-flow.is-staged .feature-copy:not(.is-active)>*{opacity:1}
}
@media(prefers-contrast:more) and (min-width:768px){
  .site-header{background:#191520;border-color:var(--text-bright)}
  .site-nav a{color:var(--text-bright)}
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* Một màn app lớn đứng yên tại chỗ: rê chuột chỉ nhích rất nhẹ để báo bấm
     được, không nhấc hẳn lên như hồi còn bốn thẻ nhỏ. */
  .feature-shot:hover .device{
    transform:translateY(-6px) scale(1.012);
  }

  .hero-phone:hover{
    transform:
      translateY(-8px)
      rotate(var(--phone-angle))
      scale(1.025);
    z-index:4;
  }
}

/* Áp dụng dải màu tím nhạt lavender cho nút Đăng ký */
@media(min-width:768px){
.site-nav a[href="#waitlist"] {
  /* Dải chuyển màu chuyển từ sáng (trên) xuống tím nhạt (dưới) */
  background: linear-gradient(180deg, #E2D4FF 0%, #C4A8FF 100%);
  
  /* Màu chữ tối để nổi bật trên nền sáng */
  color: #121018 !important; 
  
  /* Căn chỉnh khoảng cách và bo tròn dạng pill */
  padding: 8px 22px;
  border-radius: 9999px;
  font-weight: 600;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Hiệu ứng chuyển cảnh mượt */
  transition:transform 160ms var(--ease-out),box-shadow 180ms ease;
}

/* Hiệu ứng khi rê chuột vào nút */
.site-nav a[href="#waitlist"]:hover {
  background: linear-gradient(180deg, #EBDFFF 0%, #CFB5FF 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(196, 168, 255, 0.4); /* Glow nhẹ tông tím nhạt */
  /* Chữ tối trên nền sáng: nút tự sáng lên, không cần quầng tím quanh chữ. */
  text-shadow: none;
}

/* Hiệu ứng khi nhấn vào nút */
.site-nav a[href="#waitlist"]:active {
  transform: translateY(0);
  box-shadow: none;
}
}