/* ========================================================================
   THEME — Kitty Bento
   Đổi 6-7 dòng dưới đây là đổi vibe brand cho cả landing page.
   ======================================================================== */

:root {
  /* Brand primary — gradient pill, CTA, link, accent */
  --brand-primary:       #EC4899;
  --brand-primary-dark:  #DB2777;
  --brand-primary-light: #F9A8D4;

  /* Accent — heart emoji color, secondary highlights */
  --brand-accent:        #FB923C;

  /* Page background — subtle gradient top → bottom */
  --brand-bg-from:       #FFF7ED;
  --brand-bg-via:        #FFF1E6;
  --brand-bg-to:         #FFFFFF;

  /* Shadow tint dùng cho card / button glow (rgb để dùng với rgba) */
  --brand-shadow-rgb:    236, 72, 153;
  --brand-glow-rgb:      251, 146, 60;
}

/* Background gradient áp lên section hero */
.brand-bg {
  background: linear-gradient(to bottom,
    var(--brand-bg-from) 0%,
    var(--brand-bg-via) 50%,
    var(--brand-bg-to) 100%);
}

/* Primary CTA — pill button gradient */
.brand-cta {
  background: linear-gradient(to bottom,
    var(--brand-primary-light),
    var(--brand-primary),
    var(--brand-primary-dark));
  box-shadow: 0 6px 18px rgba(var(--brand-shadow-rgb), 0.45);
}

/* Smaller pill CTA (ví dụ TẢI button hero) */
.brand-cta-sm {
  background: linear-gradient(to bottom, var(--brand-primary), var(--brand-primary-dark));
  box-shadow: 0 4px 14px rgba(var(--brand-shadow-rgb), 0.4);
}

/* Card có shadow tinted theo brand */
.brand-card-shadow {
  box-shadow: 0 4px 20px rgba(var(--brand-glow-rgb), 0.08);
}

/* Text gradient (dùng với bg-clip-text) */
.brand-text-gradient {
  background: linear-gradient(to right, var(--brand-primary), var(--brand-primary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Heart emoji color */
.brand-heart { color: var(--brand-accent); }

/* Glow pulse cho CTA chính */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 6px 18px rgba(var(--brand-shadow-rgb), .45), 0 0 0 0 rgba(var(--brand-glow-rgb), .4); }
  50%      { box-shadow: 0 10px 28px rgba(var(--brand-shadow-rgb), .6), 0 0 0 6px rgba(var(--brand-glow-rgb), 0); }
}
.cta-glow { animation: ctaGlow 2s ease-in-out infinite; }

/* Shine sweep overlay cho CTA */
@keyframes ctaShine {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  55%  { transform: translateX(250%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}
.cta-shine { animation: ctaShine 2.8s ease-in-out infinite; }

/* Sticky CTA: hidden on load, slide up on scroll */
.sticky-cta {
  transform: translateY(120%);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.sticky-cta.show { transform: translateY(0); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Util */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.glass { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Lang toggle active state */
[data-lang-btn] { color: #71717a; }
[data-lang-btn].active {
  background: linear-gradient(to bottom, var(--brand-primary), var(--brand-primary-dark));
  color: white;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}