/* Final site UI pass loaded after each page's inline styles. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.site-nav,
.nav-inner {
  min-width: 0;
}

.nav-logo {
  min-width: 0;
  white-space: nowrap;
}

.nav-mobile-btn::before {
  content: "\2630";
  font-size: 20px;
}

.nav-mobile-close::before {
  content: "\00d7";
  font-size: 26px;
}

.nav-mobile-btn,
.nav-mobile-close {
  font-size: 0;
}

.page-hero h1,
.hero-h1,
.install-title,
.uninstall-title,
.notfound-title,
.section-title,
.cta-title {
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.actual-shot,
.install-panel-shot,
.screenshot-card img,
.shot-card img {
  object-fit: contain;
}

@media (max-width: 720px) {
  .nav-inner {
    padding: 10px 16px;
  }

  .nav-links {
    display: none;
  }

  .nav-mobile-btn {
    display: flex !important;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.78);
  }

  .nav-mobile-menu {
    overflow-y: auto;
  }
}

@media (max-width: 520px) {
  .hero-main,
  .page-hero,
  .install-hero,
  .uninstall-hero {
    padding: 62px 16px 52px !important;
  }

  .hero-inner,
  .page-hero-inner,
  .install-wrap,
  .uninstall-inner,
  .notfound-inner {
    width: 100% !important;
    max-width: 358px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  .hero-h1,
  .page-hero h1,
  .install-title,
  .uninstall-title,
  .notfound-title {
    width: 100% !important;
    max-width: 342px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(25px, 7.4vw, 31px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.018em !important;
    text-align: center !important;
  }

  .notfound-code {
    font-size: 82px !important;
  }

  .hero-sub,
  .page-hero-sub,
  .install-copy,
  .uninstall-copy,
  .cta-sub,
  .hero-note,
  .page-hero-note {
    width: 100% !important;
    max-width: 342px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 13.5px !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  .hero-badge,
  .install-kicker,
  .status-badge {
    max-width: calc(100vw - 48px) !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 9.5px !important;
    letter-spacing: .045em !important;
    line-height: 1.35 !important;
    padding: 5px 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ctas,
  .hero-ctas-wrap,
  .giveaway-actions,
  .mini-actions {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .btn-primary,
  .btn-secondary,
  .nav-cta {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 13px 14px !important;
    line-height: 1.25 !important;
  }

  .install-wrap,
  .recover-box,
  .giveaway,
  .feature-row {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .install-panel {
    width: 100% !important;
    max-width: 358px !important;
    margin: 0 auto !important;
    padding: 12px !important;
  }

  .actual-shot,
  .install-panel-shot {
    width: min(100%, 358px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .mockup-wrap {
    overflow: hidden !important;
  }

  .popup {
    width: min(362px, calc(100vw - 32px)) !important;
  }

  .quick-grid,
  .shot-grid,
  .feedback-grid,
  .card-grid,
  .screenshots-grid,
  .signals-grid,
  .stats-row {
    grid-template-columns: 1fr !important;
  }

  .stat-card {
    padding: 16px 12px !important;
  }

  .breadcrumb {
    padding: 12px 18px !important;
    font-size: 11.5px !important;
  }

  .reveal-l,
  .reveal-r {
    transform: none !important;
  }

  .policy-wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .policy-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: normal !important;
  }

  .policy-table tbody,
  .policy-table tr {
    width: 100% !important;
  }

  .footer-top {
    grid-template-columns: 1fr !important;
  }
}

/* Professional page polish for guide/resource pages. Keeps existing screenshots intact. */
.nav-pro-link {
  color: var(--accent) !important;
  font-weight: 800;
}

.nav-pro-link:hover {
  color: #8ff8e8 !important;
}

.page-hero {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(58px, 7vw, 92px);
}

.page-hero-inner,
.section-head.center,
.cta-section .container {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero h1 {
  max-width: 900px;
}

section > .container {
  max-width: 1120px;
}

/* 2026 homepage polish: one consistent product system, no broken nested grids. */
.stats-bar {
  display: block !important;
  width: 100%;
  margin: 0 auto;
  padding: 34px 0 !important;
  border-top: 1px solid rgba(45,212,191,.12) !important;
  border-bottom: 1px solid rgba(45,212,191,.12) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(45,212,191,.10), transparent 48%),
    rgba(14,22,32,.54) !important;
}

.stats-bar .container {
  max-width: 1040px;
}

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.stat-item {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 30% 0, rgba(45,212,191,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.030));
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}

.stats-row {
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.stats-bar .stat-card,
.stats-row .stat-card {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 36px rgba(0,0,0,.20);
}

.stats-grid .stat-num {
  font-size: clamp(27px, 3.2vw, 42px);
  font-weight: 950;
  line-height: 1;
  background: linear-gradient(135deg, #8ff8e8, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stats-grid .stat-label {
  max-width: 118px;
  min-height: 34px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.62);
}

.stats-bar .stat-val,
.stats-row .stat-val {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
}

.stats-bar .stat-label,
.stats-row .stat-label {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255,255,255,.62);
}

.signals-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.signal-card {
  position: relative;
  min-height: 230px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 20% 0, rgba(45,212,191,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.035));
  box-shadow: 0 18px 46px rgba(0,0,0,.23);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.hero-main {
  padding-top: clamp(88px, 9vw, 128px) !important;
  padding-bottom: 72px !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(45,212,191,.12), transparent 30%),
    radial-gradient(circle at 80% 22%, rgba(34,197,94,.08), transparent 28%),
    linear-gradient(180deg, rgba(14,22,32,.20), transparent 70%);
}

.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.hero-h1 {
  letter-spacing: -0.02em !important;
}

.actual-shot {
  width: min(100%, 980px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(45,212,191,.32) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:
    0 40px 100px rgba(0,0,0,.48),
    0 0 0 10px rgba(45,212,191,.035),
    0 0 80px rgba(45,212,191,.14) !important;
}

.product-showcase {
  overflow: hidden;
}

.product-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(760px, 92%);
  gap: 22px;
  overflow-x: auto;
  padding: 8px 4px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(45,212,191,.45) rgba(255,255,255,.08);
}

.product-slide {
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(340px, 1.2fr);
  gap: 28px;
  align-items: center;
  min-height: 430px;
  padding: clamp(22px, 4vw, 42px);
  border-radius: 28px;
  border: 1px solid rgba(45,212,191,.22);
  background:
    radial-gradient(circle at 0 0, rgba(45,212,191,.14), transparent 34%),
    radial-gradient(circle at 100% 10%, rgba(34,197,94,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.074), rgba(255,255,255,.034));
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
}

.product-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-kicker {
  width: max-content;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(45,212,191,.32);
  background: rgba(45,212,191,.09);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-copy h3 {
  max-width: 420px;
  color: #fff;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.07;
  letter-spacing: -0.02em;
}

.product-copy p {
  max-width: 460px;
  color: rgba(255,255,255,.66);
  font-size: 15px;
  line-height: 1.65;
}

.product-copy ul {
  list-style: none;
  display: grid;
  gap: 8px;
}

.product-copy li {
  display: flex;
  gap: 9px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.product-copy li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 12px rgba(45,212,191,.55);
}

.product-slide img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  background: #0b1117;
}

.signal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(45,212,191,.32);
  box-shadow: 0 24px 58px rgba(0,0,0,.34);
}

.signal-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 16px;
  font-weight: 900;
  color: #061017;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.card-icon,
.rule-icon,
.security-note-icon {
  width: 46px;
  min-width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 14px;
  font-size: 12px !important;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .02em;
  color: #061017;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.42), transparent 38%),
    linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 12px 28px rgba(45,212,191,.16);
}

.rule-icon,
.security-note-icon {
  margin-bottom: 10px;
  color: #061017 !important;
}

.card:hover .card-icon {
  transform: translateY(-2px) scale(1.06);
}

.signal-pts {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--accent);
}

.signal-name {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  color: #fff;
}

.signal-desc {
  font-size: 13.5px;
  line-height: 1.62;
  color: rgba(255,255,255,.67);
}

.feature-row {
  align-items: center;
}

.demo-box {
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 0, rgba(45,212,191,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.030));
}

.faq-list {
  max-width: 820px;
}

.faq-item {
  background: rgba(255,255,255,.055);
}

@media (max-width: 980px) {
  .stats-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .product-slider {
    grid-auto-columns: 92%;
  }

  .product-slide {
    grid-template-columns: 1fr;
  }
}

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

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

  .signals-grid {
    grid-template-columns: 1fr;
  }

  .product-slider {
    grid-auto-columns: 94%;
  }

  .product-slide {
    min-height: 0;
    padding: 20px;
    border-radius: 22px;
  }

  .signal-card {
    min-height: 0;
  }
}

/* Final brand color pass: closer to the extension UI, with real product-image slider. */
:root {
  --accent:#2dd4bf;
  --accent2:#22c55e;
  --amber:#fbbf24;
  --red:#ff4d66;
  --purple:#a78bfa;
  --blue:#60a5fa;
}

body {
  background:
    linear-gradient(180deg, rgba(6,12,18,.98), rgba(9,16,24,1) 38%, rgba(7,13,19,1)) !important;
}

.site-nav {
  background:
    linear-gradient(180deg, rgba(8,15,23,.94), rgba(9,16,24,.84)) !important;
  border-bottom-color: rgba(45,212,191,.18) !important;
  box-shadow: 0 12px 42px rgba(0,0,0,.28);
}

.nav-inner {
  max-width: 1180px;
}

.nav-logo-img,
.footer-logo-img {
  filter: drop-shadow(0 0 10px rgba(45,212,191,.45));
}

.nav-link {
  font-weight: 700;
}

.nav-link:nth-child(2):hover,
.footer-link:nth-child(2):hover {
  color: var(--amber) !important;
}

.nav-link:nth-child(3):hover,
.footer-link:nth-child(3):hover {
  color: var(--red) !important;
}

.nav-pro-link {
  color: var(--purple) !important;
}

.nav-cta,
.btn-primary {
  background:
    linear-gradient(135deg, #38f8de 0%, #31e59b 48%, #22c55e 100%) !important;
  box-shadow:
    0 12px 34px rgba(45,212,191,.24),
    0 0 0 1px rgba(255,255,255,.16) inset !important;
}

.btn-secondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.hero-main,
.page-hero {
  background:
    linear-gradient(180deg, rgba(6,13,20,.15), rgba(6,13,20,.88)),
    radial-gradient(ellipse at 18% 20%, rgba(45,212,191,.16), transparent 36%),
    radial-gradient(ellipse at 82% 15%, rgba(167,139,250,.12), transparent 34%),
    radial-gradient(ellipse at 50% 100%, rgba(251,191,36,.08), transparent 42%) !important;
}

.hero-badge,
.section-label {
  color: #55f7df !important;
}

.hero-h1,
.page-hero h1,
.section-title,
.cta-title {
  letter-spacing: 0 !important;
}

.actual-shot {
  border-color: rgba(45,212,191,.42) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 92px rgba(45,212,191,.18) !important;
}

.stats-bar {
  background:
    linear-gradient(90deg, rgba(45,212,191,.075), rgba(167,139,250,.065), rgba(251,191,36,.055)),
    rgba(12,20,29,.72) !important;
}

.stat-item:nth-child(1) { border-color: rgba(45,212,191,.28); }
.stat-item:nth-child(2) { border-color: rgba(34,197,94,.28); }
.stat-item:nth-child(3) { border-color: rgba(167,139,250,.28); }
.stat-item:nth-child(4) { border-color: rgba(251,191,36,.28); }
.stat-item:nth-child(5) { border-color: rgba(96,165,250,.28); }

.signals-grid .signal-card:nth-child(1),
.card-grid .card:nth-child(1) {
  border-color: rgba(45,212,191,.20);
  background: radial-gradient(circle at 14% 0, rgba(45,212,191,.16), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.signals-grid .signal-card:nth-child(2),
.card-grid .card:nth-child(2) {
  border-color: rgba(96,165,250,.20);
  background: radial-gradient(circle at 14% 0, rgba(96,165,250,.14), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.signals-grid .signal-card:nth-child(3),
.card-grid .card:nth-child(3) {
  border-color: rgba(167,139,250,.22);
  background: radial-gradient(circle at 14% 0, rgba(167,139,250,.14), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.signals-grid .signal-card:nth-child(4),
.card-grid .card:nth-child(4) {
  border-color: rgba(251,191,36,.22);
  background: radial-gradient(circle at 14% 0, rgba(251,191,36,.13), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.signals-grid .signal-card:nth-child(5),
.card-grid .card:nth-child(5) {
  border-color: rgba(34,197,94,.22);
  background: radial-gradient(circle at 14% 0, rgba(34,197,94,.14), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.signals-grid .signal-card:nth-child(6),
.card-grid .card:nth-child(6) {
  border-color: rgba(255,77,102,.22);
  background: radial-gradient(circle at 14% 0, rgba(255,77,102,.11), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.signals-grid .signal-card:nth-child(7) {
  border-color: rgba(45,212,191,.18);
}

.signal-card,
.card,
.compare-wrap,
.demo-box,
.form-wrap,
.faq-item,
.rule-card,
.annual-box,
.security-note {
  box-shadow:
    0 22px 60px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.025) inset !important;
}

.signal-icon,
.card-icon,
.rule-icon,
.security-note-icon,
.step-num {
  color: #051018 !important;
  text-shadow: none !important;
}

.icon-serp,
.signals-grid .signal-card:nth-child(2) .signal-icon {
  background: linear-gradient(135deg, #60a5fa, #2dd4bf) !important;
}

.icon-map,
.signals-grid .signal-card:nth-child(3) .signal-icon {
  background: linear-gradient(135deg, #a78bfa, #2dd4bf) !important;
}

.icon-feed,
.signals-grid .signal-card:nth-child(4) .signal-icon {
  background: linear-gradient(135deg, #fbbf24, #22c55e) !important;
}

.icon-links,
.signals-grid .signal-card:nth-child(5) .signal-icon {
  background: linear-gradient(135deg, #2dd4bf, #60a5fa) !important;
}

.icon-bonus,
.signals-grid .signal-card:nth-child(6) .signal-icon {
  background: linear-gradient(135deg, #a78bfa, #fbbf24) !important;
}

.tier-card {
  min-height: 235px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.030)),
    rgba(12,20,29,.92) !important;
}

.tier-excellent { border-color: rgba(34,197,94,.34) !important; }
.tier-good { border-color: rgba(45,212,191,.34) !important; }
.tier-work { border-color: rgba(251,191,36,.34) !important; }
.tier-crit { border-color: rgba(255,77,102,.34) !important; }

.product-showcase {
  background:
    linear-gradient(180deg, rgba(13,22,32,.96), rgba(8,15,23,.98)),
    radial-gradient(ellipse at 50% 12%, rgba(45,212,191,.12), transparent 40%) !important;
}

.product-slider {
  padding-bottom: 16px !important;
  scroll-behavior: smooth;
}

.product-slide {
  border-color: rgba(45,212,191,.30) !important;
  background:
    linear-gradient(135deg, rgba(45,212,191,.12), transparent 34%),
    radial-gradient(ellipse at 92% 8%, rgba(167,139,250,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
}

.product-slide:nth-child(2) {
  border-color: rgba(251,191,36,.32) !important;
}

.product-slide:nth-child(3) {
  border-color: rgba(167,139,250,.32) !important;
}

.product-slide:nth-child(4) {
  border-color: rgba(96,165,250,.32) !important;
}

.product-slide:nth-child(5) {
  border-color: rgba(34,197,94,.32) !important;
}

.product-slide img {
  max-height: 470px;
  object-fit: contain;
}

.slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}

.slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  transition: width .2s ease, background .2s ease, border-color .2s ease;
}

.slider-dot.active {
  width: 32px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-color: rgba(45,212,191,.45);
  box-shadow: 0 0 18px rgba(45,212,191,.26);
}

.compare-wrap {
  border-color: rgba(45,212,191,.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.025)),
    rgba(10,18,26,.96) !important;
}

.bulk-demo {
  border-color: rgba(167,139,250,.24) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 0 70px rgba(167,139,250,.08);
}

footer.site-footer {
  background:
    radial-gradient(ellipse at 50% 0, rgba(45,212,191,.09), transparent 44%),
    rgba(8,14,21,.98) !important;
}

@media (prefers-reduced-motion: reduce) {
  .product-slider {
    scroll-behavior: auto;
  }
}

/* Mature vector icon system for feature cards. */
.signal-card,
.card {
  position: relative;
  overflow: hidden;
}

.signal-card::before,
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 10%, rgba(45,212,191,.12), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 42%);
  opacity: .72;
}

.signal-card > *,
.card > * {
  position: relative;
  z-index: 1;
}

.signal-icon.vectorized,
.card-icon.vectorized,
.quick-num.vectorized,
.feedback-icon.vectorized {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  margin-bottom: 14px;
  border-radius: 9px;
  color: var(--accent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(6,13,21,.88) !important;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 10px 24px rgba(0,0,0,.30),
    0 0 18px color-mix(in srgb, currentColor 10%, transparent);
  font-size: 0;
  isolation: isolate;
  transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s, border-color .24s;
}

.signal-icon.vectorized::after,
.card-icon.vectorized::after,
.quick-num.vectorized::after,
.feedback-icon.vectorized::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
}

.quick-num.vectorized::before {
  content: attr(data-step);
  position: absolute;
  right: -4px;
  top: -5px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 999px;
  background: #050d14;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  color: currentColor;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  z-index: 2;
  box-shadow: 0 0 12px color-mix(in srgb, currentColor 16%, transparent);
}

.signal-icon.vectorized svg,
.card-icon.vectorized svg,
.quick-num.vectorized svg,
.feedback-icon.vectorized svg {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 24%, transparent));
}

.signal-card:hover .signal-icon.vectorized,
.card:hover .card-icon.vectorized,
.quick-card:hover .quick-num.vectorized,
.feedback-card:hover .feedback-icon.vectorized {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 14px 30px rgba(0,0,0,.35),
    0 0 24px color-mix(in srgb, currentColor 16%, transparent);
}

.icon-tone-teal { color: #2dd4bf !important; }
.icon-tone-green { color: #34d399 !important; }
.icon-tone-blue { color: #60a5fa !important; }
.icon-tone-amber { color: #f59e0b !important; }
.icon-tone-red { color: #ef4444 !important; }
.icon-tone-purple { color: #a78bfa !important; }

.signal-pts {
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(45,212,191,.065);
  border: 1px solid rgba(45,212,191,.12);
  color: #38f2dc;
  font-size: 10px;
  letter-spacing: .07em;
  line-height: 1.25;
}

.signal-name,
.card-title {
  letter-spacing: -.012em;
}

.card-icon.vectorized + .card-title {
  margin-top: 2px;
}

.signals-grid .signal-card .signal-icon.vectorized,
.card-grid .card .card-icon.vectorized,
.signal-card .signal-icon.vectorized,
.card .card-icon.vectorized {
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(6,13,21,.88) !important;
}

.orb {
  display: none !important;
}

.quick-card,
.feedback-card,
.recover-panel,
.install-panel,
.shot-card,
.giveaway {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.024)),
    rgba(7,14,22,.88) !important;
  border: 1px solid rgba(45,212,191,.13) !important;
  border-radius: 14px !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.018) inset !important;
}

.quick-card::before,
.feedback-card::before,
.recover-panel::before,
.install-panel::before,
.shot-card::before,
.giveaway::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 0, rgba(45,212,191,.095), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 42%);
  opacity: .82;
}

.quick-card > *,
.feedback-card > *,
.recover-panel > *,
.install-panel > *,
.shot-card > *,
.giveaway > * {
  position: relative;
  z-index: 1;
}

.feedback-card {
  color: inherit;
  text-decoration: none;
}

.quick-card:hover,
.feedback-card:hover,
.recover-panel:hover,
.shot-card:hover {
  border-color: rgba(45,212,191,.24) !important;
  transform: translateY(-2px);
  box-shadow:
    0 22px 62px rgba(0,0,0,.34),
    0 0 34px rgba(45,212,191,.055),
    0 0 0 1px rgba(255,255,255,.022) inset !important;
}

.feedback-title,
.quick-title,
.shot-caption {
  letter-spacing: -.01em;
}

.feedback-desc,
.quick-desc {
  color: rgba(220,231,239,.70) !important;
}

.install-panel-shot,
.shot-card img {
  border-color: rgba(45,212,191,.16) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.34) !important;
}

.giveaway,
.giveaway-panel {
  border-color: rgba(167,139,250,.22) !important;
  background:
    radial-gradient(circle at 86% 0, rgba(167,139,250,.13), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.024)),
    rgba(8,14,23,.90) !important;
}

.stats-bar .stat-card,
.stats-row .stat-card {
  min-height: 86px;
  padding: 14px 10px !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022)),
    rgba(7,14,22,.86) !important;
  border-color: rgba(45,212,191,.11) !important;
}

.stats-bar .stat-val,
.stats-row .stat-val {
  font-size: clamp(18px, 2.1vw, 25px) !important;
}

/* Product showcase carousel polish. */
.showcase-shell {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

.product-slider {
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
}

.product-slide {
  display: none !important;
  width: 100%;
  min-height: 520px;
  grid-template-columns: minmax(250px, .72fr) minmax(420px, 1.28fr) !important;
  gap: 44px !important;
  align-items: center;
  padding: 46px 78px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(45,212,191,.16), transparent 34%),
    radial-gradient(circle at 86% 16%, rgba(167,139,250,.14), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035) 44%, rgba(255,255,255,.025)) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(45,212,191,.12);
}

.product-slide.active {
  display: grid !important;
  opacity: 1 !important;
  transform: none !important;
}

.product-slide img {
  justify-self: end;
  max-height: 420px !important;
  border-radius: 20px !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 0 42px rgba(45,212,191,.08);
}

.product-copy h3 {
  max-width: 360px !important;
  font-size: clamp(32px, 3.9vw, 48px) !important;
  line-height: 1.02 !important;
}

.product-copy p {
  max-width: 390px !important;
}

.slider-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(45,212,191,.24);
  background: rgba(7,15,23,.86);
  color: var(--accent);
  box-shadow: 0 14px 42px rgba(0,0,0,.38), 0 0 28px rgba(45,212,191,.12);
  transform: translateY(-50%);
  cursor: pointer;
  transition: transform .16s, border-color .18s, background .18s, color .18s;
}

.slider-nav:hover {
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(45,212,191,.52);
  background: rgba(10,24,34,.96);
  color: #8ff8e8;
}

.slider-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-prev { left: 16px; }
.slider-next { right: 16px; }

.slider-dots {
  gap: 10px !important;
  margin-top: 22px !important;
}

.slider-dot {
  appearance: none;
  padding: 0;
  cursor: pointer;
}

.slider-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .slider-prev { left: 12px; }
  .slider-next { right: 12px; }
  .product-slide {
    grid-template-columns: 1fr !important;
    min-height: 0;
    padding: 34px 28px !important;
  }
  .product-slide img {
    justify-self: stretch;
    max-height: none !important;
  }
}

@media (max-width: 620px) {
  .slider-nav {
    display: none;
  }
  .product-copy h3 {
    font-size: clamp(26px, 8vw, 34px) !important;
  }
}

/* Sitewide UI consistency fixes after full-page review. */
.hero-interface-shot {
  width: min(100%, 760px) !important;
  max-height: 720px;
  object-fit: cover;
  object-position: center;
}

.stats-bar[aria-label="Current score weights"] {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  max-width: 1070px;
  margin: 0 auto !important;
  padding: 18px !important;
  border-radius: 18px;
}

.stats-bar[aria-label="Current score weights"] .stat-card {
  min-height: 104px !important;
}

.stats-bar[aria-label="Current score weights"] .stat-label {
  max-width: 118px;
}

.card-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.signals-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.card-grid:has(> :nth-child(4):last-child) .card {
  min-height: 230px;
}

.signals-grid:has(> :nth-child(4):last-child) .signal-card {
  min-height: 250px;
}

.card-grid .card,
.signals-grid .signal-card,
.tier-card,
.feedback-card,
.quick-card {
  height: 100%;
}

.card-desc,
.signal-desc,
.tier-desc,
.feedback-desc,
.quick-desc {
  overflow-wrap: anywhere;
}

.product-slide img[src*="hero-extension-interface-crop"] {
  max-height: 430px !important;
  width: min(100%, 430px);
  object-fit: cover;
  justify-self: center;
}

@media (max-width: 1180px) {
  .stats-bar[aria-label="Current score weights"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .card-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .signals-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .stats-bar[aria-label="Current score weights"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px !important;
  }

  .card-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr !important;
  }

  .signals-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr !important;
  }
}


/* v1.6.4 icon polish: replace text tokens with small vector-like CSS marks. */
.chk,
.plan-mark {
  width: 17px;
  height: 17px;
  min-width: 17px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  line-height: 1;
  margin-top: 2px;
  background: rgba(45,212,191,.12);
  border: 1px solid rgba(45,212,191,.30);
  color: var(--accent);
}
.chk::before,
.plan-mark.yes::before {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.chk-green { color: var(--green); background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.28); }
.chk-amber { color: var(--amber); background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.28); }
.chk-red { color: var(--red); background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.28); }
.plan-mark.muted {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.38);
}
.plan-mark.muted::before {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Animated homepage hero mockup. Keeps the old screenshot composition, but renders it as UI. */
@property --hero-score {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.hero-live-demo {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  perspective: 1200px;
}

.hero-live-stage {
  width: min(100%, 880px);
  transform-style: preserve-3d;
}

.hero-browser {
  position: relative;
  border: 1px solid rgba(45,212,191,.34);
  border-radius: 28px;
  padding: 12px 18px 18px;
  background:
    radial-gradient(900px 420px at -10% 22%, rgba(45,212,191,.16), transparent 58%),
    radial-gradient(740px 360px at 105% 10%, rgba(139,92,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(13,20,31,.96), rgba(5,10,16,.98));
  box-shadow:
    0 34px 90px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 84px rgba(45,212,191,.12);
  text-align: left;
  transition: transform .32s cubic-bezier(.22,1,.36,1), border-color .32s, box-shadow .32s;
}

.hero-browser::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 20%, rgba(45,212,191,.10), transparent 42%),
    radial-gradient(520px 220px at 10% 100%, rgba(45,212,191,.16), transparent 66%);
  opacity: .76;
}

.hero-browser::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -24px;
  height: 42px;
  border-radius: 999px;
  background: rgba(45,212,191,.18);
  filter: blur(34px);
  pointer-events: none;
}

.hero-browser:hover {
  transform: translateY(-7px) rotateX(1.2deg);
  border-color: rgba(45,212,191,.58);
  box-shadow:
    0 42px 110px rgba(0,0,0,.56),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 112px rgba(45,212,191,.20);
}

.hero-browser-bar,
.hero-browser-canvas {
  position: relative;
  z-index: 1;
}

.hero-browser-bar {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 14px;
  min-height: 42px;
  padding-bottom: 12px;
}

.hero-browser-nav,
.hero-browser-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-browser-nav span,
.hero-browser-tools span:not(.hero-live-logo) {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  position: relative;
  transition: transform .18s, border-color .18s, background .18s;
}

.hero-browser-nav span:nth-child(1)::before,
.hero-browser-nav span:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: 5px 4px;
  border-left: 1.5px solid rgba(255,255,255,.48);
  border-bottom: 1.5px solid rgba(255,255,255,.48);
}

.hero-browser-nav span:nth-child(1)::before { transform: rotate(45deg); }
.hero-browser-nav span:nth-child(2)::before { transform: rotate(-135deg); }
.hero-browser-nav span:nth-child(3)::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px solid rgba(255,255,255,.50);
  border-right-color: transparent;
  border-radius: 999px;
}

.hero-browser-url {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-browser-lock {
  width: 8px;
  height: 7px;
  border-radius: 2px;
  border: 1.4px solid rgba(45,212,191,.72);
  position: relative;
  flex: 0 0 auto;
}

.hero-browser-lock::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 5px;
  height: 6px;
  border: 1.4px solid rgba(45,212,191,.72);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.hero-browser:hover .hero-browser-nav span,
.hero-browser:hover .hero-browser-tools span:not(.hero-live-logo) {
  transform: translateY(-1px);
  border-color: rgba(45,212,191,.30);
  background: rgba(45,212,191,.08);
}

.hero-live-logo {
  width: 27px;
  height: 27px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2dd4bf;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  background: rgba(45,212,191,.08);
  border: 1px solid rgba(45,212,191,.34);
  box-shadow: 0 0 18px rgba(45,212,191,.22);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, color .22s;
}

.hero-live-logo:hover,
.hero-browser:hover .hero-browser-tools .hero-live-logo {
  transform: translateY(-2px) rotate(-8deg) scale(1.06);
  color: #45f5dd;
  box-shadow: 0 0 30px rgba(45,212,191,.42);
}

.hero-browser-canvas {
  display: grid;
  grid-template-columns: minmax(0, 548px) minmax(160px, 204px);
  align-items: center;
  gap: 22px;
}

.hero-live-popup.popup {
  width: min(100%, 548px) !important;
  border-radius: 20px;
  animation: hero-live-popup-glow 4.8s ease-in-out infinite;
}

.hero-live-demo .popup-bg {
  padding: 12px;
  gap: 8px;
}

.hero-live-demo .p-title-lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.hero-live-demo .p-title {
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: 15px;
}

.hero-live-demo .p-topbar,
.hero-live-demo .p-counter,
.hero-live-demo .p-scorecard,
.hero-live-demo .p-why,
.hero-live-demo .p-mcard,
.hero-live-demo .p-btn,
.hero-live-demo .p-badge,
.hero-live-demo .p-mini-tags span,
.hero-live-demo .p-why-btn,
.hero-callout {
  transition:
    transform .2s cubic-bezier(.22,1,.36,1),
    border-color .2s,
    background .2s,
    box-shadow .2s,
    color .2s;
}

.hero-live-demo .p-topbar:hover,
.hero-live-demo .p-counter:hover,
.hero-anim-card:hover {
  transform: translateY(-3px);
  border-color: rgba(45,212,191,.52);
  box-shadow: 0 18px 44px rgba(0,0,0,.28), 0 0 28px rgba(45,212,191,.10);
}

.hero-live-demo .p-site {
  max-width: min(100%, 230px);
}

.hero-live-demo .p-external {
  font-size: 0;
  width: 13px;
  height: 13px;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.16);
  position: relative;
}

.hero-live-demo .p-external::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  right: 2px;
  top: 2px;
  border-top: 1.5px solid rgba(45,212,191,.78);
  border-right: 1.5px solid rgba(45,212,191,.78);
}

.hero-live-demo .p-external::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 1.5px;
  right: 2px;
  top: 6px;
  background: rgba(45,212,191,.78);
  transform: rotate(-45deg);
  transform-origin: right center;
}

.hero-live-demo .p-toggle {
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.hero-live-demo .p-toggle::after {
  left: 2px;
  right: auto;
  background: linear-gradient(135deg, #cbd5e1, #fff);
}

.hero-live-demo .p-counter {
  justify-content: flex-start;
}

.hero-live-demo .p-counter-up {
  transition: transform .2s, background .2s, box-shadow .2s;
}

.hero-live-demo .p-counter-up:hover {
  transform: translateY(-1px);
  background: rgba(139,92,246,.22);
  box-shadow: 0 0 18px rgba(139,92,246,.24);
}

.hero-live-demo .p-ring {
  --hero-score: 0%;
  width: 74px;
  height: 74px;
  background: conic-gradient(from -90deg, #2dd4bf 0 var(--hero-score), rgba(255,255,255,.08) 0);
  animation:
    hero-score-fill 1.45s .6s cubic-bezier(.22,1,.36,1) forwards,
    hero-ring-breathe 3.4s 2.1s ease-in-out infinite;
}

.hero-live-demo .p-scorecard:hover .p-ring {
  transform: scale(1.06) rotate(5deg);
  box-shadow: 0 0 36px rgba(45,212,191,.64), 0 0 22px rgba(34,197,94,.34);
}

.hero-live-demo .p-score-num {
  font-size: 23px;
}

.hero-live-demo .p-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.hero-live-demo .p-mini-tags span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
  color: #22c55e;
  font-size: 9.5px;
  font-weight: 800;
}

.hero-live-demo .p-mini-tags span:hover,
.hero-live-demo .p-badge:hover,
.hero-live-demo .p-why-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 0 18px rgba(45,212,191,.16);
}

.hero-live-demo .p-badge-fast {
  max-width: calc(100% - 4px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-live-demo .p-badge-dot {
  box-shadow: 0 0 12px currentColor;
}

.hero-live-demo .p-mcard {
  position: relative;
  min-height: 82px;
  text-align: center;
  overflow: hidden;
}

.hero-live-demo .p-mcard::after,
.hero-live-demo .p-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.11) 44%, transparent 55% 100%);
  transform: translateX(-120%);
  pointer-events: none;
}

.hero-live-demo .p-mcard:hover {
  transform: translateY(-4px);
  border-color: rgba(45,212,191,.32);
  background: rgba(45,212,191,.06);
  box-shadow: 0 16px 30px rgba(0,0,0,.22);
}

.hero-live-demo .p-mcard:hover::after,
.hero-live-demo .p-btn:hover::after {
  animation: hero-shine .78s ease-out;
}

.hero-live-demo .p-micon {
  width: 16px;
  height: 16px;
  display: block;
  margin: 0 auto 3px;
  position: relative;
  color: rgba(255,255,255,.58);
  font-size: 11px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
}

.p-micon-map::before {
  content: "";
  position: absolute;
  inset: 3px 4px;
  border-left: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.p-micon-map::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 6px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor;
}

.p-micon-doc::before {
  content: "";
  position: absolute;
  inset: 2px 4px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.p-micon-doc::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 7px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor;
}

.p-micon-link::before,
.p-micon-link::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  transform: rotate(-35deg);
}

.p-micon-link::before { left: 1px; top: 4px; }
.p-micon-link::after { right: 1px; bottom: 4px; }

.hero-live-demo .p-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 15px;
  border-radius: 999px;
  margin-top: 2px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
  color: #22c55e;
  font-size: 8px;
  font-weight: 900;
}

.hero-live-demo .p-why {
  position: relative;
  overflow: hidden;
}

.hero-live-demo .p-why::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45,212,191,.55), transparent);
  animation: hero-line-scan 4.5s ease-in-out infinite;
}

.hero-live-demo .p-why-dot.amber {
  background: #fbbf24;
}

.hero-live-demo .p-actions {
  gap: 6px;
}

.hero-live-demo .p-btn {
  position: relative;
  height: 34px;
  overflow: hidden;
  cursor: default;
  user-select: none;
  will-change: transform;
}

.hero-live-demo .p-btn:hover {
  transform: translateY(-4px) scale(1.015);
  filter: brightness(1.12);
}

.hero-live-demo .p-btn-check:hover,
.hero-live-demo .p-btn-link:hover {
  box-shadow: 0 0 24px rgba(45,212,191,.22);
}

.hero-live-demo .p-btn-google {
  background: rgba(251,191,36,.10);
  border: 1.5px solid rgba(251,191,36,.34);
  color: #fbbf24;
}

.hero-live-demo .p-btn-google:hover,
.hero-live-demo .p-btn-wa:hover {
  box-shadow: 0 0 22px rgba(251,191,36,.20);
}

.hero-live-demo .p-btn-link {
  background: rgba(45,212,191,.10);
  border: 1.5px solid rgba(45,212,191,.38);
  color: #2dd4bf;
}

.hero-live-demo .p-btn-upgrade,
.hero-live-demo .p-btn-key {
  background: rgba(139,92,246,.13);
  border: 1.5px solid rgba(139,92,246,.32);
  color: #c4b5fd;
}

.hero-live-demo .p-btn-upgrade:hover,
.hero-live-demo .p-btn-key:hover {
  box-shadow: 0 0 22px rgba(139,92,246,.23);
}

.hero-live-demo .p-btn-wa {
  background: rgba(251,191,36,.10);
  border: 1.5px solid rgba(251,191,36,.30);
  color: #fbbf24;
}

.hero-live-demo .p-btn-icon {
  width: 13px;
  height: 13px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform .2s;
}

.hero-live-demo .p-btn:hover .p-btn-icon {
  transform: scale(1.14) rotate(-6deg);
}

.p-btn-icon.scan::before,
.p-btn-icon.clock::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}

.p-btn-icon.scan::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: currentColor;
}

.p-btn-icon.link::before,
.p-btn-icon.link::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  transform: rotate(-35deg);
}

.p-btn-icon.link::before { left: 0; top: 3px; }
.p-btn-icon.link::after { right: 0; bottom: 3px; }

.p-btn-icon.bulk::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 2px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}

.p-btn-icon.clock::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 1.5px;
  height: 5px;
  background: currentColor;
  box-shadow: 3px 4px 0 currentColor;
}

.p-btn-icon.share::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  left: 1px;
  top: 5px;
  box-shadow: 7px -4px 0 currentColor, 8px 5px 0 currentColor;
}

.p-btn-icon.share::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  left: 4px;
  top: 3px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-22deg);
}

.hero-live-callouts {
  display: grid;
  gap: 54px;
  position: relative;
}

.hero-callout {
  position: relative;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(11,17,23,.74);
  border: 1px solid rgba(45,212,191,.30);
  box-shadow: 0 16px 42px rgba(0,0,0,.26), 0 0 22px rgba(45,212,191,.10);
}

.hero-callout::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 5px);
  width: 48px;
  border-top: 2px dotted rgba(45,212,191,.54);
  transform: translateY(-50%);
}

.hero-callout::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 46px);
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2dd4bf;
  box-shadow: 0 0 12px rgba(45,212,191,.86);
  transform: translateY(-50%);
  animation: hero-connector-dot 2.6s ease-in-out infinite;
}

.hero-callout:nth-child(2)::after { animation-delay: .32s; }
.hero-callout:nth-child(3)::after { animation-delay: .64s; }

.hero-callout:hover {
  transform: translateX(5px) translateY(-3px);
  border-color: rgba(45,212,191,.60);
  background: rgba(16,25,34,.94);
  box-shadow: 0 22px 48px rgba(0,0,0,.30), 0 0 34px rgba(45,212,191,.18);
}

.hero-callout:hover::before {
  border-color: rgba(45,212,191,.90);
}

.hero-callout strong {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.15;
}

.hero-callout small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.58);
  font-size: 10px;
  line-height: 1.3;
}

.hero-mini-ring {
  --hero-score: 0%;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: conic-gradient(from -90deg, #2dd4bf 0 var(--hero-score), rgba(255,255,255,.10) 0);
  color: #2dd4bf;
  box-shadow: 0 0 24px rgba(45,212,191,.24);
  animation:
    hero-score-fill 1.35s .9s cubic-bezier(.22,1,.36,1) forwards,
    hero-ring-breathe 3.6s 2.3s ease-in-out infinite;
}

.hero-mini-ring span {
  font-size: 18px;
  font-weight: 900;
  line-height: .9;
}

.hero-mini-ring small {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 8px;
}

.hero-callout-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.30);
  color: #22c55e;
  transition: transform .2s, box-shadow .2s;
}

.hero-callout:hover .hero-callout-icon {
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 0 28px rgba(34,197,94,.22);
}

.hero-callout-icon.shield::before {
  content: "";
  width: 20px;
  height: 23px;
  background: currentColor;
  clip-path: polygon(50% 0, 90% 15%, 84% 62%, 50% 100%, 16% 62%, 10% 15%);
  opacity: .86;
}

.hero-callout-icon.shield::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 6px;
  border-left: 2px solid #071017;
  border-bottom: 2px solid #071017;
  transform: rotate(-45deg);
}

.hero-callout-icon.trend {
  background: rgba(45,212,191,.12);
  border-color: rgba(45,212,191,.32);
  color: #2dd4bf;
}

.hero-callout-icon.trend::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 10px;
  bottom: 12px;
  height: 17px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: skew(-8deg);
}

.hero-callout-icon.trend::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  right: 10px;
  top: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

@keyframes hero-score-fill {
  from { --hero-score: 0%; }
  to { --hero-score: 78%; }
}

@keyframes hero-ring-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

@keyframes hero-shine {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes hero-line-scan {
  0%, 100% { opacity: .22; transform: translateX(-35%); }
  50% { opacity: .9; transform: translateX(35%); }
}

@keyframes hero-connector-dot {
  0%, 100% { opacity: .35; transform: translateY(-50%) translateX(-3px) scale(.86); }
  50% { opacity: 1; transform: translateY(-50%) translateX(34px) scale(1); }
}

@keyframes hero-live-popup-glow {
  0%, 100% {
    box-shadow:
      0 32px 72px rgba(0,0,0,.58),
      0 0 0 1px rgba(255,255,255,.06),
      0 0 74px rgba(45,212,191,.16);
  }
  50% {
    box-shadow:
      0 36px 84px rgba(0,0,0,.64),
      0 0 0 1px rgba(255,255,255,.075),
      0 0 102px rgba(45,212,191,.25);
  }
}

@media (max-width: 980px) {
  .hero-live-demo {
    max-width: 720px;
  }

  .hero-browser-canvas {
    grid-template-columns: 1fr;
  }

  .hero-live-callouts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .hero-callout {
    min-height: 74px;
    padding: 12px;
  }

  .hero-callout::before,
  .hero-callout::after {
    display: none;
  }
}

@media (max-width: 700px) {
  .hero-live-demo {
    margin-top: 48px !important;
  }

  .hero-browser {
    border-radius: 22px;
    padding: 10px;
  }

  .hero-browser-bar {
    grid-template-columns: 64px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .hero-browser-tools span:not(.hero-live-logo):not(:first-child),
  .hero-browser-nav span:nth-child(2) {
    display: none;
  }

  .hero-live-demo .popup-bg {
    padding: 9px;
  }

  .hero-live-demo .p-scorecard {
    align-items: flex-start;
  }

  .hero-live-demo .p-ring {
    width: 64px;
    height: 64px;
  }

  .hero-live-demo .p-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-live-demo .p-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-live-callouts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .hero-live-demo .p-headline-row,
  .hero-live-demo .p-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-live-demo .p-site {
    max-width: 100%;
  }

  .hero-live-demo .p-counter {
    flex-wrap: wrap;
  }

  .hero-live-demo .p-counter-up {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-live-stage,
  .hero-live-popup.popup,
  .hero-live-demo .p-ring,
  .hero-mini-ring,
  .hero-callout::after,
  .hero-live-demo .p-why::before {
    animation: none !important;
  }

  .hero-live-demo .p-ring,
  .hero-mini-ring {
    --hero-score: 78%;
  }
}

/* Reference-style hero: one centered animated extension popup, no screenshot frame. */
.hero-popup-demo.hero-live-demo {
  max-width: 430px;
  margin-top: 68px !important;
}

.hero-popup-demo .hero-live-stage {
  width: min(100%, 386px);
  margin: 0 auto;
  position: relative;
}

.hero-popup-demo .hero-live-stage::before {
  content: "";
  position: absolute;
  inset: -54px -72px -64px;
  z-index: -1;
  border-radius: 46px;
  background:
    radial-gradient(circle at 50% 42%, rgba(45,212,191,.42), transparent 52%),
    radial-gradient(circle at 50% 78%, rgba(34,197,94,.20), transparent 58%);
  filter: blur(18px);
  opacity: .86;
  animation: hero-popup-aura 4.8s ease-in-out infinite;
}

.hero-popup-demo .hero-live-stage::after {
  content: "";
  position: absolute;
  inset: 18px 16px -28px;
  z-index: -2;
  border-radius: 999px;
  background: rgba(45,212,191,.26);
  filter: blur(40px);
}

.hero-popup-demo .hero-centered-popup.popup {
  width: min(100%, 366px) !important;
  margin: 0 auto;
  border-radius: 20px;
  border-color: rgba(45,212,191,.46);
  box-shadow:
    0 42px 104px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.065),
    0 0 72px rgba(45,212,191,.34),
    0 0 140px rgba(45,212,191,.10);
  transform-origin: center top;
}

.hero-popup-demo .hero-centered-popup.popup:hover {
  transform: translateY(-8px) scale(1.018);
  border-color: rgba(45,212,191,.72);
  box-shadow:
    0 52px 120px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 92px rgba(45,212,191,.46),
    0 0 170px rgba(45,212,191,.16);
}

.hero-popup-demo .popup-bg {
  gap: 6px;
  padding: 8px;
}

.hero-popup-demo .p-topbar {
  padding: 8px 10px;
}

.hero-popup-demo .p-title {
  font-size: 14px;
}

.hero-popup-demo .p-site {
  max-width: 190px;
}

.hero-popup-demo .p-host,
.hero-popup-demo .p-last,
.hero-popup-demo .p-toggle-label,
.hero-popup-demo .p-counter,
.hero-popup-demo .p-explain,
.hero-popup-demo .p-why-li,
.hero-popup-demo .p-issue {
  font-size: 10px;
}

.hero-popup-demo .p-ring {
  width: 68px;
  height: 68px;
}

.hero-popup-demo .p-score-num {
  font-size: 21px;
}

.hero-popup-demo .p-headline {
  font-size: 13px;
}

.hero-popup-demo .p-mcard {
  min-height: 64px;
  padding: 5px 4px 4px;
}

.hero-popup-demo .p-mlabel {
  font-size: 8.5px;
}

.hero-popup-demo .p-mval {
  font-size: 10.5px;
}

.hero-popup-demo .p-actions {
  gap: 5px;
}

.hero-popup-demo .p-btn {
  height: 31px;
  border-radius: 9px;
  font-size: 10px;
}

@keyframes hero-popup-aura {
  0%, 100% {
    opacity: .72;
    transform: scale(.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@media (max-width: 700px) {
  .hero-popup-demo.hero-live-demo {
    max-width: 390px;
    margin-top: 50px !important;
  }

  .hero-popup-demo .hero-live-stage {
    width: min(100%, 356px);
  }

  .hero-popup-demo .hero-centered-popup.popup {
    width: min(100%, 340px) !important;
  }

  .hero-popup-demo .p-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .hero-popup-demo .hero-centered-popup.popup {
    width: min(100%, calc(100vw - 34px)) !important;
  }
}

/* Limitations section: avoid one long card forcing every card tall. */
.limits-grid.signals-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.limits-grid.signals-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.hero-live-logo-img {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  display: block;
  border-radius: 9px;
  box-shadow: 0 0 16px rgba(45,212,191,.22);
}

.hero-live-demo .p-ring {
  background: transparent !important;
  box-shadow: 0 0 22px rgba(45,212,191,.36), 0 0 12px rgba(34,197,94,.22) !important;
  overflow: visible;
}

.hero-live-demo .p-ring::after {
  inset: 13px !important;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(45,212,191,.08), transparent 62%),
    #0b1218 !important;
  border: 1px solid rgba(45,212,191,.08) !important;
}

.hero-live-demo .p-ring-svg {
  position: absolute;
  inset: -3px;
  z-index: 0;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  overflow: visible;
  transform: rotate(-90deg);
}

.hero-live-demo .p-ring-track,
.hero-live-demo .p-ring-progress {
  fill: none;
  cx: 40;
  cy: 40;
  r: 30;
}

.hero-live-demo .p-ring-track {
  stroke: rgba(45,212,191,.18);
  stroke-width: 10;
}

.hero-live-demo .p-ring-progress {
  stroke: url("#hero-score-grad");
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 78 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 5px rgba(45,212,191,.74));
  animation: hero-score-dash 1.35s .55s cubic-bezier(.22,1,.36,1) forwards;
}

.hero-live-demo .p-ring-inner {
  z-index: 2 !important;
  gap: 1px;
}

.hero-live-demo .p-score-num {
  color: #2dd4bf !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 0 13px rgba(45,212,191,.44);
  letter-spacing: -.04em;
}

.hero-live-demo .p-score-of {
  color: rgba(255,255,255,.70) !important;
  font-size: 8px !important;
  font-weight: 800;
}

@keyframes hero-score-dash {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

.limits-grid .limit-card.signal-card {
  min-height: 214px !important;
  padding: 24px 22px !important;
  display: flex;
  flex-direction: column;
}

.limits-grid .limit-card .signal-desc {
  max-width: 34ch;
}

.limits-grid .limit-card-wide.signal-card {
  grid-column: 1 / -1;
  min-height: 0 !important;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 24px 26px !important;
  background:
    radial-gradient(520px 180px at 10% 20%, rgba(45,212,191,.10), transparent 60%),
    rgba(255,255,255,.045);
}

.limits-grid .limit-card-wide .signal-desc {
  max-width: 72ch;
}

.limit-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.limit-points span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(45,212,191,.08);
  border: 1px solid rgba(45,212,191,.18);
  color: rgba(225,242,245,.78);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.limit-points span:nth-child(3),
.limit-points span:nth-child(4) {
  background: rgba(251,191,36,.07);
  border-color: rgba(251,191,36,.18);
}

@media (max-width: 980px) {
  .limits-grid.signals-grid,
  .limits-grid.signals-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr !important;
    max-width: 620px;
  }

  .limits-grid .limit-card.signal-card {
    min-height: 0 !important;
  }
}

@media (max-width: 560px) {
  .limits-grid .limit-card-wide.signal-card {
    grid-template-columns: 1fr;
  }

  .limit-points {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Exact extension hero screenshot. The popup artwork is the real updated UI. */
.hero-exact-demo.hero-popup-demo.hero-live-demo {
  max-width: 408px;
  margin-top: 54px !important;
  perspective: 1200px;
}

.hero-exact-demo .hero-exact-stage.hero-live-stage {
  width: min(100%, 408px);
  margin: 0 auto;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  animation: hero-premium-float 7s ease-in-out infinite !important;
}

.hero-exact-demo .hero-exact-stage::before {
  inset: -58px -90px -70px;
  border-radius: 48px;
  background:
    radial-gradient(ellipse at 46% 38%, rgba(45,212,191,.42), transparent 50%),
    radial-gradient(ellipse at 50% 88%, rgba(34,197,94,.22), transparent 58%),
    radial-gradient(ellipse at 70% 18%, rgba(167,139,250,.13), transparent 42%) !important;
  filter: blur(18px);
  opacity: .82;
  animation: hero-aurora-breathe 5.6s ease-in-out infinite;
}

.hero-exact-demo .hero-exact-stage::after {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: -34px;
  height: 58px;
  z-index: -2;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(45,212,191,.24), transparent 70%);
  filter: blur(20px);
  opacity: .72;
  animation: hero-floor-pulse 5.6s ease-in-out infinite;
}

.hero-exact-popup-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  filter:
    drop-shadow(0 34px 72px rgba(0,0,0,.60))
    drop-shadow(0 0 44px rgba(45,212,191,.34));
  transform-origin: center top;
  transition: transform .42s cubic-bezier(.22,1,.36,1), filter .42s;
  will-change: transform;
}

.hero-exact-stage:hover .hero-exact-popup-img {
  transform: translateY(-10px) rotateX(2.5deg) rotateY(-2deg) scale(1.018);
  filter: drop-shadow(0 44px 88px rgba(0,0,0,.64)) drop-shadow(0 0 64px rgba(45,212,191,.46));
}

.hero-sweep-line {
  position: absolute;
  z-index: 4;
  left: 8px;
  right: 8px;
  top: 0;
  height: 90px;
  border-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,.11), transparent),
    linear-gradient(90deg, transparent, rgba(45,212,191,.20), transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateY(-90px);
  animation: hero-scan-pass 4.8s 1.1s cubic-bezier(.22,1,.36,1) infinite;
}

.hero-focus-zone {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border-radius: 18px;
  border: 1px solid rgba(45,212,191,.34);
  background: rgba(45,212,191,.035);
  box-shadow: 0 0 0 rgba(45,212,191,0);
  opacity: 0;
  animation: hero-focus-pulse 4.8s ease-in-out infinite;
}

.hero-focus-score {
  left: 12px;
  top: 126px;
  width: 382px;
  height: 94px;
  animation-delay: .2s;
}

.hero-focus-report {
  left: 8px;
  top: 318px;
  width: 392px;
  height: 124px;
  animation-delay: 1.25s;
}

.hero-focus-actions {
  left: 8px;
  top: 447px;
  width: 392px;
  height: 94px;
  animation-delay: 2.3s;
}

.hero-orbit-dot {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #55f7df;
  box-shadow: 0 0 18px rgba(45,212,191,.90), 0 0 42px rgba(45,212,191,.30);
  opacity: .78;
  pointer-events: none;
}

.hero-orbit-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(45,212,191,.22);
}

.hero-orbit-dot-1 {
  left: -34px;
  top: 22%;
  animation: hero-dot-one 6.2s ease-in-out infinite;
}

.hero-orbit-dot-2 {
  right: -38px;
  top: 46%;
  background: #fbbf24;
  box-shadow: 0 0 18px rgba(251,191,36,.70), 0 0 42px rgba(251,191,36,.24);
  animation: hero-dot-two 7.4s ease-in-out infinite;
}

.hero-orbit-dot-3 {
  left: 50%;
  bottom: -26px;
  background: #c4b5fd;
  box-shadow: 0 0 18px rgba(167,139,250,.72), 0 0 42px rgba(167,139,250,.24);
  animation: hero-dot-three 6.9s ease-in-out infinite;
}

.hero-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 999px;
  pointer-events: auto;
}

.hero-hotspot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(45,212,191,0);
  background: rgba(45,212,191,0);
  transition: border-color .22s, background .22s, box-shadow .22s, transform .22s;
}

.hero-hotspot:hover::before {
  border-color: rgba(45,212,191,.36);
  background: rgba(45,212,191,.055);
  box-shadow: 0 0 28px rgba(45,212,191,.24);
  transform: scale(1.04);
}

.hero-hot-logo {
  left: 13px;
  top: 12px;
  width: 144px;
  height: 28px;
}

.hero-hot-score {
  left: 13px;
  top: 130px;
  width: 82px;
  height: 82px;
}

.hero-hot-status {
  left: 101px;
  top: 143px;
  width: 278px;
  height: 48px;
  border-radius: 14px;
}

.hero-hot-signals {
  left: 8px;
  top: 234px;
  width: 392px;
  height: 82px;
  border-radius: 12px;
}

.hero-hot-report {
  left: 8px;
  top: 320px;
  width: 392px;
  height: 122px;
  border-radius: 13px;
}

.hero-hot-actions {
  left: 8px;
  top: 449px;
  width: 392px;
  height: 92px;
  border-radius: 12px;
}

@media (max-width: 700px) {
  .hero-exact-demo.hero-popup-demo.hero-live-demo {
    max-width: min(408px, calc(100vw - 34px));
    margin-top: 50px !important;
  }
}

@keyframes hero-premium-float {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  34% {
    transform: translateY(-9px) rotateX(1.2deg) rotateY(-1.4deg);
  }
  68% {
    transform: translateY(5px) rotateX(-.8deg) rotateY(1deg);
  }
}

@keyframes hero-aurora-breathe {
  0%, 100% {
    opacity: .68;
    transform: scale(.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes hero-floor-pulse {
  0%, 100% {
    opacity: .48;
    transform: scaleX(.92);
  }
  50% {
    opacity: .88;
    transform: scaleX(1.08);
  }
}

@keyframes hero-scan-pass {
  0%, 12% {
    opacity: 0;
    transform: translateY(-92px);
  }
  24%, 42% {
    opacity: .42;
  }
  58% {
    opacity: 0;
    transform: translateY(590px);
  }
  100% {
    opacity: 0;
    transform: translateY(590px);
  }
}

@keyframes hero-focus-pulse {
  0%, 18%, 100% {
    opacity: 0;
    transform: scale(.985);
    box-shadow: 0 0 0 rgba(45,212,191,0);
  }
  34%, 50% {
    opacity: .78;
    transform: scale(1);
    box-shadow: 0 0 28px rgba(45,212,191,.18);
  }
  68% {
    opacity: 0;
    transform: scale(1.018);
  }
}

@keyframes hero-dot-one {
  0%, 100% { transform: translate3d(0,0,0); opacity: .42; }
  50% { transform: translate3d(18px,-24px,0); opacity: .92; }
}

@keyframes hero-dot-two {
  0%, 100% { transform: translate3d(0,0,0); opacity: .38; }
  50% { transform: translate3d(-20px,30px,0); opacity: .86; }
}

@keyframes hero-dot-three {
  0%, 100% { transform: translate3d(-50%,0,0); opacity: .36; }
  50% { transform: translate3d(-50%,-18px,0); opacity: .84; }
}

/* Homepage workflow cards: cleaner product UI, no awkward long pills. */
.workflow-grid.signals-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}

.workflow-grid .signal-card {
  position: relative;
  overflow: hidden;
  min-height: 232px !important;
  padding: 23px 19px 21px !important;
  display: flex;
  flex-direction: column;
  border-radius: 18px !important;
  background:
    radial-gradient(220px 140px at 16% -10%, rgba(45,212,191,.15), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.034)) !important;
}

.workflow-grid .signal-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45,212,191,.42), transparent);
  opacity: .55;
  transition: opacity .22s, transform .22s;
}

.workflow-grid .signal-card:hover::after {
  opacity: 1;
  transform: scaleX(1.08);
}

.workflow-grid .signal-icon.vectorized,
.workflow-grid .signal-icon {
  width: 46px !important;
  height: 46px !important;
  margin-bottom: 16px !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(8,16,24,.82) !important;
  border: 1px solid rgba(45,212,191,.30) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 24px rgba(45,212,191,.13) !important;
  color: #43ead5 !important;
}

.workflow-grid .signal-card:nth-child(3) .signal-icon.vectorized,
.workflow-grid .signal-card:nth-child(3) .signal-icon {
  border-color: rgba(251,191,36,.34) !important;
  color: #fbbf24 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 0 24px rgba(251,191,36,.12) !important;
}

.workflow-grid .signal-card:nth-child(4) .signal-icon.vectorized,
.workflow-grid .signal-card:nth-child(4) .signal-icon {
  border-color: rgba(96,165,250,.34) !important;
  color: #60a5fa !important;
}

.workflow-grid .signal-card:nth-child(5) .signal-icon.vectorized,
.workflow-grid .signal-card:nth-child(5) .signal-icon {
  border-color: rgba(167,139,250,.34) !important;
  color: #c4b5fd !important;
}

.workflow-grid .signal-pts {
  display: block !important;
  width: fit-content;
  max-width: 100%;
  min-height: 0 !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(85,247,223,.90) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .075em !important;
  line-height: 1.35 !important;
  text-transform: uppercase;
}

.workflow-grid .signal-card:nth-child(3) .signal-pts {
  color: rgba(251,191,36,.92) !important;
}

.workflow-grid .signal-card:nth-child(4) .signal-pts {
  color: rgba(96,165,250,.92) !important;
}

.workflow-grid .signal-card:nth-child(5) .signal-pts {
  color: rgba(196,181,253,.92) !important;
}

.workflow-grid .signal-name {
  margin-bottom: 8px !important;
  font-size: 15px !important;
  line-height: 1.18 !important;
}

.workflow-grid .signal-desc {
  color: rgba(225,242,245,.64) !important;
  line-height: 1.58 !important;
}

@media (max-width: 1180px) {
  .workflow-grid.signals-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Restored homepage hero artwork. */
.hero-art-wrap.mockup-wrap {
  margin-top: 66px !important;
}

.hero-art-shot.actual-shot {
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  border-color: rgba(45,212,191,.34) !important;
  background: #071016 !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.055) inset,
    0 0 86px rgba(45,212,191,.18) !important;
}

@media (max-width: 760px) {
  .hero-art-wrap.mockup-wrap {
    margin-top: 44px !important;
  }

  .hero-art-shot.actual-shot {
    border-radius: 18px !important;
  }
}

@media (max-width: 760px) {
  .workflow-grid.signals-grid {
    grid-template-columns: 1fr !important;
  }

  .workflow-grid .signal-card {
    min-height: 0 !important;
  }
}

/* Interactive installed-extension hero demo. */
.hero-installed-demo.hero-popup-demo.hero-live-demo {
  max-width: 448px;
  margin-top: 54px !important;
  overflow: visible;
  perspective: 1200px;
}

.hero-installed-demo .hero-installed-stage.hero-live-stage {
  width: min(100%, 448px);
  margin: 0 auto;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  animation: installed-hero-float 7s ease-in-out infinite;
}

.hero-installed-demo .hero-installed-stage::before {
  content: "";
  position: absolute;
  inset: -70px -92px -76px;
  z-index: -3;
  border-radius: 56px;
  background:
    radial-gradient(ellipse at 48% 32%, rgba(45,212,191,.36), transparent 52%),
    radial-gradient(ellipse at 52% 92%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(ellipse at 70% 18%, rgba(139,92,246,.12), transparent 48%);
  filter: blur(18px);
  opacity: .84;
  pointer-events: none;
  animation: installed-aurora 5.8s ease-in-out infinite;
}

.hero-installed-demo .hero-installed-stage::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -34px;
  z-index: -2;
  height: 58px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(45,212,191,.22), transparent 72%);
  filter: blur(18px);
  opacity: .72;
  pointer-events: none;
}

.installed-popup {
  --demo-score: 78%;
  --demo-accent: #2dd4bf;
  width: min(100%, 448px);
  border-radius: 20px;
  border: 1px solid rgba(45,212,191,.44);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    #081017;
  box-shadow:
    0 38px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.055) inset,
    0 0 72px rgba(45,212,191,.18);
  color: rgba(237,248,249,.92);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
}

.installed-popup,
.installed-popup * {
  box-sizing: border-box;
}

.installed-popup::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 38%, rgba(45,212,191,.10) 48%, transparent 59%),
    radial-gradient(500px 240px at 18% -10%, rgba(45,212,191,.18), transparent 58%),
    radial-gradient(420px 240px at 104% 4%, rgba(139,92,246,.13), transparent 62%);
  opacity: .72;
  pointer-events: none;
}

.installed-popup::after {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  top: -80px;
  height: 110px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateY(-100%);
  pointer-events: none;
  animation: installed-scanline 4.8s ease-in-out infinite;
}

.installed-popup-bg {
  position: relative;
  z-index: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background:
    radial-gradient(640px 260px at 10% -18%, rgba(45,212,191,.12), transparent 62%),
    radial-gradient(620px 300px at 100% 0%, rgba(34,197,94,.08), transparent 68%),
    rgba(7,12,18,.80);
}

.installed-topbar,
.installed-quota,
.installed-score-card,
.installed-panel,
.installed-metric,
.installed-action,
.installed-icon-btn,
.installed-site,
.installed-badges button {
  border: 1px solid rgba(45,212,191,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.032));
  box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset;
}

.installed-topbar {
  border-color: rgba(45,212,191,.36);
  border-radius: 15px;
  padding: 10px;
}

.installed-title-row,
.installed-meta-row,
.installed-score-head,
.installed-panel-top,
.installed-tools {
  display: flex;
  align-items: center;
}

.installed-title-row,
.installed-meta-row,
.installed-score-head,
.installed-panel-top {
  justify-content: space-between;
  gap: 10px;
}

.installed-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.installed-brand img {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  filter: drop-shadow(0 0 10px rgba(45,212,191,.34));
}

.installed-brand strong {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.installed-tools {
  gap: 6px;
  flex: 0 0 auto;
}

.installed-icon-btn {
  width: 25px;
  height: 25px;
  border-radius: 999px;
  color: rgba(226,244,246,.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .18s, background .18s, color .18s, box-shadow .18s;
}

.installed-icon-btn:hover,
.installed-site:hover,
.installed-badges button:hover,
.installed-metric:hover,
.installed-action:hover,
.installed-panel-top button:hover,
.installed-quota button:hover,
.installed-copy-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(45,212,191,.48);
  background: rgba(45,212,191,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.24), 0 0 20px rgba(45,212,191,.12);
}

.installed-toggle {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.10);
  padding: 2px;
  display: inline-flex;
  align-items: center;
}

.installed-toggle span {
  width: 18px;
  height: 18px;
  border-radius: inherit;
  background: linear-gradient(135deg, #d1d5db, #fff);
}

.installed-meta-row {
  margin-top: 8px;
}

.installed-site {
  min-width: 0;
  max-width: 235px;
  min-height: 31px;
  padding: 5px 9px;
  border-radius: 10px;
  color: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.installed-site strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.installed-last {
  flex: 0 0 auto;
  color: rgba(235,248,250,.62);
  font-size: 10.5px;
  font-weight: 700;
}

.installed-quota {
  min-height: 30px;
  border-radius: 10px;
  padding: 5px 8px;
  color: rgba(230,246,248,.68);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.installed-quota strong {
  color: #36e3c9;
}

.installed-quota button,
.installed-panel-top button {
  border: 1px solid rgba(139,92,246,.32);
  border-radius: 8px;
  background: rgba(139,92,246,.14);
  color: #c4b5fd;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}

.installed-score-card {
  border-color: rgba(45,212,191,.35);
  border-radius: 15px;
  padding: 10px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
}

.installed-score-ring {
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #0c1219 0 49%, transparent 51%),
    conic-gradient(from -90deg, #2dd4bf 0 var(--demo-score), rgba(255,255,255,.08) 0);
  color: #36e3c9;
  box-shadow: 0 0 26px rgba(45,212,191,.42), inset 0 0 0 1px rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}

.installed-score-ring:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(45,212,191,.58), inset 0 0 0 1px rgba(255,255,255,.07);
}

.installed-score-ring .installed-score-num {
  color: #2dd4bf;
  font-size: 27px;
  font-weight: 950;
  line-height: .88;
  letter-spacing: 0;
}

.installed-score-ring span:last-child {
  color: rgba(255,255,255,.50);
  font-size: 9px;
  font-weight: 800;
}

.installed-score-copy {
  min-width: 0;
}

.installed-score-copy h3 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.05;
}

.installed-score-copy p {
  margin: 4px 0 0;
  color: rgba(235,248,250,.66);
  font-size: 11.5px;
  line-height: 1.35;
}

.installed-score-pill,
.installed-mini-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  border-radius: 999px;
  border: 1px solid rgba(45,212,191,.36);
  background: rgba(45,212,191,.12);
  color: #33e7d1;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.installed-score-pill {
  padding: 3px 9px;
}

.installed-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.installed-mini-tags span {
  padding: 3px 7px;
  color: #22c55e;
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.25);
}

.installed-copy-btn {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: rgba(233,247,248,.68);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}

.installed-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.installed-badges button {
  min-height: 25px;
  border-radius: 8px;
  color: #2dd4bf;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}

.installed-badges button:first-child {
  color: #22c55e;
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}

.installed-badges button:first-child span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.installed-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.installed-metric {
  min-height: 78px;
  border-color: rgba(255,255,255,.10);
  border-radius: 11px;
  padding: 7px 5px 6px;
  color: rgba(238,248,250,.62);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}

.installed-metric small {
  max-width: 100%;
  color: rgba(238,248,250,.62);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.installed-metric strong {
  color: #2dd4bf;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.installed-metric em {
  min-width: 28px;
  min-height: 15px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.24);
  color: #22c55e;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.installed-panel {
  min-height: 150px;
  border-radius: 13px;
  padding: 9px;
  position: relative;
  overflow: hidden;
}

.installed-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45,212,191,.55), transparent);
  opacity: .8;
}

.installed-panel-top {
  margin-bottom: 6px;
}

.installed-panel-top strong {
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.installed-progress {
  height: 3px;
  margin-bottom: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

.installed-progress span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2dd4bf, #22c55e, #fbbf24);
  transform: translateX(-106%);
}

.installed-popup.is-scanning .installed-progress span {
  animation: installed-progress-run .88s cubic-bezier(.22,1,.36,1);
}

.installed-view {
  display: none;
  animation: installed-panel-in .22s cubic-bezier(.22,1,.36,1);
}

.installed-view.is-active {
  display: block;
}

.installed-view ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.installed-view li {
  color: rgba(237,248,249,.68);
  font-size: 10.5px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.installed-view li span {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  margin-top: 4px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 8px rgba(96,165,250,.45);
}

.installed-view li span.is-amber,
.is-amber {
  color: #fbbf24 !important;
  background: #fbbf24 !important;
}

.installed-view p {
  margin: 7px 0 0;
  color: rgba(237,248,249,.68);
  font-size: 10.5px;
  line-height: 1.45;
}

.installed-view p strong {
  color: #fff;
}

.installed-evidence-grid,
.installed-link-check,
.installed-report-list {
  display: grid;
  gap: 6px;
}

.installed-evidence-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.installed-evidence-grid span,
.installed-link-check span,
.installed-report-list span,
.installed-history-row,
.installed-bulk-rows span,
.installed-setting,
.installed-key-field {
  min-height: 31px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.085);
  background: rgba(255,255,255,.035);
  color: rgba(237,248,249,.66);
  padding: 6px 8px;
  font-size: 10.2px;
}

.installed-evidence-grid strong,
.installed-link-check b,
.installed-report-list strong,
.installed-history-row span,
.installed-bulk-rows strong {
  color: #2dd4bf;
}

.installed-link-check {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.installed-link-check span,
.installed-report-list span,
.installed-history-row,
.installed-bulk-rows span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.installed-link-check b {
  color: rgba(255,255,255,.82);
  font-weight: 900;
}

.installed-report-list span {
  min-height: 27px;
}

.installed-history-row + .installed-history-row,
.installed-bulk-rows span + span {
  margin-top: 5px;
}

.installed-history-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.installed-view textarea {
  width: 100%;
  min-height: 58px;
  resize: none;
  border: 1px solid rgba(45,212,191,.18);
  border-radius: 9px;
  background: rgba(0,0,0,.18);
  color: rgba(237,248,249,.76);
  font: inherit;
  font-size: 10.5px;
  line-height: 1.45;
  padding: 7px 8px;
  outline: none;
}

.installed-bulk-rows {
  margin-top: 5px;
}

.installed-key-field,
.installed-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.installed-key-field span,
.installed-setting span {
  color: rgba(255,255,255,.76);
  font-weight: 900;
}

.installed-key-field input {
  min-width: 0;
  max-width: 175px;
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 8px;
  background: rgba(139,92,246,.10);
  color: #c4b5fd;
  font: inherit;
  font-size: 10.5px;
  font-weight: 900;
  padding: 6px 8px;
}

.installed-setting input {
  accent-color: #2dd4bf;
}

.installed-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.installed-action {
  min-width: 0;
  min-height: 33px;
  border-radius: 10px;
  color: #2dd4bf;
  font: inherit;
  font-size: 10.5px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .18s, background .18s, box-shadow .18s, color .18s;
}

.installed-action.is-active {
  border-color: rgba(45,212,191,.52);
  background: rgba(45,212,191,.14);
  box-shadow: 0 0 22px rgba(45,212,191,.14);
}

.installed-action.is-google {
  color: #fbbf24;
  border-color: rgba(251,191,36,.30);
  background: rgba(251,191,36,.08);
}

.installed-action.is-muted {
  color: rgba(237,248,249,.58);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.installed-action.is-pro {
  color: #c4b5fd;
  border-color: rgba(139,92,246,.32);
  background: rgba(139,92,246,.12);
}

.demo-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  color: currentColor;
}

.demo-icon-help::before {
  content: "?";
  position: absolute;
  inset: 0;
  font-size: 11px;
  font-weight: 950;
  line-height: 14px;
  text-align: center;
}

.demo-icon-gear::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 -5px 0 -3px currentColor, 0 5px 0 -3px currentColor, 5px 0 0 -3px currentColor, -5px 0 0 -3px currentColor;
}

.demo-icon-external::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  right: 1px;
  top: 1px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
}

.demo-icon-external::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 1.6px;
  right: 1px;
  top: 6px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.demo-icon-copy::before,
.demo-icon-copy::after {
  content: "";
  position: absolute;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.demo-icon-copy::before {
  inset: 4px 2px 2px 4px;
  opacity: .72;
}

.demo-icon-copy::after {
  inset: 2px 4px 4px 2px;
}

.demo-icon-sitemap::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 2px;
  height: 9px;
  background: currentColor;
  box-shadow: -4px 6px 0 -1px currentColor, 4px 6px 0 -1px currentColor;
}

.demo-icon-sitemap::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 9px;
  height: 1.5px;
  background: currentColor;
}

.demo-icon-doc::before {
  content: "";
  position: absolute;
  inset: 1px 3px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.demo-icon-doc::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 6px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor;
}

.demo-icon-google {
  font-size: 12px;
  font-weight: 950;
  line-height: 14px;
  text-align: center;
}

.demo-icon-link::before,
.demo-icon-link::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  transform: rotate(-35deg);
}

.demo-icon-link::before {
  left: 1px;
  top: 4px;
}

.demo-icon-link::after {
  right: 1px;
  bottom: 4px;
}

.demo-icon-scan::before,
.demo-icon-clock::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  border: 1.6px solid currentColor;
  border-radius: 999px;
}

.demo-icon-scan::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 1.6px;
  height: 5px;
  background: currentColor;
  transform-origin: bottom center;
  animation: installed-clock-hand 1.8s linear infinite;
}

.demo-icon-clock::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 1.5px;
  height: 5px;
  background: currentColor;
  box-shadow: 3px 5px 0 -1px currentColor;
}

.demo-icon-plus::before,
.demo-icon-plus::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 6px;
  height: 1.7px;
  background: currentColor;
}

.demo-icon-plus::after {
  transform: rotate(90deg);
}

.demo-icon-menu::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 3px;
  height: 1.6px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}

.demo-icon-share::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  left: 1px;
  top: 5px;
  box-shadow: 8px -4px 0 -1.5px currentColor, 8px 5px 0 -1.5px currentColor;
}

.demo-icon-share::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: skewY(-28deg);
  opacity: .72;
}

@keyframes installed-hero-float {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-7px); }
}

@keyframes installed-aurora {
  0%, 100% { opacity: .72; transform: scale(.98); }
  50% { opacity: .96; transform: scale(1.02); }
}

@keyframes installed-scanline {
  0%, 28% { transform: translateY(-100%); opacity: 0; }
  42% { opacity: .72; }
  68%, 100% { transform: translateY(640px); opacity: 0; }
}

@keyframes installed-progress-run {
  0% { transform: translateX(-106%); }
  68% { transform: translateX(-18%); }
  100% { transform: translateX(0); }
}

@keyframes installed-panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes installed-clock-hand {
  to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
  .hero-installed-demo.hero-popup-demo.hero-live-demo {
    max-width: min(448px, calc(100vw - 34px));
    margin-top: 46px !important;
  }

  .installed-popup {
    font-size: 11px;
  }

  .installed-score-card {
    grid-template-columns: 68px minmax(0, 1fr) 24px;
    gap: 9px;
    padding: 9px;
  }

  .installed-score-ring {
    width: 64px;
    height: 64px;
  }

  .installed-score-ring .installed-score-num {
    font-size: 24px;
  }

  .installed-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .installed-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .installed-link-check,
  .installed-evidence-grid {
    grid-template-columns: 1fr;
  }
}

/* Real extension screenshot hero. Uses the provided product screens as truth. */
.hero-real-demo.hero-popup-demo.hero-live-demo {
  max-width: 980px;
  margin-top: 54px !important;
  overflow: visible;
}

.hero-real-stage.hero-live-stage {
  width: min(100%, 980px);
  margin: 0 auto;
  position: relative;
  isolation: isolate;
}

.hero-real-stage::before {
  content: "";
  position: absolute;
  inset: -58px -80px -72px;
  z-index: -2;
  border-radius: 48px;
  background:
    radial-gradient(ellipse at 36% 36%, rgba(45,212,191,.34), transparent 54%),
    radial-gradient(ellipse at 72% 28%, rgba(139,92,246,.14), transparent 52%),
    radial-gradient(ellipse at 50% 96%, rgba(34,197,94,.16), transparent 60%);
  filter: blur(18px);
  pointer-events: none;
}

.real-demo-shell {
  --real-frame-width: 407px;
  width: min(100%, 960px);
  margin: 0 auto;
  border: 1px solid rgba(45,212,191,.28);
  border-radius: 24px;
  background:
    radial-gradient(740px 340px at 12% -10%, rgba(45,212,191,.12), transparent 58%),
    radial-gradient(680px 320px at 100% 0%, rgba(139,92,246,.10), transparent 62%),
    linear-gradient(180deg, rgba(18,27,38,.94), rgba(8,13,19,.97));
  box-shadow:
    0 36px 90px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 76px rgba(45,212,191,.13);
  padding: 16px;
  text-align: left;
  transition: max-width .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.real-demo-shell[data-view="report"],
.real-demo-shell[data-view="google"] {
  width: min(100%, 1080px);
  --real-frame-width: 920px;
}

.real-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 14px;
}

.real-demo-head span {
  display: block;
  margin-bottom: 3px;
  color: #2dd4bf;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}

.real-demo-head strong {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}

.real-demo-head p {
  max-width: 315px;
  margin: 0;
  color: rgba(226,242,245,.58);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
}

.real-demo-body {
  display: grid;
  grid-template-columns: minmax(0, var(--real-frame-width)) 210px;
  align-items: start;
  justify-content: center;
  gap: 18px;
}

.real-demo-shell[data-view="report"] .real-demo-body,
.real-demo-shell[data-view="google"] .real-demo-body {
  grid-template-columns: minmax(0, var(--real-frame-width));
}

.real-demo-shell[data-view="report"] .real-demo-controls,
.real-demo-shell[data-view="google"] .real-demo-controls {
  grid-row: 1;
  justify-self: center;
  width: min(100%, 920px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.real-demo-frame {
  margin: 0;
  justify-self: center;
}

.real-demo-image-wrap {
  position: relative;
  width: min(100%, var(--real-frame-width));
  margin: 0 auto;
  border-radius: 20px;
  background: #071017;
  box-shadow:
    0 28px 70px rgba(0,0,0,.50),
    0 0 0 1px rgba(45,212,191,.24),
    0 0 54px rgba(45,212,191,.15);
  overflow: hidden;
}

.real-demo-image {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: inherit;
  transform: none !important;
  filter: none !important;
  image-rendering: auto;
  transition: opacity .16s ease;
}

.real-demo-shell.is-changing .real-demo-image {
  opacity: .18;
}

.real-demo-frame figcaption {
  max-width: var(--real-frame-width);
  margin: 12px auto 0;
  color: rgba(226,242,245,.58);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.real-demo-controls {
  display: grid;
  gap: 8px;
  position: sticky;
  top: 82px;
}

.real-demo-control {
  min-height: 38px;
  border: 1px solid rgba(45,212,191,.18);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)),
    rgba(7,12,18,.72);
  color: rgba(232,247,248,.74);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .18s, background .18s, color .18s, box-shadow .18s;
}

.real-demo-control:hover,
.real-demo-control.is-active {
  transform: translateY(-2px);
  border-color: rgba(45,212,191,.52);
  background: rgba(45,212,191,.11);
  color: #55f7df;
  box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 22px rgba(45,212,191,.13);
}

.real-demo-control.is-google {
  border-color: rgba(251,191,36,.28);
  color: #fbbf24;
}

.real-demo-control.is-pro {
  border-color: rgba(139,92,246,.32);
  color: #c4b5fd;
}

.real-demo-control.is-critical {
  border-color: rgba(248,113,113,.34);
  color: #fb7185;
}

.real-hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.real-hotspot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(45,212,191,0);
  background: rgba(45,212,191,0);
  transition: border-color .18s, background .18s, box-shadow .18s;
}

.real-hotspot:hover::after {
  border-color: rgba(45,212,191,.42);
  background: rgba(45,212,191,.08);
  box-shadow: 0 0 22px rgba(45,212,191,.22);
}

.real-demo-shell:not([data-view="normal"]):not([data-view="critical"]) .real-hotspot {
  display: none;
}

.hot-help { left: 82.4%; top: 2%; width: 6.6%; height: 5%; border-radius: 999px; }
.hot-gear { left: 91%; top: 2%; width: 6.6%; height: 5%; border-radius: 999px; }
.hot-upgrade { left: 77.5%; top: 16.7%; width: 20%; height: 4.4%; }
.hot-report { left: 76%; top: 56.4%; width: 21.5%; height: 5.3%; }
.hot-scan { left: 2%; top: 77%; width: 31%; height: 5.8%; }
.hot-google { left: 35%; top: 77%; width: 31%; height: 5.8%; }
.hot-link { left: 68%; top: 77%; width: 30%; height: 5.8%; }
.hot-bulk { left: 2%; top: 83.3%; width: 31%; height: 5.8%; }
.hot-history { left: 35%; top: 83.3%; width: 31%; height: 5.8%; }
.hot-enter-key { left: 67%; top: 90%; width: 31%; height: 4.3%; }
.hot-pro-key { left: 79.8%; top: 95.3%; width: 18%; height: 4%; }

@media (max-width: 900px) {
  .real-demo-body,
  .real-demo-shell[data-view="report"] .real-demo-body,
  .real-demo-shell[data-view="google"] .real-demo-body {
    grid-template-columns: 1fr;
  }

  .real-demo-controls,
  .real-demo-shell[data-view="report"] .real-demo-controls,
  .real-demo-shell[data-view="google"] .real-demo-controls {
    position: static;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .real-demo-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .real-demo-head p {
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .hero-real-demo.hero-popup-demo.hero-live-demo {
    margin-top: 42px !important;
  }

  .real-demo-shell {
    padding: 12px;
    border-radius: 20px;
  }

  .real-demo-controls,
  .real-demo-shell[data-view="report"] .real-demo-controls,
  .real-demo-shell[data-view="google"] .real-demo-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .real-demo-control {
    min-height: 36px;
    font-size: 11px;
  }
}

/* ==========================================================================
   v1.7.0 Premium UI/UX Aesthetic Enhancement Overrides
   ========================================================================== */

/* Typography & Layout Refinements */
.hero-h1, .page-hero h1, .section-title, .cta-title {
  letter-spacing: -0.035em !important;
  text-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* SaaS Background Glow Enhancement */
.orb {
  filter: blur(140px) !important;
  opacity: 0.8 !important;
}
.orb-1 {
  background: radial-gradient(circle, rgba(45, 212, 191, 0.22) 0%, transparent 70%) !important;
}
.orb-2 {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16) 0%, transparent 70%) !important;
}
.orb-3 {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.14) 0%, transparent 70%) !important;
}

/* Glassmorphic Cards & Glowing Accent Shadows */
.signal-card, .rule-card, .tier-card {
  background: rgba(18, 26, 38, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), 
              border-color 0.38s cubic-bezier(0.22, 1, 0.36, 1), 
              box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.signal-card:hover, .rule-card:hover {
  transform: translateY(-6px) scale(1.008) !important;
  border-color: rgba(45, 212, 191, 0.42) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.42), 0 0 32px rgba(45, 212, 191, 0.22) !important;
}

/* Custom themed glows for score tiers */
.tier-card.tier-excellent:hover {
  border-color: rgba(34, 197, 94, 0.45) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 32px rgba(34, 197, 94, 0.24) !important;
}
.tier-card.tier-good:hover {
  border-color: rgba(45, 212, 191, 0.45) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 32px rgba(45, 212, 191, 0.24) !important;
}
.tier-card.tier-work:hover {
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 32px rgba(245, 158, 11, 0.24) !important;
}
.tier-card.tier-crit:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 32px rgba(239, 68, 68, 0.24) !important;
}

/* Premium Comparison Table Matrix */
.compare-wrap {
  background: rgba(18, 26, 38, 0.52) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 28px 68px rgba(0,0,0,0.36) !important;
}

.compare-header {
  background: rgba(255, 255, 255, 0.035) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

/* Highlight Pro column cells */
.compare-header > div:nth-child(3) {
  background: rgba(45, 212, 191, 0.045) !important;
  border-left: 1px solid rgba(45, 212, 191, 0.16) !important;
  border-right: 1px solid rgba(45, 212, 191, 0.16) !important;
  position: relative;
}

.compare-header > div:nth-child(3)::before {
  content: "RECOMMENDED";
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #2dd4bf;
  background: rgba(45, 212, 191, 0.18);
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(45, 212, 191, 0.3);
}

.compare-row > div:nth-child(3) {
  background: rgba(45, 212, 191, 0.024) !important;
  border-left: 1px solid rgba(45, 212, 191, 0.16) !important;
  border-right: 1px solid rgba(45, 212, 191, 0.16) !important;
  font-weight: 700;
}

.compare-row:last-child > div:nth-child(3) {
  border-bottom: 1px solid rgba(45, 212, 191, 0.16) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 12px;
}

.yes {
  color: #22c55e !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.15);
}
.yes::before {
  content: "✓";
  font-weight: 900;
}

.no {
  color: rgba(255, 255, 255, 0.28) !important;
}

.pro {
  color: #2dd4bf !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-shadow: 0 0 10px rgba(45, 212, 191, 0.15);
}
.pro::before {
  content: "✦";
  font-weight: 900;
}

/* Fluid Viewport & Header Polish for Interactive Demo */
.real-demo-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-right: 12px;
}
.real-demo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.real-demo-dot.red { background: #ef4444; opacity: 0.85; }
.real-demo-dot.yellow { background: #f59e0b; opacity: 0.85; }
.real-demo-dot.green { background: #10b981; opacity: 0.85; }

.real-demo-image-wrap {
  transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1), height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width, height;
}

.real-demo-control {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(8px);
  font-weight: 700 !important;
  transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.real-demo-control:hover {
  background: rgba(45, 212, 191, 0.08) !important;
  border-color: rgba(45, 212, 191, 0.35) !important;
  transform: translateY(-2px) !important;
}

.real-demo-control.is-active {
  background: rgba(45, 212, 191, 0.14) !important;
  border-color: rgba(45, 212, 191, 0.6) !important;
  color: #2dd4bf !important;
  box-shadow: 0 8px 22px rgba(45, 212, 191, 0.16), 0 0 12px rgba(45, 212, 191, 0.1) !important;
}

.real-demo-control.is-google.is-active {
  background: rgba(251, 191, 36, 0.14) !important;
  border-color: rgba(251, 191, 36, 0.6) !important;
  color: #fbbf24 !important;
  box-shadow: 0 8px 22px rgba(251, 191, 36, 0.16), 0 0 12px rgba(251, 191, 36, 0.1) !important;
}

.real-demo-control.is-pro.is-active {
  background: rgba(139, 92, 246, 0.14) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  color: #c4b5fd !important;
  box-shadow: 0 8px 22px rgba(139, 92, 246, 0.16), 0 0 12px rgba(139, 92, 246, 0.1) !important;
}

.real-demo-control.is-critical.is-active {
  background: rgba(248, 113, 113, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.6) !important;
  color: #fb7185 !important;
  box-shadow: 0 8px 22px rgba(248, 113, 113, 0.16), 0 0 12px rgba(248, 113, 113, 0.1) !important;
}

/* Premium Button Overlays */
.btn-primary {
  box-shadow: 0 6px 28px rgba(45, 212, 191, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 42px rgba(45, 212, 191, 0.52), 0 0 20px rgba(34, 197, 94, 0.28) !important;
}

.btn-secondary:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* Bulk Demo Loading Pulse */
.bulk-progress-fill {
  position: relative;
  overflow: hidden;
}
.bulk-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: translateX(-100%);
  animation: shimmer-slide 2.2s infinite;
}