:root {
  --brand-primary: #DF7356;
  --brand-primary-hover: #C66146;
  --brand-light-bg: #FFF0EC;
  --brand-text: #DF7356;
}
/* --- Per-language font stacks --- */
:lang(zh), :lang(zh-CN) { font-family: "Noto Sans SC", Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
:lang(zh-Hant), :lang(zh-HK) { font-family: "Noto Sans TC", Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
:lang(ja) { font-family: "Noto Sans JP", Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
:lang(ko) { font-family: "Noto Sans KR", Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
:lang(th) { font-family: "Noto Sans Thai", Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
:lang(ar) { font-family: "Noto Sans Arabic", Inter, -apple-system, BlinkMacSystemFont, sans-serif; }

.bg-brand { background-color: var(--brand-primary); }
.text-brand { color: var(--brand-text); }
.bg-brand-light { background-color: var(--brand-light-bg); }
.border-brand { border-color: var(--brand-primary); }

/* --- Page fade-in --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.5s ease-out; }

/* --- Dropdown / FAQ slide --- */
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-down { animation: slideDown 0.2s ease-out; }

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- FAQ smooth expand/collapse --- */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}
.faq-answer.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-answer-inner {
  overflow: hidden;
}

/* --- Button micro-interactions --- */
.btn-lift {
  transition: all 0.2s ease-in-out;
}
.btn-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(223, 115, 86, 0.35);
}
.btn-lift:active {
  transform: translateY(0) scale(0.98);
}

/* --- Card hover float --- */
.card-float {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.12);
}

/* --- Hero stagger entrance --- */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-stagger { opacity: 0; animation: heroIn 0.7s ease-out forwards; }
.hero-stagger-1 { animation-delay: 0s; }
.hero-stagger-2 { animation-delay: 0.12s; }
.hero-stagger-3 { animation-delay: 0.24s; }
.hero-stagger-4 { animation-delay: 0.36s; }
.hero-stagger-5 { animation-delay: 0.5s; }

/* --- Hero floating glow orbs --- */
.hero-bg {
  position: relative;
  overflow: hidden;
}
.hero-bg::before,
.hero-bg::after,
.hero-bg .hero-orb-3 {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
  will-change: transform;
}
.hero-bg::before {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #DF7356 0%, transparent 70%);
  top: -80px; left: -120px;
  animation: orbFloat1 8s ease-in-out infinite;
}
.hero-bg::after {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #9333ea 0%, transparent 70%);
  bottom: -60px; right: -80px;
  animation: orbFloat2 10s ease-in-out infinite;
}
.hero-orb-3 {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
  will-change: transform;
  background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  animation: orbFloat3 12s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 40px) scale(1.1); }
  66% { transform: translate(-30px, 20px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, -30px) scale(1.08); }
  66% { transform: translate(40px, -20px) scale(0.92); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-40%, -60%) scale(1.15); }
}

/* --- Mobile menu enter/exit --- */
@keyframes menuSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menuSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}
.mobile-menu-enter { animation: menuSlideIn 0.25s ease-out forwards; }
.mobile-menu-exit { animation: menuSlideOut 0.2s ease-in forwards; }

/* --- Dropdown enter/exit --- */
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dropdownOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-6px) scale(0.95); }
}
.dropdown-enter { animation: dropdownIn 0.2s ease-out forwards; }
.dropdown-exit { animation: dropdownOut 0.15s ease-in forwards; }

/* --- Count-up number flash --- */
@keyframes countPulse {
  0% { opacity: 0; transform: scale(0.8); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.count-animate {
  animation: countPulse 0.6s ease-out forwards;
}

/* --- Pricing card themes --- */
.pricing-card-max {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: none;
}

/* --- Pricing comparison table --- */
.pricing-col-max-bg {
  background-color: rgba(223, 115, 86, 0.08);
}
.pricing-header-row {
  border-bottom: 2px solid #e5e7eb;
}

/* --- Pricing row hover --- */
.pricing-row {
  transition: background-color 0.15s ease;
}
.pricing-row:hover {
  background-color: rgba(0, 0, 0, 0.025);
}