/* =====================================================
 Videoradius — Shared Stylesheet
 All pages: home, screen-recorder, video-converter,
 video-compressor, audio-cutter
 ===================================================== */

/* ===== 1. ===== */
:root {
  --accent-teal:  #00E1C5;
  --accent-blue:  #3E9AFF;
  --accent-green: #2CD0A1;
  --accent-lime:  #27B765;
  --dark-bg:  #0f172a;
  --light-bg: #f8fafc;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #334155;
  line-height: 1.7;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ===== 2. ===== */
body .navbar {
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226,232,240,0.5);
  padding: 1rem 0;
}

body .navbar-brand {
  font-weight: 700;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  letter-spacing: -0.5px;
}

body .navbar-brand,
body .navbar-brand:hover,
body .navbar-brand:visited,
body .navbar-brand:active,
body .navbar-brand:focus {
  color: #00E1C5 !important;
  text-decoration: none;
}

body .logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: linear-gradient(135deg,#00E1C5,#00BFA5);
  border-radius: 10px;
  margin-right: 10px;
}

body .logo-img {
  width: 30px; height: 30px;
  filter: brightness(0) invert(1);
}

body .brand-name { font-weight: 800; letter-spacing: -1px; }

body .navbar .nav-link {
  color: #475569 !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.2s ease;
}

body .navbar .nav-link:hover,
body .navbar .nav-link.active { color: #07D2B8 !important; }

body .navbar .dropdown-menu {
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 0.5rem;
  min-width: 250px;
  margin-top: 0.5rem;
}

body .navbar .dropdown-item {
  padding: 0.9rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  color: #475569;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  width: 100%;
}

body .navbar .dropdown-item:hover {
  background: #f8fafc !important;
  color: #00E1C5 !important;
}

body .navbar .dropdown-item.active,
body .navbar .dropdown-item.active:hover,
body .navbar .dropdown-item.active:focus {
  background: #f8fafc !important;
  color: #07D2B8 !important;
}

/* ===== AI Tools dropdown ===== */
body .navbar .dropdown-menu-ai-tools {
  min-width: 300px;
  padding: 0.5rem;
  border-radius: 14px;
  border: 1px solid rgba(7, 210, 184, 0.2);
  box-shadow: 0 16px 40px rgba(7, 210, 184, 0.12);
}

body .navbar .dropdown-menu-ai-tools > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

body .navbar .dropdown-item-ai {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem !important;
  border-radius: 10px;
  white-space: normal;
}

body .navbar .dropdown-item-ai:hover,
body .navbar .dropdown-item-ai:focus {
  background: linear-gradient(135deg, rgba(7, 210, 184, 0.1), rgba(140, 249, 237, 0.08)) !important;
  color: #06b39e !important;
}

body .navbar .dropdown-item-ai.active,
body .navbar .dropdown-item-ai.active:hover {
  background: rgba(7, 210, 184, 0.12) !important;
  color: #06b39e !important;
}

body .navbar .dropdown-item-ai-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: 0 0 40px;
  align-self: center;
  display: grid;
  place-items: center;
  line-height: 0;
  font-size: 0;
  color: #fff;
  background: linear-gradient(135deg, #07D2B8, #3be0c8);
  box-shadow: 0 6px 14px rgba(7, 210, 184, 0.35);
}

body .navbar .dropdown-item-ai-icon .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: #fff !important;
  vertical-align: middle;
}

body .navbar .dropdown-item-ai-icon .bi::before {
  display: block;
  line-height: 1;
  vertical-align: 0;
}

body .navbar .dropdown-item-ai:hover .dropdown-item-ai-icon .bi,
body .navbar .dropdown-item-ai:focus .dropdown-item-ai-icon .bi,
body .navbar .dropdown-item-ai.active .dropdown-item-ai-icon .bi {
  color: #fff !important;
}

body .navbar .dropdown-item-ai-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

body .navbar .dropdown-item-ai-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #0f172a;
  line-height: 1.25;
}

body .navbar .dropdown-item-ai-desc {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

body .navbar .dropdown-item-ai.active .dropdown-item-ai-title {
  color: #06b39e;
}

@media (min-width: 992px) {
  body .navbar .nav-item.dropdown:has(#aiToolsDropdown) {
    position: relative;
  }

  body .navbar .nav-item.dropdown:has(#aiToolsDropdown) > .dropdown-menu-ai-tools[data-bs-popper],
  body .navbar .nav-item.dropdown:has(#aiToolsDropdown) > .dropdown-menu-ai-tools.show {
    inset: auto !important;
    left: 50% !important;
    right: auto !important;
    top: 100% !important;
    transform: translateX(-50%) !important;
    margin-top: 0.5rem;
  }
}

body .navbar .dropdown-menu-online-tools {
  min-width: 980px;
  width: max-content;
  padding: 0.5rem 0.35rem;
}

@media (min-width: 992px) {
  body .navbar .nav-item.dropdown:has(#onlineToolsDropdown) {
    position: relative;
  }

  body .navbar .nav-item.dropdown:has(#onlineToolsDropdown) > .dropdown-menu-online-tools[data-bs-popper],
  body .navbar .nav-item.dropdown:has(#onlineToolsDropdown) > .dropdown-menu-online-tools.show {
    inset: auto !important;
    left: 50% !important;
    right: auto !important;
    top: 100% !important;
    transform: translateX(-50%) !important;
    margin-top: 0.5rem;
  }
}

body .navbar .dropdown-menu-online-tools.show,
body .navbar .dropdown-menu-online-tools[data-bs-popper] {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

body .navbar .dropdown-menu-online-tools > .dropdown-online-tools-col {
  flex: 0 0 27%;
  width: 27%;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0 0.15rem;
}

body .navbar .dropdown-menu-online-tools > .dropdown-online-tools-col--video {
  flex: 1 1 46%;
  width: 46%;
  min-width: 440px;
}

body .navbar .dropdown-online-tools-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.15rem;
}

body .navbar .dropdown-online-tools-video-subcol .dropdown-item {
  white-space: nowrap;
}

body .navbar .dropdown-menu-online-tools > .dropdown-online-tools-col:not(:last-child) {
  border-right: 1px solid #eef2f7;
  padding-right: 0.35rem;
  margin-right: 0.15rem;
}

body .navbar .dropdown-menu-online-tools > .dropdown-online-tools-col:first-child {
  border-right: 1px solid #eef2f7;
  padding-right: 0.35rem;
  margin-right: 0.15rem;
}

body .navbar .dropdown-online-tools-col .dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem 0.25rem;
  margin-bottom: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

body .navbar .dropdown-online-tools-col .dropdown-header .bi {
  font-size: 0.85rem;
  color: #07D2B8;
  line-height: 1;
}

body .navbar .dropdown-online-tools-col .dropdown-item {
  min-height: 48px;
  padding: 0 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
}

/* Online Tools — desktop: section toggles look like static headers */
@media (min-width: 992px) {
  body .navbar .dropdown-online-tools-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    cursor: default;
  }

  body .navbar .dropdown-online-tools-section-toggle .dropdown-online-tools-section-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  body .navbar .dropdown-online-tools-section-chevron {
    display: none;
  }

  body .navbar .dropdown-online-tools-section-body {
    display: block !important;
  }
}

/* Online Tools — mobile: accordion sections (VIDEO / AUDIO / IMAGE) */
@media (max-width: 991.98px) {
  body .navbar .dropdown-online-tools-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.75rem 0.35rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body .navbar .dropdown-online-tools-section-toggle .dropdown-online-tools-section-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
  }

  body .navbar .dropdown-online-tools-section-chevron {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  body .navbar .dropdown-online-tools-col.is-expanded .dropdown-online-tools-section-chevron {
    transform: rotate(180deg);
  }

  body .navbar .dropdown-online-tools-section-body {
    display: none;
    padding: 0 0.15rem 0.15rem;
  }

  body .navbar .dropdown-online-tools-col .dropdown-item {
    white-space: normal;
  }

  body .navbar .dropdown-online-tools-col.is-expanded .dropdown-online-tools-section-body {
    display: block !important;
    max-height: min(50dvh, 320px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scroll-behavior: auto;
  }

  body .navbar .dropdown-menu-online-tools .dropdown-item {
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  body .navbar .dropdown-menu-online-tools {
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body .navbar-collapse.show {
    max-height: calc(100dvh - 3.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body .navbar-collapse.show .nav-link:not(.dropdown-toggle),
  body .navbar-collapse.show .dropdown-item {
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  body.mobile-nav-open {
    overflow: hidden;
    width: 100%;
    overscroll-behavior: none;
  }
}

body .navbar .dropdown-item:hover .dropdown-item-img { background: rgba(0,0,0,0.05); }

body .navbar .dropdown-item i {
  width: 40px;
  margin-right: 0.75rem;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

body .navbar .dropdown-item-img {
  width: 44px; height: 44px;
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.02);
  transition: background-color 0.2s ease;
}

body .navbar .dropdown-item-img img {
  width: 32px; height: 32px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

body .navbar .dropdown-item:hover .dropdown-item-img img { transform: scale(1.05); }

body .navbar .dropdown-item-recorder i  { color: #00E1C5; }
body .navbar .dropdown-item-converter i  { color: #3E9AFF; }
body .navbar .dropdown-item-compressor i { color: #2CD0A1; }
body .navbar .dropdown-item-audio i      { color: #27B765; }

body .navbar .dropdown-toggle::after { margin-left: 0.5rem; vertical-align: 0.15em; }

body .btn-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 1.2rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s ease;
  background: #ffffff;
  white-space: nowrap;
  min-width: 80px;
}

body .btn-signin:hover { background: #f8fafc; border-color: #9ca3af; color: #374151; }

/* Nav user avatar + nickname */
body .nav-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
}
body .nav-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body .nav-nickname { font-size: 0.9rem; font-weight: 600; color: #334155; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body .nav-user { position: relative; cursor: pointer; }
body .nav-user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 6px 0;
  z-index: 1050;
  padding-top: 10px;
}
body .nav-user-dropdown::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
}
body .nav-user:hover .nav-user-dropdown { display: block; }
body .nav-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
body .nav-user-dropdown-item:hover { background: #f1f5f9; color: #0f172a; }
body .nav-user-dropdown-signout { color: #ef4444; }
body .nav-user-dropdown-signout:hover { background: #fff5f5; color: #dc2626; }

body .btn-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 1.2rem;
  background: linear-gradient(135deg,#00E1C5,#00BFA5);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 4px 20px rgba(0,225,197,0.3);
  white-space: nowrap;
  min-width: 80px;
}

body .btn-upgrade:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,225,197,0.4);
  background: linear-gradient(135deg,#00BFA5,#009688);
  color: #ffffff;
}

/* ===== 3. ===== */
body .footer-section {
  background: linear-gradient(135deg,#0c1424 0%,#0f172a 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

body .footer-curve-decor {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(135deg,rgba(7,210,184,0.1) 0%,rgba(7,210,184,0.05) 20%,rgba(7,210,184,0) 100%);
  clip-path: polygon(0 100%,100% 0,100% 100%);
}

body .footer-content { position: relative; z-index: 1; }

body .footer-pattern {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background:
    linear-gradient(90deg,transparent 0%,rgba(7,210,184,0.1) 50%,transparent 100%),
    repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(7,210,184,0.05) 20px,rgba(7,210,184,0.05) 40px);
}

body .footer-wave {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%2307D2B8" fill-opacity="0.1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom center/cover no-repeat;
}

body .footer-dots {
  position: absolute;
  top: 20%; right: 5%;
  width: 200px; height: 200px;
  background:
    radial-gradient(circle at 30% 30%,rgba(7,210,184,0.1) 2px,transparent 2px),
    radial-gradient(circle at 70% 60%,rgba(7,210,184,0.08) 2px,transparent 2px),
    radial-gradient(circle at 40% 80%,rgba(7,210,184,0.06) 2px,transparent 2px);
  background-size: 50px 50px;
  z-index: 0;
}

body .footer-lines {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,transparent 0%,#07D2B8 20%,#07D2B8 80%,transparent 100%);
}

body .footer-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  padding: 0.25rem 0;
}

body .footer-links a:hover { color: #07D2B8; transform: translateX(5px); }

body .footer-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }

body .footer-badge {
  background: rgba(7,210,184,0.1);
  border: 1px solid rgba(7,210,184,0.3);
  color: #07D2B8;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

body .footer-badge i { margin-right: 6px; }

body .footer-copyright {
  position: relative;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

body .footer-copyright::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 3px;
  background: linear-gradient(90deg,transparent 0%,#07D2B8 50%,transparent 100%);
}

body .footer-social { display: flex; gap: 1rem; margin-top: 1.5rem; }

body .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.3s ease;
}

body .footer-social a:hover { background: #07D2B8; transform: translateY(-3px); }

body .footer-section .logo-container { width: 40px; height: 40px; margin-right: 10px; }
body .footer-section .logo-img { width: 30px; height: 30px; }
body .footer-section h5,
body .footer-section h6 { font-weight: 700; color: #ffffff; }
body .footer-section p { font-size: 0.95rem; }
body .footer-section .list-inline-item a { color: #cbd5f5; }
body .footer-section .list-inline-item a:hover { color: #ffffff; }
body .footer-section .text-white-50 { color: rgba(255,255,255,0.7) !important; }
body .footer-section .small { font-size: 0.85rem; }
body .footer-section .border-top { border-top-color: rgba(255,255,255,0.1) !important; }
body .footer-section .logo-container img { filter: brightness(0) invert(1); }

/* ===== 4. ===== */

/* */
body .back-to-top {
  position: fixed;
  bottom: 30px; right: 30px;
  width: 50px; height: 50px;
  background: linear-gradient(135deg,#00E1C5,#00BFA5);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 5px 20px rgba(0,225,197,0.3);
  z-index: 1000;
}

body .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
body .back-to-top:hover { background: linear-gradient(135deg,#00BFA5,#009688); transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,225,197,0.4); }

/* CTA */
body .btn-primary-cta {
  background: linear-gradient(135deg,#00E1C5,#00BFA5);
  border: none;
  color: #ffffff;
  padding: 0.8rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 4px 20px rgba(0,225,197,0.3);
}

body .btn-primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,225,197,0.4);
  background: linear-gradient(135deg,#00BFA5,#009688);
  color: #ffffff;
}

/* */
body .section-title {
  font-size: 2.8rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1rem;
  color: #0f172a;
  letter-spacing: -0.015em;
}

body .section-subtitle {
  font-size: 1.2rem;
  text-align: center;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto 4rem;
  line-height: 1.8;
}

/* ===== 5. Page: Home (.page-home) ===== */
.page-home { --primary-color: #07D2B8; --gradient-primary: linear-gradient(135deg,#07D2B8,#3be0c8); }

.page-home .hero-section {
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 380px at 20% 0%, rgba(7, 210, 184, 0.22), transparent 60%),
    radial-gradient(700px 360px at 88% 10%, rgba(62, 154, 255, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(17, 24, 39, 0.78) 100%);
}

.page-home .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(7, 210, 184, 0.10) 0%, transparent 45%);
}

.page-home .hero-graphic {
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle,rgba(7,210,184,0.16) 0%,transparent 70%);
  border-radius: 50%;
  top: 20%; right: 10%; z-index: 0;
}

.page-home .hero-title { font-size: 3.8rem; font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; color: #f8fafc; letter-spacing: -1.5px; }

.page-home .hero-highlight { color: #07D2B8; position: relative; }

.page-home .hero-highlight::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 0; width: 100%; height: 8px;
  background: rgba(7,210,184,0.24); border-radius: 4px; z-index: -1;
}

.page-home .hero-subtitle { font-size: 1.3rem; color: #cbd5e1; margin-bottom: 2.5rem; line-height: 1.8; max-width: 700px; }

.page-home .hero-stats { display: flex; gap: 3rem; margin: 3rem 0 2rem; }
.page-home .stat-item { text-align: left; }
.page-home .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); line-height: 1; }
.page-home .stat-label { font-size: 0.9rem; color: #64748b; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

.page-home .products-section { padding: 100px 0; position: relative; }

.page-home .product-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 2rem; margin-top: 4rem; }

.page-home .product-card {
  background: white; border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid rgba(226,232,240,0.8);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1); text-align: center;
}

.page-home .product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--primary-color); }

.page-home .product-icon {
  width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 2.5rem; margin: 0 auto 2rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.page-home .icon-editor    { background: linear-gradient(135deg,#07D2B8,#3be0c8); }
.page-home .icon-recorder  { background: linear-gradient(135deg,#00E1C5,#00BFA5); }
.page-home .icon-converter  { background: linear-gradient(135deg,#3E9AFF,#5ca9ff); }
.page-home .icon-compressor { background: linear-gradient(135deg,#2CD0A1,#3bd5a9); }
.page-home .icon-audio      { background: linear-gradient(135deg,#27B765,#32c771); }

.page-home .product-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #0f172a; }
.page-home .name-editor    { color: #07D2B8; }
.page-home .name-recorder  { color: var(--accent-teal); }
.page-home .name-converter  { color: var(--accent-blue); }
.page-home .name-compressor { color: var(--accent-green); }
.page-home .name-audio      { color: var(--accent-lime); }

.page-home .product-tagline { font-size: 1rem; color: #64748b; margin-bottom: 1.5rem; line-height: 1.6; }

.page-home .product-features { list-style: none; padding: 0; margin: 0 0 2rem; text-align: left; }
.page-home .product-features li { padding: 0.4rem 0; color: #475569; display: flex; align-items: center; }
.page-home .product-features li i { color: var(--primary-color); margin-right: 0.75rem; font-size: 0.9rem; }

.page-home .product-cta {
  display: inline-flex; align-items: center; padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 600;
  text-decoration: none; transition: all 0.3s ease; background: rgba(0,225,197,0.1);
  color: var(--primary-color); border: 2px solid rgba(0,225,197,0.2);
}
.page-home .product-cta:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); transform: translateY(-2px); }
.page-home .pricing-link { display: block; margin-top: 1rem; color: var(--primary-color); font-weight: 500; text-decoration: none; font-size: 0.9rem; }
.page-home .pricing-link:hover { text-decoration: underline; }

/* icon */
.page-home .hero-card-icon-teal  { width:56px;height:56px;background:rgba(0,225,197,0.12);  border-radius:0.5rem;display:inline-flex;align-items:center;justify-content:center; }
.page-home .hero-card-icon-teal i  { font-size:1.6rem;color:var(--accent-teal); }
.page-home .hero-card-icon-blue  { width:56px;height:56px;background:rgba(62,154,255,0.12);  border-radius:0.5rem;display:inline-flex;align-items:center;justify-content:center; }
.page-home .hero-card-icon-blue i  { font-size:1.6rem;color:var(--accent-blue); }
.page-home .hero-card-icon-green { width:56px;height:56px;background:rgba(44,208,161,0.12);  border-radius:0.5rem;display:inline-flex;align-items:center;justify-content:center; }
.page-home .hero-card-icon-green i { font-size:1.6rem;color:var(--accent-green); }
.page-home .hero-card-icon-lime  { width:56px;height:56px;background:rgba(39,183,101,0.12);  border-radius:0.5rem;display:inline-flex;align-items:center;justify-content:center; }
.page-home .hero-card-icon-lime i  { font-size:1.6rem;color:var(--accent-lime); }
.page-home .badge-teal  { background:var(--accent-teal);  color:white; }
.page-home .badge-blue  { background:var(--accent-blue);  color:white; }
.page-home .badge-green { background:var(--accent-green); color:white; }
.page-home .badge-lime  { background:var(--accent-lime);  color:white; }
.page-home .hero-product-card { background:white; border:1px solid rgba(0,0,0,0.05); border-radius:1rem; padding:1.5rem; box-shadow:0 8px 30px rgba(0,0,0,0.08); }

.page-home .global-section { background: var(--light-bg); padding: 100px 0; border-radius: 40px 40px 0 0; margin-top: 100px; }

.page-home .world-map-container {
  position: relative; width: 100%; height: 300px;
  background: linear-gradient(135deg,rgba(0,225,197,0.05),rgba(62,154,255,0.05));
  border-radius: 20px; overflow: hidden; margin: 3rem 0;
}
.page-home .world-map-svg { width: 100%; height: 100%; opacity: 0.7; }
.page-home .user-dot { position: absolute; width: 12px; height: 12px; background: var(--primary-color); border-radius: 50%; animation: homePulse 2s infinite; }

@keyframes homePulse {
  0%   { transform:scale(1);   box-shadow:0 0 0 0 rgba(0,225,197,0.7); }
  70%  { transform:scale(1.2); box-shadow:0 0 0 10px rgba(0,225,197,0); }
  100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(0,225,197,0); }
}

.page-home .stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 2rem; margin-top: 3rem; }
.page-home .stat-card { background: white; border-radius: 15px; padding: 2rem; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.page-home .testimonials-section { padding: 100px 0; }
.page-home .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 2rem; }
.page-home .testimonial-card { background: white; border-radius: 20px; padding: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid rgba(226,232,240,0.8); }
.page-home .testimonial-rating { color: #fbbf24; margin-bottom: 1rem; }
.page-home .testimonial-text { font-size: 1.1rem; color: #475569; line-height: 1.7; margin-bottom: 2rem; position: relative; padding-left: 1.5rem; }
.page-home .testimonial-text::before { content:'"'; position:absolute; left:0; top:0; font-size:3rem; color:rgba(0,225,197,0.1); font-family:serif; line-height:1; }
.page-home .testimonial-author { display: flex; align-items: center; }
.page-home .author-avatar { width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:white;display:flex;align-items:center;justify-content:center;font-weight:600;margin-right:1rem; }

.page-home .advantages-section { padding: 100px 0; background: linear-gradient(135deg,rgba(0,225,197,0.02),rgba(248,250,252,1)); }
.page-home .advantage-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 2rem; }
.page-home .advantage-card { background:white;border-radius:20px;padding:2.5rem;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.05);border:1px solid rgba(226,232,240,0.8);transition:all 0.3s ease; }
.page-home .advantage-card:hover { transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,225,197,0.1); }
.page-home .advantage-icon { width:70px;height:70px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:white;font-size:2rem;margin:0 auto 1.5rem;background:var(--gradient-primary); }
.page-home .advantage-title { font-size:1.4rem;font-weight:700;margin-bottom:1rem;color:#0f172a; }

.page-home .guide-section { background:linear-gradient(135deg,#1e293b,#0f172a);color:white;padding:100px 0;position:relative;overflow:hidden; }
.page-home .guide-section::before { content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(0,225,197,0.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(62,154,255,0.1) 0%,transparent 50%);pointer-events:none;z-index:0; }
.page-home .guide-section .container { position:relative;z-index:1; }

/* ===== 6. Page: Screen Recorder (.page-screen-recorder) ===== */
.page-screen-recorder { --primary-color:#07D2B8; --primary-dark:#06b39e; --primary-light:#3be0c8; }

.page-screen-recorder h1,.page-screen-recorder h2,.page-screen-recorder h3,
.page-screen-recorder h4,.page-screen-recorder h5,.page-screen-recorder h6 { font-weight:700;line-height:1.2;color:#0f172a; }

.page-screen-recorder .hero-title { font-size:3.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-0.02em; }
.page-screen-recorder .hero-title span { color:#07D2B8; }
.page-screen-recorder .hero-subtitle { font-size:1.2rem;font-weight:400;line-height:1.7;color:#64748b; }
.page-screen-recorder .section-title { font-size:2.8rem;font-weight:800;text-align:center;margin-bottom:1rem;letter-spacing:-0.015em; }
.page-screen-recorder .section-subtitle { font-size:1.2rem;font-weight:400;text-align:center;color:#64748b;max-width:700px;margin:0 auto 4rem;line-height:1.7; }
.page-screen-recorder .stat-number { font-size:2.2rem;font-weight:800;color:#07D2B8;line-height:1; }
.page-screen-recorder .stat-label { font-size:0.9rem;font-weight:500;color:#64748b; }
.page-screen-recorder .feature-title,.page-screen-recorder .use-case-title { font-size:1.3rem;font-weight:700;margin-bottom:1rem;line-height:1.3; }

.page-screen-recorder .hero-section { padding:100px 0 80px;background:linear-gradient(135deg,rgba(7,210,184,0.03) 0%,rgba(7,210,184,0.01) 100%);position:relative;overflow:hidden; }
.page-screen-recorder .hero-section::before { content:'';position:absolute;top:0;right:0;width:60%;height:100%;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><path d="M0,300 Q200,150 400,300 T800,300 L800,600 L0,600 Z" fill="%2307D2B8" opacity="0.03"/></svg>') no-repeat;background-position:right top; }
.page-screen-recorder .hero-stats { display:flex;gap:2rem;margin:3rem 0 2rem; }
.page-screen-recorder .hero-image-container { position:relative;border-radius:20px;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,0.1);border:1px solid rgba(226,232,240,0.5); }

.page-screen-recorder .hero-download-btn { background:linear-gradient(135deg,#07D2B8,#3be0c8);border:none;color:white;padding:0.8rem 2rem;border-radius:10px;font-weight:700;font-size:1.1rem;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(7,210,184,0.3); }
.page-screen-recorder .hero-download-btn:hover { transform:translateY(-3px);box-shadow:0 8px 20px rgba(7,210,184,0.4);background:linear-gradient(135deg,#06b39e,#2fd0b6);color:white; }
.page-screen-recorder .hero-buy-outline-btn { border:2px solid #07D2B8;color:#07D2B8;background:transparent;padding:0.8rem 2rem;border-radius:10px;font-weight:700;font-size:1.1rem;transition:all 0.3s ease; }
.page-screen-recorder .hero-buy-outline-btn:hover { background:rgba(7,210,184,0.06);color:#06b39e;border-color:#06b39e; }

.page-screen-recorder .recording-indicator { position:absolute;top:20px;left:20px;display:flex;align-items:center;background:rgba(239,68,68,0.9);color:white;padding:8px 16px;border-radius:20px;font-size:0.9rem;font-weight:600; }
.page-screen-recorder .recording-dot { width:8px;height:8px;background:white;border-radius:50%;margin-right:8px;animation:srBlink 1.5s infinite; }
@keyframes srBlink { 0%,100%{opacity:1}50%{opacity:0.3} }

/* Mobile: bring the recording badge slightly closer to the image top edge */
@media (max-width: 576px) {
  .page-screen-recorder .recording-indicator { top: 14px; left: 14px; }
}

.page-screen-recorder .feature-card { background:white;border-radius:16px;padding:2.5rem;height:100%;border:1px solid #e2e8f0;transition:all 0.3s ease;position:relative;overflow:hidden; }
.page-screen-recorder .feature-card:hover { transform:translateY(-10px);box-shadow:0 20px 40px rgba(7,210,184,0.1);border-color:#07D2B8; }
.page-screen-recorder .feature-card::before { content:'';position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(to bottom,#07D2B8,#3be0c8); }
.page-screen-recorder .feature-icon { width:70px;height:70px;background:linear-gradient(135deg,rgba(7,210,184,0.1),white);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#07D2B8;font-size:1.8rem;margin-bottom:1.5rem; }
.page-screen-recorder .feature-list { list-style:none;padding:0;margin:1.5rem 0 0; }
.page-screen-recorder .feature-list li { padding:0.5rem 0;color:#64748b;display:flex;align-items:flex-start; }
.page-screen-recorder .feature-list li i { color:#07D2B8;margin-right:0.75rem;margin-top:0.2rem; }

.page-screen-recorder .use-case-section { background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);padding:100px 0; }
.page-screen-recorder .use-case-card { background:white;border-radius:16px;padding:2.5rem;text-align:center;height:100%;border:1px solid #e2e8f0;transition:all 0.3s ease; }
.page-screen-recorder .use-case-card:hover { transform:translateY(-5px);box-shadow:0 15px 30px rgba(7,210,184,0.1); }
.page-screen-recorder .use-case-icon { width:80px;height:80px;margin:0 auto 1.5rem;background:linear-gradient(135deg,rgba(7,210,184,0.1),white);border-radius:20px;display:flex;align-items:center;justify-content:center;color:#07D2B8;font-size:2.2rem; }

.page-screen-recorder .tech-advantage { display:flex;align-items:flex-start;margin-bottom:2rem;padding:1.5rem;background:white;border-radius:12px;border:1px solid #e2e8f0; }
.page-screen-recorder .tech-icon { flex-shrink:0;width:50px;height:50px;background:linear-gradient(135deg,rgba(7,210,184,0.1),white);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#07D2B8;font-size:1.5rem;margin-right:1.5rem; }

.page-screen-recorder .comparison-table { background:white;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.05); }
.page-screen-recorder .comparison-table th { background:#f8fafc;padding:1.5rem;font-weight:600;color:#475569;border-bottom:2px solid #e2e8f0; }
.page-screen-recorder .comparison-table td { padding:1.5rem;border-bottom:1px solid #e2e8f0; }

.page-screen-recorder .download-section { background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:white;padding:100px 0;position:relative;overflow:hidden; }
.page-screen-recorder .download-section::before { content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(7,210,184,0.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,107,107,0.1) 0%,transparent 50%);pointer-events:none;z-index:0; }
.page-screen-recorder .download-section .container { position:relative;z-index:1; }
.page-screen-recorder .download-card { background:rgba(255,255,255,0.95);border-radius:20px;padding:3rem;box-shadow:0 25px 50px rgba(0,0,0,0.2); }
.page-screen-recorder .download-cta-btn { background:linear-gradient(135deg,#07D2B8,#3be0c8);border:none;color:white;padding:1rem 2.5rem;border-radius:12px;font-weight:700;font-size:1.2rem;transition:all 0.3s ease;box-shadow:0 6px 20px rgba(7,210,184,0.3);display:inline-flex;align-items:center;justify-content:center; }
.page-screen-recorder .download-cta-btn:hover { transform:translateY(-3px);box-shadow:0 12px 25px rgba(7,210,184,0.4);background:linear-gradient(135deg,#06b39e,#2fd0b6);color:white; }

.page-screen-recorder .faq-section { background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%); }

.page-screen-recorder .sr-faq-accordion .accordion-item {
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.page-screen-recorder .sr-faq-accordion .accordion-button {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a;
  background: #ffffff;
  padding: 1.2rem 1.5rem;
  box-shadow: none;
  /* Keep the Bootstrap arrow visible even when the title is long */
  overflow: visible;
}

/* FAQ title: allow wrapping (match video-converter behavior) */
.page-screen-recorder .sr-faq-accordion .accordion-button .sr-faq-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.page-screen-recorder .sr-faq-accordion .accordion-button:not(.collapsed) {
  color: #07D2B8;
  background: rgba(7,210,184,0.04);
  box-shadow: none;
}
.page-screen-recorder .sr-faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2307D2B8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  width: 1.2rem;
  height: 1.2rem;
  background-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.page-screen-recorder .sr-faq-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2307D2B8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.page-screen-recorder .sr-faq-accordion .accordion-body {
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #475569;
}

/* ===== 7. Page: Video Converter (.page-video-converter) ===== */
.page-video-converter {
  --primary-color:#3E9AFF; --primary-dark:#2d7fd9; --primary-light:#e6f2ff;
  --gradient-primary:linear-gradient(135deg,#3E9AFF 0%,#1e5fcc 100%);
  --shadow-primary:0 10px 30px rgba(62,154,255,0.25);
  --text-primary:#1a1a1a; --text-secondary:#4a5568;
}

.page-video-converter h1,.page-video-converter h2,.page-video-converter h3,
.page-video-converter h4,.page-video-converter h5,.page-video-converter h6 { font-weight:800;line-height:1.2;color:var(--text-primary);letter-spacing:-0.02em; }

.page-video-converter h1 { font-size:3.5rem;margin-bottom:1.5rem;text-align:left;background:linear-gradient(135deg,#1a1a1a 0%,#2d3748 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.page-video-converter h2 { font-size:2.6rem;margin-bottom:1.5rem;text-align:center; }
.page-video-converter h3 { font-size:1.5rem;margin-bottom:1rem;text-align:left; }
.page-video-converter h4 { font-size:1.3rem;margin-bottom:1rem;font-weight:700; }
.page-video-converter .lead { font-size:1.2rem;color:var(--text-secondary);margin-bottom:2rem;line-height:1.7;font-weight:400; }

.page-video-converter .hero-section { padding:100px 0 80px;background:linear-gradient(135deg,#f8fbff 0%,#e8f4ff 100%);position:relative;overflow:hidden;margin-top:0; }
.page-video-converter .hero-section::before { content:'';position:absolute;top:-50%;right:-20%;width:80%;height:150%;background:radial-gradient(circle,rgba(62,154,255,0.08) 0%,transparent 70%);z-index:0;animation:vcFloat 20s ease-in-out infinite; }
@keyframes vcFloat { 0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(30px,-30px) rotate(3deg)}66%{transform:translate(-20px,20px) rotate(-3deg)} }
.page-video-converter .hero-content { position:relative;z-index:2; }

.page-video-converter .btn-cta { padding:1.1rem 2.8rem;font-size:1.1rem;font-weight:600;border-radius:14px;border:none;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none; }

.page-video-converter .btn-primary-cta { background:var(--gradient-primary);color:white;box-shadow:0 10px 30px rgba(62,154,255,0.35);border:none;padding:1.1rem 2.8rem;font-size:1.1rem;font-weight:600;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:12px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1); }
.page-video-converter .btn-primary-cta:hover { background:linear-gradient(135deg,#2d7fd9 0%,#1a5fbf 100%);transform:translateY(-4px);box-shadow:0 15px 40px rgba(62,154,255,0.45);color:white; }

.page-video-converter .btn-outline-dark { border:2px solid var(--primary-color);color:var(--primary-color);background:transparent;box-shadow:0 6px 20px rgba(62,154,255,0.1);padding:1.1rem 2.8rem;border-radius:14px;font-weight:600;transition:all 0.4s cubic-bezier(0.4,0,0.2,1); }
.page-video-converter .btn-outline-dark:hover { background:var(--gradient-primary);color:white;border-color:transparent;transform:translateY(-4px);box-shadow:0 12px 30px rgba(62,154,255,0.3); }
.page-video-converter .button-group { display:flex;gap:1.5rem;align-items:center;flex-wrap:nowrap; }
.page-video-converter .vc-hero-badge { display:inline-flex;align-items:center;padding:0.35rem 0.9rem;border-radius:2rem;font-size:0.8rem;font-weight:500;letter-spacing:0.01em; }
.page-video-converter .vc-hero-badge-blue { background:rgba(62,154,255,0.1);color:#2563eb; }
.page-video-converter .vc-hero-badge-purple { background:rgba(124,58,237,0.1);color:#7c3aed; }
.page-video-converter .vc-hero-badge-teal { background:rgba(13,188,153,0.1);color:#0dbc99; }

.page-video-converter .stats-container { margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(62,154,255,0.15); }
.page-video-converter .stats-item { text-align:center;position:relative; }
.page-video-converter .stats-number { font-size:2.2rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.3rem;line-height:1;letter-spacing:-0.02em; }
.page-video-converter .stats-label { font-size:0.85rem;font-weight:400;color:var(--text-secondary); }

.page-video-converter .hero-image-container { position:relative;z-index:2;padding-left:2rem; }
.page-video-converter .hero-image-container::before { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:120%;background:radial-gradient(circle,rgba(62,154,255,0.1) 0%,transparent 70%);border-radius:50%;z-index:-1; }
.page-video-converter .hero-image-container img { width:100%;height:auto;border-radius:24px;box-shadow:0 30px 60px rgba(0,0,0,0.15);transition:transform 0.6s ease,box-shadow 0.6s ease;border:1px solid rgba(255,255,255,0.5); }
.page-video-converter .hero-image-container img:hover { transform:translateY(-12px) scale(1.02);box-shadow:0 40px 80px rgba(0,0,0,0.2); }

.page-video-converter .feature-icon { display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background:var(--primary-light);border-radius:16px;color:var(--primary-color);font-size:1.6rem;margin-bottom:1.5rem;transition:none; }

/* video-converter .vc-card .card */
.page-video-converter .vc-card { border:none;border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,0.06);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);overflow:hidden;height:100%;background:white;position:relative; }
.page-video-converter .vc-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);opacity:0;transition:opacity 0.3s ease; }
.page-video-converter .vc-card:hover { transform:translateY(-6px);box-shadow:0 12px 30px rgba(62,154,255,0.12); }
.page-video-converter .vc-card:hover::before { opacity:1; }
.page-video-converter .vc-card .card-body { padding:2rem; }
/* */
.page-video-converter #formats .vc-card { box-shadow:0 2px 12px rgba(0,0,0,0.06);border-radius:16px; }
.page-video-converter #formats .vc-card-body { padding:1.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;text-align:center; }
.page-video-converter #formats .feature-icon { width:48px;height:48px;font-size:1.3rem;margin-bottom:0.85rem;flex-shrink:0; }
.page-video-converter #formats .format-title { font-size:0.95rem;font-weight:600;color:var(--text-dark);margin-bottom:0.4rem;line-height:1.3; }
.page-video-converter #formats .format-desc { font-size:0.78rem;line-height:1.55;color:#94a3b8;margin-bottom:0; }

.page-video-converter .feature-table { border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.08);border:none; }
.page-video-converter .feature-table thead th { background:var(--gradient-primary);color:white;border:none;padding:1.8rem 1.5rem;font-weight:600;font-size:1.1rem;letter-spacing:0.02em; }
.page-video-converter .feature-table tbody td { padding:1.5rem;vertical-align:middle;border-color:rgba(0,0,0,0.04);transition:background-color 0.2s ease; }
.page-video-converter .feature-table tbody tr:hover td { background-color:rgba(62,154,255,0.03); }

.page-video-converter section { padding:7rem 0;position:relative; }
.page-video-converter .hero-section { padding:100px 0 80px!important; }

.page-video-converter .image-reference { margin:3rem 0;text-align:center; }
.page-video-converter .image-reference img { max-width:100%;height:auto;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,0.12);transition:transform 0.4s ease; }
.page-video-converter .image-reference img:hover { transform:scale(1.02); }
.page-video-converter .image-caption { font-size:0.95rem;color:#718096;margin-top:1rem;font-style:italic; }

@keyframes vcFadeInUp   { from{opacity:0;transform:translateY(40px)}  to{opacity:1;transform:translateY(0)} }
@keyframes vcFadeInLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes vcFadeInRight{ from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:translateX(0)} }
.page-video-converter .animate-fade-in    { animation:vcFadeInUp    1s ease forwards;opacity:0; }
.page-video-converter .animate-fade-left  { animation:vcFadeInLeft  1s ease forwards;opacity:0; }
.page-video-converter .animate-fade-right { animation:vcFadeInRight 1s ease forwards;opacity:0; }
.page-video-converter .delay-1{animation-delay:0.15s}.page-video-converter .delay-2{animation-delay:0.3s}.page-video-converter .delay-3{animation-delay:0.45s}.page-video-converter .delay-4{animation-delay:0.6s}

/* py-6 */
.page-video-converter .py-6 { padding-top:5rem!important;padding-bottom:5rem!important; }
.page-video-converter .vc-windows-icon { font-size:4rem; }
.page-video-converter .feature-icon-sm { width:50px!important;height:50px!important;font-size:1.3rem!important; }
.page-video-converter .feature-icon-light { width:70px;height:70px;background:#f8f9fa;color:var(--primary-color);box-shadow:none; }

/* / */
.page-video-converter .bg-dark h2,
/* vc-faq-accordion */
.page-video-converter .vc-faq-accordion .accordion-item { border:2px solid #e2e8f0;border-radius:1rem!important;margin-bottom:1rem;overflow:hidden; }
.page-video-converter .vc-faq-accordion .accordion-button { background:white;color:#1e293b;font-weight:600;font-size:1.05rem;padding:1.25rem 1.5rem;border:none; }
.page-video-converter .vc-faq-accordion .accordion-button i { color:var(--primary-color); }
.page-video-converter .vc-faq-accordion .accordion-button:not(.collapsed) { background:rgba(62,154,255,0.05);color:var(--primary-dark);box-shadow:none; }
.page-video-converter .vc-faq-accordion .accordion-button:focus { box-shadow:0 0 0 3px rgba(62,154,255,0.15); }
.page-video-converter .vc-faq-accordion .accordion-button::after { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233E9AFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.page-video-converter .vc-faq-accordion .accordion-body { padding:1.5rem;color:#64748b;line-height:1.7; }

/* ===== 8. Page: Video Compressor (.page-video-compressor) ===== */
.page-video-compressor { --primary-color:#2cd0a1;--primary-dark:#1fa885;--border-color:#e2e8f0;--text-dark:#1e293b;--text-light:#64748b; }

.page-video-compressor .hero-section { background:linear-gradient(135deg,#f8fafc 0%,#ffffff 100%);padding:100px 0 80px;position:relative;overflow:hidden; }
.page-video-compressor .hero-title { font-size:3.5rem;font-weight:800;line-height:1.2;margin-bottom:1.5rem; }
.page-video-compressor .hero-title span { color:var(--primary-color); }
.page-video-compressor .hero-subtitle { font-size:1.25rem;color:var(--text-light);margin-bottom:2rem;max-width:600px; }

.page-video-compressor .badge-offline { background:rgba(44,208,161,0.1);color:var(--primary-color);padding:0.5rem 1rem;font-weight:500;border-radius:2rem; }
.page-video-compressor .badge-windows { background:rgba(37,99,235,0.1);color:#2563eb;padding:0.5rem 1rem;font-weight:500;border-radius:2rem; }
.page-video-compressor .badge-feature { background:#f8fafc;color:var(--text-dark);font-weight:400;padding:0.5rem 1rem;border-radius:2rem; }

.page-video-compressor .btn-cta { padding:0.75rem 1.5rem;border-radius:0.5rem;font-weight:600;transition:all 0.3s ease; }
.page-video-compressor .btn-primary-cta { background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border:none;color:white;padding:0.75rem 1.5rem;border-radius:0.5rem;font-weight:600;transition:all 0.3s ease; }
.page-video-compressor .btn-primary-cta:hover { transform:translateY(-2px);box-shadow:0 10px 20px rgba(44,208,161,0.3);color:white; }
.page-video-compressor .btn-outline-light-cta { background:white;border:2px solid var(--border-color);color:var(--text-dark);padding:0.75rem 1.5rem;border-radius:0.5rem;font-weight:600;transition:all 0.3s ease; }
.page-video-compressor .btn-outline-light-cta:hover { border-color:var(--primary-color);color:var(--primary-color); }
.page-video-compressor .btn-buy-now { background:white;border:2px solid var(--primary-color);color:var(--primary-color);padding:0.75rem 1.5rem;border-radius:0.5rem;font-weight:600;transition:all 0.3s ease;display:inline-flex;align-items:center; }
.page-video-compressor .btn-buy-now:hover { background:var(--primary-color);color:white;transform:translateY(-2px);box-shadow:0 10px 20px rgba(44,208,161,0.25); }

.page-video-compressor .stat-number { font-size:2.5rem;font-weight:700;color:var(--primary-color); }
.page-video-compressor .stat-label  { color:var(--text-light);font-size:0.9rem; }

.page-video-compressor .screenshot-container { border-radius:1rem;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);border:1px solid var(--border-color); }

.page-video-compressor .feature-card,.page-video-compressor .use-case-card { background:white;border-radius:1rem;padding:2rem;height:100%;border:1px solid var(--border-color);transition:all 0.3s ease; }
.page-video-compressor .feature-card:hover,.page-video-compressor .use-case-card:hover { transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,0.1); }
.page-video-compressor .use-case-card { text-align:center; }
.page-video-compressor .feature-icon { width:60px;height:60px;background:rgba(44,208,161,0.1);border-radius:1rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem; }
.page-video-compressor .feature-icon i { font-size:1.5rem;color:var(--primary-color); }
.page-video-compressor .feature-title { font-weight:700;font-size:1.25rem;margin-bottom:1rem; }
.page-video-compressor .feature-description { color:var(--text-light); }
.page-video-compressor .use-case-icon { width:80px;height:80px;background:rgba(44,208,161,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem; }
.page-video-compressor .use-case-icon i { font-size:2rem;color:var(--primary-color); }

.page-video-compressor .stats-container { background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border-radius:1rem;padding:3rem;color:white; }
.page-video-compressor .stats-container .stat-number { color:white;font-size:3rem; }
.page-video-compressor .stats-container .stat-label  { color:rgba(255,255,255,0.9);font-size:1rem; }

.page-video-compressor .step-icon { width:100px;height:100px;background:rgba(44,208,161,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem; }
.page-video-compressor .step-icon i { font-size:2.5rem;color:var(--primary-color); }
.page-video-compressor .step-number { width:50px;height:50px;background:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:white;font-weight:700;font-size:1.5rem; }

.page-video-compressor .format-card { background:white;border:1px solid var(--border-color);border-radius:0.75rem;padding:1.5rem;text-align:center;transition:all 0.3s ease; }
.page-video-compressor .format-card:hover { border-color:var(--primary-color);transform:translateY(-3px); }

.page-video-compressor .vc-faq-accordion .accordion-item {
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.page-video-compressor .vc-faq-accordion .accordion-button {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a;
  background: #ffffff;
  padding: 1.2rem 1.5rem;
  box-shadow: none;
  overflow: visible;
}

/* FAQ title: allow wrapping (match screen-recorder behavior) */
.page-video-compressor .vc-faq-accordion .accordion-button .vc-faq-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

.page-video-compressor .vc-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: rgba(44,208,161,0.04);
  box-shadow: none;
}
.page-video-compressor .vc-faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232CD0A1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  width: 1.2rem;
  height: 1.2rem;
  background-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.page-video-compressor .vc-faq-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232CD0A1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.page-video-compressor .vc-faq-accordion .accordion-body {
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #475569;
}
.page-video-compressor .format-card-main { border:2px solid var(--primary-color);box-shadow:0 10px 20px rgba(44,208,161,0.1); }
.page-video-compressor .format-icon { width:60px;height:60px;background:rgba(44,208,161,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem; }
.page-video-compressor .format-icon i { font-size:1.5rem;color:var(--primary-color); }
.page-video-compressor .format-name { font-weight:600;margin-bottom:0.5rem; }
.page-video-compressor .format-description { color:var(--text-light);font-size:0.875rem; }

.page-video-compressor .membership-feature { display:flex;align-items:center;margin-bottom:0.5rem; }
.page-video-compressor .membership-feature i { margin-right:0.5rem; }

.page-video-compressor .decor-circle { position:absolute;width:300px;height:300px;border-radius:50%;background:linear-gradient(135deg,rgba(44,208,161,0.1),transparent);pointer-events:none; }
.page-video-compressor .decor-circle-1 { top:-150px;right:-150px; }
.page-video-compressor .decor-circle-2 { bottom:-150px;left:-150px; }

@keyframes vcompFadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.page-video-compressor .animate-fadeInUp { animation:vcompFadeInUp 0.6s ease-out; }

/* ===== 9. Page: Audio Cutter (.page-audio-cutter) ===== */
.page-audio-cutter {
  --primary-color:#27b765;--primary-light:#e9f8ef;--primary-dark:#1e9c52;
  --gradient-primary:linear-gradient(135deg,#27b765 0%,#1e9c52 100%);
  --shadow-primary:0 6px 20px rgba(39,183,101,0.25);
  --text-primary:#333333;--text-secondary:#666666;
}

.page-audio-cutter .navbar-scrolled { padding:0.7rem 0;box-shadow:0 4px 20px rgba(0,0,0,0.1); }

.page-audio-cutter .windows-badge { background:rgba(39,183,101,0.1)!important;border:none!important;color:var(--primary-color)!important;padding:0.35rem 0.9rem!important;font-size:0.8rem;font-weight:500;border-radius:2rem; }
.page-audio-cutter .security-badge { background:rgba(25,135,84,0.08)!important;border:none!important;color:#198754!important;padding:0.35rem 0.9rem!important;font-size:0.8rem;font-weight:500;border-radius:2rem; }

.page-audio-cutter .hero-section { padding:100px 0 80px;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);position:relative;overflow:hidden; }
.page-audio-cutter .hero-title { font-size:3.5rem;font-weight:900;margin-bottom:1.5rem;color:#1a1a1a;line-height:1.2; }
.page-audio-cutter .hero-title span { color:var(--primary-color);position:relative; }
.page-audio-cutter .hero-title span::after { content:'';position:absolute;bottom:5px;left:0;width:100%;height:8px;background-color:rgba(39,183,101,0.15);z-index:-1;border-radius:4px; }
.page-audio-cutter .hero-subtitle { font-size:1.2rem;color:var(--text-secondary);margin-bottom:2rem;font-weight:400;max-width:600px; }

.page-audio-cutter .btn-cta { padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:12px;transition:all 0.3s ease;border:none; }
.page-audio-cutter .btn-primary-cta { background:var(--gradient-primary);color:white;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:12px;border:none;transition:all 0.3s ease; }
.page-audio-cutter .btn-primary-cta:hover { transform:translateY(-3px);box-shadow:var(--shadow-primary);color:white; }
.page-audio-cutter .btn-outline-primary-cta { background:transparent;color:var(--primary-color);border:2px solid var(--primary-color);padding:1rem 2.5rem;border-radius:12px;font-weight:600;transition:all 0.3s ease; }
.page-audio-cutter .btn-outline-primary-cta:hover { background:var(--primary-color);color:white;transform:translateY(-3px);box-shadow:var(--shadow-primary); }

.page-audio-cutter .software-screenshot-container { position:relative;border-radius:20px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,0.15);transition:transform 0.3s ease; }
.page-audio-cutter .software-screenshot-container:hover { transform:translateY(-5px);box-shadow:0 25px 50px rgba(0,0,0,0.15); }
.page-audio-cutter .software-screenshot { width:100%;height:auto;display:block; }

.page-audio-cutter .feature-card { background:#ffffff;border-radius:20px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:all 0.3s ease;height:100%;border:1px solid rgba(0,0,0,0.05); }
.page-audio-cutter .feature-card:hover { transform:translateY(-8px);box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.page-audio-cutter .feature-card .card-body { padding:2.5rem; }
.page-audio-cutter .feature-icon { display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;background:var(--primary-light);border-radius:18px;color:var(--primary-color);font-size:2rem;margin-bottom:1.5rem;box-shadow:none; }

.page-audio-cutter .tools-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem;margin-top:2rem; }
.page-audio-cutter .tool-card { background:white;border-radius:12px;padding:1.5rem;display:flex;align-items:center;gap:1.2rem;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.05);transition:all 0.3s ease;min-height:85px; }
.page-audio-cutter .tool-card:hover { transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,0.08);border-color:var(--primary-color); }
.page-audio-cutter .tool-icon { width:60px;height:60px;min-width:60px;background:var(--primary-light);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--primary-color);font-size:1.8rem;flex-shrink:0; }
.page-audio-cutter .tool-card h6 { font-size:1rem;font-weight:700;margin-bottom:0.3rem;line-height:1.3; }
.page-audio-cutter .tool-card p  { font-size:0.85rem;color:var(--text-secondary);margin-bottom:0;line-height:1.4; }

.page-audio-cutter .use-case-card { background:#ffffff;border-radius:20px;padding:2.5rem 2rem;height:100%;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:all 0.3s ease;border:1px solid rgba(0,0,0,0.05); }
.page-audio-cutter .use-case-card:hover { transform:translateY(-5px);box-shadow:0 8px 24px rgba(0,0,0,0.12); }

.page-audio-cutter .process-step { display:flex;align-items:flex-start;margin-bottom:2.5rem;padding:2.5rem 2rem;background:#ffffff;border-radius:20px;box-shadow:0 4px 12px rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.05); }
.page-audio-cutter .step-number { display:flex;align-items:center;justify-content:center;width:60px;height:60px;min-width:60px;background:var(--gradient-primary);color:white;border-radius:50%;font-weight:700;font-size:1.5rem;margin-right:2rem; }

.page-audio-cutter .section-title { font-size:2.8rem;font-weight:800;margin-bottom:1.5rem;text-align:center;color:#1a1a1a;display:block;width:100%; }
.page-audio-cutter .section-subtitle { font-size:1.2rem;color:var(--text-secondary);text-align:center;max-width:800px;margin:0 auto 3rem;line-height:1.8;font-weight:400; }

.page-audio-cutter .stat-number { font-size:2.2rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:0.3rem; }
.page-audio-cutter .stat-label { font-size:0.85rem;font-weight:400;color:var(--text-secondary);margin-bottom:0; }

.page-audio-cutter .why-section { background:linear-gradient(135deg,#f9fafb 0%,#f3f4f6 100%);border-radius:20px;padding:3.5rem;box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.page-audio-cutter .why-card { background:white;border-radius:15px;padding:2.5rem 2rem;margin-bottom:2rem;box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:transform 0.3s ease;border-left:4px solid var(--primary-color); }
.page-audio-cutter .why-card:hover { transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.page-audio-cutter .why-card-icon { font-size:2.5rem;color:var(--primary-color);margin-bottom:1.5rem; }
.page-audio-cutter .why-card h3 { font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:#1a1a1a; }
.page-audio-cutter .why-tip-box { background:linear-gradient(135deg,rgba(39,183,101,0.1) 0%,rgba(39,183,101,0.05) 100%);border-radius:15px;padding:2rem;border-left:4px solid var(--primary-color); }
.page-audio-cutter .why-tip-box h5 { color:var(--primary-color);font-weight:700;margin-bottom:1rem; }

.page-audio-cutter .faq-accordion .accordion-item { border:1px solid rgba(0,0,0,0.1);border-radius:12px;margin-bottom:1rem;overflow:hidden; }
.page-audio-cutter .faq-accordion .accordion-button { background:white;color:#1a1a1a;font-weight:600;font-size:1.1rem;padding:1.5rem 2rem;border:none;box-shadow:none; }
.page-audio-cutter .faq-accordion .accordion-button:not(.collapsed) { background:var(--primary-light);color:var(--primary-color); }
.page-audio-cutter .faq-accordion .accordion-body { padding:1.5rem 2rem;background:white;font-size:1rem;line-height:1.7; }
.page-audio-cutter .faq-icon { margin-right:1rem;color:var(--primary-color); }

.page-audio-cutter .feature-table { border-radius:15px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.08);border:1px solid #e5e7eb; }
.page-audio-cutter .feature-table th { background:var(--gradient-primary);color:white;font-weight:600;padding:1.2rem 1.5rem;border:none; }
.page-audio-cutter .feature-table td { padding:1.2rem 1.5rem;vertical-align:middle;border-color:#f1f5f9; }
.page-audio-cutter .premium-badge { background:linear-gradient(135deg,#ffb347,#ffcc33);color:#8a5100;font-weight:600;padding:0.5rem 1rem;border-radius:20px;font-size:0.85rem;display:inline-block; }

.page-audio-cutter .download-card { background:#ffffff;border-radius:25px;box-shadow:0 12px 48px rgba(0,0,0,0.15);overflow:hidden;border:none; }

.page-audio-cutter .benefit-item { display:flex;align-items:center;margin-bottom:1.5rem; }
.page-audio-cutter .benefit-icon { width:50px;height:50px;min-width:50px;background:var(--primary-light);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-right:1rem;color:var(--primary-color);font-size:1.5rem; }

@keyframes acFadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.page-audio-cutter .fade-in { animation:acFadeIn 0.8s ease forwards; }

/* ===== 10. Page: Store (.page-store) ===== */
.page-store .store-hero-section {
  background: linear-gradient(135deg, rgba(44,208,161,0.08) 0%, rgba(31,168,133,0.12) 30%, rgba(99,102,241,0.05) 100%);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

.page-store .store-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(44,208,161,0.06) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(99,102,241,0.04) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.page-store .store-hero-section .container { position: relative; z-index: 1; }
.page-store .store-hero-section h1 { color: #1e293b; }
.page-store .store-hero-section .lead { color: #64748b; }

.page-store .store-feature-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(44,208,161,0.12);
  border: 1px solid rgba(44,208,161,0.40);
  color: #1e293b;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
}

.page-store .store-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 1199.98px) {
  .page-store .store-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.page-store .store-product-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(226,232,240,0.8);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.page-store .store-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.page-store .store-product-card-featured {
  border: 2px solid #00E1C5;
  box-shadow: 0 10px 30px rgba(0,225,197,0.15);
}

.page-store .store-product-card-suite {
  position: relative;
  border: 1px solid rgba(7, 210, 184, 0.45);
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(7, 210, 184, 0.18) 0%, rgba(7, 210, 184, 0) 45%),
    linear-gradient(145deg, #0f172a 0%, #111827 48%, #1f2937 100%);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.32), 0 0 0 1px rgba(7, 210, 184, 0.12) inset;
}

.page-store .store-product-card-suite::before {
  content: 'Best Value';
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #022c22;
  background: linear-gradient(135deg, #5eead4, #2dd4bf);
  box-shadow: 0 6px 14px rgba(45, 212, 191, 0.35);
}

.page-store .store-product-card-suite .store-product-title,
.page-store .store-product-card-suite .store-product-description,
.page-store .store-product-card-suite .store-feature-item,
.page-store .store-product-card-suite .store-price-current,
.page-store .store-product-card-suite .store-price-period,
.page-store .store-product-card-suite .store-price-original {
  color: #e2e8f0;
}

.page-store .store-product-card-suite .store-price-original {
  color: rgba(148, 163, 184, 0.9);
}

.page-store .store-product-card-suite .store-feature-item i {
  color: #5eead4;
}

.page-store .store-product-card-suite .store-btn-outline {
  border-color: #5eead4;
  color: #5eead4;
}

.page-store .store-product-card-suite .store-btn-outline:hover {
  background: rgba(94, 234, 212, 0.14);
  border-color: #99f6e4;
  color: #99f6e4;
}


.page-store .store-product-image {
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.page-store .store-product-icon-large {
  width: 100px; height: 100px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.page-store .store-icon-bg-1 { background: linear-gradient(135deg, #00E1C5, #00BFA5); }
.page-store .store-icon-bg-2 { background: linear-gradient(135deg, #3E9AFF, #2d7fd9); }
.page-store .store-icon-bg-3 { background: linear-gradient(135deg, #2CD0A1, #1fa885); }
.page-store .store-icon-bg-4 { background: linear-gradient(135deg, #27B765, #1e9c52); }
.page-store .store-icon-bg-5 { background: linear-gradient(135deg, #14B8A6, #0D9488); }
.page-store .store-icon-bg-suite { background: linear-gradient(135deg, #22d3ee, #06b6d4 40%, #14b8a6); }


.page-store .store-product-content {
  padding: 0 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.page-store .store-product-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #0f172a;
}

.page-store .store-product-description {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.page-store .store-product-features {
  margin-bottom: 1.5rem;
  flex: 1;
}

.page-store .store-feature-item {
  display: flex;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: #475569;
}

.page-store .store-feature-item i {
  color: #00E1C5;
  margin-right: 0.75rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.page-store .store-product-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 1.5rem;
}

.page-store .store-price-original {
  font-size: 1rem;
  color: #94a3b8;
  text-decoration: line-through;
}

.page-store .store-price-current {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
}

.page-store .store-price-period {
  font-size: 0.9rem;
  color: #64748b;
  margin-left: 2px;
}

.page-store .store-btn-outline {
  background: transparent;
  border: 2px solid #00E1C5;
  color: #00E1C5;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.6rem 1.2rem;
}

.page-store .store-btn-outline:hover {
  background: rgba(0,225,197,0.08);
  color: #00BFA5;
  border-color: #00BFA5;
}

.page-store .store-trust-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.page-store .store-trust-badge {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06);
  border: 1px solid rgba(226,232,240,0.8);
  transition: all 0.3s ease;
}

.page-store .store-trust-badge:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,225,197,0.1);
}

.page-store .store-trust-badge-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, rgba(0,225,197,0.1), rgba(0,225,197,0.05));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.6rem;
  color: #00E1C5;
}

/* support.html store-btn-outline */
.page-support .store-btn-outline {
  background: transparent;
  border: 2px solid #00E1C5;
  color: #00E1C5;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.6rem 1.2rem;
}

.page-support .store-btn-outline:hover {
  background: rgba(0,225,197,0.08);
  color: #00BFA5;
  border-color: #00BFA5;
}

/* Store FAQ accordion */
.page-store .store-faq-accordion .accordion-item {
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.page-store .store-faq-accordion .accordion-button {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a;
  background: #ffffff;
  padding: 1.2rem 1.5rem;
  box-shadow: none;
  overflow: visible;
}

/* FAQ title: allow wrapping (match screen-recorder behavior) */
.page-store .store-faq-accordion .accordion-button .store-faq-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

.page-store .store-faq-accordion .accordion-button:not(.collapsed) {
  color: #00BFA5;
  background: rgba(0,225,197,0.04);
  box-shadow: none;
}

.page-store .store-faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300BFA5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  width: 1.2rem;
  height: 1.2rem;
  background-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.page-store .store-faq-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300BFA5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.page-store .store-faq-accordion .accordion-body {
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #475569;
}

/* Store CTA */
.page-store .store-download-dropdown .dropdown-menu {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 0.5rem;
  min-width: 240px;
  margin-top: 0.5rem !important;
  overflow: hidden;
}

.page-store .store-download-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1e293b;
  transition: all 0.2s ease;
}

.page-store .store-download-dropdown .dropdown-item i {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.page-store .store-download-dropdown .dropdown-item:nth-child(1) i { background: rgba(0,225,197,0.12);  color: #00BFA5; }
.page-store .store-download-dropdown .dropdown-item:nth-child(2) i { background: rgba(62,154,255,0.12); color: #3E9AFF; }
.page-store .store-download-dropdown .dropdown-item:nth-child(3) i { background: rgba(44,208,161,0.12); color: #2CD0A1; }
.page-store .store-download-dropdown .dropdown-item:nth-child(4) i { background: rgba(39,183,101,0.12); color: #27B765; }

.page-store .store-download-dropdown .dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
  transform: none;
}

/* ===== 11. Page: Support (.page-support) ===== */
.page-support .support-hero {
  background: linear-gradient(135deg, rgba(44,208,161,0.08) 0%, rgba(31,168,133,0.12) 30%, rgba(99,102,241,0.05) 100%);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

.page-support .support-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(44,208,161,0.06) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(99,102,241,0.04) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.page-support .support-hero::after { content: none; }

.page-support .support-hero .container { position: relative; z-index: 1; }
.page-support .support-hero h1  { color: #1e293b; text-shadow: none; }
.page-support .support-hero .lead { color: #64748b; }

.page-support .support-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.page-support .support-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(44,208,161,0.12);
  border: 1px solid rgba(44,208,161,0.40);
  color: #1e293b;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
}

.page-support .support-search-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 15px 50px rgba(0,0,0,0.1);
  border: 1px solid rgba(226,232,240,0.8);
}

.page-support .support-search-icon {
  width: 70px; height: 70px;
  background: linear-gradient(135deg, rgba(0,225,197,0.12), rgba(0,225,197,0.06));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: #00E1C5;
}

.page-support .support-search-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0f172a;
}

.page-support .support-search-subtitle {
  color: #64748b;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.page-support .support-search-form { width: 100%; }

.page-support .support-search-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.page-support .support-search-input-group:focus-within {
  border-color: #00E1C5;
  box-shadow: 0 0 0 4px rgba(0,225,197,0.1);
}

.page-support .support-search-icon-inline {
  padding: 0 1rem 0 1.2rem;
  color: #94a3b8;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.page-support .support-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 1rem 0.5rem;
  font-size: 1rem;
  color: #0f172a;
  outline: none;
  box-shadow: none !important;
}

.page-support .support-search-input::placeholder { color: #94a3b8; }

.page-support .support-btn-search {
  background: linear-gradient(135deg, #00E1C5, #00BFA5);
  border: none;
  color: #ffffff;
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  margin: 2px;
  border-radius: 10px;
}

.page-support .support-btn-search:hover { background: linear-gradient(135deg, #00BFA5, #009688); }

.page-support .support-search-hint {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.page-support .support-guide-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem;
  height: 100%;
  box-shadow: 0 8px 25px rgba(0,0,0,0.07);
  border: 1px solid rgba(226,232,240,0.8);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.page-support .support-guide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0,225,197,0.12);
  border-color: rgba(0,225,197,0.3);
}

.page-support .support-guide-icon {
  width: 70px; height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.page-support .support-guide-icon-1 { background: linear-gradient(135deg, #00E1C5, #00BFA5); }
.page-support .support-guide-icon-2 { background: linear-gradient(135deg, #3E9AFF, #2d7fd9); }
.page-support .support-guide-icon-3 { background: linear-gradient(135deg, #2CD0A1, #1fa885); }
.page-support .support-guide-icon-4 { background: linear-gradient(135deg, #27B765, #1e9c52); }

.page-support .support-guide-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.75rem;
}

.page-support .support-guide-description {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 1rem;
  flex: 1;
}

.page-support .support-faq-section { padding: 1rem 0; }

.page-support .support-faq-accordion .accordion-item {
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.page-support .support-faq-accordion .accordion-button {
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a;
  background: #ffffff;
  padding: 1.2rem 1.5rem;
  box-shadow: none;
}

.page-support .support-faq-accordion .accordion-button:not(.collapsed) {
  color: #00BFA5;
  background: rgba(0,225,197,0.04);
  box-shadow: none;
}

.page-support .support-faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300BFA5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  width: 1.2rem;
  height: 1.2rem;
  background-size: 1.2rem;
  transition: transform 0.25s ease;
}

.page-support .support-faq-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300BFA5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.page-support .support-faq-accordion .accordion-body {
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #475569;
}

.page-support .support-contact-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 24px;
  padding: 4rem;
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.page-support .support-contact-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 40%, rgba(0,225,197,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.page-support .support-contact-section h2 { color: #ffffff; }
.page-support .support-contact-section .lead { color: rgba(255,255,255,0.8); }

.page-support .support-contact-icon {
  width: 80px; height: 80px;
  background: rgba(0,225,197,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2.2rem;
  color: #00E1C5;
}

/* ===== 12. ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fadeInUp {
  animation: fadeInUp 0.7s ease both;
}

/* ===== 13. ===== */
@media (max-width: 992px) {
  .page-video-converter h1 { font-size:3.2rem; }
  .page-video-converter h2 { font-size:2.5rem; }
  .page-video-converter h3 { font-size:2rem; }
  .page-video-converter section { padding:5rem 0; }
}

@media (max-width: 768px) {
  /* */
  body .back-to-top { width:45px;height:45px;bottom:20px;right:20px;font-size:1.3rem; }
  body .navbar .nav-link { padding:0.5rem 0.8rem !important;font-size:0.9rem; }
  body .navbar .dropdown-menu { min-width:230px; }
  body .navbar .dropdown-menu-online-tools { min-width: 0; width: 100%; }
  body .navbar .dropdown-menu-online-tools.show,
  body .navbar .dropdown-menu-online-tools[data-bs-popper] {
    display: block !important;
    flex-direction: column;
  }
  body .navbar .dropdown-menu-online-tools > .dropdown-online-tools-col {
    flex: none;
    width: 100%;
    min-width: 0;
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0.15rem !important;
    border-bottom: 1px solid #eef2f7;
    padding-bottom: 0.35rem;
    margin-bottom: 0.25rem;
  }
  body .navbar .dropdown-menu-online-tools > .dropdown-online-tools-col:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  body .navbar .dropdown-menu-online-tools > .dropdown-online-tools-col:first-child {
    border-right: none;
  }
  body .navbar .dropdown-online-tools-video-grid {
    grid-template-columns: 1fr;
  }
  body .navbar .dropdown-item i { width:36px;font-size:1.6rem; }
  body .navbar .dropdown-item-img { width:40px;height:40px; }
  body .navbar .dropdown-item-img img { width:28px;height:28px; }
  body .section-title  { font-size:2.2rem; }
  body .section-subtitle { font-size:1.1rem;margin-bottom:3rem; }

  /* home */
  .page-home .hero-title   { font-size:2.5rem; }
  .page-home .hero-subtitle{ font-size:1.1rem; }
  .page-home .hero-stats   { flex-wrap:wrap;gap:2rem; }
  .page-home .stat-number  { font-size:2rem; }
  .page-home .hero-graphic { display:none; }
  .page-home .btn-signin,.page-home .btn-upgrade { height:36px;padding:0 0.8rem;font-size:0.85rem;min-width:70px; }
  .page-home .hero-product-card { padding:1rem 1.25rem; }
  .page-home .hero-card-icon-teal,
  .page-home .hero-card-icon-blue,
  .page-home .hero-card-icon-green,
  .page-home .hero-card-icon-lime { width:44px; height:44px; min-width:44px; min-height:44px; flex-shrink:0; display:flex; }
  .page-home .hero-card-icon-teal i,
  .page-home .hero-card-icon-blue i,
  .page-home .hero-card-icon-green i,
  .page-home .hero-card-icon-lime i { font-size:1.2rem; }
  .page-home .hero-product-card h5 { font-size:1rem; }
  .page-home .hero-product-card .badge { font-size:0.75rem; }

  /* screen-recorder */
  .page-screen-recorder .hero-title   { font-size:2.5rem;letter-spacing:-0.01em; }
  .page-screen-recorder .hero-subtitle{ font-size:1.1rem;line-height:1.6; }
  .page-screen-recorder .section-title{ font-size:2.2rem;letter-spacing:0; }
  .page-screen-recorder .section-subtitle{ font-size:1.1rem;line-height:1.6;margin-bottom:3rem; }
  .page-screen-recorder .hero-stats{ justify-content:space-between;gap:1rem; }
  .page-screen-recorder .stat-number{ font-size:1.8rem; }
  .page-screen-recorder .footer-dots{ display:none; }

  /* video-converter */
  .page-video-converter .hero-section { padding:80px 0 60px!important;margin-top:0; }
  .page-video-converter h1 { font-size:2.5rem;text-align:center; }
  .page-video-converter h2 { font-size:1.9rem; }
  .page-video-converter h3 { font-size:1.35rem;text-align:center; }
  .page-video-converter .lead { font-size:1.1rem;text-align:center; }
  .page-video-converter .hero-image-container { padding-left:0;margin-top:3rem; }
  .page-video-converter .button-group { flex-direction:column;width:100%;gap:1rem; }
  .page-video-converter .button-group .btn-cta { width:100%; }
  .page-video-converter section { padding:4rem 0; }
  .page-video-converter .stats-number { font-size:2rem; }
  .page-video-converter .feature-table { font-size:0.875rem; }
  .page-video-converter .feature-table thead th,.page-video-converter .feature-table tbody td { padding:1.2rem 0.8rem; }
  .page-video-converter .hero-image-container img { max-height:380px;object-fit:contain; }
  .page-video-converter .vc-card .card-body { padding:2rem; }
  .page-video-converter .feature-icon { width:54px;height:54px;font-size:1.4rem; }

  /* video-compressor */
  .page-video-compressor .hero-title { font-size:2.5rem; }
  .page-video-compressor .hero-subtitle { font-size:1.1rem; }
  .page-video-compressor .feature-card,.page-video-compressor .use-case-card { padding:1.5rem; }
  .page-video-compressor .stats-container { padding:2rem 1rem; }
  .page-video-compressor .format-card { padding:1.25rem; }

  /* audio-cutter */
  .page-audio-cutter .hero-title   { font-size:2.5rem; }
  .page-audio-cutter .section-title{ font-size:2.2rem; }
  .page-audio-cutter .process-step { flex-direction:column;text-align:center; }
  .page-audio-cutter .step-number  { margin-right:0;margin-bottom:1.5rem; }
  .page-audio-cutter .tools-grid   { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .page-audio-cutter .why-section  { padding:2rem; }

  /* store */
  .page-store .store-hero-section { padding:70px 0 50px; }
  .page-store .store-product-grid { grid-template-columns:1fr; }
  .page-store .store-product-image { min-height:120px;padding:1.5rem; }
  .page-store .store-product-icon-large { width:80px;height:80px;font-size:2.2rem; }
  .page-store .store-product-content { padding:0 1.5rem 1.5rem; }
  .page-store .store-price-current { font-size:1.6rem; }
  .page-store .store-trust-badges { grid-template-columns:repeat(2,1fr); }
  .page-store .store-trust-badge { padding:1.5rem 1rem; }

  /* support */
  .page-support .support-hero { padding:70px 0 50px; }
  .page-support .support-hero-badges { flex-direction:column;align-items:center; }
  .page-support .support-search-box { padding:2rem 1.5rem; }
  .page-support .support-contact-section { padding:2.5rem 1.5rem; }
  .page-support .support-guide-card { padding:1.5rem; }
}

@media (max-width: 576px) {
  .page-video-converter h1 { font-size:2rem; }
  .page-video-converter h2 { font-size:1.6rem; }
  .page-video-converter h3 { font-size:1.2rem; }
  .page-video-converter .lead { font-size:1rem; }
  .page-video-converter .btn-cta { padding:0.9rem 2rem;font-size:1rem; }
  .page-video-converter .stats-number { font-size:1.75rem; }

  .page-audio-cutter .hero-title   { font-size:2rem; }
  .page-audio-cutter .section-title{ font-size:1.8rem; }
  .page-audio-cutter .tools-grid   { grid-template-columns:1fr; }
  .page-audio-cutter .tool-card    { min-height:80px;padding:1.2rem; }
  .page-audio-cutter .tool-icon    { width:50px;height:50px;min-width:50px;font-size:1.5rem; }

  /* store */
  .page-store .store-trust-badges { grid-template-columns:1fr; }

  /* support */
  .page-support .support-search-box { padding:1.5rem 1rem; }
  .page-support .support-search-input { font-size:0.9rem; }
}

@media (max-width: 991.98px) {
  body .navbar-nav {
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
  }

  /* Mobile navbar: make each link row fully clickable */
  body .navbar-collapse .navbar-nav .nav-item {
    width: 100%;
  }

  body .navbar-collapse .navbar-nav .nav-link {
    display: block;
    width: 100%;
  }

  /* Mobile: remove the blue focus ring on the "Our Products" dropdown trigger */
  body .navbar-collapse .navbar-nav .dropdown-toggle:focus,
  body .navbar-collapse .navbar-nav .dropdown-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  body .navbar-collapse .d-flex {
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  body .navbar-collapse .btn-signin,
  body .navbar-collapse .btn-upgrade {
    width: 100%;
    justify-content: flex-start;
    padding-left: 1rem;
  }

  body .navbar-collapse .btn-signin { margin-right: 0 !important; }

  body .navbar-collapse .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    box-shadow: none;
    margin-top: 0.25rem;
  }

  body .navbar-collapse .dropdown-menu.show { display: block; }

  body .navbar-collapse .dropdown-menu-online-tools.show,
  body .navbar-collapse .dropdown-menu-online-tools[data-bs-popper] {
    display: block !important;
    inset: auto !important;
    left: auto !important;
    transform: none !important;
  }
}

/* ===== Legal Pages (.page-legal) ===== */
.page-legal.main-content {
  padding: 100px 0 60px;
  background: linear-gradient(135deg, rgba(0,225,197,0.02) 0%, rgba(248,250,252,1) 100%);
  min-height: calc(100vh - 400px);
}
.page-legal .page-header { text-align: center; margin-bottom: 3rem; }
.page-legal .page-title { font-size: 2.5rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; letter-spacing: -0.5px; }
.page-legal .page-subtitle { font-size: 1.1rem; color: #64748b; max-width: 600px; margin: 0 auto 2rem auto; }
.page-legal .update-info {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(59,130,246,0.1); color: #3b82f6;
  padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 500;
}

/* terms/refund/privacy/cookies */
.page-legal .legal-container {
  background: white; border-radius: 16px; padding: 3rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05); border: 1px solid #e2e8f0;
}
.page-legal .intro-section {
  background: rgba(0,225,197,0.05); border-left: 4px solid #00E1C5;
  padding: 1.5rem; border-radius: 0 12px 12px 0; margin-bottom: 3rem;
}
.page-legal .intro-text { color: #334155; line-height: 1.7; margin: 0; }

/* */
.page-legal .legal-sections { list-style: none; padding: 0; }
.page-legal .legal-section { margin-bottom: 2.5rem; position: relative; }
.page-legal .legal-section:last-child { margin-bottom: 0; }
.page-legal .legal-section .section-title {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: 1.3rem; font-weight: 700; color: #0f172a; margin-bottom: 1rem;
}
.page-legal .legal-section .section-title::before {
  flex-shrink: 0; min-width: 2rem; display: inline-block;
  color: #00E1C5; font-weight: 700; font-size: 1.2rem; line-height: 1;
}
.page-legal .legal-section:nth-child(1)  .section-title::before { content: "1."; }
.page-legal .legal-section:nth-child(2)  .section-title::before { content: "2."; }
.page-legal .legal-section:nth-child(3)  .section-title::before { content: "3."; }
.page-legal .legal-section:nth-child(4)  .section-title::before { content: "4."; }
.page-legal .legal-section:nth-child(5)  .section-title::before { content: "5."; }
.page-legal .legal-section:nth-child(6)  .section-title::before { content: "6."; }
.page-legal .legal-section:nth-child(7)  .section-title::before { content: "7."; }
.page-legal .legal-section:nth-child(8)  .section-title::before { content: "8."; }
.page-legal .legal-section:nth-child(9)  .section-title::before { content: "9."; }
.page-legal .legal-section:nth-child(10) .section-title::before { content: "10."; }
.page-legal .legal-section:nth-child(11) .section-title::before { content: "11."; }
.page-legal .legal-section:nth-child(12) .section-title::before { content: "12."; }

.page-legal .section-content { color: #475569; line-height: 1.7; padding-left: 2.5rem; }
.page-legal .section-content p { margin-bottom: 0.8rem; }
.page-legal .section-content p:last-child { margin-bottom: 0; }

.page-legal .sub-points { list-style: none; padding: 0; margin: 1rem 0 0 0; }
.page-legal .sub-points li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.page-legal .sub-points li::before { content: "•"; position: absolute; left: 0; color: #00E1C5; font-weight: bold; }

/* / */
.page-legal .highlight-contact {
  background: linear-gradient(135deg, rgba(0,225,197,0.1), rgba(62,154,255,0.1));
  border: 1px solid rgba(0,225,197,0.2); border-radius: 12px;
  padding: 1.5rem; margin-top: 1.5rem;
}
.page-legal .important-note {
  background: linear-gradient(135deg, rgba(255,193,7,0.1), rgba(255,193,7,0.05));
  border-left: 4px solid #FFC107; padding: 1.5rem;
  border-radius: 0 12px 12px 0; margin: 2rem 0 0;
}
.page-legal .note-title { color: #E65100; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; }
.page-legal .contact-email { color: #00E1C5; font-weight: 600; text-decoration: none; }
.page-legal .contact-email:hover { text-decoration: underline; }

/* */
.page-legal .non-refundable {
  background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.05));
  border-left: 4px solid #EF4444; padding: 1.5rem; border-radius: 0 12px 12px 0; margin: 1.5rem 0;
}
.page-legal .non-refundable-title { color: #DC2626; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; }
.page-legal .refundable {
  background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(34,197,94,0.05));
  border-left: 4px solid #22C55E; padding: 1.5rem; border-radius: 0 12px 12px 0; margin: 1.5rem 0;
}
.page-legal .refundable-title { color: #16A34A; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; }
.page-legal .refund-conditions { list-style: none; padding: 0; margin: 1rem 0 0 0; }
.page-legal .refund-conditions li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.page-legal .refund-conditions li::before { content: "•"; position: absolute; left: 0; color: #00E1C5; font-weight: bold; }
.page-legal .contact-section {
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.05));
  border: 1px solid rgba(59,130,246,0.2); border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem;
}

/* Cookie */
.page-legal .cookie-definition {
  background: linear-gradient(135deg, rgba(0,225,197,0.1), rgba(62,154,255,0.1));
  border-left: 4px solid #00E1C5; padding: 1.5rem; border-radius: 0 12px 12px 0; margin-bottom: 3rem;
}
.page-legal .definition-title { color: #0f172a; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; }
.page-legal .definition-text { color: #334155; line-height: 1.7; margin: 0; }
.page-legal .cookie-content { color: #475569; line-height: 1.7; }
.page-legal .cookie-content p { margin-bottom: 1.5rem; }
.page-legal .cookie-content p:last-child { margin-bottom: 0; }
.page-legal .cookie-table { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.page-legal .cookie-table th { background: linear-gradient(135deg, rgba(0,225,197,0.2), rgba(62,154,255,0.2)); color: #0f172a; font-weight: 600; padding: 1rem 1.5rem; text-align: left; }
.page-legal .cookie-table td { padding: 1rem 1.5rem; border-top: 1px solid #e2e8f0; }
.page-legal .cookie-table tbody tr:nth-child(even) { background-color: rgba(248,250,252,0.5); }
.page-legal .cookie-table tbody tr:hover { background-color: rgba(0,225,197,0.05); }
.page-legal .cookie-type { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem; font-weight: 500; }
.page-legal .cookie-type.essential  { background: rgba(34,197,94,0.1);   color: rgb(21,128,61); }
.page-legal .cookie-type.functional { background: rgba(59,130,246,0.1);  color: rgb(30,64,175); }
.page-legal .cookie-type.analytical { background: rgba(168,85,247,0.1);  color: rgb(107,33,168); }
.page-legal .cookie-type.marketing  { background: rgba(239,68,68,0.1);   color: rgb(185,28,28); }
.page-legal .cookie-management {
  background: linear-gradient(135deg, rgba(255,193,7,0.1), rgba(255,193,7,0.05));
  border-left: 4px solid #FFC107; padding: 1.5rem; border-radius: 0 12px 12px 0; margin: 2rem 0;
}
.page-legal .management-title { color: #E65100; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; }

/* */
@media (max-width: 768px) {
  .page-legal .page-title { font-size: 2rem; }
  .page-legal .page-subtitle { font-size: 1rem; }
  .page-legal .legal-container { padding: 2rem; }
  .page-legal .legal-section .section-title { font-size: 1.2rem; }
  .page-legal .legal-section .section-title::before { font-size: 1.1rem; min-width: 1.8rem; }
  .page-legal .section-content { padding-left: 2.3rem; }
  .page-legal.main-content { padding: 80px 0 40px; }
  .page-legal .cookie-table { display: block; overflow-x: auto; }
  .page-legal .cookie-table th,
  .page-legal .cookie-table td { padding: 0.75rem 1rem; font-size: 0.875rem; }
}
@media (max-width: 576px) {
  .page-legal .cookie-definition,
  .page-legal .cookie-management { padding: 1rem; }
}

/* ==========================================================
 FAQs Page (.page-faqs)
 ========================================================== */
.page-faqs { background: #f8fafc; }

/* Hero */
.page-faqs .faq-hero {
  background: linear-gradient(135deg, rgba(44,208,161,0.08) 0%, rgba(31,168,133,0.12) 100%);
  padding: 5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.page-faqs .faq-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(44,208,161,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99,102,241,0.03) 0%, transparent 50%);
  z-index: 0;
}
.page-faqs .faq-hero .container { position: relative; z-index: 1; }
.page-faqs .faq-hero-title {
  font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-faqs .faq-hero-lead {
  font-size: 1.3rem; color: #64748b; margin-bottom: 2rem;
  max-width: 700px; margin-left: auto; margin-right: auto; font-weight: 400;
}

/* Category nav */
.page-faqs .faq-categories { padding: 2rem 0; background: white; box-shadow: 0 2px 20px rgba(0,0,0,0.05); }
.page-faqs .category-nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.page-faqs .category-btn {
  background: white; border: 2px solid #e2e8f0; color: #1e293b;
  padding: 0.75rem 1.5rem; border-radius: 2rem; font-weight: 500;
  transition: all 0.3s ease; cursor: pointer; text-decoration: none;
}
.page-faqs .category-btn:hover,
.page-faqs .category-btn.active {
  background: #2cd0a1; color: white; border-color: #2cd0a1;
  transform: translateY(-2px);
}

/* Main section */
.page-faqs .faq-main-section { padding: 2rem 0; }
.page-faqs .faq-container { max-width: 900px; margin: 0 auto; }
.page-faqs .anchor-target { position: relative; }
.page-faqs .category-header {
  font-size: 2rem; font-weight: 700; color: #1e293b;
  margin-bottom: 2rem; padding-bottom: 1rem;
  border-bottom: 3px solid #2cd0a1;
}
.page-faqs .faq-group-title { font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: 1rem; }

/* Popular questions */
.page-faqs .popular-questions { margin: 4rem 0; }
.page-faqs .popular-title { color: #1e293b; margin-bottom: 2rem; font-weight: 700; }
.page-faqs .popular-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.page-faqs .popular-card {
  background: white; border-radius: 1rem; padding: 2rem;
  border: 2px solid #e2e8f0; transition: all 0.3s ease;
  cursor: pointer; text-decoration: none; color: inherit;
  display: block; text-align: left;
}
.page-faqs .popular-card:hover {
  transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  border-color: #2cd0a1;
}
.page-faqs .popular-icon {
  width: 50px; height: 50px; background: rgba(44,208,161,0.1);
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 1rem;
  color: #2cd0a1; font-size: 1.5rem;
}
.page-faqs .popular-question { font-weight: 600; color: #1e293b; margin-bottom: 0.5rem; }

/* Accordion */
.page-faqs .faq-accordion { margin-bottom: 3rem; }
.page-faqs .faq-accordion .accordion-item {
  border: 2px solid #e2e8f0; border-radius: 1rem !important;
  margin-bottom: 1rem; overflow: hidden;
}
.page-faqs .faq-accordion .accordion-button {
  background: white; color: #1e293b; font-weight: 600;
  font-size: 1.05rem; padding: 1.25rem 1.5rem; border: none;
}
.page-faqs .faq-accordion .accordion-button i { color: #2cd0a1; }
.page-faqs .faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(44,208,161,0.05); color: #1fa885; box-shadow: none;
}
.page-faqs .faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(44,208,161,0.1);
}
.page-faqs .faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232cd0a1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.page-faqs .faq-accordion .accordion-body {
  padding: 1.5rem; color: #64748b; line-height: 1.7;
}

/* Contact support CTA */
.page-faqs .faq-contact-support {
  background: linear-gradient(135deg, #1e293b, #334155);
  color: white; padding: 4rem 2rem; border-radius: 1.5rem;
  text-align: center; margin: 4rem 0;
}
.page-faqs .faq-support-icon {
  width: 80px; height: 80px; background: rgba(255,255,255,0.1);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem;
}
.page-faqs .faq-support-title { font-size: 2rem; font-weight: 800; margin-bottom: 1rem; }
.page-faqs .faq-support-lead { font-size: 1.1rem; opacity: 0.8; max-width: 600px; margin: 0 auto 2rem; }

/* =====================================================
 Buy Pages — Pricing Pages Shared Styles
 Pages: screen-recorder-buy, video-converter-buy,
 video-compressor-buy, audio-cutter-buy
 Each page uses a body class for theme color isolation.
 ===================================================== */

/* ----- Shared base (all buy pages) ----- */
.page-screen-recorder-buy,
.page-video-editor-buy,
.page-video-converter-buy,
.page-video-compressor-buy,
.page-audio-cutter-buy {
  color: #1e293b;
  line-height: 1.6;
  background: #f8fafc;
}

/* html scroll settings */
.page-screen-recorder-buy html,
.page-video-editor-buy html,
.page-video-converter-buy html,
.page-video-compressor-buy html,
.page-audio-cutter-buy html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* pricing section anchor offset */
.page-screen-recorder-buy .pricing-section,
.page-video-editor-buy .pricing-section,
.page-video-converter-buy .pricing-section,
.page-video-compressor-buy .pricing-section,
.page-audio-cutter-buy .pricing-section {
  scroll-margin-top: 100px;
}

@media (max-width: 768px) {
  .page-screen-recorder-buy .pricing-section,
  .page-video-editor-buy .pricing-section,
  .page-video-converter-buy .pricing-section,
  .page-video-compressor-buy .pricing-section,
  .page-audio-cutter-buy .pricing-section {
    scroll-margin-top: 80px;
  }
}

/* ----- Theme color variables per page ----- */
.page-screen-recorder-buy {
  --buy-primary:      #07D2B8;
  --buy-primary-dark: #05b8a0;
  --buy-shadow-color: rgba(7, 210, 184, 0.15);
  --buy-hover-shadow: rgba(7, 210, 184, 0.3);
  --buy-hint-bg:      rgba(7, 210, 184, 0.1);
  --buy-hero-bg:      linear-gradient(135deg, #ffffff 0%, #f0f9f8 100%);
  --buy-decor-color:  rgba(7, 210, 184, 0.05);
  --buy-highlight-bg: rgba(7, 210, 184, 0.05);
}


.page-video-converter-buy {
  --buy-primary:      #3E9AFF;
  --buy-primary-dark: #2d7fd6;
  --buy-shadow-color: rgba(62, 154, 255, 0.15);
  --buy-hover-shadow: rgba(62, 154, 255, 0.3);
  --buy-hint-bg:      rgba(62, 154, 255, 0.1);
  --buy-hero-bg:      linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
  --buy-decor-color:  rgba(62, 154, 255, 0.05);
  --buy-highlight-bg: rgba(62, 154, 255, 0.05);
}

.page-video-compressor-buy {
  --buy-primary:      #2cd0a1;
  --buy-primary-dark: #1fa885;
  --buy-shadow-color: rgba(44, 208, 161, 0.15);
  --buy-hover-shadow: rgba(44, 208, 161, 0.3);
  --buy-hint-bg:      rgba(44, 208, 161, 0.1);
  --buy-hero-bg:      linear-gradient(135deg, #ffffff 0%, #f0f9f6 100%);
  --buy-decor-color:  rgba(44, 208, 161, 0.05);
  --buy-highlight-bg: rgba(44, 208, 161, 0.05);
}

.page-audio-cutter-buy {
  --buy-primary:      #27B765;
  --buy-primary-dark: #1e9c52;
  --buy-shadow-color: rgba(39, 183, 101, 0.15);
  --buy-hover-shadow: rgba(39, 183, 101, 0.3);
  --buy-hint-bg:      rgba(39, 183, 101, 0.1);
  --buy-hero-bg:      linear-gradient(135deg, #ffffff 0%, #f0f9f3 100%);
  --buy-decor-color:  rgba(39, 183, 101, 0.05);
  --buy-highlight-bg: rgba(39, 183, 101, 0.05);
}

.page-video-editor-buy {
  --buy-primary:      #00E1C5;
  --buy-primary-dark: #00b39c;
  --buy-shadow-color: rgba(0, 225, 197, 0.15);
  --buy-hover-shadow: rgba(0, 225, 197, 0.3);
  --buy-hint-bg:      rgba(0, 225, 197, 0.1);
  --buy-hero-bg:      linear-gradient(135deg, #ffffff 0%, #eefcf9 100%);
  --buy-decor-color:  rgba(0, 225, 197, 0.05);
  --buy-highlight-bg: rgba(0, 225, 197, 0.05);
}

/* ----- Buttons (shared, themed via CSS vars) ----- */
.page-screen-recorder-buy .btn-primary-cta,
.page-video-editor-buy .btn-primary-cta,
.page-video-converter-buy .btn-primary-cta,
.page-video-compressor-buy .btn-primary-cta,
.page-audio-cutter-buy .btn-primary-cta {
  background: linear-gradient(135deg, var(--buy-primary), var(--buy-primary-dark));
  border: none;
  color: white;
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-screen-recorder-buy .btn-primary-cta:hover,
.page-video-editor-buy .btn-primary-cta:hover,
.page-video-converter-buy .btn-primary-cta:hover,
.page-video-compressor-buy .btn-primary-cta:hover,
.page-audio-cutter-buy .btn-primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px var(--buy-hover-shadow);
  color: white;
  background: linear-gradient(135deg, var(--buy-primary-dark), var(--buy-primary));
}

.page-screen-recorder-buy .btn-outline-cta,
.page-video-editor-buy .btn-outline-cta,
.page-video-converter-buy .btn-outline-cta,
.page-video-compressor-buy .btn-outline-cta,
.page-audio-cutter-buy .btn-outline-cta {
  border: 2px solid var(--buy-primary);
  color: var(--buy-primary);
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  background: white;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-screen-recorder-buy .btn-outline-cta:hover,
.page-video-editor-buy .btn-outline-cta:hover,
.page-video-converter-buy .btn-outline-cta:hover,
.page-video-compressor-buy .btn-outline-cta:hover,
.page-audio-cutter-buy .btn-outline-cta:hover {
  background: var(--buy-primary);
  color: white;
  transform: translateY(-2px);
}

/* ----- Hero section ----- */
.page-screen-recorder-buy .pricing-hero,
.page-video-editor-buy .pricing-hero,
.page-video-converter-buy .pricing-hero,
.page-video-compressor-buy .pricing-hero,
.page-audio-cutter-buy .pricing-hero {
  background: var(--buy-hero-bg);
  padding: 5rem 0 3rem;
  position: relative;
  overflow: hidden;
}

.page-screen-recorder-buy .pricing-hero h1,
.page-video-editor-buy .pricing-hero h1,
.page-video-converter-buy .pricing-hero h1,
.page-video-compressor-buy .pricing-hero h1,
.page-audio-cutter-buy .pricing-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.page-screen-recorder-buy .pricing-hero .lead,
.page-video-editor-buy .pricing-hero .lead,
.page-video-converter-buy .pricing-hero .lead,
.page-video-compressor-buy .pricing-hero .lead,
.page-audio-cutter-buy .pricing-hero .lead {
  font-size: 1.25rem;
  color: #64748b;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .page-screen-recorder-buy .pricing-hero h1,
  .page-video-editor-buy .pricing-hero h1,
  .page-video-converter-buy .pricing-hero h1,
  .page-video-compressor-buy .pricing-hero h1,
  .page-audio-cutter-buy .pricing-hero h1 { font-size: 2.5rem; }

  .page-screen-recorder-buy .pricing-hero .lead,
  .page-video-editor-buy .pricing-hero .lead,
  .page-video-converter-buy .pricing-hero .lead,
  .page-video-compressor-buy .pricing-hero .lead,
  .page-audio-cutter-buy .pricing-hero .lead { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .page-screen-recorder-buy .pricing-hero h1,
  .page-video-converter-buy .pricing-hero h1,
  .page-video-compressor-buy .pricing-hero h1,
  .page-audio-cutter-buy .pricing-hero h1 { font-size: 2rem; }

  .page-screen-recorder-buy .pricing-hero .lead,
  .page-video-converter-buy .pricing-hero .lead,
  .page-video-compressor-buy .pricing-hero .lead,
  .page-audio-cutter-buy .pricing-hero .lead { font-size: 1rem; }
}

/* ----- Decorative circles ----- */
.page-screen-recorder-buy .decor-circle,
.page-video-editor-buy .decor-circle,
.page-video-converter-buy .decor-circle,
.page-video-compressor-buy .decor-circle,
.page-audio-cutter-buy .decor-circle {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--buy-decor-color), transparent);
  pointer-events: none;
}

.page-screen-recorder-buy .decor-circle-1,
.page-video-editor-buy .decor-circle-1,
.page-video-converter-buy .decor-circle-1,
.page-video-compressor-buy .decor-circle-1,
.page-audio-cutter-buy .decor-circle-1 { top: -250px; right: -250px; }

.page-screen-recorder-buy .decor-circle-2,
.page-video-editor-buy .decor-circle-2,
.page-video-converter-buy .decor-circle-2,
.page-video-compressor-buy .decor-circle-2,
.page-audio-cutter-buy .decor-circle-2 { bottom: -250px; left: -250px; }

/* ----- Pricing cards ----- */
.page-screen-recorder-buy .pricing-card,
.page-video-editor-buy .pricing-card,
.page-video-converter-buy .pricing-card,
.page-video-compressor-buy .pricing-card,
.page-audio-cutter-buy .pricing-card {
  background: white;
  border-radius: 1.5rem;
  padding: 2.5rem;
  height: 100%;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
}

.page-screen-recorder-buy .pricing-card:hover,
.page-video-editor-buy .pricing-card:hover,
.page-video-converter-buy .pricing-card:hover,
.page-video-compressor-buy .pricing-card:hover,
.page-audio-cutter-buy .pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  border-color: var(--buy-primary);
}

.page-screen-recorder-buy .pricing-card.popular,
.page-video-editor-buy .pricing-card.popular,
.page-video-converter-buy .pricing-card.popular,
.page-video-compressor-buy .pricing-card.popular,
.page-audio-cutter-buy .pricing-card.popular {
  border-color: var(--buy-primary);
  box-shadow: 0 20px 40px var(--buy-shadow-color);
}

.page-screen-recorder-buy .pricing-card.popular::before,
.page-video-editor-buy .pricing-card.popular::before,
.page-video-converter-buy .pricing-card.popular::before,
.page-video-compressor-buy .pricing-card.popular::before,
.page-audio-cutter-buy .pricing-card.popular::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--buy-primary);
  color: white;
  padding: 0.5rem 2rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 1;
}

@media (max-width: 768px) {
  .page-screen-recorder-buy .pricing-card,
  .page-video-editor-buy .pricing-card,
  .page-video-converter-buy .pricing-card,
  .page-video-compressor-buy .pricing-card,
  .page-audio-cutter-buy .pricing-card { padding: 2rem 1.5rem; }
}

/* ----- Pricing typography ----- */
.page-screen-recorder-buy .pricing-price,
.page-video-editor-buy .pricing-price,
.page-video-converter-buy .pricing-price,
.page-video-compressor-buy .pricing-price,
.page-audio-cutter-buy .pricing-price {
  font-size: 3.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.page-screen-recorder-buy .pricing-period,
.page-video-editor-buy .pricing-period,
.page-video-converter-buy .pricing-period,
.page-video-compressor-buy .pricing-period,
.page-audio-cutter-buy .pricing-period { font-size: 1rem; color: #64748b; }

.page-screen-recorder-buy .pricing-original,
.page-video-editor-buy .pricing-original,
.page-video-converter-buy .pricing-original,
.page-video-compressor-buy .pricing-original,
.page-audio-cutter-buy .pricing-original {
  font-size: 1.25rem;
  text-decoration: line-through;
  color: #64748b;
}

.page-screen-recorder-buy .pricing-savings,
.page-video-editor-buy .pricing-savings,
.page-video-converter-buy .pricing-savings,
.page-video-compressor-buy .pricing-savings,
.page-audio-cutter-buy .pricing-savings {
  color: #10b981;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .page-screen-recorder-buy .pricing-price,
  .page-video-editor-buy .pricing-price,
  .page-video-converter-buy .pricing-price,
  .page-video-compressor-buy .pricing-price,
  .page-audio-cutter-buy .pricing-price { font-size: 2.5rem; }
}

@media (max-width: 480px) {
  .page-screen-recorder-buy .pricing-price,
  .page-video-converter-buy .pricing-price,
  .page-video-compressor-buy .pricing-price,
  .page-audio-cutter-buy .pricing-price { font-size: 2rem; }
}

/* ----- Feature list in cards ----- */
.page-screen-recorder-buy .pricing-feature,
.page-video-editor-buy .pricing-feature,
.page-video-converter-buy .pricing-feature,
.page-video-compressor-buy .pricing-feature,
.page-audio-cutter-buy .pricing-feature { margin: 1.5rem 0; }

.page-screen-recorder-buy .pricing-feature-item,
.page-video-editor-buy .pricing-feature-item,
.page-video-converter-buy .pricing-feature-item,
.page-video-compressor-buy .pricing-feature-item,
.page-audio-cutter-buy .pricing-feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.page-screen-recorder-buy .pricing-feature-item i,
.page-video-editor-buy .pricing-feature-item i,
.page-video-converter-buy .pricing-feature-item i,
.page-video-compressor-buy .pricing-feature-item i,
.page-audio-cutter-buy .pricing-feature-item i {
  color: var(--buy-primary);
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* ----- Feature comparison table ----- */
.page-screen-recorder-buy .feature-comparison,
.page-video-editor-buy .feature-comparison,
.page-video-converter-buy .feature-comparison,
.page-video-compressor-buy .feature-comparison,
.page-audio-cutter-buy .feature-comparison {
  background: white;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.page-screen-recorder-buy .feature-row,
.page-video-editor-buy .feature-row,
.page-video-converter-buy .feature-row,
.page-video-compressor-buy .feature-row,
.page-audio-cutter-buy .feature-row {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
}

.page-screen-recorder-buy .feature-row:last-child,
.page-video-editor-buy .feature-row:last-child,
.page-video-converter-buy .feature-row:last-child,
.page-video-compressor-buy .feature-row:last-child,
.page-audio-cutter-buy .feature-row:last-child { border-bottom: none; }

.page-screen-recorder-buy .feature-name,
.page-video-editor-buy .feature-name,
.page-video-converter-buy .feature-name,
.page-video-compressor-buy .feature-name,
.page-audio-cutter-buy .feature-name {
  flex: 0 0 40%;
  padding: 1.5rem;
  background: #f8fafc;
  font-weight: 600;
}

.page-screen-recorder-buy .feature-value,
.page-video-editor-buy .feature-value,
.page-video-converter-buy .feature-value,
.page-video-compressor-buy .feature-value,
.page-audio-cutter-buy .feature-value {
  flex: 1;
  padding: 1.5rem;
  text-align: center;
}

.page-screen-recorder-buy .feature-value.highlight,
.page-video-editor-buy .feature-value.highlight,
.page-video-converter-buy .feature-value.highlight,
.page-video-compressor-buy .feature-value.highlight,
.page-audio-cutter-buy .feature-value.highlight {
  background: var(--buy-highlight-bg);
}

.page-screen-recorder-buy .feature-value i.bi-check-lg,
.page-video-editor-buy .feature-value i.bi-check-lg,
.page-video-converter-buy .feature-value i.bi-check-lg,
.page-video-compressor-buy .feature-value i.bi-check-lg,
.page-audio-cutter-buy .feature-value i.bi-check-lg {
  color: var(--buy-primary);
  font-size: 1.25rem;
}

.page-screen-recorder-buy .feature-value i.bi-x-lg,
.page-video-editor-buy .feature-value i.bi-x-lg,
.page-video-converter-buy .feature-value i.bi-x-lg,
.page-video-compressor-buy .feature-value i.bi-x-lg,
.page-audio-cutter-buy .feature-value i.bi-x-lg { color: #ef4444; }

@media (max-width: 768px) {
  .page-screen-recorder-buy .feature-comparison,
  .page-video-editor-buy .feature-comparison,
  .page-video-converter-buy .feature-comparison,
  .page-video-compressor-buy .feature-comparison,
  .page-audio-cutter-buy .feature-comparison {
    overflow-x: auto;
    border-radius: 1rem;
  }

  .page-screen-recorder-buy .feature-comparison .feature-row,
  .page-video-editor-buy .feature-comparison .feature-row,
  .page-video-converter-buy .feature-comparison .feature-row,
  .page-video-compressor-buy .feature-comparison .feature-row,
  .page-audio-cutter-buy .feature-comparison .feature-row { min-width: 700px; }

  .page-screen-recorder-buy .feature-name,
  .page-video-editor-buy .feature-name,
  .page-video-converter-buy .feature-name,
  .page-video-compressor-buy .feature-name,
  .page-audio-cutter-buy .feature-name { flex: 0 0 200px; min-width: 200px; }

  .page-screen-recorder-buy .feature-value,
  .page-video-editor-buy .feature-value,
  .page-video-converter-buy .feature-value,
  .page-video-compressor-buy .feature-value,
  .page-audio-cutter-buy .feature-value {
    flex: 0 0 120px;
    min-width: 120px;
    padding: 1rem 0.75rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .page-screen-recorder-buy .feature-comparison .feature-row,
  .page-video-converter-buy .feature-comparison .feature-row,
  .page-video-compressor-buy .feature-comparison .feature-row,
  .page-audio-cutter-buy .feature-comparison .feature-row { min-width: 650px; }

  .page-screen-recorder-buy .feature-name,
  .page-video-converter-buy .feature-name,
  .page-video-compressor-buy .feature-name,
  .page-audio-cutter-buy .feature-name {
    flex: 0 0 180px;
    min-width: 180px;
    padding: 1rem 0.75rem;
    font-size: 0.875rem;
  }

  .page-screen-recorder-buy .feature-value,
  .page-video-converter-buy .feature-value,
  .page-video-compressor-buy .feature-value,
  .page-audio-cutter-buy .feature-value {
    flex: 0 0 100px;
    min-width: 100px;
    padding: 1rem 0.5rem;
    font-size: 0.8125rem;
  }
}

/* ----- Guarantee badges ----- */
.page-screen-recorder-buy .guarantee-badge,
.page-video-editor-buy .guarantee-badge,
.page-video-converter-buy .guarantee-badge,
.page-video-compressor-buy .guarantee-badge,
.page-audio-cutter-buy .guarantee-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 2rem;
  color: #065f46;
  font-weight: 500;
}

.page-screen-recorder-buy .guarantee-badge i,
.page-video-editor-buy .guarantee-badge i,
.page-video-converter-buy .guarantee-badge i,
.page-video-compressor-buy .guarantee-badge i,
.page-audio-cutter-buy .guarantee-badge i { margin-right: 0.5rem; }

/* ----- FAQ items ----- */
.page-screen-recorder-buy .faq-item,
.page-video-editor-buy .faq-item,
.page-video-converter-buy .faq-item,
.page-video-compressor-buy .faq-item,
.page-audio-cutter-buy .faq-item {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid #e2e8f0;
}

.page-screen-recorder-buy .faq-question,
.page-video-editor-buy .faq-question,
.page-video-converter-buy .faq-question,
.page-video-compressor-buy .faq-question,
.page-audio-cutter-buy .faq-question {
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-screen-recorder-buy .faq-question:hover,
.page-video-editor-buy .faq-question:hover,
.page-video-converter-buy .faq-question:hover,
.page-video-compressor-buy .faq-question:hover,
.page-audio-cutter-buy .faq-question:hover { color: var(--buy-primary); }

/* ----- Security icons ----- */
.page-screen-recorder-buy .security-icons,
.page-video-editor-buy .security-icons,
.page-video-converter-buy .security-icons,
.page-video-compressor-buy .security-icons,
.page-audio-cutter-buy .security-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.page-screen-recorder-buy .security-icon,
.page-video-editor-buy .security-icon,
.page-video-converter-buy .security-icon,
.page-video-compressor-buy .security-icon,
.page-audio-cutter-buy .security-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.page-screen-recorder-buy .security-icon i,
.page-video-editor-buy .security-icon i,
.page-video-converter-buy .security-icon i,
.page-video-compressor-buy .security-icon i,
.page-audio-cutter-buy .security-icon i {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.page-screen-recorder-buy .security-icon span,
.page-video-editor-buy .security-icon span,
.page-video-converter-buy .security-icon span,
.page-video-compressor-buy .security-icon span,
.page-audio-cutter-buy .security-icon span { font-size: 0.875rem; opacity: 0.9; }

@media (max-width: 768px) {
  .page-screen-recorder-buy .security-icons,
  .page-video-editor-buy .security-icons,
  .page-video-converter-buy .security-icons,
  .page-video-compressor-buy .security-icons,
  .page-audio-cutter-buy .security-icons { flex-direction: column; gap: 1rem; }

  .page-screen-recorder-buy .security-icon,
  .page-video-editor-buy .security-icon,
  .page-video-converter-buy .security-icon,
  .page-video-compressor-buy .security-icon,
  .page-audio-cutter-buy .security-icon { width: 100%; justify-content: center; }
}

/* ----- Table scroll hint ----- */
.page-screen-recorder-buy .table-scroll-hint,
.page-video-editor-buy .table-scroll-hint,
.page-video-converter-buy .table-scroll-hint,
.page-video-compressor-buy .table-scroll-hint,
.page-audio-cutter-buy .table-scroll-hint {
  display: none;
  text-align: center;
  color: #64748b;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: var(--buy-hint-bg);
  border-radius: 0.5rem;
}

@media (max-width: 768px) {
  .page-screen-recorder-buy .table-scroll-hint,
  .page-video-editor-buy .table-scroll-hint,
  .page-video-converter-buy .table-scroll-hint,
  .page-video-compressor-buy .table-scroll-hint,
  .page-audio-cutter-buy .table-scroll-hint { display: block; }
}

/* ----- Footer overrides for buy pages ----- */
.page-screen-recorder-buy .footer-links a,
.page-video-editor-buy .footer-links a,
.page-video-converter-buy .footer-links a,
.page-video-compressor-buy .footer-links a,
.page-audio-cutter-buy .footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-screen-recorder-buy .footer-links a:hover,
.page-video-editor-buy .footer-links a:hover,
.page-video-converter-buy .footer-links a:hover,
.page-video-compressor-buy .footer-links a:hover,
.page-audio-cutter-buy .footer-links a:hover { color: var(--buy-primary); }

/* ----- Animation ----- */
@keyframes buyFadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-screen-recorder-buy .animate-fadeInUp,
.page-video-editor-buy .animate-fadeInUp,
.page-video-converter-buy .animate-fadeInUp,
.page-video-compressor-buy .animate-fadeInUp,
.page-audio-cutter-buy .animate-fadeInUp {
  animation: buyFadeInUp 0.6s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
  .page-faqs .faq-hero-title { font-size: 2.5rem; }
  .page-faqs .faq-categories { padding: 1.5rem 0; }
  .page-faqs .category-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; justify-content: flex-start; }
  .page-faqs .category-btn { white-space: nowrap; }
  .page-faqs .popular-grid { grid-template-columns: 1fr; }
  .page-faqs .category-header { font-size: 1.75rem; }
}
@media (max-width: 576px) {
  .page-faqs .faq-hero-title { font-size: 2rem; }
  .page-faqs .faq-hero { padding: 3rem 0 2rem; }
  .page-faqs .faq-accordion .accordion-button { padding: 1rem 1.25rem; font-size: 1rem; }
}

/* ==========================================================
 About Us Page (.page-about)
 ========================================================== */
.page-about { background: #f8fafc; }

/* Hero */
.page-about .about-hero {
  background: linear-gradient(135deg, rgba(44,208,161,0.08) 0%, rgba(31,168,133,0.12) 30%, rgba(99,102,241,0.05) 100%);
  padding: 8rem 0 6rem; position: relative; overflow: hidden;
}
.page-about .about-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(44,208,161,0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(99,102,241,0.03) 0%, transparent 40%);
  z-index: 0;
}
.page-about .about-hero .container { position: relative; z-index: 1; }
.page-about .about-hero-title {
  font-size: 4rem; font-weight: 900; line-height: 1.1;
  margin-bottom: 1.5rem; letter-spacing: -0.5px; color: #1e293b;
}
.page-about .about-hero-gradient {
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-about .about-hero-lead {
  font-size: 1.4rem; color: #64748b; margin-bottom: 2rem;
  max-width: 700px; margin-left: auto; margin-right: auto; font-weight: 400; line-height: 1.7;
}
.page-about .about-hero-stats {
  display: flex; gap: 3rem; margin-top: 3rem; flex-wrap: wrap; justify-content: center;
}
.page-about .about-stat-item { text-align: center; }
.page-about .about-stat-number { font-size: 2.5rem; font-weight: 800; color: #2cd0a1; line-height: 1; }
.page-about .about-stat-label { color: #64748b; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 0.5rem; }

/* Story */
.page-about .about-story { padding: 6rem 0; background: white; }
.page-about .about-story-content { max-width: 800px; margin: 0 auto; }
.page-about .about-story-content h2 { font-size: 3rem; font-weight: 800; margin-bottom: 2rem; color: #1e293b; }
.page-about .about-story-content p { font-size: 1.2rem; line-height: 1.8; color: #64748b; margin-bottom: 2rem; }

/* Mission & Vision */
.page-about .about-mission-vision {
  padding: 6rem 0;
  background: linear-gradient(135deg, rgba(31,168,133,0.02) 0%, rgba(99,102,241,0.02) 100%);
}
.page-about .about-mv-card {
  background: white; border-radius: 2rem; padding: 3.5rem;
  border: 2px solid #e2e8f0; transition: all 0.3s ease; height: 100%;
  position: relative; overflow: hidden;
}
.page-about .about-mv-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #2cd0a1, #1fa885);
}
.page-about .about-mv-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0,0,0,0.12); }
.page-about .about-mv-icon {
  width: 80px; height: 80px; border-radius: 1.5rem; display: flex;
  align-items: center; justify-content: center; margin-bottom: 2rem; font-size: 2.5rem;
}
.page-about .about-mv-icon-mission { background: linear-gradient(135deg, rgba(44,208,161,0.1), rgba(31,168,133,0.2)); color: #2cd0a1; }
.page-about .about-mv-icon-vision { background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(79,70,229,0.2)); color: #6366f1; }
.page-about .about-mv-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; color: #1e293b; }
.page-about .about-mv-content { color: #64748b; line-height: 1.8; font-size: 1.1rem; margin-bottom: 1rem; }

/* Philosophy */
.page-about .about-philosophy { padding: 6rem 0; background: white; }
.page-about .about-philosophy-content { max-width: 800px; margin: 0 auto; }
.page-about .about-philosophy-content h2 { font-size: 3rem; font-weight: 800; margin-bottom: 2rem; color: #1e293b; }
.page-about .about-philosophy-content > p { font-size: 1.1rem; color: #64748b; line-height: 1.7; margin-bottom: 2rem; }
.page-about .about-philosophy-points { margin: 2rem 0; }
.page-about .about-philosophy-point {
  display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem;
}
.page-about .about-point-icon {
  width: 48px; height: 48px; background: rgba(44,208,161,0.1); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #2cd0a1; font-size: 1.2rem; flex-shrink: 0;
}
.page-about .about-point-content h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; color: #1e293b; }
.page-about .about-point-content p { color: #64748b; line-height: 1.7; margin-bottom: 0; }

/* Products */
.page-about .about-products {
  padding: 6rem 0;
  background: linear-gradient(135deg, rgba(31,168,133,0.02) 0%, rgba(99,102,241,0.02) 100%);
}
.page-about .about-section-header { text-align: center; margin-bottom: 4rem; }
.page-about .about-section-header h2 { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; color: #1e293b; }
.page-about .about-section-header p { font-size: 1.2rem; color: #64748b; max-width: 600px; margin: 0 auto; line-height: 1.7; }
.page-about .about-products-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;
}
.page-about .about-product-card {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  border: 2px solid #e2e8f0; transition: all 0.3s ease; text-align: center;
}
.page-about .about-product-card:hover {
  transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: #2cd0a1;
}
.page-about .about-product-icon {
  width: 80px; height: 80px; border-radius: 1.5rem; display: flex;
  align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2.5rem;
}
.page-about .about-icon-recorder { background: linear-gradient(135deg, rgba(44,208,161,0.1), rgba(31,168,133,0.2)); color: #2cd0a1; }
.page-about .about-icon-converter { background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(79,70,229,0.2)); color: #6366f1; }
.page-about .about-icon-compressor { background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(3,105,161,0.2)); color: #0ea5e9; }
.page-about .about-icon-audio { background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(124,58,237,0.2)); color: #8b5cf6; }
.page-about .about-product-title { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; }
.page-about .about-product-desc { color: #64748b; margin-bottom: 1.5rem; line-height: 1.6; }
.page-about .btn-outline-about {
  border: 2px solid #2cd0a1; color: #2cd0a1; padding: 0.6rem 1.5rem;
  border-radius: 0.75rem; font-weight: 600; background: white;
  transition: all 0.3s ease; display: inline-block; text-decoration: none;
}
.page-about .btn-outline-about:hover { background: rgba(44,208,161,0.1); transform: translateY(-2px); color: #1fa885; }

/* Responsive */
@media (max-width: 768px) {
  .page-about .about-hero-title { font-size: 3rem; }
  .page-about .about-hero { padding: 6rem 0 4rem; }
  .page-about .about-hero-stats { gap: 2rem; }
  .page-about .about-story-content h2,
  .page-about .about-philosophy-content h2,
  .page-about .about-section-header h2 { font-size: 2.5rem; }
  .page-about .about-mv-card { padding: 2.5rem; }
  .page-about .about-mv-title { font-size: 2rem; }
  .page-about .about-products-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
  .page-about .about-hero-title { font-size: 2.5rem; }
  .page-about .about-hero-lead { font-size: 1.1rem; }
  .page-about .about-hero-stats { gap: 1.5rem; }
  .page-about .about-stat-number { font-size: 2rem; }
  .page-about .about-story-content h2,
  .page-about .about-philosophy-content h2,
  .page-about .about-section-header h2 { font-size: 2rem; }
  .page-about .about-mv-card { padding: 2rem; }
}

/* ==========================================================
 Contact Us Page (.page-contact)
 ========================================================== */
.page-contact { background: #f8fafc; }

/* Hero */
.page-contact .contact-hero {
  background: linear-gradient(135deg, rgba(44,208,161,0.08) 0%, rgba(31,168,133,0.12) 100%);
  padding: 5rem 0 3rem; position: relative; overflow: hidden;
}
.page-contact .contact-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(44,208,161,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99,102,241,0.03) 0%, transparent 50%);
  z-index: 0;
}
.page-contact .contact-hero .container { position: relative; z-index: 1; }
.page-contact .contact-hero-title {
  font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-contact .contact-hero-lead {
  font-size: 1.3rem; color: #64748b; max-width: 700px;
  margin: 0 auto; font-weight: 400;
}

/* Main section */
.page-contact .contact-main-section { padding: 4rem 0; }
.page-contact .contact-card {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08); border: 1px solid #e2e8f0;
}
.page-contact .contact-card-title {
  font-size: 2rem; font-weight: 700; color: #1e293b;
  margin-bottom: 1.5rem; text-align: center;
}
.page-contact .contact-card-desc { color: #64748b; margin-bottom: 2rem; }

/* Contact options */
.page-contact .contact-options { margin-top: 2rem; }
.page-contact .contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; margin-top: 1.5rem;
}
.page-contact .contact-option {
  background: white; border-radius: 1.5rem; padding: 2.5rem 2rem;
  border: 2px solid #e2e8f0; transition: all 0.3s ease;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.page-contact .contact-option:hover {
  transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: #2cd0a1;
}
.page-contact .contact-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; color: white; font-size: 2rem;
}
.page-contact .contact-option-title { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; }
.page-contact .contact-option-desc { color: #64748b; margin-bottom: 1.5rem; flex: 1; }
.page-contact .btn-outline-contact {
  border: 2px solid #2cd0a1; color: #2cd0a1; padding: 0.6rem 1.5rem;
  border-radius: 0.75rem; font-weight: 600; background: white;
  transition: all 0.3s ease; text-decoration: none;
}
.page-contact .btn-outline-contact:hover { background: rgba(44,208,161,0.1); transform: translateY(-2px); color: #1fa885; }

/* Form (used for the Technical Support section container) */
.page-contact .contact-form-section { margin-top: 3rem; }
.page-contact .contact-form-heading { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem; }
.page-contact .contact-card-icon { font-size: 2.5rem; color: #2cd0a1; }

/* Guarantee */
.page-contact .contact-guarantee {
  background: linear-gradient(135deg, rgba(44,208,161,0.05) 0%, rgba(31,168,133,0.08) 100%);
  border-radius: 1.5rem; padding: 3rem; margin-top: 4rem; text-align: center;
}
.page-contact .contact-guarantee-title { font-size: 1.8rem; font-weight: 700; color: #1e293b; margin-bottom: 2rem; }
.page-contact .contact-support-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 1rem;
}
.page-contact .contact-support-item { padding: 1.5rem; }
.page-contact .contact-support-icon {
  width: 60px; height: 60px; background: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; color: #2cd0a1; font-size: 1.5rem;
  border: 2px solid rgba(44,208,161,0.2);
}
.page-contact .contact-support-title { font-weight: 600; color: #1e293b; margin-bottom: 0.5rem; }
.page-contact .contact-support-desc { color: #64748b; font-size: 0.9rem; margin-bottom: 0; }

/* Responsive */
@media (max-width: 768px) {
  .page-contact .contact-hero-title { font-size: 2.5rem; }
  .page-contact .contact-hero-lead { font-size: 1.1rem; }
  .page-contact .contact-card { padding: 2rem 1.5rem; }
  .page-contact .contact-card-title { font-size: 1.75rem; }
  .page-contact .contact-grid { grid-template-columns: 1fr; }
  .page-contact .contact-option { padding: 2rem 1.5rem; }
  .page-contact .contact-support-grid { grid-template-columns: 1fr; }
  .page-contact .contact-guarantee { padding: 2rem 1.5rem; }
}
@media (max-width: 576px) {
  .page-contact .contact-hero-title { font-size: 2rem; }
  .page-contact .contact-hero { padding: 3rem 0 2rem; }
  .page-contact .contact-main-section { padding: 2rem 0; }
}

/* =====================================================
 Screen Recorder Guide Page (.page-screen-recorder-guide)
 ===================================================== */

.page-screen-recorder-guide body {
  background: #f8fafc;
}

/* */
.page-screen-recorder-guide .guide-hero {
  background: linear-gradient(135deg,
    rgba(44,208,161,0.08) 0%,
    rgba(31,168,133,0.12) 30%,
    rgba(99,102,241,0.05) 100%);
  color: #1e293b;
  padding: 6rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.page-screen-recorder-guide .guide-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(44,208,161,0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(99,102,241,0.03) 0%, transparent 40%);
  z-index: 0;
}
.page-screen-recorder-guide .guide-hero .container { position: relative; z-index: 1; }
.page-screen-recorder-guide .guide-hero h1 {
  font-size: 3.5rem; font-weight: 800; line-height: 1.1;
  margin-bottom: 1.5rem; letter-spacing: -0.5px;
}
.page-screen-recorder-guide .hero-gradient-text {
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-screen-recorder-guide .guide-hero .lead {
  font-size: 1.3rem; color: #64748b; margin-bottom: 2rem;
  max-width: 700px; font-weight: 400; line-height: 1.7;
}

/* */
.page-screen-recorder-guide .btn-primary-cta {
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  border: none; color: white; padding: 0.75rem 2rem;
  border-radius: 0.75rem; font-weight: 600; transition: all 0.3s ease;
}
.page-screen-recorder-guide .btn-primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(44,208,161,0.3); color: white;
}
.page-screen-recorder-guide .btn-outline-primary-cta {
  border: 2px solid #2cd0a1; color: #2cd0a1; padding: 0.75rem 2rem;
  border-radius: 0.75rem; font-weight: 600; background: white; transition: all 0.3s ease;
}
.page-screen-recorder-guide .btn-outline-primary-cta:hover {
  background: rgba(44,208,161,0.1); transform: translateY(-2px);
}

/* */
.page-screen-recorder-guide .guide-navigation {
  background: white; padding: 2rem 0;
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 68px; z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
.page-screen-recorder-guide .nav-steps {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;
}
.page-screen-recorder-guide .nav-step {
  text-decoration: none; color: #64748b;
  padding: 0.75rem 1.5rem; border-radius: 2rem;
  transition: all 0.3s ease; font-weight: 500;
}
.page-screen-recorder-guide .nav-step:hover {
  color: #2cd0a1; background: rgba(44,208,161,0.1); text-decoration: none;
}
.page-screen-recorder-guide .nav-step.active {
  color: white; background: #2cd0a1;
}

/* */
.page-screen-recorder-guide .guide-content { padding: 4rem 0; }
.page-screen-recorder-guide .guide-section {
  margin-bottom: 6rem; scroll-margin-top: 160px;
}
.page-screen-recorder-guide .section-header {
  margin-bottom: 3rem; padding-bottom: 1.5rem;
  border-bottom: 3px solid #2cd0a1;
}
.page-screen-recorder-guide .section-number {
  display: inline-block; width: 40px; height: 40px;
  background: #2cd0a1; color: white; border-radius: 50%;
  text-align: center; line-height: 40px; font-weight: 700; margin-right: 1rem;
}
.page-screen-recorder-guide .section-number i {
  display: inline-block;
  line-height: 40px;
  font-size: 1.05rem;
}
.page-screen-recorder-guide .section-title {
  font-size: 2.5rem; font-weight: 800; color: #1e293b; display: inline-block;
}
.page-screen-recorder-guide .section-description {
  font-size: 1.2rem; color: #64748b; margin-top: 1rem; max-width: 700px;
}

/* & */
.page-screen-recorder-guide .tutorial-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem; margin: 3rem 0;
}
.page-screen-recorder-guide .tutorial-card {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  border: 2px solid #e2e8f0; transition: all 0.3s ease;
}
.page-screen-recorder-guide .tutorial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: #2cd0a1;
}
.page-screen-recorder-guide .tutorial-icon {
  width: 60px; height: 60px; background: rgba(44,208,161,0.1);
  border-radius: 1rem; display: flex; align-items: center;
  justify-content: center; margin-bottom: 1.5rem;
  color: #2cd0a1; font-size: 1.5rem;
}
.page-screen-recorder-guide .tutorial-title {
  font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem;
}
.page-screen-recorder-guide .tutorial-content { color: #64748b; line-height: 1.7; }
.page-screen-recorder-guide .tutorial-list { margin: 1.5rem 0; padding-left: 1.5rem; }
.page-screen-recorder-guide .tutorial-list li { margin-bottom: 0.5rem; color: #64748b; }

/* Guide screenshots: keep responsive, but avoid upscaling (prevents blur). */
.page-screen-recorder-guide .guide-screenshot-wrap {
  border-radius: 12px;
  overflow: hidden;
}
.page-screen-recorder-guide .guide-screenshot-wrap--placeholder {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border: 1px dashed rgba(0,0,0,.18);
}
.page-screen-recorder-guide .guide-screenshot {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Compact lists for the hero cards (keep bullets, reduce indentation/spacing). */
.page-screen-recorder-guide #contents .tutorial-list.tutorial-list-compact {
  margin: 0.75rem 0 0.25rem;
  padding-left: 1.1rem;
}
.page-screen-recorder-guide #contents .tutorial-list.tutorial-list-compact li {
  margin-bottom: 0.35rem;
}

/* */
.page-screen-recorder-guide .steps-demo {
  background: linear-gradient(135deg, rgba(31,168,133,0.02) 0%, rgba(99,102,241,0.02) 100%);
  border-radius: 1.5rem; padding: 3rem; margin: 3rem 0;
}
.page-screen-recorder-guide .step-item {
  display: flex; align-items: flex-start; gap: 2rem; margin-bottom: 2.5rem;
}
.page-screen-recorder-guide .step-number {
  width: 50px; height: 50px; background: #2cd0a1; color: white;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0;
}
.page-screen-recorder-guide .step-content h3 {
  font-size: 1.3rem; font-weight: 700; color: #1e293b; margin-bottom: 0.5rem;
}
.page-screen-recorder-guide .step-content p { color: #64748b; line-height: 1.7; }

/* */
.page-screen-recorder-guide .tips-section {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  border-left: 4px solid #2cd0a1; margin: 2rem 0;
}
.page-screen-recorder-guide .tips-title {
  font-size: 1.3rem; font-weight: 700; color: #2cd0a1; margin-bottom: 1rem;
}

/* */
@keyframes srg-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-screen-recorder-guide .animate-fadeInUp {
  animation: srg-fadeInUp 0.6s ease-out;
}

/* */
@media (max-width: 768px) {
  .page-screen-recorder-guide .guide-hero h1 { font-size: 2.5rem; }
  .page-screen-recorder-guide .guide-hero { padding: 4rem 0 2rem; }
  .page-screen-recorder-guide .nav-steps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; }
  .page-screen-recorder-guide .nav-step { white-space: nowrap; }
  .page-screen-recorder-guide .section-title { font-size: 2rem; }
  .page-screen-recorder-guide .tutorial-grid { grid-template-columns: 1fr; }
  .page-screen-recorder-guide .step-item { flex-direction: column; gap: 1rem; }
}
@media (max-width: 576px) {
  .page-screen-recorder-guide .guide-hero h1 { font-size: 2rem; }
  .page-screen-recorder-guide .guide-hero .lead { font-size: 1.1rem; }
  .page-screen-recorder-guide .section-title { font-size: 1.75rem; }
  .page-screen-recorder-guide .tutorial-card { padding: 1.5rem; }
  .page-screen-recorder-guide .steps-demo { padding: 1.5rem; }
}

/* =====================================================
 Video Compressor Guide Page (.page-video-compressor-guide)
 ===================================================== */

.page-video-compressor-guide body {
  background: #f8fafc;
}

/* */
.page-video-compressor-guide .guide-hero {
  background: linear-gradient(135deg,
    rgba(44,208,161,0.08) 0%,
    rgba(31,168,133,0.12) 30%,
    rgba(99,102,241,0.05) 100%);
  color: #1e293b;
  padding: 6rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.page-video-compressor-guide .guide-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(44,208,161,0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(99,102,241,0.03) 0%, transparent 40%);
  z-index: 0;
}
.page-video-compressor-guide .guide-hero .container { position: relative; z-index: 1; }
.page-video-compressor-guide .guide-hero h1 {
  font-size: 3.5rem; font-weight: 800; line-height: 1.1;
  margin-bottom: 1.5rem; letter-spacing: -0.5px;
}
.page-video-compressor-guide .hero-gradient-text {
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-video-compressor-guide .guide-hero .lead {
  font-size: 1.3rem; color: #64748b; margin-bottom: 2rem;
  max-width: 700px; font-weight: 400; line-height: 1.7;
}

/* */
.page-video-compressor-guide .btn-primary-cta {
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  border: none; color: white; padding: 0.75rem 2rem;
  border-radius: 0.75rem; font-weight: 600; transition: all 0.3s ease;
}
.page-video-compressor-guide .btn-primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(44,208,161,0.3); color: white;
}
.page-video-compressor-guide .btn-outline-primary-cta {
  border: 2px solid #2cd0a1; color: #2cd0a1; padding: 0.75rem 2rem;
  border-radius: 0.75rem; font-weight: 600; background: white; transition: all 0.3s ease;
}
.page-video-compressor-guide .btn-outline-primary-cta:hover {
  background: rgba(44,208,161,0.1); transform: translateY(-2px);
}

/* */
.page-video-compressor-guide .guide-navigation {
  background: white; padding: 2rem 0;
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 68px; z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
.page-video-compressor-guide .nav-steps {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;
}
.page-video-compressor-guide .nav-step {
  text-decoration: none; color: #64748b;
  padding: 0.75rem 1.5rem; border-radius: 2rem;
  transition: all 0.3s ease; font-weight: 500;
}
.page-video-compressor-guide .nav-step:hover {
  color: #2cd0a1; background: rgba(44,208,161,0.1); text-decoration: none;
}
.page-video-compressor-guide .nav-step.active {
  color: white; background: linear-gradient(135deg, #2cd0a1, #1fa885);
}

/* */
.page-video-compressor-guide .guide-content { padding: 4rem 0; }
.page-video-compressor-guide .guide-section {
  margin-bottom: 6rem; scroll-margin-top: 160px;
}
.page-video-compressor-guide .section-header {
  margin-bottom: 3rem; padding-bottom: 1.5rem;
  border-bottom: 3px solid #2cd0a1;
}
.page-video-compressor-guide .section-number {
  display: inline-block; width: 40px; height: 40px;
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  color: white; border-radius: 50%;
  text-align: center; line-height: 40px; font-weight: 700; margin-right: 1rem;
}
.page-video-compressor-guide .section-title {
  font-size: 2.5rem; font-weight: 800; color: #1e293b; display: inline-block;
}
.page-video-compressor-guide .section-description {
  font-size: 1.2rem; color: #64748b; margin-top: 1rem; max-width: 700px;
}

/* */
.page-video-compressor-guide .tutorial-card {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  border: 2px solid #e2e8f0; transition: all 0.3s ease; margin-bottom: 2rem;
}
.page-video-compressor-guide .tutorial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: #2cd0a1;
}
.page-video-compressor-guide .tutorial-icon {
  width: 60px; height: 60px; background: rgba(44,208,161,0.1);
  border-radius: 1rem; display: flex; align-items: center;
  justify-content: center; margin-bottom: 1.5rem;
  color: #2cd0a1; font-size: 1.5rem;
}
.page-video-compressor-guide .tutorial-title {
  font-size: 1.8rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem;
}
.page-video-compressor-guide .tutorial-content { color: #64748b; line-height: 1.7; }
.page-video-compressor-guide .tutorial-list { margin: 1.5rem 0; padding-left: 1.5rem; }
.page-video-compressor-guide .tutorial-list li { margin-bottom: 0.5rem; color: #64748b; }

/* Compact lists for the hero cards (keep bullets, reduce indentation/spacing). */
.page-video-compressor-guide #contents .tutorial-list.tutorial-list-compact {
  margin: 0.75rem 0 0.25rem;
  padding-left: 1.1rem;
}
.page-video-compressor-guide #contents .tutorial-list.tutorial-list-compact li {
  margin-bottom: 0.35rem;
}

/* */
.page-video-compressor-guide .guide-settings-demo {
  background: rgba(44,208,161,0.08); border-radius: 1.5rem;
  padding: 3rem; margin: 2rem 0;
}
.page-video-compressor-guide .guide-setting-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0; border-bottom: 1px solid rgba(44,208,161,0.2);
}
.page-video-compressor-guide .guide-setting-item:last-child { border-bottom: none; }
.page-video-compressor-guide .guide-setting-label { font-weight: 600; color: #1e293b; }
.page-video-compressor-guide .guide-setting-value { color: #2cd0a1; font-weight: 700; }

/* */
.page-video-compressor-guide .guide-comparison-table {
  width: 100%; border-collapse: collapse; margin: 2rem 0;
  background: white; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.page-video-compressor-guide .guide-comparison-table th {
  background: linear-gradient(135deg, #2cd0a1, #1fa885);
  color: white; padding: 1.5rem; text-align: left; font-weight: 600;
}
.page-video-compressor-guide .guide-comparison-table td {
  padding: 1.5rem; border-bottom: 1px solid #e2e8f0; color: #64748b;
}
.page-video-compressor-guide .guide-comparison-table tr:last-child td { border-bottom: none; }
.page-video-compressor-guide .guide-row-highlight { background: rgba(44,208,161,0.08); }

/* */
.page-video-compressor-guide .tips-section {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  border-left: 4px solid #2cd0a1; margin: 2rem 0;
}
.page-video-compressor-guide .tips-title {
  font-size: 1.3rem; font-weight: 700; color: #2cd0a1; margin-bottom: 1rem;
}

/* CTA */
.page-video-compressor-guide .guide-cta-section {
  background: linear-gradient(135deg,
    rgba(44,208,161,0.08) 0%,
    rgba(31,168,133,0.12) 100%);
  padding: 4rem 0;
}

/*
  Video Compressor guide CTA (#download-cta)
  Keep the same background *structure* as Screen Recorder guide CTA,
  but with Video Compressor's color theme.
*/
.page-video-compressor-guide #download-cta {
  background: linear-gradient(135deg,
    rgba(44,208,161,0.08) 0%,
    rgba(31,168,133,0.12) 30%,
    rgba(16,185,129,0.05) 100%);
  color: #1e293b;
  position: relative;
  overflow: hidden;
}
.page-video-compressor-guide #download-cta::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(44,208,161,0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(16,185,129,0.03) 0%, transparent 40%);
  z-index: 0;
}
.page-video-compressor-guide #download-cta .container { position: relative; z-index: 1; }

/* */
@keyframes vcg-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-video-compressor-guide .animate-fadeInUp {
  animation: vcg-fadeInUp 0.6s ease-out;
}

/* */
@media (max-width: 768px) {
  .page-video-compressor-guide .guide-hero h1 { font-size: 2.5rem; }
  .page-video-compressor-guide .guide-hero { padding: 4rem 0 2rem; }
  .page-video-compressor-guide .nav-steps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; }
  .page-video-compressor-guide .nav-step { white-space: nowrap; }
  .page-video-compressor-guide .section-title { font-size: 2rem; }
  .page-video-compressor-guide .tutorial-card { padding: 1.5rem; }
  .page-video-compressor-guide .guide-settings-demo { padding: 1.5rem; }
  .page-video-compressor-guide .guide-comparison-table { display: block; overflow-x: auto; }
}
@media (max-width: 576px) {
  .page-video-compressor-guide .guide-hero h1 { font-size: 2rem; }
  .page-video-compressor-guide .guide-hero .lead { font-size: 1.1rem; }
  .page-video-compressor-guide .section-title { font-size: 1.75rem; }
}

/* =====================================================
 Audio Cutter Guide Page (.page-audio-cutter-guide)
 ===================================================== */

.page-audio-cutter-guide body {
  background: #f8fafc;
}

/* */
.page-audio-cutter-guide .guide-hero {
  background: linear-gradient(135deg,
    rgba(39,183,101,0.08) 0%,
    rgba(30,156,79,0.12) 30%,
    rgba(99,102,241,0.05) 100%);
  color: #1e293b;
  padding: 6rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.page-audio-cutter-guide .guide-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(39,183,101,0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(99,102,241,0.03) 0%, transparent 40%);
  z-index: 0;
}
.page-audio-cutter-guide .guide-hero .container { position: relative; z-index: 1; }
.page-audio-cutter-guide .guide-hero h1 {
  font-size: 3.5rem; font-weight: 800; line-height: 1.1;
  margin-bottom: 1.5rem; letter-spacing: -0.5px;
}
.page-audio-cutter-guide .hero-gradient-text {
  background: linear-gradient(135deg, #27B765, #1e9c4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-audio-cutter-guide .guide-hero .lead {
  font-size: 1.3rem; color: #64748b; margin-bottom: 2rem;
  max-width: 700px; font-weight: 400; line-height: 1.7;
}

/* */
.page-audio-cutter-guide .btn-primary-cta {
  background: linear-gradient(135deg, #27B765, #1e9c4f);
  border: none; color: white; padding: 0.75rem 2rem;
  border-radius: 0.75rem; font-weight: 600; transition: all 0.3s ease;
}
.page-audio-cutter-guide .btn-primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(39,183,101,0.3); color: white;
}
.page-audio-cutter-guide .btn-outline-primary-cta {
  border: 2px solid #27B765; color: #27B765; padding: 0.75rem 2rem;
  border-radius: 0.75rem; font-weight: 600; background: white; transition: all 0.3s ease;
}
.page-audio-cutter-guide .btn-outline-primary-cta:hover {
  background: rgba(39,183,101,0.1); transform: translateY(-2px);
}

/* */
.page-audio-cutter-guide .guide-navigation {
  background: white; padding: 2rem 0;
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 68px; z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
.page-audio-cutter-guide .nav-steps {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;
}
.page-audio-cutter-guide .nav-step {
  text-decoration: none; color: #64748b;
  padding: 0.75rem 1.5rem; border-radius: 2rem;
  transition: all 0.3s ease; font-weight: 500;
}
.page-audio-cutter-guide .nav-step:hover {
  color: #27B765; background: rgba(39,183,101,0.1); text-decoration: none;
}
.page-audio-cutter-guide .nav-step.active {
  color: white; background: linear-gradient(135deg, #27B765, #1e9c4f);
}

/* */
.page-audio-cutter-guide .guide-content { padding: 4rem 0; }
.page-audio-cutter-guide .guide-section {
  margin-bottom: 6rem; scroll-margin-top: 160px;
}
.page-audio-cutter-guide .section-header {
  margin-bottom: 3rem; padding-bottom: 1.5rem;
  border-bottom: 3px solid #27B765;
}
.page-audio-cutter-guide .section-number {
  display: inline-block; width: 40px; height: 40px;
  background: linear-gradient(135deg, #27B765, #1e9c4f);
  color: white; border-radius: 50%;
  text-align: center; line-height: 40px; font-weight: 700; margin-right: 1rem;
}
.page-audio-cutter-guide .section-title {
  font-size: 2.5rem; font-weight: 800; color: #1e293b; display: inline-block;
}
.page-audio-cutter-guide .section-description {
  font-size: 1.2rem; color: #64748b; margin-top: 1rem; max-width: 700px;
}

/* */
.page-audio-cutter-guide .tutorial-card {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  border: 2px solid #e2e8f0; transition: all 0.3s ease; margin-bottom: 2rem;
}
.page-audio-cutter-guide .tutorial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: #27B765;
}
.page-audio-cutter-guide .tutorial-icon {
  width: 60px; height: 60px; background: rgba(39,183,101,0.1);
  border-radius: 1rem; display: flex; align-items: center;
  justify-content: center; margin-bottom: 1.5rem;
  color: #27B765; font-size: 1.5rem;
}
.page-audio-cutter-guide .tutorial-title {
  font-size: 1.8rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem;
}
.page-audio-cutter-guide .tutorial-content { color: #64748b; line-height: 1.7; }
.page-audio-cutter-guide .tutorial-list { margin: 1.5rem 0; padding-left: 1.5rem; }
.page-audio-cutter-guide .tutorial-list li { margin-bottom: 0.5rem; color: #64748b; }

/* Compact lists for the hero cards (keep bullets, reduce indentation/spacing). */
.page-audio-cutter-guide #contents .tutorial-list.tutorial-list-compact {
  margin: 0.75rem 0 0.25rem;
  padding-left: 1.1rem;
}
.page-audio-cutter-guide #contents .tutorial-list.tutorial-list-compact li {
  margin-bottom: 0.35rem;
}

/* */
.page-audio-cutter-guide .guide-settings-demo {
  background: rgba(39,183,101,0.08); border-radius: 1.5rem;
  padding: 3rem; margin: 2rem 0;
}
.page-audio-cutter-guide .guide-setting-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0; border-bottom: 1px solid rgba(39,183,101,0.2);
}
.page-audio-cutter-guide .guide-setting-item:last-child { border-bottom: none; }
.page-audio-cutter-guide .guide-setting-label { font-weight: 600; color: #1e293b; }
.page-audio-cutter-guide .guide-setting-value { color: #27B765; font-weight: 700; }

/* */
.page-audio-cutter-guide .guide-format-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.page-audio-cutter-guide .guide-format-item {
  background: white; border-radius: 0.75rem; padding: 1rem;
  text-align: center; border: 1px solid #e2e8f0; color: #64748b;
}
.page-audio-cutter-guide .guide-format-name { font-weight: 600; color: #27B765; }

/* */
.page-audio-cutter-guide .guide-comparison-table {
  width: 100%; border-collapse: collapse; margin: 2rem 0;
  background: white; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.page-audio-cutter-guide .guide-comparison-table th {
  background: linear-gradient(135deg, #27B765, #1e9c4f);
  color: white; padding: 1.5rem; text-align: left; font-weight: 600;
}
.page-audio-cutter-guide .guide-comparison-table td {
  padding: 1.5rem; border-bottom: 1px solid #e2e8f0; color: #64748b;
}
.page-audio-cutter-guide .guide-comparison-table tr:last-child td { border-bottom: none; }
.page-audio-cutter-guide .guide-row-highlight { background: rgba(39,183,101,0.08); }

/* */
.page-audio-cutter-guide .tips-section {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  border-left: 4px solid #27B765; margin: 2rem 0;
}
.page-audio-cutter-guide .tips-title {
  font-size: 1.3rem; font-weight: 700; color: #27B765; margin-bottom: 1rem;
}

/* CTA */
.page-audio-cutter-guide .guide-cta-section {
  background: linear-gradient(135deg,
    rgba(39,183,101,0.08) 0%,
    rgba(30,156,79,0.12) 100%);
  padding: 4rem 0;
}

/* */
@keyframes acg-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-audio-cutter-guide .animate-fadeInUp {
  animation: acg-fadeInUp 0.6s ease-out;
}

/* */
@media (max-width: 768px) {
  .page-audio-cutter-guide .guide-hero h1 { font-size: 2.5rem; }
  .page-audio-cutter-guide .guide-hero { padding: 4rem 0 2rem; }
  .page-audio-cutter-guide .nav-steps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; }
  .page-audio-cutter-guide .nav-step { white-space: nowrap; }
  .page-audio-cutter-guide .section-title { font-size: 2rem; }
  .page-audio-cutter-guide .tutorial-card { padding: 1.5rem; }
  .page-audio-cutter-guide .guide-settings-demo { padding: 1.5rem; }
  .page-audio-cutter-guide .guide-comparison-table { display: block; overflow-x: auto; }
  .page-audio-cutter-guide .guide-features { gap: 1rem; }
  .page-audio-cutter-guide .guide-feature-box { min-width: 150px; padding: 1rem 1.5rem; }
  .page-audio-cutter-guide .guide-format-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .page-audio-cutter-guide .guide-hero h1 { font-size: 2rem; }
  .page-audio-cutter-guide .guide-hero .lead { font-size: 1.1rem; }
  .page-audio-cutter-guide .section-title { font-size: 1.75rem; }
  .page-audio-cutter-guide .guide-navigation { padding: 1.5rem 0; }
}

/* =====================================================
 Video Converter Guide Page (.page-video-converter-guide)
 ===================================================== */

.page-video-converter-guide body {
  background: #f8fafc;
}

/* */
.page-video-converter-guide .guide-hero {
  background: linear-gradient(135deg,
    rgba(62,154,255,0.08) 0%,
    rgba(42,123,204,0.12) 30%,
    rgba(99,102,241,0.05) 100%);
  color: #1e293b;
  padding: 6rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.page-video-converter-guide .guide-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(62,154,255,0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(99,102,241,0.03) 0%, transparent 40%);
  z-index: 0;
}
.page-video-converter-guide .guide-hero .container { position: relative; z-index: 1; }
.page-video-converter-guide .guide-hero h1 {
  font-size: 3.5rem; font-weight: 800; line-height: 1.1;
  margin-bottom: 1.5rem; letter-spacing: -0.5px;
}
.page-video-converter-guide .hero-gradient-text {
  background: linear-gradient(135deg, #3E9AFF, #2A7BCC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-video-converter-guide .guide-hero .lead {
  font-size: 1.3rem; color: #64748b; margin-bottom: 2rem;
  max-width: 700px; font-weight: 400; line-height: 1.7;
}

/* */
.page-video-converter-guide .btn-primary-cta {
  background: linear-gradient(135deg, #3E9AFF, #2A7BCC);
  border: none; color: white; padding: 0.75rem 2rem;
  border-radius: 0.75rem; font-weight: 600; transition: all 0.3s ease;
}
.page-video-converter-guide .btn-primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(62,154,255,0.3); color: white;
}
.page-video-converter-guide .btn-outline-primary-cta {
  border: 2px solid #3E9AFF; color: #3E9AFF; padding: 0.75rem 2rem;
  border-radius: 0.75rem; font-weight: 600; background: white; transition: all 0.3s ease;
}
.page-video-converter-guide .btn-outline-primary-cta:hover {
  background: rgba(62,154,255,0.1); transform: translateY(-2px);
}

/* */
.page-video-converter-guide .guide-navigation {
  background: white; padding: 2rem 0;
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 68px; z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
.page-video-converter-guide .nav-steps {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;
}
.page-video-converter-guide .nav-step {
  text-decoration: none; color: #64748b;
  padding: 0.75rem 1.5rem; border-radius: 2rem;
  transition: all 0.3s ease; font-weight: 500;
}
.page-video-converter-guide .nav-step:hover {
  color: #3E9AFF; background: rgba(62,154,255,0.1); text-decoration: none;
}
.page-video-converter-guide .nav-step.active {
  color: white; background: linear-gradient(135deg, #3E9AFF, #2A7BCC);
}

/* */
.page-video-converter-guide .guide-content { padding: 4rem 0; }
.page-video-converter-guide .guide-section {
  margin-bottom: 6rem; scroll-margin-top: 160px;
}
.page-video-converter-guide .section-header {
  margin-bottom: 3rem; padding-bottom: 1.5rem;
  border-bottom: 3px solid #3E9AFF;
}
.page-video-converter-guide .section-number {
  display: inline-block; width: 40px; height: 40px;
  background: linear-gradient(135deg, #3E9AFF, #2A7BCC);
  color: white; border-radius: 50%;
  text-align: center; line-height: 40px; font-weight: 700; margin-right: 1rem;
}
.page-video-converter-guide .section-title {
  font-size: 2.5rem; font-weight: 800; color: #1e293b; display: inline-block;
}
.page-video-converter-guide .section-description {
  font-size: 1.2rem; color: #64748b; margin-top: 1rem; max-width: 700px;
}

/* */
.page-video-converter-guide .tutorial-card {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  border: 2px solid #e2e8f0; transition: all 0.3s ease; margin-bottom: 2rem;
}
.page-video-converter-guide .tutorial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: #3E9AFF;
}
.page-video-converter-guide .tutorial-icon {
  width: 60px; height: 60px; background: rgba(62,154,255,0.1);
  border-radius: 1rem; display: flex; align-items: center;
  justify-content: center; margin-bottom: 1.5rem;
  color: #3E9AFF; font-size: 1.5rem;
}
.page-video-converter-guide .tutorial-title {
  font-size: 1.8rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem;
}
.page-video-converter-guide .tutorial-content { color: #64748b; line-height: 1.7; }
.page-video-converter-guide .tutorial-list { margin: 1.5rem 0; padding-left: 1.5rem; }
.page-video-converter-guide .tutorial-list li { margin-bottom: 0.5rem; color: #64748b; }

/* Compact lists for the hero cards (keep bullets, reduce indentation/spacing). */
.page-video-converter-guide #contents .tutorial-list.tutorial-list-compact {
  margin: 0.75rem 0 0.25rem;
  padding-left: 1.1rem;
}
.page-video-converter-guide #contents .tutorial-list.tutorial-list-compact li {
  margin-bottom: 0.35rem;
}

/* */
.page-video-converter-guide .guide-feature-demo {
  background: rgba(62,154,255,0.07); border-radius: 1.5rem;
  padding: 3rem; margin: 2rem 0;
}
.page-video-converter-guide .guide-feature-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0; border-bottom: 1px solid rgba(62,154,255,0.2);
}
.page-video-converter-guide .guide-feature-item:last-child { border-bottom: none; }
.page-video-converter-guide .guide-feature-label { font-weight: 600; color: #1e293b; }
.page-video-converter-guide .guide-feature-value { color: #3E9AFF; font-weight: 700; }

/* */
.page-video-converter-guide .guide-format-icon {
  display: inline-block; width: 50px; height: 50px;
  background: rgba(62,154,255,0.1); border-radius: 12px;
  text-align: center; line-height: 50px; margin: 0 8px 8px 0;
  color: #3E9AFF; font-weight: 600; font-size: 0.9rem;
}

/* */
.page-video-converter-guide .guide-comparison-table {
  width: 100%; border-collapse: collapse; margin: 2rem 0;
  background: white; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.page-video-converter-guide .guide-comparison-table th {
  background: linear-gradient(135deg, #3E9AFF, #2A7BCC);
  color: white; padding: 1.5rem; text-align: left; font-weight: 600;
}
.page-video-converter-guide .guide-comparison-table td {
  padding: 1.5rem; border-bottom: 1px solid #e2e8f0; color: #64748b;
}
.page-video-converter-guide .guide-comparison-table tr:last-child td { border-bottom: none; }
.page-video-converter-guide .guide-row-highlight { background: rgba(62,154,255,0.07); }

/* */
.page-video-converter-guide .tips-section {
  background: white; border-radius: 1.5rem; padding: 2.5rem;
  border-left: 4px solid #3E9AFF; margin: 2rem 0;
}
.page-video-converter-guide .tips-title {
  font-size: 1.3rem; font-weight: 700; color: #3E9AFF; margin-bottom: 1rem;
}

/* CTA */
.page-video-converter-guide .guide-cta-section {
  background: linear-gradient(135deg,
    rgba(62,154,255,0.08) 0%,
    rgba(42,123,204,0.12) 100%);
  padding: 4rem 0;
}

/* ===== Account Center ===== */
.page-account section {
  padding: 40px 0 80px;
  background: #fff;
  min-height: calc(100vh - 70px);
}

.page-account h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  padding: 8px 0;
}

.page-account .sidebar-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.page-account .sidebar-card .card-header {
  background: linear-gradient(135deg, #f0fdf9 0%, #e6faf6 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 24px 16px 16px;
}

.page-account .sidebar-card .card-header img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.page-account .sidebar-card .card-header h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 8px;
}

.page-account .sidebar-card .card-header label {
  font-size: 0.8rem;
  color: #64748b;
}

.page-account .sidebar-card .nav-link {
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  border-radius: 8px;
  margin: 2px 8px;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
}

.page-account .sidebar-card .nav-link:hover {
  background: #f0fdf9;
  color: #00b09b;
}

.page-account .sidebar-card .nav-link.active {
  background: rgba(0,225,197,0.1);
  color: #00b09b;
  font-weight: 600;
}

.page-account .sidebar-card .nav-link i { font-size: 1rem; width: 20px; }

.page-account .content-panel h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
}

.page-account .content-panel hr {
  border-color: #cbd5e1;
  border-top-width: 1.5px;
  opacity: 1;
}

.page-account .content-panel .card.bg-transparent {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff !important;
}

.page-account .content-panel .card.bg-transparent .card-body {
  padding: 20px 24px !important;
}

.page-account .form-label.text-secondary {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8 !important;
  margin-bottom: 6px;
}

.page-account .avatar {
  display: inline-block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.page-account .avatar img { width: 100%; height: 100%; object-fit: cover; }

.page-account .btn-outline-primary {
  border-color: #00E1C5;
  color: #00b09b;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 16px;
  transition: all 0.2s;
}

.page-account .btn-outline-primary:hover {
  background: #00E1C5;
  border-color: #00E1C5;
  color: #fff;
}

.page-account .modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}

.page-account .modal-header {
  border-bottom: 1px solid #f1f5f9;
  padding: 20px 24px 16px;
}

.page-account .modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
}

.page-account .modal-body { padding: 20px 24px 24px; }

.page-account .modal-body .form-control {
  border-radius: 8px;
  border-color: #e2e8f0;
  font-size: 0.9rem;
  padding: 10px 14px;
}

.page-account .modal-body .form-control:focus {
  border-color: #00E1C5;
  box-shadow: 0 0 0 3px rgba(0,225,197,0.15);
}

.page-account .btn-primary {
  background: #00E1C5;
  border-color: #00E1C5;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s;
}

.page-account .btn-primary:hover { background: #00b09b; border-color: #00b09b; }

.page-account .btn-outline-dark { border-radius: 8px; font-weight: 600; font-size: 0.875rem; }

@media (max-width: 991px) {
  .page-account .sidebar-card { margin-bottom: 24px; }
  .page-account section { padding: 24px 0 60px; background: #fff; }
}

/* page-account: table (Subscription / My order / Redeem history) */
.page-account .content-panel .table-responsive {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.page-account .content-panel .table {
  margin-bottom: 0;
  font-size: 0.875rem;
}
.page-account .content-panel .table thead th {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
  color: #64748b;
  padding: 12px 16px;
  white-space: nowrap;
}
.page-account .content-panel .table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.page-account .content-panel .table tbody td img {
  height: 24px;
  width: auto;
}
.page-account .content-panel .table tbody tr:last-child td { border-bottom: none; }
.page-account .content-panel .table tbody tr:hover td { background: #f8fafc; }
.page-account .content-panel .pagination .page-link {
  color: #00b09b;
  border-color: #e2e8f0;
  font-size: 0.875rem;
}
.page-account .content-panel .pagination .page-item.active .page-link {
  background: #00E1C5;
  border-color: #00E1C5;
  color: #fff;
}

/* page-account: linked account */
.page-account .content-panel .card.bg-transparent {
  border: none;
  background: transparent !important;
}
.page-account .content-panel .card.bg-transparent .card-body { padding: 0 !important; }
.page-account .content-panel .bg-opacity-10.border {
  border-color: #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
}

/* page-account: delete profile */
.page-account .content-panel .list-unstyled li {
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.7;
}
.page-account .content-panel > div > .row > .col-12:first-child {
  font-weight: 600;
  color: #dc3545;
  font-size: 0.95rem;
  padding: 14px 16px;
  background: #fff5f5;
  border: 1px solid #fecdd3;
  border-radius: 10px;
}

/* */
@keyframes vcvg-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-video-converter-guide .animate-fadeInUp {
  animation: vcvg-fadeInUp 0.6s ease-out;
}

/* */
@media (max-width: 768px) {
  .page-video-converter-guide .guide-hero h1 { font-size: 2.5rem; }
  .page-video-converter-guide .guide-hero { padding: 4rem 0 2rem; }
  .page-video-converter-guide .nav-steps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; }
  .page-video-converter-guide .nav-step { white-space: nowrap; }
  .page-video-converter-guide .section-title { font-size: 2rem; }
  .page-video-converter-guide .tutorial-card { padding: 1.5rem; }
  .page-video-converter-guide .guide-feature-demo { padding: 1.5rem; }
  .page-video-converter-guide .guide-comparison-table { display: block; overflow-x: auto; }
}
@media (max-width: 576px) {
  .page-video-converter-guide .guide-hero h1 { font-size: 2rem; }
  .page-video-converter-guide .guide-hero .lead { font-size: 1.1rem; }
  .page-video-converter-guide .section-title { font-size: 1.75rem; }
}

/* ===== Sign In / Sign Up ===== */
.page-signin,
.page-signup {
  background: linear-gradient(135deg, rgba(0, 225, 197, 0.06) 0%, rgba(0, 191, 165, 0.1) 100%);
  min-height: 100vh;
  font-family: 'Inter', 'Instrument Sans', sans-serif;
}

.page-signin main,
.page-signup main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 40px 0;
}

/* Brand header */
.page-signin .brand-header,
.page-signup .brand-header {
  text-align: center;
  margin-bottom: 2rem;
}
.page-signin .signin-brand-link,
.page-signup .signin-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.page-signin .signin-brand-link .brand-name,
.page-signup .signin-brand-link .brand-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -1px;
}

/* Card */
.page-signin .card,
.page-signup .card {
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.page-signin .card-body,
.page-signup .card-body {
  padding: 2.5rem;
}

/* Title */
.page-signin .card-body h3,
.page-signup .card-body h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.25rem;
  text-align: center;
}
.page-signin .card-body .signin-subtitle,
.page-signup .card-body .signin-subtitle {
  text-align: center;
  color: #64748b;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* Google button */
.page-signin .google-btn,
.page-signup .google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  border: 2px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b;
  background: #fff;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.page-signin .google-btn:hover,
.page-signup .google-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
  color: #0f172a;
}
.page-signin .google-btn img,
.page-signup .google-btn img {
  width: 20px;
  height: 20px;
}

/* Or divider */
.page-signin .position-relative hr,
.page-signup .position-relative hr {
  border-color: #e2e8f0;
  opacity: 1;
}
.page-signin .position-relative p,
.page-signup .position-relative p {
  font-size: 0.85rem;
  color: #94a3b8;
  background: #fff;
  padding: 0 16px;
}

/* Form labels */
.page-signin .form-label,
.page-signup .form-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 6px;
}

/* Inputs */
.page-signin .form-control,
.page-signup .form-control {
  height: 48px;
  border-radius: 0.75rem;
  border: 2px solid #e2e8f0;
  font-size: 1rem;
  color: #1e293b;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  padding: 10px 16px;
}
.page-signin .form-control:focus,
.page-signup .form-control:focus {
  border-color: #00E1C5;
  box-shadow: 0 0 0 3px rgba(0, 225, 197, 0.15);
  outline: none;
}

/* Submit button */
.page-signin .btn-primary,
.page-signup .btn-primary {
  height: 50px;
  background: linear-gradient(135deg, #00E1C5, #00BFA5);
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.page-signin .btn-primary:hover,
.page-signup .btn-primary:hover {
  background: linear-gradient(135deg, #00BFA5, #009688);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 225, 197, 0.4);
  color: #fff;
}
.page-signin .btn-primary:disabled,
.page-signup .btn-primary:disabled {
  opacity: 0.7;
  transform: none;
}

/* Remember me & Forgot */
.page-signin .form-check-input:checked {
  background-color: #00E1C5;
  border-color: #00E1C5;
}
.page-signin .form-check-label {
  font-size: 0.875rem;
  color: #64748b;
}
.page-signin a.text-primary,
.page-signup a.text-primary {
  color: #00BFA5 !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.page-signin a.text-primary:hover,
.page-signup a.text-primary:hover {
  color: #009688 !important;
  text-decoration: underline;
}

/* Bottom tip text */
.page-signin .mt-3,
.page-signup .mt-3 {
  font-size: 0.875rem;
  color: #64748b;
}

/* Verify code input (sign-up step 2) */
.page-signup #verifyInput {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 6px;
  font-weight: 600;
}

/* Modal */
.page-signin .modal-content,
.page-signup .modal-content {
  border-radius: 1.5rem;
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.page-signin .modal-header,
.page-signup .modal-header {
  border-bottom: 1px solid #f1f5f9;
  padding: 18px 24px 14px;
}
.page-signin .modal-body,
.page-signup .modal-body {
  padding: 20px 24px 24px;
  font-size: 0.9rem;
  color: #475569;
}
.page-signin .modal-body .btn-primary,
.page-signup .modal-body .btn-primary {
  min-width: 80px;
  height: 40px;
}

/* ===== Redeem ===== */
.page-redeem {
  background: linear-gradient(180deg, #f7fbff 0%, #eef2f6 100%);
  font-family: 'Inter', 'Instrument Sans', sans-serif;
}

main.page-redeem {
  flex: 1;
  display: block;
  padding: 0 0 3rem;
}

.page-redeem .redeem-section {
  padding-top: 1rem;
}

.page-redeem .redeem-container {
  max-width: 960px;
}

.page-redeem .redeem-panel {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #fff;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.page-redeem .redeem-panel-header {
  padding: 1.75rem 2rem 1.5rem;
  background:
    radial-gradient(640px 200px at 0% 0%, rgba(7, 210, 184, 0.14), transparent 58%),
    radial-gradient(520px 180px at 100% 0%, rgba(62, 154, 255, 0.08), transparent 55%),
    linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(7, 210, 184, 0.22);
}

.page-redeem .redeem-panel-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #0f766e;
  background: rgba(7, 210, 184, 0.12);
  border: 1px solid rgba(7, 210, 184, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 12px;
}

.page-redeem .redeem-panel-badge i {
  color: #07D2B8;
}

.page-redeem .redeem-panel-title {
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.page-redeem .redeem-panel-lead {
  margin: 0;
  max-width: 540px;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

.page-redeem .redeem-panel-body {
  padding: 1.75rem 2rem 2rem;
}

@media (min-width: 992px) {
  .page-redeem .redeem-panel-header {
    padding: 2rem 2.5rem 1.65rem;
  }

  .page-redeem .redeem-panel-body {
    padding: 2rem 2.5rem 2.25rem;
  }
}

.page-redeem .redeem-form {
  margin: 0;
}

.page-redeem .form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.page-redeem .redeem-required {
  color: #dc3545;
  font-weight: 700;
  margin-left: 2px;
}

.page-redeem .form-control {
  height: 48px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 1rem;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  padding: 10px 14px;
}

.page-redeem .redeem-code-input {
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  height: 48px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.page-redeem .redeem-field-code .form-label {
  color: #334155;
}

.page-redeem .form-control:focus {
  border-color: #07D2B8;
  box-shadow: 0 0 0 3px rgba(7, 210, 184, 0.18);
  outline: none;
  background: #fff;
}

.page-redeem .redeem-code-input:focus {
  border-color: #07D2B8;
  background: #fff;
}

.page-redeem .form-control:disabled,
.page-redeem .form-control[readonly] {
  background: #f1f5f9;
  color: #64748b;
}

.page-redeem #emailLabel,
.page-redeem #codeLabel {
  display: block;
  margin-top: 5px;
  min-height: 1.2rem;
  font-size: 0.8rem;
}

.page-redeem .redeem-submit-btn {
  height: 50px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #07D2B8, #3be0c8);
  box-shadow: 0 6px 18px rgba(7, 210, 184, 0.32);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.page-redeem .redeem-submit-btn:hover,
.page-redeem .redeem-submit-btn:focus {
  background: linear-gradient(135deg, #06b39e, #2fd0b6);
  color: #fff;
  box-shadow: 0 10px 24px rgba(7, 210, 184, 0.4);
  transform: translateY(-1px);
}

.page-redeem .redeem-submit-btn:disabled {
  opacity: 0.65;
}

.page-redeem .redeem-hint {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: #64748b;
}

.page-redeem .redeem-hint a {
  color: #0f766e;
  font-weight: 600;
  text-decoration: none;
}

.page-redeem .redeem-hint a:hover {
  text-decoration: underline;
  color: #07D2B8;
}

.page-redeem .redeem-modal-content {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.page-redeem .modal-header {
  border-bottom: 1px solid rgba(7, 210, 184, 0.2);
  padding: 16px 20px 12px;
  background: #f0fdfa;
}

.page-redeem .modal-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 1rem;
}

.page-redeem .modal-body {
  padding: 18px 20px 22px;
}

.page-redeem .redeem-modal-info {
  display: block;
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 0;
}

.page-redeem .modal-body .redeem-submit-btn {
  min-width: 96px;
  height: 40px;
}

/* Redeem success */
.page-redeem-success .redeem-success-panel {
  border-color: rgba(7, 210, 184, 0.35);
  box-shadow: 0 12px 40px rgba(7, 210, 184, 0.12);
}

.page-redeem-success .redeem-success-body {
  padding: 2.5rem 2rem 2.25rem;
  text-align: center;
}

@media (min-width: 992px) {
  .page-redeem-success .redeem-success-body {
    padding: 3rem 2.5rem 2.75rem;
  }
}

.page-redeem-success .redeem-success-icon-wrap {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(7, 210, 184, 0.18) 0%, rgba(7, 210, 184, 0.06) 100%);
  border: 2px solid rgba(7, 210, 184, 0.35);
  box-shadow: 0 8px 24px rgba(7, 210, 184, 0.18);
}

.page-redeem-success .redeem-success-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.page-redeem-success .redeem-success-title {
  font-size: clamp(1.45rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.page-redeem-success .redeem-success-message {
  max-width: 520px;
  margin: 0 auto 1.75rem;
  font-size: 0.98rem;
  color: #64748b;
  line-height: 1.65;
}

.page-redeem-success .redeem-success-actions {
  max-width: 360px;
  margin: 0 auto;
}

.page-redeem-success .redeem-success-actions .redeem-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

/* Footer */
.page-signin .signin-footer,
.page-signup .signin-footer {
  text-align: center;
  padding: 2rem 0 1.5rem;
  color: #94a3b8;
  font-size: 0.85rem;
}
.page-signin .signin-footer p,
.page-signup .signin-footer p {
  margin-bottom: 0.5rem;
  color: #94a3b8;
}
.page-signin .signin-footer-links,
.page-signup .signin-footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.page-signin .signin-footer-links a,
.page-signup .signin-footer-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s;
}
.page-signin .signin-footer-links a:hover,
.page-signup .signin-footer-links a:hover {
  color: #2cd0a1;
}

@media (max-width: 576px) {
  .page-signin .card-body,
  .page-signup .card-body {
    padding: 2rem 1.5rem;
  }
}

/* ===== Login Success ===== */
.page-login-success {
  background: linear-gradient(135deg, rgba(0, 225, 197, 0.06) 0%, rgba(0, 191, 165, 0.1) 100%);
  min-height: 100vh;
  font-family: 'Inter', 'Instrument Sans', sans-serif;
}
.page-login-success main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 40px 0;
}
.page-login-success .brand-header {
  text-align: center;
  margin-bottom: 2rem;
}
.page-login-success .signin-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.page-login-success .signin-brand-link .brand-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -1px;
}
.page-login-success .card {
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.page-login-success .card-body {
  padding: 2.5rem;
}
.page-login-success .card-body h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
  text-align: center;
}
.page-login-success .signin-subtitle {
  text-align: center;
  color: #64748b;
  font-size: 0.95rem;
}
.page-login-success .login-success-icon-wrap {
  display: flex;
  justify-content: center;
}
.page-login-success .login-success-icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.page-login-success .btn-primary {
  height: 50px;
  border-radius: 0.75rem;
  font-weight: 600;
  background: linear-gradient(135deg, #00E1C5, #00BFA5);
  border: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.page-login-success .btn-primary:hover {
  background: linear-gradient(135deg, #00BFA5, #009688);
  box-shadow: 0 10px 20px rgba(0, 191, 165, 0.25);
  transform: translateY(-1px);
  color: #fff;
}
.page-login-success .signin-footer {
  text-align: center;
  padding: 2rem 0 1.5rem;
  color: #94a3b8;
  font-size: 0.85rem;
}
.page-login-success .signin-footer p {
  margin-bottom: 0.5rem;
  color: #94a3b8;
}
.page-login-success .signin-footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.page-login-success .signin-footer-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s;
}
.page-login-success .signin-footer-links a:hover {
  color: #2cd0a1;
}
@media (max-width: 576px) {
  .page-login-success .card-body { padding: 2rem 1.5rem; }
}

/* =========================================================
 * Checkout Total line wrap (mobile)
 * ========================================================= */

/* Total 行：允许换行，避免溢出 */
.checkout-total{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.25rem; /* 让下面 small 更贴一点，可按需删 */
}

/* 金额：保持数字本身不拆开，但整块可以换到下一行 */
.checkout-total-value{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 576px){
  .checkout-total-value{ font-size: 1.75rem; }
}

/* Product icon in checkout modal (avoid inline styles) */
.checkout-product-icon{
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* =========================================================
 * Video Editor page styles (scoped)
 * ========================================================= */

.video-editor-page {
  --ve-accent: #00dbbf;
  --ve-accent-2: #65dfff;
  --ve-bg: #06080d;
  --ve-panel: #0b1018;
  --ve-text: #f4f8ff;
  --ve-muted: #9ab0cb;
  --ve-border: rgba(122, 151, 184, 0.22);
  --ve-radius: 16px;
  --ve-max: 1200px;
  --ve-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--ve-text);
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(0, 219, 191, 0.18) 0%, transparent 62%),
    radial-gradient(1000px 700px at 100% 8%, rgba(69, 112, 255, 0.12) 0%, transparent 58%),
    linear-gradient(180deg, #090d14 0%, #06080d 50%, #090d14 100%);
  overflow-x: hidden;
}

.video-editor-page .ve-inner {
  width: min(var(--ve-max), calc(100% - 48px));
  margin: 0 auto;
}

.video-editor-page .ve-btn {
  height: 46px;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--ve-ease), filter 0.2s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
}

.video-editor-page .ve-btn-main {
  color: #042720;
  background: linear-gradient(135deg, #00dbbf 0%, #8dfdef 46%, #00c8ad 100%);
  box-shadow: 0 0 0 1px rgba(0, 219, 191, 0.22), 0 12px 32px rgba(0, 219, 191, 0.28);
}

.video-editor-page .ve-btn-main:hover,
.video-editor-page .ve-btn-main:focus {
  color: #042720;
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.video-editor-page .ve-btn-ghost {
  border-color: rgba(0, 219, 191, 0.5);
  background: rgba(0, 219, 191, 0.08);
  color: #a4fff3;
}

.video-editor-page .ve-btn-ghost:hover,
.video-editor-page .ve-btn-ghost:focus {
  color: #fff;
  transform: translateY(-2px);
  background: rgba(0, 219, 191, 0.14);
}

.video-editor-page .ve-btn-lg {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

.video-editor-page .ve-hero-wrap {
  position: relative;
  min-height: calc(100vh - 76px);
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 219, 191, 0.18);
}

.video-editor-page .ve-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #06080d;
  background-image: url("../images/video-editor-bg.webp");
  background-repeat: no-repeat;
  background-position: center 22%;
  background-size: cover;
}

.video-editor-page .ve-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(0, 219, 191, 0.12) 0%, rgba(0, 219, 191, 0) 62%),
    radial-gradient(1000px 700px at 100% 10%, rgba(69, 112, 255, 0.09) 0%, rgba(69, 112, 255, 0) 58%),
    linear-gradient(180deg, rgba(6, 8, 13, 0.68) 0%, rgba(6, 8, 13, 0.68) 100%);
  pointer-events: none;
}

.video-editor-page .ve-hero {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 76px);
  padding: 80px 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.video-editor-page .ve-hero-copy {
  width: 100%;
}

.video-editor-page .ve-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 219, 191, 0.4);
  background: rgba(0, 219, 191, 0.12);
  color: #a6fff2;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 18px;
}

.video-editor-page .ve-hero h1 {
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.12;
  letter-spacing: 0.2px;
  text-wrap: balance;
  margin: 0 auto 18px;
  max-width: 820px;
  color: #f4f8ff;
  font-weight: 800;
}

.video-editor-page .ve-hero h1 strong {
  color: var(--ve-accent);
  font-weight: 800;
  text-shadow: 0 0 28px rgba(0, 219, 191, 0.38);
}

.video-editor-page .ve-subtitle {
  color: var(--ve-muted);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 640px;
  margin: 0 auto 26px;
  line-height: 1.7;
}

.video-editor-page .ve-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  justify-content: center;
}

.video-editor-page .ve-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  justify-content: center;
}

.video-editor-page .ve-chip {
  font-size: 12px;
  color: #c9dcf3;
  border: 1px solid var(--ve-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  padding: 5px 10px;
}

.video-editor-page .ve-stripe {
  padding: 92px 0;
  border-top: 1px solid rgba(127, 153, 183, 0.14);
}

.video-editor-page .ve-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 40px;
}

.video-editor-page .ve-head h2 {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.16;
  margin-bottom: 12px;
  color: #f4f8ff;
  font-weight: 800;
}

.video-editor-page .ve-lead {
  color: var(--ve-muted);
  font-size: clamp(15px, 1.3vw, 17px);
  margin: 0;
  line-height: 1.7;
}

.video-editor-page .ve-feat-grid,
.video-editor-page .ve-fx-grid,
.video-editor-page .ve-scenes,
.video-editor-page .ve-steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ve-border);
  border-left: 1px solid var(--ve-border);
  background: var(--ve-panel);
}

.video-editor-page .ve-feat-grid {
  grid-template-columns: repeat(3, 1fr);
}

.video-editor-page .ve-fx-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border: 0;
  background: transparent;
}

.video-editor-page .ve-fx-label {
  margin: 8px 0 16px;
  font-size: 18px;
  color: #d5e6fb;
  font-weight: 700;
}

.video-editor-page .ve-fx-grid + .ve-fx-label {
  margin-top: 42px;
}

.video-editor-page .ve-fx-card {
  border: 1px solid var(--ve-border);
  border-radius: var(--ve-radius);
  padding: 10px 10px 14px;
  background: linear-gradient(180deg, rgba(17, 24, 36, 0.96), rgba(12, 18, 27, 0.96));
}

.video-editor-page .ve-fx-card h3 {
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #dce9fa;
}

.video-editor-page .ve-fx-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: #0b1018;
}

.video-editor-page .ve-fx-stage .ve-demo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.video-editor-page .ve-scene-photo {
  background: #0b1018 url("../images/filter.webp") center / cover no-repeat;
}

.video-editor-page .ve-scene-trans {
  background: #0b1018 url("../images/tr.jpeg") center / cover no-repeat;
}

.video-editor-page .ve-trans .ve-demo:last-child {
  z-index: 1;
}

.video-editor-page .ve-trans-fade .ve-demo:last-child { animation: ve-fx-fade 2.8s ease-in-out infinite; }
.video-editor-page .ve-trans-slide .ve-demo:last-child { animation: ve-fx-slide 2.8s ease-in-out infinite; }
.video-editor-page .ve-trans-wipe .ve-demo:last-child { animation: ve-fx-wipe 2.8s ease-in-out infinite; }
.video-editor-page .ve-trans-zoom .ve-demo:last-child { animation: ve-fx-zoom 2.8s ease-in-out infinite; }
.video-editor-page .ve-trans-iris .ve-demo:last-child { animation: ve-fx-iris 2.8s ease-in-out infinite; }
.video-editor-page .ve-trans-flip { perspective: 780px; }
.video-editor-page .ve-trans-flip .ve-demo { backface-visibility: hidden; }
.video-editor-page .ve-trans-flip .ve-demo:first-child { animation: ve-fx-flip-a 3.2s ease-in-out infinite; }
.video-editor-page .ve-trans-flip .ve-demo:last-child { animation: ve-fx-flip-b 3.2s ease-in-out infinite; }
.video-editor-page .ve-trans-glitch .ve-demo:last-child { animation: ve-fx-glitch 2.6s steps(2, end) infinite; }
.video-editor-page .ve-trans-black .ve-demo:last-child { animation: ve-fx-fade 2.8s ease-in-out infinite; }
.video-editor-page .ve-trans-black::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  pointer-events: none;
  animation: ve-fx-black 2.8s ease-in-out infinite;
}

@keyframes ve-fx-fade {
  0%, 12% { opacity: 0; }
  42%, 62% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes ve-fx-slide {
  0%, 10% { transform: translateX(100%); }
  42%, 58% { transform: translateX(0); }
  90%, 100% { transform: translateX(-100%); }
}
@keyframes ve-fx-wipe {
  0%, 10% { clip-path: inset(0 100% 0 0); }
  45%, 58% { clip-path: inset(0 0 0 0); }
  90%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes ve-fx-zoom {
  0%, 10% { opacity: 0; transform: scale(1.35); }
  42%, 58% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(0.86); }
}
@keyframes ve-fx-iris {
  0%, 10% { clip-path: circle(0% at 50% 50%); }
  45%, 58% { clip-path: circle(80% at 50% 50%); }
  90%, 100% { clip-path: circle(0% at 50% 50%); }
}
@keyframes ve-fx-flip-a {
  0%, 12% { transform: rotateY(0deg); }
  45%, 62% { transform: rotateY(-180deg); }
  100% { transform: rotateY(-360deg); }
}
@keyframes ve-fx-flip-b {
  0%, 12% { transform: rotateY(180deg); }
  45%, 62% { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}
@keyframes ve-fx-glitch {
  0%, 18% { opacity: 0; transform: none; filter: none; }
  22% { opacity: 1; transform: translate(6px, -3px); filter: hue-rotate(80deg) saturate(2); clip-path: inset(12% 0 48% 0); }
  28% { opacity: 1; transform: translate(-8px, 2px); filter: hue-rotate(-50deg); clip-path: inset(40% 0 10% 0); }
  36%, 62% { opacity: 1; transform: none; filter: none; clip-path: none; }
  88%, 100% { opacity: 0; }
}
@keyframes ve-fx-black {
  0%, 16% { opacity: 0; }
  40%, 56% { opacity: 1; }
  82%, 100% { opacity: 0; }
}

.video-editor-page .ve-fx-stage:hover .ve-demo,
.video-editor-page .ve-fx-stage:hover::after {
  animation-play-state: paused;
}

.video-editor-page .ve-feat,
.video-editor-page .ve-scene,
.video-editor-page .ve-step {
  padding: 28px 24px 26px;
  border-right: 1px solid var(--ve-border);
  border-bottom: 1px solid var(--ve-border);
}

.video-editor-page .ve-feat:hover,
.video-editor-page .ve-scene:hover {
  background: rgba(255, 255, 255, 0.03);
}

.video-editor-page .ve-ico {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  color: var(--ve-accent);
  display: grid;
  place-items: center start;
}

.video-editor-page .ve-step .ve-ico {
  margin: 0 auto 12px;
  place-items: center;
}

.video-editor-page .ve-ico svg {
  width: 32px;
  height: 32px;
  display: block;
}

.video-editor-page .ve-feat h3,
.video-editor-page .ve-scene h3,
.video-editor-page .ve-step h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #f4f8ff;
}

.video-editor-page .ve-scene h3,
.video-editor-page .ve-step h3 {
  font-size: 18px;
}

.video-editor-page .ve-feat p,
.video-editor-page .ve-scene p,
.video-editor-page .ve-step p {
  color: var(--ve-muted);
  font-size: 13px;
  line-height: 1.75;
  margin: 0;
}

.video-editor-page .ve-scenes {
  grid-template-columns: repeat(4, 1fr);
}

.video-editor-page .ve-scene {
  padding: 28px 22px 26px;
}

.video-editor-page .ve-steps {
  grid-template-columns: repeat(3, 1fr);
}

.video-editor-page .ve-step {
  text-align: center;
  padding: 32px 22px 28px;
}

.video-editor-page .ve-step-num {
  margin: 0 auto 10px;
  color: var(--ve-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.video-editor-page .ve-step p {
  max-width: 320px;
  margin: 0 auto;
}

.video-editor-page .ve-final {
  background: var(--ve-panel);
  text-align: center;
}

.video-editor-page .ve-final .ve-head {
  margin-bottom: 28px;
}

.video-editor-page .ve-final .ve-btn {
  border-radius: 4px;
  font-weight: 700;
  box-shadow: none;
}

.video-editor-page .ve-final .ve-btn-main {
  background: var(--ve-accent);
  color: #042720;
  box-shadow: none;
}

.video-editor-page .ve-final .ve-btn-main:hover,
.video-editor-page .ve-final .ve-btn-main:focus {
  transform: none;
  filter: none;
  background: #2aead2;
  color: #042720;
}

.video-editor-page .ve-final .ve-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.video-editor-page .ve-cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .video-editor-page .ve-fx-stage .ve-demo,
  .video-editor-page .ve-fx-stage::after {
    animation: none !important;
  }
  .video-editor-page .ve-trans .ve-demo:last-child {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

@media (max-width: 1080px) {
  .video-editor-page .ve-hero,
  .video-editor-page .ve-hero-wrap {
    min-height: auto;
  }
  .video-editor-page .ve-scenes,
  .video-editor-page .ve-fx-grid {
    grid-template-columns: 1fr 1fr;
  }
  .video-editor-page .ve-feat-grid,
  .video-editor-page .ve-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .video-editor-page .ve-inner {
    width: calc(100% - 28px);
  }
  .video-editor-page .ve-hero-wrap {
    min-height: calc(100svh - 64px);
  }
  .video-editor-page .ve-hero {
    padding: 48px 0 48px;
  }
  .video-editor-page .ve-hero-bg {
    background-size: cover;
    background-position: center top;
  }
  .video-editor-page .ve-stripe {
    padding: 64px 0;
  }
  .video-editor-page .ve-scenes,
  .video-editor-page .ve-feat-grid {
    grid-template-columns: 1fr;
  }
  .video-editor-page .ve-fx-grid {
    grid-template-columns: 1fr 1fr;
  }
  .video-editor-page .ve-hero-actions {
    width: 100%;
  }
  .video-editor-page .ve-hero-actions .ve-btn {
    flex: 1;
  }
}

.video-editor-page .ve-faq-accordion {
  max-width: 820px;
  margin: 0 auto;
}

.video-editor-page .ve-faq-accordion .accordion-item {
  background: transparent;
  border: 1px solid var(--ve-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.video-editor-page .ve-faq-accordion .accordion-button {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-weight: 600;
  font-size: 1rem;
  color: #f4f8ff;
  background: rgba(17, 24, 36, 0.96);
  padding: 1.1rem 1.4rem;
  box-shadow: none;
}

.video-editor-page .ve-faq-accordion .accordion-button .ve-faq-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: left;
}

.video-editor-page .ve-faq-accordion .accordion-button:not(.collapsed) {
  color: #8dfdef;
  background: rgba(0, 219, 191, 0.08);
  box-shadow: none;
}

.video-editor-page .ve-faq-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0, 219, 191, 0.45);
}

.video-editor-page .ve-faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300dbbf'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  width: 1.2rem;
  height: 1.2rem;
  background-size: 1.2rem;
  flex-shrink: 0;
}

.video-editor-page .ve-faq-accordion .accordion-body {
  background: rgba(12, 18, 27, 0.96);
  padding: 1.15rem 1.4rem 1.35rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ve-muted);
}

/* =========================================================
 * Video Suite page styles (scoped)
 * ========================================================= */

.video-suite-page {
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 40%, #f7fbff 100%);
}

.video-suite-page .vs-hero {
  padding: 110px 0 80px;
  background:
    radial-gradient(860px 380px at 8% 0%, rgba(7, 210, 184, 0.14), transparent 58%),
    radial-gradient(700px 340px at 92% 20%, rgba(62, 154, 255, 0.1), transparent 62%),
    linear-gradient(135deg, #f8fafc 0%, #ffffff 55%, #f0fdfa 100%);
  color: #0f172a;
  position: relative;
  overflow: hidden;
}

.video-suite-page .vs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 280px at 50% 0%, rgba(7, 210, 184, 0.1), transparent 65%),
    radial-gradient(520px 240px at 80% 80%, rgba(62, 154, 255, 0.06), transparent 60%);
  pointer-events: none;
}

.video-suite-page .vs-hero .container {
  position: relative;
  z-index: 1;
  max-width: 980px;
}

.video-suite-page .vs-hero-inner {
  margin-left: auto;
  margin-right: auto;
}

.video-suite-page .vs-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  background: rgba(7, 210, 184, 0.12);
  color: #0f766e;
  font-size: 0.85rem;
  font-weight: 600;
}

.video-suite-page .vs-hero-badge-blue {
  background: rgba(62, 154, 255, 0.12);
  color: #1d4ed8;
}

.video-suite-page .vs-title {
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.14;
  font-weight: 800;
  margin-bottom: 16px;
  color: #0f172a;
}

.video-suite-page .vs-title span {
  color: #07D2B8;
}

.video-suite-page .vs-subtitle {
  color: #64748b;
  font-size: 1.06rem;
  line-height: 1.78;
  margin: 0 auto 24px;
  max-width: 720px;
}

.video-suite-page .vs-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  margin-bottom: 28px;
}

.video-suite-page .vs-stat-num {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.video-suite-page .vs-stat-label {
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 4px;
}

.video-suite-page .vs-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.video-suite-page .hero-download-btn {
  background: linear-gradient(135deg, #07D2B8, #3be0c8);
  border: none;
  color: #ffffff;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(7, 210, 184, 0.34);
  transition: all .3s ease;
}

.video-suite-page .hero-download-btn:hover,
.video-suite-page .hero-download-btn:focus {
  background: linear-gradient(135deg, #06b39e, #2fd0b6);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(7, 210, 184, 0.44);
}

.video-suite-page .hero-buy-outline-btn {
  border: 2px solid #07D2B8;
  color: #0f766e;
  background: transparent;
  border-radius: 10px;
  font-weight: 700;
  transition: all .3s ease;
}

.video-suite-page .hero-buy-outline-btn:hover,
.video-suite-page .hero-buy-outline-btn:focus {
  background: rgba(7, 210, 184, 0.1);
  color: #047857;
  border-color: #06b39e;
}

.video-suite-page .vs-tool-grid > [class*="col"] {
  display: flex;
}

.video-suite-page .vs-product-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  padding: 1.75rem 1.5rem 1.4rem;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
}

.video-suite-page .vs-product-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #07D2B8, #3be0c8);
}

.video-suite-page .vs-product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 210, 184, 0.45);
  box-shadow: 0 20px 40px rgba(7, 210, 184, 0.12);
}

.video-suite-page .vs-product-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 72px;
}

.video-suite-page .vs-product-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.video-suite-page .vs-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.video-suite-page .vs-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.92rem;
  color: #475569;
  margin-bottom: 8px;
  line-height: 1.5;
}

.video-suite-page .vs-feature-list li i {
  color: #07D2B8;
  margin-top: 2px;
  flex-shrink: 0;
}

.video-suite-page .vs-product-link {
  margin-top: auto;
  font-weight: 600;
  color: #0f766e;
  text-decoration: none;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s ease, gap .2s ease;
}

.video-suite-page .vs-product-link:hover {
  color: #07D2B8;
  gap: 10px;
}

.video-suite-page .vs-tool-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
}

.video-suite-page .vs-tool-tag.web {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.video-suite-page .vs-tool-tag.windows {
  background: rgba(7, 210, 184, 0.12);
  color: #0f766e;
}

.video-suite-page .vs-step {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: #fff;
  padding: 1.5rem;
  height: 100%;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.video-suite-page .vs-step:hover {
  transform: translateY(-4px);
  border-color: rgba(7, 210, 184, 0.45);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}

.video-suite-page .vs-step-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #07D2B8, #3be0c8);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.video-suite-page .vs-cta-box {
  border-radius: 18px;
  border: 1px solid rgba(7, 210, 184, 0.32);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background:
    radial-gradient(700px 240px at 0% 0%, rgba(7, 210, 184, 0.1), transparent 58%),
    #fff;
}

.video-suite-page .vs-why {
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.video-suite-page .vs-why-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.58);
  padding: 1.3rem;
  height: 100%;
}

.video-suite-page .vs-why-num {
  color: #8cf9ed;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 800;
  margin-bottom: 10px;
}

.video-suite-page .vs-why-card h3 {
  color: #f8fafc;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.video-suite-page .vs-why-card p {
  color: #cbd5e1;
  margin-bottom: 0;
  line-height: 1.7;
}

.video-suite-page #suite-pricing {
  scroll-margin-top: 96px;
}

.video-suite-page .vs-price-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: #fff;
  padding: 1.3rem;
  height: 100%;
}

.video-suite-page .vs-price-card.featured {
  border-color: rgba(7, 210, 184, 0.55);
  box-shadow: 0 16px 34px rgba(7, 210, 184, 0.18);
}

.video-suite-page .vs-price-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.video-suite-page .vs-price {
  font-size: 2rem;
  color: #0f172a;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 8px;
}

.video-suite-page .vs-price span {
  font-size: .95rem;
  color: #64748b;
  font-weight: 600;
  margin-left: 4px;
}

.video-suite-page .vs-price-card p {
  color: #64748b;
  margin-bottom: 14px;
}

.video-suite-page .btn-primary-cta {
  background: linear-gradient(135deg, #07D2B8, #3be0c8);
  border: none;
  color: #fff;
  font-weight: 700;
}

.video-suite-page .btn-primary-cta:hover,
.video-suite-page .btn-primary-cta:focus {
  background: linear-gradient(135deg, #06b39e, #2fd0b6);
  color: #fff;
}

.video-suite-page .btn-outline-cta {
  border: 2px solid #07D2B8;
  color: #0f766e;
  font-weight: 700;
}

.video-suite-page .btn-outline-cta:hover,
.video-suite-page .btn-outline-cta:focus {
  background: #07D2B8;
  color: #fff;
}

@media (max-width: 991.98px) {
  .video-suite-page .vs-hero {
    padding: 96px 0 64px;
  }

  .video-suite-page .vs-subtitle {
    max-width: 100%;
  }

  .video-suite-page .vs-hero-stats {
    justify-content: space-between;
    gap: 1rem;
  }

  .video-suite-page .vs-tool-grid .offset-xl-2 {
    margin-left: 0;
  }

}

@media (max-width: 575.98px) {
  .video-suite-page .vs-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

}

body .footer-bottom-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; }
body .footer-copy { flex: 1 1 auto; min-width: 220px; margin: 0; }
body .footer-bottom-links { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-left: auto; flex: 0 0 auto; }
body .footer-bottom-links .list-inline { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; margin: 0; }
body .footer-bottom-links .list-inline-item { margin: 0; }
body .footer-bottom-links .vr-lang-switch { display: flex; align-items: center; flex: 0 0 auto; }
.vr-lang-select {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
    height: 32px;
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 6px;
    padding: 0 30px 0 12px;
    font-size: 0.875rem;
    line-height: 30px;
    cursor: pointer;
    vertical-align: middle;
}
@media (max-width: 991.98px) {
    body .footer-bottom-bar { flex-wrap: wrap !important; }
    body .footer-bottom-links { margin-left: auto !important; }
}
.vr-lang-select:hover,
.vr-lang-select:focus { color: #07D2B8; border-color: #07D2B8; outline: none; }
.signin-footer .vr-lang-switch { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
.signin-footer .vr-lang-select { color: #64748b; border-color: rgba(100, 116, 139, 0.45); }
.signin-footer .vr-lang-select:hover,
.signin-footer .vr-lang-select:focus { color: #07a08c; border-color: #07a08c; }