/* ==========================================================================
   KiyuGraphix homepage design layer (2026-10 refresh)
   Loaded only by front-page.php, after header.php's inline styles.
   Tokens: Baloo 2 headings, Manrope body; buttons use var(--kgx-btn-radius).
   ========================================================================== */

:root {
  --kgx-sec: clamp(64px, 8vw, 120px);
  --kgx-sec-tight: clamp(36px, 4vw, 56px);
  --kgx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kgx-lime: #63E600;
  --kgx-lime-grad: linear-gradient(135deg, #58DC00 0%, #DDF31A 100%);
  --kgx-on-lime: #071006;
  --kgx-bg: #070A12;
  --kgx-band: #0A0E18;
  --kgx-card: #0C101B;
  --kgx-line: rgba(255, 255, 255, 0.08);
  --kgx-line-strong: rgba(255, 255, 255, 0.16);
  --kgx-text: #F4F7F0;
  --kgx-dim: #A2AB9C;
  --kgx-accent-ink: #63E600;
  --kgx-depth: 0 24px 48px -28px rgba(0, 0, 0, 0.85), 0 6px 14px -8px rgba(0, 0, 0, 0.5);
  --kgx-depth-hi: 0 40px 80px -36px rgba(0, 0, 0, 0.9), 0 14px 28px -14px rgba(0, 0, 0, 0.6);
  --kgx-lime-lift: 0 12px 24px -12px rgba(99, 230, 0, 0.55);
}
body.light-mode {
  --kgx-bg: #F8FAFC;
  --kgx-band: #EFF3EA;
  --kgx-card: #FFFFFF;
  --kgx-line: rgba(15, 23, 42, 0.09);
  --kgx-line-strong: rgba(15, 23, 42, 0.18);
  --kgx-text: #0F172A;
  --kgx-dim: #475569;
  --kgx-accent-ink: #2B7D00;
  --kgx-depth: 0 22px 44px -28px rgba(15, 23, 42, 0.28), 0 4px 10px -6px rgba(15, 23, 42, 0.12);
  --kgx-depth-hi: 0 36px 70px -36px rgba(15, 23, 42, 0.35), 0 10px 22px -14px rgba(15, 23, 42, 0.18);
  --kgx-lime-lift: 0 12px 22px -14px rgba(43, 125, 0, 0.55);
}

/* ---------- Browser surfaces ---------- */
::selection { background: #63E600; color: #071006; }
body.home { caret-color: #63E600; }
html { scrollbar-color: #63E600 #070A12; }
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track { background: #070A12; }
html::-webkit-scrollbar-thumb { background: #63E600; border-radius: 12px; border: 3px solid #070A12; }
html:has(body.light-mode) { scrollbar-color: #2B7D00 #E2E8F0; }
html:has(body.light-mode)::-webkit-scrollbar-track { background: #E2E8F0; }
html:has(body.light-mode)::-webkit-scrollbar-thumb { background: #2B7D00; border-color: #E2E8F0; }
body.home a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
body.home p a { text-decoration: underline; }
body.home :focus-visible { outline: 2px solid #63E600 !important; outline-offset: 3px !important; }
body.home.light-mode :focus-visible { outline-color: #2B7D00 !important; }

/* ---------- De-clutter: no glass blur, no zero-offset glows ---------- */
body.home .glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.home .hero-art-glow,
body.home .cat-connect,
body.home .kg-hero-effects,
body.home .upcoming-visual-ring { display: none !important; }
body.home .upcoming-shell::before,
body.home .upcoming-shell::after,
body.home .testimonials-full-width::before,
body.home .testimonials-full-width::after,
body.home .contact-inquiry-card::before,
body.home .contact-inquiry-card::after { display: none !important; }
body.home .wrap { box-shadow: none !important; }

/* ---------- Section rhythm ---------- */
body.home .hero ~ section { padding: calc(var(--kgx-sec) / 2) 0 !important; position: relative; }
/* Shop group (band): backgrounds, characters, animations */
body.home #backgrounds, body.home #characters, body.home #animations,
body.home #services, body.home #voices, body.home #script-writers { background: var(--kgx-band) !important; }
body.home #backgrounds { padding-top: calc(var(--kgx-sec) * 0.8) !important; border-top: 1px solid var(--kgx-line); }
body.home #backgrounds, body.home #characters { padding-bottom: calc(var(--kgx-sec-tight) / 2) !important; }
body.home #characters, body.home #animations { padding-top: calc(var(--kgx-sec-tight) / 2) !important; }
body.home #animations { padding-bottom: calc(var(--kgx-sec) * 0.8) !important; border-bottom: 1px solid var(--kgx-line); }
/* Learn group: course, live class, YouTube */
body.home #courses, body.home #online-class { padding-bottom: calc(var(--kgx-sec-tight) / 2) !important; }
body.home #courses { padding-top: calc(var(--kgx-sec-tight) / 2) !important; }
body.home #online-class, body.home #latest-video { padding-top: calc(var(--kgx-sec-tight) / 2) !important; }
/* Hire group (band): services, voice artists, script writers */
body.home #services { padding-top: calc(var(--kgx-sec) * 0.8) !important; border-top: 1px solid var(--kgx-line); }
body.home #services, body.home #voices { padding-bottom: calc(var(--kgx-sec-tight) / 2) !important; }
body.home #voices, body.home #script-writers { padding-top: calc(var(--kgx-sec-tight) / 2) !important; }
body.home #script-writers { padding-bottom: calc(var(--kgx-sec) * 0.8) !important; border-bottom: 1px solid var(--kgx-line); }
/* Bundles + its "next drop" teaser read as one block */
body.home #bundles { padding-bottom: calc(var(--kgx-sec-tight) / 2) !important; }
body.home #upcoming { padding-top: calc(var(--kgx-sec-tight) / 2) !important; }
/* Closing: policies sit tight above the final CTA */
body.home .kg-policy-section { padding-bottom: 0 !important; }
body.home #contact { padding-top: 20px !important; padding-bottom: var(--kgx-sec) !important; }

/* ---------- One section-header pattern ---------- */
body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) .kgx-head,
body.home #testimonials .testi-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 40px;
  margin: 0 0 clamp(26px, 3vw, 40px) !important;
  padding: 0 !important;
}
body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) .kgx-head h2,
body.home #testimonials .testi-head h2,
body.home .latest-video-title h2 {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(28px, 3.3vw, 44px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  color: var(--kgx-text) !important;
}
body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) .kgx-head .section-desc,
body.home #testimonials .testi-head .section-desc {
  margin: 12px 0 0 !important;
  font-size: clamp(14.5px, 1.15vw, 16px) !important;
  line-height: 1.6 !important;
  max-width: 60ch;
  color: var(--kgx-dim) !important;
}
body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) .kgx-head-actions,
body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) .prof-services-controls { display: inline-flex !important; align-items: center; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; justify-content: flex-end !important; gap: 10px; }

/* View All: one quiet secondary button everywhere */
body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) a.kgx-viewall.view-all, body.home a.kgx-viewall.view-all {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: 44px;
  padding: 0 18px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--kgx-text) !important;
  border: 1px solid var(--kgx-line-strong) !important;
  box-shadow: none !important;
  font: 600 14px/1 'Manrope', sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  transition: border-color 0.25s ease, background-color 0.25s ease !important;
  -webkit-text-fill-color: currentColor !important; transform: none !important; margin: 0 !important; align-self: center !important; min-height: 44px !important; justify-self: start !important;
}
body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) a.kgx-viewall .kgx-ico, body.home a.kgx-viewall .kgx-ico { color: var(--kgx-accent-ink); transition: transform 0.4s var(--kgx-ease); }
body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) a.kgx-viewall.view-all:hover, body.home a.kgx-viewall.view-all:hover { border-color: var(--kgx-accent-ink) !important; background: rgba(99, 230, 0, 0.08) !important; transform: none !important; box-shadow: none !important; }
body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) a.kgx-viewall:hover .kgx-ico, body.home a.kgx-viewall:hover .kgx-ico { transform: translateX(3px); }

/* Round icon buttons (rail / carousel / testimonial arrows) */
body.home .kgx-rail-btn,
body.home .prof-service-nav,
body.home #testimonials .testi-arrow {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-grid !important; place-items: center;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid var(--kgx-line-strong) !important;
  color: var(--kgx-text) !important;
  box-shadow: none !important;
  cursor: pointer; padding: 0 !important;
  font-size: 18px; line-height: 1;
  transition: border-color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}
body.home .kgx-rail-btn:hover,
body.home .prof-service-nav:hover,
body.home #testimonials .testi-arrow:hover { border-color: var(--kgx-accent-ink) !important; background: rgba(99, 230, 0, 0.08) !important; }
body.home .kgx-rail-btn[disabled] { opacity: 0.35; cursor: default; }
body.home .kgx-rail-nav { display: inline-flex; gap: 8px; }
body.home .kgx-rail-nav[hidden] { display: none; }
body.home .prof-carousel-btn { display: none !important; }

/* Lime buttons: offset lift instead of a glow */
body.home :is(.btn-primary, .banner-cta-btn, .kg-online-btn.primary, .subscribe-btn, .upcoming-cta:not(.upcoming-cta-secondary)):not(.kgx-in-cart),
body.home .bundle-btn:not(.kgx-in-cart) {
  box-shadow: var(--kgx-lime-lift) !important;
}

/* ==========================================================================
   HERO
   ========================================================================== */
body.home .kgx-hero {
  background:
    radial-gradient(42% 52% at 78% 42%, rgba(99, 230, 0, 0.10), transparent 70%),
    var(--kgx-bg) !important;
  overflow: hidden;
}
body.light-mode.home .kgx-hero {
  background:
    radial-gradient(42% 52% at 78% 42%, rgba(99, 230, 0, 0.13), transparent 70%),
    #F8FAFC !important;
}
body.home .kgx-hero .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 72px) !important;
}
body.home .kgx-trust {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(99, 230, 0, 0.28) !important;
  background: rgba(99, 230, 0, 0.07) !important;
  box-shadow: none !important;
  color: var(--kgx-text) !important;
  font: 500 13px/1.3 'Manrope', sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
body.home .kgx-trust svg { width: 14px; height: 14px; color: var(--kgx-accent-ink); flex: 0 0 auto; }
body.home .kgx-hero h1.hero-title {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(42px, 5vw, 74px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
  max-width: 12.5ch !important;
  margin: 22px 0 0 !important;
  color: var(--kgx-text) !important;
}
body.home .kgx-hero h1.hero-title .accent {
  color: #63E600 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
}
body.light-mode.home .kgx-hero h1.hero-title .accent { color: #2B7D00 !important; }
body.home .kgx-hero .hero-sub {
  font-size: clamp(15.5px, 1.3vw, 18px) !important;
  line-height: 1.7 !important;
  max-width: 50ch !important;
  margin-top: 22px !important;
  color: var(--kgx-dim) !important;
}
body.home .kgx-hero .hero-cta { display: flex !important; flex-wrap: wrap; gap: 12px !important; margin-top: 34px !important; }
body.home .kgx-hero .hero-cta a {
  height: 54px; padding: 0 26px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  font: 600 15.5px/1 'Manrope', sans-serif !important;
  transition: transform 0.4s var(--kgx-ease), box-shadow 0.4s var(--kgx-ease), border-color 0.25s ease, background-color 0.25s ease;
}
body.home .kgx-hero .hero-cta .btn-primary { background: var(--kgx-lime-grad) !important; color: var(--kgx-on-lime) !important; border: 0 !important; }
body.home .kgx-hero .hero-cta .btn-primary:hover { transform: translateY(-2px); }
body.home .kgx-hero .hero-cta .btn-primary .kgx-ico { transition: transform 0.4s var(--kgx-ease); }
body.home .kgx-hero .hero-cta .btn-primary:hover .kgx-ico { transform: translateX(3px); }
body.home .kgx-hero .hero-cta .btn-ghost {
  background: transparent !important; color: var(--kgx-text) !important;
  border: 1px solid var(--kgx-line-strong) !important; box-shadow: none !important;
}
body.home .kgx-hero .hero-cta .btn-ghost .kgx-ico { color: var(--kgx-accent-ink); }
body.home .kgx-hero .hero-cta .btn-ghost:hover { border-color: var(--kgx-accent-ink) !important; background: rgba(99, 230, 0, 0.07) !important; }

body.home .kgx-hero .hero-stats {
  display: flex !important; flex-wrap: nowrap; gap: 0 !important;
  margin-top: 44px !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  max-width: none !important; width: auto !important;
}
body.home .kgx-hero .hero-stats .kgx-stat {
  display: flex !important; align-items: center; gap: 12px;
  padding: 2px 26px !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-left: 1px solid var(--kgx-line-strong) !important;
  border-radius: 0 !important; box-shadow: none !important; min-width: 0;
}
body.home .kgx-hero .hero-stats .kgx-stat:first-child { padding-left: 0 !important; border-left: 0 !important; }
body.home .kgx-hero .kgx-stat-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(99, 230, 0, 0.10) !important; border: 1px solid rgba(99, 230, 0, 0.22) !important;
  color: var(--kgx-accent-ink) !important; box-shadow: none !important;
}
body.home .kgx-hero .stat-num { font: 600 22px/1.1 'Baloo 2', sans-serif !important; color: var(--kgx-text) !important; }
body.home .kgx-hero .stat-label { font: 400 12.5px/1.35 'Manrope', sans-serif !important; color: var(--kgx-dim) !important; margin-top: 3px; }

/* Layered art stage */
body.home .kgx-stage {
  position: relative !important;
  width: 100% !important; max-width: 640px !important; height: auto !important; min-height: 0 !important;
  aspect-ratio: 1.1 / 1;
  justify-self: end; margin: 0 !important; padding: 0 !important;
  transform: none !important;
}
body.home .kgx-stage .kgx-layer { position: absolute; }
body.home .kgx-stage .kgx-layer-bg { inset: 0 0 20% 10%; z-index: 1; }
body.home .kgx-stage .kgx-layer-char { left: 0; bottom: 6%; width: 38%; aspect-ratio: 1 / 1.12; z-index: 3; }
body.home .kgx-stage .kgx-layer-fx { left: 0; top: 7%; z-index: 4; }
body.home .kgx-stage .art-tile,
body.home .kgx-stage .badge-float {
  position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; animation: none !important; margin: 0 !important; rotate: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.home .kgx-stage .tile-main {
  width: 100% !important; height: 100% !important; max-width: none !important;
  display: flex !important; flex-direction: column;
  padding: 10px !important;
  border-radius: 24px !important;
  background: var(--kgx-card) !important;
  border: 1px solid var(--kgx-line) !important;
  box-shadow: var(--kgx-depth-hi) !important;
  overflow: hidden;
}
body.home .kgx-stage .tile-main .tile-header {
  position: static !important; display: flex !important; justify-content: space-between; align-items: center;
  padding: 4px 6px 10px !important; margin: 0 !important; background: none !important;
}
body.home .kgx-stage .tile-main img {
  flex: 1 1 auto; min-height: 0; width: 100% !important; height: auto !important;
  object-fit: cover; border-radius: 16px !important; margin: 0 !important; transform: none !important;
}
body.home .kgx-stage .tile-main .tile-footer {
  position: static !important; padding: 12px 6px 4px 33% !important; margin: 0 !important;
  background: none !important; text-align: left;
}
body.home .kgx-stage .tile-title { font: 600 16px/1.25 'Baloo 2', sans-serif !important; color: var(--kgx-text) !important; }
body.home .kgx-stage .tile-sub { font: 400 12.5px/1.4 'Manrope', sans-serif !important; color: var(--kgx-dim) !important; margin-top: 2px; }
body.home .kgx-stage .live-tag {
  display: inline-flex !important; align-items: center; gap: 7px;
  font: 600 10.5px/1 'Manrope', sans-serif !important; letter-spacing: 0.08em !important;
  color: var(--kgx-accent-ink) !important; background: none !important; border: 0 !important; padding: 0 !important;
}
body.home .kgx-stage .pulse-dot { animation: none !important; width: 7px !important; height: 7px !important; border-radius: 50%; background: #63E600 !important; box-shadow: none !important; }
body.home .kgx-stage .psd-badge {
  font: 600 11px/1 'Manrope', sans-serif !important; padding: 6px 10px !important; border-radius: 999px !important;
  background: transparent !important; border: 1px solid var(--kgx-line-strong) !important; color: var(--kgx-text) !important; box-shadow: none !important;
}
body.home .kgx-stage .tile-sub-1 {
  width: 100% !important; height: 100% !important; max-width: none !important;
  padding: 8px !important;
  border-radius: 20px !important;
  background: var(--kgx-card) !important;
  border: 1px solid var(--kgx-line-strong) !important;
  box-shadow: var(--kgx-depth-hi) !important;
  overflow: hidden;
}
body.home .kgx-stage .tile-sub-1 img {
  width: 100% !important; height: 100% !important; object-fit: cover; object-position: 40% 50%;
  border-radius: 14px !important; margin: 0 !important; transform: none !important;
}
body.home .kgx-stage .char-badge {
  position: absolute !important; top: 16px !important; left: 16px !important; z-index: 2;
  font: 600 11px/1 'Manrope', sans-serif !important; padding: 6px 10px !important; border-radius: 999px !important;
  background: rgba(7, 16, 6, 0.82) !important; color: #DDF31A !important; border: 0 !important; box-shadow: none !important;
}
body.home .kgx-stage .badge-1 {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 10px 14px !important; border-radius: 14px !important; max-width: none !important; white-space: nowrap !important;
  background: var(--kgx-card) !important; border: 1px solid rgba(99, 230, 0, 0.3) !important;
  color: var(--kgx-text) !important; font: 600 13px/1.2 'Manrope', sans-serif !important;
  box-shadow: var(--kgx-depth) !important;
}
body.home .kgx-stage .badge-1 .kgx-ico { color: var(--kgx-accent-ink); flex: 0 0 auto; }

/* Timeline panel: names the layers */
body.home .kgx-timeline {
  position: absolute; right: 0; bottom: 0; z-index: 5;
  width: 58%;
  padding: 12px 14px 14px;
  border-radius: 16px;
  background: var(--kgx-card);
  border: 1px solid var(--kgx-line-strong);
  box-shadow: var(--kgx-depth-hi);
  overflow: hidden;
  --tl-name: 76px;
}
body.home .kgx-tl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 600 10.5px/1 'Manrope', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kgx-dim); }
body.home .kgx-tl-time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; color: var(--kgx-accent-ink); }
body.home .kgx-tl-rows { position: relative; display: grid; gap: 8px; }
body.home .kgx-tl-row { display: grid; grid-template-columns: var(--tl-name) 1fr; align-items: center; gap: 0; height: 16px; }
body.home .kgx-tl-name { font: 500 11.5px/1 'Manrope', sans-serif; color: var(--kgx-dim); white-space: nowrap; }
body.home .kgx-tl-track { position: relative; height: 8px; border-radius: 4px; background: var(--kgx-line); }
body.home .kgx-tl-bar { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 16%); right: 4%; border-radius: 4px; transform-origin: left center; }
body.home .kgx-tl-row:nth-child(1) .kgx-tl-bar { background: rgba(88, 220, 0, 0.35); }
body.home .kgx-tl-row:nth-child(2) .kgx-tl-bar { background: rgba(99, 230, 0, 0.7); }
body.home .kgx-tl-row:nth-child(3) .kgx-tl-bar { background: rgba(221, 243, 26, 0.75); }
body.home .kgx-tl-key {
  position: absolute; top: 50%; left: calc(var(--i) * 16%);
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: #DDF31A; border: 2px solid var(--kgx-card); border-radius: 2px;
  transform: rotate(45deg);
}
body.home .kgx-tl-playhead {
  position: absolute; top: -6px; bottom: -6px; left: var(--tl-name); width: calc(100% - var(--tl-name));
  border-left: 2px solid #63E600; pointer-events: none;
  transform: translateX(70%);
}
body.home .kgx-tl-playhead::before { content: ""; position: absolute; top: -1px; left: -6px; border: 5px solid transparent; border-top: 6px solid #63E600; }
body.light-mode.home .kgx-tl-playhead { border-left-color: #2B7D00; }
body.light-mode.home .kgx-tl-playhead::before { border-top-color: #2B7D00; }
body.light-mode.home .kgx-tl-row:nth-child(1) .kgx-tl-bar { background: rgba(43, 125, 0, 0.25); }
body.light-mode.home .kgx-tl-row:nth-child(2) .kgx-tl-bar { background: rgba(43, 125, 0, 0.55); }
body.light-mode.home .kgx-tl-row:nth-child(3) .kgx-tl-bar { background: rgba(99, 180, 0, 0.75); }
body.light-mode.home .kgx-tl-key { background: #2B7D00; }

/* The motion moment: layers assemble in timeline order on load (only when html.kgx-motion is set). */
@keyframes kgxLayerIn { from { opacity: 0; transform: translate3d(var(--fx, 0), var(--fy, 24px), 0) scale(var(--fs, 0.97)); } to { opacity: 1; transform: none; } }
@keyframes kgxBarIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kgxKeyIn { from { transform: rotate(45deg) scale(0); } to { transform: rotate(45deg) scale(1); } }
@keyframes kgxPlay { from { transform: translateX(0); } to { transform: translateX(70%); } }
@keyframes kgxPanelIn { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
html.kgx-motion body.home .kgx-timeline { animation: kgxPanelIn 0.7s var(--kgx-ease) 0.05s both; }
html.kgx-motion body.home .kgx-tl-playhead { animation: kgxPlay 1.6s var(--kgx-ease) 0.2s both; }
html.kgx-motion body.home .kgx-tl-bar { animation: kgxBarIn 1s var(--kgx-ease) both; animation-delay: calc(0.25s + var(--i) * 0.3s); }
html.kgx-motion body.home .kgx-tl-key { animation: kgxKeyIn 0.6s var(--kgx-ease) both; animation-delay: calc(0.25s + var(--i) * 0.3s); }
html.kgx-motion body.home .kgx-layer-bg { --fx: 28px; --fy: 0px; --fs: 0.98; animation: kgxLayerIn 1.1s var(--kgx-ease) 0.25s both; }
html.kgx-motion body.home .kgx-layer-char { --fx: -18px; --fy: 30px; --fs: 0.94; animation: kgxLayerIn 1.1s var(--kgx-ease) 0.55s both; }
html.kgx-motion body.home .kgx-layer-fx { --fx: 0px; --fy: 14px; --fs: 0.96; animation: kgxLayerIn 0.9s var(--kgx-ease) 0.85s both; }
@media (prefers-reduced-motion: reduce) {
  html.kgx-motion body.home .kgx-stage *, html.kgx-motion body.home .kgx-stage { animation: none !important; }
}

/* ---------- Trust strip ---------- */
body.home .strip { padding: 0 !important; margin: 0 !important; border-top: 1px solid var(--kgx-line); border-bottom: 1px solid var(--kgx-line); background: transparent !important; }
body.home .strip-inner { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 16px 0 !important; }
body.home .strip-item {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 22px !important;
  color: var(--kgx-dim) !important; font: 500 13.5px/1 'Manrope', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
}
body.home .strip-item svg { stroke: var(--kgx-accent-ink) !important; width: 18px; height: 18px; }
body.home .strip-item svg text { fill: var(--kgx-accent-ink) !important; stroke: none !important; }

/* ==========================================================================
   CATEGORIES
   ========================================================================== */
body.home .bento-categories .cat-card {
  border-radius: 22px !important;
  border: 1px solid var(--kgx-line) !important;
  box-shadow: none !important;
  transition: transform 0.5s var(--kgx-ease), border-color 0.3s ease, box-shadow 0.5s var(--kgx-ease) !important;
}
body.home .bento-categories .cat-card:hover { transform: translateY(-4px) !important; border-color: rgba(99, 230, 0, 0.4) !important; box-shadow: var(--kgx-depth) !important; }
body.home .bento-categories .cat-card h3 { font-weight: 600 !important; }

/* ==========================================================================
   PRODUCT CARDS (latest, rails, animations)
   ========================================================================== */
body.home .pcard {
  background: var(--kgx-card) !important;
  border: 1px solid var(--kgx-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  height: 100%;
  transition: transform 0.5s var(--kgx-ease), box-shadow 0.5s var(--kgx-ease), border-color 0.3s ease !important;
}
body.home .pcard:hover { transform: translateY(-4px) !important; border-color: rgba(99, 230, 0, 0.35) !important; box-shadow: var(--kgx-depth) !important; }
body.home .pcard-img { margin: 8px !important; border-radius: 12px !important; }
body.home .pcard-img img { transition: transform 0.7s var(--kgx-ease); }
body.home .pcard:hover .pcard-img img { transform: scale(1.04); }
body.home .sale-stamp {
  background: rgba(7, 16, 6, 0.85) !important; color: #DDF31A !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font: 700 11px/1 'Manrope', sans-serif !important; padding: 6px 9px !important; border-radius: 8px !important;
}
body.home .pcard-body { padding: 6px 16px 16px !important; display: flex !important; flex-direction: column; flex: 1 1 auto; }
body.home .pcard-tag { color: var(--kgx-dim) !important; font: 600 10.5px/1.2 'Manrope', sans-serif !important; letter-spacing: 0.07em !important; text-transform: uppercase; margin: 4px 0 6px !important; }
body.home .pcard-title {
  font: 600 15px/1.35 'Manrope', sans-serif !important; color: var(--kgx-text) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em; margin: 0 0 14px !important; flex: 0 0 auto !important;
}
body.home .pcard-body > .pcard-price { margin-top: auto !important; align-items: center !important; }
body.home .price-now { font: 600 19px/1 'Baloo 2', sans-serif !important; color: var(--kgx-accent-ink) !important; }
body.home .price-old { font-size: 12.5px !important; }
body.home .pcard-add-cart:not(.kgx-in-cart) {
  width: 40px !important; height: 40px !important; flex: 0 0 40px !important;
  background: var(--kgx-lime-grad) !important; color: var(--kgx-on-lime) !important;
  box-shadow: var(--kgx-lime-lift) !important;
}
body.home a.pcard-add-cart.kgx-in-cart { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }

/* Latest products: 4 x 2 grid on desktop */
body.home #latest-products .grid { gap: 20px !important; }

/* Rails: backgrounds show 3 wide scenes, characters show 5 */
body.home .kgx-rail { position: relative; }
body.home .kgx-rail > .grid {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: calc((100% - 2 * 20px) / 3);
  gap: 20px !important;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px 4px 10px !important; margin: -6px -4px -10px !important;
}
body.home .kgx-rail > .grid::-webkit-scrollbar { display: none; }
body.home .kgx-rail .pcard { scroll-snap-align: start; }
body.home #backgrounds .pcard-img { aspect-ratio: 16 / 10 !important; }
body.home #characters .kgx-rail > .grid { grid-auto-columns: calc((100% - 4 * 20px) / 5); }
body.home #characters .pcard-img { aspect-ratio: 1 / 1 !important; }

/* Animation filter tabs */
body.home #animations .tabs { display: flex !important; gap: 8px; flex-wrap: wrap; margin: -8px 0 24px !important; }
body.home #animations .tab-btn {
  height: 40px; padding: 0 16px !important;
  background: transparent !important; border: 1px solid var(--kgx-line-strong) !important; box-shadow: none !important;
  color: var(--kgx-text) !important; font: 500 14px/1 'Manrope', sans-serif !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
body.home #animations .tab-btn:hover { border-color: var(--kgx-accent-ink) !important; }
body.home #animations .tab-btn.active { background: var(--kgx-lime-grad) !important; color: var(--kgx-on-lime) !important; border-color: transparent !important; font-weight: 600 !important; }

/* ==========================================================================
   FESTIVE OFFER BAND
   ========================================================================== */
body.home .festival-offer-section .festival-offer-banner-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px 40px !important;
  padding: 18px 32px 18px 18px !important;
  min-height: 0 !important; height: auto !important;
  border-radius: 24px !important;
  background: linear-gradient(100deg, rgba(99, 230, 0, 0.12), rgba(99, 230, 0, 0) 58%), var(--kgx-card) !important;
  border: 1px solid rgba(99, 230, 0, 0.28) !important;
  box-shadow: var(--kgx-depth) !important;
}
body.home .festival-offer-section .banner-left { display: flex !important; align-items: center !important; gap: 26px !important; min-width: 0; flex-direction: row !important; }
body.home .festival-offer-section .banner-offer-img-wrap { width: 150px !important; height: 150px !important; flex: 0 0 150px !important; border-radius: 16px !important; overflow: hidden; margin: 0 !important; box-shadow: none !important; border: 0 !important; }
body.home .festival-offer-section .banner-offer-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
body.home .festival-offer-section .banner-text-info { min-width: 0; text-align: left !important; }
body.home .festival-offer-section .banner-text-info h2 {
  font: 600 clamp(24px, 2.6vw, 36px)/1.1 'Baloo 2', sans-serif !important; color: var(--kgx-text) !important;
  margin: 0 0 14px !important; letter-spacing: -0.01em !important;
}
body.home .festival-offer-section .banner-text-info h2 br { display: none; }
body.home .festival-offer-section .highlight-green { color: var(--kgx-accent-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
body.home .festival-offer-section .banner-badge-row { display: flex !important; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 0 !important; justify-content: flex-start !important; }
body.home .festival-offer-section .festival-badge-pill {
  background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
  color: var(--kgx-dim) !important; font: 500 14px/1.3 'Manrope', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
}
body.home .festival-offer-section .coupon-code-pill {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px !important; border-radius: 10px !important;
  border: 1.5px dashed rgba(99, 230, 0, 0.6) !important; background: rgba(99, 230, 0, 0.08) !important; box-shadow: none !important;
  color: var(--kgx-text) !important; font: 500 13px/1 'Manrope', sans-serif !important; cursor: pointer;
}
body.home .festival-offer-section .coupon-code-pill strong { font-weight: 700; letter-spacing: 0.06em; }
body.home .festival-offer-section .coupon-code-pill .kgx-ico { color: var(--kgx-accent-ink); }
body.home .festival-offer-section .copy-hint-badge { background: #63E600 !important; color: #071006 !important; border-radius: 6px !important; padding: 5px 8px !important; font: 700 10.5px/1 'Manrope', sans-serif !important; border: 0 !important; }
body.home .festival-offer-section .banner-sub-features { display: flex !important; flex-wrap: wrap; gap: 8px 18px !important; margin-top: 14px !important; justify-content: flex-start !important; }
body.home .festival-offer-section .banner-sub-features span {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
  color: var(--kgx-dim) !important; font: 500 13px/1.3 'Manrope', sans-serif !important;
}
body.home .festival-offer-section .banner-sub-features .kgx-ico { color: var(--kgx-accent-ink); width: 15px; height: 15px; }
body.home .festival-offer-section .banner-right { display: grid !important; justify-items: end; gap: 12px !important; text-align: right; flex: none !important; width: auto !important; }
body.home .festival-offer-section .sale-discount-badge-graphic { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; display: block !important; }
body.home .festival-offer-section .sale-discount-num { font: 700 clamp(36px, 3.6vw, 52px)/1 'Baloo 2', sans-serif !important; color: var(--kgx-accent-ink) !important; display: block; }
body.home .festival-offer-section .sale-discount-label { display: none !important; }
body.home .festival-offer-section .banner-cta-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 24px !important; width: auto !important;
  background: var(--kgx-lime-grad) !important; color: var(--kgx-on-lime) !important; border: 0 !important;
  font: 600 15px/1 'Manrope', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
}
body.home .festival-offer-section .banner-timer-badge {
  order: 3; display: inline-flex !important; align-items: center; gap: 6px;
  background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
  color: var(--kgx-dim) !important; font: 500 12.5px/1.3 'Manrope', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
}
body.home .festival-offer-section .banner-timer-badge .kgx-ico { color: var(--kgx-accent-ink); width: 14px; height: 14px; }

/* ==========================================================================
   BUNDLES + UPCOMING
   ========================================================================== */
body.home .bundle-grid { gap: 24px !important; }
body.home .bundle-card {
  display: flex !important; flex-direction: column;
  background: var(--kgx-card) !important; border: 1px solid var(--kgx-line) !important; border-radius: 24px !important;
  box-shadow: none !important; overflow: hidden;
  transition: transform 0.5s var(--kgx-ease), box-shadow 0.5s var(--kgx-ease), border-color 0.3s ease !important;
}
body.home .bundle-card:hover { transform: translateY(-4px) !important; border-color: rgba(99, 230, 0, 0.35) !important; box-shadow: var(--kgx-depth) !important; }
body.home .bundle-visual { aspect-ratio: 16 / 10; height: auto !important; }
body.home .bundle-visual img { width: 100%; height: 100% !important; object-fit: cover; }
body.home .bundle-badge { border-radius: 8px !important; box-shadow: none !important; }
body.home .bundle-body { display: flex !important; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 24px !important; }
body.home .bundle-title { font: 600 22px/1.2 'Baloo 2', sans-serif !important; color: var(--kgx-text) !important; }
body.home .bundle-title a { color: inherit !important; text-decoration: none !important; }
body.home .bundle-desc { color: var(--kgx-dim) !important; font-size: 14px !important; line-height: 1.6 !important; }
body.home .bundle-chip { background: transparent !important; border: 1px solid var(--kgx-line-strong) !important; box-shadow: none !important; color: var(--kgx-text) !important; }
body.home .bundle-foot { margin-top: auto !important; padding-top: 18px !important; border-top: 1px solid var(--kgx-line) !important; align-items: center !important; }
body.home .bundle-price strong { font: 600 26px/1.1 'Baloo 2', sans-serif !important; color: var(--kgx-text) !important; }
body.home .bundle-price small { color: var(--kgx-dim) !important; letter-spacing: 0.06em; }
body.home .bundle-btn:not(.kgx-in-cart) { height: 46px; padding: 0 18px !important; background: var(--kgx-lime-grad) !important; color: var(--kgx-on-lime) !important; font: 600 14px/1 'Manrope', sans-serif !important; display: inline-flex !important; align-items: center; gap: 8px; border: 0 !important; }
body.home a.bundle-btn.kgx-in-cart { height: 46px; padding: 0 18px !important; font: 600 14px/1 'Manrope', sans-serif !important; }

body.home .upcoming-shell {
  background: var(--kgx-card) !important; border: 1px solid var(--kgx-line) !important; border-radius: 28px !important;
  box-shadow: none !important;
}
body.home .upcoming-title { font-weight: 600 !important; }
body.home .upcoming-accent { color: var(--kgx-accent-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
body.home .upcoming-feature-row span { display: inline-flex !important; align-items: center; gap: 6px; }
body.home .upcoming-feature-row .kgx-ico { color: var(--kgx-accent-ink); width: 14px; height: 14px; }
body.home .upcoming-small-note { display: flex !important; align-items: center; gap: 8px; }
body.home .upcoming-small-note .kgx-ico { color: var(--kgx-accent-ink); flex: 0 0 auto; }
body.home .countdown-box { box-shadow: none !important; }

/* ==========================================================================
   LEARN: courses (featured), live class, YouTube
   ========================================================================== */
body.home .course-card {
  background: var(--kgx-card) !important; border: 1px solid var(--kgx-line) !important; border-radius: 22px !important;
  box-shadow: none !important;
  transition: transform 0.5s var(--kgx-ease), box-shadow 0.5s var(--kgx-ease), border-color 0.3s ease !important;
}
body.home a.course-card:hover { transform: translateY(-4px) !important; border-color: rgba(99, 230, 0, 0.35) !important; box-shadow: var(--kgx-depth) !important; }
body.home .course-card h3 { font-weight: 600 !important; color: var(--kgx-text) !important; }
body.home .course-level { color: var(--kgx-accent-ink) !important; }
@media (min-width: 901px) {
  body.home .course-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    gap: 20px !important;
  }
  body.home .course-row > .course-card:first-child { grid-row: 1 / 3; padding: 14px 14px 24px !important; display: flex !important; flex-direction: column; }
  body.home .course-row > .course-card:first-child .course-img { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
  body.home .course-row > .course-card:first-child h3 { font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.15 !important; margin: 6px 10px 0 !important; }
  body.home .course-row > .course-card:first-child .course-level,
  body.home .course-row > .course-card:first-child p,
  body.home .course-row > .course-card:first-child .course-foot { margin-left: 10px !important; margin-right: 10px !important; }
  body.home .course-row > .course-card:first-child p { font-size: 15.5px !important; line-height: 1.65 !important; }
  body.home .course-row > .course-card:first-child .course-foot { margin-top: auto !important; }
  body.home .course-row > .course-card:first-child .course-price { font: 600 26px/1 'Baloo 2', sans-serif !important; color: var(--kgx-text) !important; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) {
    display: grid !important;
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 20px; align-content: start;
    padding: 12px 20px 12px 12px !important;
  }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) .course-img { grid-column: 1; grid-row: 1 / 5; height: 100%; min-height: 150px; margin: 0 !important; aspect-ratio: auto !important; border-radius: 12px; overflow: hidden; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) .course-img img,
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) .course-img video { width: 100%; height: 100% !important; object-fit: cover; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) > :not(.course-img) { grid-column: 2; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) .course-level { margin-top: 8px !important; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) h3 { font-size: 19px !important; margin: 4px 0 6px !important; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) p { font-size: 13.5px !important; margin: 0 !important; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) .course-foot { padding-top: 10px !important; margin-top: 10px !important; }
}

body.home .kg-online-class-card {
  background: var(--kgx-card) !important; border: 1px solid var(--kgx-line) !important; border-radius: 26px !important;
  box-shadow: none !important;
}
body.home .kg-online-copy h2 { font-weight: 600 !important; }
body.home .kg-online-copy h2 span { color: var(--kgx-accent-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
body.home .kg-online-note { display: flex; gap: 6px; align-items: flex-start; }
body.home .kg-online-note .kgx-ico { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--kgx-accent-ink); }

body.home .latest-video-shell {
  background: var(--kgx-card) !important; border: 1px solid var(--kgx-line) !important; border-radius: 26px !important; box-shadow: none !important;
}
body.home .latest-video-title p { color: var(--kgx-dim) !important; margin-top: 8px !important; }
body.home .telegram-icon .kgx-ico, body.home .telegram-arrow .kgx-ico { width: 16px; height: 16px; }

/* ==========================================================================
   HIRE: services, voice artists, script writers
   ========================================================================== */
body.home .service-card {
  background: var(--kgx-card) !important; border: 1px solid var(--kgx-line) !important; border-radius: 22px !important;
  box-shadow: none !important;
  transition: transform 0.5s var(--kgx-ease), box-shadow 0.5s var(--kgx-ease), border-color 0.3s ease !important;
}
body.home .service-card:hover { transform: translateY(-4px) !important; border-color: rgba(99, 230, 0, 0.35) !important; box-shadow: var(--kgx-depth) !important; }
body.home .service-included-title { display: none !important; }
body.home .service-card-title { font-weight: 600 !important; }
body.home a.service-select-btn {
  background: transparent !important; color: var(--kgx-text) !important;
  border: 1px solid rgba(99, 230, 0, 0.45) !important; box-shadow: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
body.home a.service-select-btn .kgx-ico { color: var(--kgx-accent-ink); }
body.home a.service-select-btn:hover { background: var(--kgx-lime-grad) !important; color: var(--kgx-on-lime) !important; border-color: transparent !important; }
body.home a.service-select-btn:hover .kgx-ico { color: inherit; }

body.home .voice-card {
  background: var(--kgx-card) !important; border: 1px solid var(--kgx-line) !important; border-radius: 20px !important;
  box-shadow: none !important;
  transition: transform 0.5s var(--kgx-ease), box-shadow 0.5s var(--kgx-ease), border-color 0.3s ease !important;
}
body.home .voice-card:hover { transform: translateY(-3px) !important; border-color: rgba(99, 230, 0, 0.35) !important; box-shadow: var(--kgx-depth) !important; }
body.home .voice-name { font-weight: 600 !important; }
body.home .voice-rate { color: var(--kgx-accent-ink) !important; }
body.home .kgx-sw-offer { display: inline-flex !important; align-items: center; gap: 6px; }
body.home .kgx-sw-offer .kgx-ico { width: 13px; height: 13px; flex: 0 0 auto; }

/* ==========================================================================
   SOCIAL PROOF
   ========================================================================== */
body.home #testimonials { background: transparent !important; }
body.home #testimonials > .wrap:not(#kgx-z) { width: auto !important; max-width: 1240px !important; margin: 0 auto !important; padding: 0 32px !important; }
body.home #testimonials .testi-wrap {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; max-width: none !important;
}
body.home #testimonials .testi-controls { display: inline-flex !important; gap: 8px; }
body.home .kgx-proof { display: flex; align-items: center; gap: 12px; padding-right: 24px; border-right: 1px solid var(--kgx-line-strong); }
body.home .kgx-proof-num { font: 600 52px/0.9 'Baloo 2', sans-serif; color: var(--kgx-text); letter-spacing: -0.02em; }
body.home .kgx-proof-meta { display: grid; gap: 4px; font: 500 13px/1.2 'Manrope', sans-serif; color: var(--kgx-dim); }
body.home .kgx-proof-stars { color: var(--kgx-accent-ink); font-size: 16px; letter-spacing: 2px; }
body.home #testimonials .testi-card {
  background: var(--kgx-card) !important; border: 1px solid var(--kgx-line) !important; border-radius: 20px !important;
  box-shadow: none !important; display: flex !important; flex-direction: column; padding: 26px !important;
}
body.home #testimonials .testi-card::before { opacity: 0.5; }
body.home #testimonials .testi-stars { color: var(--kgx-accent-ink) !important; }
body.home #testimonials .testi-quote { color: var(--kgx-text) !important; font-size: 15px !important; line-height: 1.7 !important; }
body.light-mode.home #testimonials .testi-quote { color: #1E293B !important; }
body.home #testimonials .testi-person { margin-top: auto !important; padding-top: 18px; }

/* Policies: a slim trust row */
body.home .kg-policy-section .policy-row { gap: 16px !important; }
body.home .kg-policy-section .policy-item {
  background: transparent !important; border: 1px solid var(--kgx-line) !important; border-radius: 18px !important;
  box-shadow: none !important; padding: 20px 22px !important;
}
body.home .kg-policy-section .policy-item h4 { font-weight: 600 !important; }
body.home .kg-policy-section .policy-item p a { color: var(--kgx-accent-ink) !important; }

/* ==========================================================================
   CLOSING CTA + licence
   ========================================================================== */
body.home .contact-license-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; }
body.home .contact-inquiry-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 28px 56px !important;
  padding: clamp(32px, 5vw, 64px) !important;
  min-height: 0 !important; height: auto !important;
  border-radius: 28px !important;
  background: var(--kgx-lime-grad) !important;
  border: 0 !important;
  box-shadow: 0 34px 60px -34px rgba(88, 220, 0, 0.6) !important;
  overflow: hidden;
}
body.home .contact-inquiry-card h2 {
  font: 700 clamp(32px, 4.4vw, 58px)/1.02 'Baloo 2', sans-serif !important;
  color: #071006 !important; letter-spacing: -0.02em !important; max-width: 15ch; margin: 0 !important;
}
body.home .contact-inquiry-card .cta-sub { color: #1D3A08 !important; font-size: 16.5px !important; line-height: 1.6 !important; max-width: 54ch; margin: 16px 0 0 !important; }
body.home .contact-inquiry-card .contact-action-row { display: flex !important; flex-direction: column !important; gap: 12px !important; min-width: 250px; margin: 0 !important; }
body.home .contact-inquiry-card .contact-main-btn,
body.home .contact-inquiry-card .btn-whatsapp {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 26px !important; width: 100% !important;
  font: 600 16px/1 'Manrope', sans-serif !important; text-transform: none !important;
  transition: transform 0.4s var(--kgx-ease), background-color 0.25s ease !important;
}
body.home .contact-inquiry-card .contact-main-btn { background: #071006 !important; color: #DDF31A !important; border: 0 !important; box-shadow: 0 14px 26px -14px rgba(7, 16, 6, 0.7) !important; }
body.home .contact-inquiry-card .contact-main-btn:hover { transform: translateY(-2px); }
body.home .contact-inquiry-card .btn-whatsapp { background: rgba(255, 255, 255, 0.35) !important; color: #071006 !important; border: 1.5px solid rgba(7, 16, 6, 0.3) !important; box-shadow: none !important; }
body.home .contact-inquiry-card .btn-whatsapp:hover { background: rgba(255, 255, 255, 0.55) !important; }
body.home .contact-inquiry-card .wa-icon { background: none !important; box-shadow: none !important; }
body.home .contact-inquiry-card .wa-icon svg { fill: #071006 !important; width: 18px; height: 18px; }
body.home .contact-inquiry-card :focus-visible { outline-color: #071006 !important; }

body.home .asset-license-notice {
  background: transparent !important; border: 1px solid var(--kgx-line) !important; border-radius: 22px !important;
  box-shadow: none !important; padding: 28px !important;
}
body.home .asset-license-notice h3 { font-weight: 600 !important; font-size: 19px !important; color: var(--kgx-text) !important; }
body.home .asset-license-notice .license-rule-item { background: transparent !important; box-shadow: none !important; }

/* ==========================================================================
   LIGHT MODE touch-ups
   ========================================================================== */
body.light-mode.home .hero ~ section { color: #0F172A; }
body.light-mode.home .pcard,
body.light-mode.home .bundle-card,
body.light-mode.home .course-card,
body.light-mode.home .service-card,
body.light-mode.home .voice-card,
body.light-mode.home #testimonials .testi-card,
body.light-mode.home .upcoming-shell,
body.light-mode.home .kg-online-class-card,
body.light-mode.home .latest-video-shell { background: #FFFFFF !important; }
body.light-mode.home .sale-stamp { background: #FFFFFF !important; color: #2B7D00 !important; border: 1px solid rgba(43, 125, 0, 0.25) !important; }
body.light-mode.home .kgx-stage .char-badge { background: rgba(255, 255, 255, 0.92) !important; color: #2B7D00 !important; }
body.light-mode.home .festival-offer-section .copy-hint-badge { background: #2B7D00 !important; color: #FFFFFF !important; }
body.light-mode.home .festival-offer-section .coupon-code-pill { border-color: rgba(43, 125, 0, 0.55) !important; background: rgba(99, 230, 0, 0.08) !important; }
body.light-mode.home .kgx-trust { border-color: rgba(43, 125, 0, 0.3) !important; background: rgba(99, 230, 0, 0.08) !important; }
body.light-mode.home .strip { background: transparent !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  body.home .kgx-rail > .grid { grid-auto-columns: calc((100% - 20px) / 2.3); }
  body.home #characters .kgx-rail > .grid { grid-auto-columns: calc((100% - 3 * 20px) / 3.6); }
}
@media (max-width: 960px) {
  body.home .kgx-hero .hero-grid { grid-template-columns: 1fr !important; }
  body.home .kgx-stage { justify-self: center; max-width: 600px !important; margin-top: 8px !important; }
  body.home .festival-offer-section .festival-offer-banner-bar { grid-template-columns: 1fr !important; padding: 20px !important; }
  body.home .festival-offer-section .banner-right { justify-items: start; text-align: left; grid-template-columns: auto auto; align-items: center; }
  body.home .festival-offer-section .banner-timer-badge { grid-column: 1 / -1; }
  body.home .contact-inquiry-card { grid-template-columns: 1fr !important; }
  body.home .contact-inquiry-card .contact-action-row { flex-direction: row !important; flex-wrap: wrap; min-width: 0; }
  body.home .contact-inquiry-card .contact-main-btn,
  body.home .contact-inquiry-card .btn-whatsapp { width: auto !important; flex: 1 1 220px; }
}
@media (max-width: 700px) {
  body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) .kgx-head,
  body.home #testimonials .testi-head { grid-template-columns: 1fr !important; gap: 16px !important; }
  body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) .kgx-head > .kgx-viewall,
  body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) .kgx-head-actions,
  body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) .prof-services-controls { justify-self: start; justify-content: flex-start !important; }
  body.home #testimonials .testi-controls { justify-self: start; }

  body.home .kgx-hero h1.hero-title { font-size: clamp(38px, 10.5vw, 48px) !important; margin-top: 18px !important; }
  body.home .kgx-hero .hero-cta a { width: 100%; }
  body.home .kgx-hero .hero-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px !important; }
  body.home .kgx-hero .hero-stats .kgx-stat { flex-direction: column; align-items: flex-start !important; gap: 8px; padding: 0 12px !important; }
  body.home .kgx-hero .hero-stats .kgx-stat:first-child { padding-left: 0 !important; }
  body.home .kgx-hero .kgx-stat-ico { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  body.home .kgx-hero .stat-num { font-size: 19px !important; }
  body.home .kgx-stage { aspect-ratio: 1 / 1.02; }
  body.home .kgx-stage .kgx-layer-bg { inset: 0 0 26% 8%; }
  body.home .kgx-stage .kgx-layer-char { width: 40%; bottom: 10%; }
  body.home .kgx-stage .tile-main .tile-footer { padding-left: 36% !important; }
  body.home .kgx-stage .tile-title { font-size: 14px !important; }
  body.home .kgx-stage .tile-sub { font-size: 11.5px !important; }
  body.home .kgx-timeline { width: 60%; padding: 10px 11px 11px; --tl-name: 60px; }
  body.home .kgx-tl-name { font-size: 10px; }
  body.home .kgx-tl-head { font-size: 9.5px; margin-bottom: 8px; }
  body.home .kgx-tl-rows { gap: 6px; }
  body.home .kgx-tl-row { height: 14px; }

  /* Categories: compact 2-up tiles */
  body.home .bento-categories { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-auto-rows: auto !important; gap: 12px !important; }
  body.home .bento-categories .cat-card { grid-column: auto !important; grid-row: auto !important; min-height: 200px !important; height: auto !important; }
  body.home .bento-categories .cat-featured,
  body.home .bento-categories .cat-courses { grid-column: 1 / -1 !important; }
  body.home .bento-categories .cat-featured { min-height: 260px !important; }
  body.home .bento-categories .cat-card:not(.cat-featured):not(.cat-courses) p,
  body.home .bento-categories .cat-card:not(.cat-featured):not(.cat-courses) .subchip-row { display: none !important; }
  body.home .bento-categories .cat-card:not(.cat-featured):not(.cat-courses) h3 { font-size: 19px !important; }

  /* Products: latest shows 4 in a 2-up grid; every other product set becomes a swipe rail */
  body.home #latest-products .grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  body.home #latest-products .grid > .pcard:nth-child(n+5) { display: none !important; }
  body.home .kgx-rail > .grid,
  body.home #animations .grid,
  body.home .bundle-grid {
    display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important;
    grid-auto-columns: 62%; gap: 12px !important;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; scroll-padding-inline: 14px;
    margin: -6px -14px -10px !important; padding: 6px 14px 10px !important;
  }
  body.home .kgx-rail > .grid::-webkit-scrollbar,
  body.home #animations .grid::-webkit-scrollbar,
  body.home .bundle-grid::-webkit-scrollbar { display: none; }
  body.home #animations .pcard, body.home .bundle-grid > .bundle-card { scroll-snap-align: start; }
  body.home #backgrounds .kgx-rail > .grid { grid-auto-columns: 78%; }
  body.home #characters .kgx-rail > .grid { grid-auto-columns: 56%; }
  body.home .bundle-grid { grid-auto-columns: 86%; }
  body.home .kgx-rail-nav { display: none !important; }
  body.home .pcard-body { padding: 4px 12px 12px !important; }
  body.home .pcard-title { font-size: 14px !important; }
  body.home .price-now { font-size: 17px !important; }

  /* Festive band: compact */
  body.home .festival-offer-section .banner-offer-img-wrap,
  body.home .festival-offer-section .banner-sub-features,
  body.home .festival-offer-section .sale-discount-badge-graphic { display: none !important; }
  body.home .festival-offer-section .banner-right { grid-template-columns: 1fr; width: 100% !important; }
  body.home .festival-offer-section .banner-cta-btn { width: 100% !important; }

  /* Courses: compact coming-soon rows */
  body.home .course-row { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) { display: grid !important; grid-template-columns: 38% minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 14px 10px 10px !important; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) .course-img { grid-row: 1 / 4; margin: 0 !important; aspect-ratio: 1 / 1 !important; height: auto; border-radius: 12px; overflow: hidden; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) > :not(.course-img) { grid-column: 2; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) p,
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) .course-foot { display: none !important; }
  body.home .course-row > .course-card:is(.is-coming-soon,.is-side) h3 { font-size: 17px !important; margin: 2px 0 0 !important; }
  body.home .kgx-soon-badge { display: none; }

  body.home .kgx-proof-num { font-size: 44px; }
  body.home .contact-inquiry-card { border-radius: 24px !important; }
  body.home .contact-inquiry-card .contact-action-row { flex-direction: column !important; }
  body.home .contact-inquiry-card .contact-main-btn,
  body.home .contact-inquiry-card .btn-whatsapp { width: 100% !important; flex: none; }
  body.home .asset-license-notice { padding: 22px !important; }
}

/* Offer band: retire the theme's decorative pseudo shapes; one clean right column */
body.home section.festival-offer-section .festival-offer-banner-bar::before,
body.home section.festival-offer-section .festival-offer-banner-bar::after { display: none !important; }
body.home section.festival-offer-section .banner-right:not(#kgx-z) { grid-template-columns: auto !important; grid-template-rows: none !important; grid-template-areas: "sale" "cta" "timer" !important; grid-auto-flow: row !important; }
body.home .kgx-hero .kgx-stat-txt { white-space: nowrap; min-width: 0; }
body.home :is(#backgrounds, #characters) .kgx-head-actions:not(#kgx-z) { flex-direction: row !important; flex-wrap: nowrap !important; }
body.home :is(.highlight-green, .sale-discount-num, .accent, .upcoming-accent, .kg-online-copy h2 span, .price-now) { text-shadow: none !important; }
@media (max-width: 960px) {
  body.home section.festival-offer-section .banner-right:not(#kgx-z) { grid-template-columns: auto auto !important; grid-template-areas: "sale cta" "timer timer" !important; justify-content: start; }
}
@media (max-width: 700px) {
  body.home section.festival-offer-section .banner-right:not(#kgx-z) { grid-template-columns: 1fr !important; grid-template-areas: "cta" "timer" !important; }
}
body.home #testimonials .kgx-testi-aside { display: flex; align-items: center; gap: 24px; }
@media (max-width: 1100px) { body.home #testimonials > .wrap:not(#kgx-z) { padding: 0 24px !important; } }
@media (max-width: 700px) {
  body.home #testimonials > .wrap:not(#kgx-z) { padding: 0 14px !important; }
  body.home #testimonials .kgx-testi-aside { justify-content: space-between; width: 100%; }
}

/* Refinements after first review pass */
body.home .festival-offer-section .coupon-code-pill strong { color: var(--kgx-text) !important; -webkit-text-fill-color: currentColor !important; }
body.home .festival-offer-section .banner-text-info h2 { text-wrap: balance; }
body.home .kgx-head h2, body.home #testimonials .testi-head h2 { text-wrap: balance; }
@media (min-width: 701px) {
  body.home :is(#latest-products, #backgrounds, #characters, #animations, #online-class, #bundles, #courses, #voices, #services, #script-writers, #categories) a.kgx-viewall.view-all { justify-self: end !important; }
}
@media (max-width: 700px) {
  body.home .kgx-hero .kgx-stat-txt { white-space: normal; }
  body.home .kgx-stage .live-tag { visibility: hidden; }
  body.home .bento-categories .cat-card:not(.cat-featured):not(.cat-courses) .cat-topline { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  body.home .bento-categories .cat-count-new { white-space: nowrap; }
  body.home .bundle-grid { margin: -6px -14px -10px !important; padding: 6px 14px 10px !important; }
  body.home .upcoming-launch-info { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body.home .countdown-wrap { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  body.home .countdown-box { padding: 12px 4px !important; min-height: 0 !important; }
  body.home .countdown-num { font-size: 26px !important; }
  body.home .countdown-label { font-size: 9.5px !important; }
  body.home .kg-online-meta { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  body.home .license-rules { grid-template-columns: 1fr !important; }
  body.home .kg-policy-section .policy-row { gap: 10px !important; }
  body.home .kg-policy-section .policy-item { padding: 16px 18px !important; }
}
/* Tablet: no orphan cards in 3-up grids */
@media (min-width: 701px) and (max-width: 1100px) {
  body.home #latest-products .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.home #latest-products .grid > .pcard:nth-child(n+7) { display: none !important; }
}
@media (min-width: 701px) and (max-width: 960px) {
  body.home #animations .grid,
  body.home .bundle-grid {
    display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important;
    grid-auto-columns: calc((100% - 2 * 16px) / 2.4); gap: 16px !important;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: -6px -24px -10px !important; padding: 6px 24px 10px !important; scroll-padding-inline: 24px;
  }
  body.home .bundle-grid { grid-auto-columns: calc((100% - 16px) / 1.6); }
  body.home #animations .grid::-webkit-scrollbar, body.home .bundle-grid::-webkit-scrollbar { display: none; }
  body.home #animations .pcard, body.home .bundle-grid > .bundle-card { scroll-snap-align: start; }
}
body.home #testimonials .testi-name { color: var(--kgx-text) !important; -webkit-text-fill-color: currentColor !important; }
body.home #testimonials .testi-role { color: var(--kgx-dim) !important; }

/* Courses: 4–6 courses switch to an even grid (no featured card). */
@media (min-width: 901px) {
  body.home .course-row.is-grid { grid-template-rows: none !important; }
  body.home .course-row.is-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.home .course-row.is-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.home .course-row.is-grid > .course-card:first-child { grid-row: auto; }
  body.home .course-row.is-grid > .course-card { display: flex !important; flex-direction: column; padding: 12px 12px 20px !important; }
  body.home .course-row.is-grid > .course-card .course-img { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
  body.home .course-row.is-grid > .course-card :is(.course-level, h3, p, .course-foot) { margin-left: 8px !important; margin-right: 8px !important; }
  body.home .course-row.is-grid > .course-card h3 { font-size: 20px !important; }
  body.home .course-row.is-grid > .course-card .course-foot { margin-top: auto !important; }
  body.home .course-row.is-grid > .course-card:first-child p { font-size: 13.5px !important; line-height: 1.6 !important; }
  body.home .course-row.is-grid > .course-card:first-child h3 { margin: 10px 8px 8px !important; }
  body.home .course-row.is-grid > .course-card:first-child .course-price { font: inherit !important; font-weight: 700 !important; }
}

body.home .strip-item .strip-icon-img{width:22px;height:22px;object-fit:contain;border-radius:4px;flex:none;vertical-align:middle}