/* ==================== PRELOADER ==================== */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  /* Cố định, không theo theme — màn hình chờ luôn giữ đúng tông ngà bất kể
     site đang ở chế độ sáng hay tối, giữ đúng khoảnh khắc mở màn đã art-direct. */
  background: var(--ivory-fixed);
  transition: opacity var(--dur-slow) var(--ease-expo), visibility var(--dur-slow);
}

#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-dragon {
  width: min(60vw, 360px);
  height: auto;
  opacity: 0;
}

.preloader-seal {
  width: 56px;
  height: 56px;
  opacity: 0;
  transform: scale(0.6);
}

.preloader-seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==================== SOCIAL RAIL — liên hệ nhanh, cố định khi cuộn ==================== */
.social-rail {
  position: fixed;
  right: var(--s-5);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.social-rail-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  /* Cố định, không theo theme — rail luôn giữ phong cách "kính mực tối",
     giống nav, để nổi bật nhất quán trên mọi nền section bên dưới. */
  background: var(--glass-fixed-bg);
  border: 1px solid var(--glass-fixed-border);
  backdrop-filter: blur(var(--ink-glass-blur));
  -webkit-backdrop-filter: blur(var(--ink-glass-blur));
  color: var(--ivory-fixed);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
}

.social-rail-btn svg {
  width: 22px;
  height: 22px;
}

.social-rail-btn:hover,
.social-rail-btn:focus-visible {
  background: var(--gold);
  color: var(--ink-fixed);
  border-color: var(--gold);
  transform: translateX(-4px);
}

@media (max-width: 768px) {
  .social-rail {
    top: auto;
    bottom: var(--s-5);
    right: var(--s-4);
    transform: none;
    gap: var(--s-2);
  }

  .social-rail-btn {
    width: 42px;
    height: 42px;
  }

  .social-rail-btn svg {
    width: 19px;
    height: 19px;
  }
}

/* ==================== NAV ==================== */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-expo), border-color var(--dur-base) var(--ease-expo),
    backdrop-filter var(--dur-base) var(--ease-expo);
}

/* Legibility scrim — always present behind the transparent nav so links stay
   readable over bright hero imagery, independent of the scroll-triggered glass state. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 11, 13, 0.55), transparent);
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-expo);
}

.nav.is-scrolled::before {
  opacity: 0;
}

.nav-logo,
.nav-links a,
.nav-toggle span {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.nav.is-scrolled {
  /* Cố định — nav luôn giữ kính mực tối bất kể theme (xem giải thích ở
     tokens.css §light theme). */
  background: var(--glass-fixed-bg);
  backdrop-filter: blur(var(--ink-glass-blur));
  -webkit-backdrop-filter: blur(var(--ink-glass-blur));
  border-bottom-color: var(--glass-fixed-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  width: 100%;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: var(--tracking-display);
  color: var(--ceramic-ivory);
  margin-right: auto;
}

/* .nav-logo dùng chung cho header (#nav) lẫn footer — footer đổi màu theo
   theme bình thường, riêng header phải cố định vì luôn nằm trên nền tối
   (ảnh hero / kính mực), nên override riêng ở đây với độ đặc hiệu cao hơn. */
#nav .nav-logo {
  color: var(--ivory-fixed);
}

.nav-logo-seal {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  font-size: var(--fs-small);
}

.nav-links a {
  position: relative;
  color: var(--ivory-fixed-dim);
  padding-block: var(--s-2);
  transition: color var(--dur-fast);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
  transition: right var(--dur-base) var(--ease-expo);
}

.nav-links a:hover {
  color: var(--gold);
}

.nav-links a:hover::after {
  right: 0;
}

.nav-cta {
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-small);
}

/* Nút chuyển sáng/tối — cố định phong cách nav (luôn nền tối), không theo
   theme của phần nội dung bên dưới. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  border: 1px solid var(--glass-fixed-border);
  background: transparent;
  color: var(--ivory-fixed);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
}

/* Mặc định (sáng) — hiện icon trăng, tức hành động "chuyển sang tối". */
.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ivory-fixed);
  transition: transform var(--dur-base) var(--ease-expo), opacity var(--dur-base);
}

.nav-mobile {
  /* Bug đã sửa: trước đây .nav-mobile là flex item ngang hàng với .nav-inner
     bên trong .nav (display:flex), khiến nó chiếm 1 cột riêng thay vì xổ
     xuống dưới — bóp méo logo "Huyền Minh" xuống 2 dòng. position:absolute
     đưa nó ra khỏi flex flow, neo theo mép dưới của .nav (position:fixed
     cũng là positioning context hợp lệ cho con absolute). */
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6) var(--s-6);
  background: var(--glass-fixed-bg);
  backdrop-filter: blur(var(--ink-glass-blur));
  -webkit-backdrop-filter: blur(var(--ink-glass-blur));
  border-top: 1px solid var(--glass-fixed-border);
  max-height: calc(100svh - var(--nav-h));
  overflow-y: auto;
}

/* :not(.btn) — nếu không loại trừ, quy tắc này (specificity 0,1,1) đè lên màu
   chữ đen của .btn-primary (0,1,0), khiến CTA "Lập lá số" trong menu mobile
   bị chữ xám mờ trên nền vàng thay vì chữ đen tương phản cao. */
.nav-mobile a:not(.btn) {
  color: var(--ivory-fixed-dim);
  font-size: var(--fs-lead);
  padding-block: var(--s-2);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav-mobile a:not(.btn):hover {
  color: var(--gold);
}

.nav-mobile .btn {
  width: fit-content;
}

.nav.is-open .nav-mobile {
  display: flex;
}

@media (max-width: 860px) {
  .nav-links,
  .nav-cta {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

/* ==================== HERO ==================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Cố định — hero là cảnh rồng/mực loang được art-direct riêng, không đổi
     theo theme (xem giải thích ở tokens.css §light theme). */
  background: var(--ink-fixed);
}

.hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-layer--bg {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(212, 175, 55, 0.06), transparent 60%),
    var(--ink-fixed);
}

.hero-layer--ink {
  mix-blend-mode: screen;
  opacity: 0.8;
}

.hero-layer--dragon {
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.92;
  mask-image: linear-gradient(to bottom, black 60%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 96%);
}

.hero-layer--dust {
  pointer-events: none;
}

/* Scrim cố định phía sau khối chữ — đảm bảo tương phản đủ AA dù rồng ở vị trí
   nào trong ảnh (khác crop theo từng breakpoint). Không phụ thuộc riêng vào
   text-shadow vì nền có kết cấu vảy rồng sáng, dễ nuốt chữ mờ. */
.hero-scrim {
  background: linear-gradient(
    115deg,
    rgba(10, 11, 13, 0.85) 0%,
    rgba(10, 11, 13, 0.6) 32%,
    rgba(10, 11, 13, 0.22) 56%,
    transparent 74%
  );
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 640px) {
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(10, 11, 13, 0.55) 0%,
      rgba(10, 11, 13, 0.78) 38%,
      rgba(10, 11, 13, 0.85) 68%,
      rgba(10, 11, 13, 0.6) 100%
    );
  }
}

/* Tablet: cột chữ chiếm tỷ lệ chiều rộng lớn hơn desktop nên vùng mờ 115deg
   mặc định không che hết dòng cuối của hero-lead — kéo dài điểm trong suốt. */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero-scrim {
    background: linear-gradient(
      115deg,
      rgba(10, 11, 13, 0.88) 0%,
      rgba(10, 11, 13, 0.7) 45%,
      rgba(10, 11, 13, 0.35) 70%,
      transparent 88%
    );
  }
}

.hero-layer--text {
  display: flex;
  /* Bug đã sửa: align-items:center canh giữa .hero-content theo chiều dọc
     trong TOÀN BỘ chiều cao hero. Nếu cửa sổ trình duyệt thấp (không đủ
     100svh cho chiều cao thật của nội dung), phần canh giữa đẩy dòng
     eyebrow lên TRÊN y=0 — chui ra sau nav cố định, chồng lên logo/dấu
     triện. `flex-start` là nền an toàn; `safe center` (trình duyệt hỗ trợ)
     vẫn canh giữa như cũ nhưng tự động rơi về start nếu tràn. */
  align-items: flex-start;
  align-items: safe center;
  z-index: 2;
}

/* Tia lửa nhỏ kiểu vox/motion-graphic quanh vùng đuôi rồng — thuần CSS,
   không phụ thuộc canvas nên vẫn chạy mượt trên di động. */
.hero-sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.spark {
  position: absolute;
  fill: var(--gold-light);
  filter: drop-shadow(0 0 6px rgba(243, 229, 171, 0.8));
  animation: spark-twinkle 3.2s ease-in-out infinite;
}

.spark--a {
  width: 18px;
  height: 18px;
  left: 9%;
  top: 68%;
  animation-delay: 0s;
}

.spark--b {
  width: 12px;
  height: 12px;
  left: 16%;
  top: 79%;
  animation-delay: 1.1s;
}

.spark--c {
  width: 14px;
  height: 14px;
  left: 6%;
  top: 58%;
  animation-delay: 2.2s;
}

@keyframes spark-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(25deg);
  }
}

@media (max-width: 640px) {
  .hero-sparkles {
    display: none;
  }
}

.hero-content {
  max-width: 720px;
  padding-block: calc(var(--nav-h) + var(--s-8)) var(--s-9);
  margin-inline: 0;
}

.hero-content h1 {
  position: relative;
  margin-top: var(--s-4);
  /* Thu nhỏ so với mặc định --fs-display-xl (từng lên tới 6.4rem) — headline
     gọn hơn, nổi bật nhờ hiệu ứng ngã màu + phát sáng thay vì chỉ nhờ cỡ chữ. */
  font-size: clamp(2.1rem, 1.7rem + 2.3vw, 3.75rem);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
  /* Cố định — đè lên màu h1 mặc định (phản ứng theme) vì hero luôn nền tối;
     .tw-char do typewriter.ts sinh ra kế thừa màu này. */
  color: var(--ivory-fixed);
}

/* Ngã màu trắng ngà → vàng kim, phát sáng nhẹ sau khi gõ xong (typewriter.ts). */
.tw-char {
  transition: text-shadow 1.4s ease;
}

.hero-title--lit .tw-char {
  text-shadow: 0 0 16px rgba(212, 175, 55, 0.55);
}

.hero-title--lit {
  animation: hero-title-pulse 3.2s ease-in-out 1.6s infinite;
}

@keyframes hero-title-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.22));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.5));
  }
}

/* Không có JS / reduced-motion → không có span .tw-char nào được tạo, giữ
   nguyên text node gốc. Vẫn cho chữ lên màu vàng ấm + glow tĩnh, tránh trơ
   trọi màu ivory mặc định. */
@media (prefers-reduced-motion: reduce) {
  .hero-content h1 {
    color: var(--gold);
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.45), 0 4px 40px rgba(0, 0, 0, 0.6);
  }

  .hero-title--lit {
    animation: none;
  }
}

/* Bug đã sửa: white-space:pre trên span 1 ký tự tưởng chỉ để giữ độ rộng
   dấu cách, nhưng lại tắt luôn khả năng xuống dòng tại chính dấu cách đó —
   khiến H1 tràn ngang và bị cắt chữ trên màn hình hẹp thay vì wrap bình
   thường. white-space mặc định (normal) đã đủ giữ đúng 1 khoảng trắng giữa
   các từ mà vẫn cho phép wrap. */

.typing-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  opacity: 0;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
  pointer-events: none;
}

.typing-cursor.is-static {
  opacity: 1;
  position: static;
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: var(--s-2);
  vertical-align: -0.1em;
}

.typing-cursor.is-blinking {
  animation: cursor-blink 1s steps(1) infinite;
}

@keyframes cursor-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .typing-cursor.is-blinking {
    animation: none;
    opacity: 1;
  }
}

.hero-lead {
  margin-top: var(--s-5);
  font-size: var(--fs-lead);
  color: var(--ivory-fixed-dim);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

/* Cố định — .eyebrow mặc định phản ứng theme (đổi vàng ↔ đỏ), nhưng eyebrow
   trong hero luôn cần vàng vì hero luôn nền tối. */
.hero .eyebrow {
  color: var(--gold);
}

/* hero dùng chung .btn-ghost với section Bảng giá (phản ứng theme) — riêng
   trong hero phải cố định ivory vì luôn nằm trên nền tối. */
.hero .btn-ghost {
  color: var(--ivory-fixed);
  border-color: rgba(232, 227, 217, 0.3);
}

.hero .btn-ghost:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ivory-fixed-dim);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.scroll-cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scroll-cue-pulse 2s var(--ease-expo) infinite;
}

@keyframes scroll-cue-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .hero-content {
    padding-top: calc(var(--nav-h) + var(--s-6));
  }

  /* Bug đã sửa: scroll-cue định vị absolute cách đáy hero 1 khoảng cố định,
     không hề biết chiều cao thật của hero-content. Trên màn hẹp, H1 wrap
     4 dòng + 2 nút xếp chồng đẩy nội dung đủ dài để đè lên "Cuộn xuống".
     Ẩn hẳn trên mobile — thao tác vuốt để cuộn vốn đã là điều hiển nhiên
     trên thiết bị cảm ứng, không cần gợi ý thêm. */
  .scroll-cue {
    display: none;
  }
}

/* ==== Layout 2 cột: text trái + form "Lập lá số" phải — tận dụng khoảng
   trống bên phải hero thay vì để form thành 1 section riêng cuộn xuống
   mới thấy. ==== */
.hero-layer--text {
  /* Ghi đè position:absolute dùng chung của .hero-layer — layer text cần
     nằm trong luồng bình thường để .hero (min-height, không phải height cố
     định) tự giãn theo chiều cao thật của nội dung + form, thay vì bị cắt
     bởi overflow:hidden của .hero. Các layer nền (rồng, canvas, scrim) vẫn
     absolute inset:0 nên tự giãn theo chiều cao mới của .hero. */
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
  gap: var(--s-8);
  align-items: start;
  width: 100%;
}

.hero-form-col {
  /* Đẩy lên cao hơn bản trước (chỉ còn s-5 thay vì s-8+2.75rem) — card đã
     gọn lại đủ nhiều (xem .chart-form/.field bên dưới) nên không cần bù
     nhiều khoảng đệm để 2 cột nhìn cân, đồng thời hạ chiều cao tổng thể
     card xuống gần với cột trái hơn. */
  padding-block: calc(var(--nav-h) + var(--s-5)) var(--s-6);
}

.hero-form-col .section-head {
  margin-bottom: var(--s-4);
}

.hero-form-col h2 {
  /* Cỡ mặc định của h2 (--fs-display-md, tới 2.75rem) quá lớn cho 1 card
     gọn — thu về mức "vừa đủ", không cạnh tranh với H1 thật của hero. */
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
}

.hero-form-col .chart-form {
  max-width: none;
  margin-inline: 0;
  /* Thu gọn form lại — bản đầy đủ (gap s-5, padding s-6 từ .ink-card) quá
     cao so với cột trái (chỉ có eyebrow/H1/lead/2 nút), khiến 2 cột lệch
     hẳn. Giảm gap giữa field + padding card để tổng chiều cao gần cột trái
     hơn, "cảm giác không lệch" theo đúng yêu cầu — không đổi bố cục/field. */
  gap: var(--s-3);
  padding: var(--s-5);
}

.hero-form-col .field-row {
  gap: var(--s-3);
}

/* Gộp "Giới tính" + "Năm luận giải" chung 1 hàng thay vì 2 khối xếp dọc —
   bớt hẳn 1 tầng chiều cao, giúp card gần bằng chiều cao cột trái hơn. */
.hero-form-col .field-row--2 {
  grid-template-columns: 1fr 1fr;
  align-items: end;
}

.hero-form-col .field input,
.hero-form-col .field select {
  padding: var(--s-2) var(--s-4);
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-form-col {
    padding-top: 0;
    max-width: 560px;
  }

  /* Dưới 980px, hero-grid chuyển 1 cột nên .hero-form-col nằm bên dưới
     .hero-content trong luồng — .hero co giãn cao hơn hẳn 1 màn hình để
     chứa cả 2. Rồng (position:absolute, inset:0 kế thừa từ .hero-layer)
     lại kéo dài theo chiều cao MỚI này, tràn ra sau lưng cả card form —
     không cần thiết vì rồng chỉ có ý nghĩa làm nền cho khối chữ phía trên.
     Giới hạn lại đúng 1 màn hình đầu, phần còn lại (form) nằm trên nền
     --ink-fixed trơn của .hero. */
  .hero-layer--dragon {
    inset: 0 0 auto 0;
    height: 100svh;
  }
}

@media (max-width: 640px) {
  .hero-form-col {
    padding-bottom: var(--s-5);
  }
}

/* Bug đã sửa: dưới 980px, .hero cao hơn 1 màn hình để chứa cả hero-content
   + form (xem comment tại .hero-layer--dragon). Cộng thêm padding-block mặc
   định của section kế tiếp (--s-10/--s-8/--s-7 tuỳ breakpoint) đè lên
   padding-bottom vừa giảm ở trên, khoảng trống nền đen trơn giữa nút "Lập
   lá số" và tiêu đề section sau vẫn rất rộng vì không có gì lấp (không
   divider, không texture). Giảm riêng padding-top của section NGAY SAU hero
   — không đụng padding-block chung của .section (dùng lại ở mọi section
   khác, không nên rút ngắn toàn bộ). */
.hero + .section {
  padding-top: var(--s-7);
}

@media (max-width: 480px) {
  .hero + .section {
    padding-top: var(--s-5);
  }
}

/* .eyebrow/h2/.ink-card/.field... trong form dùng chung với section Bảng
   giá (phản ứng theme) — riêng trong hero phải cố định vì hero luôn nền
   tối, không đổi theo theme trang (xem tokens.css §light theme). */
.hero h2 {
  color: var(--ivory-fixed);
}

.hero .section-head p {
  color: var(--ivory-fixed-dim);
}

.hero .ink-card {
  background: var(--glass-fixed-bg);
  border-color: var(--glass-fixed-border);
}

.hero .ink-card p {
  color: var(--ivory-fixed-dim);
}

.hero .field label,
.hero .field legend {
  color: var(--ivory-fixed-dim);
}

/* Bug đã sửa: chữ gõ vào ô "Họ và tên" hoàn toàn vô hình dù đúng theme dark
   art-direct của hero. Nguyên nhân: `.field input[type="text"]` (dưới, base
   rule dùng --ceramic-ivory phản ứng theme) có specificity NGANG BẰNG
   `.hero .field input` (0,2,1 = 0,2,1) — khi hòa specificity, CSS lấy luật
   đứng SAU trong file, mà base rule nằm sau khối này, nên nó đè ngược lại
   màu cố định --ivory-fixed bằng --ceramic-ivory (tối, #1c1a16, đúng ở nền
   sáng nhưng hero luôn nền tối cố định) → chữ đen trên nền đen. Thêm
   `[type="text"]` vào selector để nâng specificity lên (0,3,1), thắng chắc
   chắn bất kể thứ tự khai báo trong file. */
.hero .field input[type="text"],
.hero .field select {
  color: var(--ivory-fixed);
}

.hero .field input[readonly] {
  color: var(--ivory-fixed-dim);
}

.hero .field--radio label {
  color: var(--ivory-fixed);
}

/* Card form trong hero hẹp hơn nhiều so với section form gốc (760px) — giữ
   nguyên padding-right 96px của .field select sẽ ép chữ trong 3 cột hẹp
   (Ngày/Tháng/Năm...) co lại chỉ còn 1 ký tự. Mũi tên trang trí chỉ cần
   ~20px, 32px là đủ dư cho mọi kích thước cột. */
.hero .field select {
  padding-right: var(--s-6);
}

/* ==================== SECTION SURFACE VARIANT ==================== */
.section--surface {
  background: var(--ink-surface);
}

/* Tranh thủy mặc mờ ở góc — dùng cho các section nền đen phẳng (Vấn đề,
   Quy trình, Bảng giá, FAQ) để đỡ đơn điệu, không cạnh tranh với nội dung
   nhờ opacity thấp + mask mờ dần vào nền. Section cha cần position:relative
   (đã có sẵn từ .section) — z-index âm để luôn nằm sau .container. */
.section-bg-image {
  position: absolute;
  width: min(42%, 560px);
  height: 100%;
  object-fit: contain;
  opacity: 0.4;
  /* Phải âm, không phải 0 — .container (static, in-flow) tô màu ở lớp
     "non-positioned" luôn nằm TRÊN lớp z-index:0/auto của phần tử positioned
     theo thứ tự stacking chuẩn, dù ảnh đứng sau trong DOM. z-index âm mới
     chắc chắn ảnh nằm sau nội dung. */
  z-index: -1;
  pointer-events: none;
}

.section-bg-image--tr {
  top: 0;
  right: 0;
  object-position: top right;
  mask-image: linear-gradient(to left, black 45%, transparent 92%);
  -webkit-mask-image: linear-gradient(to left, black 45%, transparent 92%);
}

.section-bg-image--bl {
  bottom: 0;
  left: 0;
  object-position: bottom left;
  mask-image: linear-gradient(to right, black 45%, transparent 92%);
  -webkit-mask-image: linear-gradient(to right, black 45%, transparent 92%);
}

@media (max-width: 900px) {
  .section-bg-image {
    width: min(78%, 460px);
    opacity: 0.3;
  }
}

/* Vệt cọ mực phân cách section — điểm nhấn thủy mặc giữa các khối màu phẳng. */
.section-divider {
  position: relative;
  height: 24px;
  background: var(--ink-black);
}

.section-divider svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Hero đã chiếm trọn 100svh — section kế tiếp không cần thêm padding-top
   đầy đủ theo thang Liúbái nữa, nếu không khoảng cách từ "Cuộn xuống" đến
   tiêu đề đầu tiên cảm giác quá xa. */
#why {
  padding-top: var(--s-7);
}

@media (max-width: 900px) {
  #why {
    padding-top: var(--s-6);
  }
}

/* ==================== GRID / CARDS ==================== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

@media (max-width: 900px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
  max-width: 640px;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

.feature-icon {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--gold-ink);
  margin-bottom: var(--s-3);
}

.ink-card h3 {
  margin-bottom: var(--s-3);
}

.ink-card p {
  color: var(--ceramic-ivory-dim);
  font-size: var(--fs-small);
}

/* ==================== 12 PALACES ==================== */
.palace-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
}

.palace-card {
  position: relative;
  padding: var(--s-5);
  /* Bo góc rộng hơn (r-lg thay vì r-md) cho cảm giác mềm mại hơn. */
  border-radius: var(--r-lg);
  /* Bug đã sửa: nền/viền cũ (alpha 0.02/0.1) gần như vô hình, khiến chữ
     "Nô Bộc", "Huynh Đệ"... trôi nổi trực tiếp trên ảnh nền góc (thủy mặc
     đình + hoa đào) và khó đọc. Dùng thẳng token bề mặt của theme
     (--ink-surface, đã phản ứng sáng/tối) để khung luôn đủ tương phản với
     bất kỳ ảnh nền nào phía sau, bất kể site đang ở chế độ nào. */
  border: 1px solid var(--ink-glass-border);
  background: var(--ink-surface);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
  transition: border-color var(--dur-base) var(--ease-expo), transform var(--dur-base) var(--ease-expo),
    background var(--dur-base) var(--ease-expo);
}

.palace-card:hover,
.palace-card:focus-within {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.06);
  transform: translateY(-3px);
}

.palace-icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--gold-ink);
  margin-bottom: var(--s-2);
}

.palace-card h3 {
  font-size: 1.15rem;
  margin-bottom: var(--s-2);
}

.palace-card p {
  font-size: 0.8rem;
  color: var(--ceramic-ivory-dim);
  max-width: none;
}

@media (max-width: 1024px) {
  .palace-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .palace-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==================== HOW IT WORKS / STEPS ==================== */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}

.steps-line {
  position: absolute;
  top: -46px;
  left: 0;
  width: 100%;
  height: 90px;
  display: none;
}

/* Nét vẽ mờ phía sau — mô phỏng mực loang, kéo dài từ đường nét chính bên
   trên. Specificity phải thắng .ink-stroke path (0,1,1) nên cần thêm phần
   tử vào chuỗi selector. */
.ink-stroke path.steps-path-glow {
  stroke-width: 10;
  opacity: 0.28;
}

@media (min-width: 901px) {
  .steps-line {
    display: block;
  }
}

/* Bản dọc thay thế trên mobile — trước đây .steps-line chỉ ẩn đi mà không
   có gì thay thế, nên "hiệu ứng lướt" hoàn toàn biến mất trên điện thoại.
   Neo theo cột huy hiệu số (rộng 44px, cùng x với .step-index). */
.steps-line-mobile {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 100%;
}

@media (max-width: 900px) {
  .steps-line-mobile {
    display: block;
  }
}

.step {
  position: relative;
  padding-top: var(--s-4);
}

.step-index {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--gold);
  /* Nền đặc để che đoạn đường mực chạy phía sau — tạo cảm giác đường nét
     "chui" qua sau huy hiệu số thay vì lộ nguyên qua tâm rỗng. */
  background: var(--ink-black);
  color: var(--gold-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: var(--s-4);
}

.step h3 {
  margin-bottom: var(--s-2);
}

.step p {
  color: var(--ceramic-ivory-dim);
  font-size: var(--fs-small);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ==================== FORM ==================== */
.chart-form {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: var(--s-5);
}

/* Form nhập liệu không nên dùng hiệu ứng "bừng sáng vàng" kế thừa từ
   .ink-card — người dùng rê chuột/focus liên tục khi điền form, hiệu ứng
   flicker lặp lại gây khó chịu thay vì chỉ là điểm nhấn tĩnh như các card
   nội dung khác (pricing, expert...). Tắt hẳn glow + flicker cho form. */
.chart-form.ink-card:hover,
.chart-form.ink-card:focus-within {
  border-color: var(--ink-glass-border);
  transform: none;
  box-shadow: var(--ink-glass-shadow);
}

.chart-form.ink-card:hover::before,
.chart-form.ink-card:focus-within::before {
  opacity: 0;
  animation: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  /* min-width mặc định của grid item là "auto" (tôn trọng min-content của
     select/input bên trong) — trong .field-row 3 cột hẹp (nhất là card form
     gọn trong hero), điều này ép cả hàng tràn rộng hơn card cha. 0 cho phép
     co lại đúng theo track thay vì tràn. */
  min-width: 0;
}

.field label,
.field legend {
  font-size: var(--fs-small);
  color: var(--ceramic-ivory-dim);
}

.field input[type="text"],
.field select {
  appearance: none;
  background-color: rgba(232, 227, 217, 0.07);
  border: 1px solid rgba(232, 227, 217, 0.24);
  border-radius: var(--r-md);
  color: var(--ceramic-ivory);
  font-weight: 500;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-body);
  transition: border-color var(--dur-base) var(--ease-expo), box-shadow var(--dur-base) var(--ease-expo);
}

/* Firefox tôn trọng màu <option> trực tiếp; color-scheme lo phần Chromium/Safari. */
.field select option {
  /* Cố định — luôn ép option sáng/chữ tối bất kể theme, để nhất quán giữa
     Firefox (tôn trọng màu <option> trực tiếp) và Chromium/Safari. */
  color: var(--ink-fixed);
  background: var(--ivory-fixed);
  font-weight: 500;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-9);
}

.field input[readonly] {
  color: var(--ceramic-ivory-dim);
  cursor: not-allowed;
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--gold);
  outline: none;
}

.field--radio {
  border: none;
  padding: 0;
  margin: 0;
  flex-direction: row;
  gap: var(--s-6);
  align-items: center;
}

.field--radio label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ceramic-ivory);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 640px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.chart-form-submit {
  justify-self: start;
  margin-top: var(--s-3);
}

.form-error {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--vermilion-bright);
}

/* ==================== PRICING ==================== */
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.pricing-card--featured {
  border-color: var(--gold);
  transform: translateY(-8px);
  position: relative;
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: var(--s-5);
  background: var(--gold-metallic);
  color: var(--ink-fixed);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
}

.price {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold-ink);
  /* Cormorant Garamond dùng old-style figures theo mặc định — số "0" dễ nhầm
     với chữ "o". Ép lining-nums để giá tiền luôn rõ ràng. */
  font-variant-numeric: lining-nums;
}

.price span {
  font-size: var(--fs-small);
  color: var(--ceramic-ivory-dim);
  font-family: var(--font-body);
}

.pricing-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  color: var(--ceramic-ivory-dim);
  font-size: var(--fs-small);
  flex: 1;
}

.pricing-list li::before {
  content: "—";
  color: var(--gold-ink);
  margin-right: var(--s-2);
}

@media (max-width: 900px) {
  .pricing-card--featured {
    transform: none;
  }
}

/* ==================== EXPERTS + REVIEWS ==================== */
#experts {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Tranh thủy mặc hổ làm nền — thêm chất huyền bí Đông Á cho khối "được tin
   tưởng", scrim tối phía trên để chữ giữ đủ tương phản trên nền ảnh bận rộn. */
/* Ảnh gốc (tranh lụa) có tỉ lệ ~4:3 trong khi section rất rộng (~21:9) —
   full-bleed cover luôn phải cắt bớt chiều cao, để lại nhiều khoảng giấy
   trống dù zoom kiểu gì. Thay vào đó hiện TRỌN VẸN bức tranh, thu nhỏ lại
   như một bức thủy mặc treo góc phòng, mờ dần vào nền — gọn hơn hẳn so với
   full-bleed và không phải hy sinh bố cục gốc. */
.experts-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: min(48%, 640px);
  height: 100%;
  object-fit: contain;
  object-position: top right;
  opacity: 0.4;
  z-index: -2;
  mask-image: linear-gradient(to left, black 35%, transparent 92%);
  -webkit-mask-image: linear-gradient(to left, black 35%, transparent 92%);
}

@media (max-width: 900px) {
  .experts-bg {
    width: 100%;
    opacity: 0.22;
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
  }
}

.experts-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--ink-surface) 0%,
    var(--surface-veil) 32%,
    var(--surface-veil) 68%,
    var(--ink-surface) 100%
  );
  z-index: -1;
}

/* Bảo hiểm tương phản cho tiêu đề nằm trực tiếp trên nền tranh hổ (không có
   card riêng như phần bio chuyên gia). */
#experts .section-head h2,
#experts .section-head p {
  text-shadow: 0 2px 12px rgba(10, 11, 13, 0.7);
}

.long-an {
  position: absolute;
  top: var(--s-7);
  right: var(--s-7);
  width: 132px;
  height: 132px;
  color: var(--vermilion);
  opacity: 0.16;
  transform: rotate(-9deg);
  pointer-events: none;
}

@media (max-width: 900px) {
  .long-an {
    width: 88px;
    height: 88px;
    top: var(--s-5);
    right: var(--s-5);
    opacity: 0.13;
  }
}

.expert-card {
  position: relative;
  text-align: center;
  /* Bo góc lệch — mềm mại kiểu nét cọ tay thay vì hình chữ nhật đều tăm tắp. */
  border-radius: 22px 10px 22px 10px;
}

/* Wrapper riêng cho glow — ::before không render trên phần tử thay thế
   (<img>), nên quầng mực phải đặt trên 1 span bọc ngoài thay vì trên chính
   ảnh chân dung. */
.expert-avatar-frame {
  position: relative;
  display: inline-block;
  margin: 0 auto var(--s-4);
}

.expert-avatar-frame::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent 70%);
  filter: blur(8px);
  z-index: -1;
}

.expert-avatar {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-full);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}

.marquee {
  margin-top: var(--s-9);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: var(--s-5);
  width: max-content;
  /* 10 thẻ thay vì 3 — kéo dài thời gian để tốc độ trôi (px/s) giữ nguyên cảm giác. */
  animation: marquee 95s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.review-card {
  width: 320px;
  flex: none;
  margin: 0;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid rgba(232, 227, 217, 0.12);
  background: rgba(232, 227, 217, 0.03);
}

.review-card p {
  font-size: var(--fs-small);
  color: var(--ceramic-ivory);
  margin-bottom: var(--s-4);
  max-width: none;
}

.review-card footer {
  font-size: var(--fs-small);
  color: var(--ceramic-ivory-dim);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.verified-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-sm);
  background: var(--vermilion);
  color: var(--ceramic-ivory);
  font-size: 0.65rem;
}

/* ==================== FAQ / ACCORDION ==================== */
.accordion {
  max-width: var(--content-narrow);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Khung + nền riêng cho từng câu hỏi — trước đây chỉ có 1 đường kẻ mờ
   (rgba ivory cố định) phân cách, gần như vô hình trên nền sáng và khiến
   các câu hỏi trôi nổi dính vào nhau, rối mắt. Dùng token bề mặt/viền
   phản ứng theme (giống .palace-card) để luôn đủ tương phản. */
.accordion-item {
  border: 1px solid var(--ink-glass-border);
  border-radius: var(--r-lg);
  background: var(--ink-surface);
  padding: var(--s-4) var(--s-5);
  transition: border-color var(--dur-base) var(--ease-expo);
}

.accordion-item[open] {
  border-color: var(--gold);
}

.accordion-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--ceramic-ivory);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-1);
  position: relative;
}

.accordion-item summary::-webkit-details-marker {
  display: none;
}

.accordion-item summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-expo);
}

.accordion-item[open] summary::after {
  transform: rotate(-135deg);
}

.accordion-item summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

.accordion-body p {
  margin-top: var(--s-3);
  color: var(--ceramic-ivory-dim);
  font-size: var(--fs-small);
  max-width: 60ch;
}

/* underline drawn under the open summary via ::before ink-stroke look */
.accordion-item[open] summary {
  color: var(--gold-ink);
}

/* ==================== FINAL CTA ==================== */
.cta-final {
  position: relative;
  padding-block: var(--s-10);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.cta-final-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.cta-final-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 13, 0.75), rgba(10, 11, 13, 0.92));
  z-index: -1;
}

.enso {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(60vw, 520px);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

/* Xoay chậm liên tục ("bay quanh") — translate căn giữa và rotate gộp
   chung trong keyframes vì animation ghi đè toàn bộ transform khi chạy,
   nếu tách riêng centering ở .enso sẽ bị animation đè mất lúc quay. */
.enso-spin {
  transform-origin: center center;
  animation: enso-spin 60s linear infinite;
}

@keyframes enso-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .enso-spin {
    animation: none;
    transform: translate(-50%, -50%);
  }
}

.cta-final-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

/* Bug đã sửa: color:var(--ivory-fixed) đặt trên .cta-final-content chỉ áp
   dụng qua kế thừa — nhưng rule "h2 { color: var(--ceramic-ivory) }" (base.css)
   khớp trực tiếp vào thẻ h2 nên có độ ưu tiên cao hơn giá trị kế thừa, đè
   mất màu cố định. Ở light mode (mặc định mới) --ceramic-ivory là mực đậm,
   khiến chữ đen chìm vào nền tối cố định của CTA cuối — phải khai báo thẳng
   trên chính thẻ h2 mới thắng được rule chung. */
.cta-final-content h2 {
  color: var(--ivory-fixed);
}

.cta-final-content p {
  color: var(--ivory-fixed-dim);
  max-width: 46ch;
}

/* ==================== FOOTER ==================== */
.footer {
  position: relative;
  /* isolation:isolate — cùng lý do với .section: z-index âm của
     .section-bg-image cần 1 stacking context cục bộ, không thì ảnh lọt ra
     ngoài và bị các section khác đè lên (xem giải thích ở .section). */
  isolation: isolate;
  background: var(--ink-black);
  border-top: 1px solid rgba(232, 227, 217, 0.1);
  padding-block: var(--s-8) var(--s-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
}

.footer-brand p {
  margin-top: var(--s-4);
  color: var(--ceramic-ivory-dim);
  font-size: var(--fs-small);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ceramic-ivory);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
}

.footer-col a,
.footer-col p {
  color: var(--ceramic-ivory-dim);
  font-size: var(--fs-small);
}

.footer-col a:hover {
  color: var(--gold-ink);
}

.footer-bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(232, 227, 217, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--muted);
}

.footer-legal {
  display: flex;
  gap: var(--s-5);
}

.footer-legal a:hover {
  color: var(--gold-ink);
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== reveal / stagger base state ==================== */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
}

.reveal-stagger.is-revealed > * {
  opacity: 1;
  transform: none;
}