/* Index — homepage sections */

.feat-section {
  padding: 96px 24px;
  border-top: none;
}

.feat-section,
.more-section,
.setup-block,
.shot-block {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.feat-section::before,
.feat-section::after,
.more-section::before,
.more-section::after,
.shot-block::before,
.shot-block::after,
#capabilities::before,
#capabilities::after,
#capabilities ~ section::before,
#capabilities ~ section::after,
#what-is::before,
#what-is::after,
#use-cases::before,
#use-cases::after,
#trust::before,
#trust::after,
#faq-preview::before,
#faq-preview::after,
section:not(.hero-wrap):not(#install-guide):not(.cmp-section):not(.voices-section)::before,
section:not(.hero-wrap):not(#install-guide):not(.cmp-section):not(.voices-section)::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.more-section {
  padding: 88px 24px 96px;
  border-top: none;
}

.setup-block,
.setup-block-panel {
  position: relative;
  padding: 72px 24px 88px;
  text-align: center;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

.shot-block.band {
  padding: 120px 24px 140px !important;
  border-top: none;
}

#what-is,
#use-cases,
#comparison,
#reviews,
#trust,
#faq-preview,
#page-body > .band:last-of-type {
  border-top: none;
}

.page-foot {
  position: relative;
  z-index: 1;
}

.sect-head {
  text-align: center;
  margin-bottom: 56px;
}

#install-guide .sect-head {
  margin-bottom: 28px;
  width: min(680px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

#other-features .sect-head {
  margin-bottom: 0;
}

.sect-head--compact {
  margin-bottom: 0;
}

/* Other Features heading — centered, solid, cinematic */
#other-features .sect-title {
  margin: 0 auto 48px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
}

/* Installation Guide — centered, uniform heading size */

.setup-block hr,
.setup-block-panel hr,
.setup-block .sect-rule,
.setup-block-panel .sect-rule,
.setup-block .divider,
.setup-block-panel .divider {
  display: none !important;
}

#install-guide .sect-title,
.setup-block-panel h2,
.setup-block h2 {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  text-shadow: none;
}

#install-guide .sect-title::before,
#install-guide .sect-title::after,
.setup-block-panel h2::before,
.setup-block-panel h2::after {
  display: none !important;
  content: none !important;
}

.sect-kicker {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

#capabilities .sect-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4.25rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.05;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, #fff, #8f8f95, #fff);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Install guide must not inherit Features title scale */
#page-body #install-guide .sect-title {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.94);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.sect-title--sm {
  font-size: inherit;
}

.sect-sub {
  max-width: 40rem;
  margin: 18px auto 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

.feat-grid {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.feat-card {
  position: relative;
  min-height: 230px;
  padding: 34px 26px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    #080808;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.025),
    0 18px 55px rgba(0, 0, 0, 0.42);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.feat-card::before,
.feat-card::after {
  display: none;
}

.feat-card:hover {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.06),
    0 0 34px rgba(255, 255, 255, 0.08),
    0 28px 70px rgba(0, 0, 0, 0.55);
  transform: translateY(-3px);
}

.feat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  color: rgba(255, 255, 255, 0.86);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.12));
}

.feat-icon svg {
  display: block;
}

.feat-card h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.feat-card p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.more-grid {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.more-card {
  position: relative;
  min-height: 170px;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    #080808;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.025),
    0 18px 55px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.more-card::before,
.more-card::after {
  display: none;
}

.more-card:hover {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.06),
    0 0 34px rgba(255, 255, 255, 0.08),
    0 28px 70px rgba(0, 0, 0, 0.55);
  transform: translateY(-3px);
}

.more-card h3 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.install-guide__divider {
  display: none;
}

.setup-block__body,
.setup-block-inner,
.setup-block-panel .section-inner {
  width: min(680px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.setup-block__body p,
.setup-block-panel p {
  max-width: 620px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
}

.setup-block__actions,
.setup-block-panel .action-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 0;
  justify-content: center;
}

.setup-block .setup-block__actions a,
.setup-block-panel a,
.setup-block-panel button {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.035);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.04),
    0 0 24px rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.setup-block .setup-block__actions a:hover,
.setup-block-panel a:hover,
.setup-block-panel button:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  .feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .more-grid {
    grid-template-columns: 1fr;
  }

  .feat-section,
  .more-section,
  .setup-block,
  .setup-block-panel,
  .shot-block.band {
    padding-left: 18px;
    padding-right: 18px;
  }

  #other-features .sect-title {
    letter-spacing: 0.08em;
  }

  #install-guide .sect-title,
  .setup-block-panel h2 {
    letter-spacing: 0.08em;
  }
}

@media (max-width: 640px) {
  .feat-grid {
    grid-template-columns: 1fr;
  }

  .feat-card {
    min-height: auto;
  }
}

/* Preview section */
.shot-frame {
  max-width: none;
  margin: 0 auto;
  padding: 0 !important;
  text-align: center;
}

.shot-label {
  position: relative;
  margin: 0 auto 28px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.shot-block::before,
.shot-block::after,
.preview-section::before,
.preview-section::after {
  display: none !important;
  content: none !important;
}

.shot-label::before {
  display: none;
}

.shot-link {
  display: block;
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: box-shadow 0.25s ease;
}

.shot-link img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.045),
    0 28px 80px rgba(0, 0, 0, 0.75);
}

.preview-card {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    #080808;
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.025),
    0 18px 55px rgba(0, 0, 0, 0.42);
  padding: 0.5rem;
  transition: box-shadow 0.25s ease;
}

body.page-root #page-body #capabilities ~ .panel,
body.page-root #page-body .review-card.panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    #080808;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.025),
    0 18px 55px rgba(0, 0, 0, 0.42);
}

.shot-link:hover img {
  box-shadow:
    0 0 48px rgba(255, 255, 255, 0.06),
    0 28px 80px rgba(0, 0, 0, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .shot-link:hover {
    box-shadow: none;
  }
}

/* ═══ CLEAN HERO (must stay last) ═══ */

#page-body:has(> .hero-wrap) {
  margin: 0;
  padding: 0;
}

body.page-root:has(.hero-wrap) {
  padding-top: 0 !important;
}

#page-body > .hero-wrap {
  margin-top: 0 !important;
}

.hero-wrap,
.home-hero,
.modern-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px 88px;
  overflow: hidden;
  isolation: isolate;
  background-color: #030508;
  background-image:
    radial-gradient(ellipse 72% 52% at 44% 46%, rgba(32, 48, 78, 0.22) 0%, transparent 68%),
    radial-gradient(1px 1px at 7% 14%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 19% 8%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 33% 22%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 51% 11%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 68% 17%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 84% 9%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1px 1px at 93% 24%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 11% 36%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1px 1px at 26% 44%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1px 1px at 41% 33%, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(1px 1px at 58% 41%, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(1px 1px at 74% 38%, rgba(255, 255, 255, 0.44), transparent),
    radial-gradient(1px 1px at 88% 46%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 6% 58%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(1px 1px at 22% 67%, rgba(255, 255, 255, 0.52), transparent),
    radial-gradient(1px 1px at 37% 54%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 53% 63%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 66% 71%, rgba(255, 255, 255, 0.33), transparent),
    radial-gradient(1px 1px at 79% 57%, rgba(255, 255, 255, 0.46), transparent),
    radial-gradient(1px 1px at 91% 68%, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(1px 1px at 14% 81%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1px 1px at 31% 88%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 48% 76%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1px 1px at 62% 84%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 77% 79%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 86% 86%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(1.2px 1.2px at 45% 28%, rgba(255, 255, 255, 0.58), transparent),
    radial-gradient(1.2px 1.2px at 72% 52%, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(0.8px 0.8px at 56% 48%, rgba(255, 255, 255, 0.62), transparent),
    linear-gradient(180deg, #020306 0%, #050a14 48%, #020306 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.hero-wrap::before,
.hero-wrap::after,
.hero-bg,
.hero-bg::before,
.hero-bg::after,
.home-hero-bg,
.home-hero-bg::before,
.home-hero-bg::after,
.modern-hero-bg,
.modern-hero-bg::before,
.modern-hero-bg::after {
  display: none !important;
  content: none !important;
}

.hero-inner,
.home-hero-wrap,
.modern-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(180px, 280px);
  align-items: center;
  justify-content: center;
  gap: 88px;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

.hero-copy,
.home-hero-text,
.modern-hero-copy {
  max-width: 620px;
  width: 100%;
  text-align: left;
  overflow: visible;
}

.hero-kicker {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  line-height: 1.7;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.hero-copy h1,
.home-hero-text h1,
.modern-hero-copy h1 {
  margin: 0 0 20px;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  transform: none !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 3.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #d8d8dc 38%, #8d8f96 70%, #f8f8f8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 28px rgba(255,255,255,0.12);
}

.hero-lead {
  max-width: 560px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.76);
}

.hero-note {
  max-width: 520px;
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 0.66rem;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding: 15px 24px;
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.035),
    0 0 22px rgba(255,255,255,0.035);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.hero-actions a:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.68);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}

.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.hero-logo img {
  width: min(235px, 100%);
  max-width: 235px;
  height: auto;
  display: block;
  border: none;
  box-shadow: none;
}

@media (max-width: 900px) {
  .hero-wrap,
  .home-hero,
  .modern-hero {
    padding: 88px 18px 72px;
  }

  .hero-inner,
  .home-hero-wrap,
  .modern-hero-inner {
    grid-template-columns: 1fr;
    gap: 42px;
    text-align: center;
  }

  .hero-copy,
  .home-hero-text,
  .modern-hero-copy {
    text-align: center;
    margin-inline: auto;
  }

  .hero-lead,
  .hero-note {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-logo img {
    width: min(190px, 72%);
    max-width: 190px;
  }
}

/* Disable legacy hero markup if present */
.hero,
.hero-bg,
.hero-inner,
.hero-copy,
.hero-content,
.hero-frame,
.hero-media,
.hero-corners,
.hero-frame-main,
.landing-hero,
.landing-hero-bg,
.landing-hero-inner,
.landing-hero-copy,
.landing-hero-media,
.hero-motion {
  display: none !important;
}

.hero::before,
.hero::after,
.hero-bg::before,
.hero-bg::after,
.landing-hero::before,
.landing-hero::after,
.landing-hero-bg::before,
.landing-hero-bg::after {
  display: none !important;
  content: none !important;
}

.section-small-line {
  width: 220px !important;
  height: 1px !important;
  margin: 0 auto 44px !important;
  display: block !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  ) !important;
  opacity: 1 !important;
}

.section-small-line-bottom {
  margin: 44px auto 0 !important;
}

.setup-block-panel,
.walk-sect,
.install-section,
.setup-block {
  text-align: center;
}

/* Section dividers — short centered lines between major blocks */
.sect-rule {
  width: min(220px, 90%);
  height: 1px;
  margin: 54px auto;
  display: block;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 18%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.08) 82%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

.sect-rule::before {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.14);
}

/* Global overflow guard — prevent horizontal strip */
html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: #050505;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100%;
  color: rgba(255, 255, 255, 0.9);
}

main,
.page,
.index-page,
#page-body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #050505;
}

section {
  max-width: 100%;
}

img {
  max-width: 100%;
}

.reviews-marquee {
  max-width: 100%;
  overflow: hidden;
}

.reviews-track {
  will-change: transform;
}

#site-head,
.site-head {
  max-width: 100%;
  overflow-x: clip;
}

/* ═══ Comparison & community feedback — premium panels ═══ */

#comparison.cmp-section,
#reviews.voices-section {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 0 !important;
}

#comparison.cmp-section h2,
#reviews.voices-section h2 {
  margin: 0 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 2.2vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
}

#comparison.cmp-section > p,
#reviews.voices-section > p {
  margin: 0 0 44px;
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(210, 215, 225, 0.62);
}

.cmp-table-wrap,
.cmp-table-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(8, 8, 8, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 80px rgba(0, 0, 0, 0.48);
}

.cmp-table-wrap::before,
.cmp-table-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 28%, transparent 46%),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.07), transparent 34%);
  opacity: 0.65;
}

.cmp-table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.cmp-table th,
.cmp-table td {
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

.cmp-table th {
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.94);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.cmp-table tbody tr {
  transition: background 180ms ease;
}

.cmp-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cmp-table th:nth-child(2),
.cmp-table td:nth-child(2) {
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.95);
}

.cmp-table tbody tr:hover td:nth-child(2) {
  background: rgba(255, 255, 255, 0.055);
}

.cmp-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmp-badge.no,
.status-badge.no {
  color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08);
}

.cmp-badge.muted,
.status-badge.muted {
  color: rgba(190, 195, 205, 0.64);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.voice-grid,
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.voice-card,
.testimonial-card {
  position: relative;
  min-height: 160px;
  padding: 28px 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(9, 9, 9, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 58px rgba(0, 0, 0, 0.38);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.voice-card::before,
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  right: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
}

.voice-card::after,
.testimonial-card::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 18px;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent);
  opacity: 0.7;
}

.voice-card:hover,
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
    rgba(12, 12, 12, 0.94);
}

.voice-card p,
.testimonial-card p {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.65;
}

.voice-card strong,
.testimonial-card strong {
  position: relative;
  z-index: 1;
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

#comparison.cmp-section.band::before,
#reviews.voices-section.band::before {
  display: none !important;
  content: none !important;
}

#comparison.cmp-section.band::after,
#reviews.voices-section.band::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 980px) {
  .voice-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmp-table th,
  .cmp-table td {
    padding: 18px 16px;
  }
}

@media (max-width: 640px) {
  #comparison.cmp-section,
  #reviews.voices-section {
    padding: 58px 0;
  }

  .voice-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .cmp-table-wrap,
  .cmp-table-wrap {
    overflow-x: auto;
  }

  .cmp-table {
    min-width: 720px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-table tbody tr,
  .voice-card,
  .testimonial-card {
    transition: none;
  }

  .voice-card:hover,
  .testimonial-card:hover {
    transform: none;
  }
}

/* ═══ Floating download — bottom-right (index only) ═══ */

.fab-download {
  position: fixed !important;
  right: 28px !important;
  bottom: 28px !important;
  left: auto !important;
  top: auto !important;
  z-index: 9999 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.95);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(8, 8, 8, 0.92);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.045),
    0 0 28px rgba(255, 255, 255, 0.08),
    0 18px 45px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.fab-download:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055)),
    rgba(12, 12, 12, 0.96);
}

@media (max-width: 640px) {
  .fab-download {
    right: 16px !important;
    bottom: 16px !important;
    min-width: 132px;
    height: 44px;
    padding: 0 18px;
    font-size: 0.64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab-download {
    transition: none;
  }

  .fab-download:hover {
    transform: none;
  }
}