/* ==========================================================================
   SQUR Site Styles - all pages (except blog & design-system dev tools)
   Loads after styles.css which contains the :root design tokens.

   Concatenated in cascade order (last section wins conflicts):
   base → enhancements → homepage → verticals → interactions → nav-footer
   ========================================================================== */

/* ======================================================================
   Base utilities & zones (original styles.css lines 116+)
   ====================================================================== */

/* ==========================================================
   Background Mode Configuration
   Generated by Control Room. To change: open dev-control-room.html,
   pick your mode, copy the CSS, and paste it here.

   Current mode: gradient (default)
   Available: gradient | grid-scan | grid-verified | grid-alert | flat
   Control Room: /dev-control-room (developer only, not linked)
   ========================================================== */

/* Currently active: gradient mode (orbs + radial glows) */
/* To switch to grid mode, uncomment the grid block below and comment out gradient */
/* To switch to flat mode, uncomment the flat block below and comment out gradient */

/* ── GRADIENT MODE (active) ── */
/* Uses existing zone-hero, zone-gradient, zone-orb classes unchanged */
/* .zone-canvas { display: none; } */ /* Uncomment to hide grid animation in gradient mode */

/* ── GRID MODE (inactive - uncomment to activate) ── */
/* .zone-orb { display: none; }
   .zone-hero::before { display: none; }
   .zone-gradient::before { display: none; } */
/* Then add to hero sections: <canvas class="zone-canvas" data-variant="scan"></canvas> */
/* Variant options: scan, verified, alert */

/* ── FLAT MODE (inactive - uncomment to activate) ── */
/* .zone-hero::before, .zone-gradient::before,
   .section-glow::before, .section-glow-strong::before { display: none; }
   .zone-orb { display: none; }
   .zone-canvas { display: none; } */

/* ── Shared grid pattern utility ── */
.bg-grid-pattern {
  position: relative;
}
.bg-grid-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(43, 205, 238, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 205, 238, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Zone Background System ── */
@keyframes float-orb {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30px, -20px) scale(1.05);
  }
  50% {
    transform: translate(-20px, 15px) scale(0.95);
  }
  75% {
    transform: translate(15px, 25px) scale(1.02);
  }
}

.zone-hero {
  position: relative;
  overflow: hidden;
  background: var(--zone-dark-bg);
}
.zone-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--zone-hero-gradient);
  pointer-events: none;
  z-index: 0;
}

.zone-dark {
  background: var(--zone-dark-bg);
}

/* Slightly lighter band - no orbs, clean contrast for social proof / forms */
.section-soft {
  background: var(--color-bg-secondary);
}

.zone-gradient {
  position: relative;
  overflow: hidden;
}
.zone-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--zone-gradient-overlay);
  pointer-events: none;
}

.zone-divider {
  height: 1px;
  background: var(--zone-divider);
}

.zone-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.zone-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(var(--orb-blur));
  animation: float-orb var(--orb-duration) ease-in-out infinite;
  will-change: transform;
}
.zone-orb-cyan {
  background: var(--orb-cyan);
}
.zone-orb-teal {
  background: var(--orb-teal);
}
.zone-orb-rose {
  background: var(--orb-rose);
}

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

/* Edge spacing rule - grid gap equals container padding */
.section-grid {
  --grid-gap: var(--space-lg);
  gap: var(--grid-gap);
  padding-inline: var(--grid-gap);
}

@media (prefers-reduced-motion: reduce) {
  .zone-orb {
    animation: none;
  }
  .zone-canvas {
    display: none;
  }
}

/* ── Standardized Breakpoints (layout changes only) ──
 * sm: 640px  - mobile single column
 * md: 768px  - tablet grid adjustments
 * lg: 1024px - desktop full layout
 *
 * Spacing and typography scale fluidly via clamp() and do NOT need breakpoints.
 * Only use these for flex-direction, grid-template-columns, and visibility changes.
 */

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-fg-secondary);
  line-height: 1.6;
}

/* ==========================================================
   Section Depth System - alternating backgrounds + ambient glow
   Add these classes to sections for visual depth between them.
   ========================================================== */

/* Darker band - used for alternating sections */
.section-dark {
  background-color: var(--color-bg-deep);
}

/* Slightly elevated band */
.section-elevated {
  background-color: var(--color-bg-elevated);
}

/* Gradient fade between dark ↔ base */
.section-gradient-down {
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    var(--color-bg-deep) 100%
  );
}
.section-gradient-up {
  background: linear-gradient(
    180deg,
    var(--color-bg-deep) 0%,
    var(--color-bg) 100%
  );
}

/* Ambient radial glow behind a section (cyan) */
.section-glow {
  position: relative;
}
.section-glow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    rgba(43, 205, 238, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Stronger glow variant for hero / CTA */
.section-glow-strong {
  position: relative;
}
.section-glow-strong::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  height: 800px;
  background: radial-gradient(
    ellipse at center,
    rgba(43, 205, 238, 0.08) 0%,
    rgba(43, 205, 238, 0.03) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Montserrat", sans-serif;
  margin-bottom: 20px;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation Menu */
.navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(17, 24, 39, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #374151;
}

.navbar.scrolled {
  background-color: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #374151;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  max-width: 1200px;
  margin: 0 auto;
  width: 90%;
}

.navbar .logo img {
  width: 160px;
  height: auto;
}

.navbar .nav-menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.navbar .nav-menu li {
  position: relative;
}

.navbar .nav-menu li a {
  font-weight: 600;
  color: var(--color-fg-muted);
}

.navbar .nav-menu li a:hover {
  color: var(--color-primary);
}

/* Dropdown Menu Styles */
.has-dropdown {
  position: relative;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.dropdown-trigger::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 769px) {
  .has-dropdown:hover .dropdown-trigger::after {
    transform: rotate(180deg);
  }
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(43, 205, 238, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(94, 234, 212, 0.08) 0%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      rgba(31, 41, 55, 0.98) 0%,
      rgba(31, 41, 55, 0.95) 100%
    );
  border: 1px solid rgba(43, 205, 238, 0.2);
  border-radius: 12px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(43, 205, 238, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
}

@media (min-width: 769px) {
  .has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.dropdown-item {
  display: block;
  padding: 14px 16px;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.dropdown-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.1) 0%,
    rgba(94, 234, 212, 0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(43, 205, 238, 0.08);
  transform: translateX(4px);
}

.dropdown-item:hover::before {
  opacity: 1;
}

.dropdown-item + .dropdown-item {
  margin-top: 4px;
}

.dropdown-item-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.dropdown-item-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-fg);
  transition: color 0.2s ease;
}

.dropdown-item:hover .dropdown-item-title {
  color: var(--color-primary-hover);
}

.dropdown-item-description {
  font-size: 12px;
  color: var(--color-fg-muted);
  font-weight: 400;
  line-height: 1.4;
}

/* Header Actions */
.nav-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.btn.btn-login {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}

.btn.btn-login:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.btn.btn-primary {
  background: linear-gradient(
    135deg,
    var(--color-bg-btn) 0%,
    var(--color-bg) 100%
  );
  color: var(--color-fg);
  border-color: var(--border-accent-strong);
  box-shadow:
    0 2px 8px rgba(43, 205, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn.btn-primary:hover {
  background: linear-gradient(
    135deg,
    var(--color-bg-btn-hover) 0%,
    var(--color-bg-btn) 100%
  );
  border-color: rgba(43, 205, 238, 0.7);
  box-shadow:
    0 4px 12px rgba(43, 205, 238, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Mobile Menu */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  height: 3px;
  width: 25px;
  background-color: #cccccc;
  margin-bottom: 5px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

@media (max-width: 768px) {
  .navbar .container {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
  }

  .navbar .logo {
    grid-column: 1;
    order: 1;
  }

  .navbar .logo img {
    width: 120px;
  }

  .navbar .nav-menu {
    display: none !important;
    grid-column: 1 / -1;
    order: 5;
  }

  .hamburger {
    display: flex;
    grid-column: 2;
    order: 2;
    justify-self: start;
    margin-left: 8px;
  }

  .navbar .nav-actions {
    grid-column: 3 / 5;
    order: 3;
    display: flex;
    gap: 8px;
    margin-left: auto;
  }

  .nav-actions .btn {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 8px;
    white-space: nowrap;
  }

  .nav-actions .btn-login {
    display: none;
  }

  .navbar .nav-menu.active {
    display: flex !important;
    flex-direction: column;
    position: relative;
    top: 0;
    right: 0;
    background-color: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    width: 100%;
    text-align: center;
    border-top: 1px solid var(--border-subtle);
    padding: 20px 0;
    margin-top: 12px;
    border-radius: 8px;
  }

  .nav-menu li {
    margin: 12px 0;
  }

  .nav-menu li a {
    display: block;
    padding: 8px 16px;
    font-size: 16px;
  }

  /* Mobile Dropdown Styles */
  .has-dropdown {
    position: relative;
  }

  .dropdown-trigger::after {
    display: inline-block;
    margin-left: 6px;
  }

  .dropdown-menu {
    position: static;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none !important;
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid var(--border-accent);
    margin: 8px 16px 0 16px;
    box-shadow: none;
    transition: all 0.3s ease;
    width: auto;
    left: 0;
    right: 0;
    min-width: 0;
  }

  .has-dropdown.mobile-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    max-height: 300px;
  }

  .has-dropdown.mobile-open .dropdown-trigger::after {
    transform: rotate(180deg);
  }

  .dropdown-item {
    padding: 12px 16px;
    text-align: center;
    display: block;
  }

  .dropdown-item::before {
    display: none;
  }

  .dropdown-item:hover {
    transform: none;
  }

  /* Simplify dropdown items on mobile - remove descriptions */
  .dropdown-item-content {
    flex-direction: row;
    gap: 0;
    justify-content: center;
  }

  .dropdown-item-title {
    font-size: 16px;
    margin: 0;
  }

  .dropdown-item-description {
    display: none;
  }
}

/* Adjust for small screens */
@media (max-width: 640px) {
  .navbar .logo img {
    width: 100px;
  }

  .nav-actions .btn {
    padding: 7px 12px;
    font-size: 12px;
  }

  .nav-actions .btn.btn-primary {
    display: block;
  }

  .nav-actions .btn.cta-secondary {
    display: none;
  }
}

/* Medium mobile - show both buttons */
@media (min-width: 641px) and (max-width: 768px) {
  .nav-actions .btn {
    display: block;
  }
}

/* Hero Section */
#hero {
  background:
    radial-gradient(circle at 25% 50%, var(--glow-primary) 0%, transparent 50%),
    radial-gradient(
      circle at 75% 50%,
      rgba(94, 234, 212, 0.08) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, var(--color-bg-deep) 0%, var(--color-bg) 100%);
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(43, 205, 238, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 205, 238, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

#hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: none;
  margin: 0 auto;
  color: var(--color-fg);
  padding: 40px 20px;
  animation: fadeInUp 0.8s ease-out;
}

.hero-content h1 {
  font-size: 48px;
  color: var(--color-fg-secondary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.hero-content h1 .accent {
  color: var(--color-primary);
}

.hero-content p {
  font-size: 24px;
  margin: 20px auto;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
}

.hero-buttons {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.cta-button {
  display: inline-block;
  padding: 16px 36px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  min-width: 160px;
  text-align: center;
}

.cta-button.cta-primary {
  background: linear-gradient(
    135deg,
    var(--color-bg-btn) 0%,
    var(--color-bg) 100%
  );
  color: var(--color-fg);
  border-color: var(--border-accent-strong);
  box-shadow:
    0 4px 12px rgba(43, 205, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cta-button.cta-primary:hover {
  background: linear-gradient(
    135deg,
    var(--color-bg-btn-hover) 0%,
    var(--color-bg-btn) 100%
  );
  border-color: rgba(43, 205, 238, 0.7);
  box-shadow:
    0 6px 16px rgba(43, 205, 238, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.cta-button.cta-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  position: relative;
}

/* Animated gradient border using pseudo-element with mask */
.cta-button.cta-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(
    90deg,
    rgba(43, 205, 238, 0.3) 0%,
    rgba(78, 214, 214, 0.8) 12.5%,
    rgba(139, 92, 246, 0.6) 25%,
    rgba(78, 214, 214, 0.8) 37.5%,
    rgba(43, 205, 238, 0.3) 50%,
    rgba(78, 214, 214, 0.8) 62.5%,
    rgba(139, 92, 246, 0.6) 75%,
    rgba(78, 214, 214, 0.8) 87.5%,
    rgba(43, 205, 238, 0.3) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 0%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: borderFlowSmooth 3s linear infinite;
}

@keyframes borderFlowSmooth {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

.cta-button.cta-secondary:hover {
  background: rgba(78, 214, 214, 0.1);
  color: var(--color-fg);
  box-shadow: 0 4px 12px rgba(78, 214, 214, 0.15);
}

.cta-button.cta-secondary:hover::before {
  animation: borderFlowSmooth 1.5s linear infinite;
}

.hero-content .subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin: 15px auto 25px auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  max-width: 900px;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.scroll-indicator a {
  display: block;
  width: 30px;
  height: 30px;
}

.scroll-indicator span {
  display: block;
  width: 30px;
  height: 30px;
  border-bottom: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(45deg);
  margin: 0 auto;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) rotate(45deg) translateY(0);
  }
  40% {
    transform: translateX(-50%) rotate(45deg) translateY(10px);
  }
  60% {
    transform: translateX(-50%) rotate(45deg) translateY(5px);
  }
}

/* Introduction Section Styles - Enhanced */
#introduction {
  padding: 100px 0;
  background-color: var(--color-bg);
}

.intro-content {
  max-width: 1000px;
  margin: 0 auto;
}

.intro-text h2 {
  color: #e8ebf0;
  font-size: 48px;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.intro-lead {
  font-size: 20px;
  text-align: center;
  margin-bottom: 60px;
  color: var(--color-fg);
}

/* Process Timeline Styles */
.process-timeline {
  position: relative;
  max-width: 800px;
  margin: 40px auto;
  padding-left: 60px;
  overflow: hidden;
}

/* Glowing line on the left with flowing animation */
.process-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: -200%;
  height: 400%;
  width: 2px;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 100px,
    rgba(43, 205, 238, 0.8) 150px,
    rgba(43, 205, 238, 0.8) 250px,
    transparent 300px,
    transparent 400px
  );
  animation: flowDownSmooth 6s linear infinite;
  filter: blur(1px);
}

@keyframes flowDownSmooth {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(400px);
  }
}

.timeline-step {
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.step-content {
  background: rgba(31, 41, 55, 0.8);
  padding: 25px;
  border-radius: 8px;
  border: 1px solid rgba(43, 205, 238, 0.2);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.step-content:hover {
  border-color: rgba(43, 205, 238, 0.4);
  box-shadow:
    inset 0 0 30px rgba(43, 205, 238, 0.1),
    0 8px 24px rgba(43, 205, 238, 0.2);
}

.step-content h4 {
  color: var(--color-primary);
  margin-bottom: 10px;
  font-size: 1.4em;
}

.step-content p {
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .process-timeline {
    padding-left: 40px;
  }
}

/* Key Metrics Cards */
.key-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.metric-card {
  background: rgba(31, 41, 55, 0.9);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(43, 205, 238, 0.2);
  transition: all 0.3s ease;
}

/* Cyber corner accents */
.metric-card::before,
.metric-card::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-accent-strong);
  pointer-events: none;
}

.metric-card::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.metric-card::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

.metric-card:hover {
  border-color: var(--border-accent-strong);
  box-shadow: 0 10px 30px rgba(43, 205, 238, 0.15);
}

.metric-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  filter: drop-shadow(0 0 8px rgba(43, 205, 238, 0.3));
}

.metric-icon svg {
  width: 100%;
  height: 100%;
}

.metric-number {
  font-size: 36px;
  font-weight: bold;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(43, 205, 238, 0.3);
  margin: 15px 0;
  position: relative;
}

.metric-number::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-primary),
    transparent
  );
}

.metric-label {
  font-size: 18px;
  color: var(--color-fg);
  margin-bottom: 10px;
}

.metric-compare {
  font-size: 14px;
  color: #999;
}

/* Responsive Design */
@media (max-width: 768px) {
  .process-timeline::before {
    left: 20px;
  }

  .timeline-step {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 20px;
  }

  .step-content {
    margin-left: 0;
    margin-top: 15px;
    width: 100%;
  }

  .key-metrics {
    grid-template-columns: 1fr;
  }
}

/* Features Section */
#features {
  background-color: var(--color-bg);
  padding: 100px 0;
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

#features h2 {
  color: #e8ebf0;
  font-size: 48px;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

.feature {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(43, 205, 238, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(94, 234, 212, 0.05) 0%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      rgba(31, 41, 55, 0.95) 0%,
      rgba(31, 41, 55, 0.9) 100%
    );
  border: 1px solid var(--border-accent);
  padding: 40px 30px;
  border-radius: 12px;
  flex: 1 1 300px;
  max-width: 300px;
  text-align: center;
  color: var(--color-fg-secondary);
  position: relative;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.feature:hover {
  border-color: rgba(43, 205, 238, 0.4);
  box-shadow:
    inset 0 0 30px rgba(43, 205, 238, 0.1),
    0 12px 28px rgba(43, 205, 238, 0.2);
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(43, 205, 238, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(94, 234, 212, 0.08) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, rgba(31, 41, 55, 1) 0%, rgba(31, 41, 55, 0.95) 100%);
}

.feature-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s ease-out;
}

.feature-icon svg {
  width: 60px;
  height: 60px;
  color: var(--color-primary);
  transition: all 0.3s ease-out;
  filter: drop-shadow(0 0 8px rgba(43, 205, 238, 0.3));
}

.feature:hover .feature-icon {
}

.feature:hover .feature-icon svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 12px rgba(43, 205, 238, 0.5));
}

.feature h3 {
  color: var(--color-primary);
  margin-bottom: 20px;
  min-height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature p {
  font-size: 16px;
  margin-top: 0;
}

/* Benefits Section */
#benefits {
  padding: 80px 0;
  background: var(--color-bg);
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

#benefits h2 {
  color: #e8ebf0;
  font-size: 48px;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.tab-link {
  padding: 12px 24px;
  border: none;
  background: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-fg-muted);
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab-link:hover {
  color: var(--color-fg-secondary);
}

.tab-link.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
}

.tab-content {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;
  position: relative;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.5s ease;
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab-pane.active {
  display: block;
  opacity: 1;
  position: relative;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 40px;
}

.benefit-content {
  flex: 1;
  max-width: 500px;
  padding-top: 20px;
}

.benefit-content h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--color-fg-secondary);
}

.benefit-content ul {
  list-style: none;
  padding: 0;
}

.benefit-content li {
  margin: 12px 0;
  padding-left: 24px;
  position: relative;
}

.benefit-content li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

.benefit-image {
  flex: 1;
  max-width: 600px;
}

.benefit-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Testimonials Section - Enhanced */
#testimonials {
  background-color: var(--color-bg);
  padding: 100px 0;
  position: relative;
}

#testimonials::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(43, 205, 238, 0.3),
    transparent
  );
}

#testimonials h2 {
  color: #e8ebf0;
  font-size: 48px;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.testimonials-intro {
  text-align: center;
  font-size: 18px;
  color: var(--color-fg-muted);
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

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

.testimonial-card {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(43, 205, 238, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(94, 234, 212, 0.05) 0%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      rgba(31, 41, 55, 0.95) 0%,
      rgba(31, 41, 55, 0.9) 100%
    );
  border: 1px solid var(--border-accent);
  border-radius: 16px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.testimonial-card:hover {
  border-color: rgba(43, 205, 238, 0.4);
  box-shadow:
    inset 0 0 30px rgba(43, 205, 238, 0.1),
    0 12px 28px rgba(43, 205, 238, 0.2);
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(43, 205, 238, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(94, 234, 212, 0.08) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, rgba(31, 41, 55, 1) 0%, rgba(31, 41, 55, 0.95) 100%);
}

.testimonial-content {
  flex: 1;
  margin-bottom: 24px;
}

.quote-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  opacity: 0.3;
}

.quote-icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-primary);
}

.testimonial-quote {
  color: var(--color-fg-secondary);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 12px;
  font-style: italic;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

.testimonial-author-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border-accent-bright);
  background: var(--glow-primary);
}

.testimonial-author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.testimonial-card:hover .testimonial-author-image img {
  filter: grayscale(0%);
}

.testimonial-author-info {
  flex: 1;
}

.author-name {
  color: var(--color-fg);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.author-title {
  color: var(--color-fg-muted);
  font-size: 14px;
  margin-bottom: 2px;
}

.author-company {
  color: var(--color-primary-hover);
  font-size: 14px;
  font-weight: 600;
}

/* Mobile responsiveness for testimonials */
@media (max-width: 768px) {
  #testimonials {
    padding: 60px 0;
  }

  #testimonials .container {
    width: 95%;
    padding: 0 16px;
  }

  #testimonials h2 {
    font-size: 32px;
  }

  .testimonials-intro {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .testimonial-card {
    padding: 20px;
  }

  .testimonial-quote {
    font-size: 14px;
  }

  .testimonial-author-image {
    width: 48px;
    height: 48px;
  }

  .quote-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 12px;
  }
}

/* Call to Action Section */
#call-to-action {
  background-color: var(--color-primary);
  padding: 80px 0;
  color: var(--color-fg);
}

#call-to-action h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.cta-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.pilot-info {
  padding-right: 2rem;
}

.pilot-description {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.pilot-benefits {
  list-style: none;
  margin: 1rem 0;
  font-size: 1.1rem;
}

.pilot-benefits li {
  margin: 0.5rem 0;
}

.consent-text {
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: 1rem;
  padding: 0 1rem;
}

.signup-form {
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}

.signup-form input,
.signup-form select,
.signup-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 1rem;
}

.signup-form input:focus,
.signup-form select:focus,
.signup-form textarea:focus {
  outline: none;
  background: #ffffff;
}

.signup-form textarea {
  resize: vertical;
  min-height: 100px;
}

.pilot-note {
  font-size: 0.9rem;
  margin-top: 1rem;
  opacity: 0.8;
}

/* Call to Action specific overrides */
#call-to-action .cta-button {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  width: 100%;
  text-align: center;
}

#call-to-action .cta-primary {
  background-color: #ffffff;
  color: #22b8d6;
}

#call-to-action .cta-primary:hover {
  background-color: #e5e7eb;
}

@media (max-width: 768px) {
  .cta-content {
    grid-template-columns: 1fr;
  }

  .pilot-info {
    padding-right: 0;
  }

  #call-to-action h2 {
    font-size: 1.75rem;
  }
}

/* Footer */
#footer {
  background-color: var(--color-bg);
  padding: 60px 0;
  color: var(--color-fg-secondary);
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-column {
  flex: 1 1 200px;
}

.footer-column h4 {
  margin-bottom: 20px;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  color: var(--color-fg-muted);
  transition: color 0.3s;
}

.footer-column ul li a:hover {
  color: var(--color-fg);
}

.social-icons a img {
  width: 30px;
  margin-right: 10px;
}

.footer-bottom {
  text-align: center;
}

.footer-bottom p {
  margin-bottom: 10px;
}

.footer-bottom ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-bottom ul li a {
  color: #cccccc;
  transition: color 0.3s;
}

.footer-bottom ul li a:hover {
  color: var(--color-primary);
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .intro-content,
  .features-grid,
  .footer-columns {
    flex-direction: column;
    align-items: center;
  }

  .stats {
    flex-direction: column;
    align-items: center;
  }
}

/* Add this to the Hero Section styles */
#hero canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Optimize animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content {
    padding: 30px 15px;
  }

  .hero-content h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .hero-content p {
    font-size: 18px;
    line-height: 1.4;
  }

  .hero-content .subtitle {
    font-size: 15px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 16px;
    padding: 0 20px;
  }

  .cta-button {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
}

/* Adjust responsive behavior for all section headings */
@media (max-width: 768px) {
  .intro-text h2,
  #features h2,
  #benefits h2 {
    font-size: 36px;
  }
}

/* Blog Carousel Styles */
.blog-carousel {
  background-color: transparent;
  padding: 6rem 0;
  position: relative;
}

.blog-carousel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(43, 205, 238, 0.2),
    transparent
  );
}

.blog-carousel h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--color-fg);
  font-size: 2.5rem;
}

.carousel-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.blog-posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 1rem 0;
}

.blog-card {
  background: #1a2329;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.blog-card:hover {
  box-shadow: 0 6px 25px rgba(0, 180, 216, 0.15);
}

.blog-card-coming-soon {
  background: linear-gradient(135deg, #1a2329 0%, #243038 100%);
  border: 1px solid rgba(0, 180, 216, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.blog-card-coming-soon .blog-card-content {
  padding: 3rem 2rem;
}

.blog-card-coming-soon h3 {
  color: #00b4d8;
  margin-bottom: 1.5rem;
}

.blog-card-coming-soon .blog-excerpt {
  color: #8b97a3;
  max-width: 80%;
  margin: 0 auto;
}

.read-more {
  display: inline-block;
  color: #00b4d8;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: auto;
}

.blog-card:hover .read-more {
  color: var(--color-fg);
}

.blog-card-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #243038;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-content {
  padding: 1.75rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
  color: var(--color-fg);
  line-height: 1.4;
}

.blog-meta {
  font-size: 0.875rem;
  color: #00b4d8;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.blog-excerpt {
  font-size: 1rem;
  color: #a0aec0;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  flex-grow: 1;
}

.read-more {
  display: inline-block;
  color: #00b4d8;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: auto;
}

.read-more:hover {
  color: var(--color-fg);
}

@media (max-width: 768px) {
  .blog-carousel {
    padding: 4rem 0;
  }

  .blog-carousel h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .blog-posts {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .blog-card-image {
    height: 200px;
  }

  .blog-card h3 {
    font-size: 1.25rem;
  }
}

/* Pricing Section */
#pricing {
  background-color: var(--color-bg-deep);
  padding: 80px 0;
  color: var(--color-fg);
}

#pricing h2 {
  color: #e8ebf0;
  font-size: 48px;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.pricing-card {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(31, 41, 55, 0.9);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}

.pricing-highlight {
  background: rgba(255, 255, 255, 0.04);
  padding: 1.5rem;
  border-radius: 10px;
  text-align: center;
  margin: 1rem 0 2rem 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.price {
  display: block;
  font-size: 48px;
  font-weight: 700;
  color: var(--color-fg);
  line-height: 1;
}

.price-description {
  display: block;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.5rem;
}

.pricing-benefits {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem 0;
  color: #cccccc;
}

.pricing-benefits li {
  margin: 0.5rem 0;
}

/* Pricing grid aligned to platform cards */
#pricing .pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.plan-card {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 24px;
  background: rgba(36, 36, 36, 0.5);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan-card:hover {
  border-color: rgba(43, 205, 238, 0.4);
  box-shadow:
    inset 0 0 30px rgba(43, 205, 238, 0.1),
    0 12px 28px rgba(43, 205, 238, 0.2);
}

.plan-card.recommended {
  background: linear-gradient(
    180deg,
    rgba(0, 102, 255, 0.08) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  border: 2px solid var(--color-accent);
  box-shadow:
    0 0 0 1px rgba(43, 205, 238, 0.15),
    0 20px 40px rgba(43, 205, 238, 0.12);
  transform: scale(1.02);
  position: relative;
}

.plan-card.recommended::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.5),
    rgba(94, 234, 212, 0.3),
    rgba(43, 205, 238, 0.5)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  pointer-events: none;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.plan-card.recommended:hover {
  box-shadow:
    inset 0 0 30px rgba(43, 205, 238, 0.15),
    0 0 0 1px rgba(43, 205, 238, 0.3),
    0 12px 28px rgba(43, 205, 238, 0.25);
}

.icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--glow-primary);
  border: 1px solid rgba(43, 205, 238, 0.24);
}

/* Save badge for Bulk */
.save-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  background: #fbbf24; /* solid for readability */
  color: #1a1a1a; /* dark text on bright chip */
  border: 1px solid #f59e0b;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}

/* Trust row */
.trust-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  color: var(--color-fg-muted);
  font-size: 14px;
  margin-top: 20px;
}

.trust-row .dot {
  width: 4px;
  height: 4px;
  background: #374151;
  border-radius: 999px;
}

/* FAQ accordion */
.pricing-faq {
  max-width: 900px;
  margin: 32px auto 0 auto;
}

.pricing-faq details {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
}

.pricing-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #e5e7eb;
}

.pricing-faq p {
  color: var(--color-fg-secondary);
  margin-top: 8px;
  font-size: 14px;
}

.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #22c55e;
  color: var(--color-fg);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.plan-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  min-height: 64px; /* keep headers equal height across plans including subtitle */
}

.plan-header svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.plan-title {
  margin-left: 12px;
  font-size: 20px;
  color: var(--color-fg);
  font-weight: 600;
  flex: 1; /* occupy remaining row width */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* prevent wrap and align cards */
}

.title-stack {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}

.title-stack .plan-title {
  margin-left: 0;
}

.plan-subtitle {
  font-size: 12px;
  color: var(--color-fg-muted);
  line-height: 1.2;
}

/* Icon color alignment per plan (match platform feel) */
/* Increase icon size slightly in pricing for clarity */
#pricing .plan-header svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

.plan-price {
  font-size: 28px;
  font-weight: 700;
  color: #22c55e;
}

.plan-price-note {
  color: #999999;
  font-size: 14px;
  margin-bottom: 12px;
}

.plan-desc {
  color: #cccccc;
  font-size: 14px;
  margin-bottom: 12px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.plan-features li {
  display: flex;
  align-items: center;
  line-height: 1.4;
  color: #cccccc;
  font-size: 14px;
  margin: 8px 0;
}

.plan-features li .check {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  margin-right: 8px;
  flex-shrink: 0;
  line-height: 1;
}

#pricing .cta-button {
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
}

/* Primary buttons in pricing (Get Started) */
#pricing .cta-button.cta-primary {
  background: linear-gradient(
    135deg,
    var(--color-bg-btn) 0%,
    var(--color-bg) 100%
  );
  color: var(--color-fg);
  border-color: var(--border-accent-strong);
  box-shadow:
    0 4px 12px rgba(43, 205, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#pricing .cta-button.cta-primary:hover {
  background: linear-gradient(
    135deg,
    var(--color-bg-btn-hover) 0%,
    var(--color-bg-btn) 100%
  );
  border-color: rgba(43, 205, 238, 0.7);
  box-shadow:
    0 6px 16px rgba(43, 205, 238, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Secondary/default buttons in pricing */
#pricing .cta-button:not(.cta-primary) {
  background: rgba(43, 205, 238, 0.08);
  color: var(--color-accent);
  border-color: rgba(43, 205, 238, 0.25);
}

#pricing .cta-button:not(.cta-primary):hover {
  background: rgba(43, 205, 238, 0.15);
  border-color: rgba(43, 205, 238, 0.4);
  box-shadow: 0 4px 12px rgba(43, 205, 238, 0.15);
}

/* Bottom-align plan CTAs */
.plan-card .cta-button {
  margin-top: auto;
}
/* ===========================
   Cookie Consent Banner
   =========================== */
/* Cookie Consent Overlay */
.cookie-consent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.7) 80%,
    rgba(0, 0, 0, 0.85) 90%,
    rgba(0, 0, 0, 0.95) 100%
  );
  z-index: 9999;
  pointer-events: none;
  animation: overlayFadeIn 0.6s ease-out;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Cookie Consent Banner */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background:
    radial-gradient(
      circle at 50% 100%,
      var(--border-accent) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(94, 234, 212, 0.1) 0%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.98) 0%,
      rgba(17, 24, 39, 0.98) 100%
    );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 2rem 1.5rem;
  box-shadow:
    0 -8px 32px rgba(0, 0, 0, 0.4),
    0 -2px 16px rgba(43, 205, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 10000;
  border-top: 2px solid var(--border-accent-bright);
  animation: bannerSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bannerSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-consent-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cookie-consent-text {
  flex: 1;
  min-width: 250px;
}

.cookie-consent-title {
  color: var(--color-fg);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cookie-consent-description {
  color: var(--color-fg-secondary);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}

.cookie-consent a {
  color: var(--color-primary-hover);
  text-decoration: underline;
  transition: color 0.3s ease;
  font-weight: 600;
}

.cookie-consent a:hover {
  color: var(--color-primary);
}

.cookie-consent-buttons {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 14px 32px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.cookie-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cookie-btn:hover::before {
  opacity: 1;
}

.cookie-btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #22b8d6 100%);
  color: var(--color-fg);
  border-color: rgba(78, 214, 214, 0.5);
  box-shadow:
    0 4px 12px rgba(43, 205, 238, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cookie-btn-primary:hover {
  background: linear-gradient(135deg, #22b8d6 0%, #1d4ed8 100%);
  border-color: rgba(78, 214, 214, 0.7);
  box-shadow:
    0 6px 16px rgba(43, 205, 238, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cookie-btn-primary:active {
  transform: translateY(0);
}

.cookie-btn-secondary {
  background: transparent;
  color: var(--color-fg-secondary);
  border-color: rgba(209, 213, 219, 0.3);
}

.cookie-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(209, 213, 219, 0.5);
  color: var(--color-fg);
}

.cookie-btn-secondary:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .cookie-consent-overlay {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 30%,
      rgba(0, 0, 0, 0.2) 40%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.6) 60%,
      rgba(0, 0, 0, 0.8) 75%,
      rgba(0, 0, 0, 0.95) 100%
    );
  }

  .cookie-consent {
    padding: 1.5rem 1rem;
  }

  .cookie-consent-content {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .cookie-consent-title {
    font-size: 1.05rem;
    justify-content: center;
  }

  .cookie-consent-description {
    font-size: 0.9rem;
  }

  .cookie-consent-buttons {
    width: 100%;
    justify-content: center;
    flex-direction: column;
  }

  .cookie-btn {
    width: 100%;
    padding: 12px 24px;
  }
}

/* Trust Bar (Homepage) */
.trust-bar {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
  padding: 0 20px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  color: var(--color-fg);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.06) 0%,
    rgba(43, 205, 238, 0.02) 100%
  );
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.trust-badge::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(43, 205, 238, 0.2);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.trust-badge:hover {
  border-color: var(--color-accent);
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.12) 0%,
    rgba(43, 205, 238, 0.06) 100%
  );
  box-shadow: 0 4px 12px rgba(43, 205, 238, 0.2);
}

/* ROI and Stats */
.roi-section {
  background-color: var(--color-bg);
  padding: 80px 0;
  position: relative;
}

.roi-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(43, 205, 238, 0.3),
    transparent
  );
}

.roi-section h2 {
  color: #e8ebf0;
  font-size: 48px;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.roi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  max-width: 1000px;
  margin: 0 auto;
}

.stat-block {
  background: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.95) 0%,
    rgba(31, 41, 55, 0.9) 100%
  );
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-block:hover {
  border-color: rgba(43, 205, 238, 0.4);
  box-shadow:
    inset 0 0 30px rgba(43, 205, 238, 0.1),
    0 12px 28px rgba(43, 205, 238, 0.2);
}

.stat-number {
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-accent-dim) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--spacing-sm);
  position: relative;
}

.stat-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-fg);
  margin-bottom: var(--spacing-xs);
}

.stat-detail {
  font-size: 14px;
  color: var(--color-muted);
}

/* Trust Center Page */
.trust-center-hero {
  background-color: var(--color-bg);
  padding: 140px 0 80px; /* Increased top padding for header + announcement banner */
  text-align: center;
  position: relative;
  overflow: hidden;
}

.trust-center-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(43, 205, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 205, 238, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  pointer-events: none;
}

.trust-center-hero .container {
  position: relative;
  z-index: 1;
}

.trust-center-hero h1 {
  color: var(--color-fg);
  font-size: 48px;
  margin-bottom: 20px;
}

.trust-center-hero .subtitle {
  font-size: 20px;
  color: var(--color-muted);
  max-width: 800px;
  margin: 0 auto;
}

.trust-center-content {
  background-color: var(--color-bg);
  padding: 60px 0;
}

.trust-center-content .container {
  max-width: 900px;
}

.trust-center-content h2 {
  color: var(--color-accent);
  font-size: 32px;
  margin-top: 60px;
  margin-bottom: 20px;
}

.trust-center-content h3 {
  color: var(--color-fg);
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 15px;
}

.trust-center-content p,
.trust-center-content li {
  color: var(--color-muted);
  line-height: 1.8;
  margin-bottom: 15px;
}

.trust-center-content ul {
  padding-left: 20px;
}

.trust-center-content ul li {
  margin-bottom: 10px;
}

.trust-center-badges {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0;
}

.trust-center-contact {
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.08) 0%,
    rgba(31, 41, 55, 0.9) 100%
  );
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(43, 205, 238, 0.15);
}

.trust-center-contact::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(43, 205, 238, 0.12) 0%,
    transparent 60%
  );
  animation: rotate 25s linear infinite;
  pointer-events: none;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.trust-center-contact > * {
  position: relative;
  z-index: 1;
}

.trust-center-contact h3 {
  margin-top: 0;
  color: var(--color-fg);
}

.trust-center-contact p {
  margin: 12px 0;
}

.trust-center-contact a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-block;
  padding: 10px 20px;
  margin-top: 8px;
  background: rgba(43, 205, 238, 0.1);
  border-radius: 6px;
  border: 1px solid var(--border-accent-bright);
}

.trust-center-contact a:hover {
  background: var(--color-accent);
  color: white;
  box-shadow: 0 6px 16px rgba(43, 205, 238, 0.3);
  border-color: var(--color-accent);
}

.trust-center-faq {
  margin-top: 60px;
}

.trust-center-faq details {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 10px;
}

.trust-center-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-fg);
}

.trust-center-faq p {
  margin-top: 8px;
  font-size: 14px;
}

/* Announcement Banner - Premium Peec Style */
.announcement-banner {
  position: fixed;
  top: 64px; /* Will be dynamically adjusted by JavaScript */
  left: 0;
  width: 100%;
  height: 48px; /* Fixed height for the bar */
  z-index: 998; /* Just below navbar (z-index: 999) */
  background-color: transparent;
  border-bottom: none;
  border-radius: 0; /* Sharp rectangle */
  box-shadow: none;
  display: flex;
  align-items: center;
}

.announcement-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px; /* Horizontal padding */
  height: 100%;
  display: flex;
  gap: 12px; /* Gap between pills */
  align-items: center;
  justify-content: center;
}

.announcement-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px; /* Vertical padding 8px, adjusted for 48px height */
  border-radius: 40px; /* True pill shape */
  text-decoration: none;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  background: transparent; /* Transparent by default */
  color: var(--color-fg); /* White text */
}

.announcement-pill-scarcity {
  position: relative;
  padding-left: 32px; /* Space for red dot */
  color: var(--color-fg);
}

.announcement-pill-scarcity:hover {
  background-color: var(--color-primary); /* Primary blue on hover */
  color: var(--color-fg);
}

.announcement-pill-cta {
  color: #00d1ff; /* Cyan accent color */
}

.announcement-pill-cta:hover {
  background-color: var(--color-primary); /* Primary blue on hover */
  color: var(--color-fg);
  text-decoration: underline; /* Underline on hover */
}

.announcement-pill-combined {
  position: relative;
  padding-left: 32px; /* Space for red dot */
  color: var(--color-fg);
  background: transparent;
  backdrop-filter: blur(10px);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* Animated gradient border using pseudo-element with mask */
.announcement-pill-combined::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px; /* Match pill shape */
  padding: 2px;
  background: linear-gradient(
    90deg,
    rgba(43, 205, 238, 0.3) 0%,
    rgba(78, 214, 214, 0.8) 12.5%,
    rgba(139, 92, 246, 0.6) 25%,
    rgba(78, 214, 214, 0.8) 37.5%,
    rgba(43, 205, 238, 0.3) 50%,
    rgba(78, 214, 214, 0.8) 62.5%,
    rgba(139, 92, 246, 0.6) 75%,
    rgba(78, 214, 214, 0.8) 87.5%,
    rgba(43, 205, 238, 0.3) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 0%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: borderFlowSmooth 3s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.announcement-pill-combined:hover {
  background: rgba(78, 214, 214, 0.1);
  color: var(--color-fg);
  box-shadow: 0 4px 12px rgba(78, 214, 214, 0.15);
}

.announcement-pill-combined:hover::before {
  animation: borderFlowSmooth 1.5s linear infinite;
  opacity: 1;
}

.red-dot {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #ff3333; /* Red dot color */
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1.1);
  }
}

.pill-text {
  display: inline-block;
}

/* Mobile Styles for Announcement Banner */
@media (max-width: 768px) {
  .announcement-banner {
    height: auto; /* Auto height for wrapping text */
    min-height: 48px;
    top: 64px; /* Adjust based on mobile navbar height */
  }

  .announcement-container {
    flex-direction: column; /* Stack vertically */
    padding: 8px 16px;
    gap: 8px;
    height: auto;
    justify-content: center;
  }

  .announcement-pill {
    width: 100%; /* Full width on mobile */
    justify-content: center;
    white-space: normal; /* Allow text wrapping on mobile */
    padding: 8px 16px; /* Reduced horizontal padding */
    font-size: 13px; /* Slightly smaller font on mobile */
    line-height: 1.4; /* Better line height for wrapped text */
    text-align: center;
  }

  .announcement-pill-scarcity,
  .announcement-pill-combined {
    padding-left: 28px;
    white-space: normal; /* Allow text wrapping */
  }

  .pill-text {
    display: inline; /* Allow wrapping */
    word-break: break-word; /* Break long words if needed */
  }

  .red-dot {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Small mobile devices */
@media (max-width: 640px) {
  .announcement-container {
    padding: 8px 12px;
  }

  .announcement-pill {
    font-size: 12px;
    padding: 6px 12px;
  }

  .announcement-pill-scarcity,
  .announcement-pill-combined {
    padding-left: 24px;
  }

  .red-dot {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
  }
}

/* Announcement Banner - Premium Peec Style */
.announcement-banner {
  position: fixed;
  top: 64px; /* Will be dynamically adjusted by JavaScript */
  left: 0;
  width: 100%;
  height: 48px; /* Fixed height for the bar */
  z-index: 998; /* Just below navbar (z-index: 999) */
  background-color: transparent;
  border-bottom: none;
  border-radius: 0; /* Sharp rectangle */
  box-shadow: none;
  display: flex;
  align-items: center;
}

.announcement-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px; /* Horizontal padding */
  height: 100%;
  display: flex;
  gap: 12px; /* Gap between pills */
  align-items: center;
  justify-content: center;
}

.announcement-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px; /* Vertical padding 8px, adjusted for 48px height */
  border-radius: 40px; /* True pill shape */
  text-decoration: none;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  background: transparent; /* Transparent by default */
  color: var(--color-fg); /* White text */
}

.announcement-pill-scarcity {
  position: relative;
  padding-left: 32px; /* Space for red dot */
  color: var(--color-fg);
}

.announcement-pill-scarcity:hover {
  background-color: var(--color-primary); /* Primary blue on hover */
  color: var(--color-fg);
}

.announcement-pill-cta {
  color: #00d1ff; /* Cyan accent color */
}

.announcement-pill-cta:hover {
  background-color: var(--color-primary); /* Primary blue on hover */
  color: var(--color-fg);
  text-decoration: underline; /* Underline on hover */
}

.announcement-pill-combined {
  position: relative;
  padding-left: 32px; /* Space for red dot */
  color: var(--color-fg);
  background: transparent;
  backdrop-filter: blur(10px);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* Animated gradient border using pseudo-element with mask */
.announcement-pill-combined::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px; /* Match pill shape */
  padding: 2px;
  background: linear-gradient(
    90deg,
    rgba(43, 205, 238, 0.3) 0%,
    rgba(78, 214, 214, 0.8) 12.5%,
    rgba(139, 92, 246, 0.6) 25%,
    rgba(78, 214, 214, 0.8) 37.5%,
    rgba(43, 205, 238, 0.3) 50%,
    rgba(78, 214, 214, 0.8) 62.5%,
    rgba(139, 92, 246, 0.6) 75%,
    rgba(78, 214, 214, 0.8) 87.5%,
    rgba(43, 205, 238, 0.3) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 0%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: borderFlowSmooth 3s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.announcement-pill-combined:hover {
  background: rgba(78, 214, 214, 0.1);
  color: var(--color-fg);
  box-shadow: 0 4px 12px rgba(78, 214, 214, 0.15);
}

.announcement-pill-combined:hover::before {
  animation: borderFlowSmooth 1.5s linear infinite;
  opacity: 1;
}

.red-dot {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #ff3333; /* Red dot color */
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1.1);
  }
}

.pill-text {
  display: inline-block;
}

/* Mobile Styles for Announcement Banner */
@media (max-width: 768px) {
  .announcement-banner {
    height: auto; /* Auto height for wrapping text */
    min-height: 48px;
    top: 64px; /* Adjust based on mobile navbar height */
  }

  .announcement-container {
    flex-direction: column; /* Stack vertically */
    padding: 8px 16px;
    gap: 8px;
    height: auto;
    justify-content: center;
  }

  .announcement-pill {
    width: 100%; /* Full width on mobile */
    justify-content: center;
    white-space: normal; /* Allow text wrapping on mobile */
    padding: 8px 16px; /* Reduced horizontal padding */
    font-size: 13px; /* Slightly smaller font on mobile */
    line-height: 1.4; /* Better line height for wrapped text */
    text-align: center;
  }

  .announcement-pill-scarcity,
  .announcement-pill-combined {
    padding-left: 28px;
    white-space: normal; /* Allow text wrapping */
  }

  .pill-text {
    display: inline; /* Allow wrapping */
    word-break: break-word; /* Break long words if needed */
  }

  .red-dot {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Small mobile devices */
@media (max-width: 640px) {
  .announcement-container {
    padding: 8px 12px;
  }

  .announcement-pill {
    font-size: 12px;
    padding: 6px 12px;
  }

  .announcement-pill-scarcity,
  .announcement-pill-combined {
    padding-left: 24px;
  }

  .red-dot {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
  }
}

/* ======================================================================
   Shared components & enhancements
   ====================================================================== */

/* ==========================================================================
   Website Enhancement Styles
   Added: January 2026
   Features: Carousels, Animations, Popup, Logo Marquee
   ========================================================================== */

/* ===== HERO SECTION LAYOUT ===== */
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-2xl);
}

.hero-text-content {
  text-align: center;
  max-width: 900px;
  margin-top: 0; /* Reset on desktop */
}

.hero-text-content h1,
.hero-text-content p,
.hero-text-content .hero-buttons {
  /* These are already styled in main styles.css */
}

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

/* Hero tagline - appears between headline and description */
.hero-tagline {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--color-fg-muted) !important;
  margin: -10px auto 20px !important;
  font-style: italic;
  letter-spacing: 0.5px;
}

/* ===== HERO CAROUSEL (Below Text) ===== */
.hero-carousel-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
}

.hero-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 20px 60px var(--shadow-dark);
  border: 1px solid rgba(43, 205, 238, 0.2);
}

.carousel-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 20px; /* Add padding to prevent edge clipping */
}

.carousel-slide.active {
  opacity: 1;
  z-index: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Changed from 'cover' to 'contain' to prevent clipping */
  border-radius: 8px;
}

/* Very strong blur/vignette effect on carousel edges */
.hero-carousel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: 12px;
  box-shadow:
    inset 0 0 80px 30px rgba(0, 0, 0, 0.9),
    inset 0 0 40px 15px rgba(0, 0, 0, 0.7);
}

/* Screenshot overlay text - positioned next to dots */
.hero-carousel-container {
  position: relative;
}

.carousel-slide::after {
  content: attr(data-title);
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 180px; /* Position to right of dots */
  color: var(--color-fg);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 100;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.5),
    0 2px 6px rgba(0, 0, 0, 1),
    0 1px 3px rgba(0, 0, 0, 1);
}

/* Hero carousel arrows - hidden for cleaner design (carousel auto-rotates) */
.carousel-arrow {
  display: none;
}

.carousel-prev {
  left: 20px;
}

.carousel-next {
  right: 20px;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 2;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* ===== BENEFITS CAROUSEL ===== */
.benefits-carousel {
  position: relative;
  margin-top: var(--space-2xl);
  padding: 0; /* No padding needed - arrows removed */
}

.benefits-slides {
  position: relative;
  min-height: 500px;
  overflow: hidden; /* Keep overflow on slides, not carousel */
}

.benefit-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.benefit-slide.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}

/* Benefits carousel arrows - hidden for cleaner design (carousel auto-rotates) */
.benefits-arrow {
  display: none;
}

.benefits-prev {
  left: 10px;
}

.benefits-next {
  right: 10px;
}

.benefits-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: var(--space-2xl);
}

.benefit-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(43, 205, 238, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.benefit-dot.active {
  background: var(--color-primary);
  transform: scale(1.2);
  box-shadow: 0 0 16px rgba(43, 205, 238, 0.6);
}

.benefit-dot:hover {
  background: rgba(43, 205, 238, 0.6);
  transform: scale(1.1);
}

/* ===== TESTIMONIAL COMPANY LOGOS ===== */
.author-company {
  margin-top: 8px;
}

.author-company .company-logo {
  height: 24px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  filter: grayscale(100%) brightness(0.8);
}

/* Gameforge logo needs to be larger due to padding in PNG */
.author-company .company-logo[src*="gameforge"] {
  height: 30px;
  max-width: 200px;
}

.testimonial-card:hover .company-logo {
  opacity: 0.9;
}

/* Fallback text styling if logo fails to load */
.author-company span {
  color: var(--color-fg-muted);
  font-size: 13px;
  font-weight: 500;
}

/* ===== PROCESS VISUAL (SIMPLIFIED INTRODUCTION) ===== */
.process-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: var(--space-2xl) 0;
  flex-wrap: wrap;
}

.process-step {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(43, 205, 238, 0.08) 0%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      rgba(31, 41, 55, 0.95) 0%,
      rgba(31, 41, 55, 0.9) 100%
    );
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  transition: all 0.4s ease;
}

.process-step:hover {
  border-color: rgba(43, 205, 238, 0.4);
  box-shadow: 0 12px 28px rgba(43, 205, 238, 0.2);
}

.step-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 20px;
  background: transparent;
  border: 2px solid var(--border-accent-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step h4 {
  color: var(--color-fg);
  font-size: 20px;
  margin-bottom: 12px;
}

.process-step p {
  color: var(--color-fg-muted);
  font-size: 15px;
  line-height: 1.5;
}

.process-arrow {
  font-size: 36px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ===== RESEARCH BADGE ===== */
.research-badge {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: var(--space-xl);
  margin-top: var(--space-2xl);
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(43, 205, 238, 0.1) 0%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      rgba(31, 41, 55, 0.95) 0%,
      rgba(31, 41, 55, 0.9) 100%
    );
  border: 2px solid var(--border-accent-bright);
  border-radius: 16px;
  transition: all 0.4s ease;
}

.research-badge:hover {
  border-color: var(--border-accent-strong);
  box-shadow: 0 12px 32px rgba(43, 205, 238, 0.25);
}

.badge-icon {
  font-size: 48px;
  flex-shrink: 0;
}

.badge-text strong {
  display: block;
  color: var(--color-fg);
  font-size: 20px;
  margin-bottom: 8px;
}

.badge-text p {
  color: var(--color-fg-muted);
  font-size: 15px;
  margin: 0;
  line-height: 1.5;
}

/* ===== EXIT-INTENT POPUP ===== */
#exit-intent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#exit-intent-popup {
  background: linear-gradient(
    135deg,
    var(--color-bg-card-solid) 0%,
    var(--color-bg) 100%
  );
  border: 2px solid rgba(43, 205, 238, 0.4);
  border-radius: 20px;
  padding: var(--space-2xl) var(--space-2xl);
  max-width: 550px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 60px rgba(43, 205, 238, 0.3);
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#exit-popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--color-fg-muted);
  font-size: 32px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

#exit-popup-close:hover {
  background: var(--border-subtle);
  color: white;
  transform: rotate(90deg);
}

.exit-popup-icon {
  font-size: 64px;
  text-align: center;
  margin-bottom: 20px;
}

.exit-popup-content h3 {
  color: var(--color-fg);
  font-size: 28px;
  text-align: center;
  margin-bottom: 12px;
  font-weight: 700;
}

.exit-popup-subtitle {
  color: var(--color-fg-muted);
  text-align: center;
  font-size: 16px;
  margin-bottom: 30px;
}

.exit-popup-benefits {
  margin-bottom: 30px;
}

.exit-benefit {
  color: var(--color-fg-secondary);
  font-size: 15px;
  margin-bottom: 12px;
  padding-left: 30px;
  position: relative;
}

.exit-benefit::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: 700;
  font-size: 18px;
}

.exit-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.exit-popup-button {
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  display: block;
}

.exit-popup-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #06b6d4 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(43, 205, 238, 0.3);
}

.exit-popup-primary:hover {
  box-shadow: 0 8px 24px rgba(43, 205, 238, 0.5);
}

.exit-popup-secondary {
  background: rgba(43, 205, 238, 0.1);
  color: var(--color-primary);
  border: 2px solid var(--border-accent-bright);
}

.exit-popup-secondary:hover {
  background: rgba(43, 205, 238, 0.2);
  border-color: rgba(43, 205, 238, 0.5);
}

.exit-popup-button:active {
  transform: translateY(0);
}

.exit-popup-privacy {
  color: #64748b;
  font-size: 13px;
  text-align: center;
  margin: 0;
}

/* ===== RESPONSIVE HERO FIX ===== */
/* Since we're using stacked layout, we need to remove 100vh constraint on all screen sizes */
/* Otherwise the content (text + carousel) can be taller than viewport and get cut off */

/* Apply to all screens up to large desktop */
@media (max-width: 1600px) {
  #hero {
    height: auto !important; /* Remove 100vh constraint */
    min-height: 100vh !important; /* Still fill screen but allow overflow */
    padding-top: 140px !important; /* Space for header + announcement */
    padding-bottom: var(--space-4xl);
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .hero-content {
    margin-top: 0 !important;
  }

  /* Fix canvas aspect ratio - keep it at viewport height, not hero section height */
  #hero canvas {
    height: 100vh !important; /* Lock to viewport height to prevent ellipse distortion */
  }
}

/* Medium screens - adjust carousel size */
@media (max-width: 1024px) {
  .hero-content {
    gap: 40px;
    padding: var(--space-md);
  }

  .hero-carousel-container {
    max-width: 800px;
  }
}

@media (max-width: 768px) {
  #hero {
    padding-top: 120px !important; /* Less padding on smaller screens */
  }

  .hero-carousel-container {
    max-width: 600px;
  }

  .carousel-arrow {
    width: 40px;
    height: 40px;
    font-size: 30px;
  }

  .carousel-prev {
    left: 10px;
  }

  .carousel-next {
    right: 10px;
  }

  /* Benefits carousel - reduce padding on mobile */
  .benefits-carousel {
    padding: 0 var(--space-2xl);
  }

  .process-visual {
    flex-direction: column;
    gap: 20px;
  }

  .process-arrow {
    transform: rotate(90deg);
    font-size: 28px;
  }

  .research-badge {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
  }

  .badge-icon {
    font-size: 40px;
  }

  .benefits-prev {
    left: -15px;
  }

  .benefits-next {
    right: -15px;
  }

  .benefits-arrow {
    width: 40px;
    height: 40px;
    font-size: 28px;
  }

  #exit-intent-popup {
    padding: var(--space-2xl) var(--space-xl);
  }

  .exit-popup-content h3 {
    font-size: 24px;
  }

  .exit-popup-icon {
    font-size: 48px;
  }
}

/* ===== HIDE PROCESS ARROW ON VERY SMALL SCREENS ===== */
@media (max-width: 500px) {
  .process-arrow {
    display: none;
  }
}

/* ===== FINAL CTA SECTION ===== */
.final-cta-section {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(43, 205, 238, 0.15) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-card-solid) 100%);
  padding: var(--space-4xl) 0;
  margin: var(--space-4xl) 0 0;
  border-top: 1px solid rgba(43, 205, 238, 0.2);
  position: relative;
  overflow: hidden;
}

.final-cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(43, 205, 238, 0.5),
    transparent
  );
}

.final-cta-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.final-cta-text h2 {
  color: var(--color-fg);
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

.final-cta-text p {
  color: var(--color-fg-muted);
  font-size: 20px;
  margin-bottom: 40px;
  line-height: 1.5;
}

.cta-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.cta-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stat-number {
  color: var(--color-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  color: var(--color-fg-muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.final-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-primary-large,
.btn-secondary-large {
  padding: 18px 36px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

.btn-primary-large {
  background: linear-gradient(135deg, var(--color-primary) 0%, #06b6d4 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(43, 205, 238, 0.3);
}

.btn-primary-large:hover {
  box-shadow: 0 12px 32px rgba(43, 205, 238, 0.4);
}

.btn-secondary-large {
  background: rgba(43, 205, 238, 0.1);
  color: var(--color-primary);
  border: 2px solid var(--border-accent-bright);
}

.btn-secondary-large:hover {
  background: rgba(43, 205, 238, 0.2);
  border-color: rgba(43, 205, 238, 0.5);
}

.btn-primary-large:active,
.btn-secondary-large:active {
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .final-cta-section {
    padding: var(--space-3xl) var(--space-md);
    margin: var(--space-3xl) 0 0;
  }

  .final-cta-text h2 {
    font-size: 32px;
  }

  .final-cta-text p {
    font-size: 18px;
  }

  .cta-stats {
    gap: 40px;
  }

  .stat-number {
    font-size: 28px;
  }

  .final-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary-large,
  .btn-secondary-large {
    width: 100%;
    text-align: center;
  }
}

/* ===== ENHANCED ANIMATIONS ===== */

/* Staggered fade-in for cards */
.feature:nth-child(1) {
  animation-delay: 0ms;
}
.feature:nth-child(2) {
  animation-delay: 100ms;
}
.feature:nth-child(3) {
  animation-delay: 200ms;
}
.feature:nth-child(4) {
  animation-delay: 300ms;
}

.testimonial-card:nth-child(1) {
  animation-delay: 0ms;
}
.testimonial-card:nth-child(2) {
  animation-delay: 150ms;
}
.testimonial-card:nth-child(3) {
  animation-delay: 300ms;
}

.plan-card:nth-child(1) {
  animation-delay: 0ms;
}
.plan-card:nth-child(2) {
  animation-delay: 200ms;
}
.plan-card:nth-child(3) {
  animation-delay: 400ms;
}

/* Enhanced hover effects */
.feature {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature:hover {
  box-shadow: 0 20px 40px rgba(43, 205, 238, 0.25);
}

.testimonial-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card:hover {
  border-color: var(--border-accent-strong);
  box-shadow: 0 12px 32px rgba(43, 205, 238, 0.2);
}

.plan-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-card:hover {
  box-shadow: 0 20px 40px rgba(43, 205, 238, 0.25);
}

/* Button press effect */
.btn,
.hero-buttons a,
.cta-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:active,
.hero-buttons a:active,
.cta-button:active {
  transform: scale(0.97);
}

/* Logo pulse on hover */
.company-logo {
  transition: all 0.3s ease;
}

.company-logo:hover {
  animation: logoPulse 0.6s ease;
}

@keyframes logoPulse {
  0%,
  100% {
    transform: scale(1);
    filter: grayscale(100%) brightness(0.8);
  }
  50% {
    transform: scale(1.08);
    filter: grayscale(0%) brightness(1);
  }
}

/* Process step animations */
.process-step {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step:hover .step-icon {
  transform: scale(1.15);
  border-color: var(--color-primary);
  background: rgba(43, 205, 238, 0.1);
  box-shadow: 0 0 0 4px rgba(43, 205, 238, 0.1);
}

/* Benefit items subtle lift */
.benefit-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-item:hover {
  transform: translateX(8px);
}

/* Stats block number emphasis */
.stat-block {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-block:hover {
  transform: scale(1.05);
}

/* Carousel dots enhanced interaction */
.dot,
.benefit-dot {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dot:hover,
.benefit-dot:hover {
  transform: scale(1.4);
}

/* Research badge enhanced hover */
.research-badge {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.research-badge:hover .badge-icon {
  transform: rotate(15deg) scale(1.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ANNOUNCEMENT BENCHMARK PILL ===== */
.announcement-pill-benchmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  color: var(--color-fg);
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.12) 0%,
    rgba(94, 234, 212, 0.08) 100%
  );
  backdrop-filter: blur(10px);
  border-radius: 40px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(43, 205, 238, 0.25);
}

.announcement-pill-benchmark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-primary-light),
    var(--color-primary)
  );
  background-size: 200% 100%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.announcement-pill-benchmark:hover {
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.2) 0%,
    rgba(94, 234, 212, 0.12) 100%
  );
  box-shadow: 0 4px 16px rgba(43, 205, 238, 0.2);
}

.announcement-pill-benchmark:hover::before {
  opacity: 1;
  animation: borderFlowSmooth 2s linear infinite;
}

.announcement-pill-benchmark .benchmark-dot {
  width: 8px;
  height: 8px;
  background: var(--color-primary-light);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

.announcement-pill-benchmark .pill-text {
  color: #e5e7eb;
}

.announcement-pill-benchmark .pill-cta {
  color: var(--color-rose);
  font-weight: 600;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.announcement-pill-benchmark:hover .pill-cta {
  color: #ff7285;
}

@media (max-width: 768px) {
  .announcement-pill-benchmark {
    padding: 10px 16px;
    font-size: 13px;
    gap: 10px;
  }

  .announcement-pill-benchmark .pill-cta {
    display: none;
  }
}

@media (max-width: 480px) {
  .announcement-pill-benchmark {
    font-size: 12px;
    padding: 8px 14px;
  }

  .announcement-pill-benchmark .benchmark-dot {
    width: 6px;
    height: 6px;
  }
}

/* ===== BENCHMARK SECTION ===== */
.benchmark-section {
  padding: var(--space-4xl) 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) 100%);
}

.benchmark-card {
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.08) 0%,
    rgba(94, 234, 212, 0.04) 100%
  );
  border: 1px solid rgba(43, 205, 238, 0.2);
  border-radius: 24px;
  padding: var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.benchmark-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 100%
  );
}

.benchmark-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.benchmark-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(43, 205, 238, 0.2);
  border: 1px solid var(--border-accent-bright);
  border-radius: 20px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.benchmark-section h2 {
  font-size: 36px;
  color: #f9fafb;
  margin-bottom: 16px;
}

.benchmark-lead {
  font-size: 18px;
  color: var(--color-fg-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
}

.benchmark-lead strong {
  color: var(--color-primary-light);
}

.benchmark-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.benchmark-stat {
  text-align: center;
}

.benchmark-stat-number {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.benchmark-stat-label {
  font-size: 13px;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.benchmark-note {
  font-size: 14px;
  color: var(--color-fg-muted);
  margin-bottom: 28px;
}

.benchmark-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--color-primary);
  color: var(--color-fg);
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.benchmark-cta:hover {
  background: #22b8d6;
  box-shadow: 0 8px 24px rgba(43, 205, 238, 0.3);
}

@media (max-width: 768px) {
  .benchmark-section {
    padding: var(--space-3xl) 0;
  }

  .benchmark-card {
    padding: var(--space-xl) var(--space-lg);
    border-radius: 16px;
  }

  .benchmark-section h2 {
    font-size: 28px;
  }

  .benchmark-lead {
    font-size: 16px;
  }

  .benchmark-stats {
    flex-direction: column;
    gap: 24px;
  }

  .benchmark-stat-number {
    font-size: 28px;
  }
}

/* ============================================
   Case Studies / "See SQUR in Action" Section
   ============================================ */
.case-studies-section {
  padding: var(--space-4xl) 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) 100%);
  position: relative;
}

.case-studies-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(43, 205, 238, 0.3),
    transparent
  );
}

.case-studies-section h2 {
  font-size: 36px;
  color: #f9fafb;
  margin-bottom: 12px;
  text-align: center;
}

.case-studies-intro {
  font-size: 17px;
  color: var(--color-fg-muted);
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.6;
}

.case-studies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.case-study-card {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.9) 0%,
    rgba(15, 23, 42, 0.7) 100%
  );
  border-radius: 20px;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

/* Gradient border via pseudo-element */
.case-study-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.4) 0%,
    rgba(6, 182, 212, 0.15) 50%,
    rgba(139, 92, 246, 0.25) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Top accent line */
.case-study-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transition: opacity 0.4s ease;
}

.case-study-card--vuln::after {
  background: linear-gradient(90deg, #f97316 0%, #f59e0b 100%);
}

.case-study-card--fp::after {
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
}

.case-study-card:hover {
  border-color: rgba(43, 205, 238, 0.4);
  box-shadow:
    inset 0 0 30px rgba(43, 205, 238, 0.1),
    0 0 30px rgba(43, 205, 238, 0.08);
}

.case-study-card:hover::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(43, 205, 238, 0.6) 0%,
    rgba(6, 182, 212, 0.3) 50%,
    rgba(139, 92, 246, 0.4) 100%
  );
}

/* Badge */
.cs-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  width: fit-content;
}

.cs-badge--high {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.cs-badge--fp {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Card title */
.cs-title {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.35;
  margin-bottom: 12px;
}

/* Card description */
.cs-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #94a3b8;
  margin-bottom: 24px;
  flex: 1;
}

/* Stats row inside card */
.cs-stats {
  display: flex;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06); /* intentionally lower opacity than --border-subtle */
  margin-bottom: 20px;
}

.cs-stat {
  text-align: center;
  flex: 1;
}

.cs-stat-value {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.case-study-card--vuln .cs-stat-value {
  color: var(--color-primary);
}

.case-study-card--fp .cs-stat-value {
  color: #10b981;
}

.cs-stat-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Read link */
.cs-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition:
    gap 0.3s ease,
    color 0.3s ease;
}

.case-study-card:hover .cs-link {
  gap: 10px;
  color: var(--color-primary-hover);
}

/* Responsive */
@media (max-width: 768px) {
  .case-studies-section {
    padding: var(--space-3xl) 0;
  }

  .case-studies-section h2 {
    font-size: 28px;
  }

  .case-studies-intro {
    font-size: 15px;
    margin-bottom: 32px;
  }

  .case-studies-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .case-study-card {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
  }

  .cs-title {
    font-size: 18px;
  }

  .cs-stats {
    gap: 12px;
  }

  .cs-stat-value {
    font-size: 18px;
  }
}

/* ============================================
   Case Study Detail Page Styles
   ============================================ */
.case-study-page {
  padding-top: 0; /* zone-hero above provides nav spacing */
  background: var(--color-bg);
  min-height: 100vh;
}

.case-study-page .showcase-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-4xl);
}

/* Breadcrumb for case study pages */
.cs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  font-size: 13px;
}

.cs-breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.cs-breadcrumb a:hover {
  color: var(--color-primary);
}

.cs-breadcrumb .separator {
  color: #475569;
}

.cs-breadcrumb .current {
  color: #94a3b8;
}

/* Back to main site CTA at bottom of case study pages */
.cs-back-cta {
  margin-top: var(--space-3xl);
  padding: var(--space-xl);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(43, 205, 238, 0.2);
  border-radius: 16px;
  text-align: center;
}

.cs-back-cta p {
  font-size: 16px;
  color: #cbd5e1;
  margin-bottom: 20px;
}

.cs-back-cta .btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--color-primary);
  color: var(--color-fg);
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
}

.cs-back-cta .btn:hover {
  background: #22b8d6;
  box-shadow: 0 8px 24px rgba(43, 205, 238, 0.3);
}

/* ======================================================================
   Homepage-specific (scoped to body.hp / .hp-*)
   ====================================================================== */

/* ==========================================================================
   SQUR Homepage Styles - Tailwind CDN Replacement
   Created: 2026-03-26
   Purpose: Replace all Tailwind utility classes on index.html with semantic CSS
   Uses design tokens from styles.css :root
   ========================================================================== */

/* ==========================================================================
   1. BASE / BODY
   ========================================================================== */
body.hp {
  background: var(--color-bg);
  font-family: var(--font-body);
  color: #cbd5e1; /* slate-300 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.hp ::selection {
  background: rgba(43, 205, 238, 0.3);
}

/* ==========================================================================
   2. LAYOUT UTILITIES
   ========================================================================== */
.hp-container {
  max-width: 80rem; /* max-w-7xl */
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.hp-container-sm {
  max-width: 56rem; /* max-w-4xl */
  margin-inline: auto;
}

.hp-container-narrow {
  max-width: 42rem; /* max-w-2xl */
  margin-inline: auto;
}

/* ==========================================================================
   3. NAVIGATION
   ========================================================================== */
.hp-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(16, 31, 34, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hp-nav-bar {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  height: 5rem; /* h-20 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hp-logo {
  height: 26px;
  width: auto;
}

.hp-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

.hp-nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hp-btn-login {
  display: none;
  padding: 0.5rem 1.25rem;
  border: 1px solid rgba(236, 85, 103, 0.35);
  background: rgba(236, 85, 103, 0.06);
  color: var(--color-rose);
  font-weight: 700;
  border-radius: var(--radius-xl);
  transition: all 0.3s;
  font-size: 0.875rem;
  text-decoration: none;
}

.hp-btn-login:hover {
  border-color: rgba(236, 85, 103, 0.65);
  background: rgba(236, 85, 103, 0.12);
  color: #ff7285;
}

.hp-btn-demo-nav {
  display: none;
  padding: 0.625rem 1.5rem;
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: 700;
  border-radius: var(--radius-xl);
  transition: all 0.3s;
  font-size: 0.875rem;
  text-decoration: none;
}

.hp-btn-demo-nav:hover {
  background: var(--color-primary-hover);
}

.hp-btn-scan-nav {
  display: none;
  padding: 0.625rem 1.5rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-teal));
  color: #000;
  font-weight: 700;
  border-radius: var(--radius-xl);
  transition: all 0.3s;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.hp-btn-scan-nav:hover {
  opacity: 0.88;
}

/* Hamburger */
.hp-hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.hp-hamburger span {
  width: 1.5rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.3s;
}

/* Mobile menu */
.hp-mobile-menu {
  display: none;
  flex-direction: column;
  background: rgba(16, 31, 34, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  gap: 1rem;
}

.hp-mobile-menu.open {
  display: flex;
}

.hp-mobile-menu a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  padding-block: 0.5rem;
  text-decoration: none;
}

.hp-mobile-actions {
  display: flex;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hp-mobile-actions a {
  flex: 1;
  text-align: center;
  padding-block: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  text-decoration: none;
}

.hp-mobile-btn-login {
  border: 1px solid rgba(236, 85, 103, 0.35);
  background: rgba(236, 85, 103, 0.06);
  color: var(--color-rose);
}

.hp-mobile-btn-scan {
  background: linear-gradient(135deg, var(--color-primary), var(--color-teal));
  color: #000;
}

.hp-mobile-btn-demo {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* Nav dropdown */
button.hp-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.hp-dropdown-text {
  font-size: 0.875rem;
  font-weight: 600;
}

.hp-dropdown-subtext {
  font-size: 0.75rem;
  color: #64748b; /* slate-500 */
}

/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */
.hp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 5rem;
  overflow: hidden;
}

.hp-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(43, 205, 238, 0.1),
    rgba(43, 205, 238, 0.03),
    transparent
  );
}

/* Orb sizing */
.hp-orb-700 {
  width: 700px;
  height: 700px;
}
.hp-orb-600 {
  width: 600px;
  height: 600px;
}
.hp-orb-500 {
  width: 500px;
  height: 500px;
}
.hp-orb-400 {
  width: 400px;
  height: 400px;
}
.hp-orb-350 {
  width: 350px;
  height: 350px;
}
.hp-orb-300 {
  width: 300px;
  height: 300px;
}
.hp-orb-800x500 {
  width: 800px;
  height: 500px;
}
.hp-orb-600x500 {
  width: 600px;
  height: 500px;
}
.hp-orb-500x400 {
  width: 500px;
  height: 400px;
}
.hp-orb-600x300 {
  width: 600px;
  height: 300px;
}

.hp-hero-grid {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 6rem;
}

/* Hero badge */
.hp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(236, 85, 103, 0.35);
  background: rgba(236, 85, 103, 0.06);
}

.hp-hero-badge .material-symbols-outlined {
  color: var(--color-rose);
}

.hp-hero-badge span:last-child {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-rose);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Hero copy */
.hp-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hp-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.hp-hero-tagline {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.hp-hero-desc {
  font-size: 1.25rem;
  color: #94a3b8; /* slate-400 */
  line-height: 1.625;
  max-width: 36rem;
}

/* Hero CTAs */
.hp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.5rem;
}

.hp-btn-secondary {
  padding: 0.75rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-fg);
  font-weight: 700;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

.hp-btn-secondary:hover {
  border-color: rgba(78, 214, 214, 0.4);
  background: rgba(78, 214, 214, 0.05);
}

.hp-btn-primary-gradient {
  padding: 0.75rem 1.75rem;
  background: linear-gradient(to right, var(--color-primary), #22d3ee);
  color: var(--color-bg);
  font-weight: 800;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
  box-shadow:
    0 4px 25px rgba(43, 205, 238, 0.35),
    0 0 60px rgba(43, 205, 238, 0.1);
}

.hp-btn-primary-gradient:hover {
  background: linear-gradient(
    to right,
    var(--color-primary-hover),
    var(--color-primary-hover)
  );
  transform: scale(1.05);
  box-shadow:
    0 4px 35px rgba(43, 205, 238, 0.5),
    0 0 80px rgba(43, 205, 238, 0.15);
}

/* Stat strip */
.hp-stat-strip {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hp-stat-value {
  font-size: 1.5rem;
  font-weight: 900;
}

.hp-stat-value--primary {
  color: var(--color-primary);
}
.hp-stat-value--white {
  color: var(--color-fg);
}

.hp-stat-label {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-top: 2px;
}

.hp-stat-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   5. PRODUCT VIDEO / ASSET SHOWCASE
   ========================================================================== */
.hp-browser-chrome {
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 18, 21, 0.6);
  border-bottom: 1px solid rgba(43, 205, 238, 0.06);
}

.hp-browser-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hp-browser-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.hp-browser-dot--red {
  background: var(--color-rose);
}
.hp-browser-dot--yellow {
  background: #eab308;
  opacity: 0.7;
}
.hp-browser-dot--green {
  background: var(--color-primary);
  opacity: 0.7;
}

.hp-browser-url {
  font-size: 0.75rem;
  color: #64748b;
  margin-left: 0.75rem;
  font-family: monospace;
}

.hp-browser-badge {
  padding: 0.375rem 0.75rem;
  color: var(--color-rose);
  font-size: 10px;
  font-weight: 700;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(236, 85, 103, 0.35);
  background: rgba(236, 85, 103, 0.08);
}

.hp-video-container {
  position: relative;
}

.hp-video {
  width: 100%;
  height: auto;
  display: block;
}

.hp-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(16, 31, 34, 0.18);
  transition: opacity 0.3s;
}

#videoThumbAnimated {
  transition: opacity 0.3s;
}

.icp-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.3s;
}

.hp-play-btn {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: rgba(43, 205, 238, 0.15);
  border: 1px solid rgba(43, 205, 238, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform 0.3s;
  box-shadow: 0 10px 25px rgba(43, 205, 238, 0.2);
}

.hp-play-btn:hover {
  transform: scale(1.1);
}

.hp-play-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   6. SECTION STYLES (shared)
   ========================================================================== */
.hp-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}

.hp-section-label--primary {
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.hp-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--color-fg);
  margin-bottom: 1rem;
}

.hp-section-subtitle {
  color: #94a3b8;
  max-width: 32rem;
  margin-inline: auto;
}

.hp-section-header {
  text-align: center;
  margin-bottom: 5rem;
}

.hp-section-header--sm {
  text-align: center;
  margin-bottom: 4rem;
}

.hp-section-header--xs {
  text-align: center;
  margin-bottom: 3rem;
}

/* ==========================================================================
   7. TESTIMONIALS
   ========================================================================== */
.hp-testimonials {
  padding-block: 5rem;
  border-top: 1px solid rgba(43, 205, 238, 0.08);
  border-bottom: 1px solid rgba(43, 205, 238, 0.08);
  background: var(--color-bg-secondary);
}

.hp-testimonial-card {
  padding: 2rem;
  transition: all 0.3s;
}

.hp-testimonial-card:hover {
  border-color: rgba(78, 214, 214, 0.4);
}

.hp-testimonial-text {
  font-size: 0.875rem;
  color: #cbd5e1;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.hp-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hp-testimonial-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hp-testimonial-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-fg);
}

.hp-testimonial-role {
  font-size: 0.75rem;
  color: #64748b;
}

/* ==========================================================================
   8. ICP ROUTING
   ========================================================================== */
.hp-icp-section {
  padding: 6rem 1.5rem;
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--color-bg-deep),
    var(--color-bg),
    var(--color-bg-darker)
  );
}

.hp-icp-card {
  position: relative;
  padding: 2rem;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
}

.hp-icp-card:hover {
  border-color: rgba(78, 214, 214, 0.4);
}

.hp-icp-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  filter: blur(60px);
  margin-right: -2.5rem;
  margin-top: -2.5rem;
  transition: all 0.3s;
}

.hp-icp-glow--primary {
  background: rgba(43, 205, 238, 0.05);
}
.hp-icp-glow--teal {
  background: rgba(78, 214, 214, 0.05);
}
.hp-icp-glow--rose {
  background: rgba(236, 85, 103, 0.05);
}

.group:hover .hp-icp-glow--primary {
  background: rgba(43, 205, 238, 0.1);
}
.group:hover .hp-icp-glow--teal {
  background: rgba(78, 214, 214, 0.1);
}
.group:hover .hp-icp-glow--rose {
  background: rgba(236, 85, 103, 0.1);
}

.hp-icp-content {
  position: relative;
}

.hp-icp-icon {
  margin-bottom: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s;
}

.hp-icp-icon--primary {
  background: rgba(43, 205, 238, 0.1);
  border: 2px solid rgba(43, 205, 238, 0.2);
}

.hp-icp-icon--teal {
  background: rgba(78, 214, 214, 0.1);
  border: 2px solid rgba(78, 214, 214, 0.2);
}

.hp-icp-icon--rose {
  background: rgba(236, 85, 103, 0.1);
  border: 2px solid rgba(236, 85, 103, 0.2);
}

.group:hover .hp-icp-icon--primary {
  border-color: rgba(43, 205, 238, 0.4);
}
.group:hover .hp-icp-icon--teal {
  border-color: rgba(78, 214, 214, 0.4);
}
.group:hover .hp-icp-icon--rose {
  border-color: rgba(236, 85, 103, 0.4);
}

.hp-icp-title {
  color: var(--color-fg);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  transition: color 0.3s;
}

.group:hover .hp-icp-title {
  color: var(--color-primary-hover);
}

.hp-icp-roles {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.hp-icp-roles--primary {
  color: rgba(43, 205, 238, 0.6);
}
.hp-icp-roles--teal {
  color: rgba(78, 214, 214, 0.6);
}
.hp-icp-roles--rose {
  color: rgba(236, 85, 103, 0.6);
}

.hp-icp-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.hp-icp-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.hp-icp-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
}

.hp-icp-cta {
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap 0.3s;
}

.hp-icp-cta--primary {
  color: var(--color-primary);
}
.hp-icp-cta--teal {
  color: var(--color-primary-hover);
}
.hp-icp-cta--rose {
  color: var(--color-rose);
}

.group:hover .hp-icp-cta {
  gap: 0.5rem;
}

/* ==========================================================================
   9. HOW IT WORKS (3-step)
   ========================================================================== */
.hp-intro-section {
  padding: 8rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.hp-intro-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--color-bg-darker),
    #131f24,
    var(--color-bg-darker)
  );
  pointer-events: none;
}

.hp-intro-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(43, 205, 238, 0.1),
    rgba(43, 205, 238, 0.03),
    transparent
  );
  pointer-events: none;
}

.hp-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 56rem;
  margin-inline: auto;
}

.hp-step-line {
  display: none;
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(43, 205, 238, 0.3),
    rgba(78, 214, 214, 0.3),
    rgba(236, 85, 103, 0.3),
    transparent
  );
}

.hp-step {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 220px;
  margin-inline: auto;
}

.hp-step-icon {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--color-bg-card-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.hp-step-icon--primary {
  border: 2px solid rgba(43, 205, 238, 0.3);
  box-shadow: 0 0 30px rgba(43, 205, 238, 0.1);
}
.hp-step-icon--teal {
  border: 2px solid rgba(78, 214, 214, 0.4);
  box-shadow: 0 0 30px rgba(78, 214, 214, 0.15);
}
.hp-step-icon--rose {
  border: 2px solid rgba(236, 85, 103, 0.3);
  box-shadow: 0 0 30px rgba(236, 85, 103, 0.1);
}

.hp-step-icon {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.hp-step:hover .hp-step-icon--primary {
  border-color: rgba(43, 205, 238, 0.7);
  box-shadow: 0 0 40px rgba(43, 205, 238, 0.3);
}
.hp-step:hover .hp-step-icon--teal {
  border-color: rgba(78, 214, 214, 0.8);
  box-shadow: 0 0 40px rgba(78, 214, 214, 0.35);
}
.hp-step:hover .hp-step-icon--rose {
  border-color: rgba(236, 85, 103, 0.7);
  box-shadow: 0 0 40px rgba(236, 85, 103, 0.3);
}

.hp-step-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-fg);
  margin-bottom: 0.5rem;
}

.hp-step-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.625;
}

.hp-forces-header {
  text-align: center;
  margin-bottom: 3rem;
}

.hp-forces-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.hp-forces-subtitle {
  font-size: 0.875rem;
  color: #64748b;
}

/* Research badge */
.hp-research-badge {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}

.hp-research-badge-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(43, 205, 238, 0.1);
  background: rgba(43, 205, 238, 0.05);
}

.hp-research-badge-text {
  font-size: 0.75rem;
  color: #94a3b8;
}

.hp-research-badge-text strong {
  color: var(--color-fg);
}

/* ==========================================================================
   10. LIVE VERIFICATION DEMO
   ========================================================================== */
.hp-demo-section {
  padding: 5rem 1.5rem;
  background: linear-gradient(
    to bottom,
    var(--color-bg-darker),
    var(--color-bg)
  );
}

.hp-demo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.hp-demo-stat {
  border-radius: var(--radius-xl);
  padding: 1rem;
  text-align: center;
}

.hp-demo-stat--default {
  background: rgba(10, 18, 21, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.hp-demo-stat--red {
  background: rgba(236, 85, 103, 0.08);
  border: 1px solid rgba(236, 85, 103, 0.12);
}

.hp-demo-stat--primary {
  background: rgba(43, 205, 238, 0.06);
  border: 1px solid rgba(43, 205, 238, 0.1);
}

.hp-demo-stat-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.hp-demo-stat-value {
  font-size: 1.5rem;
  font-weight: 900;
}

.hp-demo-stat-value--white {
  color: var(--color-fg);
}
.hp-demo-stat-value--red {
  color: var(--color-rose);
}
.hp-demo-stat-value--primary {
  color: var(--color-primary);
}

.hp-demo-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hp-demo-finding {
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  background: rgba(10, 18, 21, 0.5);
  border: 1px solid rgba(43, 205, 238, 0.1);
}

.hp-demo-finding-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.hp-demo-finding-title {
  font-weight: 700;
  color: var(--color-fg);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hp-demo-finding-subtitle {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

.hp-severity-badge {
  padding: 0.25rem 0.75rem;
  color: var(--color-rose);
  font-size: 10px;
  font-weight: 700;
  border-radius: 0.25rem;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 1px solid rgba(236, 85, 103, 0.25);
  background: rgba(236, 85, 103, 0.12);
}

.hp-demo-code {
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 11px;
  font-family: monospace;
  color: rgba(43, 205, 238, 0.8);
  line-height: 1.8;
  background: rgba(10, 18, 21, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.hp-demo-code .comment {
  color: #64748b;
}
.hp-demo-code .success {
  color: #4ade80;
}

.hp-demo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hp-demo-footer-text {
  font-size: 0.75rem;
  color: #64748b;
}

.hp-demo-footer-stat {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ==========================================================================
   11. TRUST BAR
   ========================================================================== */
.hp-trust-bar {
  padding-block: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--color-bg-deep);
}

.hp-trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  opacity: 0.5;
  filter: grayscale(1);
  transition: all 0.7s;
}

.hp-trust-logos:hover {
  opacity: 0.7;
  filter: grayscale(0);
}

.hp-trust-logo {
  filter: invert(1);
}

/* ==========================================================================
   12. FEATURES GRID
   ========================================================================== */
.hp-features-section {
  padding: 8rem 1.5rem;
  position: relative;
  overflow: hidden;
  background: #0c171a;
}

.hp-features-glow {
  position: absolute;
  top: 0;
  left: 25%;
  width: 600px;
  height: 400px;
  background: rgba(43, 205, 238, 0.03);
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.hp-feature-card {
  padding: 2rem;
  border-radius: var(--radius-xl);
  transition: all 0.3s;
}

.hp-feature-card:hover {
  border-color: rgba(78, 214, 214, 0.4);
}

.hp-feature-icon {
  margin-bottom: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(43, 205, 238, 0.15);
  border: 1px solid rgba(43, 205, 238, 0.25);
  transition: all 0.3s;
}

.group:hover .hp-feature-icon {
  background: rgba(43, 205, 238, 0.25);
  box-shadow: 0 0 12px rgba(43, 205, 238, 0.15);
}

.hp-feature-title {
  color: var(--color-fg);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.hp-feature-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.625;
}

/* ==========================================================================
   13. BENEFITS CAROUSEL
   ========================================================================== */
.hp-benefits-section {
  padding: 8rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--color-bg-deep);
  position: relative;
  overflow: hidden;
}

.hp-benefits-glow {
  position: absolute;
  bottom: 0;
  right: 25%;
  width: 700px;
  height: 500px;
  background: rgba(78, 214, 214, 0.03);
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
}

.hp-benefit-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
}

.hp-benefit-tab {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 700;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
}

.hp-benefit-tab--active {
  background: rgba(43, 205, 238, 0.1);
  border: 1px solid rgba(43, 205, 238, 0.3);
  color: var(--color-primary);
}

.hp-benefit-tab--inactive {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.hp-benefit-tab--inactive:hover {
  color: var(--color-fg);
}

.hp-benefit-slide-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hp-benefit-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-fg);
}

.hp-benefit-desc {
  color: #94a3b8;
  line-height: 1.625;
}

.hp-benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hp-benefit-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #cbd5e1;
}

.hp-benefit-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hp-benefit-image img {
  width: 100%;
  display: block;
}

/* ==========================================================================
   14. ROI STATS
   ========================================================================== */
.hp-roi-section {
  padding: 5rem 1.5rem;
  background: linear-gradient(
    to bottom,
    var(--color-bg-deep),
    var(--color-bg-darker)
  );
}

.hp-roi-grid {
  max-width: 56rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}

.hp-roi-value {
  font-size: 2.25rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.hp-roi-value--primary {
  color: var(--color-primary);
}
.hp-roi-value--white {
  color: var(--color-fg);
}
.hp-roi-value--teal {
  color: var(--color-primary-hover);
}

.hp-roi-label {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.hp-roi-note {
  font-size: 0.75rem;
  color: #475569; /* slate-600 */
  margin-top: 0.25rem;
}

/* ==========================================================================
   15. BENCHMARK
   ========================================================================== */
.hp-benchmark-section {
  padding: 8rem 1.5rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--color-bg-darker),
    var(--color-bg),
    var(--color-bg-darker)
  );
}

.hp-benchmark-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 700px;
  background: rgba(43, 205, 238, 0.05);
  border-radius: 50%;
  filter: blur(180px);
  pointer-events: none;
}

.hp-benchmark-card {
  background: linear-gradient(
    to bottom right,
    var(--color-bg-card-solid),
    var(--color-bg)
  );
  border: 1px solid rgba(43, 205, 238, 0.2);
  border-radius: 1.5rem;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.hp-benchmark-card-glow-1 {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -4rem;
  margin-right: -4rem;
  width: 18rem;
  height: 18rem;
  background: rgba(43, 205, 238, 0.08);
  border-radius: 50%;
  filter: blur(80px);
}

.hp-benchmark-card-glow-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: -2.5rem;
  margin-left: -2.5rem;
  width: 14rem;
  height: 14rem;
  background: rgba(78, 214, 214, 0.05);
  border-radius: 50%;
  filter: blur(60px);
}

.hp-benchmark-layout {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.hp-benchmark-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hp-btn-outline-primary {
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(43, 205, 238, 0.3);
  background: rgba(43, 205, 238, 0.1);
  color: var(--color-primary);
  font-weight: 700;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

.hp-btn-outline-primary:hover {
  background: rgba(43, 205, 238, 0.2);
}

.hp-btn-primary-gradient-sm {
  padding: 0.75rem 2rem;
  background: linear-gradient(to right, var(--color-primary), #22d3ee);
  color: var(--color-bg);
  font-weight: 800;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
  box-shadow:
    0 4px 25px rgba(43, 205, 238, 0.35),
    0 0 60px rgba(43, 205, 238, 0.1);
}

.hp-btn-primary-gradient-sm:hover {
  background: linear-gradient(
    to right,
    var(--color-primary-hover),
    var(--color-primary-hover)
  );
  transform: scale(1.05);
  box-shadow:
    0 4px 35px rgba(43, 205, 238, 0.5),
    0 0 80px rgba(43, 205, 238, 0.15);
}

.hp-benchmark-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.hp-benchmark-bar {
  background: rgba(16, 31, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
}

.hp-benchmark-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.hp-benchmark-bar-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hp-benchmark-bar-value {
  font-size: 1.875rem;
  font-weight: 900;
}

.hp-benchmark-bar-value--primary {
  color: var(--color-primary);
}
.hp-benchmark-bar-value--teal {
  color: var(--color-primary-hover);
}
.hp-benchmark-bar-value--rose {
  color: var(--color-rose);
}

.hp-benchmark-note {
  font-size: 0.75rem;
  color: #64748b;
  text-align: right;
  padding-top: 0.25rem;
}

/* ==========================================================================
   16. CASE STUDIES
   ========================================================================== */
.hp-case-studies-section {
  padding: 8rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--color-bg-deep);
}

.hp-case-card {
  padding: 2rem;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
}

.hp-case-card:hover {
  border-color: rgba(78, 214, 214, 0.4);
}

.hp-case-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.hp-case-badge {
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hp-case-badge--red {
  background: rgba(236, 85, 103, 0.15);
  color: var(--color-rose);
  border: 1px solid rgba(236, 85, 103, 0.2);
}

.hp-case-badge--yellow {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.hp-case-time {
  font-size: 0.75rem;
  color: var(--color-fg-muted); /* WCAG AA on dark bg */
}

.hp-case-title {
  color: var(--color-fg);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
  transition: color 0.3s;
}

.group:hover .hp-case-title {
  color: var(--color-primary-hover);
}

.hp-case-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.625;
  margin-bottom: 1rem;
}

.hp-case-cta {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ==========================================================================
   17. PRICING
   ========================================================================== */
.hp-pricing-section {
  padding: 8rem 1.5rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #0c171a, #0a1215);
}

.hp-pricing-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 18, 21, 0.85),
    rgba(12, 23, 26, 0.8),
    rgba(10, 18, 21, 0.85)
  );
  pointer-events: none;
}

.hp-pricing-glow {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: rgba(43, 205, 238, 0.03);
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
}

.hp-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.hp-pricing-card {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

.hp-pricing-card:hover {
  border-color: rgba(78, 214, 214, 0.4);
}

.hp-pricing-name {
  color: var(--color-fg);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.hp-pricing-price {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--color-fg);
  margin-bottom: 0.25rem;
}

.hp-pricing-period {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 2rem;
}

.hp-pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  flex-grow: 1;
  font-size: 0.875rem;
  color: #94a3b8;
}

.hp-pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hp-pricing-btn-secondary {
  width: 100%;
  padding-block: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-fg);
  text-align: center;
  text-decoration: none;
  display: block;
  transition: all 0.3s;
}

.hp-pricing-btn-secondary:hover {
  border-color: rgba(78, 214, 214, 0.4);
  background: rgba(78, 214, 214, 0.05);
}

.hp-pricing-btn-primary {
  width: 100%;
  padding-block: 0.75rem;
  background: linear-gradient(to right, var(--color-primary), #22d3ee);
  color: var(--color-bg);
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: all 0.3s;
}

.hp-pricing-btn-primary:hover {
  background: linear-gradient(
    to right,
    var(--color-primary-hover),
    var(--color-primary-hover)
  );
}

/* Recommended / Save badges */
.hp-pricing-badge-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.hp-pricing-badge-wrapper > .hp-pricing-card {
  flex: 1;
}

.hp-pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 1rem;
  font-size: 10px;
  font-weight: 900;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  z-index: 10;
}

.hp-pricing-badge--recommended {
  background: var(--color-primary);
  color: var(--color-bg);
}

.hp-pricing-badge--save {
  background: rgba(78, 214, 214, 0.1);
  border: 1px solid rgba(78, 214, 214, 0.3);
  color: var(--color-primary-hover);
}

.hp-pricing-card--featured {
  border-color: rgba(43, 205, 238, 0.4);
  box-shadow: 0 0 30px rgba(43, 205, 238, 0.12);
}

/* Trust row */
.hp-pricing-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.75rem;
  color: #64748b;
}

.hp-pricing-trust span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* ==========================================================================
   18. BLOG SECTION
   ========================================================================== */
.hp-blog-section {
  padding: 8rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(
    to bottom,
    var(--color-bg-deep),
    var(--color-bg-darker)
  );
}

.hp-blog-card {
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
}

.hp-blog-card:hover {
  border-color: rgba(78, 214, 214, 0.4);
}

.hp-blog-card-inner {
  padding: 1.5rem;
}

.hp-blog-meta {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}

.hp-blog-title {
  color: var(--color-fg);
  font-weight: 700;
  margin-bottom: 0.75rem;
  transition: color 0.3s;
}

.group:hover .hp-blog-title {
  color: var(--color-primary-hover);
}

.hp-blog-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.625;
}

.hp-blog-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.3s;
}

.hp-blog-more:hover {
  border-color: rgba(78, 214, 214, 0.4);
  background: rgba(78, 214, 214, 0.05);
  color: var(--color-fg);
}

/* ==========================================================================
   19. FINAL CTA
   ========================================================================== */
.hp-cta-section {
  padding: 6rem 1.5rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--color-bg-darker),
    var(--color-bg)
  );
}

.hp-cta-card {
  background: linear-gradient(
    to bottom right,
    var(--color-bg-card-solid),
    var(--color-bg)
  );
  border: 1px solid rgba(43, 205, 238, 0.3);
  border-radius: 1.5rem;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.hp-cta-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -5rem;
  margin-right: -5rem;
  width: 20rem;
  height: 20rem;
  background: rgba(43, 205, 238, 0.1);
  border-radius: 50%;
  filter: blur(80px);
}

.hp-cta-content {
  position: relative;
  z-index: 10;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.hp-cta-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2.5rem;
}

.hp-cta-stat-value {
  font-size: 1.875rem;
  font-weight: 900;
  margin-bottom: 0.25rem;
}

.hp-cta-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.hp-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--color-fg);
  margin-bottom: 1.5rem;
}

.hp-cta-desc {
  font-size: 1.25rem;
  color: #94a3b8;
  margin-bottom: 2.5rem;
  line-height: 1.625;
}

.hp-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.hp-btn-primary-gradient-lg {
  padding: 0.875rem 2rem;
  background: linear-gradient(to right, var(--color-primary), #22d3ee);
  color: var(--color-bg);
  font-weight: 900;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 10px 25px rgba(43, 205, 238, 0.2);
}

.hp-btn-primary-gradient-lg:hover {
  background: linear-gradient(
    to right,
    var(--color-primary-hover),
    var(--color-primary-hover)
  );
  transform: scale(1.05);
}

.hp-btn-secondary-lg {
  padding: 0.875rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-fg);
  font-weight: 700;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

.hp-btn-secondary-lg:hover {
  border-color: rgba(78, 214, 214, 0.4);
  background: rgba(78, 214, 214, 0.05);
}

/* ==========================================================================
   19b. FORMS & CARD HEADINGS
   Shared primitives used by contact.html, book-a-demo.html and other
   pages with forms or card-level headings. Keeps inline styles out of HTML
   so future updates to input/button/label styling propagate everywhere.
   ========================================================================== */

/* Form layout */
.hp-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hp-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Labels */
.hp-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-fg-secondary);
}

/* Input / select / textarea - shared base */
.hp-form-input,
.hp-form-select,
.hp-form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  color: var(--color-fg);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.hp-form-select {
  background-color: rgba(22, 42, 46, 0.8);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232bcdee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.75rem;
}

.hp-form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.hp-form-input::placeholder,
.hp-form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.hp-form-input:focus,
.hp-form-select:focus,
.hp-form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43, 205, 238, 0.15);
}

/* Form submit status message */
.hp-form-result {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 600;
}

.hp-form-result--success {
  background: rgba(0, 255, 157, 0.1);
  border: 1px solid rgba(0, 255, 157, 0.3);
  color: var(--color-success, #00ff9d);
}

.hp-form-result--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-error, #ef4444);
}

/* Generic card headings - for card-level titles that aren't full section titles */
.hp-card-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 800;
  color: var(--color-fg);
  margin: 0 0 0.5rem;
}

.hp-card-subheading {
  color: var(--color-fg-secondary);
  margin: 0 0 2rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.hp-footer {
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  padding-inline: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hp-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.hp-footer-logo {
  height: 3rem;
  opacity: 0.4;
}

.hp-footer-company-name {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.625;
  margin-bottom: 0.5rem;
}

.hp-footer-address {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.625;
}

.hp-footer-heading {
  color: var(--color-fg);
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.hp-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.hp-footer-links a {
  color: var(--color-fg-muted); /* WCAG AA on dark bg */
  text-decoration: none;
  transition: color 0.3s;
}

.hp-footer-links a:hover {
  color: var(--color-primary);
}

/* Newsletter */
.hp-newsletter {
  padding: 2rem;
  margin-bottom: 4rem;
}

.hp-newsletter-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.hp-newsletter-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-fg);
  margin-bottom: 0.25rem;
}

.hp-newsletter-desc {
  font-size: 0.875rem;
  color: var(--color-fg-muted); /* WCAG AA on dark bg */
}

.hp-newsletter-form {
  flex: 1;
  width: 100%;
}

.hp-newsletter-fields {
  display: flex;
  gap: 0.75rem;
}

.hp-newsletter-submit {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(to right, var(--color-primary), #22d3ee);
  color: var(--color-bg);
  font-weight: 700;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s;
}

.hp-newsletter-submit:hover {
  background: linear-gradient(
    to right,
    var(--color-primary-hover),
    var(--color-primary-hover)
  );
}

/* Bottom bar */
.hp-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 10px;
  color: var(--color-muted); /* lifted from #475569 for AA compliance */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hp-footer-contact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hp-footer-contact span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hp-footer-social {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.hp-footer-social a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.hp-footer-social a:hover {
  color: var(--color-fg);
}

/* ==========================================================================
   21. COOKIE CONSENT (keep existing styles, just semantic wrappers)
   ========================================================================== */
.hp-cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
  display: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.hp-cookie-prefs-dialog {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
}

.hp-cookie-prefs-inner {
  width: 90%;
  max-width: 28rem;
  padding: 2rem;
  border: 1px solid rgba(43, 205, 238, 0.2);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  position: relative;
}

.hp-cookie-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #64748b;
  font-size: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
}

.hp-cookie-close:hover {
  color: var(--color-fg);
}

.hp-cookie-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-fg);
  margin-bottom: 0.5rem;
}

.hp-cookie-desc {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 1.5rem;
}

.hp-cookie-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.hp-cookie-option {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  padding: 1rem;
}

.hp-cookie-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.hp-cookie-option-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-fg);
}

.hp-cookie-always-on {
  font-size: 10px;
  font-weight: 600;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
}

.hp-cookie-option-desc {
  font-size: 0.75rem;
  color: #64748b;
}

/* Toggle switch */
.hp-toggle {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
}

.hp-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.hp-toggle-slider {
  position: absolute;
  inset: 0;
  background: #334155;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s;
}

.hp-toggle-slider::before {
  content: "";
  position: absolute;
  height: 1rem;
  width: 1rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.3s;
}

.hp-toggle input:checked + .hp-toggle-slider {
  background: var(--color-primary);
}

.hp-toggle input:checked + .hp-toggle-slider::before {
  transform: translateX(1.25rem);
  background: var(--color-fg);
}

.hp-cookie-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hp-cookie-accept-all {
  width: 100%;
  padding-block: 0.75rem;
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.hp-cookie-accept-all:hover {
  background: var(--color-primary-hover);
}

.hp-cookie-save {
  font-size: 0.875rem;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  padding-block: 0.5rem;
  transition: color 0.3s;
}

.hp-cookie-save:hover {
  color: var(--color-fg);
}

/* Cookie banner bar */
.hp-cookie-banner-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.hp-cookie-banner-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.hp-cookie-banner-text p {
  font-size: 0.875rem;
  color: #cbd5e1;
}

.hp-cookie-banner-text a {
  color: var(--color-primary);
}

.hp-cookie-banner-text a:hover {
  text-decoration: underline;
}

.hp-cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.hp-cookie-manage-btn {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.hp-cookie-manage-btn:hover {
  color: var(--color-fg);
  border-color: rgba(255, 255, 255, 0.2);
}

.hp-cookie-accept-btn {
  padding: 0.5rem 1.25rem;
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.hp-cookie-accept-btn:hover {
  background: var(--color-primary-hover);
}

/* ==========================================================================
   22. GRID HELPERS
   ========================================================================== */
.hp-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.hp-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.hp-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* ==========================================================================
   23. TEXT UTILITIES (non-Tailwind replacements)
   ========================================================================== */
.text-primary {
  color: var(--color-primary);
}
.text-teal {
  color: var(--color-primary-hover);
}
.text-rose {
  color: var(--color-rose);
}
.text-white {
  color: var(--color-fg);
}
.text-green-400 {
  color: #4ade80;
}

.bg-primary {
  background: var(--color-primary);
}
.bg-teal {
  background: var(--color-primary-hover);
}
.bg-rose {
  background: var(--color-rose);
}

/* ==========================================================================
   24. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* sm: 640px */
@media (min-width: 640px) {
  .hp-btn-login {
    display: block;
  }

  .hp-cookie-banner-inner {
    flex-direction: row;
  }

  .hp-cta-buttons {
    flex-direction: row;
  }
}

/* md: 768px */
@media (min-width: 768px) {
  .hp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hp-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .hp-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .hp-steps {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
  }

  .hp-step-line {
    display: block;
  }

  .hp-step {
    margin-inline: 0;
  }

  .hp-forces-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hp-benefit-slide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    align-items: center;
  }

  .hp-benchmark-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .hp-benchmark-copy {
    width: 41.67%; /* 5/12 */
  }
  .hp-benchmark-bars-wrapper {
    width: 58.33%; /* 7/12 */
  }

  .hp-benchmark-card {
    padding: 4rem;
  }

  .hp-footer-grid {
    grid-template-columns: repeat(7, 1fr);
  }
  .hp-footer-col-wide {
    grid-column: span 2;
  }

  .hp-newsletter-inner {
    flex-direction: row;
  }

  .hp-footer-bottom {
    flex-direction: row;
  }

  .hp-cta-card {
    padding: 5rem;
  }

  .hp-cta-title {
    font-size: clamp(2rem, 4vw, 3rem);
  }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .hp-nav {
    display: flex;
  }
  .hp-btn-demo-nav {
    display: block;
  }
  .hp-btn-scan-nav {
    display: block;
  }
  .hp-hamburger {
    display: none;
  }
  .hp-mobile-menu {
    display: none !important;
  }

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

  .hp-hero-title {
    font-size: clamp(3rem, 5vw, 3.75rem);
  }
}

/* Forces grid needs own breakpoint */
.hp-forces-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

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

/* ======================================================================
   Verticals & ICP channel pages
   ====================================================================== */

/* ==========================================================================
   SQUR Vertical Landing Pages - Shared Stylesheet
   Linked from verticals/*.html as ../styles-verticals.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero Section
   -------------------------------------------------------------------------- */

.vertical-hero {
  background:
    radial-gradient(
      circle at 20% 40%,
      rgba(43, 205, 238, 0.22) 0%,
      transparent 55%
    ),
    radial-gradient(
      circle at 80% 60%,
      rgba(94, 234, 212, 0.16) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(236, 85, 103, 0.1) 0%,
      transparent 45%
    ),
    linear-gradient(135deg, var(--color-bg-deep) 0%, var(--color-bg) 100%);
  position: relative;
  text-align: center;
  padding: 70px var(--space-lg) var(--space-4xl);
  overflow: hidden;
}

/* Subtle grid pattern overlay - matches main site hero */
.vertical-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(43, 205, 238, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 205, 238, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

/* Secondary glow accent */
.vertical-hero::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  width: 1100px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    rgba(43, 205, 238, 0.14) 0%,
    rgba(43, 205, 238, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.vertical-hero .container {
  position: relative;
  z-index: 1;
}

.vertical-hero h1 {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  line-height: 1.05;
  font-weight: 800;
  color: var(--color-fg);
  margin: 0 0 var(--space-md);
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--color-fg-muted);
  max-width: 600px;
  margin: 0 auto 16px;
  line-height: 1.6;
}

.hero-tagline {
  font-size: 0.95rem;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 var(--space-xl);
}

.hero-ctas {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
}

.btn-primary {
  display: inline-block;
  background: linear-gradient(
    135deg,
    var(--color-bg-btn) 0%,
    var(--color-bg) 100%
  );
  color: var(--color-fg);
  padding: 14px 32px;
  border-radius: 8px;
  border: 1px solid var(--border-accent-strong);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(43, 205, 238, 0.2),
    inset 0 1px 0 var(--border-subtle);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(
    135deg,
    var(--color-bg-btn-hover) 0%,
    var(--color-bg-btn) 100%
  );
  border-color: rgba(43, 205, 238, 0.7);
  box-shadow:
    0 4px 12px var(--glow-primary-strong),
    0 0 20px rgba(43, 205, 238, 0.15),
    inset 0 1px 0 var(--border-subtle);
}

.btn-secondary {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-fg);
  padding: 14px 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(236, 85, 103, 0.08);
  border-color: rgba(236, 85, 103, 0.55);
  color: var(--color-rose);
  box-shadow: 0 4px 12px rgba(236, 85, 103, 0.15);
}

/* --------------------------------------------------------------------------
   2. Challenges Section
   -------------------------------------------------------------------------- */

.vertical-challenges {
  background: var(--color-bg);
  padding: var(--space-4xl) var(--space-lg);
}

.vertical-challenges h2 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--color-fg);
  text-align: center;
  margin: 0 0 var(--space-2xl);
}

.challenges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 1100px;
  margin: 0 auto;
}

.challenge-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-xl);
  border: 1px solid var(--border-subtle);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.challenge-card:hover {
  border-color: var(--border-accent-bright);
  box-shadow: 0 4px 20px var(--glow-primary);
}

.card-icon {
  font-size: clamp(20px, 2vw, 24px);
  margin-bottom: 16px;
}

.challenge-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-fg);
  margin: 0 0 10px;
}

.challenge-card p {
  font-size: 0.95rem;
  color: var(--color-fg-muted);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Solution Section
   -------------------------------------------------------------------------- */

.vertical-solution {
  background: var(--color-bg);
  padding: var(--space-4xl) var(--space-lg);
}

.vertical-solution h2 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--color-fg);
  text-align: center;
  margin: 0 0 var(--space-2xl);
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.solution-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.solution-item:hover {
  border-color: var(--border-accent-bright);
  box-shadow: 0 4px 20px var(--glow-primary);
}

.item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.solution-item h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 6px;
}

.solution-item p {
  font-size: 0.9rem;
  color: var(--color-fg-muted);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. Compliance Section
   -------------------------------------------------------------------------- */

.vertical-compliance {
  background: var(--color-bg);
  padding: var(--space-4xl) var(--space-lg);
}

.vertical-compliance h2 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--color-fg);
  text-align: center;
  margin: 0 0 var(--space-md);
}

.compliance-subtitle {
  font-size: 0.95rem;
  color: var(--color-fg-muted);
  text-align: center;
  max-width: 650px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.6;
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  max-width: 1100px;
  margin: 0 auto;
}

.compliance-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  border-left: 3px solid var(--border-accent-strong);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.compliance-card:hover {
  border-left-color: var(--color-primary);
  box-shadow: 0 4px 20px var(--glow-primary);
}

.compliance-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-fg);
  margin: 0 0 8px;
}

.compliance-card p {
  font-size: 0.9rem;
  color: var(--color-fg-muted);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Stats Banner
   -------------------------------------------------------------------------- */

.vertical-stats {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--border-accent);
  border-bottom: 1px solid var(--border-accent);
  padding: var(--space-3xl) var(--space-lg);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 6px;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--color-fg-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. FAQ Section
   -------------------------------------------------------------------------- */

.vertical-faq {
  background: var(--color-bg);
  padding: var(--space-4xl) var(--space-lg);
}

.vertical-faq h2 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--color-fg);
  text-align: center;
  margin: 0 0 var(--space-2xl);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-fg);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-toggle {
  font-size: 1.2rem;
  color: var(--color-primary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

.faq-answer-inner {
  padding: 0 var(--space-lg) var(--space-md);
  font-size: 0.95rem;
  color: var(--color-fg-muted);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   7. Bottom CTA
   -------------------------------------------------------------------------- */

.vertical-cta {
  background: linear-gradient(135deg, #001a4d 0%, var(--color-primary) 100%);
  text-align: center;
  padding: var(--space-4xl) var(--space-lg);
}

.vertical-cta h2 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 var(--space-md);
}

.vertical-cta p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 500px;
  margin: 0 auto var(--space-xl);
  line-height: 1.6;
}

.btn-start {
  display: inline-block;
  background: #ffffff;
  color: var(--color-bg);
  padding: 14px 32px;
  border-radius: 8px;
  border: 1px solid #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.btn-start:hover {
  background: #f0f4ff;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25);
}

.btn-demo {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-fg);
  padding: 14px 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.btn-demo:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   8. Responsive Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .challenges-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 768px) {
  .vertical-hero {
    padding: 60px var(--space-md) var(--space-3xl);
  }

  .vertical-hero h1 {
    font-size: clamp(20px, 2vw, 24px);
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

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

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

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .stat-value {
    font-size: clamp(20px, 2vw, 24px);
  }

  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }

  .vertical-cta .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   9. ICP Landing Page Components
   -------------------------------------------------------------------------- */

/* Persona Badge - hero section */
.icp-badge {
  display: inline-block;
  background: rgba(43, 205, 238, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(43, 205, 238, 0.3);
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-lg);
}

/* Rose badge variant - security / high-stakes roles */
.icp-badge--rose {
  background: rgba(236, 85, 103, 0.08);
  color: var(--color-rose);
  border-color: rgba(236, 85, 103, 0.32);
}

/* Metric Badge - challenge cards */
.metric-badge {
  display: inline-block;
  background: rgba(94, 234, 212, 0.08);
  color: var(--color-primary-light);
  border: 1px solid rgba(94, 234, 212, 0.2);
  padding: 4px 14px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: var(--space-md);
}

/* Solution Subtitle */
.solution-subtitle {
  font-size: 1rem;
  color: var(--color-fg-muted);
  text-align: center;
  max-width: 700px;
  margin: calc(-1 * var(--space-lg)) auto var(--space-2xl);
  line-height: 1.6;
}

/* Social Proof Section */
.vertical-social-proof {
  background: var(--color-bg-secondary);
  padding: var(--space-4xl) var(--space-lg);
  text-align: center;
}

.vertical-social-proof .testimonial-quote {
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  border: none;
  padding: 0;
}

.vertical-social-proof .testimonial-quote p {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  font-style: italic;
  color: var(--color-fg);
  line-height: 1.5;
  margin: 0 0 var(--space-md);
}

.vertical-social-proof .testimonial-quote cite {
  font-size: 0.95rem;
  font-style: normal;
  color: var(--color-fg-muted);
}

/* Trust Badges row */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.trust-badges .trust-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-fg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.trust-badges .trust-badge:hover {
  border-color: var(--border-accent-bright);
  color: var(--color-fg);
}

@media (max-width: 768px) {
  .vertical-social-proof .testimonial-quote p {
    font-size: 1.1rem;
  }

  .trust-badges {
    gap: 8px;
  }

  .trust-badges .trust-badge {
    font-size: 0.8rem;
    padding: 6px 14px;
  }
}

/* ==========================================================================
   ICP Hero - 2-Column Layout with Video
   ========================================================================== */

.icp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  text-align: left;
}

.icp-hero-grid .hero-subtitle {
  margin-left: 0;
  max-width: 100%;
}

.icp-hero-grid .hero-ctas {
  justify-content: flex-start;
}

.icp-hero-grid .hero-reveal {
  justify-content: flex-start;
}

.icp-hero-grid .icp-badge {
  display: inline-block;
}

.icp-hero-text h1 {
  text-align: left;
}

@media (max-width: 960px) {
  .icp-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .icp-hero-video {
    display: none;
  }
  .icp-hero-grid .hero-ctas,
  .icp-hero-grid .hero-reveal {
    justify-content: center;
  }
  .icp-hero-text h1 {
    text-align: center;
  }
  .icp-hero-grid .hero-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Video Player ── */
.icp-hero-video {
  position: relative;
}

/* Browser chrome frame - mirrors homepage video player */
.icp-asset-frame {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(43, 205, 238, 0.22);
  box-shadow:
    0 0 0 1px rgba(43, 205, 238, 0.07),
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(43, 205, 238, 0.06);
  background: #08121a;
}

.icp-browser-chrome {
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 18, 21, 0.6);
  border-bottom: 1px solid rgba(43, 205, 238, 0.06);
}

.icp-browser-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icp-browser-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
}

.icp-dot--red {
  background: var(--color-rose);
}
.icp-dot--yellow {
  background: #eab308;
  opacity: 0.7;
}
.icp-dot--green {
  background: var(--color-primary);
  opacity: 0.7;
}

.icp-browser-url {
  font-size: 0.75rem;
  color: #64748b;
  margin-left: 0.75rem;
  font-family: monospace;
}

.icp-browser-badge {
  padding: 0.375rem 0.75rem;
  color: var(--color-rose);
  font-size: 10px;
  font-weight: 700;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(236, 85, 103, 0.35);
  background: rgba(236, 85, 103, 0.08);
}

.icp-play-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.5rem;
}

.icp-video-wrap {
  position: relative;
  background: #08121a;
  aspect-ratio: 16 / 9;
}

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

.icp-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.18);
  transition:
    background 0.25s ease,
    opacity 0.3s;
}

.icp-video-overlay:hover {
  background: rgba(0, 0, 0, 0.05);
}

.icp-play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(43, 205, 238, 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid rgba(43, 205, 238, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow: 0 0 24px rgba(43, 205, 238, 0.2);
}

.icp-video-overlay:hover .icp-play-btn {
  transform: scale(1.12);
  background: rgba(43, 205, 238, 0.28);
  box-shadow: 0 0 40px rgba(43, 205, 238, 0.4);
}

.icp-play-btn .material-symbols-outlined {
  font-size: 2.4rem;
  color: var(--color-primary);
  margin-left: 5px; /* optical centering for play triangle */
}

/* ==========================================================================
   Canvas overlay utility - allow any section to host a zone-canvas
   ========================================================================== */

.vertical-challenges {
  position: relative;
  overflow: hidden;
}

.vertical-challenges > .zone-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vertical-challenges > .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   ICP Card Hover - gradient border shimmer
   ========================================================================== */

/* Universal upgrade for all per-page ICP pain/step cards */
[class$="-pain-card"],
[class$="-step"],
[class$="-finding-card"] {
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

[class$="-pain-card"]:hover,
[class$="-step"]:not(.hp-step):hover {
  box-shadow:
    0 0 0 1px rgba(43, 205, 238, 0.35),
    0 8px 32px rgba(43, 205, 238, 0.1);
}

/* Comparison panel hover */
[class$="-before"]:hover {
  box-shadow: 0 4px 24px rgba(255, 77, 77, 0.12);
}

[class$="-after"]:hover {
  box-shadow: 0 4px 24px rgba(43, 205, 238, 0.15);
}

/* ======================================================================
   Interaction states & animations
   ====================================================================== */

/* ==========================================================================
   SQUR Interaction System - Shared Effects Layer
   Include on ALL pages after styles.css for homepage-grade quality.
   This file handles effects, not layout. Pair with:
   - styles-verticals.css (centered layouts)
   - styles-icp.css (2-column persona layouts)
   - blog-styles.css (article layouts)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gradient Text
   -------------------------------------------------------------------------- */

.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-primary) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   2. Glass Card Effect (frosted backdrop)
   -------------------------------------------------------------------------- */

.glass-card {
  background: rgba(10, 18, 22, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease;
}

.glass-card:hover {
  background: rgba(6, 12, 16, 0.92);
  border-color: rgba(43, 205, 238, 0.35);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(43, 205, 238, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Lighter glass variant used across site - originally defined inline on index.html.
   Promoted here so all pages (about, careers, verticals/*, blog/*, etc.) that use
   class="glass" render the intended frosted card instead of a bare transparent box. */
.glass {
  background: rgba(22, 42, 46, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

.glass:hover {
  border-color: rgba(43, 205, 238, 0.25);
  box-shadow: 0 0 20px rgba(43, 205, 238, 0.08);
}

.glass:active {
  border-color: rgba(236, 85, 103, 0.4) !important;
  box-shadow: 0 0 25px rgba(236, 85, 103, 0.15) !important;
}

/* --------------------------------------------------------------------------
   3. Mouse-Reactive Card Glow
   JS required: see bottom of this file or interactions init in scripts.js
   -------------------------------------------------------------------------- */

.card-glow {
  position: relative;
  overflow: hidden;
}

.card-glow::after {
  content: "";
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(43, 205, 238, 0.12) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.card-glow:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Rose Active/Click State (Kobalt Rose)
   -------------------------------------------------------------------------- */

.glass-card:active,
.card-glow:active {
  border-color: var(--color-rose) !important;
  box-shadow: 0 0 20px rgba(236, 85, 103, 0.15) !important;
}

/* --------------------------------------------------------------------------
   5. Scroll-Triggered Animations
   JS required: IntersectionObserver (see interactions init)
   -------------------------------------------------------------------------- */

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   6. Hero Staggered Reveal
   -------------------------------------------------------------------------- */

.hero-reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-reveal:nth-child(1) {
  animation-delay: 0.1s;
}
.hero-reveal:nth-child(2) {
  animation-delay: 0.25s;
}
.hero-reveal:nth-child(3) {
  animation-delay: 0.4s;
}
.hero-reveal:nth-child(4) {
  animation-delay: 0.55s;
}
.hero-reveal:nth-child(5) {
  animation-delay: 0.7s;
}
.hero-reveal:nth-child(6) {
  animation-delay: 0.85s;
}

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

/* --------------------------------------------------------------------------
   7. Channel Hero (full-viewport centered hero for segment pages)
   Nav (64px) + Announcement (48px) = 112px fixed offset
   -------------------------------------------------------------------------- */

.channel-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: 70px var(--space-lg) var(--space-4xl);
  position: relative;
  text-align: center;
  overflow: hidden;
}

.channel-hero .zone-content {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.channel-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}

.channel-hero .hero-subtitle {
  font-size: var(--text-xl);
  color: var(--color-fg-muted);
  max-width: 700px;
  line-height: 1.6;
  margin: 0;
}

/* Animated badge with ping dot */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  border: 1px solid var(--border-accent);
  background: rgba(43, 205, 238, 0.08);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Rose variant - for security / CISO pages */
.hero-badge--rose {
  border-color: rgba(236, 85, 103, 0.35);
  background: rgba(236, 85, 103, 0.07);
  color: var(--color-rose);
}
.hero-badge--rose .ping::before,
.hero-badge--rose .ping::after {
  background: var(--color-rose);
}

/* Rose outline button - thin red border, no fill */
.btn-outline-rose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid rgba(236, 85, 103, 0.45);
  color: var(--color-rose);
  background: rgba(236, 85, 103, 0.06);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
  cursor: pointer;
}
.btn-outline-rose:hover {
  border-color: rgba(236, 85, 103, 0.75);
  background: rgba(236, 85, 103, 0.13);
  color: #ff7285;
}

.hero-badge .ping {
  position: relative;
  display: flex;
  height: 8px;
  width: 8px;
}

.hero-badge .ping::before {
  content: "";
  position: absolute;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.75;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.hero-badge .ping::after {
  content: "";
  position: relative;
  display: inline-flex;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Channel hero buttons - upgraded from verticals */
.channel-hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding-top: var(--space-sm);
}

.channel-hero .btn-primary {
  background: var(--color-primary);
  color: var(--color-bg);
  border: none;
  font-weight: 800;
  font-size: var(--text-base);
  padding: 16px 36px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(43, 205, 238, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.channel-hero .btn-primary:hover {
  background: var(--color-primary-hover);
  transform: scale(1.05);
  box-shadow: 0 6px 30px rgba(43, 205, 238, 0.4);
}

.channel-hero .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-fg);
  font-weight: 700;
  font-size: var(--text-base);
  padding: 16px 36px;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.channel-hero .btn-secondary:hover {
  border-color: rgba(236, 85, 103, 0.55);
  background: rgba(236, 85, 103, 0.08);
  color: var(--color-rose);
}

/* Hero stat strip */
.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-stat-value {
  font-size: var(--text-2xl);
  font-weight: 900;
  font-family: var(--font-heading);
}

.hero-stat-label {
  font-size: 11px;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-top: 2px;
}

.hero-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   8. Persona Selector Cards (channel pages)
   -------------------------------------------------------------------------- */

.persona-selector {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.persona-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.persona-card {
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  z-index: 2;
}

.persona-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
  z-index: 2;
}

.persona-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  flex-shrink: 0;
  font-family: var(--font-heading);
}

.persona-card-header h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-fg);
  margin: 0;
}

.persona-role {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.persona-pain {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--color-fg-secondary);
  line-height: 1.45;
  border-left: 3px solid var(--color-rose);
  padding-left: var(--space-md);
  font-style: italic;
  position: relative;
  z-index: 2;
}

.persona-metric {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: rgba(236, 85, 103, 0.12);
  color: var(--color-rose);
  font-size: var(--text-sm);
  font-weight: 700;
  border: 1px solid rgba(236, 85, 103, 0.2);
  position: relative;
  z-index: 2;
}

.persona-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  position: relative;
  z-index: 2;
}

.persona-cta svg {
  transition: transform 0.2s;
}

.persona-card:hover .persona-cta svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   9. Responsive Overrides
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .persona-cards {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
  }

  .channel-hero {
    min-height: auto;
    padding-top: 80px;
    padding-bottom: var(--space-4xl);
  }
}

/* ======================================================================
   Nav, header, footer - highest cascade priority
   ====================================================================== */

/* ==========================================================================
   SQUR Shared Nav & Footer Styles
   Mirrors the homepage hp-* styles with generic site-* class names.
   Loaded by all non-homepage pages via <link rel="stylesheet" href="/styles-nav-footer.css">
   ========================================================================== */

/* ==========================================================================
   1. HEADER / NAV BAR
   ========================================================================== */

/* Outer wrapper on pages that load the nav via JS fetch into #header-placeholder.
   Without this, position:sticky on .site-header only works within the
   <header role="banner"> bounds (~80px), so the nav scrolls away. */
header[role="banner"] {
  position: sticky;
  top: 0;
  z-index: 60;
}

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(16, 31, 34, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-nav-bar {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  height: 26px;
  width: auto;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-nav .nav-link {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav .nav-link:hover {
  color: var(--color-primary-hover);
}

.site-nav .nav-link:active {
  color: #ec5567;
}

/* Login CTA - rose: human identity signal (you, the person) */
.site-btn-login {
  display: none;
  padding: 0.5rem 1.25rem;
  border: 1px solid rgba(236, 85, 103, 0.35);
  background: rgba(236, 85, 103, 0.06);
  color: var(--color-rose);
  font-weight: 700;
  border-radius: var(--radius-xl);
  transition: all 0.3s;
  font-size: 0.875rem;
  text-decoration: none;
}

.site-btn-login:hover {
  border-color: rgba(236, 85, 103, 0.65);
  background: rgba(236, 85, 103, 0.12);
  color: #ff7285;
}

/* Demo CTA */
.site-btn-demo-nav {
  display: none;
  padding: 0.625rem 1.5rem;
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: 700;
  border-radius: var(--radius-xl);
  transition: all 0.3s;
  font-size: 0.875rem;
  text-decoration: none;
}

.site-btn-demo-nav:hover {
  background: var(--color-primary-hover);
}

.site-btn-scan-nav {
  display: none;
  padding: 0.625rem 1.5rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-teal));
  color: #000;
  font-weight: 700;
  border-radius: var(--radius-xl);
  transition: all 0.3s;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-btn-scan-nav:hover {
  opacity: 0.88;
}

/* ==========================================================================
   2. HAMBURGER
   ========================================================================== */
.site-hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.site-hamburger span {
  width: 1.5rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.3s;
}

/* ==========================================================================
   3. MOBILE MENU
   ========================================================================== */
.site-mobile-menu {
  display: none;
  flex-direction: column;
  background: rgba(16, 31, 34, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  gap: 1rem;
}

.site-mobile-menu.open {
  display: flex;
}

.site-mobile-menu a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  padding-block: 0.5rem;
  text-decoration: none;
}

.site-mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.site-mobile-actions a {
  flex: 1;
  text-align: center;
  padding-block: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  text-decoration: none;
}

.site-mobile-btn-login {
  border: 1px solid rgba(236, 85, 103, 0.35);
  background: rgba(236, 85, 103, 0.06);
  color: var(--color-rose);
}

.site-mobile-btn-demo {
  background: var(--color-primary);
  color: var(--color-bg);
}

.site-mobile-btn-scan {
  background: linear-gradient(135deg, var(--color-primary), var(--color-teal));
  color: #000;
}

/* ==========================================================================
   4. DROPDOWN
   ========================================================================== */
button.site-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.site-nav .has-dropdown {
  position: relative;
}

/* Dropdown panel */
.site-nav .nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding-top: 8px;
  z-index: 200;
}

.site-nav .nav-dropdown-inner {
  background: #162a2e;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  padding: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.site-nav .nav-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 0.5rem;
  transition: all 0.2s;
  text-decoration: none;
  color: #ffffff;
}

.site-nav .nav-dropdown a:hover {
  background: rgba(43, 205, 238, 0.15);
  color: #ffffff;
}

.site-dropdown-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}

.site-dropdown-subtext {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 2px;
}

.site-nav .has-dropdown:hover .nav-dropdown {
  display: block;
}

/* ==========================================================================
   5. ANNOUNCEMENT BANNER
   ========================================================================== */
.announcement-banner {
  background: linear-gradient(
    90deg,
    rgba(43, 205, 238, 0.08) 0%,
    rgba(16, 31, 34, 0.95) 50%,
    rgba(43, 205, 238, 0.08) 100%
  );
  border-bottom: 1px solid rgba(43, 205, 238, 0.15);
  padding: 10px 0;
  text-align: center;
  position: sticky;
  z-index: 49;
}

.announcement-container {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.announcement-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  border-radius: 9999px;
  border: 1px solid rgba(43, 205, 238, 0.25);
  background: rgba(43, 205, 238, 0.06);
  text-decoration: none;
  transition: all 0.3s ease;
}

.announcement-pill:hover {
  border-color: rgba(43, 205, 238, 0.5);
  background: rgba(43, 205, 238, 0.1);
}

.benchmark-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(43, 205, 238, 0.4);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(43, 205, 238, 0);
  }
}

.pill-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.pill-cta {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.site-footer {
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  padding-inline: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.site-footer-logo {
  height: 3rem;
  opacity: 0.4;
}

.site-footer-company-name {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.625;
  margin-bottom: 0.5rem;
}

.site-footer-address {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.625;
}

.site-footer-heading {
  color: var(--color-fg);
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.site-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  padding: 0;
  margin: 0;
}

.site-footer-links a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.3s;
}

.site-footer-links a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   7. NEWSLETTER (glass card)
   ========================================================================== */
.site-newsletter {
  padding: 2rem;
  margin-bottom: 4rem;
  background: rgba(22, 42, 46, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

.site-newsletter:hover {
  border-color: rgba(43, 205, 238, 0.25);
  box-shadow: 0 0 20px rgba(43, 205, 238, 0.08);
}

.site-newsletter-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.site-newsletter-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-fg);
  margin-bottom: 0.25rem;
}

.site-newsletter-desc {
  font-size: 0.875rem;
  color: #64748b;
}

.site-newsletter-form {
  flex: 1;
  width: 100%;
}

.site-newsletter-fields {
  display: flex;
  gap: 0.75rem;
}

/* Reuse the newsletter-input class from the homepage inline styles for the input itself */
.site-newsletter .newsletter-input {
  background: rgba(22, 42, 46, 0.8);
  border: 1px solid rgba(43, 205, 238, 0.3);
  border-radius: 0.75rem;
  padding: 12px 16px;
  color: white;
  outline: none;
  transition: all 0.3s;
  font-size: 0.9rem;
  flex: 1;
}

.site-newsletter .newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.site-newsletter .newsletter-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(43, 205, 238, 0.4);
}

.site-newsletter-submit {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(to right, var(--color-primary), #22d3ee);
  color: var(--color-bg);
  font-weight: 700;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s;
}

.site-newsletter-submit:hover {
  background: linear-gradient(
    to right,
    var(--color-primary-hover),
    var(--color-primary-hover)
  );
}

/* gradient-text utility for newsletter title */
.site-newsletter .gradient-text {
  background: linear-gradient(135deg, #fff 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Newsletter message */
.site-newsletter .newsletter-message {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  min-height: 20px;
}

.site-newsletter .newsletter-message.success {
  color: #00ff9d;
}

.site-newsletter .newsletter-message.error {
  color: #ff6b6b;
}

/* ==========================================================================
   8. FOOTER BOTTOM BAR
   ========================================================================== */
.site-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 10px;
  color: #475569;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-footer-contact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-footer-contact span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-footer-social {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-footer-social a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.site-footer-social a:hover {
  color: var(--color-fg);
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* sm: 640px */
@media (min-width: 640px) {
  .site-btn-login {
    display: block;
  }
}

/* md: 768px */
@media (min-width: 768px) {
  .site-footer-grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .site-footer-col-wide {
    grid-column: span 2;
  }

  .site-newsletter-inner {
    flex-direction: row;
  }

  .site-footer-bottom {
    flex-direction: row;
  }

  .site-newsletter-fields {
    flex-direction: row;
  }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .site-nav {
    display: flex;
  }

  .site-btn-demo-nav {
    display: block;
  }

  .site-btn-scan-nav {
    display: block;
  }

  .site-hamburger {
    display: none;
  }

  .site-mobile-menu {
    display: none !important;
  }
}

/* Mobile newsletter stacking */
@media (max-width: 767px) {
  .site-newsletter-fields {
    flex-direction: column;
  }

  .site-newsletter-submit {
    width: 100%;
  }
}

/* ==========================================================================
   10. LP MINIMAL VARIANT
   Strips the shared header down to logo + Login + Demo for conversion-focused
   landing pages (e.g. /attack-surface). Hides the mega-dropdown nav, the
   mobile menu + hamburger, and the announcement banner.
   Activate by setting `class="hp lp-minimal"` on <body>.
   ========================================================================== */
body.lp-minimal .site-nav,
body.lp-minimal .site-mobile-menu,
body.lp-minimal .site-hamburger,
body.lp-minimal .announcement-banner {
  display: none !important;
}

/* ==========================================================================
   SCAN BANNER - compact mid-funnel CTA block (homepage + channel pages)
   ========================================================================== */
.scan-banner {
  position: relative;
  overflow: hidden;
  padding: 4rem clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(
      ellipse 70% 80% at 50% 50%,
      rgba(236, 85, 103, 0.1) 0%,
      transparent 70%
    ),
    var(--color-bg, #0b1120);
  border-top: 1px solid rgba(236, 85, 103, 0.12);
  border-bottom: 1px solid rgba(236, 85, 103, 0.12);
  text-align: center;
}

.scan-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}

.scan-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  background: rgba(236, 85, 103, 0.1);
  border: 1px solid rgba(236, 85, 103, 0.25);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff7285;
  margin-bottom: 1rem;
}

.scan-banner-dot {
  width: 5px;
  height: 5px;
  background: #ec5567;
  border-radius: 50%;
  animation: scan-banner-pulse 1.8s ease-in-out infinite;
}

@keyframes scan-banner-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.scan-banner-title {
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: var(--color-fg, #f8fafc);
}

.scan-banner-title em {
  font-style: normal;
  background: linear-gradient(135deg, #ec5567, #ff9a9a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scan-banner-sub {
  font-size: 0.9rem;
  color: rgba(248, 250, 252, 0.5);
  margin-bottom: 1.75rem;
  line-height: 1.55;
}

.scan-banner-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(236, 85, 103, 0.25);
  border-radius: 12px;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  max-width: 400px;
  width: 100%;
  margin: 0 auto 1.25rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.scan-banner-form:focus-within {
  border-color: rgba(236, 85, 103, 0.6);
  box-shadow: 0 0 24px rgba(236, 85, 103, 0.2);
}

.scan-banner-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-fg, #f8fafc);
  font-size: 0.9rem;
  font-family: inherit;
  min-width: 0;
}
.scan-banner-input::placeholder {
  color: rgba(248, 250, 252, 0.3);
}

.scan-banner-btn {
  padding: 0.55rem 1.1rem;
  background: linear-gradient(135deg, #ec5567, #ff7285);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.scan-banner-btn:hover {
  opacity: 0.85;
}

.scan-banner-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.scan-banner-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(248, 250, 252, 0.55);
}

.scan-banner-pill .material-symbols-outlined {
  font-size: 13px;
  color: #ec5567;
  font-variation-settings:
    "FILL" 0,
    "wght" 400;
}

/* ==========================================================================
   SITEWIDE — buttons: less-rounded edges across every common button class.
   Catches all hp-btn-*, site-btn-*, roi-btn-*, lp-cta-btn-*, bd-btn*, nav
   btn-primary/btn-secondary and gradient variants, modal submits, newsletter
   submit, cookie buttons and announcement/scan CTA buttons. Pill-shaped chips
   like .announcement-pill / .benchmark-dot are not matched.
   ========================================================================== */
[class*="hp-btn-"],
[class*="site-btn-"],
[class*="site-mobile-btn-"],
[class*="hp-mobile-btn-"],
[class*="roi-btn-"],
[class*="lp-cta-btn-"],
[class*="bd-btn"],
.hp-cta-primary,
.hp-cta-secondary,
.btn-primary,
.btn-secondary,
.squr-scan-bar-btn,
.squr-bar-modal-submit,
.site-newsletter-submit,
.cookie-btn-accept,
.cookie-btn-secondary {
  border-radius: 10px !important;
}

/* ==========================================================================
   COOKIE BANNER + STICKY SCAN BAR layering.
   Rule: sticky scan bar sits ABOVE the cookie banner visually (closer to
   content), cookie banner sits at the very bottom. The scan bar's
   adjustForCookieBar JS already lifts the bar by cookieBar.offsetHeight
   when the cookie is visible, so we just keep cookie at bottom:0.

   We also add a global body padding-bottom equal to --squr-scan-bar-h so
   page content is never hidden behind the scan bar when scrolled fully down.
   ========================================================================== */
.cookie-banner {
  z-index: 10000 !important;
  bottom: 0 !important;
}
.squr-scan-bar {
  z-index: 10001 !important;
}

body.squr-scan-bar-open {
  padding-bottom: var(--squr-scan-bar-h, 72px);
}

/* ==========================================================================
   MOBILE OVERRIDES - iPhone Pro 13 and smaller (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Inner-page hero zones (about, careers, contact, book-a-demo, etc.) use
     inline padding-block: 6rem 4rem which creates too much space between the
     nav and the first heading on mobile. Roughly halve it site-wide. */
  .zone-hero > .zone-content,
  .zone-hero .hp-container[style*="padding-block"] {
    padding-block: 3rem 2rem !important;
  }
  .hp-hero {
    padding-top: 1rem;
    padding-bottom: 2rem;
    min-height: auto;
    align-items: flex-start;
  }
  .hp-hero-copy > .hp-hero-badge:first-child,
  .hp-hero-copy > .hero-reveal:first-child {
    margin-top: 0;
  }

  /* Hero title — font-size is set dynamically by the auto-fit script in
     index.html (#heroAutoFitTitle). We still supply a sensible pre-JS
     default via clamp() to avoid FOUC jumping, but no !important so the
     inline style the script writes takes over. */
  .hp-hero-title,
  h1.hp-hero-title,
  .hero-reveal.hp-hero-title {
    font-size: clamp(3rem, 20vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    word-break: normal;
    overflow-wrap: normal;
  }
  .hp-hero-title .gradient-text,
  .hp-hero-title .text-white {
    display: block;
    line-height: 0.95;
  }

  /* Announcement banner: keep pill + close side-by-side; don't drop X below */
  .announcement-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .announcement-container > .announcement-pill {
    flex: 1 1 auto;
    min-width: 0;
  }
  #announcementClose {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 6px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
  }

  /* Hero badge on homepage — make it red like the announcement pill,
     with the pulsing dot (benchmark-dot animation already defined). */
  .hp-hero-badge.hp-hero-badge--rose {
    border-color: rgba(236, 85, 103, 0.35);
    background: rgba(236, 85, 103, 0.06);
  }
  .hp-hero-badge .benchmark-dot {
    width: 8px;
    height: 8px;
    background: var(--color-rose, #ec5567);
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-dot 2s ease-in-out infinite;
  }

  /* Mobile nav accordion (shared site header) */
  .site-mobile-accordion {
    padding: 0;
    margin: 0;
  }
  .site-mobile-accordion > summary {
    list-style: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.55rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .site-mobile-accordion > summary::-webkit-details-marker {
    display: none;
  }
  .site-mobile-accordion-caret {
    transition: transform 0.2s ease;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
  }
  .site-mobile-accordion[open] > summary > .site-mobile-accordion-caret {
    transform: rotate(180deg);
  }
  .site-mobile-accordion > a,
  .site-mobile-accordion > details > a {
    display: block;
    padding: 0.45rem 0 0.45rem 0.9rem;
    border-left: 1px solid rgba(43, 205, 238, 0.18);
    margin-left: 0.25rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
  }
  .site-mobile-accordion--nested {
    margin-left: 0.85rem;
  }
  .site-mobile-accordion--nested > summary {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    padding-block: 0.4rem;
  }
  .site-mobile-all-solutions {
    display: block;
    padding: 0.6rem 0 0.6rem 0.9rem;
    color: var(--color-primary, #2bcdee) !important;
    font-weight: 600;
  }

  /* Stat strip - prevent horizontal overflow on narrow screens */
  /* Footer - consistent left/right breathing room across every page.
     Apply to both shared footer and homepage inline footer so text never
     touches the screen edge on mobile. */
  .site-footer,
  .hp-footer {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .site-footer-grid,
  .hp-footer-grid {
    gap: 2rem;
  }
  .site-footer-bottom,
  .hp-footer-bottom {
    padding-inline: 0;
  }

  /* Newsletter card - inset from viewport edges so glass card has breathing room */
  .site-newsletter {
    padding: 1.5rem 1.25rem;
    margin-inline: 0.25rem;
  }
  .site-newsletter-fields {
    flex-direction: column;
    gap: 0.65rem;
  }
  .site-newsletter-fields .newsletter-input,
  .site-newsletter-fields .site-newsletter-submit {
    width: 100%;
  }

  /* ROI calculator CTA strip - give breathing room before footer */
  .roi-cta-strip {
    margin-bottom: 3rem;
  }
  main ~ #site-footer,
  .roi-cta-strip + * {
    padding-top: 1.5rem;
  }

  /* Stat strip - prevent horizontal overflow on narrow screens */
  .hp-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    align-items: start;
  }
  .hp-stat-strip .hp-stat-divider {
    display: none;
  }
  .hp-stat-value {
    font-size: 1.15rem;
  }
  .hp-stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
  }

  /* Product video — cap size on mobile so it doesn't dominate the hero.
     Root cause of the overflow was the parent grid: grid-template-columns
     defaults to minmax(auto, 1fr) which prevents tracks shrinking below
     intrinsic content size (520px browser-chrome here). Override to
     minmax(0, 1fr) so the grid can shrink to viewport width. */
  .hp-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .asset-showcase,
  .asset-card,
  .hp-browser-chrome,
  .hp-video-container,
  .hp-video {
    min-width: 0;
    max-width: 100%;
  }
  .asset-showcase {
    margin-inline: auto;
  }
  .hp-video-container,
  .hp-video-mobile-poster {
    max-height: 40vh;
    height: auto;
  }
  .hp-video-container {
    aspect-ratio: 16 / 9;
  }
  .hp-video,
  .hp-video-mobile-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Benefit slide - space between checklist and product image on mobile */
  .hp-benefit-slide-grid {
    gap: 1.75rem;
  }
  .hp-benefit-image {
    margin-top: 1rem;
  }

  /* Generic hero h1 - prevent oversized headings on small screens */
  .hero-content h1,
  .trust-center-hero h1,
  #hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  /* Section h2 headings */
  #pricing h2,
  .intro-text h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* Inner page hero padding */
  .trust-center-hero {
    padding: 80px 0 48px;
  }

  /* Logo in site header - matches homepage mobile logo size */
  .site-logo {
    height: 34px;
  }
  .hp-logo {
    height: 34px;
  }

  /* Mobile menu "For you" accordion */
  .hp-mobile-accordion {
    padding: 0;
    margin: 0;
  }
  .hp-mobile-accordion > summary {
    list-style: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    font-weight: 500;
    padding-block: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hp-mobile-accordion > summary::-webkit-details-marker {
    display: none;
  }
  .hp-mobile-accordion-caret {
    transition: transform 0.2s ease;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
  }
  .hp-mobile-accordion[open] .hp-mobile-accordion-caret {
    transform: rotate(180deg);
  }
  .hp-mobile-accordion > a {
    display: block;
    padding: 0.45rem 0 0.45rem 0.85rem;
    border-left: 1px solid rgba(43, 205, 238, 0.18);
    margin-left: 0.25rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
  }

  /* Testimonial slide on book-a-demo - let active slide define its own height
     so text isn't clipped inside an auto-height absolute stack */
  .bd-testimonial-wrapper .testimonial-slide {
    position: static;
    display: none;
  }
  .bd-testimonial-wrapper .testimonial-slide.active {
    display: flex;
  }
  .bd-testimonial-wrapper .bd-testimonial-text {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Platform screenshots carousel - make full image visible, remove overlap,
     reduce vertical padding, enable tap-to-zoom hint */
  .preview-carousel .carousel-slides {
    min-height: 0 !important;
    border-radius: 14px;
  }
  .preview-carousel .carousel-slide {
    position: static !important;
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .preview-carousel .carousel-slide.active {
    display: flex !important;
  }
  .preview-carousel .carousel-slide img {
    max-height: none !important;
    cursor: zoom-in;
    width: 100%;
    height: auto;
  }
  .preview-carousel .slide-caption {
    position: static !important;
    padding: 10px 16px;
    border-radius: 0 0 14px 14px;
  }
  .preview-carousel .carousel-dots {
    margin-top: 16px;
  }

  /* Section padding reduction for old-style sections */
  #features,
  #testimonials,
  #pricing,
  #call-to-action,
  .blog-carousel {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ============================================
   SQUR MOBILE RESPONSIVE FIX
   Target: iPhone 13 Pro (390px) and narrower
   Applied: April 2026
   ============================================ */

/* ── GLOBAL: Prevent horizontal overflow everywhere ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* ── FOOTER: Logo fix (all screen sizes) ── */
.site-footer-logo {
  opacity: 1 !important; /* Was 0.4 - make fully white */
  height: 2.1rem !important; /* Was 3rem - 30% smaller */
  filter: brightness(0) invert(1); /* Ensure logo renders white */
}

/* ============================================
   BREAKPOINT: max-width 640px (mobile)
   ============================================ */
@media (max-width: 640px) {
  /* ── 1. READING ROOM: Minimum 10px padding on all sides ── */
  .hp-container,
  .hp-hero-grid,
  .hp-container-sm,
  .hp-container-narrow,
  .section-grid,
  .site-footer,
  .hp-nav-bar {
    padding-inline: clamp(10px, 4vw, 1.5rem);
    width: 100%;
    max-width: 100%;
  }

  /* ── 2. H1 FONT SIZE: BIG hero title on mobile — no downscale here. The
     authoritative mobile rule is earlier in this file (clamp(3rem, 16vw,
     5.5rem)). This block used to shrink it and was conflicting. */

  /* ── 3. H2 FONT SIZE: Scale down slightly ── */
  h2,
  .hp-section-title {
    font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
    line-height: 1.25;
  }

  /* ── 4. STATS BADGE: Wrap text, constrain width ── */
  .hp-hero-badge,
  [class*="benchmark-badge"],
  [class*="badge"] {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ── 5. CTA BUTTONS: Stack vertically ── */
  .hp-cta-buttons {
    flex-direction: column !important;
    width: 100%;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hp-cta-buttons a,
  .hp-cta-buttons button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ── 6. HERO STATS CARDS: Stack vertically ── */
  .hp-hero-stats,
  [class*="hero-stats"],
  [class*="stats-row"] {
    flex-direction: column !important;
    width: 100%;
    gap: 1rem;
    align-items: stretch;
  }

  /* ── 7. DEMO SECTION: Constrain video/iframe/image ── */
  [class*="demo"] video,
  [class*="demo"] iframe,
  [class*="demo"] img,
  .hp-demo-video,
  .hp-demo-frame {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  /* ── 8. BUILT FOR YOUR ROLE: Fix offset card positioning ── */
  .hp-icp-section [class*="cards"],
  .hp-icp-section [class*="card-wrap"],
  .hp-icp-section [class*="tab-content"] {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
    padding-inline: 10px;
  }

  /* ── 9. TRUSTED LOGOS: Wrap and constrain ── */
  [class*="trusted-logos"],
  [class*="logo-row"],
  [class*="partners-row"] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 100%;
    overflow: hidden;
  }

  [class*="trusted-logos"] img,
  [class*="logo-row"] img,
  [class*="partners-row"] img {
    max-width: 110px;
    height: auto;
  }

  /* ── 10. FOOTER GRID: Two-column layout for nav categories ── */
  .site-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem 1rem;
  }

  /* Wide column (company info/newsletter) spans full width */
  .site-footer-col-wide {
    grid-column: 1 / -1;
  }

  /* ── 11. FOOTER: Ensure reading room (min 10px) ── */
  .site-footer {
    padding-inline: max(10px, 1rem);
  }

  .site-footer-bottom {
    padding-inline: max(10px, 1rem);
    text-align: left;
  }

  /* ── 12. PREVENT any section overflow ── */
  section,
  .zone,
  [class*="section"],
  [class*="zone"] {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ============================================
   SQUR MOBILE RESPONSIVE FIX - Round 2
   Target: iPhone 13 Pro (390pt) critical clipping
   Fixes identified in design critique (Apr 2026)
   Follows SQUR brand: --color-primary (#2bcdee),
   --color-fg-muted for AA body text,
   --radius-xl for cards
   ============================================ */
@media (max-width: 767px) {
  /* ── NEWSLETTER: Stack input + button vertically so Subscribe
        button no longer clips off the right viewport edge ── */
  .hp-newsletter {
    padding: 1.5rem;
  }

  .hp-newsletter-fields {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hp-newsletter-fields .newsletter-input {
    width: 100%;
    min-width: 0;
  }

  .hp-newsletter-submit {
    width: 100%;
    padding: 0.875rem 1.5rem;
    min-height: 44px; /* Apple HIG tap target */
  }

  /* ── BROWSER CHROME (pipeline demo): Allow wrap so the
        VERIFIED badge doesn't clip off the right edge ── */
  .hp-browser-chrome {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    row-gap: 0.5rem;
  }

  .hp-browser-url {
    font-size: 0.6875rem; /* 11px */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
  }

  .hp-browser-badge {
    font-size: 9px;
    padding: 0.25rem 0.5rem;
    flex-shrink: 0;
  }

  /* ── DEMO STATS (247 / 244 / 3): Reduce padding + value size
        so third column ("VERIFIED") doesn't truncate ── */
  .hp-demo-stats {
    gap: 0.5rem;
  }

  .hp-demo-stat {
    padding: 0.75rem 0.5rem;
    min-width: 0;
  }

  .hp-demo-stat-label {
    font-size: 9px;
    letter-spacing: 0.06em;
    /* Allow slight wrapping rather than truncation */
    white-space: normal;
    line-height: 1.2;
  }

  .hp-demo-stat-value {
    font-size: 1.25rem;
  }

  /* ── DEMO CODE BLOCK: Horizontal scroll preserves readability
        instead of breaking mid-command ── */
  .hp-demo-code {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre;
    font-size: 10.5px;
    padding: 0.75rem 0.875rem;
    line-height: 1.6;
  }

  /* ── DEMO FOOTER: Stack "2 more verified findings" and
        "~90% noise eliminated" vertically on narrow screens ── */
  .hp-demo-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .hp-demo-finding-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* ── CASE STUDY CARDS: Stack badge above timestamp and allow
        badge text to stay on one line so "HIGH SEVERITY -
        CONFIRMED" doesn't break awkwardly ── */
  .hp-case-card {
    padding: 1.5rem;
  }

  .hp-case-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }

  .hp-case-badge {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hp-case-time {
    font-size: 0.6875rem;
    flex-shrink: 0;
  }

  .hp-case-title {
    font-size: 1rem;
    line-height: 1.3;
  }

  /* ── BENEFIT TITLES (Start Testing in Minutes): Fluid typography
        prevents hero-sized H3s on 390pt viewports ── */
  .hp-benefit-title {
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    line-height: 1.2;
  }

  .hp-benefits-section {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .hp-benefit-tabs {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hp-benefit-tabs::-webkit-scrollbar {
    display: none;
  }

  .hp-benefit-tab {
    flex-shrink: 0;
    font-size: 0.8125rem;
    padding: 0.625rem 1rem;
  }

  /* ── FOOTER BOTTOM BAR: Tighten vertical rhythm & keep text
        left-aligned for better scanning on mobile ── */
  .hp-footer-bottom {
    gap: 1rem;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .hp-footer-contact,
  .hp-footer-social {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ── Announcement banner scroll-hide ── */
.announcement-banner {
  transition: transform 0.3s ease;
}
.announcement-banner.banner-hidden {
  transform: translateY(-100%);
}