/* ============================================
   SORT RESIDENTIAL — Premium Marketing Site
   Light theme · Animated · Professional
   ============================================ */

/* === Translate Widget (bottom-left) === */
.translate-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 4px 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-family: 'Inter', sans-serif;
}

.translate-widget .goog-te-gadget {
  font-size: 0;
}

.translate-widget .goog-te-gadget select {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 4px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

/* Hide Google Translate top bar */
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame {
  display: none !important;
}

body { top: 0 !important; }

/* === Reset & Base === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #FFFFFF;
  color: #334155;
  overflow-x: hidden;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

/* === Accessibility: skip-to-content link === */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: #0F172A;
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: rgba(0, 46, 87, 0.2);
  color: #0F172A;
}

/* === Custom Scrollbar === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* === Cursor Glow === */
.cursor-glow {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 46, 87, 0.18) 0%, rgba(91, 135, 174, 0.08) 30%, rgba(30, 58, 95, 0.04) 50%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.3s ease;
  mix-blend-mode: normal;
  filter: blur(2px);
}

.cursor-glow.hovering {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 46, 87, 0.25) 0%, rgba(91, 135, 174, 0.12) 25%, rgba(154, 16, 16, 0.05) 45%, transparent 65%);
  filter: blur(0px);
}

/* === Ambient Energy Pulse === */
.energy-pulse {
  position: fixed;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 46, 87, 0.12) 0%, rgba(91, 135, 174, 0.04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  animation: energyPulseExpand 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.energy-ring {
  position: fixed;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 46, 87, 0.15);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  animation: energyRingExpand 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes energyPulseExpand {
  0% { width: 0; height: 0; opacity: 0.6; }
  30% { opacity: 0.4; }
  100% { width: 800px; height: 800px; opacity: 0; }
}

@keyframes energyRingExpand {
  0% { width: 0; height: 0; opacity: 0.5; }
  40% { opacity: 0.3; }
  100% { width: 1000px; height: 1000px; opacity: 0; }
}

/* === Click Ripple Waves === */
.click-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%) scale(0);
  mix-blend-mode: screen;
}

.click-ripple-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 46, 87, 0.6);
  opacity: 0;
}

@keyframes rippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes rippleRing1 {
  0% {
    transform: scale(0.1);
    opacity: 0.8;
    border-width: 3px;
    border-color: rgba(0, 46, 87, 0.8);
  }
  100% {
    transform: scale(1);
    opacity: 0;
    border-width: 1px;
    border-color: rgba(0, 46, 87, 0);
  }
}

@keyframes rippleRing2 {
  0% {
    transform: scale(0.1);
    opacity: 0.6;
    border-width: 2px;
    border-color: rgba(91, 135, 174, 0.7);
  }
  100% {
    transform: scale(1);
    opacity: 0;
    border-width: 1px;
    border-color: rgba(91, 135, 174, 0);
  }
}

@keyframes rippleRing3 {
  0% {
    transform: scale(0.1);
    opacity: 0.4;
    border-width: 2px;
    border-color: rgba(154, 16, 16, 0.5);
  }
  100% {
    transform: scale(1);
    opacity: 0;
    border-width: 1px;
    border-color: rgba(154, 16, 16, 0);
  }
}

@keyframes rippleGlow {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.5;
  }
  40% {
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* === Layout === */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: none;
  text-align: center;
  position: relative;
  overflow: hidden;
  letter-spacing: -0.01em;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  /* Blue 700/800 so white label text meets WCAG AA (4.5:1); #002E57 was only 3.1:1 */
  background: linear-gradient(135deg, #12395E, #2E5F8F);
  color: #fff;
  box-shadow: 0 4px 24px rgba(0, 46, 87, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(0, 46, 87, 0.4);
}

.btn-outline {
  background: transparent;
  color: #2E5F8F;
  border: 2px solid rgba(0, 46, 87, 0.5);
}

.btn-outline:hover {
  background: rgba(0, 46, 87, 0.08);
  border-color: #002E57;
  color: #001B34;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 46, 87, 0.2);
}

.btn-glass {
  background: rgba(0, 46, 87, 0.1);
  color: #2E5F8F;
  border: 2px solid rgba(0, 46, 87, 0.5);
  backdrop-filter: blur(12px);
}

.btn-glass:hover {
  background: rgba(0, 46, 87, 0.18);
  border-color: rgba(0, 46, 87, 0.7);
  color: #001B34;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 46, 87, 0.25);
}

.btn-glass-dark {
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-glass-dark:hover {
  background: #F8FAFC;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-white {
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

.btn-sm { padding: 8px 20px; font-size: 14px; border-radius: 10px; }
.btn-lg { padding: 16px 36px; font-size: 16px; border-radius: 14px; }

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #0F172A;
  border: 1.5px solid #CBD5E1;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-download:hover {
  border-color: #002E57;
  color: #002E57;
  background: rgba(0, 46, 87, 0.05);
  box-shadow: 0 4px 20px rgba(0, 46, 87, 0.15);
  transform: translateY(-1px);
}
.btn-download svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-download:hover svg {
  transform: translateY(2px);
}

/* === Gradient Text === */
.gradient-text {
  background: linear-gradient(135deg, #002E57, #5B87AE, #9A1010);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Section Tags & Headers === */
.section-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(0, 46, 87, 0.08);
  color: #002E57;
  border: 1px solid rgba(0, 46, 87, 0.15);
  margin-bottom: 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  color: #0F172A;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.section-desc {
  font-size: 18px;
  color: #64748B;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* === Reveal Animations === */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Section-level clip reveal (Step Inc style) */
.section-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section-reveal.revealed {
  clip-path: inset(0 0 0 0);
}

/* Tighter, sequential reveal: nav (instant) → hero text → 3x3 grid.
   Hero text now finishes by ~0.65s so the grid (triggered at 600ms in JS)
   doesn't have to fight for attention with mid-flight hero copy. */
.delay-1 { transition-delay: 0.05s; }
.delay-2 { transition-delay: 0.12s; }
.delay-3 { transition-delay: 0.20s; }
.delay-4 { transition-delay: 0.28s; }
.delay-5 { transition-delay: 0.36s; }

/* ========================
   NAVIGATION
   ======================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 10px 0;
}

/* While the mobile menu is open the nav must not carry a backdrop-filter:
   a filtered ancestor becomes the containing block for fixed descendants,
   which pins the full-screen .nav-links overlay inside the nav's own box —
   on a scrolled page the menu showed up clipped to navbar height. The
   overlay covers the viewport anyway, so dropping the blur is invisible. */
/* Mobile-only Sign In section injected into #navLinks by script.js;
   desktop keeps the top-bar dropdown, so hide it outside the overlay. */
.nav-mobile-login {
  display: none;
}

.nav.menu-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* transition:none so the filter drops instantly — while it animates the
     containing block persists and the menu still opens clipped. */
  transition: none;
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: 2px;
  flex-shrink: 0;
}

.nav-logo img {
  border-radius: 8px;
}

/* === Logo dictionary card (convivialconcierge.com only) ===
   scripts/build-convivial-site.mjs inserts .brand-def into the nav logo on the
   Convivial build; it stays hidden on convivialconcierge.com and on touch screens. */
.brand-def {
  display: none;
}

@media (hover: hover) {
  .nav-logo {
    position: relative;
  }

  .brand-def {
    display: block;
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    width: 380px;
    padding: 18px 20px 14px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.5;
    color: #334155;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    pointer-events: none;
    z-index: 1001;
  }

  .nav-logo:hover .brand-def,
  .nav-logo:focus-visible .brand-def {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s;
  }
}

.brand-def-entry {
  display: block;
  margin-bottom: 12px;
}

.brand-def-word {
  font-size: 20px;
  font-weight: 700;
  color: #9A1010;
}

.brand-def-entry + .brand-def-entry .brand-def-word {
  color: #002E57;
}

.brand-def-pos {
  margin-left: 6px;
  font-style: italic;
  color: #64748B;
}

.brand-def-text {
  display: block;
  margin-top: 2px;
}

.brand-def-entry + .brand-def-entry {
  padding-top: 12px;
  border-top: 1px solid #E2E8F0;
}

.brand-def-entry:last-child {
  margin-bottom: 0;
}

.brand-def-src {
  display: block;
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94A3B8;
}

/* === Brand lockup optical alignment ===
   The navy-bell lockups carry their artwork at the BOTTOM of their own
   viewBox, with a large empty band above it:

     horizontal (1150x152)  51 units empty above the mark,  6 below  -> 14.47% low
     stacked    (460x400)   82 units empty above the mark, 20 below  ->  7.63% low

   So a flex row that centres the <img> box perfectly still renders the visible
   logo well below the optical centre — in the site nav the wordmark dropped
   below the nav-links' baseline, and in the dark footer it sat too close to the
   copyright line. Nudge the image, never the artwork: the mark is design-locked,
   and re-cropping the viewBox would change its aspect ratio (7.57:1 -> 12.1:1)
   and resize the logo on all ~30 pages that hard-code width/height.

   Matched on the filename rather than a wrapper class because these lockups
   appear under several different parents (.nav-logo, .footer-dark-brand, .logo,
   bare <img>), and the suffix match covers every relative path prefix in use
   ("brand/", "/brand/", "../brand/", "../../brand/").
   Percentage units keep the correction exact at every rendered size. */
img[src$="sort-lockup-navy-horizontal.svg"],
img[src$="sort-lockup-navy-horizontal-dark.svg"] {
  transform: translateY(-14.47%);
}

img[src$="sort-lockup-navy-stacked.svg"],
img[src$="sort-lockup-navy-stacked-dark.svg"] {
  transform: translateY(-7.63%);
}

/* The navy-bell lockup is a wide mark (1236×152, 8.13:1) — much wider than the
   funnel wordmark it replaced. .nav-logo is flex-shrink:0, so without a cap the
   logo squeezes the nav CTA off-screen on narrow viewports. */
@media (max-width: 900px) {
  .nav-logo img { width: 215px; height: auto; }
}
@media (max-width: 480px) {
  .nav-logo img { width: 181px; height: auto; max-width: 100%; }
  /* Let the logo give up a little width rather than push a longer CTA
     ("Download Convivial") past the right edge on small phones. */
  .nav-inner { gap: 12px; }
  .nav-logo { flex-shrink: 1; min-width: 0; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  transition: color 0.3s ease;
  position: relative;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #002E57, #5B87AE);
  transition: width 0.3s ease;
  border-radius: 1px;
}

.nav-link:hover {
  color: #0F172A;
}

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

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: #0F172A;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* === Nav Mega Dropdowns === */
.nav-dropdown-wrapper {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 8px 0;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-dropdown-trigger:hover {
  color: #002E57;
}

.nav-dropdown-trigger.active {
  color: #002E57;
}

.nav-dropdown-trigger svg {
  transition: transform 0.3s ease;
}

.nav-dropdown-trigger.active svg {
  transform: rotate(180deg);
}

.nav-mega-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 320px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 1000;
}
/* Invisible bridge so the cursor never leaves :hover between trigger + menu.
   Without this, the 4px gap between button and dropdown caused the menu to
   close mid-click. */
.nav-mega-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-mega-dropdown.open,
.nav-dropdown-wrapper:hover > .nav-mega-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-wrapper:hover > .nav-dropdown-trigger {
  color: #002E57;
}

.nav-dropdown-wrapper:hover > .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown-sm {
  min-width: 200px;
  padding: 8px;
}

.mega-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  color: #334155;
  transition: all 0.2s ease;
}

.mega-option:hover {
  background: rgba(0, 46, 87, 0.04);
}

.mega-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mega-label {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  margin-bottom: 2px;
}

.mega-desc {
  font-size: 12px;
  color: #64748b;
}

.mega-option-simple {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  transition: all 0.2s ease;
}

.mega-option-simple:hover {
  background: rgba(0, 46, 87, 0.04);
  color: #002E57;
}

/* Landlord mega dropdown with CTA sidebar */
.mega-dropdown-grid {
  display: flex;
  gap: 0;
}

.mega-dropdown-col {
  flex: 1;
  min-width: 240px;
}

.mega-dropdown-cta {
  width: 200px;
  background: linear-gradient(135deg, #002E57, #2E5F8F);
  border-radius: 16px;
  padding: 20px;
  margin: 4px;
  display: flex;
  flex-direction: column;
}

.mega-cta-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.mega-cta-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

/* === Login Dropdown === */
.nav-login-wrapper {
  position: relative;
}

.nav-login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: #0F172A;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  transition: all 0.3s ease;
}

.nav-login-btn:hover {
  border-color: #002E57;
  color: #002E57;
}

.nav-login-btn.active {
  border-color: #002E57;
  color: #002E57;
}

.nav-login-btn.active svg {
  transform: rotate(180deg);
}

.nav-login-btn svg {
  transition: transform 0.3s ease;
}

.nav-login-dropdown {
  position: absolute;
  /* No gap between button and dropdown — the cursor used to lose :hover
     when crossing the empty space, killing the menu. The button bottom
     and dropdown top now touch. */
  top: 100%;
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  /* Extra top padding creates an invisible "bridge" the cursor can travel
     through without leaving the dropdown's hover zone. */
  padding: 14px 8px 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all 0.25s ease;
  z-index: 1000;
}

.nav-login-dropdown.open,
.nav-login-wrapper:hover > .nav-login-dropdown,
.nav-login-wrapper.open > .nav-login-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-login-wrapper:hover > .nav-login-btn {
  border-color: #002E57;
  color: #002E57;
}

.nav-login-wrapper:hover > .nav-login-btn svg {
  transform: rotate(180deg);
}

.login-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.login-option:hover {
  background: rgba(0, 46, 87, 0.06);
  color: #002E57;
}

.login-option svg {
  flex-shrink: 0;
  color: #94A3B8;
  transition: color 0.2s ease;
}

.login-option:hover svg {
  color: #002E57;
}

/* ========================
   HERO
   ======================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 120px 40px 80px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(0, 46, 87, 0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(154, 16, 16, 0.04) 0%, transparent 50%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: orbFloat 20s ease-in-out infinite;
}

.hero-orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(0, 46, 87, 0.06);
  top: 10%;
  left: 15%;
}

.hero-orb-2 {
  width: 300px;
  height: 300px;
  background: rgba(154, 16, 16, 0.04);
  bottom: 20%;
  right: 10%;
  animation-delay: -7s;
}

.hero-orb-3 {
  width: 200px;
  height: 200px;
  background: rgba(91, 135, 174, 0.05);
  top: 60%;
  left: 50%;
  animation-delay: -14s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-20px, 30px) scale(0.95); }
  75% { transform: translate(20px, 20px) scale(1.02); }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  flex-shrink: 0;
  padding: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #002E57;
  background: rgba(0, 46, 87, 0.06);
  border: 1px solid rgba(0, 46, 87, 0.12);
  margin-bottom: 28px;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.8s ease;
  cursor: default;
}

.hero-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 46, 87, 0.15);
  border-color: rgba(0, 46, 87, 0.3);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #002E57;
  animation: badgePulse 2s ease-in-out infinite;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.8s ease;
}

.hero-badge:hover .badge-dot {
  transform: scale(1.8);
  box-shadow: 0 0 12px rgba(0, 46, 87, 0.6);
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 46, 87, 0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(0, 46, 87, 0); }
}

.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.hero-title span {
  display: block;
}

.hero-subtitle {
  font-size: 18px;
  color: #64748B;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 540px;
}

/* Wave-on-hover for the hero subtitle: each char ripples up sequentially */
.hero-subtitle--wave {
  cursor: default;
}
.hero-subtitle--wave .wave-char {
  display: inline-block;
  transition: color 0.3s ease;
  will-change: transform;
}
.hero-subtitle--wave .wave-word {
  display: inline-block;
  white-space: nowrap;
}
.hero-subtitle--wave:hover .wave-char,
.hero-subtitle--wave.wave-init .wave-char {
  animation: hero-wave 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.022s) 1;
}
@keyframes hero-wave {
  0%   { transform: translateY(0); color: inherit; }
  35%  { transform: translateY(-12px) scale(1.08); color: #002E57; }
  60%  { transform: translateY(2px); color: #DC2626; }
  100% { transform: translateY(0); color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-subtitle--wave:hover .wave-char,
  .hero-subtitle--wave.wave-init .wave-char { animation: none; }
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: #64748b;
}

.proof-avatars {
  display: flex;
}

.proof-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #FFFFFF;
  margin-right: -8px;
}

.proof-avatar:last-child { margin-right: 0; }

.proof-logos {
  display: flex;
  align-items: center;
  gap: 20px;
}

.proof-logo-link {
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.proof-logo-link:hover {
  opacity: 0.8;
}

.proof-logo {
  height: 32px;
  width: auto;
  transition: transform 0.2s ease;
}

.proof-logo-link:hover .proof-logo {
  transform: scale(1.05);
}

/* Hero Visual */
/* ========================
   3x3 FEATURE GRID
   ======================== */
/* ============================================
   MOSAIC FEATURE GRID — Esusu-inspired
   Mixed card colors, photos, illustrations,
   premium shadows, scroll reveals, gentle spotlight cycle
   ============================================ */
.hero-grid-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
  perspective: 1200px;
}
.fg-clip {
  position: relative;
  border-radius: 28px;
}
.fg-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
  aspect-ratio: 1;
  max-height: calc(100vh - 200px);
  max-width: calc(100vh - 200px);
  width: 100%;
  position: relative;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 30px 60px rgba(15, 29, 54, 0.18));
}
@media (max-width: 768px) {
  .fg-container { gap: 10px; }
}

/* ── Base card ── */
.fg-cell {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  /* Visible by default. The entrance plays via a CSS animation (time-based,
     not JS) so the feature grid ALWAYS appears — previously the cells stayed at
     opacity:0 until a script added .fg-in, and if that script didn't run the
     whole grid was invisible (blank right half + footer riding up the page).
     animation-fill-mode is "backwards" (not forwards) so the finished animation
     doesn't pin the transform and break the hover tilt below. */
  opacity: 1;
  animation: fgCellIn 0.7s cubic-bezier(0.22, 1.32, 0.36, 1) backwards;
  animation-delay: calc(0.6s + var(--cell-idx, 0) * 0.06s);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    filter 0.4s ease;
  will-change: transform;
  box-shadow: 0 4px 14px rgba(15, 29, 54, 0.06), 0 1px 2px rgba(15, 29, 54, 0.04);
}
@keyframes fgCellIn {
  from {
    opacity: 0;
    transform:
      translate(var(--fg-x, 0px), var(--fg-y, 30px))
      rotate(var(--fg-rot, 0deg))
      scale(0.55);
  }
}
/* JS may still add .fg-in (legacy); keep it pinned to the visible end state. */
.fg-cell.fg-in {
  opacity: 1;
  transform: none;
}
/* Per-cell entry direction (top row from top, mid row from sides, btm row from bottom) */
.fg-cell[data-cell="0"] { --fg-x: -120px; --fg-y: -80px; --fg-rot: -12deg; }
.fg-cell[data-cell="1"] { --fg-x: 0px;    --fg-y: -140px; --fg-rot: 6deg; }
.fg-cell[data-cell="2"] { --fg-x: 120px;  --fg-y: -80px; --fg-rot: 12deg; }
.fg-cell[data-cell="3"] { --fg-x: -160px; --fg-y: 0px;   --fg-rot: -8deg; }
.fg-cell[data-cell="4"] { --fg-x: 0px;    --fg-y: 0px;   --fg-rot: 0deg; }
.fg-cell[data-cell="5"] { --fg-x: 160px;  --fg-y: 0px;   --fg-rot: 8deg; }
.fg-cell[data-cell="6"] { --fg-x: -120px; --fg-y: 80px;  --fg-rot: 10deg; }
.fg-cell[data-cell="7"] { --fg-x: 0px;    --fg-y: 140px; --fg-rot: -5deg; }
.fg-cell[data-cell="8"] { --fg-x: 120px;  --fg-y: 80px;  --fg-rot: -10deg; }
.fg-cell:hover {
  transform: translateY(-4px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(1.02);
  box-shadow: 0 24px 48px rgba(15, 29, 54, 0.18), 0 4px 10px rgba(15, 29, 54, 0.08);
  z-index: 2;
}
.fg-cell.fg-spot {
  box-shadow: 0 18px 40px rgba(0, 46, 87, 0.28), 0 0 0 2px rgba(0, 46, 87, 0.4);
  z-index: 3;
  filter: saturate(1.15);
}

.fg-thumb {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 14px 14px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  z-index: 1;
  min-height: 0;
}
@media (max-width: 768px) {
  .fg-thumb { padding: 12px 12px 12px; gap: 8px; }
}

/* ── Titles (RED / WHITE / BLUE palette) ── */
.fg-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  flex-shrink: 0;
}
.fg-title--dark { color: #0F1D36; }
.fg-title--photo { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.fg-stat {
  font-size: 10px;
  font-weight: 700;
  color: #93B0C9;
  margin-top: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fg-stat--muted { color: #002E57; }
.fg-stat--red { color: #DC2626; }
.fg-stat--blue { color: #002E57; }
.fg-stat--white { color: rgba(255,255,255,0.85); }
.fg-stat--photo { color: rgba(255,255,255,0.92); text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
@media (max-width: 768px) {
  .fg-title { font-size: 13px; }
  .fg-stat { font-size: 9px; }
}

/* ── Bottom-row cards: treatment follows the BACKGROUND, not the card ──
   "Resident Satisfaction" and "Help Neighbors Connect" swapped grounds, so
   the pieces painted for the old ground have to swap with them. Scoped to
   the background variant rather than the card, so the pairing can't drift
   apart again if the cards move. */

/* Connect card, now on the LIGHT ground: its white connector, message and
   heart would all be invisible. */
.fg-cell--dark .fg-connect-msg { color: rgba(15, 29, 54, 0.72); }
.fg-cell--dark .fg-connect-heart {
  color: #DC2626;
  text-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

/* Satisfaction card, now on the NAVY ground: near-black score text would
   disappear into it, and #DC2626 stars sit at roughly 2:1 against #002E57 —
   so the stars take the amber already used elsewhere in the sheet, which is
   also the conventional colour for a rating. */
.fg-cell--purple .fg-sat-score { color: #fff; }
.fg-cell--purple .fg-sat-score span { color: rgba(255, 255, 255, 0.6); }
.fg-cell--purple .fg-sat-star {
  color: #F59E0B;
  text-shadow: 0 1px 2px rgba(245, 158, 11, 0.25);
}
.fg-cell--purple .fg-sat-star--half {
  background: linear-gradient(90deg, #F59E0B 50%, rgba(245, 158, 11, 0.3) 50%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Card variants — Layout zones (RED / WHITE / BLUE) ──
   RED:   cell 0 (top-L), cell 1 (top-M), cell 3 (mid-L)
   WHITE: cell 2 (top-R), cell 4 (center), cell 6 (btm-L)  ← anti-diagonal
   BLUE:  cell 5 (mid-R), cell 7 (btm-M), cell 8 (btm-R)
   Class names kept for animation continuity, redefined to new zones. */

/* RED zone */
.fg-cell--cream,
.fg-cell--accent,
.fg-cell--teal {
  background: linear-gradient(150deg, #EF4444 0%, #B91C1C 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.fg-cell--cream::before,
.fg-cell--accent::before,
.fg-cell--teal::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(255,255,255,0.22) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,0.22) 0%, transparent 60%);
  pointer-events: none;
}

/* WHITE zone (anti-diagonal) */
.fg-cell--dark,
.fg-cell--lavender,
.fg-cell--peach {
  background: linear-gradient(150deg, #FFFFFF 0%, #F1F5F9 100%);
  color: #0F1D36;
  border: 1px solid rgba(15, 29, 54, 0.08);
}

/* BLUE zone */
.fg-cell--purple {
  background: linear-gradient(150deg, #002E57 0%, #001B34 100%);
  color: #fff;
  position: relative;
}
.fg-cell--purple::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(0,0,0,0.18) 0%, transparent 50%);
  pointer-events: none;
}

/* BLUE photo cards (5 + 8) — blue duotone treatment */
.fg-cell--photo {
  background: #2E5F8F;
}
.fg-cell--photo .fg-photo-bg {
  filter: grayscale(1) contrast(1.05) brightness(0.95);
  mix-blend-mode: luminosity;
  opacity: 0.55;
}
.fg-cell--photo .fg-photo-overlay {
  background: linear-gradient(180deg, rgba(0, 46, 87, 0.35) 0%, rgba(0, 27, 52, 0.55) 50%, rgba(15, 29, 54, 0.85) 100%);
}
.fg-cell--photo .fg-photo-overlay--bottom {
  background: linear-gradient(180deg, rgba(0, 46, 87, 0.2) 0%, rgba(0, 46, 87, 0.4) 40%, rgba(0, 27, 52, 0.85) 100%);
}

/* ── Cell 0: Cream / Retention ── */
.fg-cream-stat {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
}
.fg-cream-stat .fg-ring { flex-shrink: 0; width: 56px; height: 56px; }
.fg-cream-stat .fg-cream-checks { flex-shrink: 0; }
.fg-ring-fill { animation: fg-ring-anim 3s ease-in-out infinite; }
@keyframes fg-ring-anim {
  0% { stroke-dashoffset: 213.6; }
  40%, 80% { stroke-dashoffset: 81; }
  100% { stroke-dashoffset: 213.6; }
}
.fg-cream-checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fg-check-pill {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  background: rgba(255, 255, 255, 0.22);
  color: transparent;
  animation: fg-check-pop 3s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.25s);
}
.fg-check-pill--on {
  background: #FFFFFF;
  color: #B91C1C;
  font-weight: 800;
}
@keyframes fg-check-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ── Cell 1: Bright Accent ── */
.fg-accent-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fg-accent-pill {
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
  position: relative;
}
.fg-accent-pill::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #FFFFFF;
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: fg-pulse-dot 2s ease-in-out infinite;
}
@keyframes fg-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
}
.fg-accent-stat {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.fg-accent-stat--range { font-size: 38px; letter-spacing: -0.03em; }
@media (max-width: 768px) {
  .fg-accent-stat--range { font-size: 24px; }
}
.fg-accent-label {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  margin-top: 0;
}
.fg-accent-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  margin-top: 0;
}
.fg-accent-dots {
  display: flex;
  gap: 4px;
}
.fg-accent-dots span {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: rgba(255,255,255,0.22);
  transition: background 0.3s;
}
.fg-accent-dots span.on {
  background: #fff;
  animation: fg-dot-pop 2.5s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.15s);
}
@keyframes fg-dot-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
@media (max-width: 768px) {
  .fg-accent-stat { font-size: 38px; }
  .fg-accent-label { font-size: 10px; }
}

/* ── Cell 2: Dark Network ── */
.fg-network {
  position: relative;
  width: 100%;
  height: 100px;
  flex: 1;
}
.fg-net-orb {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5B87AE, #002E57);
  box-shadow: 0 4px 14px rgba(0, 46, 87,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  animation: fg-orb-float 4s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.4s);
}
.fg-net-orb--1 { top: 18%; left: 18%; background: linear-gradient(135deg, #5B87AE, #2E5F8F); box-shadow: 0 4px 14px rgba(0, 46, 87,0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
.fg-net-orb--2 { top: 8%; left: 60%; background: linear-gradient(135deg, #F87171, #B91C1C); box-shadow: 0 4px 14px rgba(220,38,38,0.4), inset 0 1px 0 rgba(255,255,255,0.4); }
.fg-net-orb--3 { top: 60%; left: 70%; background: linear-gradient(135deg, #93B0C9, #002E57); box-shadow: 0 4px 14px rgba(0, 46, 87,0.4), inset 0 1px 0 rgba(255,255,255,0.5); }
.fg-net-orb--4 { top: 70%; left: 30%; background: linear-gradient(135deg, #FCA5A5, #DC2626); width: 14px; height: 14px; box-shadow: 0 4px 10px rgba(220,38,38,0.45); }
@keyframes fg-orb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.fg-net-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.fg-net-line {
  fill: none;
  stroke: rgba(15, 29, 54, 0.25);
  stroke-width: 1.5;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: fg-line-trace 3.5s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.5s);
}
@keyframes fg-line-trace {
  0%, 10% { stroke-dashoffset: 60; opacity: 0.2; }
  50% { stroke-dashoffset: 0; opacity: 0.9; }
  90%, 100% { stroke-dashoffset: -60; opacity: 0.2; }
}
.fg-net-spark {
  position: absolute;
  top: 0; right: 0;
  font-size: 16px;
  animation: fg-sparkle 2.5s ease-in-out infinite;
}
@keyframes fg-sparkle {
  0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(15deg); }
}

/* ── Cell 3: Teal Phone Chat ── */
.fg-phone-chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  flex: 1;
  justify-content: center;
}
.fg-phone-bubble {
  font-size: 11px;
  padding: 7px 11px;
  border-radius: 12px;
  color: #fff;
  max-width: 75%;
  opacity: 0;
  animation: fg-bubble-in 5s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.6s);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.fg-phone-bubble--in {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.fg-phone-bubble--out {
  background: #FFFFFF;
  color: #991B1B;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-weight: 600;
}
@keyframes fg-bubble-in {
  0%, 5% { opacity: 0; transform: translateY(6px) scale(0.95); }
  15%, 80% { opacity: 1; transform: translateY(0) scale(1); }
  90%, 100% { opacity: 0; }
}
.fg-phone-typing {
  background: rgba(255,255,255,0.12);
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  display: flex; gap: 3px;
  opacity: 0;
  animation: fg-bubble-in 5s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.6s);
}
.fg-phone-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  animation: fg-dot-bounce 1.2s ease-in-out infinite;
}
.fg-phone-typing span:nth-child(2) { animation-delay: 0.15s; }
.fg-phone-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes fg-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* ── Cell 4: Lavender Referral ── */
.fg-ref-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
}
.fg-ref-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(15, 29, 54, 0.12);
  opacity: 0;
  transform: scale(0.7);
  animation: fg-pop-in 4s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.4s);
}
.fg-ref-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-ref-arrow {
  font-size: 14px;
  color: #002E57;
  font-weight: 700;
  opacity: 0;
  animation: fg-arrow-slide 4s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.4s + 0.2s);
}
@keyframes fg-pop-in {
  0%, 8% { opacity: 0; transform: scale(0.7); }
  15%, 85% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.7); }
}
@keyframes fg-arrow-slide {
  0%, 12% { opacity: 0; transform: translateX(-3px); }
  20%, 80% { opacity: 1; transform: translateX(0); }
  90%, 100% { opacity: 0; }
}
.fg-ref-badge {
  background: #fff;
  border: 1px solid rgba(15, 29, 54, 0.06);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 600;
  color: #0F1D36;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  box-shadow: 0 2px 8px rgba(15, 29, 54, 0.08);
  margin: 8px auto 0;
  width: fit-content;
}
.fg-ref-badge span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #002E57;
  color: #fff;
  font-size: 9px;
}

/* ── Cell 5/8: Photo cards ── */
.fg-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fg-cell--photo:hover .fg-photo-bg { transform: scale(1.05); }
.fg-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,29,54,0.05) 0%, rgba(15,29,54,0.45) 60%, rgba(15,29,54,0.85) 100%);
  z-index: 1;
}
.fg-photo-overlay--bottom {
  background: linear-gradient(180deg, rgba(15,29,54,0) 0%, rgba(15,29,54,0.2) 40%, rgba(15,29,54,0.85) 100%);
}
.fg-photo-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.fg-photo-badge {
  background: rgba(15, 29, 54, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 8px 12px;
  align-self: flex-start;
  color: #fff;
}
.fg-photo-badge-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
}
.fg-photo-badge-row {
  display: flex; align-items: baseline; gap: 4px;
  margin-top: 2px;
}
.fg-photo-badge-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fg-photo-badge-arrow {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  animation: fg-arrow-up 2s ease-in-out infinite;
}
@keyframes fg-arrow-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.fg-photo-foot { margin-top: auto; }
.fg-photo-tagline {
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  margin-top: 4px;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  letter-spacing: 0.005em;
}
.fg-photo-tagline--solo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #fff;
  margin-top: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  /* Short motto in a narrow card: without this "Community on tap" breaks as
     "Community on / tap" and leaves an orphan. */
  text-wrap: balance;
}
@media (max-width: 768px) {
  .fg-photo-tagline { font-size: 10px; line-height: 1.3; }
  .fg-photo-tagline--solo { font-size: 14px; }
}
.fg-photo-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  background: rgba(15, 29, 54, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
}
.fg-photo-step {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.fg-photo-step--done { background: #FFFFFF; }
.fg-photo-step--current {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
  animation: fg-step-pulse 1.6s ease-in-out infinite;
}
@keyframes fg-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(255,255,255,0); }
}

/* ── Cell 6: Peach Amenity ── */
.fg-amenity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  flex: 1;
  align-content: center;
}
.fg-amenity-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(220, 38, 38, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.06);
  transition: transform 0.3s;
}
.fg-amenity-tile--on {
  background: linear-gradient(145deg, #EF4444, #DC2626);
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.35);
  animation: fg-tile-pulse 2.5s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.3s);
}
@keyframes fg-tile-pulse {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.06) rotate(-2deg); }
}

/* ── Cell 7: Purple Leasing ── */
.fg-purple-art {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fg-purple-card {
  position: absolute;
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  width: 80%;
}
.fg-purple-card--back {
  transform: rotate(-6deg) translate(-8%, -10%);
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
  animation: fg-card-float 4s ease-in-out infinite;
}
.fg-purple-card--front {
  transform: rotate(3deg) translate(8%, 8%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fg-card-float 4s ease-in-out infinite;
  animation-delay: 0.5s;
}
@keyframes fg-card-float {
  0%, 100% { transform: rotate(3deg) translate(8%, 8%); }
  50% { transform: rotate(3deg) translate(8%, 4%); }
}
.fg-purple-card--back { animation-name: fg-card-float-back; }
@keyframes fg-card-float-back {
  0%, 100% { transform: rotate(-6deg) translate(-8%, -10%); }
  50% { transform: rotate(-6deg) translate(-8%, -14%); }
}
.fg-purple-line {
  height: 6px; border-radius: 3px;
  background: rgba(220, 38, 38, 0.2);
  margin-bottom: 4px;
}
.fg-purple-line--short { width: 60%; }
.fg-purple-row {
  font-size: 10px;
  color: #475569;
  display: flex; align-items: center; gap: 5px;
  font-weight: 500;
}
.fg-purple-row span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #002E57;
  color: #fff;
  font-size: 8px;
  display: flex; align-items: center; justify-content: center;
}
.fg-purple-row--current {
  color: #0F1D36;
  font-weight: 700;
}
.fg-purple-row--current span {
  background: #DC2626;
  animation: fg-step-pulse 1.6s ease-in-out infinite;
}

/* ── New visuals: NOI sparkline, stabilization progress, satisfaction stars,
       activate pulse, funnel, connect-pair, cycle ── */

/* Bottom card label for centerpiece cells (0, 1) */
.fg-card-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.005em;
  margin-top: 0;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .fg-card-label { font-size: 11px; }
}

/* Cell 0: NOI sparkline */
.fg-trend {
  width: 70px;
  height: 18px;
  flex-shrink: 0;
}
.fg-trend-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: fg-trend-draw 2.6s ease-in-out infinite;
}
.fg-trend-dot {
  opacity: 0;
  animation: fg-trend-dot 2.6s ease-in-out infinite;
}
@keyframes fg-trend-draw {
  0%, 10% { stroke-dashoffset: 120; }
  50%, 80% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 120; }
}
@keyframes fg-trend-dot {
  0%, 45% { opacity: 0; transform: translateY(2px); }
  60%, 80% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; }
}

/* Cell 1: stabilization tiny unit + progress bar */
.fg-accent-stat-unit {
  font-size: 0.45em;
  font-weight: 700;
  margin-left: 2px;
  vertical-align: super;
  letter-spacing: -0.01em;
}
.fg-stab-track {
  position: relative;
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  overflow: visible;
}
.fg-stab-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 0;
  background: #fff;
  border-radius: 999px;
  animation: fg-stab-fill 2.6s ease-out infinite;
}
@keyframes fg-stab-fill {
  0%, 8% { width: 0; }
  55%, 80% { width: 100%; }
  92%, 100% { width: 100%; opacity: 0.4; }
}
.fg-stab-mark {
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: translate(-50%, -50%);
}
.fg-stab-mark--mid { left: 33%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
.fg-stab-mark--end { left: 100%; background: rgba(255,255,255,0.4); }

/* Cell 2: satisfaction stars + faces */
.fg-sat-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.fg-sat-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fg-sat-stars {
  display: flex;
  gap: 1px;
  font-size: 18px;
  color: #FCA5A5;
  line-height: 1;
}
.fg-sat-star {
  display: inline-block;
  color: #DC2626;
  text-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
  animation: fg-star-pop 2.8s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.12s);
  transform-origin: center;
}
.fg-sat-star--half {
  background: linear-gradient(90deg, #DC2626 50%, rgba(220,38,38,0.25) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes fg-star-pop {
  0%, 12% { opacity: 0.3; transform: scale(0.8); }
  20%, 78% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0.3; transform: scale(0.8); }
}
.fg-sat-score {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #0F1D36;
  letter-spacing: -0.02em;
  line-height: 1;
}
.fg-sat-score span {
  font-size: 13px;
  color: rgba(15, 29, 54, 0.45);
  font-weight: 600;
  margin-left: 2px;
}
.fg-sat-faces {
  display: flex;
  gap: 6px;
}
.fg-sat-face {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 29, 54, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  animation: fg-face-bob 2.8s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.2s);
}
@keyframes fg-face-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Cell 4: activate pulse rings */
.fg-activate {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fg-activate-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(0, 46, 87, 0.5);
  transform: translate(-50%, -50%);
  animation: fg-activate-pulse 2.4s ease-out infinite;
}
.fg-activate-pulse--1 { animation-delay: 0s; }
.fg-activate-pulse--2 { animation-delay: 0.6s; }
.fg-activate-pulse--3 { animation-delay: 1.2s; }
@keyframes fg-activate-pulse {
  0% { width: 30px; height: 30px; opacity: 0.7; border-color: rgba(0, 46, 87, 0.7); }
  100% { width: 110px; height: 110px; opacity: 0; border-color: rgba(0, 46, 87, 0); }
}
.fg-activate-cluster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.fg-activate-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(15, 29, 54, 0.15);
  margin: 0 -6px;
}
.fg-activate-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fg-activate-avatar--a { z-index: 1; }
.fg-activate-avatar--b { z-index: 2; transform: translateY(-3px); }
.fg-activate-avatar--c { z-index: 1; }
.fg-activate-bolt {
  position: absolute;
  top: 6px; right: 14%;
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.3));
  animation: fg-bolt 2s ease-in-out infinite;
}
@keyframes fg-bolt {
  0%, 100% { transform: scale(1) rotate(0); opacity: 0.8; }
  50% { transform: scale(1.15) rotate(8deg); opacity: 1; }
}

/* Cell 5: photo badge with home icon */
.fg-photo-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fg-photo-badge-icon svg { display: block; }

/* Cell 6: marketing funnel */
.fg-funnel {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  width: 100%;
  min-height: 0;
}
.fg-funnel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 8px;
  border-radius: 5px;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 600;
  color: #fff;
  opacity: 1;
  box-shadow: 0 2px 6px rgba(15, 29, 54, 0.1);
  animation: fg-funnel-shimmer 4s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.2s);
  flex-shrink: 0;
}
.fg-funnel-row b {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 10px;
  line-height: 1.1;
}
.fg-funnel-row--1 { background: linear-gradient(90deg, #002E57, #5B87AE); width: 100%; }
.fg-funnel-row--2 { background: linear-gradient(90deg, #2E5F8F, #002E57); width: 82%; }
.fg-funnel-row--3 { background: linear-gradient(90deg, #DC2626, #EF4444); width: 65%; }
.fg-funnel-row--4 { background: linear-gradient(90deg, #B91C1C, #DC2626); width: 50%; }
@keyframes fg-funnel-shimmer {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

/* Cell 7: connect-pair (two avatars + heart) */
.fg-connect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.fg-connect-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  flex-shrink: 0;
  animation: fg-connect-bob 3s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.4s);
}
.fg-connect-avatar img { width: 100%; height: 100%; object-fit: cover; }
@keyframes fg-connect-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.fg-connect-link {
  position: relative;
  width: 50px;
  height: 30px;
  flex-shrink: 0;
  margin: 0 -2px;
}
.fg-connect-link svg {
  width: 100%; height: 100%;
}
.fg-connect-path {
  stroke-dasharray: 4 4;
  animation: fg-connect-flow 2s linear infinite;
}
@keyframes fg-connect-flow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -16; }
}
.fg-connect-heart {
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(220, 38, 38, 0.6);
  animation: fg-heart-beat 1.4s ease-in-out infinite;
}
@keyframes fg-heart-beat {
  0%, 100% { transform: translateX(-50%) scale(1); }
  25% { transform: translateX(-50%) scale(1.2); }
  50% { transform: translateX(-50%) scale(1); }
  75% { transform: translateX(-50%) scale(1.18); }
}
.fg-connect-msg {
  margin-top: 6px;
  font-size: 10px;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  text-align: center;
  opacity: 0;
  animation: fg-connect-msg-in 4s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.5s);
}
@keyframes fg-connect-msg-in {
  0%, 20% { opacity: 0; transform: translateY(4px); }
  35%, 75% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; }
}

/* Help Neighbors Connect stacks avatars, a quote, a two-line title and a stat
   that wraps to two lines into one square. Above 1250px the squares shrink
   with the viewport (.fg-container max-height: calc(100vh - 200px)), so on a
   shorter laptop screen the stat was clipped at the bottom. Size the connect
   visuals by the cell's own height. Desktop only: below 1251px the cells grow
   to fit their content instead, and size containment would stop that. */
@media (min-width: 1251px) {
  /* Floor the square grid at 530px (167px cells). Below that, on a ~660px-tall
     window, the red accent cards (Increase NOI, Stabilize Quicker) clipped
     their bottom rows by 58-80px. On very short screens the page scrolls a
     little instead of cutting cards off. */
  .fg-container { min-width: 530px; min-height: 530px; }
  .fg-cell:has(.fg-connect) { container-type: size; }
  @container (max-height: 200px) {
    .fg-connect ~ .fg-connect-msg,
    .fg-connect-msg { margin-top: 0; font-size: 9px; }
    .fg-connect-avatar { width: 30px; height: 30px; }
    .fg-connect-link { width: 38px; height: 22px; }
    .fg-connect-heart { font-size: 12px; top: -3px; }
    .fg-thumb:has(.fg-connect) { gap: 6px; }
  }
  @container (max-height: 150px) {
    .fg-connect-msg { display: none; }
  }
}

/* Cell 8: cycle badge */
.fg-photo-badge--cycle {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fg-photo-badge--cycle span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.fg-cycle-icon {
  animation: fg-cycle-spin 4.5s linear infinite;
}
@keyframes fg-cycle-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

/* Mobile: let cells grow vertically to fit content (no forced 1:1 aspect) */
@media (max-width: 768px) {
  .fg-container {
    aspect-ratio: auto;
    max-height: none;
    max-width: none;
    grid-template-rows: auto auto auto;
    gap: 8px;
  }
  .fg-cell {
    aspect-ratio: auto;
    min-height: 150px;
  }
  /* Photo cells need explicit height since photo bg is absolutely positioned */
  .fg-cell--photo { min-height: 180px; }
  .fg-thumb { padding: 14px 14px 26px; }
}

/* Mid-range (769–1250px): the hero stacks at ≤1024 and a 2-column hero
   squeezes the grid up to ~1250px, shrinking the square cells to ~150px —
   too short for the accent cards' five stacked rows, which then clip their
   bottom label (e.g. "Increase NOI") and wrap the headline number. Let the
   cells grow to fit their content (same approach as ≤768) and keep the stat
   on one line. */
@media (min-width: 769px) and (max-width: 1250px) {
  .fg-container {
    aspect-ratio: auto;
    max-height: none;
    max-width: none;
    grid-template-rows: auto auto auto;
  }
  .fg-cell { min-height: 172px; }
  .fg-cell--photo { min-height: 192px; }
  .fg-thumb { padding: 14px 14px 16px; }
  .fg-accent-stat,
  .fg-accent-stat--range { font-size: 30px; white-space: nowrap; }
}

/* Mobile adjustments for new visuals */
@media (max-width: 768px) {
  .fg-trend { width: 50px; height: 14px; }
  /* Phone cells are ~100px wide: let the sparkline/bar and its caption
     ("vs. baseline", "vs. industry avg.") stack instead of pushing the
     caption past the card edge, and let "4.9/5" drop under the stars. */
  .fg-accent-foot {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 6px;
    text-align: center;
  }
  .fg-accent-foot > span { min-width: 0; }
  .fg-sat-rating {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 6px;
  }
  .fg-sat-stars { font-size: 13px; }
  .fg-sat-score { font-size: 18px; }
  .fg-sat-score span { font-size: 10px; }
  .fg-sat-face { width: 20px; height: 20px; font-size: 11px; }
  .fg-sat-stack { gap: 6px; }
  .fg-activate-avatar { width: 26px; height: 26px; }
  .fg-activate-pulse { width: 50px; height: 50px; }
  .fg-funnel { gap: 2px; padding: 1px 0; }
  .fg-funnel-row { font-size: 7px; padding: 2px 6px; border-radius: 4px; }
  .fg-funnel-row b { font-size: 8px; }
  .fg-cream-stat .fg-ring { width: 56px; height: 56px; }
  .fg-cream-checks { gap: 2px; }
  .fg-check-pill { width: 13px; height: 13px; font-size: 8px; }
  .fg-connect-avatar { width: 28px; height: 28px; border-width: 1.5px; }
  .fg-connect-link { width: 32px; height: 20px; }
  .fg-connect-heart { font-size: 11px; top: -2px; }
  .fg-connect-msg { font-size: 8px; margin-top: 4px; }
  .fg-stab-track { height: 5px; }
  .fg-stab-mark { width: 6px; height: 6px; }
  .fg-photo-badge--cycle span { font-size: 9px; }
  .fg-card-label { font-size: 10px; margin-top: 4px; }
  .fg-accent-stat { font-size: 32px; line-height: 1; }
  .fg-accent-stat-unit { font-size: 0.5em; }
}
@media (max-width: 480px) {
  .fg-funnel-row { font-size: 6px; padding: 1px 5px; }
  .fg-funnel-row b { font-size: 7px; }
  .fg-cream-stat .fg-ring { width: 48px; height: 48px; }
  .fg-check-pill { width: 11px; height: 11px; font-size: 7px; }
  .fg-accent-stat { font-size: 26px; }
  .fg-sat-faces { gap: 3px; }
  .fg-sat-face { width: 16px; height: 16px; font-size: 9px; }
  .fg-sat-rating { gap: 4px; }
}

/* Reduced motion: disable new animations */
@media (prefers-reduced-motion: reduce) {
  .fg-trend-line, .fg-trend-dot,
  .fg-stab-fill,
  .fg-sat-star, .fg-sat-face,
  .fg-activate-pulse, .fg-activate-bolt,
  .fg-funnel-row,
  .fg-connect-avatar, .fg-connect-path, .fg-connect-heart, .fg-connect-msg,
  .fg-cycle-icon {
    animation: none !important;
  }
  .fg-stab-fill { width: 100%; }
}

/* ── Detail (hidden, kept for a11y/SEO) ── */
.fg-detail { display: none; }

/* ── Mobile tweaks ── */
@media (max-width: 768px) {
  .fg-network { height: 56px; flex: 0 0 auto; }
  .fg-net-orb { width: 14px; height: 14px; }
  .fg-net-orb--4 { width: 10px; height: 10px; }
  .fg-net-orb--1 { top: 10%; left: 14%; }
  .fg-net-orb--2 { top: 0%; left: 58%; }
  .fg-net-orb--3 { top: 35%; left: 70%; }
  .fg-net-orb--4 { top: 55%; left: 28%; }
  .fg-ref-badge { font-size: 8px; padding: 3px 7px; }
  .fg-ref-badge span { width: 11px; height: 11px; font-size: 7px; }
  .fg-ref-stack { gap: 2px; }
  .fg-ref-avatar { width: 26px; height: 26px; border-width: 1.5px; }
  .fg-purple-card { padding: 7px 9px; }
  .fg-purple-card--back { transform: rotate(-5deg) translate(-6%, -10%); }
  .fg-purple-card--front { transform: rotate(2deg) translate(6%, 6%); }
  @keyframes fg-card-float {
    0%, 100% { transform: rotate(2deg) translate(6%, 6%); }
    50% { transform: rotate(2deg) translate(6%, 3%); }
  }
  @keyframes fg-card-float-back {
    0%, 100% { transform: rotate(-5deg) translate(-6%, -10%); }
    50% { transform: rotate(-5deg) translate(-6%, -13%); }
  }
  .fg-purple-row { font-size: 9px; gap: 4px; }
  .fg-purple-row span { width: 10px; height: 10px; font-size: 7px; }
  .fg-amenity-grid { gap: 4px; }
  .fg-amenity-tile { font-size: 18px; border-radius: 9px; }
  .fg-photo-badge { padding: 6px 9px; border-radius: 10px; }
  .fg-photo-badge-num { font-size: 18px; }
  .fg-photo-badge-label { font-size: 8px; }
  .fg-photo-steps { padding: 4px 7px; gap: 3px; }
  .fg-photo-step { width: 6px; height: 6px; }
  .fg-phone-bubble { font-size: 9px; padding: 5px 9px; }
  .fg-accent-stat { font-size: 36px; }
  .fg-accent-label { font-size: 10px; }
  .fg-accent-pill { font-size: 8px; padding: 2px 6px; }
}
@media (max-width: 480px) {
  .fg-container { gap: 8px; }
  .fg-cell { border-radius: 14px; }
  .fg-thumb { padding: 12px 10px 22px; }
  .fg-title { font-size: 11px; }
  .fg-stat { font-size: 8px; letter-spacing: 0.06em; }
  .fg-accent-stat { font-size: 28px; }
  .fg-photo-badge-num { font-size: 16px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .fg-cell,
  .fg-cell.fg-in,
  .fg-ring-fill,
  .fg-check-pill,
  .fg-net-orb,
  .fg-net-line,
  .fg-net-spark,
  .fg-phone-bubble,
  .fg-phone-typing,
  .fg-ref-avatar,
  .fg-ref-arrow,
  .fg-amenity-tile--on,
  .fg-purple-card--back,
  .fg-purple-card--front,
  .fg-photo-step--current,
  .fg-photo-badge-arrow,
  .fg-accent-pill::before,
  .fg-accent-dots span.on {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
  .fg-cell { opacity: 1; transform: none; }
}

/* OLD .hero-visual kept as alias */
.hero-visual { display: none; }

.hero-phone-wrapper {
  position: relative;
  padding: 40px;
}

.phone-mockup {
  background: linear-gradient(145deg, #E2E8F0, #CBD5E1);
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.6), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
}

.phone-screen {
  border-radius: 18px;
  overflow: hidden;
}

.phone-screen img {
  width: 100%;
  height: auto;
}

/* Floating Cards */
.hero-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  animation: floatCard 6s ease-in-out infinite;
  z-index: 5;
}

.float-card-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.float-card-label {
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
  margin-bottom: 2px;
}

.float-card-value {
  font-size: 12px;
  color: #64748B;
}

.float-card-1 {
  top: 15%;
  left: -10%;
  animation-delay: 0s;
}

.float-card-2 {
  bottom: 25%;
  right: -5%;
  animation-delay: -2s;
}

.float-card-3 {
  bottom: 5%;
  left: 5%;
  animation-delay: -4s;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Hero Phone — built-in app mockup */
.hero-phone-mockup {
  width: 320px;
  aspect-ratio: 9 / 18;
  background: linear-gradient(145deg, #E2E8F0, #CBD5E1);
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.6), inset 0 1px 0 rgba(255,255,255,0.8);
}

.hero-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-app-status {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
  flex-shrink: 0;
}

.hero-app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 10px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  flex-shrink: 0;
}

.hero-app-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-app-logo img {
  border-radius: 4px;
}

.hero-app-logo span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
}

.hero-app-topbar svg {
  stroke: #64748B;
  opacity: 0.7;
}

.hero-app-content {
  flex: 1;
  overflow: hidden;
  padding: 10px 12px;
}

.hero-app-poll {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.hero-poll-opt {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #334155;
  padding: 5px 8px;
  background: #F8FAFC;
  border-radius: 8px;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}

.hero-poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 46, 87, 0.1);
  border-radius: 8px;
}

.hero-chat-msg {
  display: flex;
  gap: 8px;
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.hero-app-nav {
  display: flex;
  border-top: 1px solid #E2E8F0;
  background: #fff;
  padding: 6px 0 10px;
  flex-shrink: 0;
}

.hero-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 500;
  color: #64748b;
}

.hero-nav-tab.active {
  color: #002E57;
}

.hero-nav-tab svg {
  width: 16px;
  height: 16px;
}

/* ========================
   HERO STORY — CINEMATIC
   ======================== */


/* ========================
   TRUSTED BY
   ======================== */
.trusted-section {
  padding: 48px 24px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.trusted-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.trusted-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748B;
  white-space: nowrap;
  margin: 0;
}

.trusted-logos {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.trusted-logo-wrap {
  display: flex;
  align-items: center;
}

.trusted-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.3s ease;
}

.trusted-logo:hover {
  filter: grayscale(0) opacity(1);
}

/* ========================
   TICKER / MARQUEE
   ======================== */
.ticker-section {
  padding: 32px 0;
  background: rgba(0, 46, 87, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.ticker {
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.ticker-track.dragging {
  cursor: grabbing;
}

.ticker-item {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #94A3B8;
  padding: 0 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ticker-dot {
  color: #002E57;
  font-size: 8px;
  opacity: 0.5;
  display: inline-flex;
  align-items: center;
}

/* tickerScroll now driven by JS for drag support */

/* ========================
   FEATURES
   ======================== */
.features {
  padding: 120px 0;
  position: relative;
}

.features::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 46, 87, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.feature-card {
  position: relative;
  padding: 36px 32px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 46, 87, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.feature-card:hover {
  background: #DDE7EF;
  border-color: rgba(0, 46, 87, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 46, 87, 0.15), 0 0 40px rgba(0, 46, 87, 0.08);
}

.feature-card:hover p {
  color: #4B6A8A;
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card-lg {
  grid-column: span 2;
}

.feature-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(0, 46, 87, 0.08);
  border: 1px solid rgba(0, 46, 87, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon-wrap {
  background: rgba(0, 46, 87, 0.15);
  box-shadow: 0 0 24px rgba(0, 46, 87, 0.15);
}

.feature-icon {
  font-size: 26px;
}

.feature-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.feature-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
}

/* Spotlight effect: dim siblings on hover */
.features-grid:hover .feature-card {
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.features-grid:hover .feature-card:hover {
  opacity: 1;
}

.feature-tag {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0, 46, 87, 0.08);
  color: #002E57;
}

/* ========================
   HOW IT WORKS
   ======================== */
.how-it-works {
  padding: 120px 0;
  background: linear-gradient(180deg, rgba(0, 46, 87, 0.03) 0%, transparent 100%);
}

.steps {
  max-width: 800px;
  margin: 0 auto;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  transition: all 0.4s ease;
}

.step:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 46, 87, 0.2);
  box-shadow: 0 0 40px rgba(0, 46, 87, 0.05);
}

.step-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, #002E57, #5B87AE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.step-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}

.step-content p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
}

.step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon-animated {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(0, 46, 87, 0.08);
  border: 1px solid rgba(0, 46, 87, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #90CAF9;
  transition: all 0.3s ease;
}

.step:hover .step-icon-animated {
  background: rgba(0, 46, 87, 0.15);
  box-shadow: 0 0 30px rgba(0, 46, 87, 0.15);
  transform: scale(1.05);
}

.step-connector {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.connector-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(180deg, rgba(0, 46, 87, 0.3), rgba(0, 46, 87, 0.05));
  border-radius: 1px;
}

/* ========================
   AUDIENCE SECTIONS
   ======================== */
.audience-section {
  padding: 120px 0;
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.audience-grid-reverse {
  direction: rtl;
}

.audience-grid-reverse > * {
  direction: ltr;
}

.audience-content .section-tag,
.audience-content .section-title {
  text-align: left;
}

.audience-content .section-desc {
  margin: 0 0 32px 0;
  text-align: left;
}

.audience-list {
  list-style: none;
  margin-bottom: 36px;
}

.audience-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
  color: #475569;
}

.audience-list li svg {
  flex-shrink: 0;
}

.audience-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Visual Card Stack (For Residents) */
.visual-card-stack {
  position: relative;
  padding: 40px 20px;
}

.visual-card {
  position: relative;
  padding: 20px 24px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease;
  animation: cardSlideIn 0.6s ease both;
}

.visual-card:hover {
  border-color: rgba(0, 46, 87, 0.25);
  box-shadow: 0 8px 32px rgba(0, 46, 87, 0.1);
  transform: translateX(8px);
}

.vc-1 { animation-delay: 0.1s; }
.vc-2 { animation-delay: 0.3s; }
.vc-3 { animation-delay: 0.5s; }

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

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

.vc-emoji {
  font-size: 32px;
}

.vc-name {
  font-size: 15px;
  font-weight: 600;
  color: #0F172A;
}

.vc-meta {
  font-size: 13px;
  color: #64748b;
}

.vc-action {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(0, 46, 87, 0.08);
  color: #002E57;
  border: 1px solid rgba(0, 46, 87, 0.15);
}

/* Dashboard Preview (For Properties) */
.dashboard-preview {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

.dash-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #F8FAFC;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dash-dots {
  display: flex;
  gap: 6px;
}

.dash-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dash-dots span:nth-child(1) { background: #ff5f57; }
.dash-dots span:nth-child(2) { background: #febc2e; }
.dash-dots span:nth-child(3) { background: #28c840; }

.dash-title {
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

.dash-body {
  padding: 24px;
}

.dash-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.dash-stat {
  padding: 16px;
  background: rgba(0, 46, 87, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  text-align: center;
}

.dash-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #002E57, #5B87AE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

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

.dash-chart {
  padding: 20px;
  background: rgba(0, 46, 87, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}

.dash-chart-label {
  font-size: 12px;
  color: #64748B;
  margin-bottom: 16px;
  font-weight: 500;
}

.dash-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100px;
}

.dash-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #002E57, rgba(0, 46, 87, 0.3));
  transition: height 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-height: 4px;
}

/* ========================
   STATS
   ======================== */
.stats-section {
  padding: 120px 0;
  background: linear-gradient(180deg, transparent, rgba(0, 46, 87, 0.03));
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-card {
  padding: 36px 28px;
  background: rgba(0, 46, 87, 0.04);
  border: 1.5px solid rgba(0, 46, 87, 0.15);
  border-radius: 20px;
  text-align: center;
  transition: all 0.4s ease;
}

.stat-card:hover {
  background: rgba(0, 46, 87, 0.08);
  border-color: rgba(0, 46, 87, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 46, 87, 0.1);
}

.stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, #0F172A, #002E57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  line-height: 1.1;
}

.stat-label {
  font-size: 14px;
  color: #64748B;
  font-weight: 500;
  margin-bottom: 16px;
}

.stat-bar {
  width: 100%;
  height: 4px;
  background: rgba(0, 46, 87, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #002E57, #5B87AE);
  transition: width 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================
   TESTIMONIALS
   ======================== */
.testimonials-section {
  padding: 120px 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonial-card {
  padding: 36px 32px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  transition: all 0.4s ease;
}

.testimonial-card:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 46, 87, 0.12);
  transform: translateY(-4px);
}

.testimonial-stars {
  font-size: 16px;
  color: #fbbf24;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.testimonial-text {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}

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

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.testimonial-name {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}

.testimonial-role {
  font-size: 12px;
  color: #64748b;
}

/* ========================
   PM VALUE SECTION
   ======================== */
.pm-value-section {
  padding: 120px 0;
  background: linear-gradient(180deg, rgba(0, 46, 87, 0.03), transparent);
}

.pm-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pm-value-card {
  padding: 36px 28px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  transition: all 0.4s ease;
}

.pm-value-card:hover {
  border-color: rgba(0, 46, 87, 0.25);
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 46, 87, 0.1);
}

.pm-value-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(0, 46, 87, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.4s ease;
}

.pm-value-card:hover .pm-value-icon {
  background: rgba(0, 46, 87, 0.15);
  transform: scale(1.05);
}

.pm-value-title {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
}

.pm-value-desc {
  font-size: 14px;
  color: #64748B;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .pm-value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pm-value-grid {
    grid-template-columns: 1fr;
  }
  .pm-value-section {
    padding: 80px 0;
  }
}

/* ========================
   SECURITY SECTION
   ======================== */
.security-section {
  padding: 100px 0 80px;
  background: #FAFBFC;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.security-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 28px 24px;
  transition: all 0.3s ease;
}

.security-card:hover {
  border-color: rgba(0, 46, 87, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.security-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 46, 87, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.security-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}

.security-card p {
  font-size: 14px;
  color: #64748B;
  line-height: 1.6;
}

.security-grid:hover .security-card {
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.security-grid:hover .security-card:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .security-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* === Industry Quotes (auto-rotating slideshow) === */
.quotes-section {
  padding: 120px 0;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}

.quotes-carousel {
  max-width: 960px;
  margin: 0 auto;
}

/* Every slide sits in the same grid cell, so the frame is as tall as the
   longest quote and the page never jumps while slides rotate. */
.quotes-track {
  display: grid;
}

.quote-card {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  padding: 52px 56px 36px;
  background: linear-gradient(135deg, #002E57 0%, #12395E 100%);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 46, 87, 0.25);
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}

.quote-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.quote-card::before {
  content: '\201C';
  position: absolute;
  top: 4px;
  left: 30px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 110px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
}

.quote-card blockquote {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
}

.quote-card blockquote p {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.5;
  color: #fff;
}

.quote-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.quote-scale {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.quote-name {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.quote-role {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.quote-source {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.quote-source a {
  color: inherit;
}

.quotes-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.quotes-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #CBD5E1;
  background: #fff;
  color: #002E57;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.quotes-arrow:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
}

.quotes-dots {
  display: flex;
  gap: 8px;
}

.quotes-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #CBD5E1;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.quotes-dot.is-active {
  width: 28px;
  background: #002E57;
}

@media (prefers-reduced-motion: reduce) {
  .quote-card,
  .quote-card.is-active {
    transform: none;
    transition: opacity 0.01s linear, visibility 0s;
  }
}

@media (max-width: 640px) {
  .quotes-section { padding: 80px 0; }
  .quote-card { padding: 44px 22px 24px; border-radius: 20px; }
  .quote-card::before { font-size: 72px; top: 6px; left: 18px; }
  .quote-card blockquote p { font-size: 18px; }
}

/* ========================
   CTA SECTION
   ======================== */
.cta-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #EEF3F8 0%, #DDE7EF 50%, #EEF3F8 100%);
}

.cta-bg {
  position: absolute;
  inset: 0;
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.cta-orb-1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 46, 87, 0.1);
  top: -20%;
  right: -10%;
}

.cta-orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(154, 16, 16, 0.06);
  bottom: -20%;
  left: -10%;
}

.cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.cta-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.cta-subtitle {
  font-size: 20px;
  color: #334155;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 12px;
}

.cta-desc {
  font-size: 18px;
  color: #64748B;
  line-height: 1.7;
  margin-bottom: 40px;
}

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

/* ========================
   FOOTER (Dark)
   ======================== */
.footer-dark {
  padding: 80px 0 48px;
  background: #0F172A;
  color: #cbd5e1;
  overflow: hidden;
}

.footer-dark-top {
  display: flex;
  gap: 80px;
}

.footer-dark-brand {
  flex-shrink: 0;
  max-width: 260px;
}

.footer-dark-copyright {
  font-size: 13px;
  color: #94A3B8;
  margin: 16px 0 24px;
}

.footer-dark-sales-btn {
  display: inline-block;
  padding: 12px 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-bottom: 28px;
}

.footer-dark-sales-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.footer-dark-social {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}

.footer-dark-social a {
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.footer-dark-social a:hover {
  opacity: 1;
}

.footer-dark-stores {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #12395E;
  color: #fff;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.store-btn:hover {
  background: #2E5F8F;
  transform: translateY(-2px);
}

.footer-dark-links {
  display: flex;
  gap: 48px;
  flex: 1;
}

.footer-dark-col {
  flex: 1;
}

.footer-dark-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-dark-col a {
  display: block;
  font-size: 14px;
  color: #94A3B8;
  padding: 6px 0;
  transition: color 0.2s;
}

.footer-dark-col a:hover {
  color: #fff;
}

@media (max-width: 1024px) {
  .footer-dark-top {
    flex-direction: column;
    gap: 40px;
  }
  .footer-dark-brand {
    max-width: 100%;
  }
  .footer-dark-links {
    flex-wrap: wrap;
    gap: 32px;
  }
  .footer-dark-col {
    min-width: 140px;
  }
  .footer-dark-stores {
    flex-direction: row;
  }
}

@media (max-width: 640px) {
  .footer-dark-links {
    flex-direction: column;
    gap: 28px;
  }
  .footer-dark-stores {
    flex-direction: column;
  }
}

.footer-dark-tagline {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  letter-spacing: -2px;
}

.footer-tagline-accent {
  color: #002E57;
  opacity: 0.7;
  font-style: italic;
}

/* Old footer (kept for sub-pages) */
.footer {
  padding: 80px 0 0;
  background: #F8FAFC;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #64748B;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.footer-logo img {
  border-radius: 8px;
}

.footer-tagline {
  font-size: 15px;
  color: #94A3B8;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  background: rgba(0, 46, 87, 0.08);
  border-color: rgba(0, 46, 87, 0.2);
  color: #002E57;
}

.footer-col h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-col a,
.footer-address {
  display: block;
  font-size: 14px;
  color: #64748B;
  padding: 6px 0;
  transition: color 0.3s ease;
}

.footer-col a:hover {
  color: #002E57;
}

.footer-address {
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.footer-bottom p {
  font-size: 13px;
  color: #94A3B8;
}

.footer-portals {
  display: flex;
  gap: 20px;
}

.footer-portals a {
  font-size: 13px;
  color: #64748B;
  transition: color 0.3s ease;
}

.footer-portals a:hover {
  color: #002E57;
}

/* ========================
   PORTALS SECTION
   ======================== */
.portals-section {
  background: #F8FAFC;
  padding: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.portals-row {
  display: flex;
  align-items: center;
  gap: 32px;
}

.portals-copyright {
  font-size: 13px;
  color: #94A3B8;
  white-space: nowrap;
  margin: 0;
}

.portals-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.portal-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.portal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 46, 87, 0.3);
  color: #002E57;
}

.portal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: color 0.3s ease;
}

.portal-card:hover .portal-icon {
  color: #002E57;
}

.portal-name {
  white-space: nowrap;
}

/* ========================
   LEGAL PAGES (keep these)
   ======================== */
.legal-page {
  background-color: #F8FAFC;
  padding: 120px 24px 80px;
  min-height: 100vh;
}

.legal-container {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 60px 48px;
}

.legal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 36px;
  text-align: center;
}

.legal-container h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin-top: 36px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(0, 46, 87, 0.3);
}

.legal-container h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1E293B;
  margin-top: 20px;
  margin-bottom: 8px;
}

.legal-container p {
  font-size: 15px;
  color: #64748B;
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-container a {
  color: #002E57;
  text-decoration: underline;
}

.legal-container a:hover { color: #2E5F8F; }

.legal-container ul {
  margin: 12px 0 20px 24px;
  padding: 0;
}

.legal-container ul li {
  font-size: 15px;
  color: #64748B;
  line-height: 1.8;
  margin-bottom: 8px;
}

.legal-notice {
  font-weight: 600;
  color: #1E293B !important;
  background: rgba(0, 46, 87, 0.05);
  padding: 16px 20px;
  border-left: 4px solid #002E57;
  border-radius: 4px;
  margin: 16px 0 !important;
}

.legal-effective {
  font-style: italic;
  font-weight: 600;
  color: #1E293B !important;
  margin-top: 32px !important;
}

/* ========================
   SUBPAGE NAVBAR
   (used by features, download, contact, pricing, privacy, terms pages)
   ======================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
}

a.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: 2px;
}

.logo-icon {
  border-radius: 8px;
}

/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 120px 24px 40px;
    min-height: auto;
    gap: 32px;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
    padding: 0;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
  }

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

  .hero-proof {
    justify-content: center;
    font-size: 13px;
    margin-bottom: 0;
  }

  .hero-grid-wrap {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: min(480px, calc(100vw - 48px));
    margin: 32px auto 0;
  }
  .hero-grid-wrap .fg-clip,
  .hero-grid-wrap .fg-container {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }

  .audience-grid,
  .audience-grid-reverse {
    grid-template-columns: 1fr;
    gap: 48px;
    direction: ltr;
  }

  .audience-content .section-tag,
  .audience-content .section-title,
  .audience-content .section-desc {
    text-align: center;
  }

  .audience-content .section-desc {
    margin: 0 auto 32px;
  }

  .audience-content .btn {
    display: inline-flex;
    margin: 0 auto;
  }

  .audience-content {
    text-align: center;
  }

  .audience-list li {
    justify-content: center;
  }

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

  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .feature-card-lg {
    grid-column: span 1;
  }
}

/* Collapse the desktop nav to a hamburger while it still fits (~1171px of
   nav content). Below this the full nav overflowed and clipped the "Sign in"
   button off the right edge — most visible on Windows/Edge at display scaling
   (e.g. a Dell laptop whose effective width lands around 1085px). */
@media (max-width: 1200px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 80px 20px 32px;
    overflow-y: auto;
    z-index: 999;
  }

  .nav-links.open {
    display: flex;
  }

  /* The inline flex:1 spacer that pushes Company/Support right on desktop
     becomes a huge vertical hole in the stacked mobile menu — collapse it. */
  .nav-links > div[style*="flex:1"] {
    display: none;
  }

  /* Sign In section script.js clones into the overlay (the top-bar dropdown
     is hidden on phones). Trigger matches .nav-dropdown-trigger's look. */
  .nav-links .nav-mobile-login {
    display: block;
    width: 100%;
  }

  .nav-links .nav-mobile-login-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    font-size: 20px;
    font-weight: 600;
    color: #0F172A;
    font-family: inherit;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    cursor: pointer;
  }

  .nav-links .nav-mobile-login-trigger svg {
    transition: transform 0.2s ease;
  }

  .nav-links .nav-mobile-login.open .nav-mobile-login-trigger svg {
    transform: rotate(180deg);
  }

  .nav-links .nav-mobile-login-links {
    display: none;
    padding: 8px 0 16px;
  }

  .nav-links .nav-mobile-login.open .nav-mobile-login-links {
    display: block;
  }

  .nav-links .nav-mobile-login .login-option {
    padding: 12px 4px;
  }

  .nav-links .nav-link {
    font-size: 20px;
    color: #0F172A;
  }

  /* Mobile mega dropdowns render inline below their trigger so they're
     visible inside the mobile menu instead of being absolutely positioned. */
  .nav-links .nav-dropdown-wrapper {
    width: 100%;
  }

  .nav-links .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 14px 4px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }

  .nav-links .nav-mega-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 8px 0 16px;
    transition: none;
  }

  .nav-links .nav-mega-dropdown.open {
    display: block;
    transform: none;
  }

  .nav-links .nav-mega-dropdown::before {
    display: none;
  }

  .nav-links .mega-dropdown-grid {
    display: block;
  }

  .nav-links .mega-dropdown-col {
    min-width: 0;
  }

  .nav-links .mega-dropdown-cta {
    width: auto;
    margin: 12px 0 0;
  }

  .nav-toggle {
    display: flex;
    z-index: 1001;
  }

  .nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* "Sign in" (staff portal logins) stays in the top bar — the menu links now
     live in the overlay, so logo + Talk to Sales + Sign in + hamburger fit. */
  .nav-actions > .nav-link {
    display: none;
  }
}

@media (max-width: 640px) {
  /* Sub-page headers carry a secondary outline link ("← Back to Home",
     "← Browse communities") next to their main CTA. Both don't fit beside
     the logo on a phone, and the logo already links home, so keep the CTA. */
  .nav-actions > a.btn-outline {
    display: none;
  }

  /* On phones there isn't room for the Sign in dropdown alongside the
     Talk to Sales CTA and hamburger, so hide it here only. */
  .nav-login-wrapper {
    display: none;
  }

  .nav .btn-primary {
    display: flex !important;
    font-size: 12px;
    padding: 8px 12px;
    gap: 6px;
  }
  .nav .btn-primary svg {
    display: none;
  }

  .nav .btn-download {
    padding: 6px 14px;
    font-size: 13px;
    gap: 6px;
  }

  .nav .btn-download svg {
    width: 14px;
    height: 14px;
  }

  .hero {
    padding: 100px 16px 32px;
  }

  .hero-content {
    padding: 0;
  }

  .hero-title {
    font-size: clamp(28px, 8vw, 42px);
  }

  .hero-subtitle {
    font-size: 15px;
    margin-bottom: 28px;
  }

  .hero-ctas {
    margin-bottom: 24px;
  }

  .hero-grid-wrap {
    width: 100%;
    max-width: calc(100vw - 32px);
    margin-top: 24px;
  }
  .hero-grid-wrap .fg-clip,
  .hero-grid-wrap .fg-container {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
  .fg-title { font-size: 11px; }
  .fg-stat { font-size: 9px; }
  .fg-thumb { padding: 12px 6px; }
  .fg-thumb-anim { min-height: 54px; }
  .fg-detail-title { font-size: 14px; }
  .fg-detail-desc { font-size: 10px; }

  .ev-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 8px;
  }

  .hero-phone-mockup {
    width: 260px;
  }

  .hero-phone-wrapper {
    padding: 16px;
  }

  .section-container {
    padding: 0 20px;
  }

  .features,
  .how-it-works,
  .audience-section,
  .stats-section,
  .testimonials-section,
  .cta-section {
    padding: 80px 0;
  }

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

  /* On mobile the features grid stacks into ONE ~2400px-tall column, and
     every card is a .reveal-up element that sits at opacity:0 until the
     IntersectionObserver reveals it on scroll — which renders as a huge
     empty white band mid-page. Same failure mode previously fixed for
     .fg-cell (see "Visible by default" comment near the top of this file).
     Make the section's content visible by default at this breakpoint; the
     entrance animation is skipped on mobile. */
  .features .reveal-up {
    opacity: 1;
    transform: none;
  }

  .step {
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 28px;
  }

  .step-visual {
    display: none;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .stat-value {
    font-size: 36px;
  }

  .stat-card {
    padding: 28px 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

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

  .footer-logo {
    justify-content: center;
  }

  .footer-social {
    justify-content: center;
  }

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

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .float-card-1,
  .float-card-2,
  .float-card-3 {
    display: none;
  }

  .hero-phone-wrapper {
    padding: 20px;
  }

  .legal-container {
    padding: 40px 24px;
  }

  .legal-page {
    padding: 80px 16px 60px;
  }

  /* Sticky CTA mobile */
  .sticky-cta-inner {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 10px;
  }

  .sticky-cta-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 13px;
    white-space: normal;
    flex: 1;
  }

  .sticky-cta-text span {
    display: none;
  }

  .sticky-cta-actions {
    gap: 8px;
  }

  .sticky-cta-calc {
    display: none;
  }

  /* On phones the close button would wrap onto its own row and land on the
     language picker in the bottom-left corner; pin it to the bar's top edge. */
  .sticky-cta-inner {
    position: relative;
  }

  .sticky-cta-close {
    position: absolute;
    top: -14px;
    left: 12px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    padding: 3px;
    color: #64748B;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  }

  /* Video demo mobile */
  .demo-section {
    padding: 80px 0;
  }

  .demo-video-container {
    border-radius: 14px;
  }

  .demo-play-btn {
    width: 60px;
    height: 60px;
  }

  .demo-play-btn svg {
    width: 22px;
    height: 22px;
  }

  .demo-video-features {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
  }

  .demo-feature {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 90px 0 24px;
  }

  .hero-badge {
    font-size: 12px;
    padding: 6px 14px;
  }

  .hero-title {
    font-size: clamp(26px, 7.5vw, 36px);
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .hero-ctas .btn {
    justify-content: center;
  }

  .hero-grid-wrap {
    max-width: 280px;
  }
  .hero-grid-wrap .fg-clip,
  .hero-grid-wrap .fg-container {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }

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

  .cta-title {
    font-size: 28px;
  }

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

  .cta-buttons .btn {
    justify-content: center;
  }
}

/* === Calculator / PM Conversion Section === */
.calculator-section {
  padding: 120px 0 100px;
}

/* -- ROI Calculator Card -- */
.calc-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  padding: 48px;
  margin-bottom: 80px;
  transition: border-color 0.4s ease;
  contain: layout;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.calc-card:hover {
  border-color: rgba(0, 46, 87, 0.12);
}

.calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.calc-inputs,
.calc-results {
  min-width: 0;
  overflow: hidden;
}

.calc-divider {
  width: 1px;
  background: rgba(0, 0, 0, 0.04);
  align-self: stretch;
}

.calc-inputs-title,
.calc-results-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 32px;
}

.calc-field {
  margin-bottom: 28px;
}

.calc-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.calc-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
}

.calc-range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #002E57;
  box-shadow: 0 0 16px rgba(0, 46, 87, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: grab;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.calc-range::-webkit-slider-thumb:hover {
  box-shadow: 0 0 24px rgba(0, 46, 87, 0.7), 0 2px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.15);
}

.calc-range::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.calc-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #002E57;
  box-shadow: 0 0 16px rgba(0, 46, 87, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  border: none;
  cursor: grab;
}

.calc-range::-moz-range-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  border: none;
}

.calc-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  min-width: 120px;
  width: 120px;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Results Grid */
.calc-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
  width: 100%;
}

.calc-result-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  transition: border-color 0.3s ease, background 0.3s ease;
  height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.calc-result-card:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 46, 87, 0.12);
}

.calc-result-card.accent {
  background: rgba(0, 46, 87, 0.08);
  border-color: rgba(0, 46, 87, 0.2);
}

.calc-result-card.accent:hover {
  background: rgba(0, 46, 87, 0.12);
  border-color: rgba(0, 46, 87, 0.3);
}

.calc-result-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #002E57;
  margin-bottom: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  height: 32px;
  overflow: hidden;
}

.calc-result-card.accent .calc-result-value {
  color: #5B87AE;
}

.calc-result-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 2px;
}

.calc-result-sub {
  font-size: 12px;
  color: #64748b;
}

/* "How many leases is that?" — the renewal count behind the dollar total. */
.calc-leases {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: rgba(33, 150, 243, 0.06);
  border: 1px solid rgba(33, 150, 243, 0.18);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 32px;
  width: 100%;
}

.calc-leases-figure {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #2196F3;
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.calc-leases-unit {
  font-size: 16px;
  font-weight: 600;
  color: #64748b;
}

.calc-leases-copy {
  flex: 1 1 260px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  text-align: left;
}

.calc-leases-copy strong {
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}

.calc-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* Turnover Impact Visualization */
.calc-turnover-impact {
  background: linear-gradient(135deg, rgba(0, 46, 87, 0.05), rgba(76, 175, 80, 0.05));
  border: 1px solid rgba(0, 46, 87, 0.1);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  min-height: 180px;
}

.calc-turnover-title {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calc-turnover-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.calc-turnover-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calc-turnover-label {
  width: 70px;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
}

.calc-turnover-track {
  flex: 1;
  height: 24px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

.calc-turnover-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s ease;
}

.calc-turnover-fill.current {
  background: linear-gradient(90deg, #9A1010, #EF5350);
}

.calc-turnover-fill.projected {
  background: linear-gradient(90deg, #002E57, #2E5F8F);
}

.calc-turnover-value-group {
  display: flex;
  flex-direction: column;
  min-width: 130px;
  width: 130px;
  flex-shrink: 0;
  overflow: hidden;
  align-items: flex-end;
  min-width: 100px;
}

.calc-turnover-value {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  text-align: right;
}

.calc-turnover-cost {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #EF4444;
  text-align: right;
  white-space: nowrap;
}

.calc-turnover-bar:last-child .calc-turnover-cost {
  color: #002E57;
}

.calc-turnover-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.calc-turnover-reduction {
  font-size: 20px;
  font-weight: 700;
  color: #002E57;
}

.calc-turnover-note {
  font-size: 12px;
  color: #64748B;
}

.calc-turnover-note a {
  color: #002E57;
  text-decoration: none;
}

.calc-turnover-note a:hover {
  text-decoration: underline;
}

/* -- Case Studies / Proof -- */
.proof-header,
.resource-header {
  text-align: center;
  margin-bottom: 40px;
}

.proof-title,
.resource-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 80px;
}

.proof-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.proof-card:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 46, 87, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.proof-stat {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #002E57;
  margin-bottom: 4px;
}

.proof-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 16px;
}

.proof-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 16px;
}

.proof-source {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}

.proof-source a {
  color: #64748b;
  text-decoration: none;
  border-bottom: 1px solid rgba(74, 74, 96, 0.3);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.proof-source a:hover {
  color: #002E57;
  border-color: #002E57;
}

/* -- White Papers / Resources -- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.resource-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 36px 32px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.resource-card:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 46, 87, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.resource-icon {
  font-size: 36px;
  margin-bottom: 16px;
}

.resource-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 12px;
}

.resource-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 20px;
}

.resource-gate {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resource-form {
  display: flex;
  gap: 10px;
  animation: fadeSlideUp 0.3s ease;
}

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

.resource-email {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  color: #0F172A;
  outline: none;
  transition: border-color 0.3s ease;
}

.resource-email::placeholder {
  color: #64748b;
}

.resource-email:focus {
  border-color: rgba(0, 46, 87, 0.4);
}

.resource-email.error {
  border-color: #9A1010;
}

.resource-success {
  font-size: 13px;
  color: #4CAF50;
  animation: fadeSlideUp 0.3s ease;
}

/* -- Calculator Responsive -- */
@media (max-width: 1024px) {
  .calc-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .calc-divider {
    width: 100%;
    height: 1px;
  }

  .calc-card {
    padding: 32px 24px;
  }
}

@media (max-width: 768px) {
  .calculator-section {
    padding: 80px 0 60px;
  }

  .proof-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .resource-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

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

  .calc-leases {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 20px;
  }

  .calc-result-value {
    font-size: 28px;
  }

  .proof-stat {
    font-size: 40px;
  }

  .resource-form {
    flex-direction: column;
  }
}

/* === FAQ Section === */
.faq-section {
  padding: 100px 0;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(0, 46, 87, 0.2);
  background: rgba(0, 0, 0, 0.02);
}

.faq-item[open] {
  border-color: rgba(0, 46, 87, 0.2);
  background: rgba(0, 0, 0, 0.03);
}

.faq-question {
  padding: 20px 24px;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #334155;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.3s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: #002E57;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item[open] .faq-question::after {
  content: '−';
}

.faq-question:hover {
  color: #0F172A;
}

.faq-answer {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #64748B;
}

/* === About Section === */
.about-section {
  padding: 100px 0 60px;
}

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

.about-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #64748B;
  margin-bottom: 20px;
}

.about-content p:last-child {
  margin-bottom: 0;
}

/* Founder Photo */
.founder-photo-wrapper {
  display: flex;
  justify-content: center;
  margin: 40px auto 48px;
}

.founder-photo-ring {
  position: relative;
  width: 220px;
  height: 220px;
  cursor: grab;
  text-decoration: none;
}

.founder-ornament {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 260px;
  height: 260px;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.founder-photo-ring:hover:not(.is-dragging) .founder-ornament {
  transform: rotate(360deg);
}

.founder-photo-border {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #002E57, #12395E, #EF4444, #9A1010);
  background-size: 300% 300%;
  animation: founderBorderShift 6s ease infinite;
}

@keyframes founderBorderShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.founder-photo-img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid white;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

.founder-photo-ring:hover .founder-photo-img {
  transform: scale(1.04);
}

/* ========================
   STICKY CTA BAR
   ======================== */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.sticky-cta.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.08);
}

.sticky-cta-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #64748B;
  white-space: nowrap;
}

.sticky-cta-text strong {
  color: #0F172A;
  font-weight: 700;
}

/* "Calculate Additional Revenue" is a far wider label than the "See Your
   Savings" it replaced, and .sticky-cta-actions is flex-shrink:0 while the
   text alongside it is white-space:nowrap. Between the 640px mobile rules
   (which hide this button outright) and the full desktop bar there was no
   room for both, so drop the supporting sentence earlier — the same move
   the 640px block already makes. */
@media (max-width: 900px) {
  .sticky-cta-text span { display: none; }
}

.sticky-cta-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sticky-cta-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #94A3B8;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sticky-cta-close:hover {
  color: #0F172A;
  background: rgba(0, 0, 0, 0.04);
}


/* === Smooth Page Load === */
@keyframes pageLoad {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  animation: pageLoad 0.6s ease;
}

/* ============================================
   INTERACTIVE DEMO CONFIGURATOR
   ============================================ */

.demo-configurator {
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF3F8 50%, #F8FAFC 100%);
  padding: 100px 0 80px;
  position: relative;
  overflow: visible;
}

.demo-configurator::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 46, 87,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.demo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.demo-header {
  text-align: center;
  margin-bottom: 48px;
}

.demo-header .section-tag {
  background: rgba(0, 46, 87,0.08);
  color: #002E57;
  border: 1px solid rgba(0, 46, 87,0.15);
}

.demo-header h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: #0F172A;
  margin-top: 16px;
}

.demo-header p {
  color: #64748B;
  font-size: 16px;
  margin-top: 8px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Progress Bar */
.demo-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}

.demo-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.demo-progress-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  border: 2px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  transition: all 0.3s ease;
}

.demo-progress-step.active .demo-progress-dot {
  background: #002E57;
  border-color: #002E57;
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 46, 87,0.4);
}

.demo-progress-step.completed .demo-progress-dot {
  background: #4CAF50;
  border-color: #4CAF50;
  color: #fff;
}

.demo-progress-line {
  width: 40px;
  height: 2px;
  background: rgba(0,0,0,0.08);
  transition: background 0.3s;
}

.demo-progress-step.completed + .demo-progress-line,
.demo-progress-line.filled {
  background: #4CAF50;
}

.demo-progress-label {
  display: none;
}

/* Wizard Layout */
.demo-wizard {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.demo-form-side {
  flex: 1;
  min-width: 0;
}

.demo-phone-side {
  flex: 0 0 320px;
  position: sticky;
  top: 100px;
}

/* Step Panels */
.demo-step {
  display: none;
}

.demo-step.active {
  display: block;
  animation: demoFadeIn 0.3s ease;
}

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

.demo-step h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px;
}

.demo-step .step-desc {
  color: #64748B;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Demo Form Inputs */
.demo-field {
  margin-bottom: 18px;
}

.demo-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.demo-field input[type="text"],
.demo-field input[type="email"],
.demo-field input[type="tel"],
.demo-field input[type="number"],
.demo-field select,
.demo-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  color: #0F172A;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  outline: none;
}

.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
  border-color: #002E57;
  box-shadow: 0 0 0 3px rgba(0, 46, 87,0.12);
  background: #FFFFFF;
}

.demo-field textarea {
  min-height: 80px;
  resize: vertical;
}

.demo-field select option {
  background: #FFFFFF;
  color: #0F172A;
}

/* Address search autocomplete */
.address-search-wrap {
  position: relative;
}

.address-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-top: none;
  border-radius: 0 0 10px 10px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.address-results.active {
  display: block;
}

.address-result-item {
  padding: 10px 14px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background 0.15s;
}

.address-result-item:hover {
  background: #F1F5F9;
}

.address-result-item:last-child {
  border-bottom: none;
}

.address-result-item .address-type {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.demo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Value hint for interactive preview */
.demo-value-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0, 46, 87,0.08) 0%, rgba(76,175,80,0.08) 100%);
  border: 1px solid rgba(0, 46, 87,0.2);
  border-radius: 10px;
  font-size: 13px;
  color: #64748B;
  line-height: 1.5;
}

.demo-value-hint svg {
  flex-shrink: 0;
  color: #002E57;
}

/* Anticipation hint for admin portal unlock */
.demo-anticipation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0, 46, 87,0.1) 0%, rgba(0, 46, 87,0.06) 100%);
  border: 1px solid rgba(0, 46, 87,0.25);
  border-radius: 10px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

.demo-anticipation svg {
  flex-shrink: 0;
  color: #002E57;
  margin-top: 1px;
}

.demo-anticipation strong {
  color: #12395E;
  font-weight: 600;
}

/* Color Picker */
.color-picker-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
}

.color-picker-group input[type="color"] {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  cursor: pointer;
  background: none;
  padding: 2px;
}

.color-picker-group input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker-group input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
}

.color-picker-info {
  flex: 1;
}

.color-picker-info .cp-label {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}

.color-picker-info .cp-desc {
  font-size: 12px;
  color: #64748B;
}

.color-picker-info .cp-hex {
  font-size: 12px;
  font-family: 'Space Grotesk', monospace;
  color: #64748B;
  margin-top: 2px;
}

/* Team Members */
.team-list {
  margin-top: 12px;
}

.team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  margin-bottom: 8px;
}

.team-row .team-name {
  flex: 1;
  font-size: 14px;
  color: #0F172A;
  font-weight: 500;
}

.team-row .team-email {
  font-size: 12px;
  color: #64748B;
}

.team-row .team-role {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(0, 46, 87,0.1);
  color: #002E57;
}

.team-row .team-remove {
  background: none;
  border: none;
  color: #EF4444;
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.team-row .team-remove:hover { opacity: 1; }

/* Team Members (JS-rendered) */
.team-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  margin-bottom: 8px;
}

.team-member-info { flex: 1; min-width: 0; }
.team-member-name { font-size: 14px; color: #0F172A; font-weight: 500; }
.team-member-email { font-size: 12px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.team-member-role {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(0, 46, 87,0.1);
  color: #002E57;
  white-space: nowrap;
}

.team-member-remove {
  background: none;
  border: none;
  color: #EF4444;
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.team-member-remove:hover { opacity: 1; }

/* Submit Spinner */
.demo-btn-submit .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: demoSpin 0.6s linear infinite;
  vertical-align: middle;
}

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

/* Notification Toggles */
.toggle-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
}

.toggle-item span {
  font-size: 14px;
  color: #334155;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #CBD5E1;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #002E57;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Radio Options */
.radio-group {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.radio-option {
  flex: 1;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.radio-option.selected {
  border-color: #002E57;
  background: rgba(0, 46, 87,0.06);
}

.radio-option span {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}

.radio-option.selected span {
  color: #002E57;
}

/* Fee Display */
.fee-breakdown {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 16px;
  margin-top: 12px;
}

.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}

.fee-row .fee-label { color: #64748B; }
.fee-row .fee-value { color: #0F172A; font-weight: 600; }
.fee-row.sort-fee .fee-value { color: #002E57; }
.fee-row.total { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 10px; margin-top: 4px; }
.fee-row.total .fee-label { color: #0F172A; font-weight: 600; }
.fee-row.total .fee-value { color: #4CAF50; font-size: 16px; }

/* Navigation Buttons */
.demo-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}

.demo-btn-back {
  background: #FFFFFF;
  color: #64748B;
  border: 1px solid rgba(0,0,0,0.1);
}

.demo-btn-back:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.demo-btn-next {
  background: #002E57;
  color: #fff;
}

.demo-btn-next:hover {
  background: #12395E;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 46, 87,0.3);
}

.demo-btn-submit {
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: #fff;
  padding: 14px 32px;
  font-size: 16px;
}

.demo-btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(76,175,80,0.4);
}

/* Phone Mockup */
.phone-mockup {
  width: 260px;
  height: 540px;
  background: linear-gradient(145deg, #E2E8F0, #CBD5E1);
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.6), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
}

.phone-notch {
  width: 80px;
  height: 18px;
  background: #E2E8F0;
  border-radius: 0 0 10px 10px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--demo-bg, #F8FAFC);
}

.phone-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 12px 8px;
  flex-shrink: 0;
  background: #0F172A;
}

.phone-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.phone-topbar-left svg {
  color: #64748B;
}

.phone-topbar-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-topbar-logo img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.phone-topbar-logo span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}

.phone-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.phone-topbar-right svg {
  color: #94A3B8;
}

.phone-topbar-bell {
  position: relative;
}

.phone-topbar-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  background: #EF4444;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-topbar-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--demo-primary, #002E57);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

/* Phone Modal */
.phone-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 26px;
}

.phone-modal-overlay.active {
  display: flex;
}

.phone-modal {
  width: 90%;
  max-height: 80%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.phone-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #E2E8F0;
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
}

.phone-modal-content {
  padding: 14px;
  max-height: 300px;
  overflow-y: auto;
}

.phone-modal-content::-webkit-scrollbar { width: 0; }

.phone-topbar-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
}

.phone-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
  position: relative;
}

.phone-content::-webkit-scrollbar { width: 0; }

/* Social page background effects - gradient mesh + dot pattern */
#phone-social {
  position: relative;
  background:
    /* Gradient mesh blobs */
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(0, 46, 87,0.1) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 100% 100%, rgba(76,175,80,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(139,92,246,0.05) 0%, transparent 50%);
}

#phone-social::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Connected dots pattern */
  background-image:
    radial-gradient(circle, rgba(0, 46, 87,0.2) 1px, transparent 1px),
    radial-gradient(circle, rgba(0, 46, 87,0.15) 1px, transparent 1px);
  background-size: 24px 24px, 36px 36px;
  background-position: 0 0, 12px 12px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

#phone-social > * {
  position: relative;
  z-index: 1;
}

/* Glassmorphism cards for social */
#phone-social .ph-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

#phone-social .ph-poll {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

#phone-social .ph-open-door-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

#phone-social .ph-open-door-card.own {
  background: linear-gradient(135deg, rgba(0, 46, 87,0.12) 0%, rgba(255,255,255,0.9) 100%);
}

/* Phone Bottom Nav */
.phone-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 48px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  padding-bottom: 2px;
}

.phone-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px 4px;
  transition: color 0.2s;
  color: #64748b;
}

.phone-nav-item svg {
  width: 18px;
  height: 18px;
}

.phone-nav-item.active {
  color: var(--demo-primary, #002E57);
}

.phone-nav-item span {
  font-size: 9px;
  font-weight: 500;
}

/* Phone Screen Content */
.phone-page { display: none; }
.phone-page.active { display: block; }

/* -- Home Screen -- */
.ph-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Open Door Cards */
.ph-open-doors {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
  scrollbar-width: none;
}

.ph-open-doors::-webkit-scrollbar { display: none; }

.ph-open-door-card {
  min-width: 140px;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ph-open-door-card.own {
  border-color: rgba(0, 46, 87,0.3);
  background: linear-gradient(135deg, rgba(0, 46, 87,0.04) 0%, rgba(0, 46, 87,0.08) 100%);
}

.ph-od-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ph-od-avatar {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.ph-od-name {
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
}

.ph-od-activity {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px;
}

.ph-od-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #64748B;
  margin-bottom: 8px;
}

.ph-od-btn {
  width: 100%;
  padding: 6px 0;
  border-radius: 8px;
  background: var(--demo-primary, #002E57);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.ph-od-btn.outline {
  background: transparent;
  border: 1.5px solid var(--demo-primary, #002E57);
  color: var(--demo-primary, #002E57);
}

/* Section Headers */
.ph-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ph-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
}

.ph-section-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--demo-primary, #002E57);
}

.ph-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ph-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.ph-name {
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
}

.ph-time {
  font-size: 11px;
  color: #64748b;
  margin-left: auto;
}

.ph-card-body {
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}

.ph-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  margin-top: 6px;
}

/* -- Poll Card -- */
.ph-poll {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ph-poll-q {
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
  margin-bottom: 8px;
}

.ph-poll-option {
  position: relative;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 8px;
  font-size: 12px;
  color: #334155;
  overflow: hidden;
  border: 1px solid #E2E8F0;
}

.ph-poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 8px;
  opacity: 0.12;
}

.ph-poll-pct {
  float: right;
  font-weight: 600;
  font-size: 11px;
}

/* -- Chat Screen -- */
.ph-chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
}

.ph-chat-item:last-child {
  border-bottom: none;
}

.ph-chat-info {
  flex: 1;
  min-width: 0;
}

.ph-chat-name {
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 2px;
}

.ph-chat-msg {
  font-size: 12px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-chat-time {
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
}

.ph-chat-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* -- Events Screen -- */
.ph-event {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ph-event-title {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}

.ph-event-detail {
  font-size: 11px;
  color: #64748B;
  margin-top: 4px;
}

.ph-event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.ph-event-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: default;
}

.ph-event-rsvp {
  font-size: 11px;
  color: #64748b;
}

.ph-event-stars {
  margin-top: 6px;
  font-size: 11px;
  color: #F59E0B;
}

/* -- Profile Screen -- */
.ph-profile-header {
  text-align: center;
  padding: 16px 0;
}

.ph-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.ph-profile-name {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
}

.ph-profile-building {
  font-size: 12px;
  color: #64748B;
}

.ph-profile-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.ph-profile-stat {
  display: flex;
  justify-content: space-around;
  padding: 14px 0;
  margin-top: 12px;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

.ph-profile-stat div {
  text-align: center;
}

.ph-profile-stat .stat-num {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
}

.ph-profile-stat .stat-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
}

/* Success State */
.demo-success {
  text-align: center;
  padding: 40px 0;
}

.demo-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(76,175,80,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.demo-success h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  color: #fff;
  margin-bottom: 8px;
}

.demo-success p {
  color: #64748b;
  font-size: 15px;
  margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 768px) {
  .demo-wizard {
    flex-direction: column;
  }
  .demo-phone-side {
    flex: none;
    width: 100%;
    display: flex;
    justify-content: center;
    position: static;
    margin-bottom: 24px;
    order: -1;
  }
  .phone-mockup {
    width: 260px;
    height: 540px;
  }
  .demo-row {
    grid-template-columns: 1fr;
  }
  .radio-group {
    flex-direction: column;
  }
  .demo-progress-dot {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  .demo-progress-line {
    width: 20px;
  }
}

/* ========================
   SEARCH OVERLAY
   ======================== */
.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.8);
  color: #64748B;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.nav-search-btn:hover {
  background: #f1f5f9;
  color: #0F172A;
  border-color: rgba(0, 0, 0, 0.12);
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-modal {
  width: 100%;
  max-width: 580px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.25s ease;
}

.search-overlay.active .search-modal {
  transform: translateY(0) scale(1);
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.search-icon {
  flex-shrink: 0;
  color: #94a3b8;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  color: #0F172A;
  background: transparent;
}

.search-input::placeholder {
  color: #64748b;
}

.search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #f1f5f9;
  color: #64748B;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.search-close:hover {
  background: #e2e8f0;
  color: #0F172A;
}

.search-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}

.search-hint {
  padding: 32px 16px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

.search-no-results {
  padding: 32px 16px;
  text-align: center;
}

.search-no-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.search-no-results p {
  color: #64748B;
  font-size: 14px;
  margin: 0;
}

.search-no-results .search-no-sub {
  color: #64748b;
  font-size: 13px;
  margin-top: 4px;
}

.search-result-item {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
  cursor: pointer;
}

.search-result-item:hover {
  background: #f8fafc;
}

.search-result-title {
  font-weight: 600;
  font-size: 14px;
  color: #0F172A;
  margin-bottom: 2px;
}

.search-result-desc {
  font-size: 13px;
  color: #64748B;
  line-height: 1.4;
}

.search-footer {
  padding: 10px 20px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

.search-footer kbd {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  font-family: 'SF Mono', 'Monaco', monospace;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #64748B;
}

@media (max-width: 768px) {
  .search-overlay {
    padding-top: 5vh;
    padding-left: 12px;
    padding-right: 12px;
  }
  .search-modal {
    max-width: 100%;
  }
  .nav-search-btn {
    width: 32px;
    height: 32px;
  }
  .nav-search-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* === Audience Tabs === */
.audience-tabs-wrapper {
  padding: 0;
}
.audience-tab-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 48px 0 32px;
}
.audience-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 2px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.audience-tab-btn:hover {
  border-color: #002E57;
  color: #002E57;
}
.audience-tab-btn.active {
  background: linear-gradient(135deg, #002E57, #12395E);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 46, 87,0.3);
}
.audience-tab-panel {
  display: none;
}
.audience-tab-panel.active {
  display: block;
}

/* ==========================================================================
   FIND-PROPERTY v2 — Apartments.com-style map + card layout
   ========================================================================== */

.fp-sticky {
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.fp-sticky-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.fp-search {
  position: relative;
  flex: 1 1 360px;
  min-width: 260px;
}
.fp-search-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #94A3B8; pointer-events: none;
}
.fp-search-input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #0F172A;
  background: #F8FAFC;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.fp-search-input:focus { border-color: #002E57; background: #fff; }
.fp-pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}
.filter-pill:hover { border-color: #002E57; color: #002E57; }
.filter-pill.active {
  background: #0F172A; color: #fff; border-color: #0F172A;
}
.filter-pill.active .filter-pill-label { color: rgba(255,255,255,0.72); }
.filter-pill-label { color: #64748B; font-weight: 500; }
.filter-pill-value { font-weight: 700; }
.filter-pill-toggle { gap: 6px; }
.filter-pill-reset {
  background: transparent; border: none; color: #9A1010;
  font-weight: 600; font-size: 13px; padding: 6px 8px;
}
.filter-pill-reset:hover { color: #C62828; }

.filter-dropdown {
  position: fixed;
  z-index: 95;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.14);
  padding: 20px;
  width: 320px;
  display: none;
}
.filter-dropdown.open { display: block; }
.filter-dropdown-title {
  font-size: 13px; font-weight: 700;
  color: #0F172A; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 14px;
}
.filter-range-wrap { position: relative; height: 32px; margin: 8px 0 4px; }
.filter-range {
  appearance: none; -webkit-appearance: none;
  position: absolute; top: 10px; left: 0; right: 0;
  width: 100%; height: 4px; background: transparent;
  pointer-events: none;
}
.filter-range::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #002E57;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
}
.filter-range::-moz-range-thumb {
  pointer-events: auto;
  width: 20px; height: 20px; border-radius: 50%;
  background: #002E57; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
}
.filter-range-wrap::before {
  content: ''; position: absolute; top: 14px; left: 0; right: 0;
  height: 4px; background: #E2E8F0; border-radius: 2px;
}
.filter-range-labels {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: #0F172A;
  margin-bottom: 4px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  color: #0F172A;
  background: #F1F5F9;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { background: #E2E8F0; }
.chip.active { background: #0F172A; color: #fff; border-color: #0F172A; }
.filter-dropdown-actions {
  display: flex; justify-content: space-between;
  align-items: center; margin-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 14px;
}
.filter-dropdown-clear {
  background: none; border: none;
  color: #64748B; font-weight: 600; font-size: 13px;
  cursor: pointer; padding: 4px 8px;
}
.filter-dropdown-clear:hover { color: #0F172A; }
.filter-dropdown-apply {
  background: #0F172A; color: #fff;
  padding: 8px 20px; border: none;
  border-radius: 999px; font-weight: 600;
  font-size: 14px; cursor: pointer;
}
.filter-dropdown-apply:hover { background: #334155; }

.fp-counter-row {
  position: fixed;
  top: 136px; left: 0; right: 0;
  z-index: 85;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 100%;
}
.fp-count { font-size: 14px; font-weight: 600; color: #0F172A; }
.fp-sort-label { font-size: 13px; color: #64748B; margin-right: 6px; }
.fp-sort-select {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600; color: #0F172A;
  background: #F8FAFC; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
}

.map-split {
  position: fixed;
  top: 180px; bottom: 0; left: 0; right: 0;
  display: flex;
}
.map-pane {
  flex: 0 0 55%;
  position: relative;
  background: #F1F5F9;
}
#gmap { width: 100%; height: 100%; }
.map-loading {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #64748B; font-size: 14px; font-weight: 500;
}
.list-pane {
  flex: 1 1 45%;
  overflow-y: auto;
  padding: 20px 24px 60px;
  background: #fff;
}
/* Cap the max-width of the split view overall on very wide displays so
   the map doesn't become a gigantic distorted rectangle and list cards
   don't stretch to absurd widths. Center the split when we cap it. */
@media (min-width: 1800px) {
  .map-split {
    max-width: 1800px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 100%;
  }
  /* Gray gutters either side of the split on ultra-wide so it reads as
     an intentional content pane, not a broken one. */
  body::before {
    content: "";
    position: fixed;
    top: 180px; bottom: 0; left: 0; right: 0;
    background: #F8FAFC;
    z-index: 0;
  }
  .map-split { z-index: 1; box-shadow: 0 0 40px rgba(0,0,0,0.08); }
}
/* On wider list panes, switch the card list to a 2-column grid so cards
   don't become stretched full-width rectangles. Kicks in around 1200px
   list-pane width (total viewport ~2100px with 55% map). */
@media (min-width: 1400px) {
  .list-pane {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-content: start;
  }
  .list-pane > .listing-card-v2 { margin-bottom: 0; }
}
@media (min-width: 1900px) {
  .list-pane {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Cap individual card image height on ultra-wide so they don't become
   huge squares that dominate the layout. */
@media (min-width: 1400px) {
  .listing-card-v2-photo {
    max-height: 260px;
  }
}

/* Sort logo markers */
.sort-marker { transition: transform .2s; transform-origin: center bottom; }
.sort-marker-bounce { animation: sort-marker-bounce 0.6s ease-in-out infinite; }
@keyframes sort-marker-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Listing card v2 */
.listing-card-v2 {
  display: block;
  margin-bottom: 16px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all .25s ease;
}
.listing-card-v2:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 46, 87,0.35);
  box-shadow: 0 8px 28px rgba(0, 46, 87,0.12);
}
.listing-card-v2-photo {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  background: #F1F5F9; overflow: hidden;
}
.listing-card-v2-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.listing-card-v2-photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* Listing-card photo carousel (wired via advanceCarousel/setCarouselIndex in JS).
   Previously the HTML rendered without any CSS, so only the first photo was
   visible. Now: arrow buttons + dots + photo counter overlay the image. */
.card-carousel { position: absolute; inset: 0; background: #F1F5F9; }
/* JS uses track.scrollTo() — track must be horizontally scrollable with snap. */
.card-carousel-track {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
.card-carousel-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.card-carousel-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: cover; display: block;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.card-carousel-nav {
  position: absolute; top: 50%;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: #0F172A;
  border: none; font-size: 22px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transform: translateY(-50%);
  opacity: 0.9; transition: opacity 0.15s, background 0.15s, transform 0.1s;
  z-index: 2;
}
.card-carousel-nav:hover { opacity: 1; background: #fff; }
.card-carousel-nav:active { transform: translateY(-50%) scale(0.92); }
.card-carousel-prev { left: 10px; }
.card-carousel-next { right: 10px; }
.card-carousel-dots {
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 5px;
  z-index: 2;
}
.card-carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.55); border: none;
  cursor: pointer; padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.card-carousel-dot:hover { background: rgba(255,255,255,0.85); }
.card-carousel-dot.is-active { background: #fff; transform: scale(1.35); }
.card-carousel-counter {
  position: absolute; top: 12px; right: 12px;
  padding: 3px 10px; border-radius: 12px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 11px; font-weight: 600;
  z-index: 2; backdrop-filter: blur(4px);
}
@media (max-width: 720px) {
  .card-carousel-nav { width: 36px; height: 36px; font-size: 24px; }
}
.listing-card-v2-badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.95);
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.listing-card-v2-badge-pets { color: #12395E; }
.listing-card-v2-body { padding: 16px 18px 18px; }
.listing-card-v2-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700;
  color: #0F172A; margin-bottom: 2px;
}
.listing-card-v2-meta {
  font-size: 13px; color: #475569; margin-bottom: 8px;
}
.listing-card-v2-name {
  font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 2px;
}
.listing-card-v2-address {
  font-size: 13px; color: #64748B; margin-bottom: 14px;
}
.listing-card-v2-actions { display: flex; gap: 8px; }
.listing-card-v2-btn {
  flex: 1; font-size: 13px; padding: 10px 12px; border-radius: 10px;
}

.no-results { text-align: center; padding: 48px 20px; }
.no-results h3 { font-size: 18px; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
.no-results p { font-size: 14px; color: #64748B; }

/* Suggest-a-property (kept from old page, lighter styling for pane) */
.suggest-section {
  margin-top: 32px;
  padding: 28px 24px;
  background: #F8FAFC;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  text-align: center;
}
.suggest-section h3 { font-size: 17px; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
.suggest-section p { font-size: 13px; color: #64748B; margin-bottom: 14px; line-height: 1.5; }
.suggest-form { display: flex; flex-direction: column; gap: 10px; }
.suggest-form input {
  width: 100%; padding: 12px 14px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px;
  outline: none; transition: border-color .2s;
}
.suggest-form input:focus { border-color: #002E57; }
.suggest-form button {
  width: 100%; padding: 12px 16px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  color: #fff; background: #002E57; border: none;
  border-radius: 10px; cursor: pointer;
  transition: background .2s;
}
.suggest-form button:hover { background: #12395E; }
.suggest-success {
  display: none; color: #4CAF50; font-weight: 600; font-size: 14px; margin-top: 14px;
}

/* Mobile map/list toggle */
.mobile-view-toggle {
  display: none;
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 92;
  align-items: center; gap: 8px;
  padding: 12px 22px;
  background: #0F172A;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* Detail / tour / message modals */
.fp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.fp-modal-overlay.open { display: flex; }
.fp-modal {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}
.fp-modal-lg { max-width: 720px; }
.fp-modal-close {
  position: absolute; top: 14px; right: 14px;
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  color: #0F172A;
}
.fp-modal-close:hover { background: #fff; }
.fp-modal-body { padding: 24px 28px 28px; }
.fp-modal-body h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px; font-weight: 800;
  color: #0F172A; margin-bottom: 4px;
}
.fp-modal-sub { font-size: 14px; color: #64748B; margin-bottom: 14px; }
.fp-modal-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.fp-badge-green { background: rgba(76,175,80,0.12); color: #2E7D32; }
.fp-badge-blue { background: rgba(0, 46, 87,0.12); color: #2E5F8F; }
.fp-badge-neutral { background: rgba(15,23,42,0.06); color: #334155; }
.fp-modal-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px; font-weight: 700;
  color: #0F172A; margin-bottom: 12px;
}
.fp-modal-amenities { margin-top: 14px; }
.fp-modal-amenities h4 {
  font-size: 13px; font-weight: 700;
  color: #0F172A; margin: 14px 0 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.fp-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-chip {
  padding: 5px 12px; border-radius: 999px;
  background: rgba(0, 46, 87,0.08); color: #2E5F8F;
  font-size: 12px; font-weight: 600;
}
.fp-modal-pet-policy {
  margin-top: 12px; padding: 10px 14px;
  background: #F8FAFC; border-radius: 10px;
  font-size: 13px; color: #475569; line-height: 1.5;
}
.fp-modal-contact {
  margin-top: 14px; padding: 10px 14px;
  background: rgba(0, 46, 87,0.04); border-radius: 10px;
  font-size: 13px; color: #0F172A;
}
.fp-modal-contact a { color: #12395E; font-weight: 600; text-decoration: none; }
.fp-modal-contact a:hover { text-decoration: underline; }
.fp-modal-cta-row {
  display: flex; gap: 10px; margin-top: 20px;
}
.fp-modal-cta-row .btn { flex: 1; }

/* Forms inside modals */
.fp-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.fp-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600;
  color: #475569;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.fp-form input, .fp-form textarea {
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: #0F172A; padding: 11px 14px;
  background: #F8FAFC;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 10px; outline: none;
  transition: border-color .2s, background .2s;
  text-transform: none; font-weight: 400; letter-spacing: normal;
}
.fp-form input:focus, .fp-form textarea:focus { border-color: #002E57; background: #fff; }
.fp-form textarea { resize: vertical; min-height: 72px; }
.fp-form-submit { margin-top: 6px; width: 100%; }
.fp-form-success {
  display: none; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 0;
}
.fp-form-success svg { margin-bottom: 12px; }
.fp-form-success h3 {
  font-size: 18px; font-weight: 700;
  color: #0F172A; margin-bottom: 6px;
}
.fp-form-success p { font-size: 14px; color: #64748B; line-height: 1.5; max-width: 380px; }

/* Photo carousel inside detail modal */
.fp-modal .photo-carousel {
  margin: 0;
  border-radius: 20px 20px 0 0;
  aspect-ratio: 16/9;
  max-height: 360px;
  overflow: hidden;
  position: relative;
  background: #F1F5F9;
}
.fp-modal .photo-track { display: flex; transition: transform .45s cubic-bezier(.25,.46,.45,.94); height: 100%; }
.fp-modal .photo-slide { min-width: 100%; height: 100%; object-fit: cover; }
.fp-modal .photo-placeholder {
  min-width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #DDE7EF, #C3D3E1);
  color: #12395E;
}
.fp-modal .carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  z-index: 2;
}
.fp-modal .carousel-prev { left: 12px; }
.fp-modal .carousel-next { right: 12px; }
.fp-modal .carousel-dots {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.fp-modal .carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.55); border: none; cursor: pointer;
  transition: all .25s; padding: 0;
}
.fp-modal .carousel-dot.active {
  background: #fff; width: 18px; border-radius: 4px;
}
.fp-modal .photo-count {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 8px; z-index: 2;
}

/* Responsive */
@media (max-width: 1024px) {
  .map-pane { flex-basis: 48%; }
  .list-pane { flex-basis: 52%; padding: 16px 18px 60px; }
}
@media (max-width: 768px) {
  .fp-sticky { top: 60px; }
  .fp-sticky-inner { padding: 10px 14px; gap: 10px; }
  .fp-search { flex: 1 1 100%; min-width: 0; }
  /* 16px font-size prevents iOS Safari auto-zoom on focus */
  .fp-search-input { font-size: 16px; padding: 12px 14px 12px 38px; }
  .fp-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .fp-pills::-webkit-scrollbar { display: none; }
  .filter-pill { flex-shrink: 0; min-height: 40px; }
  .fp-counter-row { padding: 8px 14px; top: 156px; }
  .map-split { top: 200px; }
  .map-pane { display: none; flex-basis: 100%; }
  .list-pane { flex-basis: 100%; padding: 14px 14px 80px; }
  .map-split.mobile-show-map .map-pane { display: block; }
  .map-split.mobile-show-map .list-pane { display: none; }
  .mobile-view-toggle { display: inline-flex; min-height: 48px; }
  .fp-modal-overlay { padding: 0; align-items: flex-end; }
  .fp-modal { max-width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .fp-modal-body { padding: 20px 18px 22px; }
  .fp-modal-cta-row { flex-direction: column; }
  .fp-modal-close { width: 40px; height: 40px; top: 10px; right: 10px; }
  .filter-dropdown { width: calc(100vw - 24px); max-width: 360px; padding: 16px; }
  /* Forms inside modals — prevent iOS zoom */
  .fp-form input, .fp-form textarea { font-size: 16px; }
  /* Card tap-area bumps */
  .listing-card-v2-btn { padding: 11px 12px; min-height: 40px; }
  .card-carousel-nav { width: 40px; height: 40px; }
  /* Detail modal photo carousel */
  .fp-modal .photo-carousel { border-radius: 20px 20px 0 0; max-height: 280px; }
  .fp-modal .carousel-btn { width: 40px; height: 40px; }
}

/* Very small phones (iPhone SE etc.) — extra guardrails against overflow */
@media (max-width: 380px) {
  .fp-sticky-inner { padding: 8px 10px; gap: 8px; }
  .filter-pill { padding: 8px 12px; font-size: 13px; }
  .list-pane { padding: 12px 12px 80px; }
  .listing-card-v2-body { padding: 14px 14px 16px; }
  .listing-card-v2-actions { flex-direction: column; }
  .listing-card-v2-btn { width: 100%; }
}

/* === Accessibility: visible focus indicator for keyboard users ===
   Placed at end of file so it wins specificity ties against
   base rules that set outline: none on inputs/selects. */
:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.translate-widget .goog-te-gadget select:focus-visible {
  outline: 2px solid #002E57;
  outline-offset: 2px;
}