/* ═══════════════════════════════════════════════════════════
   sedonaOS Landing — matches app visual identity exactly
   Palette pulled from Tailwind indigo/slate + brand gradients
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Indigo ramp */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --indigo-950: #1e1b4b;

  /* Violet ramp */
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;

  /* Slate ramp */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Brand gradient stops */
  --brand-b: #7C6CF0;
  --brand-b-deep: #4433C8;
  --brand-f: #C4B8FE;
  --brand-f-deep: #8C7CF0;

  /* Semantic */
  --emerald: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--slate-900);
  background: #fff;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════
   REUSABLE UI PARTS
   ═══════════════════════════════════════════════════════════ */

.eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--indigo-600);
  padding: 5px 12px;
  background: var(--indigo-50);
  border: 1px solid var(--indigo-100);
  border-radius: 999px;
  margin-bottom: 20px;
}
.eyebrow.accent {
  color: var(--indigo-300);
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(129, 140, 248, 0.3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-align: center;
}
.btn-sm { padding: 8px 16px; font-size: 12px; border-radius: 10px; }
.btn-lg { padding: 14px 26px; font-size: 14px; border-radius: 14px; }
.btn-block { width: 100%; padding: 15px 24px; }

.btn-primary {
  color: white;
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--indigo-950) 100%);
  border-color: rgba(30, 27, 75, 0.6);
  box-shadow: 0 8px 24px -8px rgba(30, 27, 75, 0.5), 0 2px 4px -1px rgba(30, 27, 75, 0.2);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--slate-800) 0%, var(--indigo-900) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -8px rgba(30, 27, 75, 0.6);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  color: white;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.check-icon { color: var(--emerald); flex-shrink: 0; margin-top: 2px; }
.check-icon.accent { color: var(--indigo-400); }

/* ═══════════════════════════════════════════════════════════
   § STICKY TOP NAV
   ═══════════════════════════════════════════════════════════ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg,
    rgba(2, 6, 23, 0.85) 0%,
    rgba(15, 23, 42, 0.85) 40%,
    rgba(30, 27, 75, 0.85) 100%);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(129, 140, 248, 0.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 4px 20px -8px rgba(30, 27, 75, 0.4);
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  color: white;
  letter-spacing: -0.01em;
  transition: opacity 0.2s;
}
.brand:hover { opacity: 0.85; }
.brand-mark { display: flex; align-items: center; }
.brand-name span { color: var(--indigo-300); font-weight: 500; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a {
  font-size: 13px;
  font-weight: 600;
  color: rgba(199, 210, 254, 0.75);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: white; }

/* Nav CTA button gets the brand gradient so it pops off the dark bar */
.site-nav .btn-primary {
  background: linear-gradient(135deg, var(--brand-b) 0%, var(--brand-b-deep) 100%);
  border-color: rgba(124, 108, 240, 0.6);
  box-shadow: 0 4px 14px -2px rgba(124, 108, 240, 0.5),
              0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.site-nav .btn-primary:hover {
  background: linear-gradient(135deg, #8A7BF3 0%, #5A48D3 100%);
  box-shadow: 0 6px 20px -2px rgba(124, 108, 240, 0.65),
              0 1px 0 rgba(255, 255, 255, 0.15) inset;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner { padding: 14px 20px; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   § 1 — HERO
   ═══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  background: linear-gradient(135deg, var(--slate-950) 0%, var(--slate-900) 40%, var(--indigo-950) 100%);
  color: white;
  padding: 100px 32px 60px;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
}
.hero-glow-1 {
  top: 5%; left: 15%;
  width: 500px; height: 500px;
  background: rgba(99, 102, 241, 0.4);
}
.hero-glow-2 {
  top: 20%; right: 10%;
  width: 400px; height: 400px;
  background: rgba(139, 92, 246, 0.3);
}
.hero-blueprint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--indigo-100);
  opacity: 0.12;
  pointer-events: none;
}
.hero-blueprint-mobile { display: none; }
@media (max-width: 720px) {
  .hero-blueprint-desktop { display: none; }
  .hero-blueprint-mobile {
    display: block;
    /* On mobile the SVG meets the viewport instead of slicing.
       Boost opacity slightly to compensate for smaller line thickness at scale. */
    opacity: 0.12;
    color: var(--indigo-100);
  }
}

/* Shared blueprint underlay — used on Journey and Growth sections.
   Sits at z-index 0 so glow orbs (z:1) and content (z:2) layer over it. */
.section-blueprint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--indigo-200);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding-top: 0px;
}

/* Big hero brand mark — sits above the hero pill */
.hero-brand-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 auto 32px;
  width: fit-content;
}
.hero-brand-svg {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 24px rgba(124, 108, 240, 0.5));
}
.hero-brand-glow {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124, 108, 240, 0.5) 0%,
    rgba(124, 108, 240, 0.15) 40%,
    transparent 70%);
  filter: blur(30px);
  z-index: 1;
  pointer-events: none;
  animation: hero-brand-pulse 4s ease-in-out infinite;
}
@keyframes hero-brand-pulse {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}
.hero-brand-wordmark {
  position: relative;
  z-index: 2;
  font-size: 22px;
  font-weight: 900;
  color: white;
  letter-spacing: -0.02em;
}
.hero-brand-wordmark span {
  color: var(--indigo-300);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .hero-brand-glow { animation: none; }
}
@media (max-width: 720px) {
  .hero-brand-svg { width: 72px; height: 46px; }
  .hero-brand-wordmark { font-size: 20px; }
  .hero-brand-glow { width: 140px; height: 140px; }
  
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--indigo-200);
  padding: 8px 16px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 28px;
}
.hero-pill-dot {
  width: 6px; height: 6px;
  background: var(--indigo-400);
  border-radius: 50%;
  box-shadow: 0 0 12px 2px var(--indigo-400);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero-headline {
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 24px;
  color: white;
}
.hero-headline-accent {
  background: linear-gradient(135deg, var(--indigo-300) 0%, var(--violet-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.2em;
  font-size: 0.5em;
  font-weight: 600;
  display: block;
  margin-top: 15px;
}
.hero-sub {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(226, 232, 240, 0.85);
  margin: 0 auto 40px;
  max-width: 640px;
}
.hero-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hero-microcopy {
  font-size: 12px;
  color: rgba(199, 210, 254, 0.65);
  font-weight: 500;
  margin: 0;
}

/* Hero product mockup */
.hero-mockup {
  position: relative;
  z-index: 10;
  max-width: 1080px;
  margin: 80px auto 60px;
  padding: 0 20px;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM MOCKUP FRAME SYSTEM
   Every screenshot sits inside a .mockup-stage — the stage
   handles the glow orb, perspective, reflection, and depth.
   The .mockup-frame is the visible browser chrome inside.
   ═══════════════════════════════════════════════════════════ */

.mockup-stage {
  position: relative;
  perspective: 2200px;
  perspective-origin: 50% 20%;
  padding: 20px 0 60px;
}

/* Ambient glow orb — sits behind the frame, bleeds indigo halo */
.mockup-stage::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  height: 78%;
  background: radial-gradient(ellipse at center,
    rgba(124, 108, 240, 0.5) 0%,
    rgba(68, 51, 200, 0.28) 32%,
    rgba(68, 51, 200, 0) 68%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
  animation: glow-pulse 8s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* Reflected floor — vertical mirror below the frame */
.mockup-stage::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 60px;
  background: linear-gradient(to bottom,
    rgba(124, 108, 240, 0.15) 0%,
    rgba(124, 108, 240, 0.05) 40%,
    transparent 100%);
  filter: blur(12px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

/* The frame itself — perspective tilt + layered shadows */
.mockup-frame {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-radius: 16px;
  border: 1px solid rgba(30, 27, 75, 0.12);
  overflow: hidden;
  z-index: 2;
  /* Layered shadow stack:
     1. Tight contact shadow (defines the edge)
     2. Colored indigo mid-shadow (brand glow beneath)
     3. Wide neutral shadow (grounds it on the page) */
  box-shadow:
    0 1px 2px rgba(30, 27, 75, 0.12),
    0 8px 20px -4px rgba(124, 108, 240, 0.25),
    0 30px 60px -20px rgba(30, 27, 75, 0.45),
    0 60px 100px -40px rgba(30, 27, 75, 0.35);
  /* 3D tilt — very subtle, feels like it's leaning forward */
  transform:
    perspective(2200px)
    rotateX(2.5deg)
    rotateY(-1deg);
  transform-origin: 50% 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

/* Straighten slightly on hover — feels alive */
.mockup-stage:hover .mockup-frame {
  transform:
    perspective(2200px)
    rotateX(1deg)
    rotateY(0deg)
    translateY(-4px);
  box-shadow:
    0 1px 2px rgba(30, 27, 75, 0.12),
    0 12px 28px -4px rgba(124, 108, 240, 0.35),
    0 40px 80px -20px rgba(30, 27, 75, 0.5),
    0 80px 120px -40px rgba(30, 27, 75, 0.4);
}

/* Feature sections have a slighter tilt because they're smaller */
.feature-image .mockup-stage { padding: 12px 0 40px; }
.feature-image .mockup-frame {
  transform:
    perspective(1800px)
    rotateX(2deg)
    rotateY(-0.5deg);
}
.feature-image .mockup-stage:hover .mockup-frame {
  transform:
    perspective(1800px)
    rotateX(0.5deg)
    rotateY(0deg)
    translateY(-3px);
}

/* Feature images on the LEFT tilt the opposite way for symmetry */
#communications .mockup-frame,
#integrations .mockup-frame {
  transform:
    perspective(1800px)
    rotateX(2deg)
    rotateY(0.5deg);
}
#communications .mockup-stage:hover .mockup-frame,
#integrations .mockup-stage:hover .mockup-frame {
  transform:
    perspective(1800px)
    rotateX(0.5deg)
    rotateY(0deg)
    translateY(-3px);
}

/* On dark sections (AI Assessor), boost the glow so it competes with the dark bg */
.feature-dark .mockup-stage::before {
  background: radial-gradient(ellipse at center,
    rgba(124, 108, 240, 0.7) 0%,
    rgba(196, 184, 254, 0.35) 30%,
    rgba(68, 51, 200, 0) 65%);
  filter: blur(60px);
}
.feature-dark .mockup-frame {
  border-color: rgba(196, 184, 254, 0.2);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 24px -4px rgba(124, 108, 240, 0.5),
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 80px 140px -40px rgba(0, 0, 0, 0.5);
}
.feature-dark .mockup-stage:hover .mockup-frame {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 32px -4px rgba(124, 108, 240, 0.7),
    0 50px 100px -20px rgba(0, 0, 0, 0.7),
    0 100px 160px -40px rgba(0, 0, 0, 0.6);
}

/* Dispatch section is a hero-scale mockup — bigger everything */
.dispatch-mockup .mockup-stage { padding: 30px 0 70px; }
.dispatch-mockup .mockup-stage::before {
  width: 90%;
  height: 85%;
}
.dispatch-mockup .mockup-frame {
  transform:
    perspective(2400px)
    rotateX(2deg)
    rotateY(0deg);
}
.dispatch-mockup .mockup-stage:hover .mockup-frame {
  transform:
    perspective(2400px)
    rotateX(0.5deg)
    rotateY(0deg)
    translateY(-5px);
}

/* Reduce/disable motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
  .mockup-stage::before { animation: none; }
  .mockup-frame,
  .mockup-stage:hover .mockup-frame { transition: none; transform: none; }
}

/* Respect narrow screens — flatten the 3D on mobile */
@media (max-width: 720px) {
  .mockup-frame,
  .feature-image .mockup-frame,
  #communications .mockup-frame,
  #integrations .mockup-frame,
  .dispatch-mockup .mockup-frame { transform: none !important; }
  .mockup-stage { padding: 10px 0 30px; }
}

.mockup-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
}
.mockup-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--slate-300);
}
.mockup-url {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-500);
  background: white;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--slate-200);
  flex: 1;
  max-width: 340px;
  text-align: center;
}
.mockup-screenshot {
  position: relative;
  background: var(--slate-50);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mockup-screenshot img {
  width: 100%;
  height: auto;
  display: block;
}
.placeholder-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 40px;
  text-align: center;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 12px, #eef2ff 12px, #eef2ff 24px);
  width: 100%;
  min-height: 340px;
  justify-content: center;
}
.mockup-screenshot.placeholder-visible .placeholder-fallback {
  display: flex;
}
.placeholder-tag {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--indigo-600);
  background: white;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--indigo-200);
}
.placeholder-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-900);
}
.placeholder-hint {
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 500;
  max-width: 400px;
}

/* Trust bar in hero */
.trust-bar {
  position: relative;
  z-index: 10;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.trust-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(199, 210, 254, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 24px;
}
.trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  opacity: 0.85;
}
.trust-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
  padding: 8px 4px;
}
.trust-logo:hover { opacity: 1; }
.brand-abc {
  background: #E30613;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 900;
  font-family: Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.brand-txt { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   COMMON SECTION SCAFFOLDING
   ═══════════════════════════════════════════════════════════ */

.section {
  padding: 100px 32px;
  position: relative;
}
.section-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section-head.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-title {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--slate-900);
}
.section-title.light { color: white; }
.section-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate-500);
  margin: 0;
  max-width: 620px;
}
.section-head.centered .section-sub { margin: 0 auto; }
.section-sub.light { color: rgba(226, 232, 240, 0.75); }

@media (max-width: 720px) {
  .section { padding: 70px 20px; }
  .section-head { margin-bottom: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   § 2 — OLD WAY VS NEW WAY (comparison) — DRAMATIC REDESIGN
   Old side: flat, weak, faded
   New side: dark indigo gradient with glow — the winner card
   ═══════════════════════════════════════════════════════════ */

.comparison {
  background: linear-gradient(120deg, var(--slate-50) 0%, var(--slate-50) 45%, #eef2ff 100%);
  position: relative;
  overflow: hidden;
}
/* Subtle indigo pull to the right side of the section */
.comparison::before {
  content: '';
  position: absolute;
  top: 20%;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 240, 0.12) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  align-items: stretch;
}

/* ─── LEFT COLUMN: THE OLD WAY (weak / faded / flat) ─── */
.compare-old {
  background: transparent;
  border: 1px dashed var(--slate-300);
  border-radius: 20px;
  padding: 32px 28px;
  position: relative;
  opacity: 0.85;
}
.compare-old .compare-header {
  color: var(--slate-400);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--slate-200);
  margin-bottom: 24px;
}
.compare-old .compare-icon-x {
  color: var(--slate-400);
  background: var(--slate-100);
  padding: 4px;
  border-radius: 6px;
  width: 24px;
  height: 24px;
}
.compare-old .compare-row {
  padding: 16px 0;
  border-bottom: 1px dashed var(--slate-200);
}
.compare-old .compare-row:last-child { border-bottom: none; padding-bottom: 0; }
.compare-old .compare-row h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-500);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  text-decoration: line-through;
  text-decoration-color: var(--slate-300);
  text-decoration-thickness: 1px;
}
.compare-old .compare-row p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-400);
  margin: 0;
}

/* ─── RIGHT COLUMN: THE SEDONAOS WAY (dark indigo winner card) ─── */
.compare-new {
  position: relative;
  background: linear-gradient(135deg, var(--slate-950) 0%, var(--slate-900) 50%, var(--indigo-950) 100%);
  border: 1px solid rgba(129, 140, 248, 0.25);
  border-radius: 20px;
  padding: 36px 32px;
  overflow: hidden;
  color: white;
  box-shadow:
    0 8px 24px -4px rgba(124, 108, 240, 0.25),
    0 30px 60px -20px rgba(30, 27, 75, 0.45);
}
/* Ambient glow orb inside the winner card */
.compare-new::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
/* Dot texture on the winner card (matches Portal/Demo treatment) */
.compare-new::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(199, 210, 254, 0.35) 1px, transparent 0);
  background-size: 20px 20px;
  opacity: 0.1;
  pointer-events: none;
}
.compare-new > * { position: relative; z-index: 2; }

.compare-new .compare-header {
  color: var(--indigo-200);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(129, 140, 248, 0.2);
  margin-bottom: 24px;
}
.compare-new .compare-brand-mark {
  width: 30px;
  height: 19px;
  filter: drop-shadow(0 2px 8px rgba(124, 108, 240, 0.5));
}
/* Add a small "winner" badge to the right of the header */
.compare-new .compare-header::after {
  content: 'The sedonaOS way';
  display: none;
}

.compare-new .compare-row {
  padding: 18px 0;
  border-bottom: 1px solid rgba(129, 140, 248, 0.12);
}
.compare-new .compare-row:last-child { border-bottom: none; padding-bottom: 0; }
.compare-new .compare-row h4 {
  font-size: 16px;
  font-weight: 800;
  color: white;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
/* Replace the "→" text prefix with a proper glowing dot */
.compare-new .compare-row h4::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-b), var(--brand-b-deep));
  box-shadow: 0 0 12px 2px rgba(124, 108, 240, 0.6);
  flex-shrink: 0;
  transform: translateY(-2px);
}
.compare-new .compare-row p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.8);
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 800px) {
  .compare-grid { grid-template-columns: 1fr; gap: 20px; }
  .compare-new { padding: 28px 24px; }
}

/* ═══════════════════════════════════════════════════════════
   § 3, 5, 6 — LIGHT FEATURE SECTIONS
   § 4 — DARK FEATURE (AI Assessor)
   ═══════════════════════════════════════════════════════════ */

.feature-alt { background: white; }
.feature { background: var(--slate-50); }
.feature-dark {
  background: linear-gradient(135deg, var(--slate-950) 0%, var(--slate-900) 50%, var(--indigo-950) 100%);
  color: white;
  overflow: hidden;
}
.assessor-glow {
  position: absolute;
  top: 20%; right: 20%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.3);
  filter: blur(120px);
  pointer-events: none;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.feature-text {
  position: relative;
  z-index: 2;
}
.feature-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid var(--indigo-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 8px 20px -6px rgba(124, 108, 240, 0.2);
}
.feature-icon-wrap.dark {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(129, 140, 248, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.4);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-list li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-600);
}
.feature-list li strong {
  color: var(--slate-900);
  font-weight: 700;
}
.feature-list.dark li { color: rgba(226, 232, 240, 0.85); }
.feature-list.dark li strong { color: white; }

/* Alternating row direction */
.feature .feature-grid,
.feature-alt .feature-grid { direction: ltr; }
.feature-alt:nth-of-type(2n) .feature-grid > .feature-image { order: -1; }

/* Simpler approach — first (§3 Communications) has image on left */
#communications .feature-image { order: -1; }
#assessor .feature-image { order: 2; }
#integrations .feature-image { order: -1; }
#marketing .feature-image { order: 2; }

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  #communications .feature-image,
  #assessor .feature-image,
  #integrations .feature-image,
  #marketing .feature-image { order: 2; }
}

/* Feature image mockup smaller than hero */
.feature-image .mockup-screenshot { min-height: 280px; }

/* ═══════════════════════════════════════════════════════════
   § 3 — TABBED FEATURE SWITCHER (Roofr-inspired)
   Light section. Pill row on top. Content swaps below.
   ═══════════════════════════════════════════════════════════ */

.switcher {
  background: linear-gradient(180deg, #f8fafc 0%, white 100%);
}

.switcher-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 56px;
  max-width: 1000px;
}

.switcher-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  background: white;
  color: var(--slate-600);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: -0.01em;
}
.switcher-tab svg { opacity: 0.7; transition: opacity 0.2s; }
.switcher-tab:hover {
  border-color: var(--indigo-300);
  color: var(--slate-900);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(30, 27, 75, 0.12);
}
.switcher-tab:hover svg { opacity: 1; }

.switcher-tab.active {
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--indigo-950) 100%);
  border-color: rgba(30, 27, 75, 0.6);
  color: white;
  box-shadow: 0 8px 20px -4px rgba(30, 27, 75, 0.4),
              0 2px 4px -1px rgba(124, 108, 240, 0.3);
}
.switcher-tab.active svg { opacity: 1; }

/* Panels stack — only .active is visible */
.switcher-panels {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.switcher-panel {
  display: none;
  animation: switcher-fade 0.4s ease-out;
}
.switcher-panel.active {
  display: block;
}
@keyframes switcher-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.switcher-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.switcher-text h3 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--slate-900);
  margin: 0 0 20px;
}
.switcher-text p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate-500);
  margin: 0 0 24px;
}
.switcher-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.switcher-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--slate-700);
  font-weight: 500;
}

@media (max-width: 900px) {
  .switcher-grid { grid-template-columns: 1fr; gap: 40px; }
  .switcher-image { order: -1; }
  .switcher-tabs { gap: 6px; }
  .switcher-tab { padding: 8px 14px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   § 4 — CLICK TO CREW JOURNEY (5-step horizontal timeline)
   Dark indigo section with connected step cards.
   ═══════════════════════════════════════════════════════════ */

.journey {
  background: linear-gradient(135deg, var(--slate-950) 0%, var(--slate-900) 50%, var(--indigo-950) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.journey::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(124, 108, 240, 0.25);
  filter: blur(120px);
  pointer-events: none;
}
.journey::after {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 15%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.2);
  filter: blur(100px);
  pointer-events: none;
}

.journey-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto auto auto auto;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
  z-index: 2;
  margin: 0 auto 56px;
  max-width: 1200px;
}

.journey-step {
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
  border: 1px solid rgba(129, 140, 248, 0.15);
  border-radius: 20px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.journey-step:hover {
  transform: translateY(-6px);
  border-color: rgba(129, 140, 248, 0.4);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4),
              0 8px 20px -4px rgba(124, 108, 240, 0.3);
}

.journey-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(129, 140, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.4);
}
.journey-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--indigo-300);
  letter-spacing: 0.15em;
}
.journey-step h4 {
  font-size: 17px;
  font-weight: 800;
  color: white;
  margin: 0;
  letter-spacing: -0.015em;
}
.journey-step p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(199, 210, 254, 0.7);
  margin: 0;
  flex: 1;
}

.journey-arrow {
  color: rgba(129, 140, 248, 0.5);
  align-self: center;
  margin: 0 4px;
  flex-shrink: 0;
}

.journey-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.journey-footer .btn-primary {
  background: linear-gradient(135deg, var(--brand-b) 0%, var(--brand-b-deep) 100%);
  border-color: rgba(124, 108, 240, 0.5);
  box-shadow: 0 8px 24px -4px rgba(124, 108, 240, 0.5);
}
.journey-footer .btn-primary:hover {
  background: linear-gradient(135deg, #8A7BF3 0%, #5A48D3 100%);
  box-shadow: 0 12px 32px -4px rgba(124, 108, 240, 0.65);
}
.journey-secondary-link {
  color: rgba(199, 210, 254, 0.85);
  font-size: 13px;
  font-weight: 600;
  transition: color 0.15s;
}
.journey-secondary-link:hover { color: white; }

@media (max-width: 1100px) {
  .journey-flow {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }
  .journey-arrow { display: none; }
}
@media (max-width: 700px) {
  .journey-flow {
    grid-template-columns: 1fr;
  }
  .journey-footer { flex-direction: column; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   § 5 — GROWTH ENGINE (Google Ads differentiator)
   Dark indigo section with pitch left, live-looking ad card right.
   ═══════════════════════════════════════════════════════════ */

.growth {
  background: linear-gradient(135deg, var(--slate-950) 0%, #1a1a3a 40%, var(--indigo-950) 100%);
  color: white;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(129, 140, 248, 0.1);
}
.growth-glow-1 {
  position: absolute;
  top: 10%;
  left: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(124, 108, 240, 0.3);
  filter: blur(120px);
  pointer-events: none;
}
.growth-glow-2 {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.22);
  filter: blur(100px);
  pointer-events: none;
}

.growth-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.growth-badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo-300);
  box-shadow: 0 0 8px 2px var(--indigo-400);
  margin-right: 6px;
  animation: pulse-dot 2s ease-in-out infinite;
}

.growth-title-accent {
  background: linear-gradient(135deg, var(--indigo-300) 0%, var(--violet-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Compare strip: agency vs sedonaOS */
.growth-compare {
  margin: 32px 0;
  padding: 20px;
  background: rgba(30, 27, 75, 0.35);
  border: 1px solid rgba(129, 140, 248, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.growth-compare-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
.growth-compare-old p,
.growth-compare-new p {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.growth-compare-old p { color: rgba(199, 210, 254, 0.55); }
.growth-compare-new p { color: rgba(255, 255, 255, 0.92); font-weight: 500; }

.growth-compare-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.growth-compare-tag.old {
  color: rgba(199, 210, 254, 0.55);
  background: rgba(199, 210, 254, 0.08);
  border: 1px solid rgba(199, 210, 254, 0.12);
  text-decoration: line-through;
  text-decoration-color: rgba(199, 210, 254, 0.4);
}
.growth-compare-tag.new {
  color: white;
  background: linear-gradient(135deg, var(--brand-b) 0%, var(--brand-b-deep) 100%);
  border: 1px solid rgba(124, 108, 240, 0.4);
  box-shadow: 0 4px 12px -2px rgba(124, 108, 240, 0.5);
}
.growth-compare-arrow {
  color: var(--indigo-400);
  opacity: 0.6;
}

/* Stats block */
.growth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 32px;
  padding: 24px 20px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.5) 0%, rgba(15, 23, 42, 0.5) 100%);
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 16px;
}
.growth-stat {
  text-align: center;
}
.growth-stat-num {
  font-family: var(--font-mono);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(135deg, white 0%, var(--indigo-200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.growth-stat-label {
  font-size: 11px;
  color: rgba(199, 210, 254, 0.7);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.growth-cta-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.growth-cta-row .btn-primary {
  background: linear-gradient(135deg, var(--brand-b) 0%, var(--brand-b-deep) 100%);
  border-color: rgba(124, 108, 240, 0.5);
  box-shadow: 0 8px 24px -4px rgba(124, 108, 240, 0.5);
}
.growth-cta-row .btn-primary:hover {
  background: linear-gradient(135deg, #8A7BF3 0%, #5A48D3 100%);
  box-shadow: 0 12px 32px -4px rgba(124, 108, 240, 0.65);
}
.growth-secondary-link {
  color: rgba(199, 210, 254, 0.75);
  font-size: 13px;
  font-weight: 600;
  transition: color 0.15s;
}
.growth-secondary-link:hover { color: white; }

/* ─── Ad management dashboard mock card ─── */
.ads-card {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(2, 6, 23, 0.9) 100%);
  border: 1px solid rgba(129, 140, 248, 0.25);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 20px 60px -20px rgba(0, 0, 0, 0.6),
    0 8px 24px -4px rgba(124, 108, 240, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transform: perspective(1800px) rotateY(-3deg) rotateX(2deg);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}
.ads-card:hover {
  transform: perspective(1800px) rotateY(-1deg) rotateX(1deg) translateY(-4px);
}
.ads-card-glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 240, 0.4) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.ads-card > * { position: relative; z-index: 1; }

/* Card header */
.ads-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(129, 140, 248, 0.15);
}
.ads-card-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ads-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-b) 0%, var(--brand-b-deep) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px -2px rgba(124, 108, 240, 0.5);
}
.ads-card-title {
  font-size: 14px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.01em;
}
.ads-card-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(199, 210, 254, 0.6);
  font-weight: 500;
  margin-top: 2px;
}
.ads-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px 2px rgba(52, 211, 153, 0.6);
  animation: pulse-dot 2s ease-in-out infinite;
}
.ads-card-status {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Metric tiles */
.ads-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.ads-metric {
  padding: 12px 14px;
  background: rgba(30, 27, 75, 0.4);
  border: 1px solid rgba(129, 140, 248, 0.12);
  border-radius: 10px;
}
.ads-metric-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(199, 210, 254, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.ads-metric-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ads-metric-delta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px;
}
.ads-metric-delta.up { color: #34d399; }
.ads-metric-delta.down { color: #f87171; }

/* Keywords list */
.ads-keywords {
  padding: 14px;
  background: rgba(30, 27, 75, 0.35);
  border: 1px solid rgba(129, 140, 248, 0.1);
  border-radius: 10px;
  margin-bottom: 14px;
}
.ads-keywords-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: rgba(199, 210, 254, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(129, 140, 248, 0.1);
}
.ads-keywords-total {
  color: var(--indigo-300);
}
.ads-keyword-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(129, 140, 248, 0.06);
}
.ads-keyword-row:last-child { border-bottom: none; padding-bottom: 0; }
.ads-kw {
  color: white;
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 11px;
}
.ads-kw-metric {
  color: rgba(199, 210, 254, 0.7);
  font-size: 11px;
  font-weight: 600;
}
.ads-kw-jobs {
  color: #34d399;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Footer bar */
.ads-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 210, 254, 0.85);
}
.ads-footer svg { color: #34d399; flex-shrink: 0; }

/* Responsive breakpoints */
@media (max-width: 1000px) {
  .growth-grid { grid-template-columns: 1fr; gap: 48px; }
  .ads-card { transform: none !important; }
}
@media (max-width: 640px) {
  .growth-compare-row { grid-template-columns: 1fr; }
  .growth-compare-arrow { transform: rotate(90deg); justify-self: center; }
  .growth-stats { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .ads-metrics { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   § 7 — DISPATCH (full-width mockup)
   ═══════════════════════════════════════════════════════════ */

.dispatch {
  background: white;
  border-top: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
}
.stage-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 48px;
  flex-wrap: wrap;
}
.stage-flow svg { color: var(--slate-300); }
.stage-pill {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid;
}
.stage-pill.amber { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.stage-pill.blue { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.stage-pill.indigo { background: var(--indigo-100); color: var(--indigo-800); border-color: var(--indigo-200); }
.stage-pill.emerald { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }

.dispatch-mockup {
  max-width: 1200px;
  margin: 0 auto;
}
.dispatch-mockup .mockup-screenshot { min-height: 460px; }

/* ═══════════════════════════════════════════════════════════
   § 8 — SETUP (3 steps)
   ═══════════════════════════════════════════════════════════ */

.setup { background: var(--slate-50); }
.steps-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
.step-card {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 20px;
  padding: 32px 28px;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--indigo-200);
  box-shadow: 0 20px 40px -12px rgba(30, 27, 75, 0.12);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--brand-b) 0%, var(--brand-b-deep) 100%);
  border-radius: 8px;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
}
.step-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--slate-900);
  letter-spacing: -0.015em;
  margin: 0;
}
.step-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-500);
  margin: 0;
  flex: 1;
}
.step-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--indigo-600);
  background: var(--indigo-50);
  padding: 6px 10px;
  border-radius: 6px;
  align-self: flex-start;
  border: 1px solid var(--indigo-100);
  margin-top: 4px;
}
.step-connector {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--indigo-200) 0%, var(--indigo-300) 100%);
  align-self: center;
}

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step-connector { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   § 9 — DEMO CTA
   ═══════════════════════════════════════════════════════════ */

.demo-section {
  padding: 100px 32px;
  background: white;
}
.demo-card {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 60px;
  background: linear-gradient(135deg, var(--slate-950) 0%, var(--slate-900) 50%, var(--indigo-950) 100%);
  border: 1px solid rgba(129, 140, 248, 0.25);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(30, 27, 75, 0.4);
}
.demo-glow {
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.3);
  filter: blur(100px);
  pointer-events: none;
}
.demo-texture {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(199, 210, 254, 0.4) 1px, transparent 0);
  background-size: 20px 20px;
  opacity: 0.08;
  pointer-events: none;
}
/* Big faded logo mark — brand signature in the corner */
.demo-watermark {
  position: absolute;
  bottom: -60px;
  right: -50px;
  width: 340px;
  height: 215px;
  opacity: 0.08;
  pointer-events: none;
  transform: rotate(-12deg);
  z-index: 1;
}
@media (max-width: 900px) {
  .demo-watermark { width: 220px; height: 140px; bottom: -40px; right: -30px; }
}
.demo-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.demo-title {
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 900;
  color: white;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 16px 0 20px;
}
.demo-title-accent {
  background: linear-gradient(135deg, var(--indigo-300) 0%, var(--violet-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.demo-sub {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(226, 232, 240, 0.8);
  margin: 0 0 28px;
}
.demo-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(226, 232, 240, 0.9);
  font-weight: 500;
}

.demo-form {
  background: white;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-size: 11px;
  font-weight: 800;
  color: var(--slate-600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.form-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--slate-900);
  background: var(--slate-50);
  transition: all 0.15s;
}
.form-field input::placeholder { color: var(--slate-400); }
.form-field input:focus {
  outline: none;
  border-color: var(--indigo-400);
  background: white;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15);
}
.crew-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.crew-option {
  position: relative;
  cursor: pointer;
}
.crew-option input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}
.crew-option span {
  display: block;
  padding: 12px 8px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-600);
  background: var(--slate-50);
  transition: all 0.15s;
}
.crew-option input:checked + span {
  border-color: var(--indigo-500);
  background: var(--indigo-50);
  color: var(--indigo-700);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}
.demo-form .btn-primary { margin-top: 8px; }
.demo-microcopy {
  font-size: 11px;
  color: var(--slate-500);
  text-align: center;
  margin: 8px 0 0;
  font-weight: 500;
}

@media (max-width: 900px) {
  .demo-card { padding: 40px 28px; }
  .demo-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 500px) {
  .form-field-row { grid-template-columns: 1fr; }
  .crew-selector { grid-template-columns: 1fr; }
  .demo-form { padding: 24px; }
  .hero-pill {font-size:11px;}
}

/* ═══════════════════════════════════════════════════════════
   § FOOTER
   ═══════════════════════════════════════════════════════════ */

.site-footer {
  background: linear-gradient(180deg, var(--slate-950) 0%, #000 100%);
  color: rgba(226, 232, 240, 0.7);
  padding: 60px 32px 24px;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(129, 140, 248, 0.1);
}
.footer-brand .brand { color: white; }
.footer-tag {
  font-size: 13px;
  color: rgba(199, 210, 254, 0.55);
  margin: 16px 0 0;
  max-width: 320px;
  line-height: 1.55;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col h4 {
  font-size: 11px;
  font-weight: 900;
  color: rgba(199, 210, 254, 0.55);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.7);
  font-weight: 500;
  margin-bottom: 10px;
  transition: color 0.15s;
}
.footer-col a:hover { color: white; }

.footer-bottom {
  max-width: 1180px;
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(199, 210, 254, 0.4);
  font-weight: 500;
}
.footer-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(199, 210, 254, 0.55);
  font-weight: 600;
}

@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(200%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--slate-900), var(--indigo-950));
  color: white;
  border: 1px solid rgba(129, 140, 248, 0.4);
  border-radius: 14px;
  box-shadow: 0 20px 40px -8px rgba(30, 27, 75, 0.5);
  font-size: 13.5px;
  font-weight: 600;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast svg { color: #34d399; flex-shrink: 0; }





/* gemini */

.ad-matrix-section {
    position: relative;
    padding: 100px 24px;
    background-color: #0c0f1d;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
  }

  /* AMBIENT BACKGROUND GLOW SPOTLIGHTS */
  .matrix-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
  }

  .matrix-glow-purple {
    top: -100px;
    left: -100px;
    background: #5d50e6;
  }

  .matrix-glow-green {
    bottom: -100px;
    right: -100px;
    background: #00b88a;
  }

  .ad-matrix-container {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    z-index: 1;
  }

  /* SECTION HEADER & PILL */
  .ad-matrix-head {
    text-align: center;
    margin-bottom: 56px;
  }

  .ad-matrix-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(93, 80, 230, 0.12);
    border: 1px solid rgba(93, 80, 230, 0.35);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #a5b4fc;
    margin-bottom: 20px;
  }

  .pill-dot {
    width: 6px;
    height: 6px;
    background-color: #00b88a;
    border-radius: 50%;
    box-shadow: 0 0 8px #00b88a;
  }

  .ad-matrix-head h2 {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
  }

  .ad-matrix-head p {
    color: #94a3b8;
    font-size: 1.125rem;
    max-width: 620px;
    margin: 0 auto;
  }

  /* GLASS CARD CONTAINER WITH BACKDROP BLUR */
  .ad-matrix-glass-card {
    background: rgba(22, 26, 46, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .matrix-table {
    display: flex;
    flex-direction: column;
  }

  /* HEADER ROW */
  .matrix-header-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.1fr;
    background: rgba(12, 15, 29, 0.7);
    padding: 22px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    align-items: center;
  }

  .col-feature {
    color: #64748b;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 1px;
  }

  /* BADGES */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
  }

  .badge-agency {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.25);
  }

  .badge-sedona {
    background: linear-gradient(135deg, rgba(93, 80, 230, 0.35) 0%, rgba(0, 184, 138, 0.35) 100%);
    color: #ffffff;
    border: 1px solid rgba(93, 80, 230, 0.6);
    box-shadow: 0 0 20px rgba(93, 80, 230, 0.35);
  }

  /* BODY ROWS */
  .matrix-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.1fr;
    padding: 26px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    align-items: start;
    transition: background 0.25 ease;
  }

  .matrix-row:last-child {
    border-bottom: none;
  }

  .matrix-row:hover {
    background: rgba(255, 255, 255, 0.02);
  }

  .col-feature strong {
    display: block;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .col-feature span {
    color: #64748b;
    font-size: 0.85rem;
  }

  /* SEDONA COLUMN HIGHLIGHT ACCENT */
  .col-sedona.highlight-col {
    background: rgba(93, 80, 230, 0.04);
    border-radius: 12px;
    padding: 12px;
    margin: -12px;
    border: 1px solid rgba(93, 80, 230, 0.15);
  }

  /* STATUS TAGS (BAD vs GOOD) */
  .status-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .tag-bad {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }

  .tag-good {
    background: rgba(0, 184, 138, 0.12);
    color: #00b88a;
    border: 1px solid rgba(0, 184, 138, 0.25);
  }

  .col-agency p {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
  }

  .col-sedona p {
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
  }

  /* MOBILE RESPONSIVE LAYOUT */
  @media (max-width: 850px) {
    .ad-matrix-head h2 { font-size: 2.1rem; }
    .matrix-header-row { display: none; }
    
    .matrix-row {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 24px 20px;
    }

    .col-sedona.highlight-col {
      margin: 0;
    }
  }


.hero-split{
  --hs-brand:        #7C6CF0;
  --hs-brand-deep:   #4433C8;
  --hs-brand-soft:   #C4B8FE;
  --hs-amber:        #FF9F45;
  --hs-emerald:      #34D399;
  --hs-ink:          #0B0820;
  --hs-text:         #F1EEFF;
  --hs-text-2:       #A9A0D0;
  --hs-text-3:       #6F669A;
  --hs-line:         rgba(255,255,255,.10);
}
 
/* ── 1. the section itself ────────────────────────────────────────────── */
.hero.hero-split{
  display:block;
  text-align:left;
  overflow:hidden;
  isolation:isolate;
}
 
.hero-split .hero-inner{
  max-width:1360px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
 
/* ── 2. two-column grid ───────────────────────────────────────────────── */
.hs-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);
  align-items:center;
  gap:clamp(28px,3.4vw,56px);
}
 
.hs-copy{max-width:640px}
 
/* left-align the existing hero children (they were centred before) */
.hero-split .hero-brand-mark,
.hero-split .hero-pill,
.hero-split .hero-headline,
.hero-split .hero-sub,
.hero-split .hero-cta-row,
.hero-split .hero-microcopy{
  margin-left:0;
  margin-right:0;
  text-align:left;
  justify-content:flex-start;
}
.hero-split .hero-brand-mark{display:flex;width:max-content;align-items:center}
.hero-split .hero-pill{display:inline-flex;align-items:center;text-align:left}
.hero-split .hero-sub{max-width:56ch}
.hero-split .hero-cta-row{display:flex;flex-wrap:wrap;gap:12px}
 
/* trust bar sits under the whole split, unchanged otherwise */
.hero-split .trust-bar{margin-top:clamp(24px,3vw,48px);text-align:center}
 
/* ═══════════════════════════════════════════════════════════════════════
   3. THE VISUAL — isometric scene + floating job cards
   `container-type` makes every card size itself against the scene, so the
   whole thing scales as one unit with no extra breakpoints.
   ═══════════════════════════════════════════════════════════════════════ */
.hs-visual{
  position:relative;
  width:100%;
  aspect-ratio:1.24;            /* ⚠ locked to the scene's pin coordinates */
  container-type:inline-size;
  z-index:2;
  margin-left:100px;
  margin-top: 50px;
}
 
.hs-halo{
  position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);
  width:96%;height:68%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(124,108,240,.34),rgba(124,108,240,.07) 62%,transparent);
  filter:blur(34px);pointer-events:none;
}
 
.hs-scene{
  position:absolute;left:0;bottom:0;width:100%;height:auto;
  filter:drop-shadow(0 40px 60px rgba(6,4,24,.78));
  opacity:0.6;
}
 
/* animated satellite-measurement outline on the amber roof */
.hs-measure{animation:hsDash 14s linear infinite}
 
/* ── leader lines ────────────────────────────────────────────────────────
   The box is stretched (preserveAspectRatio="none") so coordinates can be
   plain percentages, but non-scaling-stroke keeps the dashes even.        */
.hs-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hs-links line{
  stroke:rgba(178,166,255,.55);
  stroke-width:1.25;
  stroke-dasharray:3 4;
  vector-effect:non-scaling-stroke;
}
.hs-link-back-m,.hs-link-ribbon-m{display:none}   /* phone-only variants */
 
/* ── pins ─────────────────────────────────────────────────────────────── */
.hs-pin{
  position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px rgba(124,108,240,.34),0 2px 8px rgba(6,4,24,.7);
}
.hs-pin::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(178,166,255,.65);
  animation:hsPinPulse 3.2s ease-out infinite;
}
.hs-pin.is-amber{box-shadow:0 0 0 3px rgba(255,159,69,.34),0 2px 8px rgba(6,4,24,.7)}
.hs-pin.is-amber::after{border-color:rgba(255,181,110,.7)}
 
/* ── job cards ────────────────────────────────────────────────────────── */
.hs-card{
  position:absolute;
  border-radius:1.35cqw;
  padding:1.5cqw 1.7cqw;
  background:linear-gradient(168deg,rgba(32,26,74,.94),rgba(15,11,40,.94));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 44px -18px rgba(4,2,18,.88),0 2px 8px rgba(4,2,18,.5);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  animation:hsFloat 7s ease-in-out infinite;
  will-change:transform;
  text-align:left;
}
.hs-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.10),transparent 42%);
  mix-blend-mode:overlay;
}
 
.hs-card-head{display:flex;align-items:center;gap:.9cqw;margin-bottom:1.05cqw}
.hs-mark{
  flex:none;width:2.3cqw;height:2.3cqw;border-radius:.58cqw;
  display:grid;place-items:center;
  background:rgba(124,108,240,.20);
  border:1px solid rgba(196,184,254,.28);
}
.hs-mark svg{width:66%;height:auto;display:block}
 
.hs-addr{min-width:0;flex:1}
.hs-addr b{
  display:block;font-size:1.72cqw;font-weight:650;letter-spacing:-.012em;
  color:var(--hs-text);line-height:1.22;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hs-addr span{
  display:block;margin-top:.18cqw;font-size:1.5cqw;color:var(--hs-text-3);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hs-value{flex:none;font-size:1.7cqw;font-weight:700;color:#fff;letter-spacing:-.015em;white-space:nowrap}
 
.hs-meta{
  display:flex;align-items:center;gap:.85cqw;
  font-size:1.5cqw;color:var(--hs-text-2);margin-bottom:1.05cqw;white-space:nowrap;
}
.hs-meta svg{flex:none;width:1.7cqw;height:1.7cqw;fill:none;stroke:currentColor;stroke-width:1.8;opacity:.75}
 
.hs-bar{height:.48cqw;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;margin-bottom:1.05cqw}
.hs-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--hs-brand-deep),var(--hs-brand))}
.hs-card.is-amber .hs-bar i{background:linear-gradient(90deg,#FF9F45,#FFC98A)}
.hs-card.is-emerald .hs-bar i{background:linear-gradient(90deg,#34D399,#6EE7C0)}
.hs-card.is-amber .hs-mark{background:rgba(255,159,69,.18);border-color:rgba(255,159,69,.32)}
.hs-card.is-emerald .hs-mark{background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.32)}
 
.hs-chips{display:flex;flex-wrap:wrap;gap:.6cqw}
.hs-chip{
  display:inline-flex;align-items:center;gap:.7cqw;
  padding:.5cqw .95cqw;border-radius:999px;
  font-size:1.4cqw;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
}
.hs-chip i{width:.92cqw;height:.92cqw;border-radius:50%;background:currentColor;flex:none}
.hs-chip--brand  {background:rgba(124,108,240,.18);color:#C4B8FE;border:1px solid rgba(124,108,240,.34)}
.hs-chip--emerald{background:rgba(52,211,153,.15);color:#6EE7C0;border:1px solid rgba(52,211,153,.30)}
.hs-chip--amber  {background:rgba(255,159,69,.15);color:#FFC28A;border:1px solid rgba(255,159,69,.30)}
.hs-chip--slate  {background:rgba(255,255,255,.06);color:#A79DD0;border:1px solid rgba(255,255,255,.10)}
 
/* ── "job won" ribbon ─────────────────────────────────────────────────── */
.hs-ribbon{
  position:absolute;display:inline-flex;align-items:center;gap:1cqw;
  padding:1cqw 1.6cqw;border-radius:999px;
  background:linear-gradient(150deg,rgba(18,64,50,.96),rgba(7,30,24,.96));
  border:1px solid rgba(52,211,153,.42);
  box-shadow:0 14px 34px -14px rgba(4,32,24,.95),0 0 0 6px rgba(52,211,153,.06);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:hsFloat 8.5s ease-in-out infinite .9s;
  text-align:left;
}
.hs-ribbon svg{flex:none;width:2.1cqw;height:2.1cqw;color:#34D399}
.hs-ribbon-label{display:block;font-size:1.28cqw;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#6EE7C0;line-height:1.2}
.hs-ribbon-value{display:block;font-size:2.35cqw;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.1;margin-top:.2cqw}
 
/* ── placements ───────────────────────────────────────────────────────────
   These percentages are the projected roof apexes from the scene generator.
   If you change .hs-visual's aspect-ratio, they drift off the roofs.       */
.hs-card--lead     {left:-4%;   top:17%;  width:32%;  animation-delay:-.4s}
.hs-card--measure  {left:32.5%; top:-2%;  width:35%;  animation-delay:-2.3s}
.hs-card--dispatch {left:69%;   top:14%;  width:32%;  animation-delay:-4.1s}
.hs-ribbon         {left:1%;    top:66%}
 
.hs-pin--left  {left:24.73%; top:41.78%}
.hs-pin--back  {left:50.00%; top:30.43%}
.hs-pin--right {left:79.62%; top:45.23%}
 
/* ── motion ───────────────────────────────────────────────────────────── */
@keyframes hsFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-7px,0)}
}
@keyframes hsPinPulse{
  0%  {transform:scale(.7);opacity:.9}
  70% {transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
@keyframes hsDash{to{stroke-dashoffset:-150}}
 
@media (prefers-reduced-motion:reduce){
  /* kill the movement — cards drifting, pins expanding */
  .hs-card,.hs-ribbon,.hs-pin::after{animation:none!important}
  .hs-pin::after{opacity:.5;transform:none}
  /* keep the measurement dashes: no travel, no vestibular risk */
  .hs-measure{animation-duration:22s}
}
 
/* ═══════════════════════════════════════════════════════════════════════
   4. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .hs-grid{grid-template-columns:minmax(0,1fr) minmax(0,.98fr);gap:32px}
}
 
@media (max-width:960px){
  .hs-grid{grid-template-columns:1fr;gap:44px}
  .hs-copy{max-width:none}
  .hs-visual{max-width:660px;margin:0 auto}
  .hero-split .hero-inner{margin-top:-100px;}
  .hero-sub {font-size: 14px;}
  .hero-headline-accent {font-size:0.6em;margin-top:13px;line-height:1.2em;}
  .hero-split .hero-blueprint-desktop{display:none}
  .hero-split .hero-blueprint-mobile{display:block;opacity:.16}
  .hs-scene{opacity:.5;}
}
 
@media (max-width:560px){
  .hs-visual{aspect-ratio:1.12}
 
  /* three miniature cards are unreadable on a phone — lead with one */
  .hs-card--lead,.hs-card--dispatch,
  .hs-link-lead,.hs-link-dispatch,
  .hs-pin--left,.hs-pin--right,
  .hs-link-back,.hs-link-ribbon{display:none}
  .hs-link-back-m,.hs-link-ribbon-m{display:block}
 
  .hs-card--measure{left:0;top:-3%;width:68%}
  .hs-card--measure .hs-chip:last-child{display:none}   /* keep chips on one row */
  .hs-ribbon{left:0;top:72%}
  .hs-pin--back{top:37.16%}
 
  .hs-card{padding:3cqw 3.4cqw;border-radius:2.6cqw}
  .hs-card-head{gap:2cqw;margin-bottom:2cqw}
  .hs-mark{width:5cqw;height:5cqw;border-radius:1.2cqw}
  .hs-addr b{font-size:3.5cqw}
  .hs-addr span{font-size:2.9cqw}
  .hs-value{font-size:3.5cqw}
  .hs-meta{font-size:2.9cqw;gap:1.6cqw;margin-bottom:2cqw;white-space:normal}
  .hs-meta svg{width:3.2cqw;height:3.2cqw}
  .hs-bar{height:.9cqw;margin-bottom:2cqw}
  .hs-chips{gap:1.2cqw}
  .hs-chip{font-size:2.7cqw;padding:1cqw 1.8cqw}
  .hs-chip i{width:1.7cqw;height:1.7cqw}
  .hs-ribbon{padding:2cqw 3cqw;gap:2cqw}
  .hs-ribbon svg{width:4cqw;height:4cqw}
  .hs-ribbon-label{font-size:2.4cqw}
  .hs-ribbon-value{font-size:4.5cqw}
}


/* gemini */
/* =========================================================
   BULLETPROOF SOFT-FADE ROOF CORNER (NO SHARP EDGES)
   ========================================================= */
#features {
  position: relative !important;
  overflow: hidden !important;
}

#features::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  
  /* Sizing the container specifically to the corner */
  width: 900px !important;
  height: 650px !important;
  max-width: 65% !important;
  max-height: 80% !important;

  /* Cover fills the corner box so the image never has internal cutoffs */
  background-image: url('/screenshots/roof-1.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  /* 
     RADIAL ELLIPSE ALPHA MASK:
     Anchors 100% opacity to bottom-right (100% 100%),
     and smoothly dissolves to 0% opacity (transparent) toward top and left.
  */
  -webkit-mask-image: radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 65%) !important;
  mask-image: radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 65%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

/* Keeps all text, tabs, and content floating above the background */
#features .section-inner {
  position: relative !important;
  z-index: 1 !important;
}
/* gemini */