:root {
  /* ---- Color: surfaces ---- */
  --bg: #080a16;
  --bg-elevated: #0d1128;
  --bg-elevated-2: #141a38;
  --bg-elevated-3: #1a2148;

  /* ---- Color: brand ---- */
  /* Accent = logo blue. Used for links, icon strokes, focus rings, glows —
     never as a solid fill behind small white text (fails contrast, see below). */
  --accent: #5b6ef5;
  --accent-light: #93a2ff;
  --accent-soft: #1c2452;

  /* Solid-fill button backgrounds need to be darker than --accent: white text
     on #5b6ef5 measures 4.21:1 and fails WCAG AA (4.5:1) for normal-size text. */
  --btn-primary-bg: #4c5ce6;
  --btn-primary-bg-hover: #3d4dd1;
  --btn-primary-text: #ffffff;

  /* Gold is not in the logo — use sparingly (eyebrow labels, step numbers only). */
  --gold: #e7b84e;
  --gold-soft: #3a2e14;

  /* ---- Color: text ---- */
  --text-primary: #f6f7fc;
  --text-secondary: #aeb4ce;
  --text-muted: #8890ac;

  /* ---- Color: borders / glass ---- */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-bg: rgba(20, 26, 56, 0.55);

  /* ---- Type ---- */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --text-display: clamp(2.25rem, 1.05rem + 4.2vw, 3.75rem);
  --text-h2: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem);
  --text-h3: clamp(1.15rem, 1.02rem + 0.5vw, 1.35rem);
  --text-lg: clamp(1.05rem, 1rem + 0.3vw, 1.15rem);

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Shadows (layered, not flat) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-glow-accent: 0 0 0 1px rgba(91, 110, 245, 0.22), 0 8px 24px rgba(91, 110, 245, 0.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 520ms;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

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

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

::selection {
  background: var(--accent);
  color: #ffffff;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.12;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  background: var(--btn-primary-bg);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: 4px;
}

body.nav-locked {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- NAV / HEADER ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 10, 22, 0.4);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-slow) var(--ease),
    backdrop-filter var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease);
}

header.is-scrolled {
  background: rgba(8, 10, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  max-width: 1200px;
  margin: 0 auto;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 36px;
  font-size: 15px;
  color: var(--text-secondary);
}

.nav-links a {
  position: relative;
  padding: 4px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--accent-light);
  border-radius: var(--radius-full);
  transition: right var(--dur-base) var(--ease);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  color: var(--text-primary);
}

.nav-links a.is-active::after {
  right: 0;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-cta {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--btn-primary-bg-hover);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

#mobile-nav {
  display: none;
}

@media (max-width: 820px) {
  .nav-links {
    display: none;
  }
  .nav-cta {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  #mobile-nav {
    display: block;
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    height: calc(100vh - 65px);
    height: calc(100dvh - 65px);
    background: rgba(8, 10, 22, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
      visibility 0s linear var(--dur-base);
    overflow-y: auto;
  }
  #mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
      visibility 0s linear 0s;
  }
  #mobile-nav ul {
    list-style: none;
    padding: 24px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #mobile-nav a {
    display: block;
    padding: 14px 0;
    font-size: 17px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
  }
  #mobile-nav a:hover,
  #mobile-nav a:focus-visible {
    color: var(--text-primary);
  }
  .mobile-nav-cta {
    display: inline-block;
    margin-top: 14px;
    background: var(--btn-primary-bg);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    border-bottom: none !important;
  }
  .mobile-nav-cta:hover,
  .mobile-nav-cta:focus-visible {
    background: var(--btn-primary-bg-hover);
    color: #fff;
  }
}

/* ---------- BUTTONS ---------- */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 45%,
    transparent 70%
  );
  transform: translateX(-120%);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-accent);
}

.btn-primary:hover::before,
.btn-primary:focus-visible::before {
  transform: translateX(120%);
  transition: transform 0.7s var(--ease);
}

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

.btn-secondary {
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  display: inline-block;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--accent-light);
  background: var(--bg-elevated);
  transform: translateY(-1px);
}

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

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary {
    transition: background var(--dur-fast) linear;
  }
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .btn-secondary:hover,
  .btn-secondary:focus-visible {
    transform: none;
  }
  .btn-primary::before {
    display: none;
  }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 120px 32px 96px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 900px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  will-change: transform;
}

.orb-1 {
  width: 420px;
  height: 420px;
  top: 10%;
  left: 6%;
  background: var(--accent);
  animation: driftA 26s ease-in-out infinite;
}

.orb-2 {
  width: 320px;
  height: 320px;
  top: 30%;
  right: 8%;
  background: var(--gold);
  opacity: 0.16;
  animation: driftB 32s ease-in-out infinite;
}

.orb-3 {
  width: 260px;
  height: 260px;
  bottom: 4%;
  left: 30%;
  background: var(--accent-light);
  opacity: 0.14;
  animation: driftC 22s ease-in-out infinite;
}

@keyframes driftA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, 30px) scale(1.08);
  }
}

@keyframes driftB {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 40px) scale(0.95);
  }
}

@keyframes driftC {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -25px) scale(1.05);
  }
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 0%, transparent 70%);
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg span {
    animation: none;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.hero h1 {
  font-size: var(--text-display);
  color: var(--text-primary);
  margin-bottom: 22px;
  max-width: 15ch;
}

.hero h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero h1 .word span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

.js .hero h1 .word span {
  animation: wordUp 0.7s var(--ease) both;
}

.no-js .hero h1 .word span {
  transform: none;
  opacity: 1;
}

@keyframes wordUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .word span {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
}

.hero p.lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 480px;
  margin-bottom: 34px;
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-micro {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 72px 24px 64px;
  }
  .hero p.lead {
    max-width: 100%;
  }
}

/* ---------- HERO PHONE MOCKUP ---------- */
.phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.phone-shell {
  position: relative;
  width: min(300px, 100%);
  aspect-ratio: 300 / 610;
  background: linear-gradient(160deg, #171d42 0%, #0c0f24 100%);
  border-radius: 42px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 14px;
  overflow: hidden;
}

.phone-shell::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  translate: -50% 0;
  width: 84px;
  height: 22px;
  background: #05060f;
  border-radius: var(--radius-full);
  z-index: 5;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse 120% 60% at 50% 0%, #1a2148 0%, #0a0d22 65%);
  border-radius: 30px;
  overflow: hidden;
  padding: 40px 16px 18px;
  display: flex;
  flex-direction: column;
}

.phone-status {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.phone-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.signal-icon {
  width: 15px;
  height: 10px;
  color: var(--text-primary);
}

.battery-icon {
  width: 22px;
  height: 11px;
  color: var(--text-primary);
}

/* ---- Scenes (cross-fade stack) ---- */
.phone-scenes {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.phone-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
}

.phone-scene.is-scene-active {
  opacity: 1;
  visibility: visible;
}

.scene-dots {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 10px;
}

.scene-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.scene-dot.is-active {
  background: var(--accent-light);
  transform: scale(1.25);
}

/* Shared: phase layers fade/slide in within a scene */
[data-phase] {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

[data-phase].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- iOS-style incoming call screen ---- */
.call-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 26px;
}

.call-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--bg-elevated-3);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.call-avatar svg {
  width: 34px;
  height: 34px;
  stroke: var(--text-secondary);
}

.js .call-screen.is-visible .call-avatar {
  animation: callPulse 1.6s ease-in-out infinite;
}

@keyframes callPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(91, 110, 245, 0.35);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(91, 110, 245, 0);
  }
}

.call-kicker {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.call-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.call-time {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: auto;
}

.call-actions {
  display: flex;
  gap: 44px;
  padding-bottom: 8px;
}

.call-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.call-btn.decline {
  background: #dc2626;
}

.call-btn.decline svg {
  fill: #fff;
}

.call-btn.accept {
  background: #4ade80;
}

.call-btn.accept svg {
  stroke: #0c2015;
}

/* ---- Chat transcript ---- */
.chat-thread {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.chat-thread .msg {
  display: flex;
  flex-direction: column;
  max-width: 84%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.chat-thread.is-visible .msg.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.msg p {
  margin: 0;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.42;
}

.msg-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  padding: 0 4px;
}

.msg-in {
  align-self: flex-start;
}

.msg-in p {
  background: var(--bg-elevated-3);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.msg-out {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-out p {
  background: var(--btn-primary-bg);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* ---- Info card (booked / lead / job / review notifications) ---- */
.info-card {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  background: var(--bg-elevated-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
}

.info-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-card-icon svg {
  width: 18px;
  height: 18px;
}

.info-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.info-card span {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.info-card--success .info-card-icon {
  background: #1c3a2e;
}

.info-card--success .info-card-icon svg {
  stroke: #6fe3a6;
}

.info-card--accent .info-card-icon {
  background: var(--accent-soft);
}

.info-card--accent .info-card-icon svg {
  stroke: var(--accent-light);
}

.info-card--gold .info-card-icon {
  background: var(--gold-soft);
}

.info-card--gold .info-card-icon svg {
  fill: var(--gold);
}

/* ---- Scene top group (lead card + timer row, stacked in normal flow so
   the timer never overlaps the card above it, even if its text wraps) ---- */
.scene-top-group {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scene-top-group .info-card {
  position: static;
}

/* ---- Timer row (speed-to-lead scene) ---- */
.timer-row {
  position: static;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.timer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.js .timer-row.is-visible .timer-dot {
  animation: timerBlink 1s ease-in-out infinite;
}

@keyframes timerBlink {
  50% {
    opacity: 0.3;
  }
}

.timer-label {
  flex: 1 1 auto;
}

.timer-count {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---- Result chip (e.g. "Replied in 12s") ---- */
.result-chip {
  position: absolute;
  bottom: 4px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-light);
  width: fit-content;
}

.result-chip svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent-light);
}

.phone-glow {
  position: absolute;
  inset: -8% -12%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    rgba(91, 110, 245, 0.32),
    rgba(231, 184, 78, 0.08) 55%,
    transparent 75%
  );
  filter: blur(10px);
}

/* ---- Reduced motion: static single scene ---- */
@media (prefers-reduced-motion: reduce) {
  .phone-scene,
  [data-phase],
  .chat-thread .msg {
    transition: none;
  }
  .js .call-screen.is-visible .call-avatar,
  .js .timer-row.is-visible .timer-dot {
    animation: none;
  }
}

/* ---- No-JS fallback: one clean static scene, no cycling ---- */
.no-js .scene-dots {
  display: none;
}

.no-js .phone-scene {
  display: none;
}

.no-js .phone-scene[data-scene="1"] {
  display: block;
  position: relative;
  opacity: 1;
  visibility: visible;
}

.no-js .phone-scene[data-scene="1"] [data-phase] {
  display: none;
}

.no-js .phone-scene[data-scene="1"] [data-phase="s1-chat"],
.no-js .phone-scene[data-scene="1"] [data-phase="s1-booked"] {
  display: flex;
  position: static;
  opacity: 1;
  transform: none;
  margin-bottom: 12px;
}

.no-js .phone-scene[data-scene="1"] .msg {
  opacity: 1;
  transform: none;
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group .reveal:nth-child(1) {
  transition-delay: 0ms;
}
.reveal-group .reveal:nth-child(2) {
  transition-delay: 90ms;
}
.reveal-group .reveal:nth-child(3) {
  transition-delay: 180ms;
}
.reveal-group .reveal:nth-child(4) {
  transition-delay: 270ms;
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- MID-PAGE / INLINE CTA ---------- */
.mid-cta-wrap {
  padding: 88px 0;
}

.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
}

.inline-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

.inline-cta h3 {
  font-size: 19px;
  margin-bottom: 6px;
  font-weight: 600;
}

.inline-cta p {
  color: var(--text-secondary);
  font-size: 15px;
}

@media (max-width: 680px) {
  .inline-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- SECTION SHELL ---------- */
section {
  padding: 88px 0;
}

.section-alt {
  background: var(--bg-elevated);
}

.section-head {
  max-width: 560px;
  margin-bottom: 56px;
}

.section-head h2 {
  font-size: var(--text-h2);
  margin-bottom: 14px;
}

.section-head p {
  color: var(--text-secondary);
  font-size: 16.5px;
}

/* ---------- PAIN POINTS ---------- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pain-item {
  background: var(--bg);
  padding: 32px 28px;
}

.pain-item .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.pain-item .icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent-light);
}

.pain-item .k {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: block;
}

.pain-item p {
  color: var(--text-secondary);
  font-size: 15px;
}

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

/* ---------- SERVICES (2-card asymmetric) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 20px;
  align-items: stretch;
}

.service {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.service::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

.service:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.service::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(91, 110, 245, 0.16),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
  pointer-events: none;
}

.service.has-glow:hover::after {
  opacity: 1;
}

/* Automations is the dominant card: wider column, accent border, filled icon */
.service-automations {
  background: var(--bg-elevated-3);
  border-color: var(--border-strong);
  padding: 34px 30px 32px;
}

.service-automations::before {
  background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
  opacity: 0.6;
}

.service-automations .icon {
  background: var(--accent);
}

.service-automations .icon svg {
  stroke: #fff;
}

.service .icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.service .icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent-light);
}

.service h3 {
  font-size: 19px;
  margin-bottom: 10px;
}

.service > p {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 18px;
}

.service ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.service ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.service ul li svg {
  width: 15px;
  height: 15px;
  stroke: var(--accent-light);
  flex-shrink: 0;
  margin-top: 2px;
}

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

/* ---------- SERVICE VISUALS ---------- */
/* Websites card: recognizable mini browser window with a visible booking CTA */
.mini-browser {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
  margin-bottom: 18px;
}

.mini-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-elevated-3);
  border-bottom: 1px solid var(--border);
}

.mini-browser-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
}

.mini-browser-url {
  margin-left: 8px;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  flex: 1;
}

.mini-browser-body {
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-browser-line {
  display: block;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated-3);
  width: 100%;
}

.mini-browser-line--title {
  width: 62%;
  height: 11px;
  background: var(--border-strong);
}

.mini-browser-line--short {
  width: 40%;
  margin-bottom: 4px;
}

.mini-browser-cta {
  align-self: flex-start;
  margin-top: 4px;
  background: var(--btn-primary-bg);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
}

/* Automations card: labelled list of real examples */
.automation-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.automation-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 4px;
  border-top: 1px solid var(--border);
}

.automation-list li:first-child {
  border-top: none;
}

.automation-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.automation-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--accent-light);
}

.automation-list li strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.automation-list li span {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.automation-note {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  margin-top: auto;
  padding-top: 4px;
}

/* ---------- CALL FLOW ----------
   Alignment approach: icons are centered within equal-width grid columns,
   and each step's connector is drawn relative to that step's own box using
   percentage offsets, so it always meets the previous/next icon's exact
   center regardless of viewport width or wrapped titles. This intentionally
   avoids one full-width absolutely-positioned line (which drifts out of
   sync with the icons whenever the gap-to-column ratio changes). */
.call-flow {
  position: relative;
}

.flow-steps {
  --flow-gap: 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--flow-gap);
  position: relative;
}

.flow-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Connector: spans from this step's icon center back to the previous
   step's icon center. Nothing is drawn before step 1 or after the last step. */
.flow-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 23px; /* vertical center of the 46px icon circle */
  left: calc(-50% - var(--flow-gap));
  right: 50%;
  height: 2px;
  background: var(--border-strong);
  z-index: 0;
  transition: background var(--dur-slow) var(--ease);
}

.flow-step.is-active:not(:first-child)::before {
  background: var(--accent);
}

.flow-step .num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  opacity: 0.5;
  flex-shrink: 0;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease),
    opacity var(--dur-slow) var(--ease);
}

.flow-step.is-active .num {
  opacity: 1;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.flow-step .num svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
  transition: stroke var(--dur-base) var(--ease);
}

.flow-step.is-active .num svg {
  stroke: var(--accent-light);
}

/* Fixed-height title band (room for 2 lines) keeps every step's microcopy
   starting on the same baseline, even when one title wraps and others don't. */
.flow-step h3 {
  font-size: 15.5px;
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
  margin-bottom: 6px;
  max-width: 16ch;
}

.flow-step p {
  color: var(--text-secondary);
  font-size: 13.5px;
}

@media (max-width: 900px) {
  .flow-steps {
    --flow-gap: 32px;
    grid-template-columns: 1fr;
    gap: var(--flow-gap);
    padding-left: 0;
  }
  .flow-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
  }
  .flow-step .num {
    width: 36px;
    height: 36px;
    margin-bottom: 0;
  }
  .flow-step h3 {
    min-height: 0;
    max-width: none;
  }
  /* Vertical connector: one segment per gap, drawn on the step above it.
     top is this step's own icon center (fixed); bottom is a negative offset
     equal to gap + next icon's center (also fixed) — height is left to the
     browser to compute between those two anchors, so the line always lands
     exactly on the next icon's center no matter how tall this step's text is. */
  .flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px; /* center of the 36px icon */
    top: 18px;
    bottom: calc(-1 * (var(--flow-gap) + 18px));
    width: 2px;
    background: var(--border-strong);
    z-index: 0;
    transition: background var(--dur-slow) var(--ease);
  }
  .flow-step.is-active:not(:last-child)::after {
    background: var(--accent);
  }
}

/* ---------- PROCESS ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  list-style: none;
}

.process::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--border-strong);
}

.step {
  position: relative;
  padding: 0 18px;
  text-align: left;
}

.step .num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-elevated-2);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--gold);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: 16.5px;
  margin-bottom: 8px;
}

.step p {
  color: var(--text-secondary);
  font-size: 14.5px;
}

@media (max-width: 820px) {
  .process {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .process::before {
    display: none;
  }
}

/* ---------- WHY US ---------- */
.why-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.why-item {
  padding-top: 2px;
}

.why-item .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.why-item .icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent-light);
}

.why-item h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.why-item p {
  color: var(--text-secondary);
  font-size: 15px;
}

@media (max-width: 820px) {
  .why-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- TESTIMONIALS (kept commented in HTML; styled and ready) ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}

.testimonial-card blockquote {
  font-size: 15.5px;
  color: var(--text-primary);
  margin-bottom: 18px;
  line-height: 1.55;
}

.testimonial-card cite {
  font-style: normal;
  font-size: 13.5px;
  color: var(--text-secondary);
  display: block;
}

.testimonial-card cite strong {
  color: var(--text-primary);
  display: block;
  font-size: 14px;
}

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

/* ---------- FAQ ---------- */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  margin-bottom: 48px;
}

.faq-item {
  border-top: 1px solid var(--border-strong);
}

.faq-item h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  text-align: left;
  padding: 18px 0;
  cursor: pointer;
}

.faq-trigger .chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
  transition: transform var(--dur-base) var(--ease);
}

.faq-trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
  stroke: var(--accent-light);
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}

.faq-panel-inner {
  overflow: hidden;
}

.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel p {
  color: var(--text-secondary);
  font-size: 15px;
  padding-bottom: 20px;
}

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

@media (max-width: 820px) {
  .faq-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQ: show more ----------
   JS present: collapsed by default, toggled via aria-expanded + .is-open.
   No JS: html keeps the .no-js class (set only by the inline head script),
   so these rules never apply and the extra questions render fully open,
   with the toggle button itself hidden since it wouldn't do anything. */
.faq-extra {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}

.faq-extra > .faq-list {
  overflow: hidden;
  margin-bottom: 0;
}

.faq-extra.is-open {
  grid-template-rows: 1fr;
}

.faq-extra.is-open > .faq-list {
  margin-bottom: 24px;
}

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

.no-js .faq-extra {
  display: block;
}

.no-js .faq-more-btn {
  display: none;
}

.faq-more-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 56px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.faq-more-btn:hover,
.faq-more-btn:focus-visible {
  border-color: var(--accent-light);
  background: var(--bg-elevated-2);
}

.faq-more-btn .chevron {
  width: 16px;
  height: 16px;
  stroke: var(--text-secondary);
  transition: transform var(--dur-base) var(--ease);
}

.faq-more-btn[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* ---------- CTA BANNER ---------- */
.cta-banner {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 2px;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(
    120deg,
    var(--accent) 0%,
    var(--glass-border) 30%,
    var(--gold) 55%,
    var(--glass-border) 80%,
    var(--accent) 100%
  );
  background-size: 240% 240%;
}

@media (prefers-reduced-motion: no-preference) {
  .cta-banner {
    animation: borderShift 10s ease-in-out infinite;
  }
}

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

.cta-banner-inner {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-elevated) 65%);
  border-radius: calc(var(--radius-xl) - 2px);
  padding: 64px 48px;
  text-align: center;
}

.cta-banner h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 14px;
}

.cta-banner p {
  color: var(--text-secondary);
  margin-bottom: 30px;
  font-size: 16px;
}

.cta-banner .cta-row {
  justify-content: center;
}

/* The page's real final CTA (closes the FAQ section) — more presence than
   an inline mid-page banner: thicker gradient frame, roomier inner padding. */
.cta-banner--final {
  padding: 3px;
  margin-top: 4px;
}

.cta-banner--final .cta-banner-inner {
  padding: 72px 48px;
}

.cta-banner--final h2 {
  font-size: clamp(26px, 3.4vw, 34px);
}

@media (max-width: 600px) {
  .cta-banner--final .cta-banner-inner {
    padding: 48px 28px;
  }
}

/* ---------- STICKY MOBILE CTA ---------- */
.sticky-cta {
  display: none;
}

@media (max-width: 820px) {
  body {
    padding-bottom: 78px;
  }
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(8, 10, 22, 0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-strong);
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  }
  .sticky-cta.is-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }
  .sticky-cta a {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--btn-primary-bg);
    color: #fff;
    padding: 13px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 15px;
  }
  .sticky-cta a:hover,
  .sticky-cta a:focus-visible {
    background: var(--btn-primary-bg-hover);
  }
}

/* ---------- FOOTER ---------- */
footer {
  position: relative;
  padding: 48px 0 40px;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border) 50%, transparent);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.footer-brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

footer .fine {
  color: var(--text-secondary);
  font-size: 13.5px;
}

.footer-links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text-primary);
}

/* ---------- BOOKING MODAL ---------- */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.booking-modal[hidden] {
  display: none;
}

.booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 12, 0.72);
  backdrop-filter: blur(4px);
}

.booking-modal__panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  height: min(720px, 90vh);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.booking-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated-2);
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.booking-modal__close:hover,
.booking-modal__close:focus-visible {
  border-color: var(--accent-light);
}

.booking-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
}