/* =====================================================
   MAIN CSS — BlurtMe Landing Page
   Import thứ tự: variables → animations → main
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap');
@import './variables.css';
@import './animations.css';

/* =====================================================
   RESET & BASE
   ===================================================== */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-primary);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* =====================================================
   LAYOUT TIỆN ÍCH
   ===================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Container hẹp hơn cho copy-heavy sections */
.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--section-padding-y) 0;
  position: relative;
}

/* Đường kẻ phân cách section mờ */
.section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--system-border);
  position: absolute;
  top: 0;
}

/* =====================================================
   TYPOGRAPHY — Tiêu đề và đoạn văn
   ===================================================== */

.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--brand-primary-dim);
  border: 1px solid var(--system-border-brand);
  border-radius: var(--radius-full);
}

.section-headline {
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}

.section-subheadline {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 600px;
}

/* Căn giữa cho section có text-align center */
.text-center {
  text-align: center;
}
.text-center .section-subheadline {
  margin: 0 auto;
}

/* =====================================================
   BUTTONS — CTA chính và phụ
   ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

/* Nút chính — gradient tím */
.btn--primary {
  background: var(--gradient-cta);
  color: var(--text-primary);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35);
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

.btn--primary:hover {
  background: var(--gradient-cta-hover);
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.5);
  transform: translateY(-2px);
  color: var(--text-primary);
}

/* Nút phụ — viền mờ */
.btn--secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--system-border-strong);
}

.btn--secondary:hover {
  background: var(--bg-surface-raised);
  color: var(--text-primary);
  border-color: var(--system-border-brand);
}

/* =====================================================
   STORE BADGES — App Store & Google Play
   ===================================================== */

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-surface-raised);
  border: 1px solid var(--system-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  color: var(--text-primary);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
  text-decoration: none;
}

.store-badge:hover {
  background: var(--bg-surface-hover);
  border-color: var(--system-border-brand);
  transform: translateY(-2px);
  color: var(--text-primary);
}

/* Badge "Coming Soon" — mờ hơn, không hover, không pointer */
.store-badge--coming-soon {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
  filter: grayscale(0.4);
}

.store-badge--coming-soon:hover {
  transform: none;
  background: var(--bg-surface-raised);
  border-color: var(--system-border);
}

.store-badge__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.store-badge__label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1;
}

.store-badge__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}

/* =====================================================
   NAVIGATION
   ===================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-4) 0;
  transition: background var(--transition-base), backdrop-filter var(--transition-base);
}

/* Khi cuộn xuống — nền mờ */
.nav--scrolled {
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--system-border);
}

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

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-decoration: none;
}

.nav__logo-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.nav__logo:hover {
  color: var(--brand-primary);
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* =====================================================
   HERO SECTION
   ===================================================== */

#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--space-24) + 60px); /* offset cho navbar */
  padding-bottom: var(--space-24);
  position: relative;
  overflow: hidden;
}

/* Vầng sáng phía sau toàn bộ hero */
#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  height: 600px;
  background: var(--gradient-hero-glow);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Phần text bên trái */
.hero__content {}

.hero__headline {
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}

/* Highlight dòng cuối của headline bằng màu brand */
.hero__headline em {
  font-style: normal;
  color: var(--brand-primary);
}

.hero__subheadline {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-10);
  max-width: 480px;
}

.hero__badges {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.hero__badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--system-success);
  flex-shrink: 0;
}

/* Phần visual bên phải */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Orb sáng phía sau phone */
.hero__orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.25) 0%, transparent 70%);
  animation: pulseOrb 4s ease-in-out infinite;
  pointer-events: none;
}

/* Phone mockup container */
.hero__phone {
  position: relative;
  z-index: 2;
  width: 280px;
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  border: 1px solid var(--system-border-strong);
  overflow: hidden;
  animation: breatheGlow 4s ease-in-out infinite;
}

/* Thanh status bar giả */
.phone__statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--system-border);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.phone__statusbar-time {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

/* Phần header của chat (tên app) */
.phone__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-raised);
  border-bottom: 1px solid var(--system-border);
}

.phone__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.phone__header-info {
  flex: 1;
}

.phone__header-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.phone__header-status {
  font-size: var(--text-xs);
  color: var(--system-success);
}

/* Vùng chat messages */
.phone__messages {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 300px;
  background: var(--bg-canvas);
}

/* Nhãn ngày tháng */
.phone__date-label {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: var(--space-2) 0;
}

/* Bubble tin nhắn */
.msg-bubble {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-radius: var(--space-1) var(--radius-lg) var(--radius-lg) var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  position: relative;
}

/* Bubble mặc định — tin nhắn thường (inbox) */
.msg-bubble--inbox {
  background: var(--bg-surface-raised);
  border: 1px solid var(--system-border);
}

/* Bubble #todo — viền đỏ */
.msg-bubble--todo {
  background: var(--tag-todo-bg);
  border: 1px solid var(--tag-todo-border);
  border-left: 3px solid var(--tag-todo);
}

/* Bubble #note — viền xanh */
.msg-bubble--note {
  background: var(--tag-note-bg);
  border: 1px solid var(--tag-note-border);
  border-left: 3px solid var(--tag-note);
}

/* Bubble #moment — viền tím */
.msg-bubble--moment {
  background: var(--tag-moment-bg);
  border: 1px solid var(--tag-moment-border);
  border-left: 3px solid var(--tag-moment);
}

/* Highlight hashtag trong text */
.msg-bubble .hashtag {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: var(--weight-medium);
}

.msg-bubble--todo .hashtag { color: var(--tag-todo); }
.msg-bubble--note .hashtag { color: var(--tag-note); }
.msg-bubble--moment .hashtag { color: var(--tag-moment); }

.msg-bubble__time {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  text-align: right;
}

/* Input bar ở dưới cùng của phone */
.phone__input-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-raised);
  border-top: 1px solid var(--system-border);
}

.phone__input {
  flex: 1;
  background: var(--bg-canvas);
  border: 1px solid var(--system-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-family: var(--font-sans);
}

.phone__send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Floating thought bubbles xung quanh phone */
.thought-bubble {
  position: absolute;
  background: var(--bg-surface-raised);
  border: 1px solid var(--system-border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

.thought-bubble:nth-child(1) { top: 10%; right: -10%; animation: floatBubble1 5s ease-in-out infinite; }
.thought-bubble:nth-child(2) { top: 30%; left: -18%; animation: floatBubble2 6s ease-in-out infinite; }
.thought-bubble:nth-child(3) { top: 55%; right: -14%; animation: floatBubble3 7s ease-in-out infinite; }
.thought-bubble:nth-child(4) { top: 75%; left: -12%; animation: floatBubble4 5.5s ease-in-out infinite; }
.thought-bubble:nth-child(5) { top: 85%; right: -8%; animation: floatBubble5 6.5s ease-in-out infinite; }

/* =====================================================
   SECTION 2 — PROBLEM
   ===================================================== */

#problem {
  background: var(--bg-surface);
}

.problem__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.problem__text {}

.problem__visual {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon não to ở giữa */
.problem__brain {
  font-size: 72px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.3));
}

/* Các bubble đang bay mất */
.problem-bubble {
  position: absolute;
  background: var(--bg-surface-raised);
  border: 1px solid var(--system-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.problem-bubble:nth-child(2) { top: 5%; left: 10%; animation: driftAway 4s ease-in infinite 0s; }
.problem-bubble:nth-child(3) { top: 15%; right: 8%; animation: driftAwayLeft 4s ease-in infinite 0.8s; }
.problem-bubble:nth-child(4) { top: 35%; left: 5%; animation: driftAway 4s ease-in infinite 1.5s; }
.problem-bubble:nth-child(5) { bottom: 30%; right: 5%; animation: driftAwayLeft 4s ease-in infinite 2.2s; }
.problem-bubble:nth-child(6) { bottom: 15%; left: 12%; animation: driftAway 4s ease-in infinite 0.5s; }
.problem-bubble:nth-child(7) { bottom: 5%; right: 12%; animation: driftAwayLeft 4s ease-in infinite 1.8s; }

/* =====================================================
   SECTION 3 — SOLUTION
   ===================================================== */

.solution__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Demo chat animation */
.solution__demo {
  position: relative;
}

.solution__phone {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  border: 1px solid var(--system-border-strong);
  overflow: hidden;
}

.demo-messages {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 260px;
  background: var(--bg-canvas);
}

/* Mỗi message trong demo xuất hiện tuần tự */
.demo-message {
  opacity: 0;
  transform: translateX(-12px);
}

.demo-message.visible {
  animation: messageSlideIn 0.4s ease-out forwards;
}

/* Typing indicator (3 chấm) */
.typing-indicator {
  display: inline-flex;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface-raised);
  border-radius: var(--radius-md);
  align-items: center;
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.typing-dot:nth-child(1) { animation: typingCursor 1.2s ease-in-out infinite 0s; }
.typing-dot:nth-child(2) { animation: typingCursor 1.2s ease-in-out infinite 0.2s; }
.typing-dot:nth-child(3) { animation: typingCursor 1.2s ease-in-out infinite 0.4s; }

/* =====================================================
   SECTION 4 — HOW IT WORKS (Tag cards)
   ===================================================== */

.tags__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-12);
}

.tag-card {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--system-border);
  transition:
    border-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.tag-card:hover {
  transform: translateY(-4px);
}

/* Màu accent khác nhau cho từng card */
.tag-card--todo  { border-top: 3px solid var(--tag-todo); }
.tag-card--note  { border-top: 3px solid var(--tag-note); }
.tag-card--moment{ border-top: 3px solid var(--tag-moment); }
.tag-card--inbox { border-top: 3px solid var(--tag-inbox); }

.tag-card--todo:hover  { border-color: var(--tag-todo-border); box-shadow: 0 8px 32px rgba(239, 68, 68, 0.15); }
.tag-card--note:hover  { border-color: var(--tag-note-border); box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15); }
.tag-card--moment:hover{ border-color: var(--tag-moment-border); box-shadow: 0 8px 32px rgba(167, 139, 250, 0.15); }
.tag-card--inbox:hover { border-color: var(--tag-inbox-border); box-shadow: 0 8px 32px rgba(107, 114, 128, 0.1); }

.tag-card__pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}

.tag-card--todo  .tag-card__pill { color: var(--tag-todo);   background: var(--tag-todo-bg);   border: 1px solid var(--tag-todo-border); }
.tag-card--note  .tag-card__pill { color: var(--tag-note);   background: var(--tag-note-bg);   border: 1px solid var(--tag-note-border); }
.tag-card--moment.tag-card__pill { color: var(--tag-moment); background: var(--tag-moment-bg); border: 1px solid var(--tag-moment-border); }
.tag-card--moment .tag-card__pill{ color: var(--tag-moment); background: var(--tag-moment-bg); border: 1px solid var(--tag-moment-border); }
.tag-card--inbox .tag-card__pill { color: var(--tag-inbox);  background: var(--tag-inbox-bg);  border: 1px solid var(--tag-inbox-border); }

.tag-card__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-tight);
}

.tag-card__body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* =====================================================
   SECTION 5 — FEATURES
   ===================================================== */

#features {
  background: var(--bg-surface);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.feature-card {
  background: var(--bg-canvas);
  border: 1px solid var(--system-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.feature-card:hover {
  background: var(--bg-surface-raised);
  border-color: var(--system-border-brand);
  transform: translateY(-3px);
}

.feature-card__icon {
  font-size: 28px;
  margin-bottom: var(--space-4);
  display: block;
}

.feature-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.feature-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* =====================================================
   SECTION 6 — PRIVACY
   ===================================================== */

.privacy__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.privacy__badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.trust-badge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--bg-surface-raised);
  border: 1px solid var(--system-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color var(--transition-fast);
}

.trust-badge:hover {
  border-color: var(--system-border-brand);
}

.trust-badge__icon {
  font-size: 22px;
  flex-shrink: 0;
}

.trust-badge__text {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

/* Hộp mã hóa visual bên phải */
.privacy__visual {
  background: var(--bg-surface);
  border: 1px solid var(--system-border-brand);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

/* Nền gradient mờ phía sau */
.privacy__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(167, 139, 250, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.privacy__lock {
  font-size: 48px;
  text-align: center;
  margin-bottom: var(--space-5);
  display: block;
}

.privacy__encrypt-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brand-primary);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
}

/* Các dòng text mờ giả lập dữ liệu mã hóa */
.privacy__code-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.privacy__code-line {
  height: 10px;
  background: var(--bg-surface-raised);
  border-radius: var(--radius-sm);
  opacity: 0.6;
}

.privacy__code-line:nth-child(2) { width: 85%; }
.privacy__code-line:nth-child(3) { width: 70%; }
.privacy__code-line:nth-child(4) { width: 90%; }
.privacy__code-line:nth-child(5) { width: 60%; }

.privacy__fine-print {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--bg-surface);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
}

/* =====================================================
   SECTION 7 — SOCIAL PROOF (Testimonials)
   ===================================================== */

#testimonials {
  background: var(--bg-surface);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-12);
}

.testimonial-card {
  background: var(--bg-canvas);
  border: 1px solid var(--system-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition:
    border-color var(--transition-base),
    transform var(--transition-base);
}

.testimonial-card:hover {
  border-color: var(--system-border-brand);
  transform: translateY(-3px);
}

.testimonial-card__quote {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  position: relative;
}

/* Dấu ngoặc kép lớn trang trí */
.testimonial-card__quote::before {
  content: '"';
  font-size: 4rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.3;
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  font-family: Georgia, serif;
  pointer-events: none;
}

.testimonial-card__author {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}

/* =====================================================
   SECTION 8 — PRICING
   ===================================================== */

.pricing__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* Bảng so sánh Free vs Plus */
.pricing__comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-12);
  margin-bottom: var(--space-10);
}

.pricing-plan {
  background: var(--bg-surface);
  border: 1px solid var(--system-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  transition: border-color var(--transition-base);
}

/* Highlight plan Plus */
.pricing-plan--plus {
  border-color: var(--system-border-brand);
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.05) 0%, var(--bg-surface) 100%);
  position: relative;
  overflow: hidden;
}

/* Badge "Best Value" */
.pricing-plan--plus::before {
  content: 'Most Popular';
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--gradient-cta);
  color: var(--text-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.pricing-plan__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.pricing-plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.pricing-feature__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

/* Tick xanh cho Plus */
.pricing-feature__check--yes {
  background: rgba(22, 163, 74, 0.15);
  color: var(--system-success);
  border: 1px solid rgba(22, 163, 74, 0.3);
}

/* Dấu trừ xám cho Free */
.pricing-feature__check--no {
  background: var(--bg-surface-raised);
  color: var(--text-tertiary);
  border: 1px solid var(--system-border);
}

/* 3 options giá */
.pricing__plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.price-option {
  background: var(--bg-surface);
  border: 1px solid var(--system-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    transform var(--transition-fast);
  position: relative;
}

.price-option:hover {
  border-color: var(--system-border-brand);
  transform: translateY(-2px);
}

/* Plan được chọn bởi JS */
.price-option--selected {
  border-color: var(--brand-primary);
  background: var(--brand-primary-dim);
  box-shadow: 0 0 0 2px var(--brand-primary);
}

/* Highlight plan Yearly */
.price-option--featured {
  border-color: var(--system-border-brand);
  background: var(--brand-primary-dim);
}

.price-option__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  background: var(--gradient-cta);
  color: var(--text-primary);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.price-option__name {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
}

.price-option__amount {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.price-option__period {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* CTA box bên dưới bảng giá */
.pricing__cta-box {
  text-align: center;
}

.pricing__cta-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* =====================================================
   SECTION 9 — FAQ (Accordion)
   ===================================================== */

#faq {
  background: var(--bg-surface);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-12);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.faq-item {
  background: var(--bg-canvas);
  border: 1px solid var(--system-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--system-border-brand);
}

.faq-item.open {
  border-color: var(--system-border-brand);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.faq-item__question-text {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

/* Icon dấu + / - */
.faq-item__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-surface-raised);
  border: 1px solid var(--system-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-base), background var(--transition-base);
  color: var(--text-tertiary);
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  line-height: 1;
}

.faq-item.open .faq-item__icon {
  transform: rotate(45deg);
  background: var(--brand-primary-dim);
  border-color: var(--system-border-brand);
  color: var(--brand-primary);
}

/* Nội dung câu trả lời — ẩn mặc định */
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}

.faq-item.open .faq-item__answer {
  max-height: 300px;
}

.faq-item__answer-inner {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  animation: accordionOpen 0.3s ease-out;
}

/* =====================================================
   SECTION 10 — FINAL CTA
   ===================================================== */

#final-cta {
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Ánh sáng nền */
#final-cta::before {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(167, 139, 250, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.final-cta__headline {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tightest);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.final-cta__sub {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-10);
}

.final-cta__badges {
  justify-content: center;
  margin-bottom: var(--space-6);
}

.final-cta__note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* =====================================================
   FOOTER
   ===================================================== */

footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--system-border);
  padding: var(--space-12) 0 var(--space-8);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.footer__brand-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
  max-width: 280px;
}

.footer__col-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--brand-primary);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  border-top: 1px solid var(--system-border);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* =====================================================
   RESPONSIVE — Mobile-first
   ===================================================== */

/* Tablet: <= 1024px */
@media (max-width: 1024px) {
  .tags__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* Mobile: <= 768px */
@media (max-width: 768px) {
  /* Hero — stack dọc */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-12);
  }

  .hero__subheadline {
    margin: 0 auto var(--space-8);
  }

  .hero__badges {
    justify-content: center;
  }

  .store-badges {
    justify-content: center;
  }

  /* Phone mockup nhỏ hơn */
  .hero__phone {
    width: 240px;
  }

  .thought-bubble {
    display: none; /* Ẩn bubbles trên mobile nhỏ */
  }

  /* Problem section */
  .problem__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .problem__visual {
    height: 240px;
  }

  /* Solution section */
  .solution__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Privacy section */
  .privacy__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

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

  /* Tags — 1 cột trên mobile */
  .tags__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Features — 1 cột */
  .features__grid {
    grid-template-columns: 1fr;
  }

  /* Testimonials */
  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  /* Pricing */
  .pricing__comparison {
    grid-template-columns: 1fr;
  }

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

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  /* Nav */
  .nav__cta .btn--secondary {
    display: none;
  }
}

/* Nhỏ hơn nữa: <= 480px */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-4);
  }

  .btn--primary {
    width: 100%;
    justify-content: center;
  }

  .store-badges {
    flex-direction: column;
    width: 100%;
  }

  .store-badge {
    justify-content: center;
  }

  .final-cta__badges {
    flex-direction: column;
    align-items: center;
  }
}