/* ============================================
   PRODUCTS & BRAND PAGES STYLE (DARK THEME)
   ============================================ */

/* Hero Styles */
.products-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(82, 38, 143, 0.4) 0%, var(--purple-900) 70%);
  overflow: hidden;
  padding: 80px 0 60px;
}

@keyframes floatGlow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-48%, -52%) scale(1.15);
    opacity: 1;
  }
}

.products-hero-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(143, 85, 233, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: floatGlow 10s ease-in-out infinite;
}

.products-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
}

.products-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--white);
}

.products-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto;
}

/* Brand Section (Dark Purple) */
.brand-intro-section {
  padding: var(--space-4xl) 0;
  background: var(--purple-950);
}

.brand-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.brand-intro-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
}

@keyframes bounceFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.brand-intro-image img {
  width: 80%;
  height: auto;
  max-height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  animation: bounceFloat 5s ease-in-out infinite;
}

@keyframes scanline {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

.brand-intro-image div {
  position: relative;
  overflow: hidden;
}

.brand-intro-image div::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(143, 85, 233, 0.1), transparent);
  animation: scanline 4s linear infinite;
  pointer-events: none;
}

.brand-intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.brand-intro-text h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
}

.brand-intro-text p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}

/* Core Products Grid (Medium Purple) */
.products-grid-section {
  padding: var(--space-4xl) 0;
  background: var(--purple-900);
}

.products-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* Product Card */
.product-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@keyframes borderSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-300), transparent);
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.4s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-lg);
}

.product-card:hover::before {
  opacity: 1;
  animation: borderSweep 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* Product Image Container */
.product-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: var(--space-md);
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.product-card:hover .product-image img {
  transform: scale(1.04);
}

.product-card h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.product-card p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* Features checklist */
.product-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-grow: 1; /* Pushes button to bottom */
}

.product-features li {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-features li svg {
  color: var(--accent-gold);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}

.product-features li:hover svg {
  transform: scale(1.25) rotate(10deg);
  color: var(--white);
}

.product-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  color: var(--purple-200);
  width: fit-content;
  margin-bottom: var(--space-md);
}

/* Premium Product CTA Button */
.product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  text-decoration: none;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

.product-btn:hover {
  background: var(--purple-600);
  border-color: var(--purple-500);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(143, 85, 233, 0.3);
  transform: translateY(-1px);
}

/* Specific for SharX Lab */
[data-page="sharx-lab"] {
  --lab-orange: #ff7a2e;
  --lab-orange-soft: rgba(255, 122, 46, 0.18);
}

[data-page="sharx-lab"] .products-hero {
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 122, 46, 0.14) 0%, transparent 36%),
    radial-gradient(circle at 18% 18%, rgba(255, 122, 46, 0.1) 0%, transparent 32%),
    radial-gradient(circle at 84% 78%, rgba(143, 85, 233, 0.32) 0%, transparent 40%),
    #0c0716;
}

.lab-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-page="sharx-lab"] .products-hero-glow {
  top: 42%;
  width: min(900px, 90vw);
  height: min(900px, 90vw);
  background: radial-gradient(circle, rgba(255, 122, 46, 0.16) 0%, rgba(143, 85, 233, 0.1) 42%, transparent 70%);
  z-index: 1;
}

.lab-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 122, 46, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 122, 46, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 18%, transparent 78%);
  animation: labGridShift 28s linear infinite;
}

[data-page="sharx-lab"] .products-hero-content {
  z-index: 3;
}

[data-page="sharx-lab"] .products-hero-title {
  text-shadow: 0 0 36px rgba(255, 122, 46, 0.28);
}

[data-page="sharx-lab"] .products-hero-subtitle {
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

[data-page="sharx-lab"] .hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 4;
  color: var(--purple-100);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

[data-page="sharx-lab"] .hero-scroll-cue:hover {
  color: var(--white);
}

[data-page="sharx-lab"] .hero-scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}

[data-page="sharx-lab"] .hero-scroll-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255, 122, 46, 0.35);
  background: rgba(20, 10, 32, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: scrollIconBounce 2s ease-in-out infinite;
}

[data-page="sharx-lab"] .hero-scroll-cue:hover .hero-scroll-icon {
  border-color: rgba(255, 122, 46, 0.75);
  background: rgba(58, 27, 107, 0.65);
}

@keyframes scrollIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

[data-page="sharx-lab"] .brand-intro-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 122, 46, 0.1) 0%, transparent 42%),
    var(--purple-950);
}

[data-page="sharx-lab"] .brand-intro-section > .container {
  position: relative;
  z-index: 1;
}

.lab-section-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.lab-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(160, 114, 230, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 114, 230, 0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 22%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 22%, transparent 82%);
  animation: labGridShift 40s linear infinite;
  opacity: 0.75;
}

.lab-bg--cta {
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 18%, transparent 78%);
}

.lab-section-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.7;
}

.lab-section-orb--a {
  width: 320px;
  height: 320px;
  top: -120px;
  left: -60px;
  background: rgba(255, 122, 46, 0.1);
  animation: labOrbDrift 22s ease-in-out infinite;
}

.lab-section-orb--b {
  width: 280px;
  height: 280px;
  right: -70px;
  bottom: -100px;
  background: rgba(143, 85, 233, 0.18);
  animation: labOrbDrift 26s ease-in-out infinite reverse;
}

.lab-logo-stage {
  --hud: rgba(255, 122, 46, 0.85);
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 122, 46, 0.16) 0%, transparent 52%),
    #07060d;
  border-color: rgba(255, 122, 46, 0.22);
  background-image:
    linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)),
    radial-gradient(circle at 50% 42%, rgba(255, 122, 46, 0.16) 0%, transparent 52%);
  background-size:
    22px 2px, 2px 22px,
    22px 2px, 2px 22px,
    22px 2px, 2px 22px,
    22px 2px, 2px 22px,
    auto;
  background-position:
    left 10px top 10px, left 10px top 10px,
    right 10px top 10px, right 10px top 10px,
    left 10px bottom 10px, left 10px bottom 10px,
    right 10px bottom 10px, right 10px bottom 10px,
    center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 40px rgba(255, 122, 46, 0.08),
    0 0 32px rgba(255, 122, 46, 0.08);
}

.lab-logo-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.lab-fx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 122, 46, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 122, 46, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.7;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%);
}

.lab-logo-stage img {
  position: relative;
  z-index: 1;
  mix-blend-mode: screen;
  animation: labLogoFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 122, 46, 0.35));
}

[data-page="sharx-lab"] .products-grid-section {
  position: relative;
  overflow: hidden;
}

[data-page="sharx-lab"] .products-grid-section > .container,
[data-page="sharx-lab"] .cta-section > .container {
  position: relative;
  z-index: 1;
}

[data-page="sharx-lab"] .cta-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 122, 46, 0.06) 0%, transparent 46%),
    rgba(255, 255, 255, 0.05);
}

[data-page="sharx-lab"] .btn-secondary-ig {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

[data-page="sharx-lab"] .btn-secondary-ig:hover {
  background: rgba(255, 122, 46, 0.16);
  border-color: rgba(255, 122, 46, 0.45);
  color: var(--white);
}

@keyframes labGridShift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 48px 48px, 48px 48px; }
}

@keyframes labOrbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(28px, -18px) scale(1.08); }
}

@keyframes labLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .lab-hero-grid,
  .lab-bg,
  .lab-section-orb,
  .lab-logo-stage img,
  [data-page="sharx-lab"] .hero-scroll-icon,
  .cute-blush,
  .cute-ear,
  .cute-doodle,
  .cute-fx-story,
  .cute-fx-cta::before,
  [data-page="poochoo-hooloo"] .hero-scroll-icon {
    animation: none;
  }
}

.lab-tech-tag {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.lab-tech-tag span {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(143, 85, 233, 0.1);
  color: var(--purple-300);
  border: 1px solid rgba(143, 85, 233, 0.2);
}

.lab-status-badge {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.1);
  color: var(--accent-gold);
  border: 1px solid rgba(245, 158, 11, 0.2);
  z-index: 10;
}

/* Specific for Poochoo & Hooloo */
html[data-page="poochoo-hooloo"],
html[data-page="poochoo-hooloo"] body {
  --cute-rice: #F7F1E6;
  --cute-rice-deep: #EFE6D4;
  --cute-blush: #E8A4A4;
  --cute-pink: #F3C6C4;
  --cute-yellow: #F3E4A8;
  --cute-tan: #F0C49A;
  --cute-brown: #8B6B4A;
  --cute-ink: #5C4633;
  --cute-line: #A08460;
  background: var(--cute-rice);
}

html[data-page="poochoo-hooloo"] .site-header {
  background: var(--cute-brown);
  border-bottom: 3px solid var(--cute-ink);
  box-shadow: 0 8px 20px rgba(92, 70, 51, 0.18);
}

html[data-page="poochoo-hooloo"] .site-header.scrolled {
  background: var(--cute-ink);
  border-bottom: 3px solid var(--cute-brown);
  box-shadow: 0 8px 24px rgba(92, 70, 51, 0.28);
}

html[data-page="poochoo-hooloo"] .site-header .logo-text,
html[data-page="poochoo-hooloo"] .nav-links a,
html[data-page="poochoo-hooloo"] .site-header.scrolled .nav-links a,
html[data-page="poochoo-hooloo"] .lang-switch,
html[data-page="poochoo-hooloo"] .lang-switch-link {
  color: var(--cute-rice);
}

html[data-page="poochoo-hooloo"] .nav-links a:hover,
html[data-page="poochoo-hooloo"] .site-header.scrolled .nav-links a:hover,
html[data-page="poochoo-hooloo"] .lang-switch-link:hover,
html[data-page="poochoo-hooloo"] .lang-switch-link.is-active {
  color: var(--cute-yellow);
}

html[data-page="poochoo-hooloo"] .nav-cta,
html[data-page="poochoo-hooloo"] .site-header.scrolled .nav-cta {
  color: var(--cute-brown);
  background: var(--cute-rice);
}

html[data-page="poochoo-hooloo"] .nav-cta:hover {
  background: var(--cute-yellow);
  color: var(--cute-ink);
}

html[data-page="poochoo-hooloo"] .menu-toggle span,
html[data-page="poochoo-hooloo"] .site-header.scrolled .menu-toggle span {
  background: var(--cute-rice);
}

html[data-page="poochoo-hooloo"] .dropdown-menu {
  background: var(--cute-ink);
  border: 2px solid var(--cute-yellow);
}

html[data-page="poochoo-hooloo"] .dropdown-menu a,
html[data-page="poochoo-hooloo"] .dropdown-menu a.active {
  color: var(--cute-rice) !important;
}

html[data-page="poochoo-hooloo"] .dropdown-menu a:hover,
html[data-page="poochoo-hooloo"] .dropdown-menu a.active {
  background: rgba(247, 241, 230, 0.12) !important;
  color: var(--cute-yellow) !important;
}

html[data-page="poochoo-hooloo"] .site-footer {
  background: var(--cute-brown);
  color: rgba(247, 241, 230, 0.75);
  border-top: 3px solid var(--cute-ink);
}

html[data-page="poochoo-hooloo"] .footer-brand .site-logo .logo-text,
html[data-page="poochoo-hooloo"] .footer-nav h5 {
  color: var(--cute-rice);
}

html[data-page="poochoo-hooloo"] .footer-nav a {
  color: rgba(247, 241, 230, 0.78);
}

html[data-page="poochoo-hooloo"] .footer-nav a:hover {
  color: var(--cute-yellow);
}

html[data-page="poochoo-hooloo"] .footer-bottom {
  border-top-color: rgba(247, 241, 230, 0.18);
  color: rgba(247, 241, 230, 0.65);
}

html[data-page="poochoo-hooloo"] .footer-social a {
  border-color: rgba(247, 241, 230, 0.28);
  color: var(--cute-rice);
}

html[data-page="poochoo-hooloo"] .footer-social a:hover {
  color: var(--cute-ink);
  background: var(--cute-yellow);
  border-color: var(--cute-yellow);
}

[data-page="poochoo-hooloo"] .section-label {
  color: var(--cute-blush);
}

[data-page="poochoo-hooloo"] .section-label::before {
  background: var(--cute-blush);
}

[data-page="poochoo-hooloo"] .section-title,
[data-page="poochoo-hooloo"] .products-hero-title,
[data-page="poochoo-hooloo"] .brand-intro-text h2,
[data-page="poochoo-hooloo"] .cta-section .section-title,
[data-page="poochoo-hooloo"] .product-card h3 {
  color: var(--cute-ink);
}

[data-page="poochoo-hooloo"] .section-subtitle,
[data-page="poochoo-hooloo"] .products-hero-subtitle,
[data-page="poochoo-hooloo"] .brand-intro-text p,
[data-page="poochoo-hooloo"] .cta-section .section-subtitle,
[data-page="poochoo-hooloo"] .product-card p,
[data-page="poochoo-hooloo"] .product-features li {
  color: var(--cute-brown);
}

[data-page="poochoo-hooloo"] .products-hero {
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 28%, rgba(232, 164, 164, 0.28) 0%, transparent 32%),
    radial-gradient(circle at 82% 70%, rgba(243, 228, 168, 0.35) 0%, transparent 34%),
    var(--cute-rice);
}

[data-page="poochoo-hooloo"] .products-hero-glow {
  top: 44%;
  width: min(640px, 80vw);
  height: min(640px, 80vw);
  background: radial-gradient(circle, rgba(243, 198, 196, 0.35) 0%, transparent 68%);
  z-index: 1;
}

[data-page="poochoo-hooloo"] .products-hero-content {
  z-index: 3;
}

[data-page="poochoo-hooloo"] .products-hero-title {
  text-shadow: none;
}

.cute-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.cute-fx-hero .cute-blush {
  position: absolute;
  border-radius: 50%;
  background: var(--cute-pink);
  opacity: 0.45;
  filter: blur(2px);
}

.cute-fx-hero .cute-blush--l {
  width: 220px;
  height: 180px;
  left: 6%;
  top: 38%;
  animation: cuteBob 8s ease-in-out infinite;
}

.cute-fx-hero .cute-blush--r {
  width: 180px;
  height: 150px;
  right: 8%;
  top: 22%;
  animation: cuteBob 10s ease-in-out infinite reverse;
}

.cute-fx-hero .cute-ear {
  position: absolute;
  right: 12%;
  bottom: 16%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--cute-yellow);
  opacity: 0.4;
  animation: cuteBob 12s ease-in-out infinite;
}

.cute-doodle {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2.5px solid var(--cute-line);
  border-radius: 50%;
  border-right-color: transparent;
  opacity: 0.35;
}

.cute-doodle--1 { left: 10%; top: 22%; animation: cuteSpin 14s linear infinite; }
.cute-doodle--2 { left: 72%; top: 58%; width: 26px; height: 26px; animation: cuteSpin 11s linear infinite reverse; }
.cute-doodle--3 { left: 84%; top: 18%; width: 22px; height: 22px; animation: cuteSpin 16s linear infinite; }
.cute-doodle--4 { left: 22%; bottom: 18%; width: 28px; height: 28px; animation: cuteSpin 13s linear infinite reverse; }

[data-page="poochoo-hooloo"] .hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 4;
  color: var(--cute-brown);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

[data-page="poochoo-hooloo"] .hero-scroll-cue:hover {
  color: var(--cute-ink);
}

[data-page="poochoo-hooloo"] .hero-scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}

[data-page="poochoo-hooloo"] .hero-scroll-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid var(--cute-line);
  background: rgba(247, 241, 230, 0.8);
  animation: scrollIconBounce 2s ease-in-out infinite;
}

[data-page="poochoo-hooloo"] .hero-scroll-cue:hover .hero-scroll-icon {
  background: var(--cute-pink);
  border-color: var(--cute-brown);
}

[data-page="poochoo-hooloo"] .brand-intro-section,
[data-page="poochoo-hooloo"] .products-grid-section,
[data-page="poochoo-hooloo"] .cta-section {
  position: relative;
  overflow: hidden;
}

[data-page="poochoo-hooloo"] .brand-intro-section > .container,
[data-page="poochoo-hooloo"] .products-grid-section > .container,
[data-page="poochoo-hooloo"] .cta-section > .container {
  position: relative;
  z-index: 1;
}

[data-page="poochoo-hooloo"] .brand-intro-section {
  background: var(--cute-rice-deep);
}

.cute-fx-story {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='%23E8A4A4' fill-opacity='0.28'%3E%3Cellipse cx='40' cy='70' rx='16' ry='13'/%3E%3Ccircle cx='20' cy='44' r='8'/%3E%3Ccircle cx='38' cy='34' r='8'/%3E%3Ccircle cx='58' cy='36' r='8'/%3E%3Ccircle cx='70' cy='50' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 0.7;
  animation: cutePawShift 36s linear infinite;
}

[data-page="poochoo-hooloo"] .brand-intro-image {
  background: #fffdf8;
  border: 2.5px solid rgba(160, 132, 96, 0.28);
  box-shadow: 8px 10px 0 rgba(232, 164, 164, 0.28);
}

[data-page="poochoo-hooloo"] .products-grid-section {
  background: var(--cute-rice);
}

.cute-fx-shop {
  background-image:
    radial-gradient(circle, rgba(232, 164, 164, 0.28) 7px, transparent 8px),
    radial-gradient(circle, rgba(243, 228, 168, 0.4) 5px, transparent 6px);
  background-size: 92px 92px, 64px 64px;
  background-position: 0 0, 36px 40px;
  opacity: 0.55;
}

.cute-sticker {
  position: absolute;
  border: 2px dashed rgba(160, 132, 96, 0.28);
  border-radius: 50%;
}

.cute-sticker:nth-child(1) { width: 140px; height: 140px; top: 8%; left: 4%; }
.cute-sticker:nth-child(2) { width: 90px; height: 90px; top: 18%; right: 8%; border-radius: 28px; transform: rotate(-8deg); }
.cute-sticker:nth-child(3) { width: 120px; height: 120px; bottom: 10%; right: 14%; }

[data-page="poochoo-hooloo"] .product-card {
  background: #fffdf8;
  border: 2.5px solid rgba(160, 132, 96, 0.22);
  box-shadow: 6px 8px 0 rgba(243, 228, 168, 0.45);
}

[data-page="poochoo-hooloo"] .product-card:hover {
  background: #fffdf8;
  border-color: var(--cute-blush);
  transform: translateY(-4px);
}

[data-page="poochoo-hooloo"] .product-image {
  background: var(--cute-rice-deep);
  border-color: rgba(160, 132, 96, 0.16);
}

[data-page="poochoo-hooloo"] .product-badge {
  background: rgba(232, 164, 164, 0.2);
  color: var(--cute-brown);
}

[data-page="poochoo-hooloo"] .product-features li svg {
  color: var(--cute-blush);
}

[data-page="poochoo-hooloo"] .product-btn {
  color: var(--cute-ink);
  background: var(--cute-yellow);
  border: 2px solid var(--cute-line);
}

[data-page="poochoo-hooloo"] .product-btn:hover {
  background: var(--cute-pink);
  border-color: var(--cute-brown);
  color: var(--cute-ink);
  box-shadow: none;
}

[data-page="poochoo-hooloo"] .cta-section {
  background: var(--cute-rice);
  border-top: 2px solid rgba(160, 132, 96, 0.14);
  border-bottom: none;
}

.cute-fx-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(140vmax, 180%);
  height: min(140vmax, 180%);
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(232, 164, 164, 0.14) 0deg 10deg,
    transparent 10deg 28deg
  );
  animation: cuteBurstSpin 48s linear infinite;
  opacity: 0.7;
}

.cute-motion {
  position: absolute;
  height: 3px;
  width: 42px;
  background: var(--cute-line);
  opacity: 0.28;
  border-radius: 3px;
}

.cute-motion:nth-child(1) { left: 10%; top: 28%; transform: rotate(-28deg); }
.cute-motion:nth-child(2) { left: 12%; top: 34%; width: 28px; transform: rotate(-28deg); }
.cute-motion:nth-child(3) { right: 10%; top: 30%; transform: rotate(28deg); }
.cute-motion:nth-child(4) { right: 12%; top: 36%; width: 28px; transform: rotate(28deg); }

[data-page="poochoo-hooloo"] .cta-section .btn-cta {
  background: var(--cute-blush);
  color: #fffdf8;
  border: 2px solid var(--cute-brown);
  box-shadow: 4px 5px 0 rgba(160, 132, 96, 0.25);
}

[data-page="poochoo-hooloo"] .cta-section .btn-cta:hover {
  background: var(--cute-brown);
}

[data-page="poochoo-hooloo"] .btn-secondary-ig {
  margin-left: 0;
  background: #fffdf8 !important;
  border: 2px solid var(--cute-line) !important;
  color: var(--cute-ink) !important;
}

@keyframes cuteBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes cuteSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cuteBurstSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsiveness */
@media (max-width: 992px) {
  .brand-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  [data-page="sharx-lab"] .products-hero,
  [data-page="poochoo-hooloo"] .products-hero {
    padding: 0 0 4.5rem;
  }

  [data-page="sharx-lab"] .brand-intro-image,
  [data-page="sharx-lab"] .lab-logo-stage {
    max-width: 200px;
    max-height: 200px;
    aspect-ratio: 1;
    margin-inline: auto;
  }

  [data-page="sharx-lab"] .brand-intro-image img {
    width: 70%;
    max-height: 70%;
  }
}

@media (max-width: 1100px) {
  html[data-page="poochoo-hooloo"] .main-nav {
    background: var(--cute-brown);
  }

  html[data-page="poochoo-hooloo"] .dropdown-menu {
    border: none;
    background: rgba(0, 0, 0, 0.12);
  }

  html[data-page="poochoo-hooloo"] .nav-dropdown.active .dropdown-menu {
    background: var(--cute-ink);
  }
}

@media (max-width: 480px) {
  [data-page="sharx-lab"] .brand-intro-image,
  [data-page="sharx-lab"] .lab-logo-stage {
    max-width: 160px;
    max-height: 160px;
  }
}

/* Interactive Falling Characters */
.interactive-char {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100px;
  height: 100px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
  will-change: transform;
}

@media (max-width: 768px) {
  .interactive-char {
    width: 70px;
    height: 70px;
  }
}

.interactive-char img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.15s ease-out;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

.interactive-char.dragging {
  cursor: grabbing;
}

.interactive-char.dragging img {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
}