/* DEBUG TẠM — cờ ?debug=noNavBlur/noBackdrop (xem DEBUG_DISABLED trong
   js/msobackup.js), phục vụ dò lỗi "nháy cuối section" (mso_FEATURE.md
   2026-08-20/21). Xoá cùng lúc dọn phần debug bên JS khi xác định xong. */
body.debug-no-nav-blur .nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

body.debug-no-backdrop * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@font-face {
  font-family: "Google Sans";
  src: url("../Font_GoogleSansM.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Rounded";
  src: url("../Font_SFProRoundedR.woff2") format("woff2"),
       url("../Font_SFProRoundedR.otf") format("opentype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #0b0b0d;
  --panel: #151517;
  --soft: #1d1d20;
  --ink: #f5f5f7;
  --muted: #c8c8c8;
  --line: rgba(255, 255, 255, .1);
  --blue: #2997ff;
  --green: #30d158;
  --warn: #ffd60a;
  --red: #ff453a;
  --orange: #ff8a00;
  --grad: linear-gradient(100deg, #e51d4f, #ff6200 17%, #ffd300 32%, #0fb900 49%, #029eff 66%, #1400eb 82%, #ff00ff);
  --chroma-color: var(--orange);
  --chroma-hue-start: 20;
  --btn: linear-gradient(135deg, #0071e3, #0077ed);
  --sel: rgba(41, 151, 255, .18);
  /* Khoảng chừa phía trên khi cuộn-tới 1 section (nav fixed che mất) — dùng
     chung cho scroll-margin-top của mọi section VÀ chiều cao .download-section
     (xem css bên dưới) để khớp nhau, tránh 1 nơi đổi mà nơi kia lệch. */
  --nav-offset: 1px;
  /* Màu nền 4 thẻ ảnh (Photos section, index2.html) — độc lập theme, không đổi theo dark/light */
  --card-blue:   #5a7ca8;
  --card-green:  #6b8e76;
  --card-brown:  #a9835f;
  --card-purple: #8670a8;
  /* Gradient cho 5 thẻ stat (Under the Hood, index2.html) — độc lập theme,
     nền luôn sáng nên chữ trong thẻ dùng màu tối cố định, không theo --ink.
     Đậm/bão hoà hơn bản pastel nhạt trước đó (2026-08-22, user báo nhìn
     "chìm" so với nền — nhạt kiểu này tương phản tốt với nền TỐI (gần đen)
     nhưng nhạt gần bằng nền SÁNG (#f8fafc) nên gần như hoà vào nền) — vẫn
     cùng tông màu, chỉ kéo đậm/rực hơn để nổi bật đều ở cả 2 theme. */
  --stat-mint:   linear-gradient(160deg, #b5f0cc, #4ed194);
  --stat-yellow: linear-gradient(160deg, #ffe27a, #ffc61a);
  --stat-blue:   linear-gradient(160deg, #b9d4ff, #5c9bff);
  --stat-peach:  linear-gradient(160deg, #ffcda3, #ff9640);
  --stat-pink:   linear-gradient(160deg, #edbdff, #cf7bf5);
  /* Gradient cho 5 gói giá (Pricing section) — độ "sang trọng" tăng dần theo
     tier: bạc (free) → xanh (3 tháng) → tím (6 tháng, phổ biến nhất) → vàng
     gold (1 năm) → cam-hồng sunset (Lifetime, cao nhất, thẻ thứ 5 lộ ra khi
     vuốt/cuộn sang phải — xem .pricing-scroll further down in this file). Độc lập
     theme, chữ trong thẻ dùng màu tối cố định. Dùng rgba (không phải hex
     đặc) vì thẻ có backdrop-filter blur kiểu "liquid glass" giống .nav — cần
     độ trong suốt để thấy được hiệu ứng blur nội dung phía sau, không phải
     màu đặc hoàn toàn. */
  --price-free: linear-gradient(160deg, rgba(236, 238, 243, .88), rgba(210, 214, 224, .88));
  --price-3mo:  linear-gradient(160deg, rgba(168, 202, 255, 0.88), rgba(49, 138, 255, 0.88));
  --price-6mo:  linear-gradient(160deg, rgba(203, 178, 255, 0.88), rgba(133, 66, 249, 0.88));
  --price-year: linear-gradient(160deg, rgba(255, 225, 144, 0.9),  rgba(255, 187, 41, 0.9));
  /* 3-stop (không phải 2-stop như 4 tier kia) -- deliberately richer/more
     saturated (gold -> orange -> rose) để tier cao nhất đọc rõ là "đắt giá
     hơn" cả --price-year thuần vàng, ngay cả khi chỉ nhìn thấy 1 lát mỏng
     lúc thẻ mới hé ra ở mép phải (--pricing-peek, further down in this file). */
  --price-lifetime: linear-gradient(160deg, rgba(255, 224, 138, .95), rgba(255, 138, 66, .92) 55%, rgba(255, 94, 140, .88));
  --shadow: 0 24px 70px rgba(0, 0, 0, .36);
  --inset: inset 0 1px rgba(255, 255, 255, .05);
  --r: 8px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shell: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Màu cố định KHÔNG theo theme (khác --warn/--orange/--ink ở trên, vốn tự
     đổi giá trị trong body[data-theme="light"]) — dùng cho các chi tiết
     phải giữ nguyên đúng sắc độ dù site đang ở theme nào (sao PRO badge,
     bong bóng quote cố định nền sáng, overlay chữ trên ảnh...). */
  --gold: #ffd60a;
  --fixed-offwhite: #f5f5f7;
  --scrollbar-track: var(--bg);
  --scrollbar-thumb: #3a3a3c;
  --scrollbar-thumb-hover: #545458;
  --toggle-track: #050505;
  --toggle-knob: #fff;
  --toggle-border: rgba(255, 255, 255, .78);
  --toggle-moon: #080b0f;
  --toggle-sun: #ffd60a;
  --fontsizeP: clamp(50px, 6vw, 60px);
  --fontsizeT: clamp(30px, 3vw, 36px);
}

body[data-theme="light"] {
  --bg: #f8fafc;
  --panel: #ffffff;
  --soft: #eef2f7;
  --ink: #111827;
  --muted: #4b5563;
  --line: rgba(17, 24, 39, .14);
  --blue: #0a84ff;
  --green: #0a84ff;
  --warn: #800020;
  --red: #800020;
  --grad: linear-gradient(100deg, #e51d4f, #ff6200 17%, #ffd300 32%, #0fb900 49%, #029eff 66%, #1400eb 82%, #ff00ff);
  --chroma-hue-start: 345;
  --btn: linear-gradient(135deg, var(--ink), #374151);
  --sel: rgba(10, 132, 255, .12);
  --shadow: 0 1px 2px rgba(17, 24, 39, .12);
  --inset: inset 0 1px rgba(255, 255, 255, .85);
  --scrollbar-track: #f8fafc;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  --toggle-track: #fff;
  --toggle-knob: var(--ink);
  --toggle-border: rgba(17, 24, 39, .72);
  --toggle-moon: var(--ink);
  --toggle-sun: #fff;
}

* {
  box-sizing: border-box;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--r-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-gradient);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  opacity: .6;
}

.scroll-snap-active .scroll-progress {
  transition: transform .15s linear;
}

html {
  /* scroll-behavior: smooth bị bỏ vì Lenis (vendor/lenis/) đã đảm nhiệm toàn bộ smoothing —
     giữ cả 2 cùng lúc sẽ cạnh tranh nhau và gây giật/lag, xem initLenis() trong msobackup.js */
  background: var(--bg);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color .38s var(--ease), color .32s var(--ease);
}

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

button {
  font: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  border-radius: var(--r);
}

.shell {
  width: min(var(--shell), calc(100% - 48px));
  margin-inline: auto;
}

.layout-grid {
  display: grid;
}

.text-display {
  font-family: var(--font-display);
  font-size: var(--fontsizeP);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 800;
}

.text-title {
  font-family: var(--font-display);
  font-size: calc(var(--fontsizeT)/2);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 700;
}

.text-body{
  font-family: var(--font-body);
}

.gradient-text {
  font-style: normal;
  color: transparent;
  background: var(--grad);
  background-clip: text;
  -webkit-background-clip: text;
}

.matrix-text {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.matrix-text .matrix-char {
  display: inline-block;
  color: transparent;
  background: var(--grad);
  background-size: var(--char-bg-size, 100% 100%);
  background-position: var(--char-bg-pos, 0% 0%);
  background-clip: text;
  -webkit-background-clip: text;
  opacity: .48;
  transform: translateY(-.12em);
  transition: opacity .18s var(--ease), transform .18s var(--ease), filter .18s var(--ease);
}

body[data-theme="light"] .matrix-text .matrix-char {
  color: transparent;
}

.matrix-text .matrix-char.matrix-settled {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.noise,
.download-glow {
  display: none;
}

.kicker{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
}

.nav-wrap {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: auto;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 8px 12px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
    border: 0px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  /* Ép trình duyệt giữ layer GPU riêng cho nav — nav fixed + backdrop-filter dễ bị
     nháy/flash khi nội dung phía sau cuộn nhanh (đặc biệt ảnh màu, section
     nhiều hạt/canvas) vì trình duyệt phải resample backdrop mỗi frame; layer
     riêng giúp compositor không phải tính lại toàn bộ mỗi lần. */
  will-change: backdrop-filter;
  transform: translateZ(0);
  width: max-content;
}

body[data-theme="light"] .nav {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2));
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 0px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-top: -25px;
  margin-bottom: -25px;
  text-decoration: none;
  cursor: pointer;
}

.nav-brand-logo.logo-light,
img.brand-logo.logo-light {
  display: none;
}

body[data-theme="light"] .nav-brand-logo.logo-dark,
body[data-theme="light"] img.brand-logo.logo-dark {
  display: none;
}

body[data-theme="light"] .nav-brand-logo.logo-light,
body[data-theme="light"] img.brand-logo.logo-light {
  display: block;
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    background .22s var(--ease),
    border-color .22s var(--ease);
  overflow: visible;
}

.nav-item .nav-icon {
  position: relative;
  display: flex;
  width: 20px;
  height: 20px;
  flex: none;
  line-height: 1;
  opacity: .78;
  color: var(--muted);
  transition: transform .22s var(--ease), opacity .2s var(--ease), color .2s var(--ease);
  pointer-events: none;
}

.nav-item .nav-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nav-item .nav-label {
      font-size: 100%;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--ink);
    text-transform: capitalize;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .2s var(--ease), color .2s var(--ease);
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transition: opacity .22s var(--ease);
  pointer-events: none;
}

.nav-item:hover,
.nav-item:focus-visible {
  background: color-mix(in srgb, var(--panel) 88%, rgba(255, 255, 255, 0.16));
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px) scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 10px 22px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(255, 255, 255, 0.04);
}

.nav-item:hover::before,
.nav-item:focus-visible::before {
  opacity: 1;
}

.nav-item:hover .nav-icon,
.nav-item:focus-visible .nav-icon {
  transform: scale(1.08);
  opacity: 1;
  color: var(--ink);
}

.nav-item:hover .nav-label,
.nav-item:focus-visible .nav-label {
  opacity: 1;
  color: var(--ink);
}

.nav-item.active {
  background: color-mix(in srgb, var(--blue) 20%, rgba(255, 255, 255, 0.1));
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
}

.nav-item.active .nav-icon,
.nav-item.active .nav-label {
  opacity: 1;
  color: var(--blue);
}

body[data-theme="light"] .nav-item:hover,
body[data-theme="light"] .nav-item:focus-visible {
  background: color-mix(in srgb, #ffffff 90%, rgba(0, 0, 0, 0.03));
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 22px rgba(17, 24, 39, 0.12),
    0 0 20px rgba(255, 255, 255, 0.6);
}

.theme-toggle .nav-icon .icon-sun,
.theme-toggle .nav-icon .icon-moon {
  opacity: 1;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.theme-toggle .nav-icon .icon-moon {
  opacity: 0;
  transform: rotate(-40deg) scale(.7);
}

body[data-theme="light"] .theme-toggle .nav-icon .icon-sun {
  opacity: 0;
  transform: rotate(40deg) scale(.7);
}

body[data-theme="light"] .theme-toggle .nav-icon .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

@media (max-width: 900px) {
  .nav {
    gap: 14px;
    padding: 6px 8px;
  }
  .nav-item {
    height: 40px;
    padding: 0 10px;
    gap: 6px;
    border-radius: 12px;
  }
  .nav-item .nav-icon {
    width: 17px;
    height: 17px;
  }
  .nav-item .nav-label {
    font-size: 11px;
  }
  .nav-brand {
    width: 80px;
    height: 80px;
    margin-top: -27px;
    margin-bottom: -27px;
  }
}

.floating-download {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 24px 9px 10px;
  border: 3px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 17px;
  font-weight: 800;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  translate: 0 var(--floating-download-shift, 0);
  transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1), translate .25s var(--ease);
}

body.hero-ready .floating-download {
  opacity: var(--floating-download-opacity, 1);
  pointer-events: auto;
}

/* Tạm ẩn nút Download nổi góc phải dưới — nav đã có mục "Download" thay thế */
.floating-download {
  display: none;
}

.floating-download:hover {
  transform: translateY(-5px) scale(1.025);
}

.floating-download:active,
.button:active,
.download-button:active,
button:active {
  transform: translateY(0) scale(.94);
  transition-duration: .08s;
}

.floating-download-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-size: 23px;
}

/* .tour-button gộp chung vào rule này (không chỉ .floating-download) — nút Tour
   nổi cố định góc dưới-phải đè lên đúng chỗ 2 link "Privacy Policy"/"Refund
   Policy" trong .footer-bottom khi cuộn tới cuối trang (index.html, thêm
   2026-08-22) — ẩn cùng lúc với floating-download vì cùng điều kiện "đã cuộn
   tới section tải về" là hợp lý (đằng nào cũng không cần bấm Start Tour lúc
   đã ở cuối trang). */
body.floating-download-hidden .floating-download,
body.floating-download-hidden .tour-button {
  visibility: hidden;
  pointer-events: none;
}

/* ── TOUR BUTTON — "Start Tour", xem initTour()/TOUR_CONFIG trong msobackup.js ──
   Dùng lại đúng công thức nền kính mờ (gradient + backdrop-filter + box-shadow)
   của .nav để đồng bộ ngôn ngữ thị giác toàn trang, dark/light theme tự ăn theo. */
.tour-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px 0 8px;
  border: 0px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .35s var(--ease);
}

body[data-theme="light"] .tour-button {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2));
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 0px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}

.tour-button:hover,
.tour-button:focus-visible {
  transform: translateY(-3px) scale(1.03);
}

.tour-button:active {
  transform: translateY(0) scale(.95);
  transition-duration: .08s;
}

.tour-button-icon {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bg);
}

.tour-button-icon svg {
  position: absolute;
  width: 15px;
  height: 15px;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.tour-icon-play {
  transform: translateX(1px); /* bù lệch quang học của tam giác play */
}

.tour-icon-stop {
  opacity: 0;
  transform: scale(.5);
}

.tour-button.is-touring .tour-icon-play {
  opacity: 0;
  transform: scale(.5);
}

.tour-button.is-touring .tour-icon-stop {
  opacity: 1;
  transform: scale(1);
}

.tour-button-label {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .tour-button-label {
    display: none;
  }

  .tour-button {
    padding: 0 8px;
  }
}

/* ── TOUR INTRO — overlay tối 30% + slogan + đếm ngược trước khi tour cuộn ──
   Xem playIntro() bên trong initTour() trong msobackup.js. Nền luôn là lớp phủ
   đen nhẹ cố định (không đổi theo dark/light theme) để chữ trắng luôn đọc rõ. */
.tour-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}

.tour-intro.is-active {
  opacity: 1;
  pointer-events: auto; /* chặn click xuyên qua trong lúc đếm ngược */
}

/* Slogan và số đếm dùng chung 1 vị trí (absolute, chồng lên nhau, canh giữa
   màn hình) thay vì xếp cột — để khi slogan mờ đi rồi số đếm hiện ra, cảm giác
   là 1 lớp thay thế lớp kia đúng tại tâm màn hình, không bị lệch layout. */
.tour-intro-slogan,
.tour-intro-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .6);
}

.tour-intro-slogan {
  padding: 0 6vw;
  width: 80vw;
  margin-inline: auto;
  font-size: clamp(30px, 8.5vw, 108px);
  line-height: 1.05;
  letter-spacing: -.02em;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.tour-intro-slogan.is-visible {
  opacity: 1;
  transform: scale(1);
}

.tour-intro-count {
  font-size: clamp(70px, 16vw, 180px);
  letter-spacing: -.03em;
  opacity: 0;
  transform: scale(.6);
  /* Chỉ có tác dụng khi bỏ .is-visible mà KHÔNG gắn lại ngay (tức là lúc
     "Start" biến mất hẳn) — giữa các số 3→2→1 vẫn pop nảy bình thường vì JS
     bỏ rồi gắn lại .is-visible ngay trong cùng 1 tick, transition chưa kịp
     render frame nào thì animation pop đã chạy đè lên. */
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.tour-intro-count.is-visible {
  animation: tourCountPop .55s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes tourCountPop {
  0%   { opacity: 0; transform: scale(.5); }
  55%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tour-intro-count.is-visible {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
}

.hero-scene {
  height: 170vh;
  position: relative;
}

.scene-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 72%, #1c1c1f, #101012 42%, #0b0b0d 74%);
}

body[data-theme="light"] .scene-sticky {
  background: radial-gradient(circle at 50% 72%, #fff, #f7f7f4 48%, #ececea 78%);
}

.scene-grid {
  position: absolute;
  inset: 45% -10% -30%;
  opacity: .12;
  background-image: linear-gradient(var(--sel) 1px, transparent 1px), linear-gradient(90deg, var(--sel) 1px, transparent 1px);
  background-size: 70px 70px;
  transform: perspective(500px) rotateX(64deg) scale(1.25);
  mask-image: linear-gradient(to bottom, transparent, #000 45%);
}

.hero-copy {
  position: relative;
  z-index: 5;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-typewriter .type-char {
  display: inline-block;
  position: relative;
  will-change: opacity, transform, filter;
  transition: none;
}

.hero-typewriter .gradient-text .type-char {
  background: var(--grad);
  background-size: var(--char-bg-size, 100% 100%);
  background-position: var(--char-bg-pos, 0% 0%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

body[data-theme="light"] .hero-typewriter .gradient-text .type-char {
  color: transparent;
}

.typewriter-caret {
  position: absolute;
  width: 5px;
  height: 0.9em;
  border-radius: 99px;
  background: var(--orange);
  animation: caretBlink 0.8s infinite;
  pointer-events: none;
  z-index: 10;
}

body[data-theme="light"] .typewriter-caret {
  background: linear-gradient(90deg, #e51d4f, #ff6200);
}

@keyframes caretBlink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: .52;
}

body[data-theme="light"] .hero-canvas {
  opacity: .40;
}

.app-stage {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -190px;
  width: min(1540px, 94vw);
  perspective: 1400px;
  transform: translateX(-50%);
  will-change: transform;
}

.app-window{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none; /* có aspect-ratio, không width — trong container flex dễ bị bóp về gần 0 nếu không khoá flex-shrink (xem mso_RULE.md) */
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow), var(--inset);
}

.app-window {
  width: 100%; /* cần width tường minh — chỉ aspect-ratio + flex:none chưa đủ để tránh bóp về 0 trong container flex column */
  aspect-ratio: 2.05/1;
  transform: rotateX(2deg);
  backdrop-filter: blur(20px);
}

.product-shot {
  aspect-ratio: 2524/1360;
}

.app-shot{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .65s var(--ease), transform .9s var(--ease), filter .6s var(--ease);
}

.app-shot {
  object-position: 50% 12%;
}

.app-shot-light{
  opacity: 0;
}

body[data-theme="light"] .app-shot-dark{
  opacity: 0;
}

body[data-theme="light"] .app-shot-light{
  opacity: 1;
}

body[data-theme="dark"] .app-shot-dark{
  opacity: 1;
}

.shot-reflection {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 18%, transparent 72%, rgba(136, 170, 255, .08));
}

main {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scroll-padding-top: 35vh;
}

main>:where(.section, .download-section) {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: var(--nav-offset);
  scroll-snap-align: start;
}

main.scroll-snap-active>:where(.section, .download-section) {
  scroll-snap-stop: always;
}

@media (prefers-reduced-motion: reduce) {
  main {
    scroll-snap-type: none;
  }
}

/* "Mỗi nội dung là 1 trang" (xem mso_RULE.md) — mọi section tối thiểu cao đúng
   1 màn hình để khi snap tới, không để lộ khoảng trống trên/dưới. min-height
   chỉ set SÀN, section nào nội dung tự nhiên cao hơn 100vh vẫn không bị ảnh
   hưởng. Section nào bị đẩy cao hơn nội dung thật (padding trống nhiều) thì
   nên làm to hình/chữ bên trong cho cân đối thay vì để trống — xem ví dụ
   .tech-card (Under the Hood) tăng cỡ thay vì chỉ thêm padding.
   Trừ luôn --nav-offset (cùng lý do đã áp dụng cho .download-section):
   scroll-margin-top đẩy điểm neo xuống --nav-offset khi cuộn/snap/bấm nav
   tới section, nhưng box vẫn cao đúng 100vh — nên trước đây đúng
   --nav-offset (60px) cuối section luôn lọt xuống dưới màn hình. Section có
   nội dung căn giữa hồi trước tưởng "vô hại" vì tưởng còn dư đệm, nhưng đo
   thật bằng Playwright cho thấy min-height luôn full 900px/900px viewport —
   không có dư, mọi section đều bị cắt mất khúc dưới như nhau. */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--nav-offset));
  padding: clamp(56px, 9vw, 112px) 0;
}
.scroll-text {
  color: var(--muted);
}

.scroll-text {
  display: inline-block;
  overflow: hidden;
}

.scroll-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  color: var(--muted) !important;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.scroll-text.chroma-text .char {
  color: transparent !important;
  background: var(--grad);
  background-size: var(--char-bg-size, 100% 100%);
  background-position: var(--char-bg-pos, 0% 0%);
  background-clip: text;
  -webkit-background-clip: text;
}

.stats-grid {
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.stat {
  padding: 42px;
  border-right: 1px solid var(--line);
}

.stat:first-child {
  padding-left: 0;
}

.stat:last-child {
  border: 0;
}

.stat strong {
  display: block;
  font: 800 clamp(36px, 4vw, 58px)/1 var(--font-display);
  letter-spacing: -.05em;
}

.stat strong span {
  font-size: .45em;
  color: var(--muted);
}

.stat>span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.backup-story {
  height: 500vh;
  position: relative;
  background: linear-gradient(180deg, var(--bg), var(--panel) 18% 82%, var(--bg));
}

.story-step {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-content: start;
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
  transition: .45s var(--ease);
}

.story-step.active {
  opacity: 1;
  transform: none;
}

.story-step>span {
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--green) 50%, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green);
  font-size: 8px;
}

.story-step strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}

.story-step p {
  max-width: 320px;
  margin: 0;
  color: var(--muted);
}

.backup-visual-wrap {
  position: relative;
  perspective: 1400px;
  contain: layout paint;
}
.version-row.latest>b{
  background: var(--grad);
}

.backup-story.story-step-0 .backup-screen>img {
  transform: scale(1.42);
}

.backup-story.story-step-1 .backup-screen>img {
  transform: scale(1.12);
  filter: brightness(.55);
}

.backup-story.story-step-2 .backup-screen>img {
  filter: brightness(.42);
}

.backup-story.story-step-3 .backup-screen>img {
  filter: brightness(.4);
}

.backup-story.story-step-4 .backup-screen>img {
  filter: brightness(.36);
}

body[data-theme="light"] .backup-story .backup-screen>img {
  filter: none !important;
}
.pricing-section,
.download-section{
  background: var(--bg);
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-bottom: 40px;
}

.display-title {
  margin: 8px 0 0;
}

.section-heading>p,
.download-inner>p:not(.kicker),
.footer-brand p,
.footer-contact p,
.footer-links,
.download-note {
  color: var(--muted);
}

.bento-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.feature-card,
.price-card,
.widget-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow), var(--inset);
}

.feature-card {
  min-height: 240px;
  padding: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .3s, transform .3s var(--ease);
  transform-style: preserve-3d;
}

.card-top {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 8px;
  color: var(--muted);
}

.card-copy {
  position: relative;
  z-index: 2;
  margin-top: auto;
  font-size: 90%;
}

.card-copy h3 {
  margin: 0 0 6px;
}

.card-copy p {
  max-width: 490px;
  margin: 0;
  color: var(--muted);
}

.wave {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 170px;
  height: 60px;
  background: linear-gradient(90deg, transparent, var(--sel), transparent);
  clip-path: polygon(0 55%, 8% 47%, 16% 62%, 24% 20%, 32% 78%, 40% 43%, 48% 50%, 56% 31%, 64% 69%, 72% 42%, 80% 56%, 88% 50%, 100% 53%, 100% 57%, 88% 54%, 80% 61%, 72% 47%, 64% 74%, 56% 36%, 48% 54%, 40% 48%, 32% 83%, 24% 25%, 16% 67%, 8% 52%, 0 60%);
}

.shield {
  width: 100px;
  height: 115px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--bg);
  font-size: 38px;
  clip-path: polygon(50% 0, 93% 18%, 85% 76%, 50% 100%, 15% 76%, 7% 18%);
}

.ok {
  color: var(--green);
}

.warn {
  color: var(--warn);
}

.tabs {
  display: flex;
  gap: 24px;
  margin: 35px 0 55px;
  border-bottom: 1px solid var(--line);
}

.tab {
  position: relative;
  padding: 20px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: clamp(25px, 3vw, 42px);
  letter-spacing: -.045em;
}

.tab span {
  font-weight: 700;
}

.tab.active {
  color: var(--ink);
}

.tab.active:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--ink);
}

.tab-panel {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  min-height: 590px;
}
.duplicate-mock {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: min(56vh, 580px);
  overflow: hidden;
  border-radius: var(--r-lg);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.dup-tabs .active {
  color: var(--ink);
  border-bottom: 2px solid var(--blue);
}

.dup-file.selected {
  background: var(--sel);
}

.dup-file.selected>i {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.scheduler-section {
  overflow: hidden;
}

.widget-stack {
  height: 440px;
  position: relative;
  perspective: 1000px;
  contain: layout paint;
}

.widget-card {
  position: absolute;
  border-radius: 22px;
  padding: 22px;
}

@keyframes float {
  50% {
    transform: translateY(-9px);
  }

}

.pricing-heading {
  text-align: center;
  margin-bottom: 28px;
}

/* ── PRO highlight — nét vẽ khung bo góc chạy quanh chữ + hiệu ứng sao vàng ── */
.pro-highlight {
  position: relative;
  z-index: 0; /* tạo stacking context riêng để nét vẽ/fill (z-index âm) luôn đứng sau chữ */
  display: inline-block;
}

.pro-highlight-svg {
  position: absolute;
  inset: calc(var(--pro-pad, 8px) * -1);
  width: calc(100% + var(--pro-pad, 8px) * 2);
  height: calc(100% + var(--pro-pad, 8px) * 2);
  overflow: visible;
  pointer-events: none;
  z-index: -1; /* nét vẽ + fill đứng sau nội dung chữ của .pro-highlight-text */
  opacity: 1;
  transition: opacity .15s var(--ease);
}

/* Tắt (ẩn, KHÔNG xoá DOM) khung vẽ tay trong lúc đang cuộn — updateProHighlight()
   tính getBoundingClientRect() cho mọi card mỗi frame cuộn, khá tốn nếu trang
   nhiều card, dễ gây giật/lag. Xem is-scrolling toggle trong msobackup.js. */
body.is-scrolling .pro-highlight-svg {
  opacity: 0;
  transition: none; /* tắt ngay lập tức lúc bắt đầu cuộn, không chờ transition */
}

.pro-highlight-svg.is-above {
  z-index: 3; /* nổi trên cùng — dùng cho card có nội dung che kín (vd ảnh full-bleed) */
}

.pro-highlight-path {
  fill: var(--pro-color, var(--gold));
  fill-opacity: 0; /* chỉ fill kín màu vàng sau khi nét đã nối kín — xem class .is-filled */
  stroke: var(--pro-color, var(--gold));
  stroke-width: var(--pro-stroke-width, 2.5px);
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pro-color, var(--gold)) 70%, transparent));
  transition: fill-opacity .4s var(--ease);
}

.pro-highlight-path.is-filled {
  fill-opacity: var(--pro-fill-opacity, .22);
}

.pro-seam-star {
  position: absolute;
  left: var(--pro-seam-x, 50%);
  top: var(--pro-seam-y, 0);
  translate: -50% -50%;
  z-index: 2; /* nổi trên cả chữ khi bung ra tại điểm nối */
  color: var(--pro-star-color, #fff6cf);
  font-size: var(--pro-star-size, 16px);
  pointer-events: none;
  text-shadow: 0 0 10px color-mix(in srgb, var(--pro-star-color, #fff6cf) 90%, transparent);
  opacity: 0;
  transform: scale(0) rotate(0deg);
}

.pro-seam-star.is-active {
  animation: pro-star-pop var(--pro-pop-duration, 550ms) var(--ease) forwards;
}

@keyframes pro-star-pop {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  45%  { opacity: 1; transform: scale(1.6) rotate(18deg); }
  70%  { opacity: 1; transform: scale(1.05) rotate(-10deg); }
  100% { opacity: 0; transform: scale(0.85) rotate(0deg); }
}

.pro-sparkle {
  position: absolute;
  left: var(--pro-seam-x, 50%);
  top: var(--pro-seam-y, 0);
  translate: -50% -50%;
  z-index: 2; /* nổi trên cả chữ khi bắn ra */
  color: var(--pro-star-color, #fff6cf);
  font-size: var(--sp-size, 8px);
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 0 5px color-mix(in srgb, var(--pro-star-color, #fff6cf) 80%, transparent);
  animation: pro-sparkle-burst var(--sp-duration, 2000ms) var(--sp-delay, 0ms) cubic-bezier(.16, .84, .44, 1) forwards;
}

@keyframes pro-sparkle-burst {
  0%   { opacity: 1; transform: translate(0, 0) scale(.9) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.15) rotate(var(--rot)); }
}

@media (prefers-reduced-motion: reduce) {
  .pro-seam-star.is-active,
  .pro-sparkle {
    animation: none;
    opacity: 0;
  }
}

.pricing-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 970px;
  margin: auto;
}

.price-card {
  padding: 26px 28px;
}

.price-card.featured {
  border-color: var(--blue);
}

/* 4 gói giá — mỗi gói 1 gradient riêng (xem --price-* trong :root), độ "sang
   trọng" tăng dần theo tier. Nền luôn sáng nên toàn bộ chữ/border/nút bên
   trong đổi sang màu tối cố định, không theo --ink/--muted/--green (vốn đổi
   theo theme) — chọn theo attribute selector để không phải lặp lại rule cho
   từng modifier màu. */
.price-card--free { background: var(--price-free); }
.price-card--3mo  { background: var(--price-3mo); }
.price-card--6mo  { background: var(--price-6mo); }
.price-card--year { background: var(--price-year); }
.price-card--lifetime { background: var(--price-lifetime); }

/* --btn-accent — 1 biến CSS duy nhất mỗi tier, lấy đúng tông đậm hơn trong
   chính gradient --price-* của card đó (không bịa màu mới). Khai báo trên
   .price-card--* nên TỰ KẾ THỪA xuống mọi phần tử con qua cascade — nút
   .button-ghost bên trong (further down in this file) chỉ cần đọc var(--btn-accent) là
   tự động đổi màu theo đúng card chứa nó, không cần viết riêng CSS cho từng
   nút/từng tier. */
.price-card--free { --btn-accent: rgb(210, 214, 224); }
.price-card--3mo  { --btn-accent: rgb(119, 178, 254); }
.price-card--6mo  { --btn-accent: rgb(161, 109, 252); }
.price-card--year { --btn-accent: rgb(246, 185, 55); }
.price-card--lifetime { --btn-accent: rgb(255, 158, 87); }

/* ── LIFETIME — thẻ giá cao nhất, cố tình "bắt mắt" hơn hẳn 4 thẻ kia vì nó
   nằm ngoài vùng nhìn thấy ban đầu (mép phải, xem .pricing-scroll further
   down in this file) và phải tự "mời gọi" người xem vuốt/cuộn tới thay vì chỉ
   đứng yên chờ được thấy. 2 lớp hiệu ứng, cả 2 đều tắt dưới
   prefers-reduced-motion (media query cuối file này):
   1. Viền glow nhịp đập chậm (lifetimeGlow) — khác hẳn viền tĩnh của 4 thẻ
      còn lại, để dù chỉ thấy 1 lát mép thẻ cũng nhận ra ngay "có gì đó khác
      thường" đang nhấp nháy ở đó.
   2. Dải sáng chạy chéo (lifetimeSheen, ::after) — mô phỏng ánh kim loại/
      satin chạy qua bề mặt kiểu thẻ tín dụng cao cấp, KHÔNG dùng để tô màu
      (::after chỉ là 1 lớp overlay trắng mờ chạy qua, màu nền thật vẫn là
      --price-lifetime phía dưới) nên không xung đột với quy tắc "chữ luôn
      đọc theo màu tối cố định" của .price-card[class*="price-card--"]. */
.price-card--lifetime {
  animation: lifetimeGlow 2.6s ease-in-out infinite;
}

.price-card--lifetime::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  /* mix-blend-mode:soft-light -- BRIGHTENS whatever's underneath instead of
     painting flat white over it, so the sweep still reads as "light glinting
     off the surface" without ever washing out the price/feature text it
     passes over (this pseudo-element unavoidably stacks above the card's
     own non-positioned text content -- any `position`ed layer does, per
     CSS's own stacking order -- soft-light is what keeps that acceptable). */
  mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .55) 54%, transparent 68%);
  background-size: 220% 220%;
  background-position: 120% 0%;
  animation: lifetimeSheen 3.2s ease-in-out infinite;
}

@keyframes lifetimeGlow {
  0%, 100% { box-shadow: var(--shadow), inset 0 1.5px 1px rgba(255, 255, 255, .6), inset 0 -1.5px 1px rgba(0, 0, 0, .1), 0 0 0 rgba(255, 138, 66, 0); }
  50%      { box-shadow: var(--shadow), inset 0 1.5px 1px rgba(255, 255, 255, .6), inset 0 -1.5px 1px rgba(0, 0, 0, .1), 0 0 34px rgba(255, 138, 66, .55); }
}

@keyframes lifetimeSheen {
  0%   { background-position: 130% 0%; }
  50%  { background-position: -30% 0%; }
  100% { background-position: -30% 0%; }
}

/* Ruy băng "LIFETIME" — khác hẳn dáng pill tròn của .popular (dùng cho
   "PHỔ BIẾN" ở thẻ 6 tháng): góc bo lệch kiểu ruy băng dán chéo, để không
   bị nhầm là "cũng phổ biến như thẻ kia" — đây là tín hiệu "cao cấp nhất",
   không phải "được chọn nhiều nhất". */
.price-card--lifetime .popular {
  right: auto;
  left: 24px;
  border-color: rgba(20, 33, 12, .35);
  background: rgba(20, 33, 12, .85);
  color: #ffd699;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .price-card--lifetime { animation: none; }
  .price-card--lifetime::after { animation: none; display: none; }
}

/* Viền "liquid glass" — cùng ngôn ngữ thị giác với .nav (border trắng mờ dày
   hơn bình thường + backdrop-filter blur + inset sáng/tối mô phỏng ánh sáng
   phản chiếu trên mặt kính), thay cho border 1px mỏng mặc định. */
.price-card[class*="price-card--"] {
  border: 3px solid rgba(255, 255, 255, .55);
  color: #14210c;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow), inset 0 1.5px 1px rgba(255, 255, 255, .6), inset 0 -1.5px 1px rgba(0, 0, 0, .1);
}

.price-card[class*="price-card--"] p,
.price-card[class*="price-card--"] > div > span {
  color: rgba(20, 33, 12, .65);
}

.price-card[class*="price-card--"] ul {
  border-top-color: rgba(20, 33, 12, .16);
}

.price-card[class*="price-card--"] li b {
  color: rgba(20, 33, 12, .8);
}

.price-card[class*="price-card--"] li.off,
.price-card[class*="price-card--"] li.off b {
  color: rgba(20, 33, 12, .4);
}

.price-card[class*="price-card--"] .button {
  border-color: rgba(20, 33, 12, .3);
  background: rgba(255, 255, 255, .55);
  color: #14210c;
}

.price-card[class*="price-card--"] .button-primary,
.price-card[class*="price-card--"] .button:hover {
  background: #14210c;
  color: #fff9ec;
  border-color: #14210c;
}

.price-card[class*="price-card--"] .popular {
  border-color: rgba(20, 33, 12, .3);
  background: rgba(255, 255, 255, .5);
  color: #14210c;
}

.popular {
  position: absolute;
  right: 24px;
  top: 24px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--blue);
  font-size: 8px;
  letter-spacing: .13em;
}

.price-card p {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .14em;
}

.price-card h3 {
  margin: 8px 0 0;
  font-size: 26px;
}

.price-card>div>span {
  color: var(--muted);
  font-size: 12px;
}

.price-card ul {
  margin: 8px 0;
  padding: 8px 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.price-card li {
  padding: 7px 0;
  font-size: 15px;
}

.price-card li b {
  margin-right: 9px;
  color: var(--green);
}

.price-card li.off,
.price-card li.off b {
  color: var(--muted);
}

.price-card .button {
  width: 100%;
  min-height: 46px;
}

.button,
.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-weight: 800;
  transition: .3s var(--ease);
}

.button {
  gap: 24px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: var(--r-pill);
  font-size: 17px;
}

.button-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow);
}

.button:hover,
.download-button:hover {
  transform: translateY(-5px) scale(1.025);
  background: var(--ink);
  color: var(--bg);
}

/* Trang cuối gộp cả CTA tải app lẫn footer thành 1 section cao đúng 1 màn
   hình — CTA canh giữa phần không gian còn lại phía trên, footer luôn nằm
   sát đáy màn hình, không cần cuộn thêm mới thấy hết. Trừ luôn --nav-offset
   (khác các .section thường): section khác có nội dung CĂN GIỮA nên phần
   60px bị nav che chỉ ăn vào khoảng đệm trên/dưới, không ai để ý; còn
   footer ở đây PIN CỨNG sát mép dưới (không đệm) nên nếu vẫn để đúng 100vh,
   sau khi cuộn-tới (bị đẩy xuống 60px vì scroll-margin-top) thì đúng 60px
   cuối — tức nguyên dòng copyright — sẽ lọt ra ngoài màn hình dưới. */
.download-section {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-offset));
  text-align: center;
}

.download-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .7;
}

.download-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 9vw, 96px) 0;
}

.download-section .site-footer {
  position: relative;
  z-index: 1;
  flex: none; /* giữ chiều cao tự nhiên, luôn nằm sát đáy nhờ .download-inner chiếm hết phần dư (flex:1) phía trên */
}

.download-inner h2 {
  width: 50vw;
  max-width: 820px;
  margin-inline: auto;
  padding-block: 2vh;
  font-size: var(--fontsizeP);
}

.download-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.download-button {
  min-width: 260px;
  min-height: 60px;
  padding: 15px 20px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 35px 1fr auto 20px;
  align-items: center;
  gap: 9px;
  text-align: left;
}

/* Số lượt tải rút gọn (1, 100, 1.2K, 1M...) -- js/msobackup.js
   initDownloadCounts(); ẩn (hidden) cho tới khi có số từ server. */
.download-count {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  border: 1.5px solid currentColor;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.download-count[hidden] {
  display: none;
}

.download-button .os-icon {
  font-size: 29px;
}

.download-button .apple {
  font-size: 20px;
}

.download-button>span:nth-child(2) {
  font-size: 17px;
  line-height: 1.05;
}

.download-button small {
  display: block;
  margin-bottom: 4px;
  color: inherit;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.download-button em {
  font-style: normal;
  color: inherit;
}

/* Per explicit request ("bổ sung phần tặng key trial ... khoanh làm và làm
   nổi bật như ở trang cấp key"), restyled per 2 direct follow-ups: (1)
   "chữ đen nằm trong khung vàng, nút copy chỉ là biểu tượng, nằm kế bên
   khung"; (2) "gói gọn trong 1 hàng để 1 trang chứa luôn footer, thay
   label chữ bằng biểu tượng giỏ quà to hơn, nút copy nằm trong dãy code
   luôn" -- everything (gift glyph + key text + copy icon) is now ONE
   compact single-line row instead of a stacked label+box+button, short
   enough that .download-section (already exactly 1 viewport tall, see its
   own rule) still fits its footer without scrolling. Key box stays its
   own light, gold-bordered surface (not the page's dark panel tone) so
   dark text reads clearly regardless of which site theme is active --
   deliberately NOT color-mix with --panel/--ink the way most of this
   page's surfaces are, since this one specific box needs to stay
   light+dark-text in both themes. */
.download-trial-gift {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.download-trial-gift-icon {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--gold);
}

.download-trial-gift-key {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(340px, 72vw);
  background: color-mix(in srgb, var(--gold) 12%, #fff 88%);
  border: 1.5px solid color-mix(in srgb, var(--gold) 65%, transparent);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent) inset;
}

.download-trial-gift-key span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: #1a1406;
}

.download-trial-gift-copy {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 30%, #fff 70%);
  color: #1a1406;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.download-trial-gift-copy svg {
  width: 16px;
  height: 16px;
}

.download-trial-gift-copy:hover {
  background: color-mix(in srgb, var(--gold) 46%, #fff 54%);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .download-trial-gift {
    gap: 8px;
  }
  .download-trial-gift-icon {
    width: 1.4rem;
    height: 1.4rem;
  }
  .download-trial-gift-key {
    max-width: min(240px, 62vw);
  }
}

/* Feedback swap on click (js/msobackup.js's initDownloadTrialGiftCopy) --
   icon-only button has no text label left to say "Copied!" with, so the
   copy glyph itself briefly swaps to a checkmark instead. */
.download-trial-gift-copy .icon-copied {
  display: none;
  color: #1a7a3d;
}

.download-trial-gift-copy.is-copied .icon-copy {
  display: none;
}

.download-trial-gift-copy.is-copied .icon-copied {
  display: block;
}

.download-note {
  display: block;
  margin-top: 25px;
}

.site-footer {
  padding: 35px 0;
  background: var(--panel);
  font-size: 86%;
}

.footer-grid {
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 50px;
}

.footer-brand p,
.footer-contact p {
  margin-top: 22px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-links strong,
.footer-contact strong {
  margin-bottom: 4px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.footer-links a:hover,
.footer-contact a {
  color: var(--ink);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.reveal {
  opacity: 0;
  transform: translateY(32px) scale(.985);
  filter: blur(3px);
  transition: opacity .75s var(--ease), transform .9s var(--ease), filter .75s var(--ease);
  will-change: opacity, transform, filter;
}

.reveal.visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
a.wordmark {
    display: flex;
    align-content: center;
    align-items: center;
}
img.brand-logo {
    width: 64px;
}
@media (min-width:901px) {
  .hero-copy {
    align-items: flex-start;
    text-align: left;
  }

  .app-stage {
    top: 55vh;
    bottom: auto;
    width: min(68vw, 1100px);
    max-width: 68vw;
  }

  .section-heading>div,
  .section-heading .display-title {
    width: 50vw;
    max-width: 780px;
  }

  .section-heading>p {
    justify-self: end;
  }

  .pricing-heading {
    display: grid;
    align-content: center;
  }

  .pricing-heading .display-title {
    width: 80vw;
    max-width: 1200px;
    margin-inline: auto;
  }

}

@media (max-width:900px) {
  .hero-scene {
    height: 165vh;
  }

  .scene-sticky {
    min-height: 650px;
  }

  .hero-copy {
    padding-top: 120px;
  }

  .app-stage {
    width: 94vw;
    bottom: -90px;
  }

  .section-heading,
  .tab-panel{
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .bento-grid,
  .stats-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .stat,
  .stat:nth-child(2),
  .stat:last-child {
    padding: 25px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .duplicate-mock,
  .backup-visual-wrap {
    width: 100%;
  }

}

@media (max-width:600px) {

  .shell,
  main>:where(.feature-section, .deep-dive, .scheduler-section, .pricing-section)>.shell {
    width: min(100% - 30px, var(--shell));
  }

  .nav {
    padding: 6px 8px;
    gap: 10px;
  }

  .nav-item {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
  }

  .nav-item .nav-icon {
    width: 16px;
    height: 16px;
  }

  .nav-item .nav-label {
    display: none;
  }

  .nav-brand {
    width: 66px;
    height: 66px;
    margin-top: -22px;
    margin-bottom: -22px;
  }
  .display-title {
    font-size: clamp(32px, 9.5vw, 52px);
  }

  main>.section {
    padding-block: 64px;
  }

  .app-stage {
    width: 96vw;
    bottom: -20px;
  }

  .app-window {
    aspect-ratio: 1.55/1;
  }

  .app-shot {
    object-position: 64% 10%;
  }

  .feature-card {
    min-height: 480px;
    padding: 22px;
  }

  .tabs {
    gap: 20px;
  }

  .tab {
    font-size: 24px;
  }
  .duplicate-mock {
    height: 440px;
  }

  .widget-stack {
    height: 330px;
  }

  .price-card {
    padding: 27px;
  }

  .download-inner h2 {
    width: auto;
  }

  .download-actions {
    flex-direction: column;
    align-items: center;
  }

  .download-button,
  .button {
    width: 100%;
    max-width: 300px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }

  .shield {
    width: 76px;
    height: 90px;
  }

  .story-step strong {
    font-size: 17px;
  }

  .floating-download {
    right: 14px;
    bottom: 14px;
    min-height: 56px;
    padding: 7px 18px 7px 8px;
    font-size: 15px;
  }

  .floating-download-icon {
    width: 36px;
    height: 36px;
  }

}

@media (max-width:420px) {
  .display-title {
    font-size: clamp(28px, 8.5vw, 38px);
  }

  .kicker{
    font-size: 11px;
  }

  .price-card h3 {
    font-size: 24px;
  }

  .pricing-heading .display-title {
    font-size: clamp(24px, 7.5vw, 30px);
  }
}

@media (prefers-reduced-motion:reduce) {
  
/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-gradient);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  opacity: .6;
}

.scroll-snap-active .scroll-progress {
  transition: transform .15s linear;
}

html {
    scroll-behavior: auto;
  }

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

  .reveal,
  .reveal.visible {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .hero-scene {
    height: 100vh;
  }

  .backup-story {
    height: auto;
    padding: 60px 0;
  }

  .story-step {
    position: relative;
    opacity: 1;
    transform: none;
    margin-bottom: 20px;
  }

  .backup-story .backup-screen>img {
    transform: none;
    filter: none;
  }

  .backup-story:where(.dst-focus, .copy-progress, .versions-popup, .indexing-overlay, .fast-result) {
    display: none;
  }

}

/* Deduplication Text Animation System */
.dedup-char {
  display: inline-block;
  position: relative;
  color: var(--orange);
  transition: color 0.8s var(--ease), -webkit-text-stroke 0.8s var(--ease), opacity 0.8s var(--ease), filter 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: color, opacity, filter, transform;
}

.gradient-text .dedup-char {
  color: var(--orange);
}

.dedup-char.dedup-secondary.is-blinking {
  animation: dedupBlink 0.4s infinite alternate ease-in-out;
}

@keyframes dedupBlink {
  0% {
    opacity: 1;
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px rgba(255, 138, 0, 1));
    transform: scale(1.12);
  }

  100% {
    opacity: 0.5;
    color: #ffffff !important;
    filter: none;
    transform: scale(1);
  }
}

.dedup-char.dedup-secondary.is-hollow {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-stroke: 2.5px var(--orange);
  opacity: 0.85;
  filter: none;
  transform: none;
}

body[data-theme="light"] .dedup-char.dedup-secondary.is-hollow {
  -webkit-text-stroke: 2.5px #ff6200;
  opacity: 0.9;
}

.gradient-text .dedup-char.dedup-secondary.is-hollow {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-stroke: 2.5px var(--orange);
  opacity: 0.85;
}

body[data-theme="light"] .gradient-text .dedup-char.dedup-secondary.is-hollow {
  -webkit-text-stroke: 2.5px color-mix(in srgb, #ff6200 92%, transparent);
  opacity: 0.9;
}
/* ============================================================
   Merged from css/index2.css (2026-09-05) -- was a second file for
   landing-page components added later; kept loaded AFTER this file
   everywhere (cascade already relied on that order for a few
   overriding rules), so appending it here at the END preserves the
   exact same cascade result now that it is one file. Reuses the same
   :root / body[data-theme="light"] tokens declared above -- does not
   redeclare them.
   ============================================================ */

/**
 * index2.css — Bổ sung cho landing page phụ (index2.html)
 * Chỉ khai báo những component CHƯA có trong msobackup.css.
 * Toàn bộ màu sắc / font / khoảng cách đều tận dụng lại biến gốc
 * trong :root và body[data-theme="light"] của msobackup.css.
 */

/* ── NAV kiểu CoreShift ────────────────────────────────────────────────
   Chỉ đổi BỐ CỤC bên trong (.nav-cs override gap/padding/justify-content) —
   nền kính mờ/backdrop-blur/box-shadow/border-radius vẫn kế thừa nguyên
   từ .nav gốc trong msobackup.css (dark + light theme đều tự động ăn theo). */
/* .nav-wrap KHÔNG có width riêng (position:fixed, mặc định shrink-to-fit
   theo nội dung) — dùng max-width (không phải width cố định 1040px) để dock
   tự co khít theo nội dung thật (logo+link+nút, giờ ngắn hơn từ lúc dời 2 nút
   theme/ngôn ngữ ra ngoài — để width:1040px cố định trước đó tạo khoảng
   trống lớn giữa các nhóm, "dock quá dài" user báo), chỉ chặn KHÔNG cho vượt
   quá viewport ở màn hình hẹp. max-width dùng vw (không phải %) để tránh phụ
   thuộc vòng: .nav-cs (con) từng đặt width:% ngay trên chính .nav-wrap trong
   khi .nav-wrap lại auto-size THEO .nav-cs → browser resolve ra số tuỳ tiện,
   "Tải xuống" từng bị tràn ra ngoài dock vì bug này. */
.nav-wrap {
  max-width: calc(100vw - 40px);
}

.nav-cs {
  justify-content: space-between;
  gap: 20px;
  padding: 10px 10px 10px 22px;
}

.nav-cs-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--ink);
  text-decoration: none;
}

.nav-cs-logo-img {
  width: auto;
  height: 50px;
  object-fit: contain;
  pointer-events: none;
}

.nav-cs-logo-img.logo-light {
  display: none;
}

body[data-theme="light"] .nav-cs-logo-img.logo-dark {
  display: none;
}

body[data-theme="light"] .nav-cs-logo-img.logo-light {
  display: block;
}

.nav-cs-logo span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
}

.nav-cs-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-cs-links a {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease);
}

.nav-cs-links a:hover,
.nav-cs-links a:focus-visible {
  color: var(--ink);
}

.nav-cs-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* Thu gọn 2 nút toggle theme/language thành icon tròn nhỏ (thay vì .nav-item
   mặc định to hơn) — vẫn giữ class .nav-item để không mất CSS/JS hiện có
   (kích thước .nav-icon, hiệu ứng hover, toggle sun/moon...). */
.nav-cs-icon.nav-item {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}

/* ── NAV EXTRA — 2 nút theme/ngôn ngữ đứng NGOÀI khung kính "dock" (.nav-cs),
   neo cố định riêng sát mép phải. Tự có khung kính mờ riêng (copy đúng công
   thức của .nav gốc trong msobackup.css) vì .nav-item mặc định trong suốt,
   dựa vào nền .nav cha — đứng độc lập thì cần nền riêng để không "trôi". ── */
.nav-extra {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-theme="light"] .nav-extra {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}

/* ── LANGUAGE FLYOUT — rê chuột (hoặc bấm, cho thiết bị chạm) vào nút ngôn
   ngữ là hiện 5 lựa chọn. Xem wiring JS trong js/msobackup.js (initLanguageFlyout
   inline ở cuối file — lang-switcher/lang-option). ─────────────────────── */
.lang-switcher {
  position: relative;
}

/* top:100% liền sát nút (KHÔNG để hở khoảng trống) — hở dù chỉ vài px cũng đủ
   làm chuột "rớt ra" khỏi vùng :hover của .lang-switcher giữa lúc di từ nút
   xuống menu, khiến flyout tự đóng trước khi kịp bấm (bug user báo). Khoảng
   cách thị giác ~10px với nút vẫn giữ được bằng padding-top (padding vẫn tính
   vào vùng hover được, không giống margin/gap rỗng). */
.lang-flyout {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  width: max-content; /* vừa khít nội dung dài nhất (tên ngôn ngữ + dấu ✓), không cố định 1 số cứng */
  padding: 12px 6px 4px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(24, 24, 27, .96), rgba(14, 14, 16, .96));
  background-clip: padding-box;
  box-shadow: var(--shadow), inset 0 1px 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
  z-index: 101;
}

body[data-theme="light"] .lang-flyout {
  background: linear-gradient(165deg, rgba(255, 255, 255, .97), rgba(246, 248, 251, .97));
}

.lang-switcher:hover .lang-flyout,
.lang-switcher:focus-within .lang-flyout,
.lang-switcher.is-open .lang-flyout {
  opacity: 1;
  pointer-events: auto;
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.lang-option:hover,
.lang-option:focus-visible {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  outline: none;
}

.lang-option.is-active {
  color: var(--blue);
  font-weight: 800;
}

.lang-option.is-active::after {
  content: "✓";
  font-weight: 800;
}

.nav-cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}

.nav-cs-btn-ghost {
  background: color-mix(in srgb, var(--panel) 65%, transparent);
  border: 1px solid var(--line);
  color: var(--ink);
}

.nav-cs-btn-ghost:hover {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.nav-cs-btn-solid {
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow);
}

.nav-cs-btn-solid:hover {
  transform: translateY(-2px) scale(1.03);
}

@media (max-width: 760px) {
  .nav-cs {
    gap: 10px;
    padding: 8px 8px 8px 16px;
  }

  .nav-cs-links {
    display: none;
  }

  /* Dời nút theme/ngôn ngữ xuống DƯỚI dock thay vì đứng sát mép phải cùng
     hàng — ở mobile dock đã gần chiếm hết bề ngang (.nav-wrap:
     min(1040px, calc(100vw-40px))), đứng cùng hàng sẽ đè lên nút "Tải
     xuống" trong dock (bug user báo, xem ảnh chụp thật lúc debug). */
  .nav-extra {
    top: 78px;
    right: 20px;
    gap: 4px;
    padding: 4px;
    display: none;
  }
}

@media (max-width: 420px) {
  .nav-cs-btn-ghost {
    display: none;
  }
}

/* ── HERO 2 ─────────────────────────────────────────────────────────────
   Wrapper/visual dùng lại nguyên cơ chế .hero-scene/.scene-sticky/.app-stage
   có sẵn trong msobackup.css/js (crop đáy màn hình + phóng to khi cuộn) —
   chỉ style riêng phần copy/badge đặc thù của index2 ở đây. ────────────── */

/* .hero-canvas (msobackup.css) mặc định pointer-events:none — cần bật lại
   riêng cho #heroParticles để initRadialElasticField() (animationBG.js)
   nhận được hover chuột (hiệu ứng field bị kéo lệch theo chuột), canvas
   <canvas id="heroCanvas"> paper-planes ở index.html không cần việc này (nó
   lắng nghe pointermove trên window, không phải trên canvas). */
#heroParticles {
  pointer-events: auto;
}

/* initRadialElasticField() tự tạo <canvas> bên trong #heroParticles nhưng
   không tự set position — ép absolute/inset:0 để canvas luôn khớp đúng khung
   #heroParticles (phòng trường hợp layout cha có thay đổi nhỏ khiến canvas
   lệch khỏi vị trí). */
#heroParticles canvas {
  position: absolute;
  inset: 0;
}

.hero2-copy {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
}

.hero2-copy .display-title {
  margin: 18px 0 22px;
}

.hero2-copy .lede {
  max-width: 680px;
  margin: 0 auto;
  font-size: 19px;
  color: var(--muted);
}

.hero2-copy .lede + .lede {
  margin-top: 14px;
}

.hero2-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero2-os {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .02em;
}

.device-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 10rem;
  padding: 10px 16px;
  /*border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--inset);
  border-radius: var(--r-pill);
  */
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  animation: badgeFloat 4.5s ease-in-out infinite;
  width: 36vh;
  height: auto;
}

.device-badge em {
  font-style: normal;
  font-size: 18px;
}

/* Cả 2 badge neo gần mép TRÊN của .app-stage — phần luôn hiện dù ảnh bị crop
   đáy màn hình (xem .app-stage trong msobackup.css: bottom:-190px). */
.device-badge-phone {
  top: 6%;
  left: 5%;
}

@keyframes badgeFloat {
  50% { transform: translateY(-8px); }
}

.problem-card,
.feature-grid-6 .feature-card {
  justify-content: center;
}

.problem-card .card-copy,
.feature-grid-6 .card-copy {
  margin-top: 0;
}

.problem-card .card-copy p {
  color: var(--muted);
}

.problem-card .card-copy strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 15px;
}

.problem-card .card-copy em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  color: var(--blue);
  font-size: 14px;
}

/* ── PROBLEM CARDS — 3 cột cố định, nội dung chữ đặt trong khung trắng đổ
   bóng (theo ảnh tham khảo: khung "quote" kiểu speech-bubble ở trên, ảnh minh
   hoạ ở giữa không bọc khung, khung mô tả có icon nhỏ ở dưới). ─────────── */
#problems .bento-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* .bento-grid gốc (msobackup.css) đã tự về 1 cột ở @media(max-width:900px) —
   nhưng rule 3-cột riêng của #problems ở trên có độ đặc hiệu cao hơn hẳn
   (1 ID + 1 class) nên LUÔN đè mất rule responsive đó ở MỌI kích thước màn
   hình, kể cả mobile (bug user báo "ảnh chưa tự động xuống hàng"). Thêm lại
   đúng breakpoint 900px riêng cho #problems để khớp lại hành vi chung. */
@media (max-width: 900px) {
  #problems .bento-grid {
    grid-template-columns: 1fr;
  }
}

.problem-card .card-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.problem-quote,
.problem-desc {
  position: relative;
  width: 80%;
  background: var(--fixed-offwhite);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
}

.problem-quote {
  border-radius: 16px 16px 4px 16px;
}

.problem-quote::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--fixed-offwhite);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.problem-card .problem-quote strong {
  margin-bottom: 0;
  color: #1d1d20;
}

.problem-shot {
  width: 100%;
  max-width: 20vw;
  height: auto;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .3));
}

.problem-desc {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  justify-content: center;
}

.problem-card .problem-desc p {
  color: #4b5563;
  font-size: 90%;
}

/* ── FLOW DIAGRAM — dùng cho Smart Backup / Phone→PC ─────────────────── */
.flow-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow), var(--inset);
  padding: clamp(26px, 3vw, 40px);
}

.big-quote {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -.03em;
}

/* ── STORAGE CARD ──────────────────────────────────────────────────── */
.storage-card {
  position: relative;
  isolation: isolate;
  flex: none;          /* .section là flex column — không cho co lại (aspect-ratio + flex-shrink mặc định dễ bị bóp về gần 0) */
  width: 100%;
  max-width: 60vh;
  margin: 0 auto;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--panel);
}

.storage-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.storage-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: linear-gradient(180deg, rgba(11,11,13,.25), rgba(11,11,13,.72));
  color: var(--fixed-offwhite);
}

.storage-card-overlay span {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  opacity: .8;
}

.storage-card-overlay strong {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: -.04em;
}

.storage-card-overlay em {
  font-style: normal;
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(245,245,247,.3);
  font-size: 12px;
  letter-spacing: .04em;
}

/* ── PHOTO VISUAL — ảnh minh hoạ bo góc dùng chung ───────────────────── */
.visual-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* ── SPLIT 2 — layout 2 cột dùng lại cho nhiều section ───────────────── */
.split-2 {
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.split-2--top {
  gap: 24px;
  align-items: start;
}

.split-3 {
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: center;
}

/* ── SEARCH + DUPLICATES — ảnh minh hoạ bên phải (900_SearchPC.png) phóng to
   hẳn ra, neo sát đáy khung thay vì lơ lửng nhỏ giữa khoảng trống. ────────── */
#search-dup .layout-grid {
  /* .section{justify-content:center} canh giữa cả khối heading+grid trong
     100vh — margin-top:auto đẩy riêng hàng ảnh+search-demo này xuống sát đáy
     (trong phần không gian còn dư của flex column), thay vì đứng giữa. */
  margin-top: auto;
}

@media (min-width: 901px) {
  /* Chỉ áp desktop — dưới 900px, .split-3 tự về 1 cột (xem @media max-width:900px
     bên dưới), không cần tỉ lệ 2 cột này (và không được đè mất rule đó). */
  #search-dup .split-3 {
    /* Rộng hơn hẳn 2fr:1fr mặc định — .search-demo tự giới hạn max-width:460px
       nên cột phải dư ra bao nhiêu cũng không vỡ layout, dồn hết phần dư đó
       sang cho ảnh minh hoạ chính (theo yêu cầu "cho nó rộng ra"). */
    grid-template-columns: 2.6fr 1fr;
  }
  #search-dup .layout-grid {
  margin-top: 0;
  }
}

#search-dup .duplicate-mock {
  /* 48vh (không phải 60/72vh như 2 lần chỉnh trước) — 2 mức cao hơn từng làm cả
     section vượt quá 1 màn hình (100vh) ở màn hình thấp (~800px), phá quy tắc
     "mỗi section = 1 trang". 48vh đã to hơn hẳn 56vh/580px mặc định của
     .duplicate-mock gốc (vì cộng thêm section-heading phía trên vẫn đủ chỗ
     trong 100vh), đo thực tế bằng Playwright ở nhiều cỡ màn hình khớp lại 1
     màn hình đúng — xem mso_FEATURE.md 2026-08-21. */
  height: min(48vh, 520px);
  display: flex;
  align-items: flex-end; /* ảnh neo sát đáy khung, phần dư (nếu có) crop ở trên */
}

#search-dup .duplicate-mock img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* ── PHONE → PC — nội dung dồn hết bên trái, chỉ 1 ảnh bên phải (khác pattern
   .section-heading + .split-2 xếp chồng mặc định của các section khác). ──── */
.phone-pc-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.phone-pc-copy p {
  margin: 0;
}

/* ── POINT GRID — 4 thẻ ảnh màu (Photos section) ─────────────────────────
   Layout kiểu "khung tranh": mỗi thẻ 1 màu nền riêng (--card-*), chữ trắng ở
   trên, ảnh minh hoạ bám đáy thẻ, mờ dần lên trên để hoà vào màu nền. */
.point-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
  align-items: stretch;
}

.point {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 380px;
  padding: 22px;
  border-radius: var(--r-lg);
  color: #fff;
}

.point--blue   { background: var(--card-blue); }
.point--green  { background: var(--card-green); }
.point--brown  { background: var(--card-brown); }
.point--purple { background: var(--card-purple); }

.point-arrow {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: 15px;
  line-height: 1;
}

.point-copy {
  position: relative;
  z-index: 2;
}

.point strong {
  display: block;
  max-width: 80%;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
}

.point p {
  margin: 0;
  max-width: 80%;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}

.point-photo {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 58%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%);
          mask-image: linear-gradient(to bottom, transparent, #000 26%);
}

/* "4 thanh từ mép dưới màn hình trồi lên" — .reveal (msobackup.css) chỉ dịch
   32px (quá nhẹ để thấy rõ "trồi lên"), nên override riêng transform ở đây
   với quãng đường xa hơn; vẫn dùng lại transition/easing có sẵn của .reveal,
   chỉ đổi khoảng cách di chuyển.
   LƯU Ý: từng thử 45vh — bị nháy/flash khi cuộn nhanh qua section, vì
   IntersectionObserver tính "visible" theo vị trí ĐÃ transform tại thời điểm
   đo, còn transition (0.9s) thì chạy độc lập với việc cuộn — quãng đường quá
   xa khiến khi ẩn đi (cuộn lướt qua), thẻ trượt NGƯỢC lại 1 đoạn dài nên có
   lúc lại đi ngang qua viewport giữa chừng transition, gây chớp/nháy. 160px
   đủ xa để thấy rõ "trồi lên" nhưng đủ ngắn để transition hoàn tất trước khi
   thẻ kịp trôi ra xa viewport lúc cuộn nhanh — verify bằng Playwright, xem
   mso_FEATURE.md ngày sửa lỗi flicker này. */
.point-grid .point {
  transform: translateY(160px);
}

.point-grid .point.visible {
  transform: none;
}

/* Stagger — mỗi thẻ trễ hơn thẻ trước 1 nhịp nhỏ để trông như trồi lên lần lượt */
.point-grid .point:nth-child(1) { transition-delay: 0s; }
.point-grid .point:nth-child(2) { transition-delay: .08s; }
.point-grid .point:nth-child(3) { transition-delay: .16s; }
.point-grid .point:nth-child(4) { transition-delay: .24s; }

/* 4 thẻ giá cũng "trồi lên từ mép dưới" giống hệt .point-grid .point ở trên —
   tái dùng đúng khoảng cách 160px đã verify không bị nháy (xem lưu ý phía
   trên) + cùng kiểu stagger so le theo thứ tự thẻ. */
.pricing-grid-wide .price-card {
  transform: translateY(160px);
}

.pricing-grid-wide .price-card.visible {
  transform: none;
}

.pricing-grid-wide .price-card:nth-child(1) { transition-delay: 0s; }
.pricing-grid-wide .price-card:nth-child(2) { transition-delay: .08s; }
.pricing-grid-wide .price-card:nth-child(3) { transition-delay: .16s; }
.pricing-grid-wide .price-card:nth-child(4) { transition-delay: .24s; }
.pricing-grid-wide .price-card:nth-child(5) { transition-delay: .32s; }

/* ── QR CARD ──────────────────────────────────────────────────────── */
.qr-card {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow), var(--inset);
}

.qr-card img {
  width: clamp(150px, 20vw, 190px);
  height: clamp(150px, 20vw, 190px);
  border-radius: 12px;
  background: #0b0b0d;
  padding: 10px;
}

.qr-card strong {
  font-family: var(--font-display);
  font-size: 15px;
}

.qr-card span {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* ── ACCESS ROW — cột trái (heading + QR/phone-mock nhỏ) / cột phải (ảnh
   AirPrint), 2 cột NGANG HÀNG nhau ngay từ đầu section (không phải nằm dưới
   heading như trước). align-items:stretch để cột phải (airprint-hero) kéo
   full chiều cao cột trái — vốn đã gồm cả heading lẫn QR/phone-mock nên khá
   cao — qua đó ảnh AirPrint gần như chiếm hết chiều cao phần nội dung chính
   của section (trừ quote), đúng yêu cầu "chiếm gần hết chiều cao section
   hoặc 50% chiều rộng". ── */
.access-row {
  display: grid;
  grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
  align-items: stretch;
  gap: 40px;
}

.access-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 28px;
  min-width: 0;
}

/* .section-heading > div mặc định bị ép width:50vw (xem msobackup.css,
   @media min-width:901px) — luôn rộng hơn 40% cột trái ở đây, đè mất tỉ lệ
   40/60 vừa đặt cho .access-row. Ghi đè riêng trong #access để cột trái co
   đúng theo tỉ lệ grid thay vì theo 50vw toàn cục. */
#access .section-heading {
  grid-template-columns: 1fr;
}

#access .section-heading > div {
  width: 100%;
  max-width: none;
}

.access-mini-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.access-mini-grid .qr-card {
  padding: 16px 18px;
  gap: 8px;
}

.access-mini-grid .qr-card img {
  width: clamp(80px, 9vw, 100px);
  height: clamp(80px, 9vw, 100px);
  padding: 6px;
}

.access-mini-grid .qr-card strong {
  font-size: 12px;
}

.access-mini-grid .qr-card span {
  font-size: 10px;
}

.access-mini-grid .phone-mock {
  max-width: 190px;
  padding: 14px;
}

.access-mini-grid .phone-search {
  padding: 7px 10px;
  margin-bottom: 10px;
  font-size: 11px;
}

.access-mini-grid .phone-folders {
  gap: 6px;
  margin-bottom: 10px;
}

.access-mini-grid .phone-folders span {
  padding: 4px 7px;
  font-size: 9px;
}

.access-mini-grid .phone-file {
  padding: 7px 0;
  font-size: 11px;
}

.access-mini-grid .phone-file small {
  font-size: 9px;
}

.access-mini-grid .phone-download {
  margin-top: 10px;
  padding: 9px;
  font-size: 11px;
}

/* ── AIRPRINT HERO — cột phải của .access-row, kéo full chiều cao cột (nhờ
   align-items:stretch của .access-row) rồi cho ảnh giãn hết phần còn dư qua
   flex:1 — kết quả ảnh gần như phủ hết chiều cao khối nội dung chính, vẫn
   giới hạn max-height để không vượt ngân sách "section tối đa 1 màn hình". ── */
.airprint-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
  max-height: min(76vh, 600px);
  text-align: center;
}

.airprint-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 14px 0;
}

/* Glow mềm phía sau ảnh — thay cho filter:drop-shadow trước đây (bóng đổ
   tràn ra ngoài khung ảnh, bị body{overflow-x:hidden} cắt cứng ở mép phải
   trang, nhìn như bị "crop"). Glow này nằm gọn trong .airprint-hero-visual
   (position:absolute, inset:0) và tự fade về transparent đều 4 phía bằng
   radial-gradient nên không bao giờ bị cắt viền. */
.airprint-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 58% at center, rgba(0, 0, 0, .22) 0%, transparent 75%);
  pointer-events: none;
}

.airprint-hero-visual img {
  position: relative;
  display: block;
  /* Ảnh thật là 16:9 (nằm ngang) — trước đây ép height:100% trong khung dọc
     khiến ảnh bị letterbox, để trống khoảng trên/dưới dù text đã đứng ngay
     sau khung. Scale theo CHIỀU RỘNG (width:100%, height:auto) để ảnh luôn
     đúng tỉ lệ và chạm sát viền khung, không còn khoảng trống giả. */
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Bóng đổ rất nhẹ + gọn, không đủ lan xa để chạm mép trang. */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .16));
  animation: airprint-float 4.5s ease-in-out infinite;
}

/* Vòng sóng lan toả nhẹ nhàng phía sau máy in — gợi ý tín hiệu không dây,
   lặp liên tục nhưng biên độ nhỏ để không gây rối mắt (chuyên nghiệp, tinh
   tế thay vì hiệu ứng "nháy" mạnh). */
.airprint-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  animation: airprint-wave 3.2s ease-out infinite;
  pointer-events: none;
}

.airprint-wave--2 {
  animation-delay: 1.6s;
}

.airprint-hero strong {
  font-family: var(--font-display);
  font-size: 16px;
}

.airprint-hero span {
  color: var(--muted);
  font-size: 12px;
}

@keyframes airprint-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes airprint-wave {
  0% { opacity: .35; transform: translate(-50%, -50%) scale(.6); }
  70% { opacity: 0; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .airprint-hero-visual img,
  .airprint-wave {
    animation: none;
  }
}

/* ── AIRPRINT STORY (section #airprint) — 2 máy in + cô gái cầm điện thoại.
   .airprint-grid mang class "reveal" nên dùng ĐÚNG observer dùng chung
   initRevealObserver(".reveal") (REVEAL_CONFIG.twoWay mặc định = true) —
   không cần JS riêng cho section này: .visible tự bật khi cuộn section vào
   khung nhìn và tự TẮT khi cuộn khỏi khung nhìn, nhờ mọi hiệu ứng con bên
   dưới đều khai báo bằng `transition` (không phải @keyframes) nên CSS tự
   nội suy ngược lại hệt như lúc tới khi .visible bị gỡ — cuộn xuống chạy
   thuận, cuộn lên tự đảo ngược, không cần tính lại timeline bằng tay.
   Thứ tự 4 nhịp (so le bằng transition-delay nối tiếp mốc trước): (1) máy
   in cũ hiện ra trước, máy in mới "wipe" ra sau trên CÙNG 1 ảnh 702 (ảnh có
   alpha thật, không còn khung sáng che nền như bản nháp trước); (2) cô gái
   trượt vào từ phải; (3) bong bóng PRINT!!! bật lên trên điện thoại cô ấy
   cầm; (4) tờ giấy trượt ra khỏi khe máy in mới. ── */
.airprint-grid {
  align-items: flex-end;
  gap: 40px;
}

.airprint-printers {
  position: relative;
  width: 100%;
  aspect-ratio: 1451 / 1084;
}

.airprint-printers-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(22px);
  /* Máy in cũ (bên trái ảnh) lộ ra gần như ngay (opacity/transform nhanh,
     .6s), máy in mới lộ chậm hơn hẳn nhờ clip-path riêng kéo dài 1.3s —
     53.5% = đúng tỉ lệ pixel ranh giới 2 máy in trong ảnh gốc (675/1451),
     không phải số áng chừng, nên khi "quét" sang phải thì đúng lúc hé tới
     máy in mới mới tính là xong 1 nhịp. */
  clip-path: inset(0 53.5% 0 0);
  transition: opacity .6s var(--ease), transform .6s var(--ease), clip-path 1.3s var(--ease);
}

.airprint-grid.visible .airprint-printers-img {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}

/* Tờ giấy trượt ra khỏi khe máy in mới (vị trí % tính theo toạ độ pixel của
   máy in mới trong ảnh 702 gốc, map thẳng sang % nhờ .airprint-printers
   giữ đúng aspect-ratio của ảnh — xem rule phía trên). Chỉ là 1 khối CSS
   phẳng (không ảnh riêng) nên luôn khớp theme, không cần thêm asset. */
.airprint-paper {
  position: absolute;
  left: 66%;
    top: 62%;
    width: 18%;
    height: 17%;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #ffffff, #eef0f4);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .22), inset 0 -14px 0 -11px rgba(17, 24, 39, .1), inset 0 -24px 0 -21px rgba(17, 24, 39, .08);
  /* Nghiêng 10deg theo đúng góc nghiêng phối cảnh của máy in trong ảnh —
     xoay quanh mép TRÊN (nơi giấy "mọc ra" khỏi khe máy in), không phải
     tâm khối, để mép trên đứng yên còn thân giấy xoà xuống-phải tự nhiên. */
  transform-origin: top center;
  transform: scaleY(0) rotate(10deg);
  opacity: 0;
  /* Không delay ở state nghỉ (rút giấy lại ngay khi cuộn lên) — delay chỉ
     khai báo ở rule .visible bên dưới (chỉ áp khi ĐANG chạy TỚI state đó,
     xem comment transition-delay trong rule .airprint-girl img). */
  transition: transform .6s cubic-bezier(.3, .9, .4, 1), opacity .25s ease;
}

.airprint-grid.visible .airprint-paper {
  opacity: 1;
  transform: scaleY(1) rotate(3deg);
  transition-delay: 2.75s;
}

/* Cột cô gái — ảnh 703 có alpha thật nên đặt thẳng lên nền trang như
   .airprint-hero-visual img, không cần khung sáng riêng. */
.airprint-girl {
  position: relative;
  display: flex;
  justify-content: center;
}

.airprint-girl img {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .22));
  opacity: 0;
  transform: translateX(48px) scale(.96);
  /* transition-delay CHỈ đặt ở rule .visible (dưới) chứ không ở đây — CSS
     lấy transition-delay từ style ĐÍCH của lần đổi (xem spec "after-change
     style"), nên vào tự chờ 1.3s (so le sau máy in), còn ra (cuộn lên, rớt
     về rule gốc này — delay mặc định 0s) phản ứng ngay, không bị trễ 1.3s
     mới chịu bắt đầu lùi lại. */
  transition: opacity .7s var(--ease), transform .7s cubic-bezier(.22, 1, .36, 1);
}

.airprint-grid.visible .airprint-girl img {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 1.3s;
}

/* Bong bóng "PRINT!!!" — neo đúng vùng điện thoại trong ảnh 703 (% tính theo
   pixel bbox của điện thoại trong ảnh gốc, cùng cách map như .airprint-paper). */
.airprint-print-bubble {
  position: absolute;
  left: 60%;
  top: 14%;
  transform: translateY(10px) scale(.75);
  transform-origin: bottom left;
  padding: 6px 12px;
  border-radius: var(--r-pill) var(--r-pill) var(--r-pill) 4px;
  background: var(--fixed-offwhite, #fff);
  color: #0b0b0d;
  font: 800 13px var(--font-display);
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .45s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}

.airprint-grid.visible .airprint-print-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 2.15s;
}

@media (prefers-reduced-motion: reduce) {
  .airprint-printers-img,
  .airprint-paper,
  .airprint-girl img,
  .airprint-print-bubble {
    transition: opacity .3s ease;
    transform: none;
    clip-path: none;
  }
  /* .airprint-paper giữ nguyên góc nghiêng 10deg kể cả khi reduced-motion
     tắt hết hiệu ứng trượt/scale — chỉ bỏ motion, không bỏ góc nghiêng cố
     định theo phối cảnh máy in. */
  .airprint-paper,
  .airprint-grid.visible .airprint-paper {
    transform: rotate(10deg);
  }
  .airprint-grid.visible .airprint-printers-img,
  .airprint-grid.visible .airprint-girl img,
  .airprint-grid.visible .airprint-print-bubble {
    transform: none;
    clip-path: none;
    transition-delay: 0s;
  }
}

@media (max-width: 900px) {
  .airprint-girl img {
    max-width: 220px;
  }
}

/* ── PHONE MOCK — danh sách file trên điện thoại ─────────────────────── */
.phone-mock {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow), var(--inset);
}

.phone-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
}

.phone-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.phone-folders span {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  color: var(--muted);
}

.phone-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.phone-file:first-of-type {
  border-top: 1px solid var(--line);
}

.phone-file span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-file small {
  color: var(--muted);
  font-size: 11px;
}

.phone-download {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
}

/* ── SEARCH DEMO ──────────────────────────────────────────────────── */
.search-demo {
  position: relative;
  isolation: isolate;
  max-width: 460px;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow), var(--inset);
}

.search-demo .phone-search {
  color: var(--ink);
  margin-bottom: 18px;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 13px;
}

.search-result em {
  font-style: normal;
}

.feature-grid-6 .feature-card {
  min-height: 190px;
}

/* ── PRICING WIDE — 4 gói hiện đủ, gói thứ 5 (Lifetime) hé mép phải ──────
   Đổi từ CSS Grid 4-cột cố định sang flex row CUỘN NGANG được: 4 gói đầu
   (Free/3mo/6mo/1y) vẫn chiếm ĐÚNG 100% chiều rộng y hệt layout Grid cũ (per
   explicit request — không đổi cảm giác lúc mới vào trang), --pricing-peek
   là phần chiều rộng "nhường lại" để gói thứ 5 (Lifetime) hé đúng 1 lát mép
   trái ra ngay tại vị trí nghỉ (scrollLeft: 0) — tự nhiên gợi ý "còn nữa"
   mà không cần JS tính toán gì. .pricing-swipe-hint (dưới) là lớp gợi ý
   TƯỜNG MINH thêm vào, không thay thế cho lát hé này. */
.pricing-scroll {
  position: relative;
}

.pricing-grid-wide {
  --pricing-gap: 14px;
  --pricing-peek: 64px;
  display: flex;
  gap: var(--pricing-gap);
  max-width: none;
  overflow-x: auto;
  overflow-y: visible;
  /* Y hệt lý do #backup-rows-container/#system-monitor trong app Tauri dùng
     mandatory (xem msoBACKUP_RULE.md, "Cuộn theo nấc") -- 1 cử chỉ vuốt luôn
     dừng lại đúng mép 1 thẻ, không bao giờ dừng nửa chừng giữa 2 thẻ. */
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  /* Che thanh cuộn ngang thật (vẫn cuộn được bằng trackpad/wheel/kéo) --
     cùng convention "scrollbar ẩn hoàn toàn" đã dùng nhiều chỗ trong app
     Tauri (xem RULE.md mục Scrollbar). */
  scrollbar-width: none;
  /* CHỦ Ý để các thẻ cao KHÔNG bằng nhau — gói càng cao tier càng nhiều dòng
     feature nên tự nhiên càng cao, tăng dần trái→phải, tạo cảm giác "gói to
     hơn, đầy đặn hơn". align-items:flex-end (tương đương align-items:end
     của Grid trước đây) để các thẻ canh MÉP DƯỚI bằng nhau — thẻ ngắn hơn bị
     đẩy xuống, chừa khoảng trống phía TRÊN thay vì dưới, tạo hiệu ứng bậc
     thang dâng cao dần từ trái qua phải. */
  align-items: flex-end;
}

.pricing-grid-wide::-webkit-scrollbar {
  display: none;
}

.pricing-grid-wide .price-card {
  /* 4 thẻ đầu = đúng 100% chiều rộng trừ đi --pricing-peek (xem block-comment
     phía trên); thẻ Lifetime dùng CHUNG công thức này (cùng flex-basis với
     4 thẻ kia) nên rộng bằng hệt, chỉ là nằm ngoài khung nhìn ban đầu. */
  flex: 0 0 calc((100% - 3 * var(--pricing-gap) - var(--pricing-peek)) / 4);
  min-width: 220px;
  scroll-snap-align: start;
  padding: 4px 18px;
  display: flex;
  flex-direction: column;
}

.pricing-grid-wide .price-card .button {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  font-size: 116%;
}

/* ── BUTTON GHOST — style "glossy, màu lơ lửng bên trong" theo mẫu
   ".seek-gloss-btn/.seek-gloss-flow" user cung cấp. Quy đổi sang biến đã có
   sẵn trong :root thay vì bịa biến mới:
   - --accent-gradient / màu gloss → var(--btn-accent) — 1 biến CSS MỚI khai
     báo ngay trên từng `.price-card--free/3mo/6mo/year` (xem msobackup.css,
     gần rule `.price-card--* { background: var(--price-*) }`), lấy đúng tông
     đậm hơn trong chính gradient nền của card đó (không hardcode màu riêng
     cho từng nút). Nhờ CSS custom property TỰ KẾ THỪA xuống phần tử con, nút
     .button-ghost nằm trong card nào tự động ăn đúng màu card đó — chỉ 1 bộ
     rule .button-ghost DUY NHẤT dùng chung cho cả 4 nút, không cần viết
     riêng CSS cho từng tier. Luôn có fallback `var(--btn-accent, var(--blue))`/
     `var(--btn-accent, var(--btn))` — nếu lỡ dùng .button-ghost ở nơi không
     có --btn-accent (ngoài price-card) thì vẫn có màu hợp lý, không vỡ layout.
   - --text-on-accent → #fff trực tiếp (không có biến riêng, nền màu nên chữ
     trắng hợp cả 2 theme lẫn cả 4 tông màu).
   - Toàn bộ dải màu nhiều tông của .seek-gloss-flow/::after/::before trong
     mẫu gốc (#123e7f, #60a5fa, rgba(96,165,250,..) v.v.) → dựng lại bằng
     color-mix() pha đen/trắng theo tỉ lệ trên CHÍNH var(--btn-accent) của
     card đó, ra đúng dải tối→sáng tương tự nhưng đổi màu theo từng tier.
   - border-color trong mẫu gốc đứng SAU "border:0" nên bị reset mất (dead
     code ở base/hover) — bỏ qua. Riêng :focus-visible KHÔNG có border:0 nào
     đè lại nên box-shadow glow vẫn giữ (màu theo --btn-accent luôn).
   - Không có --accent-gradient-hover riêng nên hover dùng filter:brightness()
     trên chính nền + tăng tốc/độ bão hoà của .btn-gloss-flow.
   - Bỏ qua phần "img"/"shortcut-button-label" trong mẫu gốc (dành cho nút có
     icon riêng, không áp dụng — nút ở đây chỉ có chữ, dùng .btn-label thay).
   - Bỏ qua :disabled/.license-locked (đặc thù app gốc, không có state này ở
     nút CTA trên trang).
   - .btn-gloss-flow là <span> con thật (không phải ::before/::after của nút)
     vì chính nó cần thêm 1 lớp ::after riêng — thêm trực tiếp trong HTML.
   - Vệt sáng bám chuột (::before, mix-blend-mode:screen) đọc 2 biến CSS
     --spotlight-x/--spotlight-y do JS set khi di chuột — xem initGlossSpotlight()
     trong js/msobackup.js (cùng nhóm với initTiltCards()/initMagnetic()).
   Selector phải chừa nguyên tiền tố ".price-card[class*="price-card--"]" —
   msobackup.css có sẵn rule cùng chỗ (`.price-card[class*="price-card--"]
   .button`) độ đặc hiệu (0,3,0), cao hơn ".button.button-ghost" trơn
   (0,2,0), nên sẽ đè mất nếu bỏ tiền tố này. */
.price-card[class*="price-card--"] .button.button-ghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-pill);
  border: 0;
  background: var(--btn-accent, var(--btn));
  color: #fff;
}

.btn-gloss-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .82;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .78), transparent 18%),
    radial-gradient(circle at 72% 76%, color-mix(in srgb, var(--btn-accent, var(--blue)) 40%, #fff), transparent 31%),
    linear-gradient(115deg,
      color-mix(in srgb, var(--btn-accent, var(--blue)) 55%, #000) 0%,
      color-mix(in srgb, var(--btn-accent, var(--blue)) 70%, #000) 28%,
      var(--btn-accent, var(--blue)) 56%,
      color-mix(in srgb, var(--btn-accent, var(--blue)) 55%, #fff) 78%,
      color-mix(in srgb, var(--btn-accent, var(--blue)) 75%, #000) 100%);
  background-size: 180% 180%, 140% 140%, 220% 220%;
  filter: saturate(135%) contrast(1.05);
  animation: seekGlossDrift 6s ease-in-out infinite;
  transition: opacity .2s ease, filter .2s ease;
}

.btn-gloss-flow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 42%, transparent 64%),
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--btn-accent, var(--blue)) 70%, #000) 0%, transparent 58%);
}

/* Vệt sáng tròn bám theo chuột — mix-blend-mode:screen nên chỉ "làm sáng thêm"
   chỗ chuột đang ở, không che nền gốc bên dưới. */
.price-card[class*="price-card--"] .button.button-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    rgba(255, 255, 255, .36),
    rgba(255, 255, 255, .12) 22%,
    color-mix(in srgb, var(--btn-accent, var(--blue)) 55%, #fff) 42%,
    transparent 64%);
}

/* Chữ trong nút: cùng tông màu với card nhưng pha đậm hẳn về đen (35% màu
   card / 65% đen) để luôn đủ tương phản đọc được trên nền gloss sáng — vẫn
   tự đổi theo đúng --btn-accent kế thừa từ card chứa nó, không cần viết
   riêng cho từng tier. */
.btn-label {
  position: relative;
  z-index: 3;
  color: color-mix(in srgb, var(--btn-accent, var(--blue)) 35%, #000 65%);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.price-card[class*="price-card--"] .button.button-ghost:hover,
.price-card[class*="price-card--"] .button.button-ghost:focus-visible {
  background: var(--btn-accent, var(--btn));
  filter: brightness(1.12);
  transform: none;
}

.price-card[class*="price-card--"] .button.button-ghost:focus-visible {
  outline: none;
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--btn-accent, var(--blue)) 55%, transparent),
    0 0 20px color-mix(in srgb, var(--btn-accent, var(--blue)) 40%, transparent),
    0 0 34px color-mix(in srgb, var(--btn-accent, var(--blue)) 30%, transparent);
}

.price-card[class*="price-card--"] .button.button-ghost:hover .btn-gloss-flow,
.price-card[class*="price-card--"] .button.button-ghost:focus-visible .btn-gloss-flow {
  opacity: 1;
  filter: saturate(175%) contrast(1.14) brightness(1.08);
  animation: seekGlossStir 1.9s ease-in-out infinite;
}

/* "Màu lơ lửng trong nút" — background-position của cả 3 lớp trôi dạt chậm,
   liên tục, không cần chuột chạm vào. Hover/focus chuyển sang seekGlossStir
   (nhanh hơn, biên độ rộng hơn) qua rule bên trên. */
@keyframes seekGlossDrift {
  0%, 100% { background-position: 20% 15%, 72% 76%, 0% 50%; }
  50%      { background-position: 32% 26%, 60% 64%, 100% 50%; }
}

@keyframes seekGlossStir {
  0%, 100% { background-position: 20% 15%, 72% 76%, 0% 50%; }
  50%      { background-position: 44% 38%, 48% 52%, 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-gloss-flow {
    animation: none;
  }
}

.final-recap {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

/* ── PREMIUM STARS — sao lấp lánh liên tục ở góc trên-phải panel gói cao nhất
   (.price-card--year) ────────────────────────────────────────────────────
   Tái dùng đúng KIỂU DÁNG ★ + glow của .pro-seam-star/.pro-sparkle
   (msobackup.css) nhưng làm ĐỘC LẬP — không gắn vào 1 chữ/scroll-progress cụ
   thể như .pro-highlight, to hơn + nhiều sao hơn, và twinkle LIÊN TỤC (CSS
   @keyframes infinite thuần, không cần JS/observer). */
.premium-stars {
  position: absolute;
  top: -12px;
  right: -8px;
  width: 120px;
  height: 100px;
  z-index: 2;
  pointer-events: none;
}

/* Selector dài hơn CHỦ Ý — rule "màu chữ tối cố định" của .price-card
   (`.price-card[class*="price-card--"] > div > span`) khớp NHẦM luôn vào
   .premium-stars span (vì .premium-stars cũng là 1 <div> con trực tiếp của
   .price-card) và có độ ưu tiên cao hơn selector đơn giản — phải tăng độ ưu
   tiên tương đương mới thắng được, không thì sao bị đổi màu tối, mất hẳn màu
   vàng rực. */
.price-card[class*="price-card--"] .premium-stars span {
  position: absolute;
  color: var(--gold); /* vàng rực thay vì kem nhạt trước đó — cùng tông với --warn/PRO badge gold */
  line-height: 1;
  text-shadow:
    0 0 6px #fff6cf,
    0 0 16px var(--gold),
    0 0 32px rgba(255, 214, 10, .85),
    0 0 48px rgba(240, 192, 89, .5);
  opacity: 0;
  animation: premiumStarTwinkle 2.4s ease-in-out infinite;
}

.premium-stars span:nth-child(1) { top: 8px;  right: 14px; font-size: 34px; animation-delay: 0s; }
.premium-stars span:nth-child(2) { top: 48px; right: 52px; font-size: 18px; animation-delay: .5s; }
.premium-stars span:nth-child(3) { top: 18px; right: 66px; font-size: 13px; animation-delay: 1s; }
.premium-stars span:nth-child(4) { top: 64px; right: 6px;  font-size: 15px; animation-delay: 1.5s; }
.premium-stars span:nth-child(5) { top: 34px; right: 92px; font-size: 11px; animation-delay: 2s; }

@keyframes premiumStarTwinkle {
  0%, 100% { opacity: 0;  transform: scale(.35) rotate(0deg); }
  50%      { opacity: 1;  transform: scale(1.15) rotate(16deg); }
}

@media (prefers-reduced-motion: reduce) {
  .premium-stars { display: none; }
}

/* ── PRICING SWIPE HINT — mời gọi vuốt/cuộn sang phải để thấy gói Lifetime ──
   2 lớp, cả 2 chỉ áp dụng ở layout desktop (4 thẻ đủ rộng, xem media query
   max-width:900px phía dưới tắt hẳn cả 2 -- màn hình hẹp đã stack dọc, không
   còn khái niệm "cuộn ngang" nữa nên gợi ý này vô nghĩa ở đó):

   1. .pricing-edge-fade -- dải mờ dần sang màu nền trang (tối) phủ lên đúng
      mép phải của .pricing-scroll, pointer-events:none (không chặn click) --
      tín hiệu thị giác quen thuộc kiểu carousel "còn nội dung bị cắt ở đây".
   2. .pricing-swipe-hint -- pill nổi bật hẳn, có mũi tên nảy liên tục
      (swipeBounce) + chữ "Lifetime" + viền glow nhịp đập riêng (không dùng
      chung animation với .price-card--lifetime để 2 nhịp đập không bị đồng
      bộ trông máy móc) -- neo tại đúng ranh giới giữa thẻ 1-năm (thẻ 4) và
      lát hé của thẻ Lifetime, để rõ ràng "thứ đang được trỏ tới nằm sát bên
      phải". JS (msobackup.js, bindPricingSwipeHint) tự ẩn dần 2 lớp này khi
      người dùng đã cuộn qua (đã làm đúng hành động được gợi ý thì không cần
      gợi ý nữa), và tự hiện lại nếu cuộn về gần vị trí ban đầu. */
.pricing-edge-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  width: 90px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg) 92%);
  opacity: 1;
  transition: opacity .4s var(--ease);
}

.pricing-edge-fade.is-hidden {
  opacity: 0;
}

.pricing-swipe-hint {
  position: absolute;
  right: 14px;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  border-radius: var(--r-pill);
  background: rgba(20, 15, 8, .92);
  border: 1px solid rgba(255, 200, 130, .5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 0 rgba(255, 158, 87, 0);
  color: #ffd699;
  font: 700 12px var(--font-display);
  letter-spacing: .04em;
  white-space: nowrap;
  animation: pricingHintGlow 2.2s ease-in-out infinite;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  cursor: pointer;
}

.pricing-swipe-hint.is-hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(12px);
  pointer-events: none;
}

.pricing-swipe-hint .chevrons {
  display: inline-flex;
}

.pricing-swipe-hint .chevrons i {
  font-style: normal;
  animation: swipeBounce 1.3s ease-in-out infinite;
}

.pricing-swipe-hint .chevrons i:nth-child(2) { animation-delay: .12s; }
.pricing-swipe-hint .chevrons i:nth-child(3) { animation-delay: .24s; }

@keyframes swipeBounce {
  0%, 100% { opacity: .35; transform: translateX(0); }
  50%      { opacity: 1;   transform: translateX(4px); }
}

@keyframes pricingHintGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 0 rgba(255, 158, 87, 0); }
  50%      { box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 22px rgba(255, 158, 87, .65); }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-swipe-hint { animation: none; }
  .pricing-swipe-hint .chevrons i { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
  .pricing-edge-fade,
  .pricing-swipe-hint {
    display: none;
  }
}

/* ── UNDER THE HOOD — carousel 5 thẻ stat màu gradient nhạt ──────────────
   Layout kiểu carousel ngang: mỗi thẻ chiếm ~30% bề rộng khung, cao ~1/3 màn
   hình — chỉ ~3 thẻ hiện đủ, 2 thẻ còn lại nằm ngoài bên phải, vuốt/bấm nút
   liquid-glass để xem tiếp. KHÔNG dùng scrollbar (ẩn đi) để tránh chiếm thêm
   chiều cao trang — vẫn cuộn ngang được bằng trackpad/chuột hoặc nút điều hướng. */
.tech-section {
  background: var(--panel);
}

.tech-carousel {
  position: relative;
  margin-top: 24px;
}

.tech-strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;       /* Firefox — ẩn scrollbar, vẫn cuộn được bình thường */
  /* overflow-x:auto khiến trình duyệt tự suy overflow-y thành "auto" (không khai
     báo thì mặc định visible, nhưng hễ 1 trục khác "visible" thì trục kia cũng
     bị ép clip) — .tech-card hover nhích lên (xem bên dưới) sẽ bị cắt cụt mất
     phần đầu nếu không chừa khoảng đệm. padding-top + margin-top âm bù lại đúng
     bằng nhau: mở rộng vùng nhìn thấy (scrollport) lên trên mà KHÔNG đẩy vị trí
     hàng thẻ xuống thấp hơn so với trước (2 giá trị triệt tiêu nhau ở box ngoài). */
  padding: 16px;
  margin-top: -16px;
}

.tech-strip::-webkit-scrollbar {
  display: none;               /* Chrome/Safari — ẩn scrollbar */
}

/* Nút điều hướng liquid-glass — cùng ngôn ngữ thị giác với .nav (blur mờ,
   viền/shadow nhạt) nhưng thu nhỏ thành nút tròn nổi 2 bên carousel. */
.tech-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}

.tech-nav:hover,
.tech-nav:focus-visible {
  opacity: 1;
}

.tech-nav:active {
  transform: translateY(-50%) scale(.92);
}

.tech-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.tech-nav-prev { left: -18px; }
.tech-nav-next { right: -18px; }

@media (max-width: 700px) {
  .tech-nav { display: none; } /* màn hình nhỏ: vuốt trực tiếp bằng ngón tay, nút che mất nội dung */
}

.tech-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Đúng 3 thẻ khớp trọn bề rộng .tech-strip (3 thẻ + 2 khoảng gap = 100%) —
     không để lộ 1 mẩu thẻ thứ 4 bị crop ở rìa như kiểu "flex: 0 0 30%" trước đây. */
  flex: 0 0 calc((100% - 2 * 20px) / 3);
  /* Cao hơn bản trước (33vh/440px) — section giờ tối thiểu 100vh (.section
     trong msobackup.css) nên cần thẻ to hơn để lấp khoảng trống thay vì chỉ
     dựa vào padding, theo đúng nguyên tắc "cho hình/chữ to lên cho cân đối". */
  height: 46vh;
  min-height: 360px;
  max-height: 560px;
  scroll-snap-align: start;
  padding: 26px;
  border-radius: var(--r-lg);
  color: #14210c;              /* nền thẻ luôn sáng (gradient nhạt) nên chữ tối cố định, không theo --ink */
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  transition: transform .35s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              box-shadow .35s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.tech-card:hover,
.tech-card:focus-within {
  transform: translateY(-3px);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 4px 4px 0px, rgba(0, 0, 0, 0.3) 0px 3px 3px -3px;
}

@media (prefers-reduced-motion: reduce) {
  .tech-card {
    transition: none;
  }
  .tech-card:hover,
  .tech-card:focus-within {
    transform: none;
  }
}

.tech-card--mint   { background: var(--stat-mint); }
.tech-card--yellow { background: var(--stat-yellow); }
.tech-card--blue   { background: var(--stat-blue); }
.tech-card--peach  { background: var(--stat-peach); }
.tech-card--pink   { background: var(--stat-pink); }

.tech-card-label {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  opacity: .75;
}

.tech-card-stat {
  display: block;
  margin: 12px 0 auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -.02em;
  line-height: 1;
}

.tech-card-desc {
  margin: 20px 0 16px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  opacity: .8;
}

.tech-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-card-pills span {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  font: 600 12px var(--font-display);
  white-space: nowrap;
}

/* Nghiêng nhẹ so le từng pill — gợi lại phong cách "tag rời rạc" trong ảnh mẫu */
.tech-card-pills span:nth-child(2n)     { transform: rotate(-2deg); }
.tech-card-pills span:nth-child(2n + 1) { transform: rotate(1.5deg); }

/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .point-grid,
  .split-2,
  .split-3,
  .access-row {
    grid-template-columns: 1fr;
  }

  .access-mini-grid {
    flex-wrap: wrap;
  }

  .airprint-hero {
    height: auto;
    max-height: none;
  }

  /* .pricing-grid-wide đổi từ CSS Grid sang flex-row-cuộn-ngang (xem block
     comment lớn ở rule gốc của nó, phía trên trong file này) -- riêng ở đây
     `grid-template-columns: 1fr` không còn tác dụng gì (display đã là flex,
     không phải grid) nên phải tự reset lại flex-direction/width, không thể
     dùng chung 1 dòng với .point-grid/.feature-grid-6 nữa. Thiếu bước reset
     này, 5 thẻ vẫn cố nằm ngang chung 1 hàng ở màn hình hẹp -- mỗi thẻ co
     lại còn vài chục px theo đúng công thức --pricing-peek (vốn chỉ tính
     cho màn hình rộng), nội dung/chữ đè lên nhau đọc như "khối tối" thay vì
     đúng màu gradient của từng thẻ. Ở màn hình hẹp không còn khái niệm
     "cuộn ngang hé mép" nữa -- xếp dọc, mỗi thẻ tự nhiên rộng 100% thay vì
     theo công thức 4-thẻ, và không cuộn ngang. */
  .pricing-grid-wide {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .pricing-grid-wide .price-card {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
  }

  .hero2-copy .lede {
    font-size: 17px;
  }

  /* Màn hình hẹp: 1 thẻ / màn hình (không hé lộ thẻ kế — tránh crop, đúng
     nguyên tắc "mỗi lần cuộn phải hiện trọn thẻ, không dừng nửa chừng"). */
  .tech-card {
    flex-basis: 100%;
    height: 38vh;
  }
}

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

  .device-badge {
    padding: 8px 12px;
    font-size: 11px;
  }

  .device-badge-phone {
    top: -4%;
    left: 2%;
  }

  .qr-card {
    padding: 22px;
  }
}

/* Dòng đồng ý Terms/Refund trước lưới gói giá (yêu cầu Paddle — xem
   mso_FEATURE.md 2026-08-22). */
.pricing-consent {
  max-width: 480px;
  margin: -16px auto 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.pricing-consent a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s var(--ease);
}

.pricing-consent a:hover {
  color: var(--ink);
}

/* ── FOOTER — gọn 3 cột (logo | 3 link pháp lý | liên hệ cá nhân), theo yêu
   cầu Paddle (seller phải đặt rõ Terms/Refund/buyer support) NHƯNG cố tình
   tối giản hết mức — cột 1 CHỈ logo+tên, không tagline; cột 3 CHỈ tên+email+
   phone, không địa chỉ — để cả section CTA tải app + footer này vẫn gộp
   chung 1 màn hình (`#download`, xem quy tắc "mỗi section = 1 trang" trong
   msobackup.css). CHỈ override riêng cho index.html qua .footer-grid--slim —
   .footer-grid gốc (msobackup.css) vẫn nguyên layout cũ, dùng chung với
   indexO.html (trang lưu trữ, không đụng ở đây). */
.footer-grid--slim {
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 32px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer--slim {
  padding-top: 8px;
}

@media (max-width: 560px) {
  .footer-grid--slim {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ============================================================
   Merged from css/doc.css (2026-09-05) -- was a separate file for the 3
   legal doc pages (doc_TermsOfService/doc_PrivacyPolicy/doc_RefundPolicy,
   all languages), kept apart on purpose so those pages stayed simple to
   hand-edit. No longer kept separate per explicit request.

   :root vars it declared (--bg/--panel/--ink/--muted/--blue) are IDENTICAL
   to the values already in this file's own :root above -- not repeated
   here (would violate the "declare each token once" rule in mso_RULE.md).
   --line differed by a hair (.12 vs .1 alpha) -- not worth a scoped
   override, doc pages now just use the shared value. Its 2 @font-face
   rules were duplicates of the ones already at the top of this file (the
   SF Pro Rounded one already got the extra .woff2 source merged in up
   there) -- also dropped here. `* { box-sizing: border-box; }` was also
   already covered above.

   2 things doc.css set that DO differ from this file's own generic
   `html`/`body` rules and would otherwise regress doc pages' look if
   simply dropped -- scoped with `:has(.doc-shell)` so they apply ONLY on
   the 3 doc pages, not site-wide:
     - html { scroll-behavior: smooth } -- deliberately NOT set globally
       on this file's own `html` rule (see that rule's own comment) because
       it fights Lenis smooth-scroll on index.html; doc pages don't load
       Lenis, so it's safe to re-enable just for them.
     - body font-size/line-height/font-family -- doc pages use 16px/1.65
       and "SF Pro Rounded" for body copy specifically (legal text reads
       better slightly smaller/looser), vs this file's own generic body
       rule (18px/1.5, --font-body = Google Sans for the marketing site).
   ============================================================ */

html:has(.doc-shell) {
  scroll-behavior: smooth;
}

body:has(.doc-shell) {
  font-size: 16px;
  line-height: 1.65;
  font-family: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.doc-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(20px, 5vw, 48px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.doc-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
}

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

.doc-back {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color .2s ease;
}

.doc-back:hover {
  color: var(--ink);
}

.doc-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 24px) 100px;
}

.doc-shell h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.doc-updated {
  margin: 0 0 40px;
  color: var(--muted);
  font-size: 14px;
}

.doc-shell h2 {
  margin: 44px 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.01em;
}

.doc-shell h3 {
  margin: 26px 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}

.doc-shell p {
  margin: 0 0 16px;
  color: var(--ink);
}

.doc-shell ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.doc-shell li {
  margin-bottom: 6px;
  color: var(--ink);
}

.doc-shell a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc-contact-block {
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.doc-contact-block p {
  margin: 0 0 4px;
}

.doc-contact-block p:last-child {
  margin-bottom: 0;
}

.doc-footer {
  border-top: 1px solid var(--line);
  padding: 28px clamp(20px, 5vw, 48px) 40px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.doc-footer a {
  color: var(--muted);
  text-decoration: none;
}

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

/* Website support chat -- a compact utility surface, kept independent from
   page sections so it can be mounted on the landing page and FAQ alike. */
.msob-chat-launcher {
  position: fixed;
  z-index: 50;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(80px, env(safe-area-inset-bottom));
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 0px solid rgba(255,255,255,.38);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: none;
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  /* Per explicit request ("cho biểu tượng chat nó có đung đưa lên xuống
     chậm chậm"): a slow, gentle bob -- small amplitude/long duration so it
     reads as "alive" without being distracting next to page content. */
  animation: msob-chat-bob 3.2s ease-in-out infinite;
}
@keyframes msob-chat-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .msob-chat-launcher { animation: none; }
}
.msob-chat-launcher img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.backupcore-launcher {
  position: fixed;
  z-index: 49;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(max(80px, env(safe-area-inset-bottom)) + 92px);
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(.82);
  transition: opacity .42s var(--ease), transform .52s var(--ease), visibility .42s;
}
.backupcore-launcher.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  animation: msob-chat-bob 3.2s ease-in-out .52s infinite;
}
.backupcore-launcher img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .backupcore-launcher, .backupcore-launcher.is-visible { animation: none; transition: none; }
}
@media (max-width: 640px) {
  .backupcore-launcher { right: 14px; bottom: calc(max(68px, env(safe-area-inset-bottom)) + 92px); width: 64px; height: 64px; }
}
.msob-chat-panel {
  position: fixed;
  z-index: 51;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 64px);
  width: min(370px, calc(100vw - 32px));
  height: min(540px, calc(100dvh - 110px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow), inset 0 1px 1px rgba(255,255,255,.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.msob-chat-panel[hidden] { display: none; }
.msob-chat-panel header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.msob-chat-close { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--panel) 78%, transparent); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.msob-chat-auth { display: grid; gap: 12px; padding: 20px 16px; }
.msob-chat-auth[hidden] { display: none; }
.msob-chat-auth p { margin: 0 0 4px; color: var(--muted); font-size: .92rem; }
.msob-chat-auth label { display: grid; gap: 6px; font-size: .82rem; color: var(--muted); }
.msob-chat-auth input, .msob-chat-compose textarea { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font-body); }
.msob-chat-auth input { height: 42px; padding: 0 10px; }
.msob-chat-auth button { min-height: 42px; border: 0; border-radius: var(--r); background: var(--blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.msob-chat-error { min-height: 1em; color: #d95c5c; }
.msob-chat-thread { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.msob-chat-thread[hidden] { display: none; }
.msob-chat-messages { flex: 1; overflow-y: auto; padding: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); }
.msob-chat-message { width: fit-content; max-width: 82%; margin: 0 0 12px; margin-left: auto; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 16px 16px 4px 16px; background: var(--panel); font-size: .9rem; white-space: pre-wrap; }
.msob-chat-message.support { margin-left: 0; margin-right: auto; border-color: var(--blue); border-radius: 16px 16px 16px 4px; background: var(--blue); color: #fff; }
.msob-chat-message small { display: block; margin-top: 4px; opacity: .68; font-size: .72rem; }
.msob-chat-empty { margin: 20px 0; color: var(--muted); text-align: center; font-size: .9rem; }
.msob-chat-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.msob-chat-compose textarea { min-height: 42px; max-height: 96px; padding: 10px; resize: none; }
.msob-chat-compose button { flex: 0 0 42px; height: 42px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; font-size: 20px; cursor: pointer; }
/* Per explicit request ("chỉnh lại badge thông báo khi có tin nhắn từ
   admin tại icon chat giống trên iphone (background đỏ, chữ và viền
   trắng"): iOS-style notification badge -- solid red circle, white bold
   number, white RING separating it from the icon behind (the piece that
   was missing before -- was just a flat red dot with no border at all).
   box-sizing:content-box so the border adds OUTSIDE min-width/height
   instead of eating into the circle's own content area (would otherwise
   shrink the number's available space and force smaller font/awkward
   clipping for 2-3 digit unread counts). */
.msob-chat-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b30; border: 2px solid #fff; box-sizing: content-box; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.msob-chat-badge[hidden] { display: none; }
.msob-faq-page { min-height: 100dvh; display: flex; flex-direction: column; }
.msob-faq-main { flex: 1 0 auto; min-height: calc(100dvh - 240px); padding-top: 150px; padding-bottom: 88px; }
.msob-faq-footer { margin-top: auto; }
.msob-faq-hero { max-width: 680px; margin: 0 auto 34px; text-align: center; }
.msob-faq-hero h1 { margin: 10px 0 14px; font: 800 clamp(2.2rem, 5vw, 4.25rem)/1 var(--font-display); letter-spacing: -.055em; color: var(--ink); }
.msob-faq-hero p:last-child { margin: 0; color: var(--muted); }
.msob-faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.msob-faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: inset 0 1px 1px rgba(255,255,255,.1); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.msob-faq-item[open] { border-color: color-mix(in srgb, var(--blue) 56%, var(--line)); background: color-mix(in srgb, var(--panel) 82%, var(--blue)); }
.msob-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; color: var(--ink); font-weight: 750; cursor: pointer; list-style: none; }
.msob-faq-item summary::-webkit-details-marker { display: none; }
.msob-faq-toggle { position: relative; flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; }
.msob-faq-toggle::before, .msob-faq-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .24s var(--ease); }
.msob-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.msob-faq-item[open] .msob-faq-toggle::after { transform: translate(-50%, -50%) rotate(0); }
.msob-faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.msob-faq-item[open] .msob-faq-answer { grid-template-rows: 1fr; }
.msob-faq-answer p { min-height: 0; margin: 0; padding: 0 22px 21px; color: var(--muted); line-height: 1.65; }
/* Per explicit request ("nếu trên điện thoại có hiển thị thì cho popup
   khung chat này nằm vừa vặn chính giữa trên màn hình"): on mobile the
   chat PANEL (not the launcher button, which stays bottom-right) centers
   on screen instead of anchoring to the bottom-right corner -- a small
   ~370px-wide box pinned to a corner is awkward to reach/read one-handed
   on a phone; centered + sized to the actual viewport (minus a safe
   margin) reads much closer to a native mobile chat sheet. */
@media (max-width: 600px) {
  .msob-chat-launcher { right: 14px; bottom: 68px; }
  .msob-chat-panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(92vw, 420px);
    height: min(78dvh, 620px);
  }
}


/* ── BACKUP CORE PAGE ─────────────────────────────────────────────── */
@scope (.backupcore-page) {


*{box-sizing:border-box}
html{scroll-behavior:smooth}

button{font:inherit} a{color:inherit;text-decoration:none}
.shell{width:min(1240px,calc(100% - 48px));margin:auto}
.topbar{
  position:sticky;top:16px;z-index:20;width:min(1120px,calc(100% - 32px));margin:16px auto 0;
  display:flex;align-items:center;gap:10px;padding:7px;border:1px solid var(--line);
  border-radius:999px;background:rgba(18,22,28,.78);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 20px 60px rgba(0,0,0,.28)
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;padding:6px 9px;white-space:nowrap}
.brandmark{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#f5f7fb;color:#0b0d11;font-weight:900}
.nav{display:flex;gap:4px;margin-left:auto}
.nav button,.theme{
  border:0;background:transparent;color:var(--muted);padding:9px 14px;border-radius:999px;cursor:pointer;
  font-size:12px;font-weight:700;transition:.25s var(--ease)
}
.nav button.active,.nav button:hover,.theme:hover{background:var(--soft);color:var(--ink)}
.theme{width:36px;padding:9px}
.hero{padding:88px 0 46px;text-align:center}
.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:800}
.hero h1{font-size:clamp(54px,7vw,96px);line-height:.9;letter-spacing:-.065em;margin:16px 0}
.gradient{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:720px;margin:0 auto;color:var(--muted);font-size:17px;line-height:1.55}
.hero-status{
  width:min(760px,100%);margin:32px auto 0;padding:13px 16px;border:1px solid var(--line);
  border-radius:18px;background:rgba(18,22,28,.72);display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--muted);font-size:11px
}
.live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.7)}}

.page{display:none;padding:24px 0 100px;animation:pageIn .55s var(--ease)}
.page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin:0 0 22px}
.page-head h2{font-size:36px;letter-spacing:-.045em;margin:5px 0 0}
.page-head p{max-width:450px;color:var(--muted);font-size:13px;line-height:1.5;margin:0}
.page-count{font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:800}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{
  grid-column:span 4;min-height:420px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--panel);
  box-shadow:0 24px 70px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;position:relative;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s
}
.card:hover{transform:translateY(-6px);border-color:rgba(93,168,255,.25);box-shadow:0 32px 80px rgba(0,0,0,.3),0 0 0 1px rgba(93,168,255,.04)}
.card.wide{grid-column:span 6}
.cardtop{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:800}
.cardtop b{color:var(--blue)}
.visual{
  height:220px;margin:10px 0 12px;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:18px;background:radial-gradient(circle at 50% 45%,rgba(93,168,255,.08),transparent 62%)
}
.copy{position:relative;z-index:2}.copy h3{font-size:21px;line-height:1.05;letter-spacing:-.035em;margin:0 0 8px}.copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.copy small{display:block;color:var(--blue);font-size:10px;margin-top:4px;letter-spacing:.02em}

/* shared visual primitives */
.node{border:1px solid var(--line);background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.file{width:92px;height:68px;border-radius:12px;padding:11px;display:flex;flex-direction:column;justify-content:space-between;font-size:8px;color:var(--muted)}
.file i{display:block;width:30px;height:4px;border-radius:99px;background:var(--soft)}
.file i:nth-child(2){width:55px}.file i:nth-child(3){width:42px}
.tag{padding:6px 9px;border-radius:999px;background:rgba(93,168,255,.1);border:1px solid rgba(93,168,255,.2);color:var(--blue);font-size:8px;font-weight:800}
.glow{box-shadow:0 0 30px rgba(93,168,255,.14)}

/* Smart Scan */
.scan-files{display:flex;gap:12px;align-items:center}
.scan-files .file:nth-child(1){animation:scanA 4s infinite}.scan-files .file:nth-child(2){animation:scanB 4s infinite}.scan-files .file:nth-child(3){animation:scanC 4s infinite}
@keyframes scanA{0%,15%{transform:translateX(-12px);opacity:.25}25%,100%{transform:none;opacity:1}}
@keyframes scanB{0%,25%{transform:translateX(-12px);opacity:.25}35%,100%{transform:none;opacity:1}}
@keyframes scanC{0%,35%{transform:translateX(-12px);opacity:.25}45%,100%{transform:none;opacity:1}}
.scan-lens{position:absolute;width:84px;height:84px;border:3px solid var(--blue);border-radius:50%;box-shadow:0 0 40px rgba(93,168,255,.2);animation:lens 4s infinite}
.scan-lens:after{content:"";position:absolute;width:26px;height:3px;background:var(--blue);right:-19px;bottom:3px;transform:rotate(45deg);border-radius:99px}
@keyframes lens{0%,20%{transform:translateX(-120px);opacity:0}30%,70%{transform:translateX(0);opacity:1}80%,100%{transform:translateX(120px);opacity:0}}

/* USN */
.timeline{width:82%;height:2px;background:var(--soft);position:relative}
.timeline:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.dot{position:absolute;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--panel);border:2px solid var(--blue)}
.dot:nth-child(1){left:10%;animation:jump 3s infinite}.dot:nth-child(2){left:42%;animation:jump 3s .6s infinite}.dot:nth-child(3){left:74%;animation:jump 3s 1.2s infinite}
.oslabels{position:absolute;top:35px;display:flex;gap:8px}.oslabels span{padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:8px}
@keyframes jump{50%{transform:translateY(-12px);box-shadow:0 0 22px rgba(93,168,255,.55)}}

/* Search */
.searchbox{width:88%;border:1px solid var(--line);border-radius:13px;background:var(--soft);padding:12px;color:var(--muted);font-size:10px;position:absolute;top:28px}
.searchbox b{float:right;color:var(--blue)}
.results{width:88%;position:absolute;top:76px;display:grid;gap:6px}.result{padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);display:flex;gap:8px;align-items:center;font-size:9px;animation:resultIn 4s infinite}.result:nth-child(2){animation-delay:.5s}.result:nth-child(3){animation-delay:1s}.result i{width:7px;height:7px;background:var(--blue);border-radius:2px}.result span:nth-child(2){flex:1}.result em{font-style:normal;color:var(--muted)}
@keyframes resultIn{0%,12%{opacity:0;transform:translateY(6px)}20%,75%{opacity:1;transform:none}85%,100%{opacity:.25}}

/* Version */
.versions{display:flex;flex-direction:column;gap:7px;width:82%}.ver{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--soft);font-size:9px}.ver b{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(93,168,255,.1);color:var(--blue)}.ver span{flex:1;color:var(--muted)}.ver strong{font-size:8px}.ver:nth-child(1){animation:version 3.6s infinite}.ver:nth-child(2){animation:version 3.6s .4s infinite}.ver:nth-child(3){animation:version 3.6s .8s infinite}
@keyframes version{0%,15%{opacity:.35;transform:translateX(-12px)}28%,80%{opacity:1;transform:none}}

/* Schedule */
.clock{width:112px;height:112px;border:1px solid var(--line);border-radius:50%;background:var(--soft);position:relative;box-shadow:inset 0 0 0 9px rgba(255,255,255,.02)}
.hand{position:absolute;left:50%;bottom:50%;width:2px;background:var(--ink);transform-origin:bottom;border-radius:99px}.hour{height:29px;animation:clock 8s linear infinite}.minute{height:40px;background:var(--blue);animation:clock 2s linear infinite}
.clock:after{content:"";position:absolute;width:6px;height:6px;background:var(--blue);border-radius:50%;left:calc(50% - 3px);top:calc(50% - 3px)}
@keyframes clock{to{transform:rotate(360deg)}}
.schedule-tag{position:absolute;bottom:22px;display:flex;gap:5px}.schedule-tag span{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:var(--soft);font-size:8px;color:var(--muted)}.schedule-tag .on{background:var(--blue);color:white}

/* Duplicate */
.dup-stage{position:absolute;inset:25px 30px}.dup{position:absolute;width:100px;height:62px;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:10px;font-size:8px;animation:dupIn 5s infinite}.dup:before{content:"IMG_2048.jpg";display:block;color:var(--ink);margin-bottom:8px}.dup:after{content:"2.4 MB • SHA256";color:var(--muted)}
.dup.a{left:0;top:70px}.dup.b{right:0;top:30px;animation-delay:.9s}.dup.c{right:0;bottom:5px;animation-delay:1.8s}.dup-link{position:absolute;left:29%;top:100px;width:42%;height:1px;background:var(--blue)}.delete{position:absolute;right:8px;top:92px;padding:8px 11px;border-radius:10px;background:rgba(255,111,120,.1);color:var(--red);font-size:8px;animation:del 5s infinite}
@keyframes dupIn{0%,10%{opacity:0;transform:scale(.9)}20%,75%{opacity:1;transform:none}90%,100%{opacity:.25}}
@keyframes del{0%,55%{opacity:0;transform:translateY(6px)}65%,82%{opacity:1;transform:none}95%,100%{opacity:0}}

/* Orphan */
.orphan-stage{display:flex;align-items:center;gap:14px}.folder{width:95px;height:70px;border-radius:10px 10px 13px 13px;border:1px solid var(--line);background:var(--soft);display:grid;place-items:center;font-size:9px;position:relative}.folder:before{content:"";position:absolute;left:8px;top:-7px;width:34px;height:9px;background:var(--soft);border:1px solid var(--line);border-bottom:0;border-radius:5px 5px 0 0}.orphan-arrow{color:var(--red);font-size:20px;animation:blink 2s infinite}.trash{position:absolute;bottom:18px;right:25%;padding:8px 12px;border-radius:9px;background:rgba(255,111,120,.1);color:var(--red);font-size:8px;animation:trash 4s infinite}
@keyframes blink{50%{opacity:.25}}@keyframes trash{0%,45%{opacity:0;transform:translateY(8px)}55%,85%{opacity:1;transform:none}100%{opacity:0}}

/* Preflight */
.meter{width:82%;height:28px;border-radius:99px;background:var(--soft);border:1px solid var(--line);overflow:hidden;position:relative}.meter i{display:block;height:100%;width:68%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--green));animation:meter 4s infinite}.meter span{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:800}
@keyframes meter{0%,100%{width:68%}50%{width:42%}}
.checks{position:absolute;bottom:27px;display:flex;gap:7px}.checks span{padding:7px 9px;border-radius:9px;background:var(--soft);border:1px solid var(--line);font-size:8px;color:var(--muted)}.checks b{color:var(--green)}

/* Chart */
.chart{width:88%;height:155px;position:relative}.chart svg{width:100%;height:100%}.chart .area{fill:rgba(93,168,255,.08)}.chart .line{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;animation:draw 4s ease-in-out infinite}.chart .forecast{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:6 6}
@keyframes draw{15%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:520}}

/* Top files */
.toplist{width:90%;display:grid;gap:6px}.row{display:grid;grid-template-columns:24px 1fr auto;gap:8px;padding:9px;border-radius:9px;background:var(--soft);font-size:8px;align-items:center}.row b{color:var(--muted)}.row strong{font-size:8px}.row{animation:rank 4s infinite}.row:nth-child(2){animation-delay:.15s}.row:nth-child(3){animation-delay:.3s}.row:nth-child(4){animation-delay:.45s}
@keyframes rank{0%,12%{transform:translateX(-12px);opacity:.2}24%,80%{transform:none;opacity:1}}

/* Reclaim */
.reclaim{display:flex;align-items:center;gap:25px}.ring{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0 76%,var(--soft) 76%);position:relative}.ring:after{content:"";position:absolute;inset:10px;background:var(--panel);border-radius:50%}.ring b{position:relative;z-index:1;font-size:23px}.ring small{display:block;text-align:center;color:var(--muted);font-size:8px}.reclaim-list{display:grid;gap:10px;font-size:8px;color:var(--muted)}.reclaim-list b{display:block;color:var(--ink);font-size:11px}

/* Ransom */
.shield{width:86px;height:105px;clip-path:polygon(50% 0,92% 16%,84% 76%,50% 100%,16% 76%,8% 16%);background:linear-gradient(145deg,var(--green),#218e6a);display:grid;place-items:center;color:#07110c;font-size:28px;filter:drop-shadow(0 20px 25px rgba(88,211,155,.18));animation:shield 3s infinite}
@keyframes shield{50%{transform:scale(1.05);filter:drop-shadow(0 0 35px rgba(88,211,155,.3))}}
.threat{display:grid;gap:7px}.threat i{width:120px;height:6px;border-radius:99px;background:var(--soft)}.threat i:nth-child(1){width:75px;background:var(--red)}.threat i:nth-child(2){width:105px;background:var(--orange)}.threat i:nth-child(3){width:88px;background:var(--red)}.alert{position:absolute;bottom:25px;font-size:8px;letter-spacing:.12em;color:var(--red);animation:blink 1.2s infinite}

/* Logs */
.logs{width:90%;display:grid;gap:6px}.log{display:grid;grid-template-columns:18px 1fr auto;gap:8px;padding:9px;border-radius:9px;background:var(--soft);font-size:8px}.ok{color:var(--green)}.warn{color:var(--orange)}.retry{color:var(--blue)}.log b{color:var(--muted);font-weight:600}

/* Rename */
.rename{display:flex;align-items:center;gap:13px}.folder2{padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--soft);font-size:9px}.match{font-size:18px;color:var(--green);font-weight:900;text-align:center}.match small{display:block;font-size:7px;color:var(--muted);font-weight:500}.spark{position:absolute;color:var(--green);font-size:24px;animation:spark 2.5s infinite}
@keyframes spark{0%,100%{opacity:.2;transform:scale(.7) rotate(-15deg)}50%{opacity:1;transform:scale(1) rotate(0)}}

/* Retry */
.retrylist{width:90%;display:grid;gap:6px}.retryrow{display:grid;grid-template-columns:22px 1fr auto;padding:9px;border-radius:9px;background:var(--soft);font-size:8px}.retryrow i{font-style:normal;color:var(--orange)}.retryrow.done i{color:var(--green)}

/* Reconnect */
.devices{display:flex;align-items:center;gap:14px}.device{width:58px;height:58px;border:1px solid var(--line);border-radius:15px;background:var(--soft);display:grid;place-items:center;color:var(--blue);font-size:21px}.connect{width:130px;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);animation:connect 1.8s infinite}.ready{position:absolute;bottom:28px;font-size:8px;letter-spacing:.1em;color:var(--green)}
@keyframes connect{50%{transform:scaleX(.45);opacity:.3}}

/* Forecast */
.forecast-value{text-align:left;width:84%;font-size:9px;color:var(--muted)}.forecast-value b{display:block;color:var(--ink);font-size:30px;letter-spacing:-.05em}.forecast-graph{width:84%;height:110px}.forecast-graph svg{width:100%;height:100%}.nowline{fill:none;stroke:var(--blue);stroke-width:3}.futureline{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:6 6}

/* Hard link */
.hl{width:88%;height:150px;position:relative}.hlfile{position:absolute;padding:9px 12px;border:1px solid var(--line);background:var(--soft);border-radius:10px;font-size:8px}.hlfile.a{left:0;top:18px}.hlfile.b{left:0;top:88px}.hlfile.c{left:27%;top:53px}.hl svg{position:absolute;inset:0;width:100%;height:100%;stroke:var(--blue);fill:none;stroke-width:2}.datablock{position:absolute;right:2%;top:47px;width:82px;height:55px;border-radius:12px;background:rgba(93,168,255,.1);border:1px solid rgba(93,168,255,.25);display:grid;place-items:center;color:var(--blue);font-size:8px}

/* pager */
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:30px}.pager button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:10px 15px;cursor:pointer;font-size:11px}.pager button:disabled{opacity:.35;cursor:default}.dots{display:flex;gap:5px}.dotpage{width:6px;height:6px;border-radius:50%;background:var(--soft);cursor:pointer}.dotpage.active{width:22px;border-radius:99px;background:var(--blue)}
.footer{padding:30px 0 50px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;text-align:center}
@media(max-width:900px){.card,.card.wide{grid-column:span 6}.page-head{display:block}.page-head p{margin-top:10px}.nav button{padding-inline:9px}}
@media(max-width:620px){.shell{width:min(100% - 24px,1240px)}.topbar{top:8px}.brand{font-size:12px}.nav button{display:none}.hero{padding-top:70px}.hero h1{font-size:54px}.grid{grid-template-columns:1fr}.card,.card.wide{grid-column:1}.card{min-height:390px}.visual{height:205px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}



/* =========================================================
   msoBACKUP Backup Core — Light / Color Category Redesign
   Reference: supplied bright multi-card UI
   ========================================================= */



html,


/* top bar — brighter, closer to the supplied reference */
.topbar{
  top:14px;
  margin-top:14px;
  width:min(1180px,calc(100% - 36px));
  padding:8px;
  border:1px solid rgba(30,50,75,.10);
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 55px rgba(44,67,94,.13);
  backdrop-filter:blur(24px) saturate(145%);
}
.brand{font-size:16px;color:#15181d}
.brandmark{
  width:32px;height:32px;border-radius:10px;
  color:#fff;
  background:linear-gradient(145deg,#168ff0,#8055c7);
  box-shadow:0 7px 18px rgba(22,143,240,.24);
}
.nav button,.theme{color:#66717e}
.nav button.active,.nav button:hover,.theme:hover{
  background:#edf3f9;color:#15181d;
}

/* larger hero */
.hero{padding:76px 0 40px}
.eyebrow{font-size:11px;color:#697583}
.hero h1{
  font-size:clamp(60px,7.2vw,104px);
  margin:18px 0 18px;
}
.hero p{
  max-width:860px;
  color:#4f5965;
  font-size:19px;
  line-height:1.55;
}
.hero-status{
  width:min(900px,100%);
  margin-top:30px;
  padding:14px 18px;
  border:1px solid rgba(20,35,55,.09);
  background:rgba(255,255,255,.76);
  box-shadow:0 12px 35px rgba(44,67,94,.08);
  color:#66717e;
  font-size:12px;
}
.live{background:#20b778;box-shadow:0 0 14px rgba(32,183,120,.42)}

/* page heading */
.page{padding:18px 0 82px}
.page-head{margin-bottom:24px}
.page-head h2{font-size:42px}
.page-head p{max-width:560px;font-size:14px;color:#626c78}
.page-count{font-size:11px;color:#778391}

/* card system: more visual area, larger text, strong category color */
.grid{gap:18px}
.card{
  min-height:455px;
  padding:22px;
  border:1px solid rgba(25,43,65,.09);
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,253,.98)),
    var(--panel);
  box-shadow:
    0 18px 45px rgba(43,63,84,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .3s;
}
.card:hover{
  transform:translateY(-7px);
  border-color:color-mix(in srgb,var(--blue) 30%,transparent);
  box-shadow:
    0 28px 65px rgba(43,63,84,.13),
    0 0 0 1px color-mix(in srgb,var(--blue) 9%,transparent);
}
.card.wide{min-height:455px}

.card::before{
  content:"";
  position:absolute;
  left:22px;right:22px;top:0;height:4px;
  border-radius:0 0 10px 10px;
  background:linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--blue) 40%,white));
  opacity:.95;
}
.card::after{
  content:"";
  position:absolute;
  width:220px;height:220px;
  right:-75px;bottom:-90px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue) 12%,transparent),transparent 68%);
  pointer-events:none;
}

.cardtop{
  position:relative;z-index:2;
  min-height:35px;
  align-items:center;
  font-size:10px;
  letter-spacing:.12em;
  color:#697583;
}
.cardtop span{
  padding:8px 11px;
  border-radius:11px;
  background:color-mix(in srgb,var(--blue) 12%,transparent);
  color:var(--blue);
  border:1px solid color-mix(in srgb,var(--blue) 17%,transparent);
  font-weight:900;
}
.cardtop b{
  color:var(--blue);
  font-size:10px;
}

/* Feature accents stay tied to feature number after cards are split into pages. */






/* large visual area */
.visual{
  height:255px;
  margin:8px -2px 10px;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 70%),
    linear-gradient(145deg,rgba(246,249,253,.95),rgba(238,243,248,.70));
  border:1px solid rgba(30,50,75,.055);
}
.visual::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.45),transparent 42%,rgba(255,255,255,.16));
  pointer-events:none;
}

/* scale the existing illustrations */
.copy{padding:0 3px;position:relative;z-index:3}
.copy h3{
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.04em;
  margin:0 0 10px;
  color:#171b21;
}
.copy h3 small{
  font-size:12px;
  color:var(--blue);
  margin-top:6px;
  letter-spacing:.01em;
}
.copy p{
  margin:0;
  max-width:95%;
  color:#59636f;
  font-size:14px;
  line-height:1.5;
}

/* make CSS illustrations materially larger and more colorful */
.file{
  width:125px;height:88px;border-radius:16px;padding:14px;
  background:linear-gradient(145deg,#fff,#e8f3ff);
  border:1px solid rgba(23,143,233,.20);
  box-shadow:0 14px 30px rgba(23,143,233,.13);
  color:#6b7581;font-size:9px;
}
.file i{width:40px;height:5px;background:#b9d8f7}
.file i:nth-child(2){width:76px}.file i:nth-child(3){width:58px}
.scan-files{gap:18px;transform:scale(1.02)}
.scan-lens{
  width:105px;height:105px;
  border-color:#168fe9;
  box-shadow:0 0 45px rgba(23,143,233,.28);
}
.scan-lens:after{background:#168fe9;width:34px;right:-25px}

.timeline{width:82%;height:3px;background:#dfe7ef}
.timeline:before{background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.dot{
  width:17px;height:17px;top:-7px;
  background:#fff;border:3px solid var(--blue);
  box-shadow:0 7px 16px color-mix(in srgb,var(--blue) 12%,transparent);
}
.oslabels{top:42px}
.oslabels span{
  padding:9px 12px;
  background:#fff;
  border:1px solid rgba(30,50,75,.09);
  color:#4f5965;
  font-size:9px;
  box-shadow:0 7px 18px rgba(43,63,84,.07);
}

.searchbox{
  width:90%;top:34px;
  padding:15px;
  background:#fff;border-color:rgba(30,50,75,.10);
  color:#697583;font-size:12px;
  box-shadow:0 10px 25px rgba(43,63,84,.08);
}
.searchbox b{color:var(--blue)}
.results{width:90%;top:88px;gap:8px}
.result{
  padding:12px;
  background:#fff;border-color:rgba(30,50,75,.08);
  font-size:10px;
  box-shadow:0 7px 18px rgba(43,63,84,.055);
}
.result i{width:9px;height:9px;background:var(--blue)}
.result em{color:#78838f}

.versions{width:84%;gap:9px}
.ver{
  padding:12px;
  background:#fff;border-color:rgba(30,50,75,.08);
  font-size:10px;
  box-shadow:0 7px 18px rgba(43,63,84,.055);
}
.ver b{
  width:34px;height:34px;
  background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue);
}
.ver strong{font-size:9px;color:#59636f}

.clock{
  width:138px;height:138px;
  background:#fff;border-color:rgba(30,50,75,.10);
  box-shadow:inset 0 0 0 10px rgba(30,50,75,.025),0 15px 30px rgba(43,63,84,.08);
}
.minute{background:var(--blue)}
.clock:after{background:var(--blue)}
.schedule-tag{bottom:28px}
.schedule-tag span{
  width:29px;height:29px;background:#fff;border:1px solid rgba(30,50,75,.08);
  color:#65707c;font-size:9px;
}
.schedule-tag .on{background:var(--blue);color:#fff;border-color:var(--blue)}

.dup-stage{inset:32px 40px}
.dup{
  width:132px;height:78px;
  background:#fff;border-color:rgba(30,50,75,.10);
  border-radius:15px;padding:13px;font-size:9px;
  box-shadow:0 12px 26px rgba(43,63,84,.08);
}
.dup:before{margin-bottom:10px}
.dup-link{background:var(--blue);height:2px}
.delete{
  padding:9px 13px;
  background:rgba(217,162,26,.14);
  color:#b07c00;
  font-size:9px;
  border:1px solid rgba(217,162,26,.18);
}

.orphan-stage{gap:20px;transform:scale(1.08)}
.folder{
  width:125px;height:86px;
  background:linear-gradient(145deg,#fff7cf,#fff);
  border-color:rgba(217,162,26,.28);
  box-shadow:0 13px 27px rgba(217,162,26,.12);
  font-size:10px;color:#7b650f;
}
.folder:before{background:#ffe99b;border-color:rgba(217,162,26,.25)}
.orphan-arrow{color:#d9a21a;font-size:27px}
.trash{
  bottom:20px;right:22%;
  background:rgba(217,162,26,.14);
  color:#b07c00;
  font-size:9px;
  border:1px solid rgba(217,162,26,.18);
}

.meter{
  width:84%;height:36px;
  background:#e7edf3;border-color:rgba(30,50,75,.08);
}
.meter i{background:linear-gradient(90deg,#ef8a18,#f3bd35,#18a06c)}
.meter span{font-size:10px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.checks{bottom:30px}
.checks span{
  padding:8px 11px;background:#fff;border-color:rgba(30,50,75,.08);
  font-size:9px;color:#697583;box-shadow:0 6px 15px rgba(43,63,84,.06)
}
.checks b{color:#18a06c}

.chart{width:91%;height:180px}
.chart .area{fill:color-mix(in srgb,var(--blue) 10%,transparent)}
.chart .line{stroke:var(--blue);stroke-width:4}
.chart .forecast{stroke:#ef8a18;stroke-width:3}

.toplist{width:91%;gap:8px}
.row{
  grid-template-columns:30px 1fr auto;
  padding:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(30,50,75,.07);
  font-size:10px;
  box-shadow:0 7px 18px rgba(43,63,84,.055);
}
.row b{color:var(--blue);font-size:10px}
.row strong{font-size:10px}

.reclaim{gap:30px}
.ring{
  width:150px;height:150px;
  background:conic-gradient(#d9a21a 0 76%,#edf1f5 76%);
  box-shadow:0 14px 30px rgba(217,162,26,.10);
}
.ring:after{inset:12px;background:#fff}
.ring b{font-size:28px;color:#24282e}
.reclaim-list{font-size:10px;color:#697583}
.reclaim-list b{font-size:13px;color:#24282e}

.shield{
  width:108px;height:132px;
  background:linear-gradient(145deg,#22b87d,#118a60);
  filter:drop-shadow(0 20px 25px rgba(24,160,108,.18));
}
.threat i{height:7px;background:#e7edf3}
.threat i:nth-child(1){background:#df526d}
.threat i:nth-child(2){background:#ef8a18}
.threat i:nth-child(3){background:#df526d}
.alert{
  bottom:25px;color:#df526d;
  font-size:9px;
}

.logs{width:91%;gap:8px}
.log{
  padding:12px;
  border-radius:11px;
  background:#fff;
  border:1px solid rgba(30,50,75,.07);
  font-size:10px;
  box-shadow:0 7px 18px rgba(43,63,84,.055);
}

.rename{gap:18px;transform:scale(1.08)}
.folder2{
  padding:17px;
  background:#fff;
  border-color:rgba(128,85,199,.18);
  box-shadow:0 10px 22px rgba(128,85,199,.08);
  font-size:10px;
}
.match{font-size:22px;color:#8055c7}
.match small{font-size:8px}
.spark{color:#8055c7;font-size:28px}

.retrylist{width:91%;gap:8px}
.retryrow{
  padding:12px;
  border-radius:11px;
  background:#fff;
  border:1px solid rgba(30,50,75,.07);
  font-size:10px;
  box-shadow:0 7px 18px rgba(43,63,84,.055);
}
.retryrow i{color:#ef8a18}
.retryrow.done i{color:#18a06c}

.devices{gap:18px;transform:scale(1.15)}
.device{
  width:70px;height:70px;
  background:#fff;
  border-color:rgba(22,143,233,.18);
  color:#168fe9;
  box-shadow:0 12px 25px rgba(22,143,233,.10);
}
.connect{width:155px;background:linear-gradient(90deg,transparent,#168fe9,transparent)}
.ready{bottom:27px;color:#18a06c;font-size:9px}

.forecast-value{width:87%;font-size:10px}
.forecast-value b{font-size:40px;color:#24282e}
.forecast-graph{width:87%;height:125px}
.nowline{stroke:#ef8a18;stroke-width:4}
.futureline{stroke:#8055c7;stroke-width:3}

.hl{width:91%;height:175px}
.hlfile{
  padding:11px 14px;
  background:#fff;
  border-color:rgba(128,85,199,.15);
  border-radius:12px;
  font-size:9px;
  box-shadow:0 8px 20px rgba(43,63,84,.06);
}
.hlfile.a{top:20px}.hlfile.b{top:110px}.hlfile.c{top:65px}
.hl svg{stroke:#8055c7;stroke-width:3}
.datablock{
  right:1%;top:55px;width:105px;height:68px;
  background:rgba(128,85,199,.10);
  border-color:rgba(128,85,199,.20);
  color:#8055c7;font-size:9px;
}

/* pager/footer */
.pager{margin-top:28px}
.pager button{
  border:1px solid rgba(30,50,75,.10);
  background:#fff;color:#313943;
  box-shadow:0 7px 20px rgba(43,63,84,.07);
}
.pager button:hover:not(:disabled){border-color:rgba(22,143,233,.25)}
.dotpage{background:#dce4ec}
.dotpage.active{background:#168fe9}
.footer{
  border-top:1px solid rgba(30,50,75,.08);
  color:#75808c;
}

/* light-mode toggle still works, but the default is now light */
body.light{
  background:
    radial-gradient(900px 620px at 6% 0%,rgba(25,174,234,.10),transparent 66%),
    radial-gradient(900px 620px at 96% 8%,rgba(128,85,199,.09),transparent 66%),
    var(--bg);
}

/* responsive: keep visual proportions similar to the reference */
@media(max-width:1100px){
  .hero h1{font-size:76px}
  .card,.card.wide{min-height:430px}
  .visual{height:235px}
  .copy h3{font-size:25px}
}
@media(max-width:900px){
  .card,.card.wide{min-height:420px}
  .visual{height:225px}
}
@media(max-width:620px){
  .hero{padding-top:64px}
  .hero h1{font-size:58px}
  .hero p{font-size:16px}
  .card{min-height:410px;padding:18px}
  .visual{height:220px}
  .copy h3{font-size:24px}
  .copy p{font-size:13px}
}



/* Full-card color treatment:
   - category color washes cover the whole card
   - no separate framed visual box
   - illustration area becomes edge-to-edge within the card
*/
.card{
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--blue) 13%,white) 0%,
      color-mix(in srgb,var(--blue) 7%,white) 48%,
      color-mix(in srgb,var(--blue) 3%,white) 100%);
  border-color:color-mix(in srgb,var(--blue) 16%,transparent);
  box-shadow:
    0 18px 48px color-mix(in srgb,var(--blue) 10%,rgba(43,63,84,.10)),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* Remove the inner "picture frame" */
.visual{
  height:285px;
  margin:4px -22px 12px;
  border-radius:0;
  border:0;
  background:
    radial-gradient(circle at 50% 48%,
      color-mix(in srgb,var(--blue) 15%,transparent),
      transparent 68%);
  overflow:hidden;
}

/* Let the illustration breathe across the full card width */
.visual::after{
  display:none;
}

.copy{
  padding:0 2px 3px;
}

.copy h3{
  color:#15191f;
  font-size:29px;
}

.copy p{
  color:#4f5965;
  font-size:14px;
}

/* Larger visual objects */
.scan-files{transform:scale(1.16)}
.scan-lens{width:115px;height:115px}

.searchbox{width:92%;top:34px}
.results{width:92%;top:91px}

.versions{width:88%}
.toplist,.logs,.retrylist{width:94%}

.chart{width:94%;height:205px}
.forecast-graph{width:90%;height:135px}

.hl{width:94%;height:190px}

/* Full-width color wash also continues under the lower content */
.card::after{
  width:360px;
  height:360px;
  right:-130px;
  bottom:-170px;
  background:radial-gradient(
    circle,
    color-mix(in srgb,var(--blue) 12%,transparent),
    transparent 68%
  );
}

/* Make card hover feel like the whole colored panel lifts */
.card:hover{
  transform:translateY(-7px);
  border-color:color-mix(in srgb,var(--blue) 28%,transparent);
  box-shadow:
    0 28px 68px color-mix(in srgb,var(--blue) 13%,rgba(43,63,84,.13)),
    0 0 0 1px color-mix(in srgb,var(--blue) 7%,transparent);
}

@media(max-width:1100px){
  .visual{height:265px;margin-left:-22px;margin-right:-22px}
  .copy h3{font-size:27px}
}
@media(max-width:620px){
  .visual{
    height:245px;
    margin-left:-18px;
    margin-right:-18px;
  }
  .copy h3{font-size:25px}
}



/* Page-sized horizontal feature deck; falls back to the standalone palette above. */

html,

.topbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);margin:0;z-index:110;pointer-events:none}
.topbar>*{pointer-events:auto}.topbar-label{margin-left:auto;padding:0 14px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.14em}
.core-deck{width:100%;height:calc(100svh - 112px);margin:112px 0 0;position:relative;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;touch-action:pan-y;scrollbar-width:none;-ms-overflow-style:none}
.core-deck::-webkit-scrollbar{display:none}
.page{display:flex;flex:0 0 100%;width:100%;height:100%;min-width:0;padding:12px max(24px,calc((100vw - var(--shell))/2)) 42px;scroll-snap-align:start;scroll-snap-stop:always;flex-direction:column;animation:pageIn .42s var(--ease)}
.page.active{display:flex}
.page-head{flex:0 0 auto;align-items:end;margin:0 0 14px;gap:20px}
.page-head h2{font:700 clamp(30px,3.5vw,48px)/1.05 var(--font-display,-apple-system,sans-serif);letter-spacing:-.045em}
.page-head p{font-size:15px;max-width:520px}
.grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}
.card,.card.wide{grid-column:span 2;grid-row:auto;min-width:0;min-height:0;height:100%;padding:20px;border-radius:var(--r-lg);display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.72fr);grid-template-rows:auto 1fr;column-gap:12px;align-items:center}
.cardtop{grid-column:1/-1;align-self:start}
.card:nth-child(1),.card:nth-child(2){grid-column:span 3;grid-row:1}
.card:nth-child(n+3){grid-column:span 2;grid-row:2}
.grid:has(>.card:nth-child(4):last-child) .card:nth-child(n+3){grid-column:span 3}
.grid:has(>.card:nth-child(3):last-child) .card:nth-child(3){grid-column:1/-1}
.visual{grid-column:2;grid-row:2;min-width:0;width:100%;height:100%;min-height:110px;max-height:210px;margin:0;border-radius:16px;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 68%);transform:scale(.88)}
.copy{grid-column:1;grid-row:2;align-self:center}
.copy h3{font:700 clamp(20px,1.8vw,27px)/1.08 var(--font-display,-apple-system,sans-serif);margin:0 0 10px}
.copy p{font-size:15px;line-height:1.4}
.copy small{color:var(--blue)}
.cardtop{font-size:10px}.cardtop b{color:var(--blue)}
.pager{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);margin:0;z-index:5;gap:12px}
.page-hint{font-size:10px;color:var(--muted)}.dots{align-items:center}.dotpage{display:block}
.footer{display:none}
@media(max-width:900px){.page{padding-inline:20px}.page-head{display:flex}.grid{gap:10px}.card,.card.wide{padding:15px;grid-template-columns:minmax(0,1fr) minmax(95px,.6fr)}.copy h3{font-size:19px}.copy p{font-size:13px}}
@media(max-width:620px){.page{padding:8px 12px 38px}.page-head{display:block;margin-bottom:10px}.page-head h2{font-size:27px}.page-head p{font-size:12px;margin-top:6px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}.card,.card.wide{grid-column:span 1!important;grid-row:span 1!important;padding:10px;border-radius:17px;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch}.card:first-child{grid-column:span 2!important;grid-row:span 1!important}.cardtop{font-size:7px}.visual{grid-column:1;grid-row:2;min-height:0;height:100%;max-height:100px;width:85%;justify-self:end;align-self:center;transform:scale(.78);transform-origin:right center}.copy{grid-column:1/-1;grid-row:3;align-self:end}.copy h3{font-size:16px;margin-bottom:5px}.copy p{font-size:11px;line-height:1.25}.page-hint{font-size:9px}.pager{bottom:12px}}
@media(max-height:760px) and (min-width:621px){.page{padding-top:4px;padding-bottom:34px}.page-head{margin-bottom:8px}.page-head h2{font-size:30px}.page-head p{font-size:12px}.grid{gap:8px}.card,.card.wide{padding:12px}.copy h3{font-size:18px}.copy p{font-size:12px}.visual{min-height:80px}}



}

/* Backup Core feature deck: shared site tokens, no page-owned palette. */
html:has(.backupcore-page), body.backupcore-page { height:100%; min-height:100%; overflow:hidden; overscroll-behavior-x:none; }
body.backupcore-page { background:var(--bg); color:var(--ink); font-family:var(--font-body); }
@scope (.backupcore-page) {
  .core-deck { width:100%; height:calc(100svh - 112px); margin:112px 0 0; display:flex; position:relative; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; touch-action:pan-y; scrollbar-width:none; }
  .core-deck::-webkit-scrollbar { display:none; }
  .page { display:flex; flex:0 0 100%; width:100%; height:100%; min-width:0; padding:12px max(24px,calc((100vw - var(--shell))/2)) 50px; flex-direction:column; scroll-snap-align:start; scroll-snap-stop:always; }
  .page-head { flex:0 0 auto; align-items:end; margin:0 0 14px; gap:20px; }
  .page-head h2 { font:700 clamp(28px,3vw,42px)/1.05 var(--font-display); color:var(--ink); }
  .page-head p { max-width:520px; color:var(--muted); font-size:14px; }
  .grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; }
  .card,.card.wide { grid-column:span 2; grid-row:2; min-width:0; min-height:0; height:100%; padding:18px; display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.72fr); grid-template-rows:auto 1fr; column-gap:12px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); }
  .card:nth-child(1),.card:nth-child(2) { grid-column:span 3; grid-row:1; }
  .card:nth-child(n+3) { grid-column:span 2; grid-row:2; }
  .grid:has(>.card:nth-child(4):last-child) .card:nth-child(n+3) { grid-column:span 3; }
  .grid:has(>.card:nth-child(3):last-child) .card:nth-child(3) { grid-column:1/-1; }
  .card::before { background:var(--blue); }
  .card::after { background:radial-gradient(circle,color-mix(in srgb,var(--blue) 14%,transparent),transparent 68%); }
  .cardtop { grid-column:1/-1; align-self:start; color:var(--muted); }
  .cardtop span { background:color-mix(in srgb,var(--blue) 12%,var(--panel)); color:var(--blue); }
  .cardtop b { color:var(--blue); }
  .visual { grid-column:2; grid-row:2; min-width:0; width:100%; height:100%; min-height:100px; max-height:220px; margin:0; transform:scale(.88); }
  .copy { grid-column:1; grid-row:2; align-self:center; }
  .copy h3 { color:var(--ink); font:700 clamp(18px,1.65vw,25px)/1.08 var(--font-display); }
  .copy p { color:var(--muted); font-size:14px; line-height:1.42; }
  .pager { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); margin:0; z-index:5; gap:12px; }
  .page-hint { color:var(--muted); font-size:11px; }
  .footer { display:none; }
  @media(max-width:900px) {
    .core-deck { height:calc(100svh - 96px); margin-top:96px; }
    .page { padding-inline:18px; }
    .grid { gap:9px; }
    .card,.card.wide { padding:12px; grid-template-columns:minmax(0,1fr) minmax(80px,.55fr); }
    .copy h3 { font-size:18px; }
    .copy p { font-size:12px; }
  }
  @media(max-width:620px) {
    .core-deck { height:calc(100svh - 84px); margin-top:84px; }
    .page { padding:8px 12px 38px; }
    .page-head { display:block; margin-bottom:8px; }
    .page-head h2 { font-size:24px; }
    .page-head p { font-size:11px; margin-top:4px; }
    .grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:7px; }
    .card,.card.wide { grid-column:span 1!important; grid-row:span 1!important; padding:9px; border-radius:var(--r-lg); grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto; }
    .card:nth-child(1) { grid-column:span 2!important; }
    .visual { grid-column:1; grid-row:2; min-height:0; max-height:90px; width:82%; justify-self:end; transform:scale(.78); transform-origin:right center; }
    .copy { grid-column:1/-1; grid-row:3; align-self:end; }
    .copy h3 { font-size:15px; margin-bottom:4px; }
    .copy p { font-size:10px; line-height:1.25; }
    .pager { bottom:10px; }
  }
}

@scope (.backupcore-page) {
  .page, .page.active { display:flex; flex-direction:column; }
  .card:nth-child(1)::before,.card:nth-child(1) .cardtop b,.card:nth-child(1) .cardtop span { color:var(--blue); background-color:color-mix(in srgb,var(--blue) 12%,var(--panel)); }
  .card:nth-child(1)::before { background:var(--blue); }
  .card:nth-child(2)::before,.card:nth-child(2) .cardtop b,.card:nth-child(2) .cardtop span { color:var(--green); background-color:color-mix(in srgb,var(--green) 12%,var(--panel)); }
  .card:nth-child(2)::before { background:var(--green); }
  .card:nth-child(3)::before,.card:nth-child(3) .cardtop b,.card:nth-child(3) .cardtop span { color:var(--orange); background-color:color-mix(in srgb,var(--orange) 12%,var(--panel)); }
  .card:nth-child(3)::before { background:var(--orange); }
  .card:nth-child(4)::before,.card:nth-child(4) .cardtop b,.card:nth-child(4) .cardtop span { color:var(--red); background-color:color-mix(in srgb,var(--red) 12%,var(--panel)); }
  .card:nth-child(4)::before { background:var(--red); }
  .card:nth-child(5)::before,.card:nth-child(5) .cardtop b,.card:nth-child(5) .cardtop span { color:var(--warn); background-color:color-mix(in srgb,var(--warn) 12%,var(--panel)); }
  .card:nth-child(5)::before { background:var(--warn); }
  .card .visual { background:none; }
}

/* Backup Core card palettes: light values first, then their direct dark counterparts. */
@keyframes backupcore-slide-out-blur {
  to { opacity:.3; filter:blur(12px); transform:translateX(-7vw); }
}
@keyframes backupcore-slide-in-blur {
  from { opacity:.35; filter:blur(12px); transform:translateX(7vw); }
  to { opacity:1; filter:blur(0); transform:translateX(0); }
}
body.backupcore-leaving { animation:backupcore-slide-out-blur .42s cubic-bezier(.7,0,.84,0) forwards; pointer-events:none; }
body.backupcore-entering { animation:backupcore-slide-in-blur .56s cubic-bezier(.16,1,.3,1) both; }
@media(prefers-reduced-motion:reduce) {
  body.backupcore-leaving,body.backupcore-entering { animation:none; }
}
body.backupcore-page .nav-wrap { max-width:calc(100vw - 40px); }
body.backupcore-page .nav.nav-cs { width:max-content; margin:0; justify-content:space-between; gap:20px; padding:10px 10px 10px 22px; }
@media(max-width:760px) {
  body.backupcore-page .nav.nav-cs { gap:10px; padding:8px 8px 8px 16px; }
}
body.backupcore-page {
  --stat-blue:linear-gradient(160deg,#e1e9f8,#63a0ff);
  --stat-mint:linear-gradient(160deg,#d2f5df,#5ebd98);
  --stat-peach:linear-gradient(160deg,#ffdfc5,#ff9c54);
  --stat-pink:linear-gradient(160deg,#f4d4ff,#d27ef7);
  --stat-yellow:linear-gradient(160deg,#ffeb9c,#ffc932);
}
body.backupcore-page[data-theme="dark"] {
  --stat-blue:linear-gradient(160deg,#294363,#3d71a8);
  --stat-mint:linear-gradient(160deg,#254b38,#397d56);
  --stat-peach:linear-gradient(160deg,#62402c,#925a34);
  --stat-pink:linear-gradient(160deg,#49335a,#75488d);
  --stat-yellow:linear-gradient(160deg,#5f4d22,#927629);
}
@scope (.backupcore-page) {
  .card { background:var(--stat-blue); grid-template-rows:minmax(0,1fr); }
  .card::before { display:none; }
  .card::after { display:none; }
  .card:nth-child(2) { background:var(--stat-mint); }
  .card:nth-child(3) { background:var(--stat-peach); }
  .card:nth-child(4) { background:var(--stat-pink); }
  .card:nth-child(5) { background:var(--stat-yellow); }
  .copy h3 { margin:0 0 10px; color:var(--ink); font:700 clamp(21px,2vw,29px)/1.04 var(--font-display); letter-spacing:-.035em; text-transform:uppercase; }
  .copy h3 small { display:none; }
  .card .visual,.card .copy { grid-row:1; }
  .copy p { max-width:100%; margin:0; color:var(--muted); font:400 clamp(14px,1.15vw,17px)/1.42 var(--font-body); }
}
body.backupcore-page[data-theme="dark"] .core-deck .visual { background:none;}
body.backupcore-page[data-theme="dark"] .core-deck .file,
body.backupcore-page[data-theme="dark"] .core-deck .ver,
body.backupcore-page[data-theme="dark"] .core-deck .result,
body.backupcore-page[data-theme="dark"] .core-deck .searchbox,
body.backupcore-page[data-theme="dark"] .core-deck .row,
body.backupcore-page[data-theme="dark"] .core-deck .log,
body.backupcore-page[data-theme="dark"] .core-deck .retryrow,
body.backupcore-page[data-theme="dark"] .core-deck .device,
body.backupcore-page[data-theme="dark"] .core-deck .folder2,
body.backupcore-page[data-theme="dark"] .core-deck .hlfile,
body.backupcore-page[data-theme="dark"] .core-deck .dup,
body.backupcore-page[data-theme="dark"] .core-deck .clock {
  background:var(--panel);
  border-color:var(--line);
  color:var(--ink);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
body.backupcore-page[data-theme="dark"] .core-deck .folder {
  background:color-mix(in srgb,var(--orange) 9%,var(--panel));
  border-color:color-mix(in srgb,var(--orange) 25%,var(--line));
  color:var(--ink);
}
body.backupcore-page[data-theme="dark"] .core-deck .folder::before { background:color-mix(in srgb,var(--orange) 12%,var(--panel)); }
body.backupcore-page[data-theme="dark"] .core-deck .oslabels span,
body.backupcore-page[data-theme="dark"] .core-deck .checks span { background:var(--panel); border-color:var(--line); color:var(--muted); }
body.backupcore-page[data-theme="dark"] .core-deck .datablock { background:color-mix(in srgb,var(--blue) 12%,var(--panel)); border-color:color-mix(in srgb,var(--blue) 28%,var(--line)); color:var(--blue); }
body.backupcore-page[data-theme="dark"] .core-deck .ring { background:conic-gradient(color-mix(in srgb,var(--green) 68%,var(--panel)) 0 76%,var(--soft) 76%); }
body.backupcore-page[data-theme="dark"] .core-deck .ring::after { background:var(--panel); }
body.backupcore-page[data-theme="dark"] .core-deck .shield { filter:brightness(.78) drop-shadow(0 16px 22px color-mix(in srgb,var(--green) 14%,transparent)); }
body.backupcore-page[data-theme="dark"] .core-deck .checks span,
body.backupcore-page[data-theme="dark"] .core-deck .schedule-tag span { background:var(--panel); border-color:var(--line); color:var(--muted); }
body.backupcore-page[data-theme="dark"] .core-deck .ver span,
body.backupcore-page[data-theme="dark"] .core-deck .row,
body.backupcore-page[data-theme="dark"] .core-deck .log b { color:var(--muted); }
@media(max-width:900px) {
  @scope (.backupcore-page) {
    .copy h3 { font-size:21px; }
    .copy p { font-size:14px; }
  }
}
@media(max-width:620px) {
  @scope (.backupcore-page) {
    .card { grid-template-rows:minmax(0,1fr) auto; }
    .card .visual { grid-row:1; }
    .card .copy { grid-row:2; }
    .copy h3 { font-size:17px; margin-bottom:5px; }
    .copy p { font-size:12px; line-height:1.3; }
  }
}