/* =============================================================
   KOTHRUD CENTRAL MALL — PREMIUM THEME LAYER
   Loaded LAST so it elevates the existing design without
   touching the original markup. Navy (#243881) + Luxe Gold.
   ============================================================= */

:root {
  --kcm-navy: #243881;
  --kcm-navy-deep: #18234f;
  --kcm-gold: #c9a24b;
  --kcm-gold-light: #e6c879;
  --kcm-gold-grad: linear-gradient(135deg, #b8860b 0%, #e6c879 45%, #c9a24b 100%);
  --kcm-ink: #232531;
  --kcm-cream: #faf8f4;
  --kcm-shadow: 0 18px 50px rgba(24, 35, 79, 0.10);
  --kcm-shadow-hover: 0 28px 60px rgba(24, 35, 79, 0.18);
  --kcm-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Global polish ---------- */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--kcm-ink);
  letter-spacing: .2px;
}
::selection { background: var(--kcm-gold); color: #fff; }

/* Refined scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #eef0f6; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--kcm-navy), var(--kcm-navy-deep));
  border-radius: 10px; border: 2px solid #eef0f6;
}

/* ---------- Premium section headers ---------- */
.section-header h3,
.section-heading h3 {
  font-family: 'Playfair Display', 'Times New Roman', serif !important;
  letter-spacing: .4px !important;
  position: relative;
}
.section-header { position: relative; }
.section-header h3::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin: 16px auto 4px;
  background: var(--kcm-gold-grad);
  border-radius: 3px;
}
/* keep left-aligned dividers left where the header isn't centered */
.section-header:not(.text-center) h3::after { margin-left: 0; margin-right: auto; }

.section-subtitle p, .section-subtitle span {
  text-transform: uppercase;
  letter-spacing: 2.5px !important;
  font-weight: 500;
}

/* ---------- Navbar ---------- */
.navbar {
  box-shadow: 0 2px 24px rgba(24,35,79,.06);
  transition: background .4s var(--kcm-ease), box-shadow .4s var(--kcm-ease), padding .4s var(--kcm-ease);
}
.nav-scroll {
  box-shadow: 0 10px 34px rgba(24,35,79,.12) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  background: rgba(255,255,255,.96) !important;
}
.navbar-nav .nav-link {
  position: relative;
  font-weight: 500;
  letter-spacing: .6px;
  transition: color .3s ease;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; background: var(--kcm-gold-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--kcm-ease);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-nav .nav-link:hover { color: var(--kcm-navy) !important; }
.logo-wrapper { transition: transform .4s var(--kcm-ease); }

/* ---------- Universal premium buttons ---------- */
.pricing-btn, .btn-form1-submit, .btn-submit, .btn-primary, .vid-butn {
  position: relative;
  overflow: hidden;
  border: none;
  letter-spacing: .6px;
  transition: transform .35s var(--kcm-ease), box-shadow .35s var(--kcm-ease), background .35s var(--kcm-ease);
}
.pricing-btn {
  background: var(--kcm-navy) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(36,56,129,.22);
}
.pricing-btn:hover, .pricing-btn:focus {
  background: var(--kcm-gold-grad) !important;
  color: #1a1a1a !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(201,162,75,.40) !important;
}
.btn-form1-submit:hover, .btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(36,56,129,.34);
}
/* sweeping sheen on hover */
.pricing-btn::before, .btn-submit::before, .btn-form1-submit::before {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--kcm-ease);
}
.pricing-btn:hover::before, .btn-submit:hover::before, .btn-form1-submit:hover::before { left: 130%; }

/* WhatsApp nav pill */
.navbar-nav li a[href*="whatsapp"] { transition: all .3s var(--kcm-ease); }
.navbar-nav li:has(a[href*="whatsapp"]):hover {
  box-shadow: 0 8px 20px rgba(37,211,102,.25);
  border-color: #25d366 !important;
}

/* ---------- Hero banner ---------- */
.banner-container::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to top, rgba(10,15,35,.55), transparent);
  pointer-events: none; z-index: 2;
}
.banner-overlay-text span::after {
  content: "";
  display: block; width: 80px; height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--kcm-gold-light), transparent);
}
.banner-overlay-text h1 { animation: kcmFadeUp 1.1s var(--kcm-ease) both; }
.banner-overlay-text span { animation: kcmFadeUp 1.1s var(--kcm-ease) .15s both; }

/* ---------- Cards: Pricing ---------- */
.pricing-card {
  position: relative;
  border: 1px solid #ececf3 !important;
  border-radius: 16px !important;
  background: #fff;
  box-shadow: var(--kcm-shadow);
  overflow: hidden;
  transition: transform .4s var(--kcm-ease), box-shadow .4s var(--kcm-ease), border-color .4s var(--kcm-ease);
}
.pricing-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--kcm-gold-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--kcm-ease);
}
.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--kcm-shadow-hover);
  border-color: var(--kcm-gold) !important;
}
.pricing-card:hover::before { transform: scaleX(1); }
.pricing-card h4 { letter-spacing: .3px; }
.pricing-card p strong { color: var(--kcm-navy); }

/* ---------- Cards: Opportunity grid ---------- */
.opportunity-card {
  border: 1px solid #e9e9f1 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(24,35,79,.05);
  transition: transform .35s var(--kcm-ease), box-shadow .35s var(--kcm-ease), border-color .35s var(--kcm-ease), background .35s var(--kcm-ease);
}
.opportunity-card:hover {
  border-color: var(--kcm-gold) !important;
  box-shadow: 0 16px 34px rgba(201,162,75,.18);
}
.opportunity-card:hover .opp-icon { color: var(--kcm-gold) !important; }

/* ---------- Key-detail icon cards ---------- */
.icon-card {
  background: #fff !important;
  border: 1px solid #ececf3;
  border-radius: 16px;
  padding: 26px 14px;
  height: 100%;
  margin-bottom: 16px;
  box-shadow: 0 10px 26px rgba(24,35,79,.06);
  transition: transform .35s var(--kcm-ease), box-shadow .35s var(--kcm-ease), border-color .35s var(--kcm-ease);
}
.icon-card:hover {
  transform: translateY(-6px);
  border-color: var(--kcm-gold);
  box-shadow: 0 18px 38px rgba(24,35,79,.14);
}
.icon-card .kcm-ic {
  width: 66px; height: 66px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,162,75,.16), rgba(201,162,75,.32));
  color: var(--kcm-navy);
  font-size: 27px;
  box-shadow: inset 0 0 0 1px rgba(201,162,75,.5);
  transition: transform .4s var(--kcm-ease), background .4s var(--kcm-ease), color .4s var(--kcm-ease);
}
.icon-card:hover .kcm-ic {
  transform: translateY(-3px) scale(1.07);
  background: var(--kcm-gold-grad);
  color: #1c1300;
}
.icon-card h5 { color: var(--kcm-navy) !important; font-weight: 700; font-size: 15px; margin: 6px 0; }
.icon-card p { color: #555 !important; font-size: 13.5px; margin: 0; line-height: 1.5; }

/* ---------- Highlights ---------- */
.highlight-item {
  transition: transform .35s var(--kcm-ease);
}
.highlight-item:hover { transform: translateY(-5px); }
.highlight-icon {
  background: var(--kcm-gold-grad);
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(201,162,75,.30);
}
.highlight-icon i { color: #fff !important; }

/* ---------- Amenities (unified, aligned cards) ---------- */
section#amenities { background: var(--kcm-cream) !important; }
.amenity-item {
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 16px;
  padding: 22px 14px;
  text-align: center;
  height: 100%;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(24,35,79,.05);
  transition: transform .35s var(--kcm-ease), box-shadow .35s var(--kcm-ease), border-color .35s var(--kcm-ease);
}
.amenity-item:hover {
  transform: translateY(-6px);
  border-color: var(--kcm-gold);
  box-shadow: 0 18px 36px rgba(24,35,79,.13);
}
/* turn each icon into a premium gold circle */
.amenity-item i {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  border-radius: 50%;
  font-size: 24px !important;            /* normalise fa-2x */
  color: var(--kcm-navy) !important;
  background: linear-gradient(135deg, rgba(201,162,75,.16), rgba(201,162,75,.32));
  box-shadow: inset 0 0 0 1px rgba(201,162,75,.5);
  transition: transform .4s var(--kcm-ease), background .4s var(--kcm-ease), color .3s ease;
}
.amenity-item:hover i {
  background: var(--kcm-gold-grad);
  color: #1c1300 !important;
  transform: translateY(-3px) scale(1.07);
}
.amenity-item p { font-size: 13.5px; color: #333; margin: 0; line-height: 1.45; font-weight: 500; }

/* ---------- Residential pricing table ---------- */
#residential table tbody tr { transition: background .3s ease, transform .3s ease; }
#residential table tbody tr:hover { background: #fbf7ec !important; }
#residential table tbody td:nth-child(3) strong { color: var(--kcm-navy); font-size: 16px; }
#residential .pricing-btn { box-shadow: 0 6px 16px rgba(36,56,129,.18); }

/* ---------- Forms ---------- */
.booking-inner {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
section#brochure {
  background: linear-gradient(135deg, #18234f 0%, #243881 55%, #2c3f8f 100%) !important;
  position: relative;
}
section#brochure::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(201,162,75,.14), transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(201,162,75,.12), transparent 42%);
  pointer-events: none;
}
.input1_inner input:focus,
.input1_inner select:focus {
  box-shadow: inset 0 -2px 0 0 var(--kcm-gold) !important;
}
.popup-form .form-group input:focus,
.popup-form .form-group select:focus {
  border-color: var(--kcm-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,75,.18) !important;
}
.premium-popup { border-top: 4px solid transparent; border-image: var(--kcm-gold-grad) 1; }

/* ---------- FAQ ---------- */
.faq-item {
  background: #fff;
  border: 1px solid #ececf3;
  border-radius: 12px;
  padding: 6px 20px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(24,35,79,.05);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.faq-item:hover { border-color: var(--kcm-gold); box-shadow: 0 12px 26px rgba(24,35,79,.10); }
.faq-item.active { border-color: var(--kcm-gold); }
.faq-question h3 { transition: color .3s ease; }
.faq-item.active .faq-question h3 { color: var(--kcm-navy) !important; }
.question-toggle {
  width: 28px; height: 28px; line-height: 26px; text-align: center;
  border-radius: 50%; font-weight: 700; flex: 0 0 auto;
  background: rgba(36,56,129,.08); color: var(--kcm-navy);
  transition: all .3s var(--kcm-ease);
}
.faq-item.active .question-toggle { background: var(--kcm-gold-grad); color: #fff; }

/* ---------- Location / connectivity ---------- */
.connectivity-card { box-shadow: var(--kcm-shadow) !important; border-radius: 16px !important; }
#location img.rounded { transition: transform .5s var(--kcm-ease); }
#location img.rounded:hover { transform: scale(1.02); }

/* ---------- Mobile fixed footer ---------- */
.fixed-footer-cust.d-md-none {
  background: linear-gradient(135deg, var(--kcm-navy-deep), var(--kcm-navy)) !important;
  box-shadow: 0 -4px 18px rgba(0,0,0,.28) !important;
}

/* ---------- Footer ---------- */
.footer { border-top: 3px solid transparent; border-image: var(--kcm-gold-grad) 1; }
.footer a[href*="privacy"], .footer a[href*="terms"] { transition: all .3s var(--kcm-ease) !important; }
.footer a[href*="privacy"]:hover, .footer a[href*="terms"]:hover {
  background: var(--kcm-gold-grad) !important; color: #1a1a1a !important; transform: translateY(-2px);
}

/* ---------- Scroll reveal ---------- */
.kcm-reveal { opacity: 0; transform: translateY(30px); }
.kcm-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .8s var(--kcm-ease), transform .8s var(--kcm-ease);
}

@keyframes kcmFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Premium badge ---------- */
.kcm-badge {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 30px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: #6b531c;
  background: linear-gradient(135deg, #fdf6e3, #f6e8c3);
  border: 1px solid #e8d49b;
  box-shadow: 0 6px 16px rgba(201,162,75,.18);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .kcm-reveal { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =============================================================
   V2 — DYNAMIC PREMIUM + ATTRACTIVE FORMS + MOBILE ALIGNMENT
   ============================================================= */

/* ---------- Animated stats strip ---------- */
.kcm-stats {
  background:
    linear-gradient(135deg, rgba(24,35,79,.97), rgba(36,56,129,.97)),
    radial-gradient(circle at 15% 20%, rgba(201,162,75,.20), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(201,162,75,.16), transparent 40%);
  background-color: var(--kcm-navy-deep);
  padding: 46px 0;
  position: relative;
}
.kcm-stats::before, .kcm-stats::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: var(--kcm-gold-grad);
}
.kcm-stats::before { top: 0; }
.kcm-stats::after { bottom: 0; }
.kcm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.kcm-stat { text-align: center; color: #fff; padding: 8px; position: relative; }
.kcm-stat + .kcm-stat::before {
  content: ""; position: absolute; left: -10px; top: 18%; height: 64%; width: 1px;
  background: linear-gradient(transparent, rgba(255,255,255,.22), transparent);
}
.kcm-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 44px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, #f3d89a, #c9a24b);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.kcm-stat-label {
  font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.82); font-weight: 500;
}

/* ---------- Floating WhatsApp (desktop) ---------- */
.kcm-float-wa {
  position: fixed; right: 22px; bottom: 24px; z-index: 9998;
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff !important; font-size: 30px;
  box-shadow: 0 10px 26px rgba(37,211,102,.45);
  transition: transform .3s var(--kcm-ease), box-shadow .3s var(--kcm-ease);
  animation: kcmPulse 2.4s infinite;
}
.kcm-float-wa:hover { transform: scale(1.1); color: #fff; }
@keyframes kcmPulse {
  0%   { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 767px) { .kcm-float-wa { display: none; } } /* mobile already has the sticky bar */

/* =============================================================
   ATTRACTIVE LEAD FORM — brochure section (#brochure)
   ============================================================= */
section#brochure { padding: 60px 0 80px; }
section#brochure .section-title { font-family: 'Playfair Display', serif !important; letter-spacing: .5px; }
section#brochure .section-subtitle { color: var(--kcm-gold-light) !important; }
section#brochure .section-subtitle span,
section#brochure .section-subtitle { letter-spacing: 2.5px; }

.booking-inner {
  max-width: 940px; margin: 0 auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 34px 30px 30px;
  box-shadow: 0 30px 70px rgba(0,0,0,.42);
  position: relative; z-index: 1;
}

/* Turn the floated form into an aligned responsive grid */
.form1 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form1 .col1, .form1 .col2, .form1 .col3 {
  width: 100% !important; float: none !important;
  border-right: none !important; height: auto !important;
  margin: 0 !important; padding: 0 !important;
}
.form1 .c1, .form1 .c2, .form1 .c3 {
  border-right: none !important; height: auto !important; margin: 0 !important; padding: 0 !important;
}
.form1 .col3 { grid-column: 1 / -1; }

.input1_inner input,
.input1_inner select {
  height: 56px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.96) !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  color: #222 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
  transition: box-shadow .3s var(--kcm-ease), transform .3s var(--kcm-ease);
}
.input1_inner input::placeholder { color: #6b6f7a !important; }
.input1_inner input:focus,
.input1_inner select:focus {
  box-shadow: 0 0 0 3px rgba(201,162,75,.45), 0 10px 22px rgba(0,0,0,.18) !important;
  transform: translateY(-1px);
}
.btn-form1-submit {
  width: 100% !important; height: 56px;
  border-radius: 12px !important;
  background: var(--kcm-gold-grad) !important;
  color: #1c1300 !important;
  font-weight: 700 !important; letter-spacing: 1.2px; text-transform: uppercase;
  border: none !important;
}
.btn-form1-submit:after { background: none !important; }

/* =============================================================
   ATTRACTIVE + COMPACT POPUP FORM
   ============================================================= */
#liton_wishlist_modal .modal-dialog { max-width: 410px !important; }
.premium-popup { max-width: 410px; padding: 20px 22px 22px; }
.popup-header { margin-bottom: 10px; }
.popup-header:empty { display: none; }            /* hide the leftover empty header div */
.popup-logo { width: 130px !important; margin-bottom: 4px !important; }
.popup-title { font-family: 'Playfair Display', serif; font-size: 16px; line-height: 1.35; }
.popup-form { gap: 10px; }
.popup-form .form-group { margin-bottom: 0 !important; }   /* avoid double spacing (gap + bootstrap margin) */
.popup-form .form-group input,
.popup-form .form-group select {
  height: 44px; border-radius: 9px;
  border: 1px solid #d8d8e2; font-size: 14px; padding: 8px 12px;
}
.popup-form .form-group input:focus,
.popup-form .form-group select:focus { transform: translateY(-1px); }
.form-check { margin-top: 2px; font-size: 12px; }
.btn-submit { height: 46px !important; border-radius: 10px; letter-spacing: .8px; }

/* =============================================================
   MOBILE ALIGNMENT & POLISH
   ============================================================= */
/* Use the real banner on mobile instead of the placeholder swap */
@media (max-width: 767px) {
  #banner { content: normal !important; }
  .banner-overlay-text { top: 30%; }
}

@media (max-width: 991px) {
  .form1 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .form1 { grid-template-columns: 1fr; gap: 13px; }
  .booking-inner { padding: 22px 16px; border-radius: 18px; }

  /* tighter, balanced sections on phones */
  section, .section, .about, .pricing, .amenities, .faq { padding-top: 38px !important; padding-bottom: 38px !important; }
  .section-header h3, .section-heading h3 { font-size: 22px !important; }

  /* stats strip stacks 2x2 */
  .kcm-stats-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .kcm-stat + .kcm-stat::before { display: none; }
  .kcm-stat-num { font-size: 34px; }
  .kcm-stat-label { font-size: 11px; letter-spacing: 1px; }

  /* opportunities: equal-height aligned cards, full labels */
  .opportunity-card { min-height: 104px; padding: 16px 8px; }
  .opportunity-card h5 { font-size: 10.5px; line-height: 1.3; }
  .opp-icon { font-size: 24px; }

  /* residential table fits the phone */
  #residential table th, #residential table td { padding: 10px 8px !important; font-size: 12.5px !important; }
  #residential table td a.pricing-btn { padding: 6px 10px !important; font-size: 11px !important; }

  /* key-detail cards breathe */
  .icon-card { padding: 16px 8px; }
  .icon-card p { font-size: 13px; }

  /* pricing cards spacing */
  .pricing-card { padding: 22px 18px !important; }
}

/* Make the in-card residential table edge-to-edge scroll cleanly on mobile */
#residential .table-responsive { -webkit-overflow-scrolling: touch; border-radius: 12px; }

/* =============================================================
   V3 — 3D ANIMATION + MOTION (clearly visible)
   ============================================================= */

/* ---------- Stronger scroll reveal (slide + scale) ---------- */
.kcm-reveal { opacity: 0; transform: translateY(46px) scale(.95); }
.kcm-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .85s var(--kcm-ease), transform .85s var(--kcm-ease);
}

/* ---------- Cursor-following 3D tilt on cards ---------- */
.kcm-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
.kcm-tilt .kcm-ic,
.kcm-tilt .opp-icon,
.kcm-tilt i { transform: translateZ(28px); }   /* icon pops out in 3D */
.kcm-tilt h4, .kcm-tilt h5 { transform: translateZ(16px); }

/* ---------- Hero: slow Ken-Burns zoom ---------- */
.banner-container { overflow: hidden; }
#banner {
  animation: kcmKenBurns 20s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes kcmKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* ---------- Stats strip: animated moving gradient ---------- */
.kcm-stats {
  background-size: 220% 220%, 160% 160%, 160% 160%;
  animation: kcmGradientShift 14s ease infinite;
}
@keyframes kcmGradientShift {
  0%   { background-position: 0% 50%, 0% 0%, 100% 100%; }
  50%  { background-position: 100% 50%, 100% 100%, 0% 0%; }
  100% { background-position: 0% 50%, 0% 0%, 100% 100%; }
}

/* ---------- Floating gold badge ---------- */
.kcm-badge { animation: kcmFloat 3.2s ease-in-out infinite; }
@keyframes kcmFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ---------- Gold buttons: animated sheen sweep ---------- */
.btn-form1-submit, .btn-submit { background-size: 200% auto; }
.btn-form1-submit { animation: kcmShimmer 4s linear infinite; }
@keyframes kcmShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ---------- Section titles: animated gold underline ---------- */
.section-header h3::after { transition: width .5s var(--kcm-ease); }
.kcm-reveal.is-visible .section-header h3::after { width: 64px; }

/* ---------- Floating WhatsApp gentle bob (on top of pulse) ---------- */
.kcm-float-wa i { animation: kcmFloat 2.6s ease-in-out infinite; }

/* ---------- Honor reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #banner, .kcm-stats, .kcm-badge, .btn-form1-submit, .kcm-float-wa i { animation: none !important; }
  .kcm-tilt { transform: none !important; }
}
