/* css/layout.css */

[id] {
  scroll-margin-top: 80px;
}

/* === Container === */
.vd-container {
  width: 100%;
  max-width: var(--vd-container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 1024px) {
  .vd-container {
    padding: 0 48px;
  }
}

/* === Sections === */
.vd-section {
  padding: var(--vd-space-section) 0;
}

section.vd-section.vd-section-sm {
  padding: 80px 0;
}

section.vd-section.vd-section-lg {
  padding: 140px 0;
}

@media (max-width: 767px) {
  section.vd-section.vd-section-sm { padding: 56px 0; }
  section.vd-section.vd-section-lg { padding: 100px 0; }
}

.vd-section-header {
  text-align: center;
  margin-bottom: 48px;
  max-width: var(--vd-container-secondary);
  margin-left: auto;
  margin-right: auto;
}

.vd-section-header .vd-badge {
  margin-bottom: 16px;
}

.vd-section-header p {
  max-width: 520px;
  margin: 12px auto 0;
  color: var(--vd-text-muted);
}

/* === Navbar === */
.vd-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, backdrop-filter 0.3s, border-bottom-color 0.3s;
}

.vd-navbar > .vd-container {
  max-width: var(--vd-container);
}

.vd-navbar.is-scrolled {
  background-color: rgba(17,17,24,0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--vd-stroke);
}

html.light .vd-navbar.is-scrolled {
  background-color: rgba(255,255,255,0.8);
}

.vd-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vd-navbar-logo svg {
  height: 34px;
  width: auto;
}

.vd-navbar-links {
  display: none;
  align-items: center;
  gap: 36px;
}

.vd-navbar-link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--vd-text-muted);
  transition: color 0.2s;
}

.vd-navbar-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--vd-primary);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vd-navbar-link:hover::after {
  width: 100%;
}

.vd-navbar-link:hover {
  color: var(--vd-text);
}

/* Navbar dropdown */
.vd-navbar-dropdown {
  position: relative;
}

.vd-navbar-link-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.vd-navbar-link-dropdown svg {
  transition: transform 0.2s;
}

.vd-navbar-dropdown:hover .vd-navbar-link-dropdown svg,
.vd-navbar-dropdown.is-open .vd-navbar-link-dropdown svg {
  transform: rotate(180deg);
}

.vd-navbar-submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: 14px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity 0.2s, visibility 0.2s, translate 0.25s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 100;
  overflow: hidden;
}

html.light .vd-navbar-submenu {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.vd-navbar-dropdown:hover .vd-navbar-submenu,
.vd-navbar-dropdown.is-open .vd-navbar-submenu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* Wide submenu variant (3 link columns + promo) */
.vd-navbar-submenu.vd-navbar-submenu-wide {
  width: 1060px;
}

/* Medium submenu variant (2 link columns, no promo) */
.vd-navbar-submenu.vd-navbar-submenu-medium {
  width: 720px;
}
.vd-navbar-submenu-medium .vd-submenu-links {
  flex: 1;
  min-width: 0;
}
.vd-navbar-submenu-medium .vd-submenu-link-title {
  white-space: nowrap;
}

.vd-navbar-submenu-wide .vd-submenu-links {
  flex: 1;
  min-width: 0;
}

.vd-navbar-submenu-wide .vd-submenu-link-title {
  white-space: nowrap;
}

.vd-submenu-heading {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vd-text-muted);
  padding: 0 12px 6px;
  margin-bottom: 4px;
}

/* Split layout */
.vd-submenu-split {
  display: flex;
}

/* Links column */
.vd-submenu-links {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vd-submenu-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.15s;
}

.vd-submenu-link:hover {
  background: var(--vd-primary-subtle);
}

.vd-submenu-link > svg {
  margin-top: 2px;
  flex-shrink: 0;
}

.vd-submenu-link-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vd-submenu-link-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vd-submenu-link-desc {
  font-size: 12px;
  color: var(--vd-text-faint);
  line-height: 1.3;
}

.vd-submenu-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-primary);
  background: var(--vd-primary-subtle);
  padding: 1px 6px;
  border-radius: 100px;
  border: 1px solid var(--vd-primary-border);
}

/* Promo panel */
.vd-submenu-promo {
  width: 220px;
  flex-shrink: 0;
  background: var(--vd-bg);
  border-left: 1px solid var(--vd-stroke);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vd-submenu-promo-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--vd-stroke);
}

.vd-submenu-promo-content {
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.vd-submenu-promo-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
  line-height: 1.3;
}

.vd-submenu-promo-sub {
  font-size: 12px;
  color: var(--vd-text-faint);
  margin-top: 2px;
}

.vd-submenu-promo-content .vd-btn {
  margin-top: 8px;
  align-self: flex-start;
}

html.light .vd-submenu-promo {
  background: var(--vd-bg);
}

.vd-navbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (min-width: 1024px) {
  .vd-navbar-links {
    display: flex;
  }
  .vd-navbar-actions .vd-btn {
    display: inline-flex !important;
  }
}

/* Mobile menu */
.vd-mobile-menu {
  display: flex;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--vd-bg);
  z-index: 99;
  padding: 72px 24px 24px;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.vd-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vd-hamburger {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--vd-text-muted);
  position: relative;
  z-index: 101;
}

.vd-hamburger .icon-close {
  display: none;
}

.vd-hamburger[aria-expanded="true"] .icon-menu {
  display: none;
}

.vd-hamburger[aria-expanded="true"] .icon-close {
  display: block;
}

@media (min-width: 1024px) {
  .vd-hamburger {
    display: none;
  }
}

/* === Alternate Section Backgrounds === */
.vd-section-alt {
  background-color: var(--vd-surface);
}

/* === Hero === */
.vd-hero {
  padding-top: 140px;
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.vd-hero-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse at 40% 50%, rgba(255,107,0,0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 60% 40%, rgba(139,92,246,0.03) 0%, transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.vd-hero-content, .vd-hero-mockup { position: relative; z-index: 1; }

.vd-hero-content {
  max-width: 820px;
  margin: 0 auto;
}

.vd-hero-content .vd-badge {
  margin-bottom: 20px;
}

.vd-hero-content p {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--vd-text-muted);
}

.vd-hero-input {
  max-width: 580px;
  margin: 24px auto 0;
}

.vd-hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.vd-hero-proof-divider {
  width: 1px;
  height: 12px;
  background-color: var(--vd-stroke);
}

.vd-hero-stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  color: var(--vd-primary);
}

.vd-hero-avatars {
  display: flex;
}

.vd-hero-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--vd-bg);
  background-color: var(--vd-surface);
}

.vd-hero-avatar + .vd-hero-avatar {
  margin-left: -8px;
}

.vd-hero-mockup {
  max-width: 900px;
  margin: 48px auto 0;
  position: relative;
}

.vd-hero-mockup-inner {
  background-color: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-bottom: none;
  border-radius: var(--vd-radius-card) var(--vd-radius-card) 0 0;
  overflow: hidden;
  box-shadow: var(--vd-shadow-xl);
}

.vd-mockup-chrome {
  padding: 10px 14px;
  background-color: var(--vd-surface);
  border-bottom: 1px solid var(--vd-stroke);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vd-mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.vd-mockup-url {
  font-size: 12px;
  color: var(--vd-text-faint);
  margin-left: 12px;
}

.vd-mockup-body {
  padding: 24px;
}

/* Hero Mockup Clip Cards */
.vd-mockup-clips-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  .vd-mockup-clips-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vd-mockup-clip-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--vd-stroke);
  background-color: var(--vd-surface);
  transition: border-color 0.2s, transform 0.2s;
}

.vd-mockup-clip-card:hover {
  border-color: var(--vd-primary-border);
  transform: translateY(-3px);
  box-shadow: var(--vd-shadow-sm);
}

.vd-mockup-clip-thumb {
  aspect-ratio: 9/16;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vd-mockup-clip-score {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: var(--vd-primary);
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.3;
}

.vd-mockup-clip-play {
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.25);
}

.vd-mockup-clip-duration {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
}

.vd-mockup-clips-count {
  letter-spacing: 0.3px;
}

/* === Logos Marquee === */
.vd-logos {
  margin-top: 64px;
  padding: 48px 0;
  border-top: 1px solid var(--vd-stroke);
  border-bottom: 1px solid var(--vd-stroke);
  overflow: hidden;
  position: relative;
}

.vd-logos-label {
  text-align: center;
  margin-bottom: 32px;
  color: var(--vd-text-faint);
}

/* Marquee: container animates, holds two identical .vd-logos-loop */
.vd-logos-container {
  display: flex;
  width: max-content;
  animation: vd-marquee 25s linear infinite;
}

.vd-logos-loop {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-width: 100vw;
  justify-content: space-around;
}

.vd-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: opacity 0.2s;
  flex-shrink: 0;
  padding: 0 32px;
}

.vd-logo-item:hover {
  opacity: 1;
}

.vd-logo-item svg {
  height: 28px;
  width: auto;
}

.vd-logo-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: currentColor;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Fade edges */
.vd-logos-fade-left,
.vd-logos-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.vd-logos-fade-left {
  left: 0;
  background: linear-gradient(90deg, var(--vd-bg), transparent);
}
.vd-logos-fade-right {
  right: 0;
  background: linear-gradient(270deg, var(--vd-bg), transparent);
}

/* === Steps grid === */
.vd-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .vd-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Step cards — animated version */
.vd-step-card {
  background-color: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s;
}

.vd-step-card:hover {
  border-color: var(--vd-primary-border);
  transform: translateY(-3px);
}

.vd-step-visual {
  height: 220px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.01);
  border-bottom: 1px solid var(--vd-stroke);
}

.vd-step-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vd-step-body .vd-h4 {
  margin-top: 14px;
  margin-bottom: 8px;
}

.vd-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--vd-primary);
  background-color: var(--vd-primary-subtle);
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 14px;
}

/* ===== STEP 1: Paste Link Animation ===== */
.vd-s1-browser {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--vd-stroke);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vd-s1-chrome {
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--vd-stroke);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vd-s1-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.vd-s1-url-bar {
  flex: 1;
  margin-left: 8px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  font-size: 12px;
  color: var(--vd-text-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vd-s1-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
}

.vd-s1-input {
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--vd-stroke);
  border-radius: 8px;
  padding: 8px 8px 8px 12px;
  gap: 8px;
}

.vd-s1-link-icon {
  color: var(--vd-text-faint);
  flex-shrink: 0;
}

.vd-s1-link-icon svg {
  width: 14px;
  height: 14px;
}

.vd-s1-typing {
  flex: 1;
  font-size: 12px;
  color: var(--vd-text-muted);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
  white-space: nowrap;
}

.vd-s1-typing span {
  display: inline-block;
  animation: vd-typing 5s steps(28) infinite;
  width: 0;
  overflow: hidden;
}

.vd-s1-cursor {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--vd-primary);
  animation: vd-blink 0.6s infinite;
  vertical-align: middle;
  margin-left: 2px;
}

.vd-s1-btn {
  padding: 6px 14px;
  background: var(--vd-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  animation: vd-btnReact 5s ease infinite;
}

.vd-s1-mouse {
  position: absolute;
  width: 16px;
  height: 20px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  animation: vd-mouseAnim 5s ease infinite;
}

.vd-s1-mouse svg {
  width: 16px;
  height: 20px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* ===== STEP 2: AI Analysis Animation ===== */
.vd-s2-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Video preview being scanned */
.vd-s2-preview {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vd-stroke);
}

.vd-s2-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vd-s2-scan-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--vd-primary);
  box-shadow: 0 0 10px rgba(255,107,0,0.7), 0 0 30px rgba(255,107,0,0.3), 20px 0 40px rgba(255,107,0,0.1);
  animation: vd-scanLine 5s linear infinite;
  z-index: 3;
}

.vd-s2-scan-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(255,107,0,0.08) 0%, transparent 100%);
  animation: vd-scanOverlay 5s linear infinite;
  z-index: 1;
}

/* Track bar with detected segments */
.vd-s2-track {
  width: 100%;
  height: 18px;
  position: relative;
  margin-top: 8px;
  border-radius: 4px;
  overflow: visible;
}

.vd-s2-track-bg {
  position: absolute;
  inset: 6px 0;
  background: var(--vd-stroke);
  border-radius: 3px;
}

.vd-s2-seg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: var(--vd-primary);
  border-radius: 3px;
  opacity: 0;
  animation: vd-markerAppear 5s ease infinite;
}

.vd-s2-seg:nth-child(2) { animation-delay: 0.5s; }
.vd-s2-seg:nth-child(3) { animation-delay: 1.2s; }
.vd-s2-seg:nth-child(4) { animation-delay: 2s; }
.vd-s2-seg:nth-child(5) { animation-delay: 2.8s; }

.vd-s2-seg span {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--vd-primary);
  white-space: nowrap;
}

.vd-s2-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--vd-text);
  border-radius: 1px;
  animation: vd-scanLine 5s linear infinite;
  z-index: 2;
}

.vd-s2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 16px;
}

.vd-s2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vd-primary);
  animation: vd-dotPulse 1.5s ease infinite;
}

/* Detected moment markers */
.vd-s2-marker {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--vd-primary);
  border-radius: 2px;
  z-index: 3;
  opacity: 0;
  animation: vd-markerAppear 6s ease infinite;
}

.vd-s2-marker span {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: #fff;
  background: var(--vd-primary);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  animation: vd-markerAppear 6s ease infinite;
}

.vd-s2-marker:nth-child(2) { animation-delay: 0.5s; }
.vd-s2-marker:nth-child(2) span { animation-delay: 0.5s; }
.vd-s2-marker:nth-child(3) { animation-delay: 1.2s; }
.vd-s2-marker:nth-child(3) span { animation-delay: 1.2s; }
.vd-s2-marker:nth-child(4) { animation-delay: 1.9s; }
.vd-s2-marker:nth-child(4) span { animation-delay: 1.9s; }
.vd-s2-marker:nth-child(5) { animation-delay: 2.5s; }
.vd-s2-marker:nth-child(5) span { animation-delay: 2.5s; }

.vd-s2-found {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--vd-text-muted);
}

/* Scan line glow */
.vd-s2-scan {
  box-shadow: 0 0 8px rgba(255,107,0,0.5), 0 0 20px rgba(255,107,0,0.2);
}

/* ===== STEP 3: Results Animation ===== */
.vd-s3-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  padding-bottom: 8px;
  position: relative;
}

.vd-s3-clip {
  width: 72px;
  aspect-ratio: 9/16;
  border-radius: 10px;
  position: relative;
  overflow: visible;
  border: 1px solid var(--vd-stroke);
  opacity: 0;
  animation: vd-clipAppear 6s ease infinite;
}

.vd-s3-clip:nth-child(1) { background: url('https://images.unsplash.com/photo-1542751371-adc38448a05e?w=200&h=350&fit=crop') center/cover; animation-delay: 0s; }
.vd-s3-clip:nth-child(2) { background: url('https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=200&h=350&fit=crop') center/cover; animation-delay: 0.3s; }
.vd-s3-clip:nth-child(3) { background: url('https://images.unsplash.com/photo-1475721027785-f74eccf877e2?w=200&h=350&fit=crop') center/cover; animation-delay: 0.6s; }

.vd-s3-clip-inner {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.vd-s3-score {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--vd-primary);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
}

.vd-s3-play {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vd-s3-play svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  margin-left: 2px;
}

.vd-s3-caption {
  position: absolute;
  bottom: 8px;
  left: 6px;
  right: 6px;
}

.vd-s3-caption-line {
  height: 2px;
  background: rgba(255,255,255,0.25);
  border-radius: 1px;
  margin-bottom: 3px;
}

.vd-s3-caption-line:last-child {
  width: 55%;
}

/* Floating reactions */
.vd-s3-reactions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.vd-s3-reaction {
  position: absolute;
  font-size: 14px;
  opacity: 0;
  animation: vd-floatUp 3s ease infinite;
}

.vd-s3-r1 { left: 12%; bottom: 25%; animation-delay: 0.3s; }
.vd-s3-r2 { left: 52%; bottom: 20%; animation-delay: 1.6s; }
.vd-s3-r3 { left: 82%; bottom: 22%; animation-delay: 3s; }
.vd-s3-r1 svg, .vd-s3-r2 svg, .vd-s3-r3 svg { width: 16px; height: 16px; fill: var(--vd-primary); }

.vd-s3-r4 { left: 28%; bottom: 28%; animation-delay: 0.9s; }
.vd-s3-r5 { left: 68%; bottom: 18%; animation-delay: 2.3s; }
.vd-s3-r4 svg, .vd-s3-r5 svg { width: 14px; height: 14px; fill: var(--vd-text-muted); }

.vd-s3-r6 { left: 42%; bottom: 22%; animation-delay: 1.2s; }
.vd-s3-r7 { left: 75%; bottom: 26%; animation-delay: 2.8s; }
.vd-s3-r6 svg, .vd-s3-r7 svg { width: 15px; height: 15px; fill: var(--vd-primary); }

/* Stats bar */
.vd-s3-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px;
  font-size: 12px;
  color: var(--vd-text-muted);
}

.vd-s3-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vd-s3-stat-item svg {
  width: 12px;
  height: 12px;
}

.vd-s3-stat-num {
  font-family: 'JetBrains Mono', monospace;
  color: var(--vd-primary);
  font-weight: 700;
}

/* === Feature grids === */
.vd-feat-grid-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.vd-feat-grid-bot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .vd-feat-grid-top {
    grid-template-columns: 1fr 1fr;
  }
  .vd-feat-grid-bot {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.vd-feat-card-illus {
  width: 100%;
  aspect-ratio: 16/10;
  background-color: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Secondary features grid === */
.vd-secondary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .vd-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .vd-secondary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === Editor Feature Blocks === */
.vd-editor-blocks {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.vd-editor-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 768px) {
  .vd-editor-block {
    grid-template-columns: 55% 45%;
  }

  .vd-editor-block.reversed {
    grid-template-columns: 45% 55%;
  }

  .vd-editor-block.reversed .vd-editor-block-text {
    order: 2;
  }

  .vd-editor-block.reversed .vd-editor-block-mockup {
    order: 1;
  }
}

.vd-editor-block-text h2 {
  margin-bottom: 16px;
}

.vd-editor-block-text > p {
  color: var(--vd-text-muted);
  margin-bottom: 28px;
}

.vd-editor-callouts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.vd-editor-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--vd-text-muted);
  line-height: 1.5;
}

.vd-editor-callout-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background-color: var(--vd-primary-subtle);
  flex-shrink: 0;
}

.vd-editor-callout-icon svg {
  width: 14px;
  height: 14px;
  color: var(--vd-primary);
}

.vd-editor-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vd-primary);
  font-size: 15px;
  font-weight: 600;
  transition: gap 0.25s ease;
}

.vd-editor-cta:hover {
  gap: 14px;
}

/* Editor mockup containers */
.vd-editor-screenshot {
  border-radius: var(--vd-radius-card);
  border: 1px solid var(--vd-stroke);
  background-color: var(--vd-card);
  box-shadow: var(--vd-shadow-lg);
  overflow: hidden;
  padding: 16px;
}

/* Timeline mockup */
.vd-mock-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vd-mock-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
}

.vd-mock-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vd-mock-toolbar-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vd-mock-toolbar-btn svg {
  width: 14px;
  height: 14px;
  color: var(--vd-text-faint);
}

.vd-mock-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--vd-text-faint);
}

.vd-mock-ruler {
  display: flex;
  justify-content: space-between;
  padding: 0 60px;
  margin-bottom: 4px;
}

.vd-mock-ruler span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--vd-text-faint);
}

.vd-mock-tracks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
}

.vd-mock-track {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
}

.vd-mock-track-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 50px;
  text-align: right;
  flex-shrink: 0;
}

.vd-mock-track-bar {
  flex: 1;
  height: 100%;
  position: relative;
  border-radius: 8px;
  background-color: var(--vd-card);
  overflow: hidden;
}

.vd-mock-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15%;
  width: 2px;
  background-color: var(--vd-primary);
  z-index: 10;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: vd-playhead 8s linear infinite;
}

/* Face tracking mockup */
/* Face Motion realistic mockup */
.vd-fm-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  min-height: 280px;
}

.vd-fm-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.vd-fm-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--vd-bg);
  border: 1px solid var(--vd-stroke);
  border-radius: 8px;
}

.vd-fm-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 4px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--vd-text-muted);
  white-space: nowrap;
}

.vd-fm-tab.is-active {
  background: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  color: var(--vd-text);
}

.vd-fm-card {
  background: var(--vd-bg);
  border: 1px solid var(--vd-stroke);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vd-fm-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
}

.vd-fm-toggle {
  margin-left: auto;
  width: 32px;
  height: 18px;
  background: var(--vd-primary);
  border-radius: 10px;
  position: relative;
}

.vd-fm-toggle span {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
}

.vd-fm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: 8px;
  font-size: 12px;
  color: var(--vd-text);
}

.vd-fm-count {
  margin-left: auto;
  color: var(--vd-text-muted);
  font-size: 12px;
}

.vd-fm-zoom-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--vd-text-muted);
}

.vd-fm-zoom-val {
  color: var(--vd-text);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

.vd-fm-zoom-buttons {
  display: flex;
  gap: 4px;
}

.vd-fm-zoom-btn {
  flex: 1;
  text-align: center;
  padding: 5px 6px;
  border-radius: 8px;
  font-size: 12px;
  background: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  color: var(--vd-text-muted);
}

.vd-fm-zoom-btn.is-active {
  background: var(--vd-primary);
  border-color: var(--vd-primary);
  color: #fff;
}

.vd-fm-slider {
  position: relative;
  height: 4px;
  background: var(--vd-stroke);
  border-radius: 2px;
  margin-top: 4px;
}

.vd-fm-slider-track {
  width: 40%;
  height: 100%;
  background: var(--vd-primary);
  border-radius: 2px;
}

.vd-fm-slider-dot {
  position: absolute;
  left: 38%;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--vd-primary);
  border-radius: 50%;
  border: 2px solid var(--vd-bg);
}

/* Right: preview with image + tracking frame */
.vd-fm-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--vd-bg);
  border: 1px solid var(--vd-stroke);
}

.vd-fm-preview img {
  width: 100%;
  height: auto;
  display: block;
}

/* Body frame — large dashed rectangle covering most of the image */
.vd-fm-body-frame {
  position: absolute;
  top: 5%;
  left: 8%;
  right: 8%;
  bottom: 5%;
  border: 2px dashed rgba(100,180,255,0.5);
  border-radius: 4px;
  z-index: 2;
}

/* Face frame — smaller rectangle on the face area, red */
.vd-fm-face-frame {
  position: absolute;
  top: 22%;
  left: 24%;
  width: 45%;
  height: 35%;
  border: 2px solid rgba(220,50,50,0.7);
  border-radius: 4px;
  z-index: 3;
}

.vd-fm-face-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(190,50,50,0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
  .vd-fm-layout {
    grid-template-columns: 1fr;
  }
}

/* === Legendas Inteligentes Demo (v2) === */
.vd-editor-screenshot--leg {
  padding: 24px;
  border: 1px solid var(--vd-stroke);
  box-shadow: var(--vd-shadow-lg);
  background: var(--vd-surface);
  border-radius: var(--vd-radius-card);
  overflow: visible;
}

.vd-leg-demo {
  width: 100%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--vd-text);
}

/* Layout: presets left, preview right */
.vd-leg-demo .layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

/* Preview - phone style */
.vd-leg-demo .preview-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vd-leg-demo .preview-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(255,107,0,0.08) 0%, rgba(139,92,246,0.04) 40%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.vd-leg-demo .preview {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 9/16;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.4);
  z-index: 1;
  margin: 0 auto;
}
.vd-leg-demo .preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vd-leg-demo .preview-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  pointer-events: none;
}

.vd-leg-demo .caption-area {
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 16px;
  z-index: 2;
}
.vd-leg-demo .caption {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  transition: all 0.3s;
}
.vd-leg-demo .caption .w {
  transition: color 0.3s, text-decoration 0.3s, font-weight 0.3s, background 0.3s;
  display: inline;
}
.vd-leg-demo .caption .hi {
  transition: all 0.3s;
}

/* Caption styles */
.vd-leg-demo .caption[data-s="simple"] {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;
}
.vd-leg-demo .caption[data-s="simple"] .hi { color: #FF6B00; }

.vd-leg-demo .caption[data-s="impact"] {
  font-family: 'Bebas Neue', cursive;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000;
}
.vd-leg-demo .caption[data-s="impact"] .hi { color: #f27c0d; font-weight: 900; }

.vd-leg-demo .caption[data-s="wave"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 0 #000, 1.5px 0 0 #000;
}
.vd-leg-demo .caption[data-s="wave"] .hi { color: #8B5CF6; }

.vd-leg-demo .caption[data-s="underline"] {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;
}
.vd-leg-demo .caption[data-s="underline"] .hi { color: #22C55E; text-decoration: underline; text-decoration-color: #22C55E; text-underline-offset: 3px; text-decoration-thickness: 2px; }

.vd-leg-demo .caption[data-s="shake"] {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 0 #000, 1.5px 0 0 #000;
}
.vd-leg-demo .caption[data-s="shake"] .hi { color: #EF4444; font-weight: 800; }

.vd-leg-demo .caption[data-s="sleek"] {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
}
.vd-leg-demo .caption[data-s="sleek"] .ci { background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); padding: 8px 18px; border-radius: 16px; display: inline-block; }
.vd-leg-demo .caption[data-s="sleek"] .w { color: rgba(255,255,255,0.5); transition: color 0.3s; }
.vd-leg-demo .caption[data-s="sleek"] .hi { color: #fff; font-weight: 600; }

.vd-leg-demo .caption[data-s="gradient"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
.vd-leg-demo .caption[data-s="gradient"] .ci { background: linear-gradient(135deg, #6366F1, #8B5CF6); padding: 8px 16px; border-radius: 10px; display: inline-block; }
.vd-leg-demo .caption[data-s="gradient"] .w { color: rgba(255,255,255,0.75); transition: color 0.3s, font-weight 0.3s; }
.vd-leg-demo .caption[data-s="gradient"] .hi { color: #fff; font-weight: 800; }

.vd-leg-demo .caption[data-s="tech"] {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: #00FF88;
  text-shadow: 0 0 10px rgba(0,255,136,0.3);
}
.vd-leg-demo .caption[data-s="tech"] .ci { background: rgba(0,0,0,0.9); padding: 8px 14px; border-radius: 4px; display: inline-block; }
.vd-leg-demo .caption[data-s="tech"] .hi { background: #00FF88; color: #000; padding: 1px 4px; border-radius: 2px; }

.vd-leg-demo .caption[data-s="editorial"] {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: 17px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.vd-leg-demo .caption[data-s="editorial"] .hi { color: #F59E0B; }

.vd-leg-demo .caption[data-s="word-spotlight"] {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 17px;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 4px 12px rgba(0,0,0,0.8);
}
.vd-leg-demo .caption[data-s="word-spotlight"] .w { display: none; }
.vd-leg-demo .caption[data-s="word-spotlight"] .hi { display: inline; color: #fff; font-weight: 900; font-size: 22px; }

.vd-leg-demo .caption[data-s="build-up"] {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 0 #000, 1.5px 0 0 #000;
}
.vd-leg-demo .caption[data-s="build-up"] .hi { color: #3B82F6; }

.vd-leg-demo .caption[data-s="karaoke"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
}
.vd-leg-demo .caption[data-s="karaoke"] .ci { background: rgba(0,0,0,0.7); padding: 6px 14px; border-radius: 8px; display: inline-block; }
.vd-leg-demo .caption[data-s="karaoke"] .w { color: rgba(255,255,255,0.6); }
.vd-leg-demo .caption[data-s="karaoke"] .hi { color: #FFFF00 !important; }

@keyframes vd-leg-shake {
  0%, 100% { transform: translateX(0) rotate(0) scale(1.08); }
  25% { transform: translateX(-2px) rotate(-1deg) scale(1.08); }
  50% { transform: translateX(2px) rotate(1deg) scale(1.08); }
  75% { transform: translateX(-1px) rotate(-0.5deg) scale(1.08); }
}

@keyframes vd-leg-bounce {
  0% { transform: scale(0.9) translateY(2px); }
  50% { transform: scale(1.1) translateY(-3px); }
  100% { transform: scale(1.06) translateY(0); }
}

@keyframes vd-leg-wave {
  0% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-3px) rotate(-1deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(3px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* Presets grid */
.vd-leg-demo .presets-wrap {
  max-height: 520px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
}
.vd-leg-demo .presets-wrap::-webkit-scrollbar { width: 4px; }
.vd-leg-demo .presets-wrap::-webkit-scrollbar-track { background: transparent; }
.vd-leg-demo .presets-wrap::-webkit-scrollbar-thumb { background: var(--vd-stroke); border-radius: 4px; }

.vd-leg-demo .presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vd-leg-demo .pcard {
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 10px;
  overflow: hidden;
}
.vd-leg-demo .pcard:hover { transform: translateY(-2px); }
.vd-leg-demo .pcard.on .pcard-box { border-color: var(--vd-primary); box-shadow: 0 0 0 1px var(--vd-primary); }

.vd-leg-demo .pcard-box {
  background: var(--vd-surface);
  border: 1.5px solid var(--vd-stroke);
  border-radius: 10px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  gap: 4px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.vd-leg-demo .pcard-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
}
.vd-leg-demo .pcard-badge.b { background: rgba(120,120,120,0.2); color: #888; }
.vd-leg-demo .pcard-badge.m { background: rgba(120,120,120,0.2); color: #888; }
.vd-leg-demo .pcard-badge.e { background: rgba(139,92,246,0.15); color: #a78bfa; }

.vd-leg-demo .pcard-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--vd-text);
  text-align: center;
  line-height: 1.3;
}
.vd-leg-demo .pcard-name {
  font-size: 13px;
  color: var(--vd-text-muted);
  margin-top: 8px;
  text-align: left;
  font-weight: 400;
}

/* --- Individual preset card previews --- */

/* 1. Simple */
.vd-leg-demo .pt-simple .pcard-text { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000; }

/* 2. VDClip Impact */
.vd-leg-demo .pt-impact .pcard-text { font-family: 'Bebas Neue', cursive; font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: 0.5px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000; }
.vd-leg-demo .pt-impact .pcard-text .hl { color: #f27c0d; }

/* 3. Wave */
.vd-leg-demo .pt-wave .pcard-text { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 0 #000, 1.5px 0 0 #000; }
.vd-leg-demo .pt-wave .pcard-text .hl { color: #8B5CF6; }

/* 4. Underline */
.vd-leg-demo .pt-underline .pcard-text { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000; }
.vd-leg-demo .pt-underline .pcard-text .hl { color: #22C55E; text-decoration: underline; text-decoration-color: #22C55E; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* 5. Shake */
.vd-leg-demo .pt-shake .pcard-text { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 13px; text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 0 #000, 1.5px 0 0 #000; }
.vd-leg-demo .pt-shake .pcard-text .hl { color: #EF4444; }

/* 6. Sleek */
.vd-leg-demo .pt-sleek .pcard-text { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px; }
.vd-leg-demo .pt-sleek .pcard-box .pcard-text { background: rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 16px; }

/* 7. Gradient Box */
.vd-leg-demo .pt-gradient .pcard-text { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; }
.vd-leg-demo .pt-gradient .pcard-text span { background: linear-gradient(135deg, #6366F1, #8B5CF6); padding: 3px 8px; border-radius: 4px; }

/* 8. Tech */
.vd-leg-demo .pt-tech .pcard-text { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; color: #00FF88; }
.vd-leg-demo .pt-tech .pcard-text .hl { background: #00FF88; color: #000; padding: 1px 4px; border-radius: 2px; }

/* 9. Editorial */
.vd-leg-demo .pt-editorial .pcard-text { font-family: 'Playfair Display', serif; font-weight: 600; font-style: italic; font-size: 14px; }
.vd-leg-demo .pt-editorial .pcard-text .hl { color: #F59E0B; }

/* 10. Word Spotlight */
.vd-leg-demo .pt-word-spotlight .pcard-text { font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 13px; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 4px 12px rgba(0,0,0,0.8); }

/* 11. Build Up */

.vd-leg-demo .pt-build-up .pcard-text { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 0 #000, 1.5px 0 0 #000; }
.vd-leg-demo .pt-build-up .pcard-text .hl { color: #3B82F6; }

/* 12. Karaoke Classic */

.vd-leg-demo .pt-karaoke .pcard-text { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; background: rgba(0,0,0,0.7); padding: 3px 8px; border-radius: 4px; }
.vd-leg-demo .pt-karaoke .pcard-text .hl { color: #FFFF00; }
.vd-leg-demo .pt-karaoke .pcard-text .dim { color: rgba(255,255,255,0.6); }

@media (max-width: 600px) {
  .vd-leg-demo .layout { grid-template-columns: 1fr; }
  .vd-leg-demo .preview { max-width: 220px; }
  .vd-leg-demo .presets-wrap { max-height: 360px; }
}

/* Light mode — keep preset cards with dark look */
html.light .vd-leg-demo .pcard-box {
  background: #1a1a2e;
  border-color: rgba(255,255,255,0.06);
}

html.light .vd-leg-demo .pcard-text {
  color: #ededef;
}

html.light .vd-leg-demo .pcard-name {
  color: #b0b0ba;
}

html.light .vd-leg-demo .pcard.on .pcard-box {
  border-color: var(--vd-primary);
  box-shadow: 0 0 0 1px var(--vd-primary);
}

html.light .vd-leg-demo .presets-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
}

html.light .vd-leg-demo .preview {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1), 0 20px 60px rgba(0,0,0,0.2);
}

.vd-mock-format-btn.is-active {
  border-color: var(--vd-primary-border);
  background-color: var(--vd-primary-subtle);
  color: var(--vd-primary);
}

/* Legacy split (keep for backward compat) */
.vd-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 768px) {
  .vd-split {
    grid-template-columns: 1fr 1fr;
  }
}

.vd-split-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.vd-split-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.vd-split-feature svg {
  width: 20px;
  height: 20px;
  color: var(--vd-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.vd-split-feature span {
  font-size: 15px;
  color: var(--vd-text-muted);
  line-height: 1.5;
}

/* === Niche Tabs + Panels (v5) === */
.vd-niche-tabs-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.vd-niche-tab {
  padding: 12px 24px;
  border-radius: 100px;
  border: 1px solid var(--vd-stroke);
  background: transparent;
  color: var(--vd-text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
  outline: none;
}

.vd-niche-tab:hover {
  color: var(--vd-text);
  border-color: var(--vd-text-faint);
}

html.light .vd-niche-tab:hover {
  border-color: var(--vd-text-faint);
}

.vd-niche-tab.active {
  background: var(--vd-primary);
  border-color: var(--vd-primary);
  color: #fff;
}

/* Panels wrapper */
.vd-niche-panels-wrapper {
  position: relative;
  border-radius: var(--vd-radius-card);
  background: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  overflow: hidden;
}

.vd-niche-panel {
  display: none;
  animation: vd-niche-fadeSlide 0.35s ease;
}

.vd-niche-panel.active {
  display: block;
}

@keyframes vd-niche-fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.vd-niche-panel-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 400px;
}

/* Phone side */
.vd-niche-panel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  position: relative;
  border-right: 1px solid var(--vd-stroke);
}

html.light .vd-niche-panel-visual {
  border-right-color: var(--vd-stroke);
}

.vd-niche-phone-wrap {
  position: relative;
}

.vd-niche-phone-frame {
  width: 190px;
  height: 380px;
  border-radius: 32px;
  overflow: hidden;
  background: #000;
  position: relative;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.5);
}

.vd-niche-phone-screen {
  position: absolute;
  inset: 4px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--vd-surface);
}

.vd-niche-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vd-niche-phone-island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 12px;
  background: #000;
  border-radius: 100px;
  z-index: 3;
}

.vd-niche-phone-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.03) 45%, transparent 50%);
  z-index: 2;
  pointer-events: none;
}

/* Video player controls */
.vd-niche-phone-player {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.vd-niche-phone-player-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}

.vd-niche-phone-player-bar span {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 2px;
  animation: vd-playerProgress 8s linear infinite;
}

.vd-niche-phone-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vd-niche-phone-player-btn svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

.vd-niche-phone-player-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Text side */
.vd-niche-panel-text {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vd-niche-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vd-primary);
  margin-bottom: 12px;
}

.vd-niche-panel-text h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  color: var(--vd-text);
}

.vd-niche-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--vd-text-muted);
  margin-bottom: 28px;
}

/* Stats row */
.vd-niche-panel-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
}

.vd-niche-panel-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vd-niche-panel-stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--vd-text);
}

.vd-niche-panel-stat-label {
  font-size: 12px;
  color: var(--vd-text-muted);
}

/* Features */
.vd-niche-panel-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.vd-niche-panel-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--vd-text);
}

.vd-niche-feat-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vd-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vd-niche-feat-check svg {
  width: 10px;
  height: 10px;
  stroke: var(--vd-primary);
  fill: none;
  stroke-width: 3;
}

.vd-niche-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vd-primary);
  text-decoration: none;
  transition: gap 0.2s;
}

.vd-niche-cta-link:hover {
  gap: 12px;
}

/* Niche responsive */
@media (max-width: 768px) {
  .vd-niche-panel-inner {
    grid-template-columns: 1fr;
  }

  .vd-niche-panel-visual {
    padding: 32px;
    border-right: none;
    border-bottom: 1px solid var(--vd-stroke);
  }

  html.light .vd-niche-panel-visual {
    border-right: none;
    border-bottom-color: var(--vd-stroke);
  }

  .vd-niche-panel-text {
    padding: 28px;
  }

  .vd-niche-phone-frame {
    width: 140px;
    height: 250px;
  }

  .vd-niche-panel-stats {
    gap: 16px;
  }
}

/* === Comparison Card === */
.vd-compare-card {
  background-color: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}

.vd-compare-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--vd-stroke);
}

.vd-compare-header-cell {
  padding: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--vd-text-muted);
}

.vd-compare-header-cell:first-child {
  text-align: left;
}

.vd-compare-header-cell.is-highlight {
  background-color: var(--vd-primary-subtle);
  color: var(--vd-primary);
  border-bottom: 2px solid var(--vd-primary);
}

.vd-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--vd-stroke);
}

.vd-compare-row:last-child {
  border-bottom: none;
}

.vd-compare-cell {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--vd-text-muted);
}

.vd-compare-cell:not(:first-child) {
  justify-content: center;
}

.vd-compare-cell.is-highlight {
  background-color: var(--vd-primary-subtle);
}

.vd-compare-cell svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* === Stats === */
.vd-stats-section {
  /* Floating numbers on page background, no card */
}

.vd-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 24px;
}

@media (min-width: 768px) {
  .vd-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.vd-stat {
  text-align: center;
  padding: 0 16px;
  position: relative;
}

@media (min-width: 768px) {
  .vd-stat + .vd-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 64px;
    background-color: var(--vd-stroke);
  }
}

.vd-stat-num {
  display: block;
  color: var(--vd-text);
}

.vd-stat-desc {
  margin-top: 8px;
  color: var(--vd-text-muted);
}

/* === Testimonials (Screenshot Style) === */
.vd-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .vd-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Social comment style */
.vd-comment {
  background-color: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
  padding: 28px;
}

.vd-comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.vd-comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.vd-comment-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--vd-text);
}

.vd-comment-handle {
  display: block;
  font-size: 13px;
  color: var(--vd-text-faint);
}

.vd-comment-text {
  font-size: 15px;
  font-weight: 400;
  color: var(--vd-text);
  line-height: 1.6;
  margin-bottom: 14px;
}

.vd-comment-reply {
  font-size: 13px;
  color: var(--vd-text-faint);
}

/* Legacy testimonial styles (kept for compatibility) */
.vd-testimonial-screenshot {
  background-color: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.vd-testimonial-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.vd-testimonial-stars {
  display: flex;
  gap: 2px;
}

.vd-testimonial-stars svg {
  width: 14px;
  height: 14px;
  color: var(--vd-primary);
}

.vd-testimonial-quote {
  font-size: 16px;
  color: var(--vd-text);
  line-height: 1.6;
  margin-bottom: 24px;
  font-weight: 500;
  flex: 1;
}

.vd-testimonial-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
}

.vd-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vd-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--vd-stroke);
  flex-shrink: 0;
  object-fit: cover;
}

img.vd-testimonial-avatar {
  display: block;
}

.vd-testimonial-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--vd-text);
}

.vd-testimonial-role {
  font-size: 13px;
  color: var(--vd-text-muted);
  margin-top: 2px;
}

.vd-testimonial-metric {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background-color: var(--vd-primary-subtle);
  border: 1px solid var(--vd-primary-border);
  border-radius: var(--vd-radius-pill);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-primary);
  white-space: nowrap;
}

.vd-testimonial-metric-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--vd-text);
  letter-spacing: -0.2px;
  margin-bottom: 16px;
  padding: 8px 14px;
  background-color: var(--vd-primary-subtle);
  border-radius: var(--vd-radius-btn);
  display: inline-block;
}

/* === Pricing === */
.vd-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .vd-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .vd-pricing-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vd-pricing-grid-2 {
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .vd-pricing-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .vd-pricing-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3-column pricing grid (Lite, Premium, Ultimate) */
.vd-pricing-grid-3 {
  max-width: 1080px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .vd-pricing-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .vd-pricing-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4-column pricing grid (Lite, Premium, Ultimate, Enterprise) */
.vd-pricing-grid-4 {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .vd-pricing-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .vd-pricing-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Enterprise card — purple theme */
.vd-pricing-card-enterprise {
  border-color: rgba(139,92,246,0.2);
}

.vd-pricing-card-enterprise .vd-pricing-price-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.vd-pricing-card-enterprise .vd-pricing-feature-check {
  background: rgba(139,92,246,0.1);
  color: #8b5cf6;
}

/* Enterprise highlights (fills empty space in card-top) */
.vd-pricing-enterprise-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--vd-space-tight);
  padding: var(--vd-space-comp);
  background: rgba(139,92,246,0.04);
  border: 1px solid rgba(139,92,246,0.1);
  border-radius: var(--vd-radius-btn);
  margin-top: var(--vd-space-comp);
}

.vd-pricing-enterprise-highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--vd-space-inner);
}

.vd-pricing-enterprise-highlight svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.vd-pricing-eh-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
  line-height: 1.3;
}

.vd-pricing-eh-desc {
  display: block;
  font-size: 12px;
  color: var(--vd-text-muted);
  line-height: 1.4;
}

.vd-btn-enterprise {
  background: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
}

.vd-btn-enterprise:hover {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}

/* Free plan — compact horizontal card */
.vd-pricing-free {
  display: flex;
  align-items: center;
  gap: var(--vd-space-card);
  padding: var(--vd-space-card) var(--vd-space-container);
  margin-top: var(--vd-space-card);
  background: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

html.light .vd-pricing-free {
  box-shadow: var(--vd-shadow-sm);
}

.vd-pricing-free-info {
  display: flex;
  align-items: center;
  gap: var(--vd-space-card);
  flex-shrink: 0;
}

.vd-pricing-free-features {
  display: flex;
  align-items: center;
  gap: var(--vd-space-comp);
  flex: 1;
  flex-wrap: wrap;
}

.vd-pricing-free-features span {
  display: inline-flex;
  align-items: center;
  gap: var(--vd-space-micro);
  font-size: 13px;
  color: var(--vd-text-muted);
  white-space: nowrap;
}

.vd-pricing-free .vd-btn {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .vd-pricing-free {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vd-space-comp);
  }

  .vd-pricing-free-info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vd-space-inner);
  }

  .vd-pricing-free-features {
    gap: var(--vd-space-inner);
  }

  .vd-pricing-free .vd-btn {
    text-align: center;
    justify-content: center;
  }
}

/* Enterprise horizontal card (removed — now uses .vd-pricing-card-enterprise in grid) */

/* --- Pricing Card (dashboard-style) --- */
.vd-pricing-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--vd-radius-card);
  border: 1px solid var(--vd-stroke);
  background: var(--vd-card);
  position: relative;
  transition: box-shadow 0.2s;
  padding: 0;
}

html.light .vd-pricing-card {
  box-shadow: var(--vd-shadow-sm);
}

.vd-pricing-card.is-featured {
  border-color: var(--vd-primary);
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--vd-primary-subtle);
}

/* Popular badge — floating pill */
.vd-pricing-badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vd-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--vd-radius-pill);
  white-space: nowrap;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Card top section (header + price + credits + CTA) */
.vd-pricing-card-top {
  padding: var(--vd-space-card-inner) var(--vd-space-card);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.vd-pricing-card-top .vd-pricing-cta {
  margin-top: auto;
  padding-top: 20px;
}

@media (min-width: 768px) {
  .vd-pricing-card-top {
    padding: var(--vd-space-card);
  }
}

/* Plan header */
.vd-pricing-plan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vd-space-comp);
}

.vd-pricing-plan-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--vd-radius-input);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vd-pricing-plan-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: var(--vd-space-micro);
}

.vd-pricing-plan-desc {
  font-size: 13px;
  color: var(--vd-text-muted);
  line-height: 1.5;
}

/* Price block */
.vd-pricing-price {
  margin-top: 20px;
}

.vd-pricing-original-price {
  display: flex;
  align-items: center;
  gap: var(--vd-space-inner);
  margin-bottom: 4px;
}

.vd-pricing-original-price-value {
  font-size: 14px;
  color: var(--vd-text-muted);
  text-decoration: line-through;
}

.vd-pricing-discount {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  padding: 2px 6px;
  border-radius: 6px;
}

html.light .vd-pricing-discount {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
}

.vd-pricing-current-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}

.vd-pricing-price-value {
  color: var(--vd-text);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1;
}

.vd-pricing-price-period {
  color: var(--vd-text-muted);
  font-size: 14px;
}

.vd-pricing-billed {
  font-size: 12px;
  color: var(--vd-text-muted);
  margin-top: 6px;
}

/* Credits box */
.vd-pricing-credits-box {
  margin-top: 20px;
  padding: 14px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-btn);
}

.vd-pricing-credits-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.vd-pricing-credits-label {
  font-weight: 500;
  color: var(--vd-text);
}

.vd-pricing-credits-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--vd-primary);
  background: var(--vd-primary-subtle);
  padding: 2px 8px;
  border-radius: 6px;
}

.vd-pricing-credits-detail {
  display: flex;
  align-items: center;
  gap: var(--vd-space-inner);
  margin-top: 10px;
}

.vd-pricing-credits-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--vd-radius-btn);
  background: rgba(245, 158, 11, 0.1);
  flex-shrink: 0;
}

.vd-pricing-credits-icon svg {
  width: 16px;
  height: 16px;
  color: #f59e0b;
  fill: #f59e0b;
}

.vd-pricing-credits-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--vd-text);
  line-height: 1.2;
}

.vd-pricing-credits-period {
  font-size: 11px;
  color: var(--vd-text-muted);
}

/* Pack slider in Ultimate card */
.vd-pricing-packs {
  margin-top: 20px;
  padding: 14px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-btn);
}

.vd-pricing-packs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.vd-pricing-packs-label {
  font-weight: 500;
  color: var(--vd-text);
}

.vd-pricing-packs-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--vd-primary);
  background: var(--vd-primary-subtle);
  padding: 2px 8px;
  border-radius: 6px;
}

.vd-pricing-packs-range {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--vd-text-muted);
}

/* CTA button */
.vd-pricing-cta {
  margin-top: 20px;
}

.vd-pricing-cta .vd-btn {
  width: 100%;
}

/* Separator between top and bottom */
.vd-pricing-separator {
  width: 100%;
  height: 1px;
  background: var(--vd-stroke);
}

/* Card bottom section (features) */
.vd-pricing-card-bottom {
  padding: var(--vd-space-card-inner) var(--vd-space-card);
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .vd-pricing-card-bottom {
    padding: var(--vd-space-card);
  }
}

/* "INCLUI" label */
.vd-pricing-features-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vd-text-muted);
}

/* Features list */
.vd-pricing-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--vd-space-comp);
  flex: 1;
}

.vd-pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--vd-text);
  line-height: 1.5;
}

.vd-pricing-feature.is-muted {
  color: var(--vd-text-muted);
}

/* Green circle with check */
.vd-pricing-feature-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.1);
  flex-shrink: 0;
}

.vd-pricing-feature-check svg {
  width: 12px;
  height: 12px;
  color: #34d399;
}

html.light .vd-pricing-feature-check {
  background: rgba(5, 150, 105, 0.1);
}

html.light .vd-pricing-feature-check svg {
  color: #059669;
}

/* Amber circle with clock (coming soon) */
.vd-pricing-feature-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.1);
  flex-shrink: 0;
}

.vd-pricing-feature-soon svg {
  width: 12px;
  height: 12px;
  color: #f59e0b;
}

/* Extra features separator (Ultimate "TUDO DO PREMIUM") */
.vd-pricing-extra-separator {
  width: 100%;
  height: 1px;
  background: var(--vd-stroke);
  margin: var(--vd-space-comp) 0;
}

.vd-pricing-note {
  text-align: center;
  margin-top: 24px;
}

/* === CTA Section === */
.vd-cta-section {
  text-align: center;
  position: relative;
  background-color: var(--vd-surface);
  padding: var(--vd-space-section) 0;
}

.vd-cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(255,107,0,0.1) 0%, rgba(255,107,0,0.03) 40%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.vd-cta-content {
  position: relative;
  z-index: 1;
}

.vd-cta-content p {
  max-width: 420px;
  margin: 12px auto 0;
  color: var(--vd-text-muted);
}

.vd-cta-input {
  max-width: 480px;
  margin: 24px auto 0;
}

/* === FAQ Container === */
.vd-faq-container {
  max-width: 720px;
  margin: 0 auto;
}

/* === Footer === */
.vd-footer {
  border-top: 1px solid var(--vd-stroke);
  padding: 48px 0 32px;
}

.vd-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .vd-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  }
}

.vd-footer-logo svg {
  height: 28px;
  width: auto;
}

.vd-footer-tagline {
  font-size: 14px;
  color: var(--vd-text-muted);
  margin-top: 12px;
  max-width: 280px;
  line-height: 1.5;
}

.vd-footer-col-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
  margin-bottom: 16px;
}

.vd-footer-link {
  display: block;
  font-size: 14px;
  color: var(--vd-text-muted);
  padding: 4px 0;
  transition: color 0.2s;
}

.vd-footer-link:hover {
  color: var(--vd-text);
}

.vd-footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.vd-footer-social a {
  color: var(--vd-text-faint);
  transition: color 0.2s;
}

.vd-footer-social a:hover {
  color: var(--vd-text);
}

.vd-footer-social svg {
  width: 20px;
  height: 20px;
}

.vd-footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--vd-stroke);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.vd-footer-copyright {
  font-size: 13px;
  color: var(--vd-text-faint);
}

/* Language Switcher (Polylang-compatible) */
.vd-lang-switcher {
  position: relative;
}

.vd-lang-current {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--vd-text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.vd-lang-current:hover {
  border-color: var(--vd-primary);
  color: var(--vd-text);
}

.vd-lang-current svg:last-child {
  transition: transform 0.2s;
}

.vd-lang-switcher.is-open .vd-lang-current svg:last-child {
  transform: rotate(180deg);
}

.vd-lang-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: 8px;
  padding: 4px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 4px;
  transition: opacity 0.2s, visibility 0.2s, translate 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 50;
}

.vd-lang-switcher.is-open .vd-lang-dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.vd-lang-dropdown .lang-item a {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--vd-text-muted);
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.vd-lang-dropdown .lang-item a:hover {
  background: var(--vd-primary-subtle);
  color: var(--vd-text);
}

.vd-lang-dropdown .current-lang-item a {
  color: var(--vd-primary);
  font-weight: 600;
}

/* === Video Showcase Carousel === */
.vd-showcase {
  overflow: hidden;
}

.vd-showcase-categories {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.vd-showcase-cat {
  padding: 8px 16px;
  border-radius: var(--vd-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--vd-text-muted);
  border: 1px solid var(--vd-stroke);
  background-color: var(--vd-card);
}

.vd-showcase-marquee {
  display: flex;
  width: max-content;
  animation: vd-marquee 40s linear infinite;
}

.vd-showcase-marquee:hover {
  animation-play-state: running;
}

.vd-showcase-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  padding: 0 8px;
}

.vd-showcase-phone {
  width: 180px;
  flex-shrink: 0;
}

.vd-showcase-phone-frame {
  width: 100%;
  aspect-ratio: 9/16;
  background-color: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.vd-showcase-phone-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vd-showcase-phone-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vd-showcase-phone-bg svg {
  width: 32px;
  height: 32px;
  color: var(--vd-text-faint);
  opacity: 0.25;
}

.vd-showcase-phone-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.vd-showcase-phone-play svg {
  width: 16px;
  height: 16px;
  color: #fff;
  margin-left: 2px;
}

.vd-showcase-phone:hover .vd-showcase-phone-play {
  opacity: 1;
}

.vd-showcase-phone-stats {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.vd-showcase-phone-stats svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

.vd-showcase-phone-caption {
  position: relative;
  z-index: 2;
  padding: 12px 14px 20px;
  text-align: center;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
}

.vd-showcase-phone-caption span {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.vd-showcase-phone-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}

.vd-showcase-phone-meta span {
  font-size: 12px;
  color: var(--vd-text-muted);
}

.vd-showcase-phone-meta svg {
  width: 14px;
  height: 14px;
  color: var(--vd-text-faint);
}

/* === Bento Grid (Funcionalidades Principais) === */
.vd-bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .vd-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vd-bento-card {
  background-color: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
  position: relative;
  overflow: hidden;
}

/* Top glow line */
.vd-bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,107,0,0.2), transparent);
  z-index: 1;
}

.vd-bento-card-hero {
  grid-column: 1 / -1;
}

.vd-bento-card-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
}

@media (min-width: 768px) {
  .vd-bento-card-inner {
    flex-direction: row;
    align-items: center;
  }
}

.vd-bento-hero-text {
  flex: 1;
  min-width: 0;
}

.vd-bento-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vd-primary);
  font-size: 15px;
  font-weight: 600;
  margin-top: 20px;
  transition: gap 0.25s ease;
}

.vd-bento-hero-cta:hover {
  gap: 14px;
}

.vd-bento-hero-mockup {
  flex: 1;
  min-width: 0;
  max-width: 340px;
}

@media (max-width: 767px) {
  .vd-bento-hero-mockup {
    max-width: 100%;
  }
}

/* Clips flow: source video → generated clips */
.vd-clips-flow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vd-clips-source {
  flex-shrink: 0;
  text-align: center;
}

.vd-clips-source-frame {
  width: 120px;
  height: 72px;
  border-radius: 8px;
  border: 1px solid var(--vd-stroke);
  overflow: hidden;
  position: relative;
}

.vd-clips-source-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--vd-primary);
  box-shadow: 0 0 6px rgba(255,107,0,0.5);
  animation: vd-scanLine 4s linear infinite;
  z-index: 1;
}

.vd-clips-source-label {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--vd-text-faint);
  margin-top: 4px;
  display: block;
}

.vd-clips-flow-arrow {
  flex-shrink: 0;
  animation: vd-flowPulse 2s ease infinite;
}

.vd-clips-output {
  display: flex;
  gap: 6px;
  flex: 1;
}

/* Bento hero vertical clip cards */

.vd-bento-hero-clip {
  flex: 1;
  aspect-ratio: 9/16;
  border-radius: 10px;
  border: 1px solid var(--vd-stroke);
  background-color: var(--vd-surface);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  animation: vd-clipSlideIn 0.6s ease both;
}

.vd-bento-hero-clip:nth-child(1) { animation-delay: 0.2s; }
.vd-bento-hero-clip:nth-child(2) { animation-delay: 0.5s; }
.vd-bento-hero-clip:nth-child(3) { animation-delay: 0.8s; }

/* Float + glow on all clips with stagger */
.vd-bento-hero-clip:nth-child(1) {
  animation: vd-clipSlideIn 0.6s ease 0.2s both, vd-clipFloat 3s ease-in-out 1.2s infinite;
}
.vd-bento-hero-clip:nth-child(2) {
  animation: vd-clipSlideIn 0.6s ease 0.5s both, vd-clipFloat 3.5s ease-in-out 1.8s infinite;
}
.vd-bento-hero-clip:nth-child(3) {
  animation: vd-clipSlideIn 0.6s ease 0.8s both, vd-clipFloat 4s ease-in-out 2.4s infinite;
}

.vd-bento-hero-clip:hover {
  border-color: var(--vd-primary-border);
  transform: translateY(-3px);
  box-shadow: var(--vd-shadow-sm);
}

.vd-bento-hero-clip-bg {
  position: absolute;
  inset: 0;
}

.vd-bento-hero-clip-score {
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: var(--vd-primary);
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1.3;
}

.vd-bento-hero-clip-play {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.25);
  z-index: 1;
}

.vd-bento-hero-clip-dur {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
}

/* --- Reframe Demo Animation --- */
.vd-reframe-demo {
  margin-top: 16px;
  position: relative;
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: 10px;
  overflow: hidden;
  min-height: 140px;
}

.vd-reframe-slide {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  animation: vd-reframeFadeIn 0.5s ease;
}

.vd-reframe-slide.is-active {
  display: flex;
}

@keyframes vd-reframeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vd-reframe-label {
  font-size: 11px;
  color: var(--vd-text-faint);
  margin-top: 6px;
  display: block;
}

.vd-reframe-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 0 10px;
}

.vd-reframe-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vd-stroke);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.vd-reframe-dot.is-active {
  background: var(--vd-primary);
  transform: scale(1.3);
}

.vd-reframe-source, .vd-reframe-result { text-align: center; }

.vd-reframe-monitor {
  width: 140px;
  background: #0a0a0a;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.vd-reframe-chrome {
  padding: 4px 8px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 3px;
}

.vd-reframe-video {
  aspect-ratio: 16/9;
  position: relative;
}

.vd-reframe-overlay-l, .vd-reframe-overlay-r {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
}

.vd-reframe-overlay-l { left: 0; width: 32%; }
.vd-reframe-overlay-r { right: 0; width: 32%; }

.vd-reframe-crop {
  position: absolute;
  top: 2px; bottom: 2px;
  left: 32%; right: 32%;
  border: 1.5px dashed var(--vd-primary);
  border-radius: 2px;
}

.vd-reframe-scanline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,107,0,0.6);
  box-shadow: 0 0 6px rgba(255,107,0,0.4);
  animation: vd-reframeScan 4s ease-in-out infinite;
}

.vd-reframe-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.vd-reframe-result { position: relative; }

.vd-reframe-phone-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 60px; height: 90px;
  background: radial-gradient(ellipse, rgba(255,107,0,0.12), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  animation: vd-reframeGlow 4s ease-in-out infinite;
}

.vd-reframe-phone {
  width: 52px; height: 92px;
  background: #0a0a0a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  position: relative;
  animation: vd-reframePhoneAppear 4s ease-in-out infinite;
}

.vd-reframe-phone-border {
  position: absolute;
  inset: 0;
  border: 2px solid var(--vd-primary);
  border-radius: 12px;
}

.vd-bento-card-sm {
  padding: 32px;
}

/* Bento clips app mockup */
.vd-bento-clips-app {
  background-color: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: 10px;
  overflow: hidden;
}

.vd-bento-clips-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vd-stroke);
}

.vd-bento-clips-dots {
  display: flex;
  gap: 5px;
}

.vd-bento-clips-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.vd-bento-clips-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vd-bento-clip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--vd-card);
  border: 1px solid var(--vd-stroke);
}

.vd-bento-clip-thumb {
  width: 36px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vd-bento-clip-thumb svg {
  width: 14px;
  height: 14px;
}

.vd-bento-clip-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vd-bento-clip-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--vd-primary);
  background-color: var(--vd-primary-subtle);
  border: 1px solid var(--vd-primary-border);
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

.vd-bento-clips-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--vd-stroke);
  text-align: center;
}

/* Bento small card visuals */
.vd-bento-mini-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  padding: 12px;
  background-color: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: 8px;
}

.vd-bento-mini-track {
  height: 8px;
  border-radius: 4px;
}

.vd-bento-mini-face {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 12px;
  background-color: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: 8px;
  justify-content: center;
}

.vd-bento-face-circle {
  width: 48px;
  height: 48px;
  border: 2px dashed var(--vd-primary);
  border-radius: 50%;
  opacity: 0.5;
  position: relative;
}

.vd-bento-face-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--vd-primary);
}

/* === Secondary Feature Cards (Micro-visuals) === */
.vd-sec-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.vd-sec-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,107,0,0.15), transparent);
}

.vd-sec-visual {
  height: 136px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  flex-shrink: 0;
  overflow: hidden;
  padding: 12px;
}

/* =============================================
   BRAND KIT MOCKUP
   ============================================= */
.vd-mock-brand {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 100%;
  align-items: stretch;
}

.vd-mock-brand-phone {
  width: 62px;
  min-width: 62px;
  border-radius: 8px;
  border: 1.5px solid var(--vd-stroke);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(255,107,0,0.08) 0%, rgba(255,107,0,0.02) 100%);
}

.vd-mock-brand-thumb {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,107,0,0.06) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px;
}

.vd-mock-brand-logo-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--vd-primary);
  background: rgba(255,107,0,0.12);
  border: 1px solid rgba(255,107,0,0.2);
  border-radius: 3px;
  padding: 1px 4px;
  align-self: flex-start;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

.vd-mock-brand-subscribe {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--vd-primary);
  border-radius: 3px;
  padding: 2px 0;
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

.vd-mock-brand-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

.vd-mock-brand-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--vd-stroke);
  color: var(--vd-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.vd-mock-brand-row.is-active {
  background: var(--vd-primary-subtle);
  border-color: var(--vd-primary-border);
  color: var(--vd-primary);
}

.vd-mock-brand-row svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.vd-mock-brand-row.is-active svg {
  opacity: 1;
}

/* =============================================
   AI VIRALITY SCORE MOCKUP
   ============================================= */
.vd-mock-score {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.vd-mock-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--vd-stroke);
}

.vd-mock-score-thumb {
  width: 28px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--vd-stroke);
  flex-shrink: 0;
}

.vd-mock-score-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.vd-mock-score-title-line {
  height: 4px;
  width: 75%;
  background: var(--vd-text-faint);
  border-radius: 2px;
  opacity: 0.5;
}

.vd-mock-score-sub-line {
  height: 3px;
  width: 50%;
  background: var(--vd-text-faint);
  border-radius: 2px;
  opacity: 0.25;
}

.vd-mock-score-badge {
  font-size: 13px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.3;
}

.vd-mock-score-badge.is-top {
  background: rgba(255,107,0,0.15);
  color: var(--vd-primary);
  border: 1px solid rgba(255,107,0,0.25);
}

.vd-mock-score-badge.is-mid {
  background: rgba(255,255,255,0.04);
  color: var(--vd-text-muted);
  border: 1px solid var(--vd-stroke);
}

.vd-mock-score-badge.is-low {
  background: rgba(255,255,255,0.02);
  color: var(--vd-text-faint);
  border: 1px solid var(--vd-stroke);
}

/* =============================================
   AI SWEAR REMOVAL MOCKUP
   ============================================= */
.vd-mock-swear {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.vd-mock-swear-wave {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
  position: relative;
}

.vd-mock-swear-bar {
  width: 8px;
  background: var(--vd-primary);
  border-radius: 2px;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.vd-mock-swear-bar.is-censored {
  background: #dc2626;
  opacity: 0.4;
}

.vd-mock-swear-bleep {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(calc(-50% - 4px));
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: #dc2626;
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.25);
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.vd-mock-swear-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vd-primary);
  opacity: 0.8;
  line-height: 1;
}

.vd-mock-swear-badge svg {
  stroke: var(--vd-primary);
}

/* =============================================
   AI VIRAL DESCRIPTION MOCKUP
   ============================================= */
.vd-mock-desc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

.vd-mock-desc-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vd-mock-desc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.vd-mock-desc-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.vd-mock-desc-text {
  font-size: 12px;
  font-weight: 400;
  color: var(--vd-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.vd-mock-desc-hashtags {
  font-size: 12px;
  font-weight: 500;
  color: var(--vd-primary);
  opacity: 0.7;
  line-height: 1.3;
}

.vd-mock-desc-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--vd-stroke);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 2px;
  line-height: 1.3;
  font-family: inherit;
}

.vd-mock-desc-copy svg {
  opacity: 0.6;
}

/* =============================================
   MULTI-FORMATO MOCKUP
   ============================================= */
.vd-mock-formats {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: center;
}

.vd-mock-fmt-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.vd-mock-fmt-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.vd-mock-fmt-device span {
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-text-faint);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}

.vd-mock-fmt-thumb {
  border-radius: 4px;
  border: 1.5px solid var(--vd-stroke);
  background: linear-gradient(135deg, rgba(255,107,0,0.08) 0%, rgba(255,107,0,0.02) 100%);
  position: relative;
  overflow: hidden;
}

.vd-mock-fmt-thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent rgba(255,255,255,0.15);
}

.vd-mock-fmt-portrait .vd-mock-fmt-thumb {
  width: 42px;
  height: 74px;
}

.vd-mock-fmt-landscape .vd-mock-fmt-thumb {
  width: 80px;
  height: 46px;
}

.vd-mock-fmt-square .vd-mock-fmt-thumb {
  width: 54px;
  height: 54px;
}

/* =============================================
   AGENDAMENTO EM MASSA MOCKUP
   ============================================= */
.vd-mock-sched {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.vd-mock-sched-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.vd-mock-sched-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 4px;
  border: 1px solid var(--vd-stroke);
  background: rgba(255,255,255,0.015);
  min-height: 52px;
}

.vd-mock-sched-cell.is-filled {
  background: var(--vd-primary-subtle);
  border-color: var(--vd-primary-border);
}

.vd-mock-sched-day {
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-text-faint);
  line-height: 1;
}

.vd-mock-sched-cell.is-filled .vd-mock-sched-day {
  color: var(--vd-text-muted);
}

.vd-mock-sched-icon {
  flex-shrink: 0;
}

.vd-mock-sched-time {
  font-size: 12px;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  color: var(--vd-primary);
  line-height: 1;
  opacity: 0.8;
}

.vd-mock-sched-footer {
  font-size: 12px;
  font-weight: 500;
  color: var(--vd-text-muted);
  text-align: center;
  line-height: 1;
}


/* === Animated Editor Demo (Block 1) === */
.vd-editor-screenshot--animated {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
  border-radius: var(--vd-radius-card);
  /* Enable container queries so the editor can scale to fit */
  container-type: inline-size;
}

.editor-demo {
  --ed-natural-w: 700;
  --ed-natural-h: 437.5; /* 700 * 10/16 */
  --ed-scale: 1;
  width: calc(var(--ed-natural-w) * 1px);
  aspect-ratio: 16 / 10;
  background: #141414;
  border-radius: 12px;
  border: 1px solid #2e2e2e;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  color: #f5f5f5;
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: 10px;
  transform-origin: top left;
  transform: scale(var(--ed-scale));
  /* Collapse phantom space left by unscaled element */
  margin-right: calc(var(--ed-natural-w) * (1 - var(--ed-scale)) * -1px);
  margin-bottom: calc(var(--ed-natural-h) * (1 - var(--ed-scale)) * -1px);
}

/* Use container queries to scale the editor proportionally to its parent.
   The editor renders at its natural 700px and CSS transform scales it to
   match the container. Scale = container_width / 700. */
@container (max-width: 349px) {
  .editor-demo { --ed-scale: 0.44; }
}
@container (min-width: 350px) and (max-width: 419px) {
  .editor-demo { --ed-scale: 0.54; }
}
@container (min-width: 420px) and (max-width: 524px) {
  .editor-demo { --ed-scale: 0.65; }
}
@container (min-width: 525px) and (max-width: 629px) {
  .editor-demo { --ed-scale: 0.78; }
}
@container (min-width: 630px) and (max-width: 699px) {
  .editor-demo { --ed-scale: 0.9; }
}
@container (min-width: 700px) {
  .editor-demo { --ed-scale: 1; }
}

/* Toolbar */
.ed-tb { height: 34px; background: #1f1f1f; border-bottom: 1px solid #2e2e2e; display: flex; align-items: center; padding: 0 10px; gap: 8px; flex-shrink: 0; }
.ed-dots { display: flex; gap: 5px; }
.ed-dot { width: 9px; height: 9px; border-radius: 50%; }
.ed-tb-center { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.ed-tg { display: flex; align-items: center; gap: 3px; background: rgba(46,46,46,0.5); border: 1px solid #2e2e2e; border-radius: 8px; padding: 3px; }
.ed-tb-btn { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #7a7a7a; cursor: pointer; }
.ed-tb-btn.act { background: #FF6B00; color: white; border-radius: 8px; }
.ed-sep { width: 1px; height: 16px; background: #2e2e2e; }
.ed-zoom { display: flex; align-items: center; gap: 5px; font-size: 8px; color: #7a7a7a; }
.ed-export { background: #FF6B00; color: white; font-size: 8px; font-weight: 600; padding: 5px 12px; border-radius: 6px; }

/* Body */
.ed-body { display: flex; flex: 1; min-height: 0; }

/* Sidebar icons */
.ed-si { width: 48px; background: #141414; border-right: 1px solid #2e2e2e; display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; flex-shrink: 0; }
.ed-si-item { width: 40px; padding: 5px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 6px; color: #7a7a7a; cursor: pointer; }
.ed-si-item.act { color: #FF6B00; }
.ed-si-item svg { width: 16px; height: 16px; }
.ed-si-item span { font-size: 5px; line-height: 1; text-align: center; }
.ed-si-spacer { flex: 1; }

/* Sidebar panel */
.ed-sp { width: 190px; background: #141414; border-right: 1px solid #2e2e2e; padding: 8px; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.ed-sp-head { display: flex; justify-content: space-between; align-items: center; }
.ed-sp-title { font-size: 11px; font-weight: 200; }
.ed-green { width: 7px; height: 7px; border-radius: 50%; background: #28c840; opacity: 0; }
.ed-tabs { display: flex; gap: 2px; background: #1f1f1f; border-radius: 6px; padding: 2px; }
.ed-tab { padding: 3px 10px; border-radius: 5px; font-size: 7px; color: #7a7a7a; cursor: pointer; }
.ed-tab.act { background: #FF6B00; color: white; }

/* Face Motion card */
.ed-card { background: #1f1f1f; border: 1px solid #2e2e2e; border-radius: 8px; padding: 10px; }
.ed-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ed-card-title { font-size: 9px; font-weight: 400; }
.ed-card-desc { font-size: 6.5px; color: #7a7a7a; margin-top: 2px; line-height: 1.3; }
.ed-toggle { width: 30px; height: 17px; border-radius: 9px; background: #474747; position: relative; cursor: pointer; flex-shrink: 0; margin-top: 2px; }
.ed-toggle.on { background: #FF6B00; }
.ed-toggle-knob { width: 13px; height: 13px; border-radius: 50%; background: #1a1a1a; position: absolute; top: 2px; left: 2px; transition: left 0.3s; }
.ed-toggle.on .ed-toggle-knob { left: 15px; }
.ed-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; opacity: 0; }
.ed-opt-row { display: flex; justify-content: space-between; align-items: center; font-size: 6.5px; color: #7a7a7a; }
.ed-opt-box { background: #2e2e2e; border-radius: 5px; padding: 4px 8px; display: flex; justify-content: space-between; font-size: 6.5px; color: #7a7a7a; }
.ed-zbtn { display: flex; gap: 3px; }
.ed-zbtn div { padding: 3px 8px; border-radius: 5px; font-size: 6.5px; color: #7a7a7a; background: #2e2e2e; }
.ed-zbtn div.act { background: #FF6B00; color: white; }
.ed-slider { width: 100%; height: 3px; background: #2e2e2e; border-radius: 2px; position: relative; margin-top: 2px; }
.ed-slider-fill { height: 100%; background: #FF6B00; border-radius: 2px; width: 30%; }
.ed-slider-thumb { width: 9px; height: 9px; border-radius: 50%; background: #FF6B00; position: absolute; top: -3px; left: 28%; }

/* Viewport */
.ed-vp { flex: 1; background: #0a0a0a; display: flex; align-items: center; justify-content: center; position: relative; min-width: 0; }
.ed-vf { width: 42%; aspect-ratio: 9 / 16; max-height: 88%; background: linear-gradient(180deg, #2a1f15 0%, #1a1510 40%, #151210 100%); border: 2px solid #FF6B00; border-radius: 4px; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.ed-cap { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); text-align: center; font-weight: 900; font-size: 9px; color: white; text-shadow: 0 1px 4px rgba(0,0,0,0.8); z-index: 2; white-space: nowrap; }
.ed-cap .hl { color: #FF6B00; }
.ed-h { position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; z-index: 3; }
.ed-h.tl { top: -4px; left: -4px; }
.ed-h.tr { top: -4px; right: -4px; }
.ed-h.bl { bottom: -4px; left: -4px; }
.ed-h.br { bottom: -4px; right: -4px; }

/* Overlay toolbar above video */
.ed-ovt { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: #1f1f1f; border: 1px solid #2e2e2e; border-radius: 8px; padding: 3px; z-index: 10; }
.ed-ovt-btn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #7a7a7a; cursor: pointer; }
.ed-ovt-btn svg { width: 13px; height: 13px; }

/* Timeline */
.ed-tl { height: 72px; background: #141414; border-top: 1px solid #2e2e2e; display: flex; flex-direction: column; flex-shrink: 0; }
.ed-tl-bar { height: 26px; display: flex; align-items: center; padding: 0 8px; border-bottom: 1px solid #1f1f1f; }
.ed-tl-grp { display: flex; align-items: center; gap: 5px; }
.ed-tl-btn { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #7a7a7a; border-radius: 4px; cursor: pointer; }
.ed-tl-btn svg { width: 14px; height: 14px; }
.ed-tl-btn.face { width: 20px; height: 20px; }
.ed-tl-btn.face svg { width: 16px; height: 16px; }
.ed-1x { font-size: 7px; color: #7a7a7a; border: 1px solid #2e2e2e; padding: 2px 5px; border-radius: 3px; }
.ed-tl-time { font-size: 7px; color: #7a7a7a; font-family: 'JetBrains Mono', monospace; }
.ed-tl-fmt { font-size: 7px; color: #7a7a7a; }
.ed-ruler { height: 12px; background: #1a1a1a; display: flex; align-items: flex-end; padding: 0 48px; position: relative; }
.ed-ruler-m { display: flex; justify-content: space-between; width: 100%; font-size: 5px; color: #595959; }
.ed-tracks { flex: 1; display: flex; flex-direction: column; position: relative; padding-left: 4px; }
.ed-trk { height: 17px; display: flex; align-items: center; padding: 1px 0; }
.ed-trk-cap { flex: 1; height: 100%; border-radius: 3px; background: #FF6B00; display: flex; align-items: center; padding-left: 4px; font-size: 5.5px; font-weight: 600; color: white; }
.ed-trk-vid { flex: 1; height: 100%; border-radius: 3px; background: repeating-linear-gradient(90deg, #2a2520 0px, #2a2520 8px, #251f1a 8px, #251f1a 16px); }
.ed-playhead { position: absolute; top: 0; bottom: 0; left: 60px; width: 2px; background: #FF6B00; z-index: 5; }
.ed-playhead::before { content: ''; position: absolute; top: -2px; left: -3px; width: 8px; height: 5px; background: #FF6B00; clip-path: polygon(50% 100%, 0 0, 100% 0); }

/* Silence segments */
.ed-silence { display: flex; gap: 1px; flex: 1; height: 100%; opacity: 0; position: absolute; inset: 0; border-radius: 3px; overflow: hidden; }
.ed-silence div { flex: 1; background: #8b5cf6; }

/* Cursor */
.ed-cur { position: absolute; width: 20px; height: 20px; z-index: 100; pointer-events: none; }
.ed-cur svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }

/* Tooltip */
.ed-tip { position: absolute; background: #2e2e2e; color: #f5f5f5; padding: 3px 7px; border-radius: 4px; font-size: 6.5px; white-space: nowrap; opacity: 0; z-index: 90; pointer-events: none; }

/* Loading */
.ed-load { position: absolute; top: 50%; left: 55%; transform: translate(-50%,-50%); background: rgba(20,20,20,0.95); border-radius: 10px; padding: 14px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; z-index: 80; }
.ed-spin { width: 18px; height: 18px; border: 2px solid #2e2e2e; border-top-color: #FF6B00; border-radius: 50%; animation: ed-spin 1s linear infinite; }
@keyframes ed-spin { to { transform: rotate(360deg); } }
.ed-load-t { font-size: 7.5px; color: #cccccc; }
.ed-load-s { font-size: 5.5px; color: #595959; }

/* Notification */
.ed-notif { position: absolute; bottom: 80px; right: 10px; background: #1f1f1f; border: 1px solid #2e2e2e; border-radius: 8px; padding: 7px 11px; opacity: 0; z-index: 80; }
.ed-notif-t { font-size: 7.5px; font-weight: 600; }
.ed-notif-d { font-size: 6px; color: #7a7a7a; margin-top: 1px; }

/* Crop modal */
.ed-crop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); z-index: 75; display: flex; opacity: 0; pointer-events: none; }
.ed-crop-left { width: 170px; background: #1f1f1f; padding: 14px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid #2e2e2e; }
.ed-crop-h { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ed-crop-sub { font-size: 6.5px; color: #7a7a7a; }
.ed-crop-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.ed-crop-opt.act { background: rgba(255,107,0,0.12); border: 1px solid rgba(255,107,0,0.4); }
.ed-crop-opt-r { font-size: 9px; font-weight: 600; }
.ed-crop-opt-l { font-size: 5px; color: #7a7a7a; text-transform: uppercase; letter-spacing: 0.3px; }
.ed-crop-right { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; background: #0a0a0a; }
.ed-crop-warn { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(255,107,0,0.1); border: 1px solid rgba(255,107,0,0.3); border-radius: 5px; padding: 4px 10px; font-size: 5.5px; color: #FF6B00; white-space: nowrap; z-index: 2; }
.ed-crop-area { width: 80%; height: 70%; background: linear-gradient(180deg, #2a1f15 0%, #1a1510 40%, #151210 100%); border-radius: 4px; position: relative; }
.ed-crop-reg { position: absolute; top: 8%; left: 30%; width: 40%; aspect-ratio: 9 / 16; border: 2px dashed #FF6B00; border-radius: 4px; }
.ed-crop-ch { position: absolute; width: 9px; height: 9px; background: #FF6B00; border-radius: 50%; }
.ed-crop-ch.a { top: -5px; left: -5px; }
.ed-crop-ch.b { top: -5px; right: -5px; }
.ed-crop-ch.c { bottom: -5px; left: -5px; }
.ed-crop-ch.d { bottom: -5px; right: -5px; }
.ed-crop-bot { position: absolute; bottom: 14px; right: 14px; display: flex; gap: 10px; align-items: center; }
.ed-crop-rst { font-size: 7px; color: #7a7a7a; cursor: pointer; }
.ed-crop-ok { background: #FF6B00; color: white; font-size: 7px; font-weight: 600; padding: 6px 14px; border-radius: 7px; }

/* === Editor Demo Animations === */
.ed-cur { animation: ed-curMove 20s infinite; }
@keyframes ed-curMove {
  0% { top: 220px; left: 350px; }
  5% { top: 71px; left: 154px; }
  7.5% { top: 71px; left: 154px; }
  10% { top: 108px; left: 204px; }
  12.5% { top: 108px; left: 204px; }
  30% { top: 108px; left: 204px; }
  35% { top: 378px; left: 95px; }
  37.5% { top: 378px; left: 95px; }
  55% { top: 378px; left: 95px; }
  67.5% { top: 62px; left: 443px; }
  70% { top: 62px; left: 443px; }
  85% { top: 340px; left: 626px; }
  87.5% { top: 340px; left: 626px; }
  92.5% { top: 340px; left: 626px; }
  95% { top: 220px; left: 350px; }
  100% { top: 220px; left: 350px; }
}
#faceToggle { animation: ed-togOn 20s infinite; }
@keyframes ed-togOn { 0%, 12% { background: #474747; } 13%, 92% { background: #FF6B00; } 93%, 100% { background: #474747; } }
#faceToggle .ed-toggle-knob { animation: ed-knobMove 20s infinite; }
@keyframes ed-knobMove { 0%, 12% { left: 2px; } 13%, 92% { left: 15px; } 93%, 100% { left: 2px; } }
#faceOpts { animation: ed-optsShow 20s infinite; }
@keyframes ed-optsShow { 0%, 14% { opacity: 0; } 16%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
.ed-green { animation: ed-greenDot 20s infinite; }
@keyframes ed-greenDot { 0%, 12% { opacity: 0; } 13%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
#toolFace { animation: ed-faceColor 20s infinite; }
@keyframes ed-faceColor { 0%, 12% { color: #ff5f57; } 13%, 92% { color: #28c840; } 93%, 100% { color: #ff5f57; } }
#toolWave { animation: ed-waveHi 20s infinite; }
@keyframes ed-waveHi { 0%, 34% { color: #7a7a7a; } 35%, 38% { color: #FF6B00; } 39%, 100% { color: #7a7a7a; } }
.ed-tip { animation: ed-tipShow 20s infinite; top: 360px; left: 60px; }
@keyframes ed-tipShow { 0%, 35% { opacity: 0; } 36%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
.ed-load { animation: ed-loadShow 20s infinite; }
@keyframes ed-loadShow { 0%, 40% { opacity: 0; } 42%, 50% { opacity: 1; } 52%, 100% { opacity: 0; } }
.ed-silence { animation: ed-silShow 20s infinite; }
@keyframes ed-silShow { 0%, 52% { opacity: 0; } 54%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
.ed-trk-vid { animation: ed-vidFade 20s infinite; }
@keyframes ed-vidFade { 0%, 52% { opacity: 1; } 54%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }
.ed-notif { animation: ed-notifShow 20s infinite; }
@keyframes ed-notifShow { 0%, 54% { opacity: 0; transform: translateY(10px); } 56%, 64% { opacity: 1; transform: translateY(0); } 66%, 100% { opacity: 0; transform: translateY(10px); } }
.ed-crop { animation: ed-cropShow 20s infinite; }
@keyframes ed-cropShow { 0%, 69% { opacity: 0; pointer-events: none; } 71%, 89% { opacity: 1; pointer-events: auto; } 91%, 100% { opacity: 0; pointer-events: none; } }
.ed-vf { animation: ed-vfBorder 20s infinite; }
@keyframes ed-vfBorder { 0%, 69% { border-color: #FF6B00; } 71%, 89% { border-color: transparent; } 91%, 100% { border-color: #FF6B00; } }
.ed-h { animation: ed-hHide 20s infinite; }
@keyframes ed-hHide { 0%, 69% { opacity: 1; } 71%, 89% { opacity: 0; } 91%, 100% { opacity: 1; } }
.ed-ovt { animation: ed-ovtHide 20s infinite; }
@keyframes ed-ovtHide { 0%, 69% { opacity: 1; } 71%, 89% { opacity: 0; } 91%, 100% { opacity: 1; } }
#overlayBtnCrop { animation: ed-cropBtnHi 20s infinite; }
@keyframes ed-cropBtnHi { 0%, 66% { color: #7a7a7a; } 67%, 70% { color: #FF6B00; background: rgba(255,107,0,0.15); } 71%, 100% { color: #7a7a7a; background: transparent; } }
.ed-crop-ok { animation: ed-okHover 20s infinite; }
@keyframes ed-okHover { 0%, 84% { background: #FF6B00; } 85%, 88% { background: #ff8533; } 89%, 100% { background: #FF6B00; } }

/* Editor demo responsive: no longer needed since we render at 700px and scale.
   The transform: scale() approach preserves the full editor layout at all viewport sizes. */


/* =============================================================
   Editor Light Theme
   Shown when the landing page is in dark mode (no .light class).
   When the page is light (.light on html), the editor stays dark
   (the defaults above apply).
   ============================================================= */

/* Main container */
html.light .editor-demo {
  background: #ffffff;
  border-color: #e8e8e8;
  color: #1a1a2e;
}

/* Toolbar */
html.light .ed-tb {
  background: #f5f5f5;
  border-bottom-color: #e8e8e8;
}
html.light .ed-tg {
  background: rgba(232,232,232,0.5);
  border-color: #e8e8e8;
}
html.light .ed-tb-btn {
  color: #888;
}
html.light .ed-sep {
  background: #e8e8e8;
}
html.light .ed-zoom {
  color: #888;
}

/* Sidebar icons */
html.light .ed-si {
  background: #fafafa;
  border-right-color: #e8e8e8;
}
html.light .ed-si-item {
  color: #888;
}
html.light .ed-si-item.act {
  color: #FF6B00;
}

/* Sidebar panel */
html.light .ed-sp {
  background: #fafafa;
  border-right-color: #e8e8e8;
}
html.light .ed-sp-title {
  color: #1a1a2e;
}
html.light .ed-tabs {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
}
html.light .ed-tab {
  color: #888;
}
html.light .ed-tab.act {
  background: #FF6B00;
  color: #fff;
}

/* Cards */
html.light .ed-card {
  background: #f5f5f5;
  border-color: #d8d8d8;
}
html.light .ed-card-title {
  color: #1a1a2e;
}
html.light .ed-card-desc {
  color: #888;
}

/* Toggle (inactive state) */
html.light .ed-toggle {
  background: #ccc;
}
html.light .ed-toggle-knob {
  background: #ffffff;
}

/* Options */
html.light .ed-opt-row {
  color: #888;
}
html.light .ed-opt-box {
  background: #f0f0f0;
  color: #555;
  border: 1px solid #d0d0d0;
}
html.light .ed-zbtn div {
  background: #f0f0f0;
  color: #555;
  border: 1px solid #d0d0d0;
}
html.light .ed-zbtn div.act {
  background: #FF6B00;
  color: #fff;
  border-color: #FF6B00;
}
html.light .ed-slider {
  background: #d0d0d0;
}
html.light .ed-slider-fill {
  background: #FF6B00;
}
html.light .ed-slider-thumb {
  background: #FF6B00;
  border-color: #fff;
}

/* Viewport */
html.light .ed-vp {
  background: #e0e0e0;
}
html.light .ed-vf {
  background: linear-gradient(180deg, #d4c8bb 0%, #c8bfb5 40%, #c0b8af 100%);
}
html.light .ed-cap {
  color: #1a1a2e;
  text-shadow: 0 1px 4px rgba(255,255,255,0.5);
}
html.light .ed-h {
  background: #1a1a2e;
}

/* Overlay toolbar above video */
html.light .ed-ovt {
  background: #ffffff;
  border-color: #e8e8e8;
}
html.light .ed-ovt-btn {
  color: #888;
}

/* Timeline */
html.light .ed-tl {
  background: #fafafa;
  border-top-color: #e8e8e8;
}
html.light .ed-tl-bar {
  border-bottom-color: #e8e8e8;
}
html.light .ed-tl-btn {
  color: #666;
}
html.light .ed-1x {
  color: #888;
  border-color: #e8e8e8;
}
html.light .ed-tl-time {
  color: #888;
}
html.light .ed-tl-fmt {
  color: #888;
}
html.light .ed-ruler {
  background: #f0f0f0;
}
html.light .ed-ruler-m {
  color: #aaa;
}
html.light .ed-trk-vid {
  background: repeating-linear-gradient(90deg, #e8e0d8 0px, #e8e0d8 8px, #e0d8d0 8px, #e0d8d0 16px);
}

/* Tooltip */
html.light .ed-tip {
  background: #ffffff;
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Loading overlay */
html.light .ed-load {
  background: rgba(255,255,255,0.95);
}
html.light .ed-spin {
  border-color: #e8e8e8;
  border-top-color: #FF6B00;
}
html.light .ed-load-t {
  color: #1a1a2e;
}
html.light .ed-load-s {
  color: #888;
}

/* Notification */
html.light .ed-notif {
  background: #ffffff;
  border-color: #e8e8e8;
}
html.light .ed-notif-t {
  color: #1a1a2e;
}
html.light .ed-notif-d {
  color: #888;
}

/* Crop modal */
html.light .ed-crop {
  background: rgba(255,255,255,0.9);
}
html.light .ed-crop-left {
  background: #ffffff;
  border-right-color: #e8e8e8;
}
html.light .ed-crop-h {
  color: #1a1a2e;
}
html.light .ed-crop-sub {
  color: #888;
}
html.light .ed-crop-opt-r {
  color: #1a1a2e;
}
html.light .ed-crop-opt-l {
  color: #888;
}
html.light .ed-crop-right {
  background: #e0e0e0;
}
html.light .ed-crop-area {
  background: linear-gradient(180deg, #d4c8bb 0%, #c8bfb5 40%, #c0b8af 100%);
}
html.light .ed-crop-rst {
  color: #666;
  border: 1px solid #d0d0d0;
  padding: 4px 10px;
  border-radius: 4px;
}

/* Cursor shadow adjustment for light bg */
html.light .ed-cur svg {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

/* Animation keyframe overrides for light theme.
   CSS keyframes cannot be scoped by selector, so we override
   the animated properties directly on the elements. */

/* Toggle animation — override inactive color */
:root:not(.light) #faceToggle {
  animation: ed-togOn-light 20s infinite;
}
@keyframes ed-togOn-light {
  0%, 12% { background: #ccc; }
  13%, 92% { background: #FF6B00; }
  93%, 100% { background: #ccc; }
}

/* Toggle knob — white on light theme */
:root:not(.light) #faceToggle .ed-toggle-knob {
  background: #ffffff;
}

/* Wave icon animation — override muted color */
:root:not(.light) #toolWave {
  animation: ed-waveHi-light 20s infinite;
}
@keyframes ed-waveHi-light {
  0%, 34% { color: #888; }
  35%, 38% { color: #FF6B00; }
  39%, 100% { color: #888; }
}

/* Crop button highlight — override muted color */
:root:not(.light) #overlayBtnCrop {
  animation: ed-cropBtnHi-light 20s infinite;
}
@keyframes ed-cropBtnHi-light {
  0%, 66% { color: #888; }
  67%, 70% { color: #FF6B00; background: rgba(255,107,0,0.15); }
  71%, 100% { color: #888; background: transparent; }
}

/* Face tool animation — keep same colors (red/green are fine on light) */

/* Video frame border animation — keep same (orange/transparent are fine) */

/* ed-trk-vid fade animation needs light bg when visible */
html.light .ed-trk-vid {
  animation: ed-vidFade 20s infinite;
}


/* === Utility Classes === */
.vd-mt-8 { margin-top: 8px; }
.vd-mt-12 { margin-top: 12px; }
.vd-mt-16 { margin-top: 16px; }
.vd-mb-8 { margin-bottom: 8px; }
.vd-mb-12 { margin-bottom: 12px; }
.vd-mb-16 { margin-bottom: 16px; }
.vd-text-muted { color: var(--vd-text-muted); }