/* CoffeeCut — Shared Design System (warm cream + coffee orange) */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple-600: #FF5A1F;
  --purple-500: #FF7A3D;
  --purple-100: #FFE6D9;
  --purple-50:  #FFF3EA;

  --text-primary:   #2B1710;
  --text-secondary: #6B5547;
  --text-tertiary:  #A08F83;

  --bg-app:  #FBF4EC;
  --bg-card: #FFFFFF;
  --bg-soft: #FFF3EA;
  --brown-900: #2B1710;
  --brown-800: #3A2016;
  --brown-700: #4E2B1B;
  --orange: #FF5A1F;
  --cream: #FBF4EC;

  --green:  #22C55E;
  --red:    #EF4444;
  --blue:   #3B82F6;
  --pink:   #EC4899;

  --border: #F0E3D6;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.10);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --nav-height: 72px;
}

html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── NAVBAR ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 244, 236, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  height: var(--nav-height);
}
.navbar.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.logo-icon {
  width: 34px; height: 34px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255,90,31,0.25);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.nav-link {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 14px;
  transition: all 0.2s ease;
}
.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
  background: var(--purple-50);
}
.nav-link.active { color: var(--purple-600); font-weight: 600; }
.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-cta { margin-left: 0; }

/* ── LANGUAGE SWITCHER ── */
.lang-switcher { position: relative; flex-shrink: 0; }
.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s ease;
}
.lang-current:hover { border-color: var(--purple-500); color: var(--purple-600); }
.lang-globe { display: block; flex-shrink: 0; }
.lang-code { letter-spacing: 0.02em; }
.lang-caret { font-size: 10px; color: var(--text-tertiary); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 184px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
}
.lang-menu.open { display: flex; }
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-option:hover { background: var(--purple-50); color: var(--purple-600); }
.lang-option.active { background: var(--purple-50); color: var(--purple-600); font-weight: 600; }
.lang-opt-code { font-size: 11px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.03em; }
.lang-option:hover .lang-opt-code,
.lang-option.active .lang-opt-code { color: var(--purple-500); }

/* Mobile language grid */
.nav-mobile-langs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.nav-mobile-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  transition: all 0.2s ease;
}
.nav-mobile-lang .nml-code { font-size: 10px; font-weight: 600; color: var(--text-tertiary); }
.nav-mobile-lang.active {
  color: var(--purple-600);
  border-color: var(--purple-500);
  background: var(--purple-50);
  font-weight: 600;
}
.nav-mobile-lang.active .nml-code { color: var(--purple-500); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all 0.25s ease;
}
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px 20px;
  background: rgba(250,250,252,0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-mobile.open { display: flex; }
.nav-mobile-link {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 10px 12px;
  transition: all 0.2s ease;
}
.nav-mobile-link:hover, .nav-mobile-link.active {
  color: var(--purple-600);
  background: var(--purple-50);
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #FF5A1F 0%, #FF7A3D 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(255,90,31,0.3);
  letter-spacing: -0.01em;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,90,31,0.4);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: -0.01em;
}
.btn-secondary:hover {
  border-color: var(--purple-500);
  color: var(--purple-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: 80px 24px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse, rgba(255,90,31,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purple-50);
  border: 1px solid rgba(255,90,31,0.2);
  color: var(--purple-600);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.page-hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 18px;
}
.page-hero p {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}
.page-hero-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 12px;
}

/* ── CONTENT WRAPPER ── */
.content-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 100px;
}
.content-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  margin-bottom: 20px;
}
@media(max-width: 600px) { .content-section { padding: 28px 24px; } }

.content-section h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}
.content-section h2 .sec-icon {
  width: 36px; height: 36px;
  background: var(--purple-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.content-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 24px 0 10px;
}
.content-section p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 14px;
}
.content-section p:last-child { margin-bottom: 0; }
.content-section ul, .content-section ol {
  padding-left: 20px;
  margin-bottom: 14px;
}
.content-section li {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 6px;
}
.content-section a { color: var(--purple-600); text-decoration: none; }
.content-section a:hover { text-decoration: underline; }

.highlight-box {
  background: var(--purple-50);
  border: 1px solid rgba(255,90,31,0.15);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 20px 0;
}
.highlight-box p {
  color: var(--purple-600);
  font-weight: 500;
  margin: 0;
}

/* ── FOOTER ── */
.footer {
  background: var(--brown-900);
  color: #F5E8DC;
  padding: 60px 24px 32px;
}
.footer .nav-logo, .footer .footer-col-title { color: #fff; }
.footer .footer-tagline, .footer .footer-link { color: #D9C4B2; }
.footer .footer-link:hover { color: #FFB38F; }
.footer .footer-bottom { border-top-color: rgba(255,255,255,.12); }
.footer .footer-copy, .footer .footer-privacy-note { color: #B8A08C; }
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  margin-bottom: 48px;
}
@media(max-width: 640px) { .footer-inner { grid-template-columns: 1fr; gap: 40px; } }
.footer-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 220px;
}
.footer-links {
  display: flex;
  gap: 60px;
}
@media(max-width: 480px) { .footer-links { gap: 32px; } }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.footer-link {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-link:hover { color: var(--purple-600); }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-copy { font-size: 13px; color: var(--text-tertiary); }
.footer-privacy-note { font-size: 13px; color: var(--text-tertiary); }

/* ── ANIMATION HELPERS ── */
.anim-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.anim-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media(max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: flex; }
}
@media(max-width: 480px) {
  .footer-links { flex-wrap: wrap; gap: 28px; }
}


/* ══════════════ HOME (landing) ══════════════ */
:root { --script: 'Caveat', 'Segoe Script', cursive; }
.accent { color: var(--orange); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.eyebrow.center, h2.center { text-align: center; }
.sec { padding: 84px 24px; }
.sec-inner { max-width: 1100px; margin: 0 auto; }
.sec h2 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 18px; }
.lead { font-size: 17px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 26px; max-width: 520px; }
.two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.two-col.rev .duo { order: 0; }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0,1fr); gap: 40px; } .sec { padding: 60px 20px; } }

/* hero */
.hero { padding: 40px 24px 20px; background: radial-gradient(1100px 520px at 78% 30%, #FFE9D6 0%, rgba(255,233,214,0) 70%); overflow: hidden; }
.hero-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 24px; align-items: center; min-height: 600px; }
.hero h1 { font-size: clamp(42px, 6vw, 72px); line-height: 1.02; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 22px; }
.hero-sub { font-size: 18px; line-height: 1.6; color: var(--text-secondary); max-width: 470px; margin-bottom: 28px; }
.trust-row { list-style: none; display: flex; gap: 14px 22px; flex-wrap: wrap; margin-top: 30px; }
.trust-row li { display: flex; gap: 10px; align-items: center; font-size: 12.5px; line-height: 1.35; color: var(--text-secondary); }
.trust-row strong { color: var(--text-primary); font-size: 13px; }
.trust-ico { color: var(--orange); display: grid; place-items: center; }
.hero-visual { position: relative; display: flex; justify-content: center; align-items: flex-start; min-height: 600px; padding-top: 56px; }
.hero-script { position: absolute; right: -6px; top: -4px; z-index: 3; font-family: var(--script); font-size: 30px; line-height: 1.05; color: var(--orange); text-align: right; transform: rotate(-5deg); }
.hero-cup { position: absolute; right: -64px; bottom: 0; z-index: 3; filter: drop-shadow(0 14px 18px rgba(80,40,10,.22)); }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .hero-visual { min-height: 540px; }
  .hero-cup { right: 0; transform: scale(.8); transform-origin: right bottom; }
  .hero-script { display: none; }
}

/* store badges */
.store-row { display: flex; gap: 12px; flex-wrap: wrap; }
.store-btn { display: inline-flex; align-items: center; gap: 10px; background: #14100E; color: #fff; text-decoration: none; padding: 9px 18px 9px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); min-width: 156px; transition: transform .2s, box-shadow .2s; }
a.store-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.store-btn.is-soon { opacity: .85; cursor: default; }
.store-txt { display: flex; flex-direction: column; line-height: 1.1; }
.store-txt small { font-size: 10.5px; opacity: .8; }
.store-txt strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

/* phone mockup */
.phone { width: 270px; flex-shrink: 0; background: #1B1411; border-radius: 42px; padding: 9px; box-shadow: 0 30px 60px rgba(60,28,8,.30), inset 0 0 0 2px #3A2D27; position: relative; z-index: 2; }
.phone-screen { background: #FFF9F2; border-radius: 34px; padding: 18px 16px 14px; min-height: 520px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.phone-screen::before { content: ''; position: absolute; top: 8px; left: 50%; width: 74px; height: 20px; background: #1B1411; border-radius: 12px; transform: translateX(-50%); }
.ph-top { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.ph-hello { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.ph-date { font-size: 11px; color: var(--text-tertiary); }
.ph-bell { width: 30px; height: 30px; border-radius: 50%; background: #FFE6D9; color: var(--orange); display: grid; place-items: center; }
.ph-ring { position: relative; display: grid; place-items: center; }
.ph-ring-txt { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.ph-ring-txt small { font-size: 9.5px; letter-spacing: .12em; color: var(--text-tertiary); font-weight: 700; }
.ph-ring-txt b { font-size: 38px; font-weight: 900; letter-spacing: -0.04em; }
.ph-ring-txt span { font-size: 11px; color: var(--text-secondary); }
.ph-ring-txt em { font-style: normal; font-size: 10px; font-weight: 700; color: #1F9D55; background: #E5F7EC; padding: 2px 8px; border-radius: 99px; margin-top: 6px; }
.ph-sleep { display: flex; gap: 10px; align-items: center; background: linear-gradient(135deg, #E9E4FF, #F3EEFF); border-radius: 16px; padding: 10px 12px; font-size: 11.5px; line-height: 1.3; color: #3B2E73; }
.ph-sleep small { color: #6B5FA5; font-size: 10.5px; }
.ph-sleep-ico { width: 32px; height: 32px; border-radius: 50%; background: #6D5BD0; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.ph-qa-head { display: flex; justify-content: space-between; font-size: 12.5px; }
.ph-qa-head span { color: var(--orange); font-weight: 600; font-size: 11px; }
.ph-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ph-drink { background: #fff; border-radius: 14px; padding: 8px 2px; text-align: center; box-shadow: 0 2px 8px rgba(80,40,10,.07); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ph-drink i { font-style: normal; font-size: 20px; }
.ph-drink b { font-size: 9.5px; font-weight: 700; }
.ph-drink small { font-size: 9px; color: var(--text-tertiary); }
.ph-nav { margin-top: auto; display: flex; justify-content: space-around; align-items: center; background: #fff; border-radius: 22px; padding: 8px 6px; box-shadow: 0 6px 18px rgba(80,40,10,.10); }
.ph-nav span { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--text-tertiary); }
.ph-nav span.on { color: var(--orange); }
.ph-nav small { font-size: 8.5px; }
.ph-nav .ph-fab { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #fff; justify-content: center; margin-top: -22px; box-shadow: 0 6px 14px rgba(255,90,31,.45); }

/* dark phones (stats/history) */
.phone.dark .phone-screen { background: #1F1612; color: #F7EBDD; min-height: 440px; }
.phone.dark .phone-screen::before { background: #000; }
.ph-title { font-weight: 800; font-size: 17px; margin-top: 22px; }
.ph-tabs { display: flex; background: #2C211B; border-radius: 10px; padding: 3px; font-size: 11px; }
.ph-tabs span { flex: 1; text-align: center; padding: 5px 0; border-radius: 8px; color: #BFA894; }
.ph-tabs span.on { background: var(--orange); color: #fff; font-weight: 700; }
.ph-avg small { display: block; font-size: 10.5px; color: #BFA894; }
.ph-avg b { font-size: 22px; letter-spacing: -0.02em; }
.ph-bars { display: flex; align-items: flex-end; gap: 7px; height: 190px; margin-top: 4px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.bar i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; }
.bar small { font-size: 8.5px; color: #BFA894; }
.ph-day { font-size: 11px; color: #BFA894; }
.ph-row { display: flex; align-items: center; gap: 10px; background: #2A1F19; border-radius: 14px; padding: 10px; }
.ph-row i { font-style: normal; font-size: 20px; width: 34px; height: 34px; border-radius: 10px; background: #3A2B22; display: grid; place-items: center; }
.ph-row span { display: flex; flex-direction: column; flex: 1; line-height: 1.2; }
.ph-row b { font-size: 12.5px; }
.ph-row small { font-size: 10px; color: #BFA894; }
.ph-row em { font-style: normal; font-size: 12px; font-weight: 700; color: #FFB38F; }
.duo { display: flex; justify-content: center; gap: 0; }
.duo .p-stats { z-index: 2; transform: translateY(-14px); }
.duo .p-hist { margin-left: -34px; transform: translateY(26px) scale(.92); width: 250px; }
@media (max-width: 520px) { .duo .p-hist { display: none; } }

/* perks */
.perks { background: #FFF3EA; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 38px 24px; }
.perks-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; text-align: center; }
.perk-ico { width: 56px; height: 56px; border-radius: 18px; display: inline-grid; place-items: center; margin-bottom: 12px; background: #FFE0CD; color: var(--orange); }
.perk-moon { background: #E7E1FF; color: #6D5BD0; }
.perk-chart { background: #FFE9D3; }
.perk h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.perk p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; max-width: 200px; margin: 0 auto; }
@media (max-width: 760px) { .perks-inner { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* drinks */
.drink-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.drink-card { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 22px 16px; text-align: center; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.drink-emoji { font-size: 38px; line-height: 1; margin-bottom: 8px; }
.drink-card b { font-size: 15px; }
.drink-card small { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
@media (max-width: 520px) { .drink-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ticks list */
.ticks { list-style: none; display: grid; gap: 12px; margin-bottom: 28px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text-secondary); line-height: 1.5; }
.ticks li > span { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.ticks b { color: var(--text-primary); }
.ticks .tick-txt { display: block; width: auto; height: auto; background: none; color: inherit; border-radius: 0; margin: 0; place-items: initial; }

/* insights bg */
.sec-insights { background: linear-gradient(180deg, #FBF4EC, #FFF0E2); overflow: hidden; }
.sec-insights .two-col { gap: 40px; }

/* sleep (dark) */
.sec-sleep { background: radial-gradient(900px 400px at 20% 20%, #4A2A1B, #2B1710 70%); color: #fff; }
.sec-sleep .lead, .ticks.on-dark li { color: #E6D3C2; }
.sec-sleep h2 { color: #fff; }
.sleep-card { position: relative; border-radius: 40px; min-height: 340px; background: linear-gradient(160deg, #3D2B6B 0%, #2A1E4A 55%, #4A2A1B 100%); overflow: hidden; display: flex; align-items: flex-end; padding: 22px; }
.sleep-moon { position: absolute; right: 44px; top: 36px; color: #E6DFFF; filter: drop-shadow(0 0 28px rgba(190,170,255,.6)); }
.sleep-stars i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .7; }
.sleep-stars i:nth-child(1) { left: 14%; top: 18%; } .sleep-stars i:nth-child(2) { left: 32%; top: 34%; width: 3px; height: 3px; }
.sleep-stars i:nth-child(3) { left: 50%; top: 14%; } .sleep-stars i:nth-child(4) { left: 24%; top: 56%; width: 3px; height: 3px; }
.sleep-stars i:nth-child(5) { left: 70%; top: 48%; }
.sleep-pill { position: relative; display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; padding: 16px 18px; width: 100%; }
.sleep-pill b { display: block; font-size: 17px; margin-bottom: 2px; }
.sleep-pill small { display: block; font-size: 12.5px; color: #D8CCF2; line-height: 1.4; }
.sleep-pill-ico { width: 44px; height: 44px; border-radius: 14px; background: #6D5BD0; display: grid; place-items: center; flex-shrink: 0; }

/* premium */
.sec-premium { background: var(--cream); }
.premium-card { background: linear-gradient(160deg, #2B1710, #4E2B1B); color: #fff; border-radius: 36px; padding: 40px 34px; text-align: center; box-shadow: 0 30px 60px rgba(60,28,8,.28); max-width: 420px; margin: 0 auto; width: 100%; }
.pc-crown { color: #FFC247; margin-bottom: 10px; display: grid; place-items: center; }
.pc-title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; color: #FFD27A; }
.premium-card p { color: #E6D3C2; font-size: 14.5px; margin-bottom: 18px; }
.premium-card ul { list-style: none; display: grid; gap: 10px; text-align: left; }
.premium-card li { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.premium-card li svg { color: #FFC247; flex-shrink: 0; }

/* why */
.sec-why { background: #FFF3EA; }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 34px; }
.why-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-sm); }
.why-card h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -0.01em; }
.why-card p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 860px) { .why-grid { grid-template-columns: minmax(0,1fr); } }

/* faq (home) */
.sec-faq .faq-list { display: grid; gap: 10px; }
.sec-faq .faq-item { background: #fff; border: 1px solid var(--border); border-radius: 16px; }
.faq-question { width: 100%; background: none; border: none; padding: 18px 22px; text-align: left; font-size: 15px; font-weight: 600; line-height: 1.4; font-family: inherit; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-question[aria-expanded="true"] { color: var(--orange); }
.faq-arrow { font-size: 22px; color: var(--orange); flex-shrink: 0; line-height: 1; }
.faq-answer { display: none; padding: 0 22px 20px; font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }
.faq-answer.open { display: block; }
.btn-secondary svg, .btn-primary svg { vertical-align: -3px; margin-left: 4px; }

/* final CTA */
.cta { background: radial-gradient(800px 360px at 80% 40%, #4E2B1B, #2B1710 70%); color: #fff; padding: 76px 24px; }
.cta-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; }
.cta p { color: #E6D3C2; font-size: 17px; margin-bottom: 26px; }
.cta .store-btn { background: #fff; color: #14100E; }
.cta-script { font-family: var(--script); font-size: 38px !important; line-height: 1.05; color: #FFB38F !important; transform: rotate(-4deg); margin: 0 !important; }
@media (max-width: 600px) { .cta-script { display: none; } .hero-cup { display: none; } }


/* ══════════════ INNER PAGES (cùng ngôn ngữ thiết kế với trang chủ) ══════════════ */
.ph { padding: 56px 24px 36px; background: radial-gradient(900px 420px at 85% 10%, #FFE9D6 0%, rgba(255,233,214,0) 70%); }
.ph-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; align-items: center; }
.ph-inner.has-art { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.ph h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.04; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 18px; }
.ph-sub { font-size: 18px; line-height: 1.6; color: var(--text-secondary); max-width: 540px; }
.ph-meta { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); letter-spacing: .02em; }
@media (max-width: 860px) { .ph-inner.has-art { grid-template-columns: minmax(0,1fr); } .ph { padding: 40px 20px 24px; } }

.art-card { background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 28px; box-shadow: 0 20px 50px rgba(80,40,10,.10); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.art-card b { font-size: 19px; letter-spacing: -0.01em; }
.art-card p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; }
.art-ico { width: 60px; height: 60px; border-radius: 20px; background: #FFE0CD; color: var(--orange); display: grid; place-items: center; }
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.art-tags span { display: inline-flex; gap: 6px; align-items: center; background: #FFF3EA; color: var(--orange); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 99px; }
.big404 { align-items: center; text-align: center; padding: 36px; }
.big404 b { font-size: 92px; line-height: 1; font-weight: 900; letter-spacing: -0.05em; color: var(--orange); }

.page-main { max-width: 1100px; margin: 0 auto; padding: 24px 24px 80px; }
.page-main.narrow { max-width: 820px; }
@media (max-width: 860px) { .page-main { padding: 12px 20px 60px; } }
.page-main.notfound { max-width: 1100px; display: flex; gap: 14px; flex-wrap: wrap; padding-bottom: 100px; }

/* legal layout */
.legal { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 36px; align-items: start; }
.legal-toc { position: sticky; top: calc(var(--nav-height) + 20px); background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-sm); }
.legal-toc-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.legal-toc ol { list-style: none; display: grid; gap: 2px; }
.legal-toc a { display: flex; gap: 10px; align-items: center; text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); padding: 7px 8px; border-radius: 10px; transition: background .2s, color .2s; }
.legal-toc a:hover { background: #FFF3EA; color: var(--text-primary); }
.legal-toc a span { width: 22px; height: 22px; border-radius: 7px; background: #FFE6D9; color: var(--orange); font-size: 11px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.legal-body { display: grid; gap: 16px; }
.lsec { background: #fff; border: 1px solid var(--border); border-radius: 26px; padding: 32px 36px; box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--nav-height) + 16px); }
.lsec h2 { display: flex; gap: 14px; align-items: center; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.lico { width: 42px; height: 42px; border-radius: 14px; background: #FFE6D9; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.lsec h3 { font-size: 15px; font-weight: 700; margin: 18px 0 6px; }
.lsec p { font-size: 15.5px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 12px; }
.lsec p:last-child, .lsec ul:last-child { margin-bottom: 0; }
.lsec ul { margin: 0 0 12px 0; padding-left: 20px; display: grid; gap: 8px; }
.lsec li { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); }
.lsec li::marker { color: var(--orange); }
.lsec a { color: var(--orange); font-weight: 600; text-decoration: none; }
.lsec a:hover { text-decoration: underline; }
.callout { background: #FFF3EA; border: 1px solid #FFD9C2; border-radius: 16px; padding: 16px 18px; margin: 14px 0; font-size: 15px; line-height: 1.65; color: var(--text-primary); }
.callout.warn { background: #FFF7E6; border-color: #F6D68F; color: #6B4A0A; }
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0,1fr); } .legal-toc { position: static; } .lsec { padding: 24px 22px; } }

/* dark band cuối trang */
.band { background: radial-gradient(800px 300px at 85% 40%, #4E2B1B, #2B1710 70%); color: #fff; padding: 56px 24px; }
.band-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.band h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; }
.band p { color: #E6D3C2; font-size: 16px; }
.band-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ghost { display: inline-flex; align-items: center; text-decoration: none; font-weight: 700; font-size: 15px; color: #fff; padding: 12px 22px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.35); transition: background .2s; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0,1fr); } }
.contact-info { display: grid; gap: 16px; }
.info-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 26px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.info-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.info-card-icon { width: 52px; height: 52px; border-radius: 16px; background: #FFE6D9; display: grid; place-items: center; font-size: 24px; margin-bottom: 14px; }
.info-card-title { font-size: 17px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.01em; }
.info-card-desc { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
.info-card-link { font-size: 14.5px; font-weight: 700; color: var(--orange); text-decoration: none; }
.info-card-link:hover { text-decoration: underline; }
.response-card { background: var(--brown-900); color: #fff; border-radius: 24px; padding: 24px 26px; }
.rc-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FFB38F; margin-bottom: 8px; }
.rc-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.rc-item:last-child { border-bottom: none; }
.rc-label { color: #D9C4B2; }
.rc-value { font-weight: 700; text-align: right; }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 38px 40px; box-shadow: var(--shadow-md); }
@media (max-width: 480px) { .form-card { padding: 26px 22px; } }
.form-card h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.form-sub { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 26px; }
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
@media (max-width: 480px) { .form-row { grid-template-columns: minmax(0,1fr); } }
.form-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.form-label .req { color: var(--orange); }
.form-input, .form-textarea, .form-select { width: 100%; background: var(--bg-app); border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 16px; font-size: 15px; font-family: inherit; color: var(--text-primary); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(255,90,31,.12); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-tertiary); }
.form-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.char-count { font-size: 12px; color: var(--text-tertiary); text-align: right; margin-top: 5px; }
.form-submit { width: 100%; background: linear-gradient(135deg, #FF5A1F, #FF7A3D); color: #fff; border: none; border-radius: 16px; padding: 16px 28px; font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; justify-content: center; gap: 10px; box-shadow: 0 10px 24px rgba(255,90,31,.3); transition: transform .2s, box-shadow .2s; }
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,90,31,.4); }
.form-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.form-success { display: none; text-align: center; padding: 36px 12px; }
.form-success.show { display: block; }
.success-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #34C46B, #1F9D55); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 10px 24px rgba(31,157,85,.3); }
.success-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.success-desc { font-size: 15px; color: var(--text-secondary); line-height: 1.65; }
.success-desc a { color: var(--orange); font-weight: 600; }


/* ── RTL (Arabic) ── mockup điện thoại giữ chiều LTR như màn hình app thật */
html[dir="rtl"] .phone, html[dir="rtl"] .hero-visual, html[dir="rtl"] .hero-cup { direction: ltr; }
html[dir="rtl"] .hero-copy, html[dir="rtl"] .section-head { text-align: right; }
html[dir="rtl"] .lang-menu { left: 0; right: auto; }


/* ══════════════ TRANG TĨNH BỔ SUNG ══════════════ */
.sec-tight { padding-top: 36px; padding-bottom: 64px; }
.narrow-inner { max-width: 860px; }
.lead.wide { max-width: none; }
.art-tags.center-tags { justify-content: center; }
.art-tags.center-tags span { background: rgba(255,255,255,.12); color: #FFD9C2; }

/* features / principles */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 30px; }
.feat-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.sec-tight .feat-grid { margin-top: 0; }
.feat-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feat-card .perk-ico { margin-bottom: 14px; }
.feat-card h3 { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 8px; }
.feat-card p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
.perk-plus, .perk-cup, .perk-gear, .perk-clock, .perk-check, .perk-arrow, .perk-home { background: #FFE0CD; color: var(--orange); }
.perk-bell { background: #FFE9D3; color: var(--orange); }
.perk-heart { background: #FFE0E3; color: #E5484D; }
.perk-shield { background: #DDF5E6; color: #1F9D55; }
@media (max-width: 980px) { .feat-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px) { .feat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .feat-grid, .feat-grid.four { grid-template-columns: minmax(0,1fr); } }

.step-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 34px; }
.step-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-sm); }
.step-n { width: 38px; height: 38px; border-radius: 12px; background: var(--orange); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 14px; }
.step-card h3 { font-size: 18px; margin-bottom: 8px; }
.step-card p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 760px) { .step-grid { grid-template-columns: minmax(0,1fr); } }
.why-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1000px) { .why-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .why-grid.four { grid-template-columns: minmax(0,1fr); } }

/* screenshots */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px 28px; justify-items: center; }
.shot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 340px; }
.shot-phone { text-align: left; }
.shot-phone .phone { margin: 0 auto; }
.shot figcaption b { display: block; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 6px; }
.shot figcaption span { display: block; font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; }
.shots-note { text-align: center; margin-top: 44px; font-size: 13px; color: var(--text-tertiary); }
@media (max-width: 1000px) { .shots { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .shots { grid-template-columns: minmax(0,1fr); } }
.ph-title.l { margin-top: 22px; }
.ph-title.c { text-align: center; margin-top: 4px; }
.ph-search { background: #fff; border: 1px solid #F0DCCB; border-radius: 12px; padding: 9px 12px; font-size: 12px; color: var(--text-tertiary); }
.ph-chips { display: flex; gap: 6px; }
.ph-chips span { flex: 1; text-align: center; white-space: nowrap; font-size: 10.5px; font-weight: 700; padding: 5px 4px; border-radius: 99px; background: #fff; color: var(--text-secondary); border: 1px solid #F0DCCB; }
.ph-chips span.on { background: var(--orange); color: #fff; border-color: var(--orange); }
.ph-list { display: grid; gap: 8px; }
.ph-lrow { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid transparent; border-radius: 14px; padding: 9px 10px; box-shadow: 0 2px 8px rgba(80,40,10,.06); }
.ph-lrow.sel { border-color: var(--orange); }
.ph-lrow i { font-style: normal; font-size: 20px; width: 34px; height: 34px; border-radius: 10px; background: #FFF0E4; display: grid; place-items: center; }
.ph-lrow span { display: flex; flex-direction: column; flex: 1; line-height: 1.2; }
.ph-lrow b { font-size: 12.5px; }
.ph-lrow small { font-size: 10px; color: var(--text-tertiary); }
.ph-lrow em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--orange); }
.ph-btn { margin-top: auto; background: var(--orange); color: #fff; text-align: center; font-weight: 700; font-size: 13px; padding: 12px; border-radius: 14px; box-shadow: 0 6px 14px rgba(255,90,31,.35); }
.ph-set { display: grid; gap: 6px; }
.ph-set div { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 12px; padding: 11px 12px; font-size: 12px; box-shadow: 0 2px 8px rgba(80,40,10,.05); }
.ph-set b { color: var(--orange); font-size: 12px; }
.phone.prem .phone-screen { background: linear-gradient(170deg, #2B1710, #4E2B1B); }
.pc-crown.sm { margin: 26px auto 0; width: 60px; height: 60px; border-radius: 20px; background: rgba(255,194,71,.16); color: #FFC247; display: grid; place-items: center; }
.ph-prem { display: grid; gap: 8px; }
.ph-prem div { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,.08); border-radius: 12px; padding: 11px 12px; font-size: 12px; }
.ph-prem svg { color: #FFC247; flex-shrink: 0; }
.ph-note { text-align: center; font-size: 10.5px; color: #D9C4B2; }

/* premium compare */
.cmp { margin-top: 30px; background: #fff; border: 1px solid var(--border); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-sm); }
.cmp-row { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr); align-items: stretch; border-top: 1px solid var(--border); font-size: 15px; }
.cmp-row > span { padding: 16px 12px; display: flex; align-items: center; justify-content: center; }
.cmp-row > .cmp-label { justify-content: flex-start; padding-left: 22px; }
.cmp-row:first-child { border-top: none; }
.cmp-row > span:not(.cmp-label) { text-align: center; }
.cmp-head { background: #FFF3EA; font-weight: 800; font-size: 14px; }
.cmp-head .is-prem { color: var(--orange); display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.cmp-row .is-prem { background: rgba(255,90,31,.05); }
.cmp-yes { width: 26px; height: 26px; border-radius: 50%; background: #DDF5E6; color: #1F9D55; display: inline-grid; place-items: center; }
.cmp-no { color: var(--text-tertiary); font-weight: 700; }
.cmp-txt { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.cmp-row .is-prem .cmp-txt { color: var(--orange); }
@media (max-width: 520px) { .cmp-row { font-size: 13.5px; } .cmp-row > span { padding: 14px 6px; } .cmp-row > .cmp-label { padding-left: 14px; } }

/* faq groups */
.faq-group { margin-bottom: 34px; }
.faq-group-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.sec-faq .faq-item, .faq-group .faq-item { background: #fff; border: 1px solid var(--border); border-radius: 16px; }

/* about */
.facts { background: #FFF3EA; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 38px 24px; }
.facts-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; text-align: center; }
.fact b { display: block; font-size: clamp(32px, 4vw, 46px); font-weight: 900; letter-spacing: -0.04em; color: var(--orange); }
.fact span { font-size: 14px; color: var(--text-secondary); }
@media (max-width: 700px) { .facts-inner { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.about-note { font-size: 15px; line-height: 1.7; }
.about-note a { display: inline-block; margin-top: 6px; color: var(--orange); font-weight: 700; text-decoration: none; }

/* download */
.dl-badges .sec-inner { display: flex; justify-content: center; }
.dl-badges .store-row { justify-content: center; }
.store-row.big .store-btn { transform: scale(1.12); margin: 0 8px; }

/* screenshot: giấc ngủ chi tiết (Premium) */
.ph-sleep.big { padding: 16px 14px; border-radius: 20px; }
.ph-sleep.big small { display: block; font-size: 11px; color: #6B5FA5; margin-bottom: 2px; }
.ph-count { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #3B2E73; }
.ph-note-l { font-size: 9.5px; line-height: 1.4; color: var(--text-tertiary); text-align: center; padding: 0 4px; }

.ph-curve { background: #fff; border-radius: 14px; padding: 9px 10px 6px; box-shadow: 0 2px 8px rgba(80,40,10,.06); }
.ph-curve b { display: block; font-size: 11.5px; margin-bottom: 4px; }
.ph-curve svg { width: 100%; height: 58px; display: block; }
.ph-lastcall { display: flex; gap: 8px; align-items: center; background: #FFF0E6; border: 1px solid #FFD9C2; border-radius: 12px; padding: 8px 10px; }
.ph-lastcall i { font-style: normal; font-size: 16px; }
.ph-lastcall small { display: block; font-size: 9.5px; color: var(--text-tertiary); font-weight: 700; }
.ph-lastcall b { font-size: 11.5px; color: var(--text-primary); }