/* =============================================
   Hamonic Event Questionnaire
   Theme: Clean & Elegant | Mobile-First
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root {
  /* Hamonic Brand Colors */
  --green-50: #f5f9f5;
  --green-100: #eefbf3;
  --green-200: #82e0ad;
  --green-300: #5dd1a1;
  --green-400: #4fd18b;
  --green-500: #4fd18b;
  --green-600: #3ab776;
  --green-700: #2e7a6a;
  --green-800: #225b4f;
  --green-900: #163e35;

  /* Neutral palette with improved contrast */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #8c91a0; /* increased contrast for placeholders/disabled */
  --gray-500: #5c6070; /* increased contrast for secondary text */
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --white: #ffffff;

  /* Typography & Layout Tokens */
  --font: 'Kanit', 'Noto Sans Thai', sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* --- Reset --- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-weight:700; line-height:1.3; color:var(--gray-900); }
a { color:var(--green-700); text-decoration:none; transition:color .2s; }
a:hover { color:var(--green-600); }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }

/* --- Layout --- */
.container { width:100%; max-width:1100px; margin:0 auto; padding:0 16px; }
.section { padding:56px 0; }

.section-title { text-align:center; margin-bottom:36px; }
.section-title h2 { font-size:1.5rem; font-weight:700; margin-bottom:8px; }
.section-title .subtitle { color:var(--gray-500); font-size:.925rem; }
.section-title .accent-line {
  display:block; width:48px; height:3px;
  background:var(--green-600); border-radius:2px; margin:12px auto 0;
}

/* --- Buttons --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 24px; font-family:var(--font); font-size:.925rem; font-weight:600;
  border:none; border-radius:var(--radius); cursor:pointer;
  transition:all .3s cubic-bezier(0.16, 1, 0.3, 1); text-decoration:none; line-height:1.2;
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0; background:rgba(255,255,255,.15);
  border-radius:50%; transform:translate(-50%,-50%);
  transition:width .4s ease, height .4s ease;
}
.btn:active::after { width:300px; height:300px; }

.btn-primary {
  background: linear-gradient(135deg, #4fd18b 0%, #2e7a6a 100%);
  color: var(--white);
  box-shadow: 0 4px 15px rgba(46, 122, 106, 0.15);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #5de19b 0%, #226759 100%);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 209, 139, 0.3);
}
.btn-secondary {
  background: var(--white);
  color: var(--green-700);
  border: 1.5px solid rgba(46, 122, 106, 0.3);
}
.btn-secondary:hover {
  background: var(--green-50);
  border-color: var(--green-700);
  color: var(--green-800);
  transform: translateY(-2px);
}
.btn-accent {
  background: linear-gradient(135deg, #4fd18b 0%, #2e7a6a 100%);
  color: var(--white);
  padding: 14px 28px;
  font-size: 1rem;
  box-shadow: 0 5px 18px rgba(46, 122, 106, 0.2);
}
.btn-accent:hover {
  background: linear-gradient(135deg, #5de19b 0%, #226759 100%);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 209, 139, 0.35);
}
.btn-sm { padding:8px 16px; font-size:.8rem; }

.btn-pulse { animation:pulse 2.5s infinite; }
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(22,163,74,.35); }
  50% { box-shadow:0 0 0 10px rgba(22,163,74,0); }
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gray-200);
  transition:box-shadow .3s;
}
.navbar.scrolled { box-shadow:0 4px 20px rgba(0,0,0,.08); }

.navbar-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 16px; max-width:1100px; margin:0 auto;
}
.navbar-brand { display:flex; align-items:center; }
.navbar-brand .logo-img { height:32px; width:auto; transition:transform .3s; }
.navbar-brand:hover .logo-img { transform:scale(1.05); }

.navbar-menu { display:none; }
.navbar-cta { display:flex; align-items:center; gap:8px; }

.navbar-toggle {
  display:flex; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.navbar-toggle span {
  display:block; width:20px; height:2px;
  background:var(--gray-700); border-radius:1px;
  transition:all .2s;
}

/* Mobile Menu */
.mobile-menu {
  display:none; position:fixed; top:56px; left:0; right:0; bottom:0;
  background:var(--white); z-index:999; padding:8px 16px;
  overflow-y:auto; border-top:1px solid var(--gray-200);
}
.mobile-menu.active { display:block; animation:fadeIn .25s ease; }
.mobile-menu a {
  display:flex; align-items:center; gap:12px;
  padding:14px 12px; font-size:.95rem; font-weight:500;
  color:var(--gray-700); border-bottom:1px solid var(--gray-100);
  transition:all .2s;
}
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu a:hover { color:var(--green-700); background:var(--green-50); border-radius:var(--radius); }

@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* =============================================
   HERO
   ============================================= */
.hero {
  padding:80px 16px 48px;
  background:linear-gradient(170deg, var(--green-900) 0%, var(--green-700) 60%, var(--green-600) 100%);
  color:var(--white); display:flex; align-items:center;
  position:relative; overflow:hidden;
}
/* Animated background circles */
.hero::before {
  content:''; position:absolute; top:-120px; right:-80px;
  width:350px; height:350px;
  background:radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  border-radius:50%; animation:heroFloat 12s ease-in-out infinite;
}
.hero::after {
  content:''; position:absolute; bottom:-80px; left:-60px;
  width:280px; height:280px;
  background:radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  border-radius:50%; animation:heroFloat 15s ease-in-out infinite reverse;
}
@keyframes heroFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  50% { transform:translate(15px,-20px) scale(1.05); }
}

.hero-content {
  position:relative; z-index:2;
  max-width:1100px; margin:0 auto; text-align:center;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px; font-size:.75rem; font-weight:500;
  color:rgba(255,255,255,.9); margin-bottom:20px;
  animation:fadeSlideDown .6s ease both;
}
.hero-badge .dot {
  width:6px; height:6px; background:var(--green-300);
  border-radius:50%; animation:blink 1.5s infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.hero h1 {
  font-size:1.75rem; font-weight:700; line-height:1.35;
  margin-bottom:12px; color:var(--white);
  animation:fadeSlideDown .6s ease .1s both;
}
.hero h1 .text-gradient {
  color:var(--green-200); background:none; -webkit-text-fill-color:unset;
}
.hero-desc {
  font-size:.95rem; color:rgba(255,255,255,.8);
  margin-bottom:24px; max-width:480px;
  margin-left:auto; margin-right:auto; line-height:1.7;
  animation:fadeSlideDown .6s ease .2s both;
}
.hero-actions {
  display:flex; flex-direction:column; gap:10px; align-items:center;
  animation:fadeSlideDown .6s ease .3s both;
}
.hero-actions .btn-accent {
  background:var(--white); color:var(--green-800); font-weight:700;
  width:100%; max-width:320px;
}
.hero-actions .btn-accent:hover { background:var(--gray-100); color:var(--green-900); }
.hero-actions .btn-secondary {
  background:transparent; color:var(--white); border-color:rgba(255,255,255,.5);
  width:100%; max-width:320px;
}
.hero-actions .btn-secondary:hover {
  background:rgba(255,255,255,.15); border-color:var(--white); color:var(--white);
}

.hero-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin-top:36px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.15);
  max-width:360px; margin-left:auto; margin-right:auto;
  animation:fadeSlideDown .6s ease .4s both;
}
.stat-item { text-align:center; }
.stat-number { font-size:1.5rem; font-weight:700; color:var(--white); }
.stat-label { font-size:.7rem; color:rgba(255,255,255,.65); margin-top:2px; }

@keyframes fadeSlideDown {
  from { opacity:0; transform:translateY(-12px); }
  to { opacity:1; transform:translateY(0); }
}

/* =============================================
   HOW IT WORKS (STEPS)
   ============================================= */
.steps-grid {
  display:flex; flex-direction:column;
  gap:16px; max-width:560px; margin:0 auto;
  counter-reset:step;
}
.step-card {
  display:flex; gap:16px; align-items:flex-start;
  padding:20px; background:var(--white);
  border:1px solid rgba(0, 0, 0, 0.05); border-radius:20px;
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}
.step-card:hover {
  border-color: rgba(79, 209, 139, 0.35);
  transform: translateX(6px);
  box-shadow: 0 10px 25px rgba(46, 122, 106, 0.05), 0 0 15px rgba(79, 209, 139, 0.08);
}

.step-number {
  flex-shrink:0; width:44px; height:44px;
  background: linear-gradient(135deg, #4fd18b 0%, #2e7a6a 100%);
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-weight:700; font-size:1.1rem;
  box-shadow: 0 4px 10px rgba(46, 122, 106, 0.15);
  transition: all 0.3s ease;
}
.step-card:hover .step-number {
  transform: scale(1.08);
  box-shadow: 0 6px 15px rgba(79, 209, 139, 0.35);
}
.step-info h3 { font-size:.95rem; margin-bottom:2px; }
.step-info p { color:var(--gray-500); font-size:.85rem; }

/* =============================================
   EVENT TYPES
   ============================================= */
.event-types-section { background:var(--gray-50); }

.event-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }

.event-type-card {
  padding: 24px 16px; background:var(--white);
  border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 20px;
  text-align:center; transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor:pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.event-type-card:hover {
  border-color: rgba(79, 209, 139, 0.4);
  box-shadow: 0 20px 40px rgba(46, 122, 106, 0.08), 0 0 20px rgba(79, 209, 139, 0.15);
  transform: translateY(-6px);
}
.event-type-card:active { background:var(--green-50); transform:translateY(0); }

.event-type-card .event-icon {
  width: 52px; height: 52px; margin:0 auto 12px;
  background: linear-gradient(135deg, rgba(79, 209, 139, 0.1) 0%, rgba(46, 122, 106, 0.1) 100%);
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  color: #2e7a6a;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.event-type-card:hover .event-icon {
  background: linear-gradient(135deg, #4fd18b 0%, #2e7a6a 100%);
  color: var(--white);
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 20px rgba(79, 209, 139, 0.3);
}
.event-type-card h4 { font-size:.85rem; font-weight:600; color: var(--gray-800); }

/* =============================================
   FEATURES — Clean & Elegant
   ============================================= */
.features-grid {
  display:grid; grid-template-columns:1fr; gap:16px;
}

.feature-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.feature-card::before {
  content:''; position:absolute; bottom:0; left:50%;
  width:0; height:2.5px; background: linear-gradient(90deg, #4fd18b, #2e7a6a);
  transition:all 0.3s ease; transform:translateX(-50%);
}
.feature-card:hover {
  border-color: rgba(79, 209, 139, 0.4);
  box-shadow: 0 25px 50px rgba(46, 122, 106, 0.08), 0 0 25px rgba(79, 209, 139, 0.15);
  transform: translateY(-8px);
}
.feature-card:hover::before { width:50%; }

.feature-icon {
  width: 60px; height: 60px; margin: 0 auto 16px;
  background: linear-gradient(135deg, rgba(79, 209, 139, 0.1) 0%, rgba(46, 122, 106, 0.1) 100%);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #2e7a6a;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card:hover .feature-icon {
  background: linear-gradient(135deg, #4fd18b 0%, #2e7a6a 100%);
  color: var(--white);
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 25px rgba(79, 209, 139, 0.35);
}

.feature-info h3 { font-size:.95rem; margin-bottom:4px; }
.feature-info p { font-size:.85rem; color:var(--gray-500); line-height:1.6; }

/* =============================================
   CTA BANNER
   ============================================= */
.cta-banner {
  background:var(--gray-900); color:var(--white);
  padding:36px 20px; text-align:center;
  border-radius:var(--radius-xl);
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; top:-60px; right:-40px;
  width:200px; height:200px;
  background:radial-gradient(circle, var(--green-800) 0%, transparent 70%);
  border-radius:50%; opacity:.4;
}
.cta-banner h2 { color:var(--white); font-size:1.25rem; margin-bottom:8px; position:relative; }
.cta-banner p { color:var(--gray-400); margin-bottom:20px; font-size:.9rem; position:relative; }
.cta-banner .btn {
  background:var(--green-600); color:var(--white); font-weight:700; position:relative;
}
.cta-banner .btn:hover { background:var(--green-500); }

/* =============================================
   FAQ
   ============================================= */
.faq-list {
  max-width:640px; margin:0 auto;
  display:flex; flex-direction:column; gap:6px;
}
.faq-item {
  border:1px solid var(--gray-200); border-radius:var(--radius);
  overflow:hidden; background:var(--white);
  transition:all .2s;
}
.faq-item.active { border-color:var(--green-500); box-shadow:0 2px 12px rgba(22,163,74,.08); }

.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--white);
  cursor:pointer; font-family:var(--font);
  font-weight:500; font-size:.9rem; color:var(--gray-800);
  border:none; width:100%; text-align:left;
  transition:background .15s;
}
.faq-question:hover { background:var(--gray-50); }

.faq-arrow { transition:transform .2s; font-size:.75em; color:var(--gray-400); }
.faq-item.active .faq-arrow { transform:rotate(180deg); color:var(--green-600); }

.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-answer-inner { padding:0 16px 14px; color:var(--gray-600); font-size:.85rem; line-height:1.7; }

/* =============================================
   FLOATING CONTACT BAR
   ============================================= */
.contact-float {
  position:fixed; bottom:0; left:0; right:0; z-index:998;
  background:var(--white); border-top:1px solid var(--gray-200);
  box-shadow:0 -2px 8px rgba(0,0,0,.06);
  padding:8px 12px; display:flex; gap:6px;
}
.contact-float a {
  flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
  padding:10px 6px; border-radius:var(--radius);
  font-size:.75rem; font-weight:600; text-decoration:none;
  transition:all .2s;
}
.contact-float .btn-tel { background:var(--gray-800); color:var(--white); }
.contact-float .btn-line { background:#06c755; color:var(--white); }
.contact-float .btn-estimate { background:var(--green-700); color:var(--white); flex:1.5; }

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background:var(--gray-900); color:var(--gray-400);
  padding:40px 16px calc(40px + 64px); text-align:center;
}
.footer-brand { font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:12px; }
.footer p { font-size:.8rem; margin-bottom:6px; }
.footer-links { display:flex; justify-content:center; gap:16px; margin-top:12px; flex-wrap:wrap; }
.footer-links a { color:var(--gray-400); font-size:.8rem; transition:color .2s; }
.footer-links a:hover { color:var(--green-400); }

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */
.fade-in {
  opacity:0; transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-in.visible { opacity:1; transform:translateY(0); }

/* Staggered children animation */
.fade-in:nth-child(1) { transition-delay:.05s; }
.fade-in:nth-child(2) { transition-delay:.1s; }
.fade-in:nth-child(3) { transition-delay:.15s; }
.fade-in:nth-child(4) { transition-delay:.2s; }
.fade-in:nth-child(5) { transition-delay:.25s; }
.fade-in:nth-child(6) { transition-delay:.3s; }
.fade-in:nth-child(7) { transition-delay:.35s; }
.fade-in:nth-child(8) { transition-delay:.4s; }
.fade-in:nth-child(9) { transition-delay:.45s; }
.fade-in:nth-child(10) { transition-delay:.5s; }
.fade-in:nth-child(11) { transition-delay:.55s; }
.fade-in:nth-child(12) { transition-delay:.6s; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-400); }

/* =============================================
   TABLET (640px+)
   ============================================= */
@media (min-width:640px) {
  .container { padding:0 24px; }
  .section { padding:72px 0; }
  .section-title h2 { font-size:1.75rem; }
  .hero { padding:100px 24px 64px; }
  .hero h1 { font-size:2.25rem; }
  .hero-desc { font-size:1.05rem; }
  .hero-actions { flex-direction:row; justify-content:center; }
  .hero-actions .btn-accent,
  .hero-actions .btn-secondary { width:auto; max-width:none; }
  .hero-stats { max-width:420px; }
  .event-grid { grid-template-columns:repeat(3,1fr); gap:12px; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid { flex-direction:row; flex-wrap:wrap; max-width:none; }
  .step-card { flex:1; min-width:200px; }
}

/* =============================================
   DESKTOP (1024px+)
   ============================================= */
@media (min-width:1024px) {
  .hero { padding:120px 32px 80px; min-height:75vh; }
  .hero h1 { font-size:2.75rem; }
  .hero::before { width:500px; height:500px; top:-150px; right:-100px; }
  .hero::after { width:400px; height:400px; bottom:-120px; left:-80px; }
  .section-title h2 { font-size:2rem; }

  .navbar-inner { height:64px; padding:0 24px; }
  .navbar-brand .logo-img { height:36px; }
  .navbar-menu { display:flex; gap:4px; }
  .navbar-menu a {
    font-size:.875rem; font-weight:500; color:var(--gray-600);
    padding:8px 14px; border-radius:var(--radius);
    transition:all .2s; position:relative;
  }
  .navbar-menu a:hover { color:var(--green-700); background:var(--green-50); }
  .navbar-toggle { display:none; }

  .event-grid { grid-template-columns:repeat(4,1fr); gap:14px; }
  .event-type-card { padding:20px 14px; }
  .event-type-card .event-icon { width:52px; height:52px; font-size:1.5rem; }
  .event-type-card h4 { font-size:.9rem; }

  .steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .step-card { flex:none; }

  .features-grid { grid-template-columns:repeat(4,1fr); gap:16px; }
  .feature-card { padding:28px 16px; }
  .feature-icon { width:56px; height:56px; font-size:1.5rem; }

  .contact-float { display:none; }
  .footer { padding-bottom:40px; }
  .mobile-menu { display:none !important; }
}

/* =============================================
   EVENT TYPE SPECIFIC COLOR THEMES
   ============================================= */

/* --- Wedding Colors (Rose/Pink) --- */
.event-type-card.event-wedding {
  border-color: rgba(244, 63, 94, 0.15);
}
.event-type-card.event-wedding .event-icon {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(244, 63, 94, 0.03) 100%);
  color: #e11d48;
}
.event-type-card.event-wedding:hover {
  border-color: rgba(244, 63, 94, 0.45);
  box-shadow: 0 20px 40px rgba(244, 63, 94, 0.08), 0 0 22px rgba(244, 63, 94, 0.15);
}
.event-type-card.event-wedding:hover .event-icon {
  background: linear-gradient(135deg, #fda4af 0%, #e11d48 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(244, 63, 94, 0.35);
}

/* --- Concert Colors (Purple) --- */
.event-type-card.event-concert {
  border-color: rgba(147, 51, 234, 0.15);
}
.event-type-card.event-concert .event-icon {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.12) 0%, rgba(147, 51, 234, 0.03) 100%);
  color: #9333ea;
}
.event-type-card.event-concert:hover {
  border-color: rgba(147, 51, 234, 0.45);
  box-shadow: 0 20px 40px rgba(147, 51, 234, 0.08), 0 0 22px rgba(147, 51, 234, 0.15);
}
.event-type-card.event-concert:hover .event-icon {
  background: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(147, 51, 234, 0.35);
}

/* --- Karaoke Colors (Indigo/Blue) --- */
.event-type-card.event-karaoke {
  border-color: rgba(99, 102, 241, 0.15);
}
.event-type-card.event-karaoke .event-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.03) 100%);
  color: #4f46e5;
}
.event-type-card.event-karaoke:hover {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.08), 0 0 22px rgba(99, 102, 241, 0.15);
}
.event-type-card.event-karaoke:hover .event-icon {
  background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}

/* --- Conference Colors (Blue) --- */
.event-type-card.event-conference {
  border-color: rgba(59, 130, 246, 0.15);
}
.event-type-card.event-conference .event-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.03) 100%);
  color: #2563eb;
}
.event-type-card.event-conference:hover {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.08), 0 0 22px rgba(59, 130, 246, 0.15);
}
.event-type-card.event-conference:hover .event-icon {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}

/* --- Product Launch Colors (Amber/Orange) --- */
.event-type-card.event-product_launch {
  border-color: rgba(245, 158, 11, 0.15);
}
.event-type-card.event-product_launch .event-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.03) 100%);
  color: #d97706;
}
.event-type-card.event-product_launch:hover {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.08), 0 0 22px rgba(245, 158, 11, 0.15);
}
.event-type-card.event-product_launch:hover .event-icon {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

/* --- Corporate Party Colors (Yellow/Gold) --- */
.event-type-card.event-corporate_party {
  border-color: rgba(234, 179, 8, 0.15);
}
.event-type-card.event-corporate_party .event-icon {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(234, 179, 8, 0.03) 100%);
  color: #ca8a04;
}
.event-type-card.event-corporate_party:hover {
  border-color: rgba(234, 179, 8, 0.45);
  box-shadow: 0 20px 40px rgba(234, 179, 8, 0.08), 0 0 22px rgba(234, 179, 8, 0.15);
}
.event-type-card.event-corporate_party:hover .event-icon {
  background: linear-gradient(135deg, #fde047 0%, #ca8a04 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(234, 179, 8, 0.35);
}

/* --- Ceremony Colors (Emerald Green) --- */
.event-type-card.event-ceremony {
  border-color: rgba(16, 185, 129, 0.15);
}
.event-type-card.event-ceremony .event-icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.03) 100%);
  color: #059669;
}
.event-type-card.event-ceremony:hover {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08), 0 0 22px rgba(16, 185, 129, 0.15);
}
.event-type-card.event-ceremony:hover .event-icon {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

/* --- Fair Colors (Red) --- */
.event-type-card.event-fair {
  border-color: rgba(239, 68, 68, 0.15);
}
.event-type-card.event-fair .event-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.03) 100%);
  color: #dc2626;
}
.event-type-card.event-fair:hover {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 20px 40px rgba(239, 68, 68, 0.08), 0 0 22px rgba(239, 68, 68, 0.15);
}
.event-type-card.event-fair:hover .event-icon {
  background: linear-gradient(135deg, #fca5a5 0%, #dc2626 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}

/* --- Education Colors (Teal) --- */
.event-type-card.event-education {
  border-color: rgba(13, 148, 136, 0.15);
}
.event-type-card.event-education .event-icon {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.12) 0%, rgba(13, 148, 136, 0.03) 100%);
  color: #0d9488;
}
.event-type-card.event-education:hover {
  border-color: rgba(13, 148, 136, 0.45);
  box-shadow: 0 20px 40px rgba(13, 148, 136, 0.08), 0 0 22px rgba(13, 148, 136, 0.15);
}
.event-type-card.event-education:hover .event-icon {
  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.35);
}

/* --- Political Colors (Sky Blue) --- */
.event-type-card.event-political {
  border-color: rgba(14, 165, 233, 0.15);
}
.event-type-card.event-political .event-icon {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0.03) 100%);
  color: #0284c7;
}
.event-type-card.event-political:hover {
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 20px 40px rgba(14, 165, 233, 0.08), 0 0 22px rgba(14, 165, 233, 0.15);
}
.event-type-card.event-political:hover .event-icon {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
}

/* --- Outdoor Event Colors (Orange) --- */
.event-type-card.event-outdoor_event {
  border-color: rgba(249, 115, 22, 0.15);
}
.event-type-card.event-outdoor_event .event-icon {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0.03) 100%);
  color: #ea580c;
}
.event-type-card.event-outdoor_event:hover {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 20px 40px rgba(249, 115, 22, 0.08), 0 0 22px rgba(249, 115, 22, 0.15);
}
.event-type-card.event-outdoor_event:hover .event-icon {
  background: linear-gradient(135deg, #fdba74 0%, #ea580c 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35);
}

/* --- Live Stream Colors (Rose/Pink) --- */
.event-type-card.event-live_stream {
  border-color: rgba(225, 29, 72, 0.15);
}
.event-type-card.event-live_stream .event-icon {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.12) 0%, rgba(225, 29, 72, 0.03) 100%);
  color: #db2777;
}
.event-type-card.event-live_stream:hover {
  border-color: rgba(225, 29, 72, 0.45);
  box-shadow: 0 20px 40px rgba(225, 29, 72, 0.08), 0 0 22px rgba(225, 29, 72, 0.15);
}
.event-type-card.event-live_stream:hover .event-icon {
  background: linear-gradient(135deg, #f472b6 0%, #db2777 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.35);
}

/* --- Accessibility --- */
.btn:focus, .faq-question:focus { outline:2px solid var(--green-500); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}