/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; max-width: 100vw; scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  color: var(--text-main);
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
a { color: var(--text-main); text-decoration: none; transition: background 0.2s, opacity 0.2s; }

/* ---------------------------------
   Navigation (Google Flow Style)
--------------------------------- */
.hh-nav {
  position: fixed;
  top: 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  background: rgba(5, 8, 15, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 100;
}

.hh-nav-left { flex: 1; display: flex; align-items: center; }
.hh-nav-logo {
  display: flex; gap: 0.6rem; align-items: center;
  font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em;
}
.hh-nav-logo-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--accent-gradient);
  font-size: 13px; font-weight: 700; color: #fff;
}

.hh-nav-links { display: flex; gap: 1.5rem; align-items: center; }
.hh-nav-links a {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color 0.25s;
}
.hh-nav-links a:hover { color: var(--text-main); }

/* ---------------------------------
   Products Mega-Menu Dropdown
--------------------------------- */
.hh-nav-dropdown {
  position: static;
}

.hh-nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 0;
  transition: color 0.25s;
}

.hh-nav-dropdown-trigger:hover { color: var(--text-main); }

.hh-nav-dropdown-trigger svg {
  transition: transform 0.3s ease;
  opacity: 0.6;
  flex-shrink: 0;
}

.hh-nav-dropdown.open .hh-nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.hh-nav-dropdown.open .hh-nav-dropdown-trigger {
  color: var(--text-main);
}

/* Mega-menu panel */
.hh-mega-panel {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  width: 100vw;
  transform: translateY(8px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem 2.5rem;
  padding: 2rem 2.5rem;
  background: rgba(10, 10, 18, 0.95);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(124, 58, 237, 0.06);
  max-height: 70vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 200;
}

/* Custom scrollbar for mega-menu */
.hh-mega-panel::-webkit-scrollbar { width: 4px; }
.hh-mega-panel::-webkit-scrollbar-track { background: transparent; }
.hh-mega-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.hh-nav-dropdown.open .hh-mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Category column */
.hh-mega-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 160px;
}

.hh-mega-heading {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-blue-bright);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hh-mega-link {
  display: block;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.85rem !important;
  font-weight: 400;
  padding: 0.4rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s !important;
  text-decoration: none;
  white-space: nowrap;
}

.hh-mega-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06);
}

/* Hamburger Button — hidden on desktop, shown on mobile */
.hh-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  z-index: 201;
  transition: background 0.25s ease;
  flex-shrink: 0;
}

.hh-nav-burger:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hh-nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Animated X state */
.menu-open .hh-nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-open .hh-nav-burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-open .hh-nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu Overlay */
.hh-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(5, 8, 15, 0.92);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
}

.hh-mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hh-mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 5rem 2rem 3rem;
  width: 100%;
  max-width: 400px;
}

.hh-mobile-menu-inner a {
  display: block;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
  transform: translateY(10px);
  opacity: 0;
}

.hh-mobile-menu.open .hh-mobile-menu-inner a {
  opacity: 1;
  transform: translateY(0);
}

.hh-mobile-menu.open .hh-mobile-menu-inner a:nth-child(1) { transition-delay: 0.05s; }
.hh-mobile-menu.open .hh-mobile-menu-inner a:nth-child(2) { transition-delay: 0.08s; }
.hh-mobile-menu.open .hh-mobile-menu-inner a:nth-child(3) { transition-delay: 0.11s; }
.hh-mobile-menu.open .hh-mobile-menu-inner a:nth-child(4) { transition-delay: 0.14s; }
.hh-mobile-menu.open .hh-mobile-menu-inner a:nth-child(5) { transition-delay: 0.17s; }
.hh-mobile-menu.open .hh-mobile-menu-inner a:nth-child(6) { transition-delay: 0.20s; }
.hh-mobile-menu.open .hh-mobile-menu-inner a:nth-child(7) { transition-delay: 0.23s; }
.hh-mobile-menu.open .hh-mobile-menu-inner a:nth-child(8) { transition-delay: 0.26s; }

.hh-mobile-menu-inner a:hover {
  color: #fff;
}

.hh-mobile-menu-inner a:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hh-mobile-menu-cta {
  margin-top: 2rem;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s 0.3s ease, transform 0.4s 0.3s ease;
}

.hh-mobile-menu.open .hh-mobile-menu-cta {
  opacity: 1;
  transform: translateY(0);
}

.hh-mobile-menu-cta .hh-pill-btn {
  width: 100%;
  justify-content: center;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  border: none;
}

/* ---------------------------------
   Mobile Products Accordion
   (inside hamburger overlay)
--------------------------------- */
.hh-mob-products {
  width: 100%;
  margin-bottom: 0.5rem;
}

.hh-mob-products-label {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-blue-bright);
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.hh-mob-acc-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hh-mob-acc-section:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hh-mob-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.25s;
}

.hh-mob-acc-trigger:hover { color: #fff; }

.hh-mob-acc-trigger svg {
  transition: transform 0.3s ease;
  opacity: 0.5;
  flex-shrink: 0;
}

.hh-mob-acc-section.open .hh-mob-acc-trigger svg {
  transform: rotate(180deg);
}

.hh-mob-acc-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s;
  padding: 0 0;
}

.hh-mob-acc-section.open .hh-mob-acc-body {
  max-height: 500px;
  padding: 0 0 0.75rem;
}

.hh-mob-acc-body a {
  display: block;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 1rem !important;
  padding: 0.6rem 0 !important;
  border-bottom: none !important;
  text-decoration: none;
  transition: color 0.2s;
}

.hh-mob-acc-body a:hover {
  color: #fff !important;
}

.hh-nav-right { flex: 1; display: flex; align-items: center; gap: 1rem; justify-content: flex-end; }

/* Sign In — ghost/text style */
.hh-nav-signin {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: color 0.25s ease, background 0.25s ease;
  text-decoration: none;
  white-space: nowrap;
}
.hh-nav-signin:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
}

/* Mobile menu Sign In */
.hh-mobile-signin {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.8rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  text-decoration: none;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  margin-bottom: 0.75rem;
}
.hh-mobile-signin:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.hh-pill-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border: 1px solid var(--border);
  padding: 0.55rem 1.25rem;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hh-pill-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--border-light); }
.hh-pill-btn.primary {
  background: var(--accent-blue);
  color: #fff;
  border: none;
  font-weight: 600;
}
.hh-pill-btn.primary:hover { background: #5B21B6; }

.hh-pill-btn-hero {
  padding: 1.2rem 3.5rem;
  font-size: 1.15rem;
}
.hh-pill-btn-hero.primary {
  box-shadow: 0 10px 40px rgba(124, 58, 237, 0.4);
}
.hh-pill-btn-hero.secondary {
  padding: 1rem 3rem;
  font-size: 1.05rem;
}
/* ---------------------------------
   HERO — Google Flow Style
   Full-viewport with thumbnail grid,
   blue vignette, centered title + glow
--------------------------------- */
.flow-hero {
  position: relative;
  width: 100%;
  min-height: 115vh;
  padding-top: 6rem;
  padding-bottom: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Video Mosaic Grid (Google Flow Style) */
.flow-hero-mosaic {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  padding: 40px;
  pointer-events: none;
  opacity: 0.55;
  filter: brightness(0.7) saturate(0.9);
}

.mosaic-tile {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: scale(0.92);
  animation: mosaicReveal 1.2s ease-out forwards;
}

.mosaic-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Staggered reveal animation */
.mosaic-tile-1 { animation-delay: 0.1s; }
.mosaic-tile-2 { animation-delay: 0.3s; }
.mosaic-tile-3 { animation-delay: 0.5s; }
.mosaic-tile-4 { animation-delay: 0.2s; }
.mosaic-tile-5 { animation-delay: 0.4s; }
.mosaic-tile-6 { animation-delay: 0.6s; }


@keyframes mosaicReveal {
  0% { opacity: 0; transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1); }
}


/* Blue Vignette — Signature Google Flow Edge Glow */
.flow-hero-vignette {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
/* Side blue glow — fades out before bottom */
.flow-hero-vignette::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 80%;
  background:
    linear-gradient(to right, rgba(124, 58, 237, 0.3) 0%, transparent 15%, transparent 85%, rgba(124, 58, 237, 0.3) 100%),
    linear-gradient(to bottom, rgba(124, 58, 237, 0.25) 0%, transparent 30%);
  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  pointer-events: none;
}
/* Dark radial + solid black bottom — covers the hero so the clip edge is invisible */
.flow-hero-vignette::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background:
    linear-gradient(to bottom, transparent 70%, #000000 95%),
    radial-gradient(
      ellipse 65% 55% at center 45%,
      transparent 0%,
      rgba(0, 0, 0, 0.15) 35%,
      rgba(0, 0, 0, 0.5) 65%,
      rgba(0, 0, 0, 0.85) 85%,
      #000000 100%
    );
  pointer-events: none;
}

/* Hero Content (Text Layer) */
.flow-hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 2rem;
  max-width: 900px;
}

/* The Title — Massive, White, with Glow Halo */
.flow-hero-title {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #ffffff;
  position: relative;
  margin-bottom: 1.5rem;
  /* White text-shadow glow halo */
  text-shadow:
    0 0 60px rgba(255, 255, 255, 0.25),
    0 0 120px rgba(255, 255, 255, 0.1),
    0 0 200px rgba(100, 160, 255, 0.08);
}

.hero-generator-text {
  display: inline-block;
  font-size: 0.45em; /* Scaled for a badge */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px; /* Pill shape */
  padding: 0.3em 1em;
  margin-top: 0.6em;
  letter-spacing: 0.02em;
  text-shadow: none; /* Remove the white glow from the text inside the badge */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}


.flow-hero-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-more-text {
  display: none;
}

.hero-more-text.visible {
  display: inline;
}

.hero-show-more {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: inherit;
  font-family: inherit;
  font-weight: 400;
  line-height: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
  display: inline;
  vertical-align: baseline;
  white-space: nowrap;
}

.hero-show-more:hover {
  opacity: 0.7;
}

.hero-show-more.active {
  display: none;
}

/* ---------------------------------
   Hero Prompt Composer — Glassmorphism
--------------------------------- */
.hero-prompt-glass {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  animation: promptGlassAppear 1s 0.6s ease-out both;
}

.hero-prompt-glass::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.3) 0%,
    transparent 40%,
    transparent 60%,
    rgba(110, 168, 254, 0.2) 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-prompt-glass:focus-within {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.4);
}
.hero-prompt-glass:focus-within::before {
  opacity: 1;
}

@keyframes promptGlassAppear {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Textarea */
.hero-prompt-input-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-prompt-textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--text-main);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.25rem 0;
  min-height: 2.8rem;
  max-height: 8rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.hero-prompt-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.hero-prompt-textarea::-webkit-scrollbar {
  width: 4px;
}
.hero-prompt-textarea::-webkit-scrollbar-track {
  background: transparent;
}
.hero-prompt-textarea::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

/* Settings Row */
/* Setting Chips */
/* Generate Button */
.hero-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.4rem;
  border-radius: 99px;
  border: none;
  background: var(--accent-gradient);
  color: #fff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25);
}

.hero-generate-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-generate-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 30px rgba(124, 58, 237, 0.35),
    0 0 60px rgba(124, 58, 237, 0.1);
}
.hero-generate-btn:hover::before {
  opacity: 1;
}

.hero-generate-btn:active {
  transform: translateY(0) scale(0.98);
}

.hero-generate-btn svg {
  flex-shrink: 0;
}

/* Scroll Indicator */
.flow-scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.5;
  animation: scrollBounce 2s ease-in-out infinite;
}
.flow-scroll-indicator span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.flow-scroll-indicator .scroll-arrow {
  width: 20px; height: 20px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 0.8; }
}

/* ---------------------------------
   OVERVIEW — Full-Viewport Statement
   (Google Flow About #overview style)
   Black bg, centered text, blue vignette
--------------------------------- */
.flow-overview {
  position: relative;
  width: 100%;
  padding: 10rem 0 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.flow-overview-vignette {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    linear-gradient(to bottom, #000000 0%, transparent 25%),
    linear-gradient(to top, #000000 0%, transparent 25%);
  pointer-events: none;
  z-index: 1;
}

/* Background Color Bleed — Video ambient glow */
.flow-overview-bg-video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 110%; min-height: 110%;
  width: auto; height: auto;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 0;
  object-fit: cover;
  opacity: 0.25;
  filter: blur(80px) saturate(1.8) brightness(0.8);
  pointer-events: none;
}

.flow-overview-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 3rem;
  max-width: 1100px;
}

.flow-overview-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 2rem;
}

.flow-overview-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto 0.5rem;
}

.flow-overview-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue-bright);
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.flow-overview-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
  margin-bottom: 0;
}

.flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.flow-chip:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.25);
  color: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

.flow-chip svg {
  opacity: 0.6;
  flex-shrink: 0;
}

/* Inline Show More */
.inline-show-more {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: inherit;
  font-family: inherit;
  font-weight: 400;
  line-height: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
  display: inline;
  vertical-align: baseline;
  white-space: nowrap;
}

.inline-show-more:hover {
  opacity: 0.7;
}

/* Overview Video Showcase */
.flow-overview-video-wrapper {
  position: relative;
  margin-top: 4rem;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Color Bloom Halo behind video */
.flow-overview-video-bloom {
  position: absolute;
  top: 50%; left: 50%;
  width: 110%; height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(180, 140, 100, 0.25) 0%,
    rgba(140, 100, 60, 0.15) 30%,
    rgba(80, 100, 160, 0.1) 50%,
    transparent 70%
  );
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

/* Video container */
.flow-overview-video {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #0a0a0a;
  cursor: pointer;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.flow-overview-video-poster {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85);
  transition: filter 0.4s ease, transform 0.6s ease;
}

.flow-overview-video:hover .flow-overview-video-poster {
  filter: brightness(0.85);
  transform: scale(1.02);
}

/* Play Button */
/* Sound Toggle Button */
.video-sound-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  color: rgba(255, 255, 255, 0.8);
}

.video-sound-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: scale(1.1);
}

.video-sound-btn .sound-icon-on {
  display: none;
}

.video-sound-btn.unmuted .sound-icon-off {
  display: none;
}

.video-sound-btn.unmuted .sound-icon-on {
  display: block;
}

/* Capabilities card sound button — higher z-index to clear animation layers */
.cap-sound-btn {
  z-index: 50;
}

/* ---------------------------------
   Generic Section Styles
--------------------------------- */
.hh-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: var(--max-w);
  margin: 0 auto;
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.hh-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 1024px) {
  .hh-grid-3 { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------------------------------
   Use Case Cards
--------------------------------- */
.use-case-card {
  background: rgba(8, 12, 20, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.use-case-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at top right, rgba(124, 58, 237, 0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.use-case-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(124, 58, 237, 0.15);
  background: rgba(12, 14, 22, 0.6);
}

.use-case-card:hover::before {
  opacity: 1;
}

.use-case-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--accent-blue-bright);
  transition: all 0.4s ease;
}

.use-case-card:hover .use-case-icon {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.4);
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.15);
}

.use-case-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
}

.use-case-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
  flex-grow: 1;
}

.use-case-card span {
  font-size: 0.75rem;
  color: var(--accent-blue-bright);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: auto;
  display: inline-block;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---------------------------------
   Core Capabilities (Tabs + Carousel)
--------------------------------- */
.hh-capabilities {
  padding-top: 4rem;
  padding-bottom: 6rem;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

.cap-tabs {
  display: flex;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 5vw;
  margin-bottom: 1.5rem;
  align-items: baseline;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.cap-tabs::-webkit-scrollbar { display: none; }

.cap-tab {
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  font-weight: 400;
  color: rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: blur(3px);
  user-select: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  border: none;
  background: none;
  padding: 0;
  flex-shrink: 0;
  white-space: nowrap;
}
.cap-tab:hover { color: rgba(255,255,255,0.35); filter: blur(1.5px); }
.cap-tab.active { color: var(--text-main); filter: blur(0); font-weight: 400; background: none; }

.cap-description {
  text-align: left;
  max-width: 700px;
  padding: 0 5vw;
  margin: 0 0 2rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: opacity 0.3s ease;
  min-height: 2rem;
  line-height: 1.5;
  font-weight: 400;
}

.cap-carousel-wrapper { width: 100%; overflow: hidden; }
.cap-carousel {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 5vw 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}
.cap-carousel::-webkit-scrollbar { display: none; }

.cap-card {
  flex: 0 0 720px;
  max-width: 720px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: none;
  border: none;
  overflow: hidden;
  scroll-snap-align: center;
}

.cap-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  background: rgba(10,10,14,0.85);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 4px 32px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cap-card-media video {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px;
}
.cap-card-label {
  padding: 0.6rem 0.25rem 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.01em;
}
.cap-card-label:empty { display: none; }
a.cap-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0;
  border: none;
  background: none;
  transition: opacity 0.2s ease;
  margin-top: 0.5rem;
}
a.cap-read-more:hover {
  opacity: 0.7;
  color: rgba(255, 255, 255, 0.9);
  background: none;
  border: none;
}
a.cap-read-more span {
  transition: transform 0.3s ease;
}
a.cap-read-more:hover span {
  transform: translateX(3px);
}

/* ===== SHARED ANIMATION BASE — Glassy App UI ===== */
.anim-container {
  width:100%; height:100%; position:relative; overflow:hidden;
  display:flex!important; flex-direction:column;
  align-items:center; justify-content:center;
  padding:0; gap:0;
  background: #0A0A0A;
  will-change: transform, opacity;
}
/* Pause all animations by default — only play when the card's tab is active */
.anim-container * { animation-play-state: paused !important; }
.anim-container.anim-active * { animation-play-state: running !important; }
.anim-container img, .anim-container video { width:100%; height:100%; object-fit:cover; }
.anim-result-video { object-fit:contain !important; width:auto !important; height:100% !important; max-width:100%; background:#0a0a0a; display:block; margin:0 auto; }

/* Faux toolbar at the top of the card */
.anim-faux-toolbar { display:none; }
.anim-faux-toolbar svg { flex-shrink:0; }
.toolbar-left { display:flex; align-items:center; gap:12px; }
.toolbar-left .project-name { font-size:0.8rem; font-weight:500; color:rgba(255,255,255,0.8); }
.toolbar-center { flex:1; display:flex; justify-content:center; }
.toolbar-search { width:240px; height:28px; border-radius:14px; background:rgba(255,255,255,0.06); display:flex; align-items:center; padding:0 12px; }
.toolbar-right { display:flex; align-items:center; gap:16px; }
.toolbar-ultra { display:flex; align-items:center; gap:8px; padding-left:12px; border-left:1px solid rgba(255,255,255,0.1); font-size:0.7rem; font-weight:600; letter-spacing:0.05em; }
.ultra-switch { width:24px; height:14px; border-radius:7px; background:var(--accent-blue); position:relative; }
.ultra-switch::after { content:''; position:absolute; right:2px; top:2px; width:10px; height:10px; border-radius:50%; background:#fff; }

/* Prompt box — clean glassy input bar */
.anim-flow-prompt-box {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:20; width:90%; max-width:600px;
}
.anim-flow-prompt-header { display:none; }
.anim-flow-prompt-input {
  background:rgba(18,18,22,0.85);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:12px 16px; border-radius:18px;
  border:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; gap:12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  width: 100%;
}
.anim-flow-prompt-input .plus-icon { display:none; }
.anim-flow-typing-area { flex:1; display:flex; align-items:center; overflow:hidden; }
.anim-flow-prompt-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.anim-flow-badge { display:none; }
.anim-gen-btn { width:34px; height:34px; border-radius:50%; background:var(--accent-gradient); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 0 16px rgba(124,58,237,0.5); }

.anim-cursor-blink { width:2px; height:1.1em; background:var(--accent-blue); animation:curBlink 0.6s infinite step-end; flex-shrink:0; }
.anim-typing-text { font-family:'Inter',sans-serif; font-size:0.85rem; color:rgba(255,255,255,0.9); overflow:hidden; white-space:nowrap; transform-origin:left; transform:scaleX(0); will-change:transform; }
@keyframes curBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Processing glow bar */
.anim-gold-glow { position:absolute; bottom:-1px; left:20%; right:20%; height:2px; background:linear-gradient(90deg,transparent,var(--accent-blue),transparent); opacity:0; box-shadow:0 0 12px var(--accent-blue); }

/* ===== ACTION TOOLBAR ===== */
.anim-action-bar { display:none; }

/* ===== FLOATING CURSOR ===== */
.anim-cursor {
  position:absolute; z-index:55; width:18px; height:18px;
  pointer-events:none; opacity:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}
.anim-cursor path { fill:white; stroke:#333; stroke-width:1.5; stroke-linejoin:round; }
.anim-cursor-click {
  position:absolute; z-index:54; width:24px; height:24px;
  border-radius:50%; background:rgba(124,58,237,0.3);
  pointer-events:none; opacity:0;
  transform:translate(-50%,-50%) scale(0);
}

/* Video result */
.anim-video-frame {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; height:100%;
  border-radius:24px; overflow:hidden;
  background:#0a0a0a; z-index:2;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  /* Fixes Safari border-radius clipping issues */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translate(-50%,-50%) translateZ(0);
}
.anim-result-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.anim-video-frame::after { display:none; }
.anim-gen-blur { position:absolute; inset:0; z-index:3; background:rgba(10,10,14,0.7); backdrop-filter:blur(20px) saturate(1.4); opacity:0; }
.anim-play-indicator { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; }
.anim-progress-bar { position:absolute; bottom:0; left:0; width:100%; height:3px; background:rgba(255,255,255,0.1); z-index:5; opacity:0; }
.anim-progress-fill { height:100%; width:100%; background:var(--accent-gradient); border-radius:3px; transform-origin:left; transform:scaleX(0); will-change:transform; }

/* ==========================================================
   T2V — 15s: input appears → type → cursor clicks → video
   ========================================================== */
.anim-t2v .anim-flow-prompt-box { opacity:0; animation:t-box 15s 1 both cubic-bezier(.4,0,.2,1); }
.anim-t2v .anim-typing-text { animation:t-type 15s 1 both steps(121,end); }
.anim-t2v .anim-gen-btn { opacity:1; }
.anim-t2v .anim-video-frame { opacity:0; animation:t-frame 15s 1 both cubic-bezier(.4,0,.2,1); }
.anim-t2v .anim-gen-blur { animation:t-blur 15s 1 both ease-in-out; }
.anim-t2v .anim-result-video { animation:t-vid 15s 1 both cubic-bezier(.25,.46,.45,.94); }
.anim-t2v .anim-progress-bar { animation:t-pbar 15s 1 both ease-in-out; }
.anim-t2v .anim-progress-fill { animation:t-pfill 15s 1 both linear; }
.anim-t2v .anim-cursor { animation:tc-cur 15s 1 both ease-in-out; }
.anim-t2v .anim-cursor-click { animation:tc-clk 15s 1 both ease-out; }

/* 0-8 pause | 8-16 box in | 16-38 type | 38-44 cursor→btn | 44-48 click | 48-52 box out | 52-64 video in | 64-90 hold | 90-100 out */
@keyframes t-box   { 0%,8%{opacity:0;transform:translate(-50%,-50%) translateY(20px)} 16%{opacity:1;transform:translate(-50%,-50%) translateY(0)} 48%{opacity:1;transform:translate(-50%,-50%)} 54%,100%{opacity:0;transform:translate(-50%,-50%) translateY(-10px)} }
@keyframes t-type  { 0%,16%{transform:scaleX(0)} 38%{transform:scaleX(1)} 48%{transform:scaleX(1)} 54%,100%{transform:scaleX(0)} }
@keyframes tc-cur  { 0%,36%{opacity:0;transform:translate(60%,50%)} 40%{opacity:1;transform:translate(60%,50%)} 44%{transform:translate(82%,49%)} 46%{transform:translate(82%,49%) scale(0.8)} 48%{transform:translate(82%,49%) scale(1)} 52%{opacity:1;transform:translate(70%,60%)} 56%,100%{opacity:0;transform:translate(70%,60%)} }
@keyframes tc-clk  { 0%,45%{opacity:0;transform:translate(33%,0%) scale(0)} 46%{opacity:0.8;transform:translate(33%,0%) scale(1)} 50%{opacity:0;transform:translate(33%,0%) scale(2)} 100%{opacity:0;transform:translate(33%,0%) scale(2)} }
@keyframes t-frame { 0%,52%{opacity:0;transform:translate(-50%,-50%)} 60%{opacity:1;transform:translate(-50%,-50%)} 100%{opacity:1;transform:translate(-50%,-50%)} }
@keyframes t-blur  { 0%,54%{opacity:0} 58%{opacity:1} 66%{opacity:0.3} 72%,100%{opacity:0} }
@keyframes t-vid   { 0%,54%{opacity:0;filter:blur(40px) saturate(0.2);transform:scale(1.1)} 62%{opacity:0.5;filter:blur(14px)} 68%{opacity:0.9;filter:blur(2px)} 74%,100%{opacity:1;filter:blur(0) saturate(1);transform:scale(1)} }
@keyframes t-pbar  { 0%,70%{opacity:0} 72%,100%{opacity:1} }
@keyframes t-pfill { 0%,72%{transform:scaleX(0)} 100%{transform:scaleX(1)} }

/* ==========================================================
   I2V — 15s: upload zone → image drops → input → type → click → video
   ========================================================== */
/* I2V card uses standard sizing (landscape video) */
.anim-upload-zone { position:relative; z-index:10; width:140px; aspect-ratio:1; border-radius:12px; overflow:hidden; background:rgba(18,18,22,0.95); border:1px solid rgba(255,255,255,0.08); box-shadow:0 8px 32px rgba(0,0,0,0.5); opacity:0; animation:i-zone 15s 1 both cubic-bezier(.4,0,.2,1); margin:0 auto; display:flex; align-items:center; justify-content:center; }
.anim-upload-dashed { position:absolute; inset:6px; border:1px dashed rgba(255,255,255,0.2); border-radius:8px; z-index:2; opacity:0; animation:i-dash 15s 1 both ease-in-out; }
.anim-upload-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem; color:rgba(255,255,255,0.6); font-size:0.7rem; z-index:3; opacity:0; animation:i-label 15s 1 both ease-in-out; text-align:center; white-space:nowrap; width:100%; }
.anim-uploaded-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(0.9); z-index:4; animation:i-imgUp 15s 1 both cubic-bezier(.4,0,.2,1); border-radius:12px; }
.anim-i2v .anim-flow-prompt-box { opacity:0; animation:i-prompt 15s 1 both cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.anim-i2v .anim-flow-typing-area { display:flex; }
.anim-i2v .anim-typing-text { animation:i-type 15s 1 both steps(120,end); }
.anim-i2v .anim-cursor-blink { animation:i-cblink 15s 1 both step-end; }
.anim-i2v .anim-cursor { animation:ic-cur 15s 1 both ease-in-out; }
.anim-i2v .anim-cursor-click { animation:ic-clk 15s 1 both ease-out; }
.anim-i2v .anim-video-frame { opacity:0; animation:i-frame 15s 1 both cubic-bezier(.4,0,.2,1); }
.anim-i2v .anim-gen-blur { animation:i-blur 15s 1 both ease-in-out; }
.anim-i2v .anim-result-video { animation:i-vid 15s 1 both cubic-bezier(.25,.46,.45,.94); }
.anim-i2v .anim-progress-bar { animation:i-pbar 15s 1 both ease-in-out; }
.anim-i2v .anim-progress-fill { animation:i-pfill 15s 1 both linear; }

/* 0-8 pause | 8-18 upload box | 18-28 image drops | 28-36 prompt+gen btn | 36-42 cursor clicks | 42-48 all fade | 48-60 video | 60-90 hold | 90-100 out */
@keyframes i-zone   { 0%,8%{opacity:0;transform:scale(0.8)} 16%{opacity:1;transform:scale(1)} 44%{opacity:1} 50%,100%{opacity:0;transform:scale(0.95)} }
@keyframes i-dash   { 0%,8%{opacity:0} 14%,20%{opacity:1} 26%,100%{opacity:0} }
@keyframes i-label  { 0%,8%{opacity:0} 14%,18%{opacity:1} 22%,100%{opacity:0} }
@keyframes i-imgUp  { 0%,18%{opacity:0;transform:scale(0.9)} 26%{opacity:1;transform:scale(1)} 44%{opacity:1} 50%,100%{opacity:0} }
@keyframes i-prompt { 0%,8%{opacity:0;transform:translate(-50%,-50%) translateY(20px)} 16%{opacity:1;transform:translate(-50%,-50%) translateY(0)} 44%{opacity:1;transform:translate(-50%,-50%)} 50%,100%{opacity:0;transform:translate(-50%,-50%) translateY(-10px)} }
@keyframes i-type   { 0%,26%{transform:scaleX(0)} 38%{transform:scaleX(1)} 48%{transform:scaleX(1)} 54%,100%{transform:scaleX(0)} }
@keyframes i-cblink { 0%,25%{opacity:0} 26%{opacity:1} 26.5%{opacity:0} 27%{opacity:1} 27.5%{opacity:0} 28%{opacity:1} 38%{opacity:1} 38.5%{opacity:0} 39%{opacity:1} 39.5%{opacity:0} 44%{opacity:0} 100%{opacity:0} }
@keyframes ic-cur   { 0%,34%{opacity:0;transform:translate(60%,65%)} 38%{opacity:1;transform:translate(60%,65%)} 42%{transform:translate(82%,62%)} 44%{transform:translate(82%,62%) scale(0.8)} 46%{transform:translate(82%,62%) scale(1)} 48%{opacity:1;transform:translate(70%,75%)} 52%,100%{opacity:0;transform:translate(70%,75%)} }
@keyframes ic-clk   { 0%,43%{opacity:0;transform:translate(33%,13%) scale(0)} 44%{opacity:0.8;transform:translate(33%,13%) scale(1)} 48%{opacity:0;transform:translate(33%,13%) scale(2)} 100%{opacity:0;transform:translate(33%,13%) scale(2)} }
@keyframes i-blur   { 0%,50%{opacity:0} 54%{opacity:1} 62%{opacity:0.3} 68%,100%{opacity:0} }
@keyframes i-vid    { 0%,50%{opacity:0;filter:blur(40px) saturate(0.2);transform:scale(1.1)} 58%{opacity:0.5;filter:blur(14px)} 64%{opacity:0.9;filter:blur(2px)} 70%,100%{opacity:1;filter:blur(0) saturate(1);transform:scale(1)} }
@keyframes i-pbar   { 0%,68%{opacity:0} 70%,100%{opacity:1} }
@keyframes i-pfill  { 0%,70%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
@keyframes i-frame  { 0%,48%{opacity:0;transform:translate(-50%,-50%)} 52%{opacity:1;transform:translate(-50%,-50%)} 100%{opacity:1;transform:translate(-50%,-50%)} }

/* ==========================================================
   V2V — Uses same I2V animation timings (video upload instead of image)
   ========================================================== */
/* ==========================================================
   S2V — 15s: portrait → audio bar → input → type → click → video
   ========================================================== */
.anim-portrait-frame { position:relative; width:64px; height:64px; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,0.1); opacity:0; animation:s-portrait 15s 1 both cubic-bezier(.4,0,.2,1); flex-shrink:0; box-shadow:0 4px 16px rgba(0,0,0,0.5); }
.anim-portrait-img { width:100%; height:100%; object-fit:cover; }
.anim-audio-row { position:relative; display:flex; align-items:center; gap:0.6rem; background:rgba(18,18,22,0.95); padding:0 1.2rem; border-radius:24px; border:1px solid rgba(255,255,255,0.08); height:48px; flex:1; opacity:0; animation:s-audio 15s 1 both cubic-bezier(.4,0,.2,1); box-shadow:0 4px 16px rgba(0,0,0,0.5); }
.anim-audio-icon { color:var(--accent-blue); flex-shrink:0; }
.anim-audio-label { font-size:0.75rem; color:rgba(255,255,255,0.6); font-family:'Inter',sans-serif; white-space:nowrap; }
.anim-waveform { display:flex; align-items:center; gap:3px; flex:1; height:24px; }
.anim-wave-bar { width:4px; background:var(--accent-blue); border-radius:2px; height:4px; opacity:0; animation:s-wave 15s 1 both ease-in-out; animation-delay:calc(var(--i) * 0.06s); }
.anim-s2v .anim-flow-prompt-box { opacity:0; animation:s-prompt 15s 1 both cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; align-items:center; gap:8px; }
.anim-s2v .anim-typing-text { animation:s-type 15s 1 both steps(97,end); }
.anim-s2v .anim-cursor-blink { animation:s-cblink 15s 1 both step-end; }
.anim-s2v .anim-cursor { animation:sc-cur 15s 1 both ease-in-out; }
.anim-s2v .anim-cursor-click { animation:sc-clk 15s 1 both ease-out; }
.anim-s2v .anim-video-frame { opacity:0; animation:s-frame 15s 1 both cubic-bezier(.4,0,.2,1); }
.anim-s2v .anim-gen-blur { animation:s-blur 15s 1 both ease-in-out; }
.anim-s2v .anim-result-video { animation:s-vid 15s 1 both cubic-bezier(.25,.46,.45,.94); }
.anim-s2v .anim-progress-bar { animation:s-pbar 15s 1 both ease-in-out; }
.anim-s2v .anim-progress-fill { animation:s-pfill 15s 1 both linear; }

/* 0-8 pause | 8-16 portrait+prompt | 16-24 audio row | 24-34 wave | 34-40 cursor | 40-42 click | 42-46 fade | 48-60 video */
@keyframes s-prompt   { 0%,8%{opacity:0;transform:translate(-50%,-50%) translateY(20px)} 16%{opacity:1;transform:translate(-50%,-50%) translateY(0)} 42%{opacity:1;transform:translate(-50%,-50%)} 46%,100%{opacity:0;transform:translate(-50%,-50%) translateY(-10px)} }
@keyframes s-portrait { 0%,8%{opacity:0;transform:scale(0.8)} 16%{opacity:1;transform:scale(1)} 42%{opacity:1} 46%,100%{opacity:0;transform:scale(0.9)} }
@keyframes s-audio    { 0%,16%{opacity:0;transform:translateX(16px)} 24%{opacity:1;transform:translateX(0)} 42%{opacity:1} 46%,100%{opacity:0;transform:translateX(-10px)} }
@keyframes s-wave     { 0%,24%{opacity:0;transform:scaleY(0.2)} 28%{opacity:0.8;transform:scaleY(1)} 32%{transform:scaleY(0.8)} 36%{opacity:0.3;transform:scaleY(0.2)} 42%,100%{opacity:0;transform:scaleY(0.2)} }
@keyframes sc-cur     { 0%,32%{opacity:0;transform:translate(60%,60%)} 36%{opacity:1;transform:translate(60%,60%)} 40%{transform:translate(82%,57%)} 42%{transform:translate(82%,57%) scale(0.8)} 44%{transform:translate(82%,57%) scale(1)} 46%{opacity:1;transform:translate(70%,70%)} 50%,100%{opacity:0;transform:translate(70%,70%)} }
@keyframes sc-clk     { 0%,41%{opacity:0;transform:translate(33%,8%) scale(0)} 42%{opacity:0.8;transform:translate(33%,8%) scale(1)} 46%{opacity:0;transform:translate(33%,8%) scale(2)} 100%{opacity:0;transform:translate(33%,8%) scale(2)} }
@keyframes s-blur    { 0%,44%{opacity:0} 48%{opacity:1} 56%{opacity:0.3} 62%,100%{opacity:0} }
@keyframes s-vid     { 0%,44%{opacity:0;filter:blur(40px) saturate(0.2);transform:scale(1.1)} 52%{opacity:0.5;filter:blur(14px)} 58%{opacity:0.9;filter:blur(2px)} 64%,100%{opacity:1;filter:blur(0) saturate(1);transform:scale(1)} }
@keyframes s-pbar    { 0%,62%{opacity:0} 64%,100%{opacity:1} }
@keyframes s-pfill   { 0%,64%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
@keyframes s-frame   { 0%,42%{opacity:0;transform:translate(-50%,-50%)} 46%{opacity:1;transform:translate(-50%,-50%)} 100%{opacity:1;transform:translate(-50%,-50%)} }
@keyframes s-type    { 0%,16%{transform:scaleX(0)} 30%{transform:scaleX(1)} 42%{transform:scaleX(1)} 48%,100%{transform:scaleX(0)} }
@keyframes s-cblink  { 0%,15%{opacity:0} 16%{opacity:1} 16.5%{opacity:0} 17%{opacity:1} 17.5%{opacity:0} 18%{opacity:1} 30%{opacity:1} 30.5%{opacity:0} 31%{opacity:1} 31.5%{opacity:0} 36%{opacity:0} 100%{opacity:0} }

/* ==========================================================
   VEXT — 15s: source plays → zoom out → upload+prompt → click → result plays
   Timeline: 0-30% source | 30-38% transition | 38-62% compose | 62-68% out | 68-90% result | 90-100% fade
   ========================================================== */

.anim-clip-label { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:0.6rem; font-family:'Inter',sans-serif; color:rgba(255,255,255,0.8); background:rgba(0,0,0,0.7); backdrop-filter:blur(12px); padding:0.2rem 0.4rem; border-radius:6px; z-index:3; white-space:nowrap; }

/* --- Phase 1: Full-screen source video --- */
.vext-source-full {
  position:absolute; inset:0; z-index:10;
  border-radius:24px; overflow:hidden;
  opacity:0; animation:vx-src 15s 1 both cubic-bezier(.4,0,.2,1);
}
.vext-source-full video { width:100%; height:100%; object-fit:cover; }
.vext-source-label {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-size:0.75rem; color:rgba(255,255,255,0.9); font-family:'Inter',sans-serif;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(12px);
  padding:0.3rem 0.9rem; border-radius:8px; white-space:nowrap;
  opacity:0; animation:vx-srclbl 15s 1 both ease-in-out;
}
.vext-source-progress {
  position:absolute; bottom:0; left:0; width:100%; height:3px;
  background:rgba(255,255,255,0.1); z-index:5;
  opacity:0; animation:vx-srcpbar 15s 1 both ease-in-out;
}
.vext-source-pfill { height:100%; width:100%; background:var(--accent-gradient); border-radius:3px; transform-origin:left; transform:scaleX(0); animation:vx-srcpfill 15s 1 both linear; }

@keyframes vx-src     { 0%,3%{opacity:0;transform:scale(0.92)} 8%{opacity:1;transform:scale(1)} 26%{opacity:1;transform:scale(1)} 34%{opacity:0;transform:scale(0.85)} 100%{opacity:0} }
@keyframes vx-srclbl  { 0%,6%{opacity:0} 10%,24%{opacity:1} 28%,100%{opacity:0} }
@keyframes vx-srcpbar { 0%,6%{opacity:0} 10%,24%{opacity:1} 28%,100%{opacity:0} }
@keyframes vx-srcpfill{ 0%,8%{transform:scaleX(0)} 26%{transform:scaleX(1)} 34%,100%{transform:scaleX(0)} }

/* --- Phase 2-4: Compose area (upload slot + prompt) --- */
.vext-compose {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:20; width:90%; max-width:520px;
  opacity:0; animation:vx-compose 15s 1 both cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; gap:12px;
}
.vext-compose .anim-flow-prompt-input { width:100%; }

/* Upload slot */
.vext-upload-slot {
  position:relative; width:140px; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden;
  background:rgba(18,18,22,0.95);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  margin:0 auto;
}
.vext-upload-dashed {
  position:absolute; inset:5px;
  border:1px dashed rgba(255,255,255,0.2); border-radius:8px; z-index:2;
  opacity:0; animation:vx-dash 15s 1 both ease-in-out;
}
.vext-upload-icon {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  color:rgba(255,255,255,0.5); font-size:0.6rem; z-index:3;
  opacity:0; animation:vx-uplabel 15s 1 both ease-in-out;
  white-space:nowrap;
}
.vext-upload-thumb {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:4; border-radius:12px;
  opacity:0; transform:scale(0.85);
  animation:vx-thumb 15s 1 both cubic-bezier(.4,0,.2,1);
}
.vext-thumb-label {
  position:absolute; bottom:4px; left:50%; transform:translateX(-50%); z-index:5;
  font-size:0.55rem; color:rgba(255,255,255,0.85); font-family:'Inter',sans-serif;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(8px);
  padding:0.15rem 0.4rem; border-radius:4px; white-space:nowrap;
  opacity:0; animation:vx-thumblbl 15s 1 both ease-in-out;
}

@keyframes vx-compose  { 0%,28%{opacity:0;transform:translate(-50%,-50%) scale(0.9) translateY(20px)} 36%{opacity:1;transform:translate(-50%,-50%) scale(1) translateY(0)} 60%{opacity:1;transform:translate(-50%,-50%) scale(1)} 66%{opacity:0;transform:translate(-50%,-50%) scale(0.92) translateY(-10px)} 100%{opacity:0} }
@keyframes vx-dash     { 0%,30%{opacity:0} 34%,38%{opacity:1} 42%,100%{opacity:0} }
@keyframes vx-uplabel  { 0%,30%{opacity:0} 34%,37%{opacity:1} 40%,100%{opacity:0} }
@keyframes vx-thumb    { 0%,38%{opacity:0;transform:scale(0.85)} 43%{opacity:1;transform:scale(1)} 60%{opacity:1} 66%,100%{opacity:0} }
@keyframes vx-thumblbl { 0%,41%{opacity:0} 45%,58%{opacity:1} 64%,100%{opacity:0} }

/* VEXT typing */
.anim-vext .anim-typing-text { animation:vx-type 15s 1 both steps(97,end); }
.anim-vext .anim-cursor-blink { animation:vx-cblink 15s 1 both step-end; }

@keyframes vx-type   { 0%,42%{transform:scaleX(0)} 54%{transform:scaleX(1)} 60%{transform:scaleX(1)} 66%,100%{transform:scaleX(0)} }
@keyframes vx-cblink { 0%,41%{opacity:0} 42%{opacity:1} 42.5%{opacity:0} 43%{opacity:1} 43.5%{opacity:0} 44%{opacity:1} 54%{opacity:1} 54.5%{opacity:0} 55%{opacity:1} 55.5%{opacity:0} 58%{opacity:0} 100%{opacity:0} }

/* VEXT cursor + click */
.anim-vext .anim-cursor { animation:vxc-cur 15s 1 both ease-in-out; }
.anim-vext .anim-cursor-click { animation:vxc-clk 15s 1 both ease-out; }

@keyframes vxc-cur { 0%,52%{opacity:0;transform:translate(55%,62%)} 55%{opacity:1;transform:translate(55%,62%)} 58%{transform:translate(82%,58%)} 59%{transform:translate(82%,58%) scale(0.8)} 60%{transform:translate(82%,58%) scale(1)} 62%{opacity:1;transform:translate(70%,70%)} 66%,100%{opacity:0;transform:translate(70%,70%)} }
@keyframes vxc-clk { 0%,58.5%{opacity:0;transform:translate(33%,9%) scale(0)} 59%{opacity:0.8;transform:translate(33%,9%) scale(1)} 62%{opacity:0;transform:translate(33%,9%) scale(2)} 100%{opacity:0;transform:translate(33%,9%) scale(2)} }

/* VEXT result video frame */
.anim-vext .anim-video-frame { opacity:0; animation:vx-frame 15s 1 both cubic-bezier(.4,0,.2,1); }
.anim-vext .anim-gen-blur { animation:vx-blur 15s 1 both ease-in-out; }
.anim-vext .anim-result-video { animation:vx-vid 15s 1 both cubic-bezier(.25,.46,.45,.94); }
.anim-vext .anim-progress-bar { animation:vx-pbar 15s 1 both ease-in-out; }
.anim-vext .anim-progress-fill { animation:vx-pfill 15s 1 both linear; }
.anim-extended-label { opacity:0; animation:vx-elabel 15s 1 both ease-in-out; }

@keyframes vx-frame { 0%,64%{opacity:0;transform:translate(-50%,-50%)} 70%{opacity:1;transform:translate(-50%,-50%)} 100%{opacity:1;transform:translate(-50%,-50%)} }
@keyframes vx-blur  { 0%,64%{opacity:0} 68%{opacity:1} 74%{opacity:0.3} 78%,100%{opacity:0} }
@keyframes vx-vid   { 0%,64%{opacity:0;filter:blur(40px) saturate(0.2);transform:scale(1.1)} 72%{opacity:0.5;filter:blur(14px)} 76%{opacity:0.9;filter:blur(2px)} 80%,100%{opacity:1;filter:blur(0) saturate(1);transform:scale(1)} }
@keyframes vx-elabel{ 0%,78%{opacity:0} 82%,100%{opacity:1} }
@keyframes vx-pbar  { 0%,78%{opacity:0} 80%,100%{opacity:1} }
@keyframes vx-pfill { 0%,80%{transform:scaleX(0)} 100%{transform:scaleX(1)} }

/* ---------------------------------
   How It Works — Vertical Timeline
--------------------------------- */
.hiw-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
  background: transparent;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.hiw-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 700px; height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hiw-header {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
  z-index: 1;
}

.hiw-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue-bright);
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.hiw-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1rem;
}

.hiw-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Timeline Container */
.hiw-timeline {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Vertical Connector Line */
.hiw-connector {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 18px;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(124, 58, 237, 0.25) 10%,
    rgba(124, 58, 237, 0.4) 50%,
    rgba(124, 58, 237, 0.25) 90%,
    transparent 100%
  );
  z-index: 0;
}

/* Each Step Row */
.hiw-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: hiwStepReveal 0.7s ease-out forwards;
}

.hiw-step[data-step="1"] { animation-delay: 0.1s; }
.hiw-step[data-step="2"] { animation-delay: 0.25s; }
.hiw-step[data-step="3"] { animation-delay: 0.4s; }
.hiw-step[data-step="4"] { animation-delay: 0.55s; }

@keyframes hiwStepReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Step Number Circle */
.hiw-step-number {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: #0d1520;
  border: 2px solid rgba(124, 58, 237, 0.5);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.08);
}

/* Step Card */
.hiw-step-card {
  flex: 1;
  background: rgba(8, 12, 20, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.hiw-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hiw-step:hover .hiw-step-card {
  border-color: rgba(124, 58, 237, 0.18);
  transform: translateX(6px);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(124, 58, 237, 0.15);
}

.hiw-step:hover .hiw-step-card::before {
  opacity: 1;
}

.hiw-step:hover .hiw-step-number {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.6);
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.2);
}

/* Step Icon */
.hiw-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--accent-blue-bright);
  transition: all 0.4s ease;
}

.hiw-step:hover .hiw-step-icon {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.25);
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.1);
}

/* Step Title */
.hiw-step-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

/* Step Description */
.hiw-step-desc {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 768px) {
  .hiw-section { padding: 5rem 1.25rem; }
  .hiw-header { margin-bottom: 3rem; }
  .hiw-subtitle { font-size: 0.95rem; }
  .hiw-timeline { gap: 2rem; }
  .hiw-step-card { padding: 1.5rem; border-radius: 16px; }
  .hiw-step-icon { width: 46px; height: 46px; border-radius: 12px; }
  .hiw-step-title { font-size: 1.05rem; }
  .hiw-step-desc { font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .hiw-section { padding: 4rem 1rem; }
  .hiw-connector { left: 18px; }
  .hiw-step { gap: 1rem; }
  .hiw-step-card { padding: 1.25rem; }
}
/* ---------------------------------
   Comparison Cards (Grid)
--------------------------------- */
.cmp-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  overflow: hidden;
}

.cmp-section::before {
  content: '';
  position: absolute;
  top: 40%; left: 50%;
  width: 900px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.12) 0%, rgba(59, 130, 246, 0.05) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}

.cmp-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
  padding: 0 2rem;
}

.cmp-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue-bright);
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.cmp-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1.25rem;
}

.cmp-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}

/* The Grid Container — Horizontal Scroller */
.cmp-grid {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 5vw 2rem;
  scroll-padding-inline: 5vw;
  scrollbar-width: none;
  cursor: grab;
}
.cmp-grid::-webkit-scrollbar {
  display: none;
}

/* Scroll Wrapper with Arrows */
.cmp-scroll-wrap {
  position: relative;
  width: 100%;
}
.cmp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 12, 20, 0.85);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.cmp-arrow:hover {
  background: rgba(124, 58, 237, 0.3);
  border-color: rgba(124, 58, 237, 0.5);
  transform: translateY(-50%) scale(1.1);
}
.cmp-arrow-left { left: 1rem; }
.cmp-arrow-right { right: 1rem; }
.cmp-arrow.hidden { opacity: 0; pointer-events: none; }

/* Edge Fade Overlays */
.cmp-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 5;
  pointer-events: none;
}
.cmp-fade-left {
  left: 0;
  background: linear-gradient(to right, #000 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
}
.cmp-fade-right {
  right: 0;
  background: linear-gradient(to left, #000 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
}

/* Golden Crown in HH Card Header */
.cmp-crown {
  display: inline-flex;
  filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.6));
  margin-left: auto;
  flex-shrink: 0;
}

/* Base Card Style */
.cmp-card {
  background: rgba(8, 12, 20, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 2rem 2rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease;
  min-width: clamp(280px, 30vw, 380px);
  flex-shrink: 0;
  scroll-snap-align: start;
}

.cmp-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Happy Horse Featured Card */
.cmp-card-hh {
  background: rgba(8, 12, 20, 0.8);
  border: 1px solid rgba(124, 58, 237, 0.4);
  box-shadow: 0 20px 80px rgba(0,0,0,0.5), 0 0 30px rgba(124, 58, 237, 0.15);
  transform: scale(1.02);
  z-index: 2;
}

.cmp-card-hh:hover {
  transform: scale(1.02) translateY(-5px);
  border-color: rgba(124, 58, 237, 0.6);
}

.cmp-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cmp-card-header h3 {
  font-size: 1.5rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  margin: 0;
}

.cmp-card-hh .cmp-card-header h3 {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* Feature List */
.cmp-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.cmp-feature-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

.cmp-feature-list li:last-child {
  border-bottom: none;
}

.cmp-feature-name {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-weight: 400;
}

/* Status Icons */
.cmp-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cmp-yes {
  color: #10b981;
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4));
}

.cmp-card-hh .cmp-yes {
  color: #fff;
  background: var(--accent-gradient);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
  filter: none;
}
.cmp-card-hh .cmp-yes svg {
  width: 14px; height: 14px;
  stroke-width: 4;
}

.cmp-no {
  color: rgba(255, 255, 255, 0.15);
}

.cmp-partial {
  color: rgba(250, 204, 21, 0.8);
}

.cmp-text-val {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 0.85rem;
}

.cmp-card-hh .cmp-text-val {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

.cmp-rating {
  color: rgba(250, 204, 21, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.3));
}

/* Responsive */
@media (max-width: 1024px) {
  .cmp-card-hh { transform: scale(1); }
  .cmp-card-hh:hover { transform: translateY(-5px); }
}

@media (max-width: 768px) {
  .cmp-section { padding: 6rem 0; }
  .cmp-header { margin-bottom: 3rem; }
  .cmp-grid { gap: 1.5rem; }
}

@media (max-width: 480px) {
  .cmp-section { padding: 4rem 0; }
  .cmp-card { padding: 2rem 1.5rem; }
}

/* ---------------------------------
   Use Cases (Partners Style)
--------------------------------- */
/* ---------------------------------
   Gallery Section
--------------------------------- */
/* ---------------------------------
   Pricing Section
--------------------------------- */
.hh-pricing { padding-top: 8rem; padding-bottom: 8rem; padding-left: 2rem; padding-right: 2rem; text-align: center; }
.hh-pricing-header { margin: 0 auto 4rem; max-width: 800px; }
.hh-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; }
@media(max-width: 900px) { .hh-pricing-grid { grid-template-columns: 1fr; } }

.hh-plan { background: rgba(8, 12, 20, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 3rem 2.5rem; display: flex; flex-direction: column; text-align: left; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: transform 0.3s ease, border-color 0.3s ease; }
.hh-plan:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.15); }
.hh-plan h3 { font-size: 1.8rem; margin-bottom: 1.5rem; }
.hh-plan.pro { background: rgba(12, 14, 22, 0.75); border-color: rgba(124, 58, 237, 0.5); position: relative; transform: scale(1.03); box-shadow: 0 20px 60px rgba(124, 58, 237, 0.15); z-index: 2; }
.hh-plan.pro:hover { transform: scale(1.03) translateY(-5px); border-color: rgba(124, 58, 237, 0.8); box-shadow: 0 25px 70px rgba(124, 58, 237, 0.25); }
/* Credits pill badge */
.hh-credits-pill-wrap { margin-bottom: 2rem; }
.hh-credits-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hh-credits-pill.pro {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(109, 40, 217, 0.15));
  border-color: rgba(124, 58, 237, 0.4);
  color: rgba(200, 170, 255, 0.95);
}
/* ---------------------------------
   Cards, Steps, FAQ, Footer
--------------------------------- */
/* ---------------------------------
   Prompts & FAQ Section
--------------------------------- */
.faq-section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1.5rem;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
}

.faq-section-desc {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  max-width: 500px;
}

.hh-prompt-item, .hh-faq-item {
  display: flex;
  flex-direction: column;
  background: rgba(8, 12, 20, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.hh-prompt-item:hover, .hh-faq-item:hover {
  background: rgba(12, 14, 22, 0.6);
  border-color: rgba(124, 58, 237, 0.5);
  transform: translateX(4px) translateY(-2px);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.1);
}

.hh-prompt-item.active, .hh-faq-item.active {
  border-color: rgba(124, 58, 237, 0.6);
  background: rgba(12, 14, 22, 0.8);
  box-shadow: inset 0 0 20px rgba(124, 58, 237, 0.05);
}

.prompt-header, .faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.collapse-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue-bright);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-left: 1rem;
}

.collapsible.active .collapse-icon {
  transform: rotate(45deg);
}

.prompt-body, .faq-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible.active .prompt-body,
.collapsible.active .faq-body {
  max-height: 500px;
  opacity: 1;
  margin-top: 1.25rem;
}

.prompt-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

.hh-faq-list {
  display: flex;
  flex-direction: column;
}

.faq-header h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.faq-header h3::before {
  content: '?';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(124, 58, 237, 0.15);
  color: var(--accent-blue-bright);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.faq-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  padding-left: 2.25rem;
}

.hh-footer { max-width: var(--max-w); margin: 0 auto; border-top: 1px solid var(--border); padding: 0 2rem 2rem; }

.referral-actions { display: flex; justify-content: center; gap: 1rem; align-items: center; }

/* ---------------------------------
   Developer API Section
--------------------------------- */
.api-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.api-glow {
  position: absolute;
  top: 50%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 60%);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

.api-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4rem;
  position: relative;
  z-index: 2;
}

.api-content {
  flex: 1;
  min-width: 300px;
}

.api-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue-bright);
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.api-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1.5rem;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.03em;
}

.api-desc {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  max-width: 540px;
}

.api-features {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem 0;
}

.api-feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  transition: transform 0.3s ease;
}

.api-feature-item:hover {
  transform: translateX(4px);
}

.api-feature-icon {
  color: var(--accent-blue-bright);
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.15);
}

.api-feature-text strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
  color: rgba(255, 255, 255, 0.9);
}

.api-feature-text span {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.api-code-wrapper {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
  width: 100%;
  position: relative;
}

.api-code-window {
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(124, 58, 237, 0.15);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.api-code-wrapper:hover .api-code-window {
  transform: translateY(-4px);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(124, 58, 237, 0.15);
}

.api-code-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mac-dots {
  display: flex;
  gap: 0.4rem;
}

.mac-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.file-name {
  margin-left: auto;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.api-code-content {
  padding: 1.5rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #e2e8f0;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}

.api-code-content::-webkit-scrollbar { height: 6px; }
.api-code-content::-webkit-scrollbar-track { background: transparent; }
.api-code-content::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.3); border-radius: 3px; }

/* ---------------------------------
   Performance Optimizations
--------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------
   RESPONSIVE
--------------------------------- */

/* Tablet (1024px) */
@media (max-width: 1024px) {
  .hh-nav { padding: 1rem 1.5rem; }
  .hh-nav-links { display: none; }
  .hh-nav-burger { display: flex; }
  .hh-nav-right .hh-pill-btn,
  .hh-nav-signin { display: none; }
  .hh-pricing-grid { grid-template-columns: 1fr; max-width: 500px; }
  .hh-plan.pro { transform: scale(1); }
  .hh-footer { flex-direction: column; gap: 2.5rem; }
}

/* Mobile (768px) */
@media (max-width: 768px) {
  .hh-nav { padding: 0.9rem 1.25rem; }

  /* Hero responsive */
  .flow-hero { min-height: 100vh; }
  .flow-hero-mosaic {
    opacity: 0.35;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    padding: 20px;
  }
  .flow-hero-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .flow-hero-subtitle { font-size: 0.9rem; max-width: 90%; }
  .flow-scroll-indicator { display: none; }

  /* Hero prompt composer mobile */
  .hero-prompt-glass { max-width: 100%; border-radius: 16px; padding: 0.85rem 1rem; }
  .hero-prompt-input-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .hero-prompt-textarea {
    font-size: 0.88rem;
    min-height: 3rem;
    width: 100%;
  }
  .hero-generate-btn { width: 100%; justify-content: center; padding: 0.75rem 1.2rem; font-size: 0.95rem; }

  /* Overview responsive */
  .flow-overview { padding: 6rem 1.25rem 4rem; }
  .flow-overview-title { font-size: clamp(1.6rem, 6vw, 2.5rem); }
  .flow-overview-subtitle { font-size: 0.95rem; }
  .flow-overview-chips { gap: 0.4rem; }
  .flow-chip { font-size: 0.7rem; padding: 0.4rem 0.8rem; }
  .flow-overview-video-wrapper { margin-top: 2.5rem; }
  .flow-overview-video { border-radius: 14px; }
  /* API Section mobile */
  .api-section { padding: 5rem 1.25rem; }
  .api-container { gap: 2.5rem; }
  .api-title { font-size: clamp(2rem, 8vw, 2.5rem); }

  /* Capabilities */
  .hh-capabilities { padding: 4rem 0; }
  .cap-tabs {
    gap: 1.5rem;
    padding: 0 1.25rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .cap-tabs::-webkit-scrollbar { display: none; }
  .cap-tab { font-size: clamp(1.2rem, 5vw, 1.6rem); flex-shrink: 0; }
  .cap-description { padding: 0 1.25rem; font-size: 0.9rem; }
  .cap-carousel { padding: 1rem 1.25rem 2rem; }
  .cap-card { flex: 0 0 calc(100vw - 2.5rem); max-width: calc(100vw - 2.5rem); min-width: 0; }
  .cap-card-media { aspect-ratio: 16 / 10; height: auto; border-radius: 14px; }

  /* Simplified animations on mobile */
  .anim-prompt-box, .anim-gen-btn-wrap, .anim-gold-glow, .anim-gen-blur,
  .anim-upload-zone, .anim-audio-row, .anim-timeline-row,
  .anim-cursor, .anim-cursor-click, .anim-action-bar { display: none !important; }
  .anim-video-frame { opacity: 1 !important; animation: none !important; }
  .anim-result-video { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
  .anim-portrait-frame { display: none !important; }

  /* Use Cases */
  /* Gallery */
  /* Sections */
  .hh-section { padding: 5rem 1.25rem; }
  .hh-pricing { padding: 5rem 1.25rem; }
  .hh-pricing-grid { max-width: 100%; }
  .hh-footer { padding: 0 1.25rem 2rem; flex-direction: column; gap: 2rem; }
  /* Referral */
  .referral-actions { flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; }
  .referral-actions .hh-pill-btn { text-align: center !important; display: block !important; width: 100% !important; }
}

/* Small mobile (480px) */
@media (max-width: 480px) {
  .hh-nav { padding: 0.8rem 1rem; }
  .hh-nav-logo { font-size: 1rem; }
  .hh-pill-btn { padding: 0.5rem 1rem; font-size: 0.8rem; }
  .flow-hero-title { font-size: clamp(2rem, 10vw, 3rem); }
  .hh-section { padding: 4rem 1rem; }
  .hh-pricing { padding: 4rem 1rem; }
  .hh-plan { padding: 2rem 1.5rem; }
  .hh-footer { text-align: center; gap: 1.5rem; }

  #cta h2 { font-size: clamp(1.5rem, 8vw, 2.5rem) !important; line-height: 1.15; }
}

/* ==============================================
   VIDEO GALLERY — Video Examples Section
   ============================================== */
.vgallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.vgallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  cursor: pointer;
}
.vgallery-item.vgallery-wide {
  grid-column: span 1;
  aspect-ratio: 16 / 9;
}
.vgallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.vgallery-item:hover video {
  transform: scale(1.06);
}
.vgallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.vgallery-item:hover .vgallery-overlay {
  opacity: 1;
}
.vgallery-overlay h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: #fff;
}
.vgallery-overlay p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.4;
}
.vgallery-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-blue-bright, #a78bfa);
  background: rgba(124,58,237,0.2);
  border: 1px solid rgba(124,58,237,0.3);
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  margin-bottom: 0.6rem;
  width: fit-content;
  backdrop-filter: blur(8px);
}

/* ================================================
   VIDEO LIGHTBOX PLAYER
   ================================================ */
.vplayer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.vplayer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.vplayer-container {
  position: relative;
  width: 90vw;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  max-height: 85vh;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.vplayer-backdrop.active .vplayer-container {
  transform: scale(1);
}

.vplayer-container video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

/* Close Button */
.vplayer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.25s ease;
  padding: 0;
}

.vplayer-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: scale(1.1);
}

/* Controls Bar */
.vplayer-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 16px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vplayer-container:hover .vplayer-controls,
.vplayer-controls.visible {
  opacity: 1;
}

/* Play/Pause Button */
.vplayer-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.vplayer-play-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

.vplayer-play-btn .vp-pause-icon {
  display: none;
}

.vplayer-play-btn.playing .vp-play-icon {
  display: none;
}

.vplayer-play-btn.playing .vp-pause-icon {
  display: block;
}

/* Progress Bar */
.vplayer-progress-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: height 0.15s ease;
}

.vplayer-progress-wrap:hover {
  height: 8px;
}

.vplayer-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  border-radius: 3px;
  width: 0%;
  transition: none;
  position: relative;
}

.vplayer-progress-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
  transition: transform 0.15s ease;
}

.vplayer-progress-wrap:hover .vplayer-progress-fill::after {
  transform: translateY(-50%) scale(1);
}

/* Time Display */
.vplayer-time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
  flex-shrink: 0;
}

/* Sound Button in Lightbox Player */
.vplayer-sound-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.vplayer-sound-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

.vplayer-sound-btn .vp-sound-on {
  display: none;
}

.vplayer-sound-btn.unmuted .vp-sound-off {
  display: none;
}

.vplayer-sound-btn.unmuted .vp-sound-on {
  display: block;
}

/* Big Center Play Button (when paused) */
.vplayer-big-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.vplayer-big-play.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Gallery item play indicator */
.vgallery-play-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.vgallery-item:hover .vgallery-play-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Responsive */
@media (max-width: 768px) {
  .vgallery {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0 1rem;
  }
  .vgallery-item.vgallery-wide {
    grid-column: span 1;
    aspect-ratio: 16 / 9;
  }
  .vgallery-item {
    aspect-ratio: 16 / 9;
  }
  .vgallery-overlay {
    opacity: 1;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 80%);
  }
  .vgallery-overlay h3 {
    font-size: 0.75rem;
    margin: 0 0 0.15rem;
    line-height: 1.2;
  }
  .vgallery-overlay p {
    font-size: 0.6rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .vgallery-tag {
    font-size: 0.5rem;
    padding: 0.1rem 0.35rem;
    margin-bottom: 0.2rem;
  }
  /* API glow — circular on mobile */
  .api-glow {
    width: 80%;
    height: 50%;
    right: -20%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.12) 0%, transparent 70%);
  }
}

/* ---------------------------------
   Referral & CTA Cards
--------------------------------- */
.referral-card {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 4rem 3rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.cta-card {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 32px;
  padding: 6rem 2rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
  .vgallery-overlay h3 { font-size: 0.95rem; }
  .vgallery-overlay p { font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .vgallery {
    grid-template-columns: 1fr;
  }
  .vgallery-item,
  .vgallery-item.vgallery-wide {
    grid-column: span 1;
    aspect-ratio: 16 / 9;
  }
}

/* ---------------------------------
   Scroll Animations
--------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-up-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-stagger.visible > *:nth-child(1) { transition-delay: 0.1s; }
.fade-up-stagger.visible > *:nth-child(2) { transition-delay: 0.2s; }
.fade-up-stagger.visible > *:nth-child(3) { transition-delay: 0.3s; }
.fade-up-stagger.visible > *:nth-child(4) { transition-delay: 0.4s; }
.fade-up-stagger.visible > *:nth-child(5) { transition-delay: 0.5s; }
.fade-up-stagger.visible > *:nth-child(6) { transition-delay: 0.6s; }

/* ==============================================
   ULTRA-WIDE & LARGE SCREEN SUPPORT (1441px+)
   ============================================== */

/*
   Strategy: Sections stay full-width for seamless backgrounds.
   Content is constrained by dynamic horizontal padding that grows
   with the viewport, keeping readable content within ~1400px center.
   All overrides scoped to 1441px+ to avoid breaking mobile/tablet.
*/

@media (min-width: 1441px) {

  /* Nav: keep items within ~1440px center */
  .hh-nav {
    padding-left: max(2.5rem, calc((100vw - 1440px) / 2 + 2.5rem));
    padding-right: max(2.5rem, calc((100vw - 1440px) / 2 + 2.5rem));
  }

  /* Hero — content is already centered, just cap width */
  .flow-hero-content {
    max-width: 1200px;
  }

  .flow-hero-subtitle {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Capabilities — full-width container so carousel can use all available space */
  .hh-capabilities {
    --cap-card-w: clamp(720px, 50vw, 1100px);
    padding-left: 0;
    padding-right: 0;
  }

  /* Align tabs, description, and headings to the first card's left edge */
  .cap-tabs {
    padding-left: calc(50% - var(--cap-card-w) / 2);
    padding-right: 2rem;
  }

  .cap-description {
    padding-left: calc(50% - var(--cap-card-w) / 2);
    padding-right: calc(50% - var(--cap-card-w) / 2);
    max-width: none;
  }

  .hh-capabilities p[style*="padding-left"],
  .hh-capabilities h2[style*="padding-left"] {
    padding-left: calc(50% - var(--cap-card-w) / 2) !important;
  }

  /* Let subtitle text fill the card width instead of staying at 800px */
  .hh-capabilities p[style*="max-width"] {
    max-width: none !important;
    padding-right: calc(50% - var(--cap-card-w) / 2) !important;
  }

  .cap-carousel {
    padding-left: calc(50% - var(--cap-card-w) / 2);
    padding-right: calc(50% - var(--cap-card-w) / 2);
    justify-content: flex-start;
  }

  .cap-card {
    flex: 0 0 var(--cap-card-w);
    max-width: var(--cap-card-w);
  }

  /* Comparison — full-width scrollable, constrain header + grid */
  .cmp-header {
    padding-left: max(2rem, calc((100vw - 1200px) / 2));
    padding-right: max(2rem, calc((100vw - 1200px) / 2));
  }

  .cmp-grid {
    padding-left: max(5vw, calc((100vw - 1500px) / 2));
    padding-right: max(5vw, calc((100vw - 1500px) / 2));
  }

  /* General .hh-section — remove max-width cap, add dynamic padding */
  .hh-section {
    max-width: none;
    padding-left: max(2rem, calc((100vw - 1400px) / 2 + 2rem));
    padding-right: max(2rem, calc((100vw - 1400px) / 2 + 2rem));
  }

  /* Use Cases — naturally full-width with centered content */
  /* Footer constrain */
  footer {
    padding-left: max(2rem, calc((100vw - 1400px) / 2 + 2rem)) !important;
    padding-right: max(2rem, calc((100vw - 1400px) / 2 + 2rem)) !important;
  }

  /* Referral and CTA cards */
  .referral-card {
    max-width: 800px;
  }

  .cta-card {
    max-width: 1000px;
  }

  /* API section — expand container */
  .api-container {
    max-width: 1400px;
  }

  /* Video gallery — expand grid */
  .vgallery {
    max-width: 1400px;
  }

  /* Pricing — expand grid */
  .hh-pricing-grid {
    max-width: 1400px;
  }

  /* Override inline max-width: 800px/900px containers used in FAQ, Prompts, comparison text */
  .hh-section > div[style*="max-width: 800px"],
  .hh-section > div[style*="max-width: 900px"],
  #faq > div[style*="max-width"],
  #prompts > div[style*="max-width"],
  .cmp-section > div[style*="max-width"] {
    max-width: 1000px !important;
  }

  /* Section header text containers */
  #video-examples > div[style*="max-width"],
  #use-cases > div[style*="max-width"] {
    max-width: 1000px !important;
  }

  /* Overview content */
  .flow-overview-content {
    max-width: 1300px;
  }

  /* How It Works timeline */
  .hiw-timeline {
    max-width: 1000px;
  }

  /* Pricing section — full-width background with wider content */
  .hh-pricing {
    max-width: none;
    padding-left: max(2rem, calc((100vw - 1400px) / 2 + 2rem));
    padding-right: max(2rem, calc((100vw - 1400px) / 2 + 2rem));
  }
}

@media (min-width: 1920px) {
  .flow-hero {
    padding-top: 8rem;
    padding-bottom: 10rem;
  }

  .flow-hero-title {
    font-size: clamp(4rem, 5vw, 7rem);
  }

  .api-container {
    max-width: 1600px;
  }

  .vgallery {
    max-width: 1600px;
  }

  .hh-pricing-grid {
    max-width: 1500px;
  }

  .hh-section > div[style*="max-width: 800px"],
  .hh-section > div[style*="max-width: 900px"],
  #faq > div[style*="max-width"],
  #prompts > div[style*="max-width"],
  .cmp-section > div[style*="max-width"] {
    max-width: 1100px !important;
  }

  #video-examples > div[style*="max-width"],
  #use-cases > div[style*="max-width"] {
    max-width: 1100px !important;
  }

  .hh-capabilities {
    --cap-card-w: clamp(720px, 50vw, 1200px);
  }

  .flow-overview-content {
    max-width: 1400px;
  }
}

/* ==============================================
   INTERMEDIATE TABLET (769px–1024px)
   ============================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .hh-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .vgallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .cmp-card {
    min-width: clamp(260px, 28vw, 340px);
  }
}

/* ==============================================
   ENHANCED MOBILE (max-width: 768px)
   ============================================== */
@media (max-width: 768px) {
  /* Nav spacing */
  .hh-nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero text readability */
  .flow-hero-subtitle {
    font-size: 0.88rem;
    max-width: 92%;
    line-height: 1.6;
  }

  /* Section headings scale down */
  .cmp-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }

  .cmp-subtitle {
    font-size: 0.9rem;
    padding: 0 0.5rem;
  }

  /* Comparison cards */
  .cmp-card {
    min-width: 260px;
    padding: 1.5rem 1.25rem;
  }

  .cmp-grid {
    padding: 1rem 1rem 2rem;
  }

  .cmp-arrow-left { left: 0.5rem; }
  .cmp-arrow-right { right: 0.5rem; }

  /* Referral card */
  .referral-card {
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
  }

  /* CTA card */
  .cta-card {
    padding: 4rem 1.5rem;
    border-radius: 24px;
  }

  /* Pricing */
  .hh-pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 1.5rem;
  }

  .hh-plan {
    padding: 2rem 1.5rem;
    border-radius: 18px;
  }

  .hh-plan.pro {
    transform: none;
  }

  /* Video gallery */
  .vgallery {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0 1rem;
  }

  .vgallery-overlay {
    opacity: 1;
  }
}

/* ==============================================
   SMALL MOBILE (max-width: 480px)
   ============================================== */
@media (max-width: 480px) {
  .hh-nav {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .flow-hero-title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .flow-hero-subtitle {
    font-size: 0.82rem;
    max-width: 95%;
  }

  .hero-prompt-glass {
    margin: 0 0.5rem;
  }

  .cmp-section { padding: 4rem 0; }
  .cmp-card { min-width: 240px; padding: 1.5rem 1rem; }
  .cmp-grid { padding: 1rem 0.75rem 1.5rem; }

  .cmp-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .vgallery {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .vgallery-item,
  .vgallery-item.vgallery-wide {
    grid-column: span 1;
    aspect-ratio: 16 / 9;
  }

  .vgallery-overlay {
    padding: 0.85rem 1rem;
  }
  .vgallery-overlay h3 {
    font-size: 0.85rem;
  }
  .vgallery-overlay p {
    font-size: 0.7rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .referral-card {
    padding: 2rem 1rem;
  }

  .cta-card {
    padding: 3rem 1rem;
  }

  .hh-pill-btn-hero {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}

/* Hide mega-menu dropdown on mobile (products are in hamburger) */
@media (max-width: 768px) {
  .hh-nav-dropdown {
    display: none;
  }
}

/* ==============================================
   ACCESSIBILITY: Reduced Motion
   ============================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Touch devices: larger tap targets */
@media (hover: none) {
  .cmp-arrow { width: 48px; height: 48px; }
}

/* ==============================================
   FOOTER ENHANCEMENTS
   ============================================== */
.hh-footer-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4rem 2rem 2rem;
  text-align: left;
  background: var(--bg);
  /* Bulletproof stacking — isolate creates a new stacking context that
     prevents ANY ancestor/sibling pseudo-element or glow from overlapping
     footer content. z-index:100 sits above all section z-indices. */
  position: relative;
  z-index: 100;
  isolation: isolate;
}

.hh-footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
}

@media (max-width: 900px) {
  .hh-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hh-footer-brand-col {
    grid-column: span 2;
  }
}
@media (max-width: 500px) {
  .hh-footer-grid {
    grid-template-columns: 1fr;
  }
  .hh-footer-brand-col {
    grid-column: span 1;
  }
}

.hh-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hh-footer-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.hh-footer-link {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
  width: fit-content;
}

.hh-footer-link:hover {
  color: #fff;
  transform: translateX(2px);
}

.hh-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.hh-social-link {
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hh-social-link:hover {
  color: var(--accent-blue-bright);
  transform: translateY(-2px);
}

.hh-social-link svg {
  width: 20px;
  height: 20px;
}

/* Newsletter */
.hh-footer-bottom {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.hh-footer-copyright {
  color: var(--text-muted);
  font-size: 0.75rem;
  opacity: 0.6;
  margin: 0;
}

.hh-back-to-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  text-decoration: none;
}

.hh-back-to-top:hover {
  color: #fff;
}

/* Footer collapsible product columns */
.hh-footer-col-trigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  transition: color 0.2s ease;
}
.hh-footer-col-trigger:hover { color: #fff; }

.hh-footer-chev {
  transition: transform 0.3s ease;
  opacity: 0.5;
}
.hh-footer-subcat.open .hh-footer-chev {
  transform: rotate(180deg);
}

.hh-footer-col-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease;
  opacity: 0;
}
.hh-footer-subcat.open .hh-footer-col-body {
  max-height: 300px;
  opacity: 1;
}

.hh-footer-col-body a {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
  width: fit-content;
}
.hh-footer-col-body a:hover {
  color: #fff;
  transform: translateX(2px);
}

/* Footer support email */
.hh-footer-email {
  cursor: pointer;
  position: relative;
}

.hh-copy-toast {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.25rem 0.6rem;
  background: rgba(124, 58, 237, 0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 4px;
  animation: hh-toast-in 0.3s ease, hh-toast-out 0.3s ease 1.3s forwards;
}

@keyframes hh-toast-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hh-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ============================================
   UTILITY CLASSES (extracted from inline styles)
   ============================================ */
.faq-answer-text { padding: 0.6rem 0; color: var(--text-muted); font-size: 0.95rem; }
.flex-center-row { display: flex; align-items: center; gap: 0.75rem; }
.prompt-italic-text { color: var(--text-muted); font-style: italic; line-height: 1.7; }
.section-muted-intro { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; }
.section-large-title { font-size: 3rem; font-weight: 600; margin-bottom: 2rem; }
.pricing-feature-text { font-size: 1rem; color: var(--text-muted); font-weight: 400; }
.pricing-feature-list { list-style: none; padding: 0; margin-bottom: 2rem; flex-grow: 1; }
.full-width-center { width: 100%; text-align: center; }
.section-header-center { text-align: center; max-width: 800px; margin: 0 auto 4rem; }
.section-title-responsive { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.section-subtitle-muted { color: var(--text-muted); font-size: 1.1rem; }
.section-cta-wrap { text-align: center; margin-top: 3rem; }
.step-title { font-size: 1.5rem; font-weight: 500; margin-bottom: 0.5rem; color: rgba(255,255,255,0.8); }
.content-center-z2 { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }
.section-header-mb4 { text-align: center; margin-bottom: 4rem; }

/* Models Section — responsive grid */
@media (max-width: 768px) {
  .hh-models-grid { grid-template-columns: 1fr !important; }
  .hh-models-grid .cmp-card { min-width: 0 !important; }
}