/* ============================================================================
   UPDIGEX WHITE-LABEL AGENCY — COMPLETE DESIGN SYSTEM
   Version: 1.0.0
   Pixel-perfect conversion from React + TailwindCSS v4 source.
   Every value cross-referenced against HeroSection.tsx, Navbar.tsx,
   HowWeDoSection.tsx, Footer.tsx, FloatingBookingTrigger.tsx,
   BookingModal.tsx and public/style.css.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   All CSS custom properties. Overridden at runtime by inc/dynamic-css.php
   which injects Customizer values into :root.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Indigo palette (primary brand) ── */
  --udx-indigo-600:  #4f46e5;   /* primary CTA, logo bg, buttons */
  --udx-indigo-500:  #6366f1;   /* hover state */
  --udx-indigo-400:  #818cf8;   /* light accent, icons, links */
  --udx-indigo-300:  #a5b4fc;   /* pale accent, border glow */
  --udx-indigo-950:  #1e1b4b;   /* deep bg, badge bg */

  /* ── Slate palette (backgrounds) ── */
  --udx-slate-950: #020617;     /* page bg, darkest */
  --udx-slate-900: #0f172a;     /* section bg, modal card */
  --udx-slate-800: #1e293b;     /* card bg, borders */
  --udx-slate-700: #334155;     /* dot pattern color */
  --udx-slate-500: #64748b;     /* faintest text */
  --udx-slate-400: #94a3b8;     /* muted text, icons */
  --udx-slate-300: #cbd5e1;     /* body text */
  --udx-slate-200: #e2e8f0;     /* bright text */

  /* ── Emerald (accent dot / pulse) ── */
  --udx-emerald-400: #34d399;

  /* ── Semantic aliases (used in components) ── */
  --udx-bg-page:   var(--udx-slate-950);
  --udx-bg-section: var(--udx-slate-900);
  --udx-bg-card:   var(--udx-slate-800);
  --udx-border:    var(--udx-slate-800);
  --udx-border-dk: var(--udx-slate-900);

  /* ── Typography ── */
  --udx-font-serif: 'Playfair Display', Georgia, Cambria, 'Times New Roman', Times, serif;
  --udx-font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --udx-font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* ── Border radii (matches public/style.css tokens) ── */
  --udx-r-sm:   6px;     /* rounded-md in TW: badges, steps-num */
  --udx-r-md:   8px;     /* rounded-lg in TW: buttons, icon boxes */
  --udx-r-lg:   12px;    /* rounded-xl in TW: step cards, CTA banner */
  --udx-r-xl:   16px;    /* rounded-2xl in TW: VSL player, modal */
  --udx-r-full: 9999px;  /* rounded-full in TW: badges, play btn, FAB */

  /* ── Glow shadows ── */
  --udx-glow-40:  rgba(79, 70, 229, 0.4);
  --udx-glow-50:  rgba(79, 70, 229, 0.5);
  --udx-glow-60:  rgba(79, 70, 229, 0.6);
  --udx-glow-80:  rgba(79, 70, 229, 0.8);
  --udx-glow-vsl: rgba(99, 102, 241, 0.2);

  /* ── Transitions ── */
  --udx-t-fast: 150ms ease;
  --udx-t-base: 200ms ease;
  --udx-t-slow: 300ms ease;
  --udx-t-vslow: 700ms ease;

  /* ── Z-index ladder ── */
  --udx-z-nav:      40;
  --udx-z-fab:      40;
  --udx-z-modal:    50;
  --udx-z-video:    10;
  --udx-z-controls: 20;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. RESET
   ───────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--udx-font-sans);
  font-size: 1rem;             /* text-base */
  line-height: 1.5;
  color: var(--udx-slate-300); /* text-slate-300 */
  background-color: var(--udx-slate-950);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tailwind antialiased + selection:bg-indigo-600 selection:text-white */
}

::selection {
  background-color: var(--udx-indigo-600);
  color: #fff;
}

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--udx-indigo-400);
  outline-offset: 2px;
  border-radius: 3px;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

img, video { max-width: 100%; display: block; }
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--udx-font-serif);
  color: #fff;
  line-height: 1.15;
  font-weight: 700;
}

/* WP admin bar offset */
body.admin-bar { padding-top: 32px; }
body.admin-bar .udx-navbar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { padding-top: 46px; }
  body.admin-bar .udx-navbar { top: 46px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. LAYOUT UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.udx-container {
  width: 100%;
  max-width: 1120px;   /* max-w-5xl-ish for hero content */
  margin-inline: auto;
  padding-inline: 1rem; /* px-4 */
}

@media (min-width: 640px) {
  .udx-container { padding-inline: 1.5rem; } /* sm:px-6 */
}

/* .udx-container--7xl { max-width: 1280px; } */
.udx-container--7xl { max-width: var(--udx-container-width, 1280px); }
.udx-container--6xl { max-width: 1152px; }  /* max-w-6xl — process grid */
.udx-container--5xl { max-width: 1024px; }  /* max-w-5xl — hero content */
.udx-container--4xl { max-width: 896px;  }  /* max-w-4xl — VSL player */
.udx-container--3xl { max-width: 768px;  }  /* max-w-3xl — sub-headline */
.udx-container--2xl { max-width: 672px;  }  /* max-w-2xl — CTA button */

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

/* ─────────────────────────────────────────────────────────────────────────────
   4. NAVBAR
   Source: src/components/Navbar.tsx
   ───────────────────────────────────────────────────────────────────────────── */
.udx-navbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: var(--udx-z-nav);
  /* bg-slate-950/90 backdrop-blur-md border-b border-slate-800/80 shadow-lg */
  background-color: rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(30, 41, 59, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  transition: background-color var(--udx-t-slow), box-shadow var(--udx-t-slow);
}

/* Scrolled state enhancement */
.udx-navbar--scrolled {
  background-color: rgba(2, 6, 23, 0.98);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* max-w-7xl mx-auto px-4 sm:px-6 h-20 flex items-center justify-between */
.udx-navbar__inner {
  max-width: var(--udx-container-width, 1280px);
  margin-inline: auto;
  padding-inline: 1rem;     /* px-4 */
  height: 5rem;             /* h-20 = 80px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) {
  .udx-navbar__inner { padding-inline: 1.5rem; } /* sm:px-6 */
}

/* ── Brand Logo ── */
/* flex items-center gap-2.5 group */
.udx-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* gap-2.5 */
  text-decoration: none;
}

/* w-9 h-9 rounded-md bg-gradient-to-br from-indigo-500 to-indigo-700
   font-serif font-extrabold text-xl shadow-md group-hover:scale-105 */
.udx-brand__logo {
  width: 2.25rem;    /* w-9 */
  height: 2.25rem;   /* h-9 */
  border-radius: 6px; /* rounded-md */
  background: linear-gradient(135deg, #6366f1, #4338ca); /* from-indigo-500 to-indigo-700 */
  color: #fff;
  font-family: var(--udx-font-serif);
  font-weight: 800;  /* font-extrabold */
  font-size: 1.25rem; /* text-xl */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); /* shadow-md */
  transition: transform var(--udx-t-slow);
  flex-shrink: 0;
}
.udx-brand:hover .udx-brand__logo {
  transform: scale(1.05); /* group-hover:scale-105 */
}

.udx-brand__text { display: flex; flex-direction: column; }

/* text-xl font-serif font-bold tracking-tight text-white uppercase */
.udx-brand__name {
  font-family: var(--udx-font-serif);
  font-size: 1.25rem;        /* text-xl */
  font-weight: 700;           /* font-bold */
  letter-spacing: -0.025em;  /* tracking-tight */
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
}

/* text-[9px] font-mono font-bold uppercase tracking-[0.2em] text-indigo-400 -mt-1 */
.udx-brand__tagline {
  font-family: var(--udx-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--udx-indigo-400);
  margin-top: -1px; /* -mt-1 approx */
}

/* ── Desktop nav links: hidden lg:flex items-center gap-8
   text-xs font-bold uppercase tracking-widest text-slate-300 ── */
.udx-nav-links {
  display: none;
  align-items: center;
  gap: 2rem;               /* gap-8 */
  font-size: 0.75rem;      /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;   /* tracking-widest */
  color: var(--udx-slate-300);
}

/* hover:text-indigo-400 transition flex items-center gap-2 */
.udx-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  color: var(--udx-slate-300);
  transition: color var(--udx-t-base);
}
.udx-nav-link:hover,
.udx-nav-link--active { color: var(--udx-indigo-400); }

/* ── Animated pulse dot: w-2 h-2 rounded-full bg-emerald-400 animate-pulse ── */
.udx-pulse-dot {
  display: inline-block;
  width: 0.5rem;    /* w-2 */
  height: 0.5rem;   /* h-2 */
  border-radius: 50%;
  background-color: var(--udx-emerald-400);
  box-shadow: 0 0 8px var(--udx-emerald-400);
  animation: udx-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Desktop CTA: hidden lg:flex items-center gap-3 ── */
.udx-nav-actions { display: none; align-items: center; gap: 0.75rem; }

/* ── Mobile hamburger ── */
/* lg:hidden p-2 text-slate-300 hover:bg-slate-900 rounded transition */
.udx-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;             /* p-2 */
  color: var(--udx-slate-300);
  border-radius: 4px;          /* rounded */
  transition: background-color var(--udx-t-base);
}
.udx-nav-toggle:hover { background-color: var(--udx-slate-900); }

.udx-nav-toggle__icon--close { display: none; }
.udx-nav-toggle[aria-expanded="true"] .udx-nav-toggle__icon--open  { display: none; }
.udx-nav-toggle[aria-expanded="true"] .udx-nav-toggle__icon--close { display: flex; }

/* ── Mobile dropdown menu ── */
/* lg:hidden border-b border-slate-800 bg-slate-950 px-6 py-6
   shadow-2xl flex flex-col gap-4 animate-fadeIn */
.udx-mobile-menu {
  display: none;
  flex-direction: column;
  gap: 1rem;                /* gap-4 */
  padding: 1.5rem;          /* px-6 py-6 */
  background-color: var(--udx-slate-950);
  border-bottom: 1px solid var(--udx-slate-800);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* shadow-2xl */
}
.udx-mobile-menu.is-open {
  display: flex;
  animation: udx-fadeIn 0.25s ease-out;
}

/* text-indigo-400 font-bold uppercase tracking-wider text-xs py-1
   flex items-center gap-2 */
.udx-mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--udx-slate-200);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-block: 0.25rem;
  transition: color var(--udx-t-base);
}
.udx-mobile-menu__link:first-child { color: var(--udx-indigo-400); }
.udx-mobile-menu__link:hover { color: var(--udx-indigo-400); }

/* ─────────────────────────────────────────────────────────────────────────────
   5. BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Primary navbar CTA button ──
   bg-indigo-600 hover:bg-indigo-500 text-white px-5 py-2.5 rounded-lg
   font-bold uppercase tracking-wider text-xs shadow-md transition-all
   duration-300 flex items-center gap-2 hover:shadow-[0_0_20px_rgba(79,70,229,0.5)] */
.udx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--udx-font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;  /* tracking-wider */
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--udx-t-slow);
  border-radius: var(--udx-btn-radius, var(--udx-r-md));
}

/* Navbar CTA button */
.udx-btn--nav {
  background-color: var(--udx-indigo-600);
  color: #fff;
  padding: 0.625rem 1.25rem; /* py-2.5 px-5 */
  border-radius: var(--udx-r-md);  /* rounded-lg */
  font-size: 0.75rem;              /* text-xs */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); /* shadow-md */
}
.udx-btn--nav:hover {
  background-color: var(--udx-indigo-500);
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.5);
}

/* Mobile full-width CTA */
/* w-full bg-indigo-600 text-white text-center py-3.5 rounded-lg
   font-bold uppercase tracking-widest text-xs shadow-md flex items-center
   justify-center gap-2 mt-2 */
.udx-btn--mobile-cta {
  width: 100%;
  background-color: var(--udx-indigo-600);
  color: #fff;
  padding: 0.875rem 1rem;  /* py-3.5 */
  border-radius: var(--udx-r-md);
  font-size: 0.75rem;
  letter-spacing: 0.1em;  /* tracking-widest */
  justify-content: center;
  margin-top: 0.5rem;      /* mt-2 */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  transition: background-color var(--udx-t-base);
}
.udx-btn--mobile-cta:hover { background-color: var(--udx-indigo-500); }

/* ── Hero main CTA button ──
   w-full py-5 px-8 bg-gradient-to-r from-indigo-600 via-indigo-500
   to-indigo-600 rounded-xl font-bold uppercase tracking-wider text-sm
   sm:text-base shadow-[0_0_40px_rgba(79,70,229,0.5)]
   flex items-center justify-center gap-3 transform hover:-translate-y-0.5 */
.udx-btn--cta {
  width: 100%;
  padding: 1.25rem 2rem;   /* py-5 px-8 */
  background: linear-gradient(90deg,
    var(--udx-indigo-600),
    var(--udx-indigo-500),
    var(--udx-indigo-600)
  );
  background-size: 200% 100%;
  color: #fff;
  border-radius: var(--udx-r-lg);  /* rounded-xl */
  font-size: 0.875rem;              /* text-sm */
  letter-spacing: 0.05em;
  box-shadow: 0 0 40px rgba(79, 70, 229, 0.5);
  justify-content: center;
  gap: 0.75rem;            /* gap-3 */
}
@media (min-width: 640px) { .udx-btn--cta { font-size: 1rem; } } /* sm:text-base */
.udx-btn--cta:hover {
  background-position: right center;
  box-shadow: 0 0 50px rgba(79, 70, 229, 0.65);
  transform: translateY(-2px); /* hover:-translate-y-0.5 */
}

/* Rotating calendar icon on hover */
.udx-btn--cta:hover .udx-btn__icon-cal { transform: rotate(12deg); }
.udx-btn__icon-cal { transition: transform var(--udx-t-slow); }
/* Arrow sliding right */
.udx-btn--cta:hover .udx-btn__icon-arrow { transform: translateX(4px); }
.udx-btn__icon-arrow { transition: transform var(--udx-t-slow); }

/* ── Process section CTA button ──
   px-7 py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-bold
   uppercase tracking-wider text-xs rounded-lg shadow-lg flex items-center gap-2.5 */
.udx-btn--section {
  padding: 1rem 1.75rem;   /* py-4 px-7 */
  background-color: var(--udx-indigo-600);
  color: #fff;
  border-radius: var(--udx-r-md);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  gap: 0.625rem;           /* gap-2.5 */
  white-space: nowrap;
  flex-shrink: 0;
}
.udx-btn--section:hover { background-color: var(--udx-indigo-500); }

/* ── Text-style link button ──
   text-indigo-400 hover:text-indigo-300 font-bold transition
   flex items-center gap-1.5 */
.udx-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;   /* gap-1.5 */
  color: var(--udx-indigo-400);
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  border: none;
  background: none;
  transition: color var(--udx-t-base);
}
.udx-btn-text:hover { color: var(--udx-indigo-300); }

/* ─────────────────────────────────────────────────────────────────────────────
   6. HERO SECTION
   Source: src/components/HeroSection.tsx
   relative pt-28 pb-16 md:pt-36 md:pb-24 px-4 sm:px-6
   bg-slate-950 text-white overflow-hidden border-b border-slate-800/80
   ───────────────────────────────────────────────────────────────────────────── */
.udx-hero {
  position: relative;
  padding-top: 7rem;       /* pt-28 */
  padding-bottom: 4rem;    /* pb-16 */
  padding-inline: 1rem;    /* px-4 */
  background-color: var(--udx-slate-950);
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid rgba(30, 41, 59, 0.8); /* border-slate-800/80 */
}
@media (min-width: 640px)  { .udx-hero { padding-inline: 1.5rem; } }  /* sm:px-6 */
@media (min-width: 768px)  {
  .udx-hero {
    padding-top: 9rem;     /* md:pt-36 */
    padding-bottom: 6rem;  /* md:pb-24 */
  }
}

/* Dot grid bg: bg-[radial-gradient(#334155_1px,transparent_1px)]
   [background-size:24px_24px] opacity-20 absolute inset-0 */
.udx-hero__dotgrid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#334155 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.2;
  pointer-events: none;
}

/* Glow blob: absolute top-1/4 left-1/2 -translate-x-1/2
   w-[600px] h-[400px] bg-indigo-600/15 rounded-full blur-[120px] */
.udx-hero__glow {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: rgba(79, 70, 229, 0.15);  /* bg-indigo-600/15 */
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

/* max-w-5xl mx-auto text-center relative z-10 */
.udx-hero__content {
  max-width: 64rem;  /* max-w-5xl = 1024px — but actual React uses 1024px */
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 10;
}

/* ── Badge ──
   inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full
   bg-indigo-950/80 border border-indigo-700/60 text-indigo-300
   text-[11px] font-bold uppercase tracking-widest mb-6 */
.udx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;         /* gap-2 */
  padding: 0.375rem 0.875rem; /* py-1.5 px-3.5 */
  border-radius: var(--udx-r-full);
  background-color: rgba(30, 27, 75, 0.8); /* bg-indigo-950/80 */
  border: 1px solid rgba(67, 56, 202, 0.6);  /* border-indigo-700/60 */
  color: var(--udx-indigo-300);
  font-family: var(--udx-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracking-widest */
  margin-bottom: 1.5rem; /* mb-6 */
}

/* ── H1 Headline ──
   text-3xl sm:text-5xl md:text-6xl font-serif
   leading-[1.15] text-white mb-6 tracking-tight */
.udx-hero__headline {
  font-family: var(--udx-font-serif);
  font-size: 1.875rem;       /* text-3xl */
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1.5rem;     /* mb-6 */
  letter-spacing: -0.025em;  /* tracking-tight */
  font-weight: 700;
}
@media (min-width: 640px) { .udx-hero__headline { font-size: 3rem; }    } /* sm:text-5xl */
@media (min-width: 768px) { .udx-hero__headline { font-size: 3.75rem; } } /* md:text-6xl */

/* text-indigo-400 font-serif italic */
.udx-text-highlight {
  color: var(--udx-indigo-400);
  font-family: var(--udx-font-serif);
  font-style: italic;
}

/* underline decoration-indigo-500/80 decoration-wavy underline-offset-8 */
.udx-text-wavy {
  text-decoration: underline;
  text-decoration-color: rgba(99, 102, 241, 0.8);
  text-decoration-style: wavy;
  text-underline-offset: 8px;
}

/* ── Sub-headline ──
   text-base sm:text-lg md:text-xl text-slate-300
   mb-8 max-w-3xl mx-auto leading-relaxed font-sans */
.udx-hero__sub {
  font-family: var(--udx-font-sans);
  font-size: 1rem;           /* text-base */
  color: var(--udx-slate-300);
  margin-bottom: 2rem;       /* mb-8 */
  max-width: 48rem;          /* max-w-3xl */
  margin-inline: auto;
  margin-bottom: 2rem;
  line-height: 1.625;        /* leading-relaxed */
}
@media (min-width: 640px) { .udx-hero__sub { font-size: 1.125rem; } } /* sm:text-lg */
@media (min-width: 768px) { .udx-hero__sub { font-size: 1.25rem;  } } /* md:text-xl */
.udx-hero__sub strong { color: #fff; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────────
   7. VSL VIDEO PLAYER
   Source: HeroSection.tsx lines 41-122
   ───────────────────────────────────────────────────────────────────────────── */

/* relative max-w-4xl mx-auto mb-8 group */
.udx-vsl-wrap {
  position: relative;
  max-width: 56rem;   /* max-w-4xl */
  margin-inline: auto;
  margin-bottom: 2rem; /* mb-8 */
}

/* relative rounded-2xl bg-slate-900 border border-slate-800
   shadow-[0_0_50px_rgba(99,102,241,0.2)] overflow-hidden */
.udx-vsl {
  position: relative;
  border-radius: var(--udx-r-xl);  /* rounded-2xl = 16px */
  background-color: var(--udx-slate-900);
  border: 1px solid var(--udx-slate-800);
  box-shadow: 0 0 50px rgba(99, 102, 241, 0.2);
  overflow: hidden;
}

/* relative aspect-video bg-slate-950 overflow-hidden cursor-pointer */
.udx-vsl__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--udx-slate-950);
  overflow: hidden;
  cursor: pointer;
}

/* w-full h-full object-cover transition-all duration-700
   opacity-60 grayscale-[20%]   (paused)
   scale-105 opacity-80          (playing) */
.udx-vsl__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: grayscale(20%);
  transition: all 700ms ease;
}
.udx-vsl.is-playing .udx-vsl__poster {
  opacity: 0.8;
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/40 to-transparent */
.udx-vsl__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--udx-slate-950),
    rgba(2, 6, 23, 0.4),
    transparent
  );
  pointer-events: none;
}

/* ── Unmute banner ──
   absolute top-4 left-1/2 -translate-x-1/2
   bg-indigo-600/90 text-white font-bold text-xs
   px-4 py-2 rounded-full shadow-lg flex items-center gap-2
   backdrop-blur-md border border-indigo-400/40 animate-bounce */
.udx-vsl__unmute {
  position: absolute;
  top: 1rem;            /* top-4 */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(79, 70, 229, 0.9);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;   /* text-xs */
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border-radius: var(--udx-r-full);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 0.5rem;          /* gap-2 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(129, 140, 248, 0.4); /* border-indigo-400/40 */
  animation: udx-bounce 2s ease-in-out infinite;
  white-space: nowrap;
  z-index: 5;
}
.udx-vsl__unmute svg { animation: udx-pulse 2s ease-in-out infinite; }
.udx-vsl.is-playing .udx-vsl__unmute { display: none; }

/* ── Center play button area ──
   absolute inset-0 flex flex-col items-center justify-center p-6 text-center z-10 */
.udx-vsl__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;      /* p-6 */
  text-align: center;
  z-index: var(--udx-z-video);
  transition: opacity var(--udx-t-slow);
}
.udx-vsl.is-playing .udx-vsl__center {
  opacity: 0;
  pointer-events: none;
}

/* w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-indigo-600 hover:bg-indigo-500
   text-white flex items-center justify-center
   shadow-[0_0_35px_rgba(79,70,229,0.8)] hover:scale-110 transition-all
   duration-300 cursor-pointer mb-4 border-2 border-indigo-300/40 */
.udx-vsl__play-btn {
  width: 5rem;           /* w-20 */
  height: 5rem;          /* h-20 */
  border-radius: 50%;
  background-color: var(--udx-indigo-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 35px rgba(79, 70, 229, 0.8);
  transition: all var(--udx-t-slow);
  cursor: pointer;
  margin-bottom: 1rem;   /* mb-4 */
  border: 2px solid rgba(165, 180, 252, 0.4); /* border-indigo-300/40 */
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .udx-vsl__play-btn {
    width: 6rem;   /* sm:w-24 */
    height: 6rem;  /* sm:h-24 */
  }
}
.udx-vsl__play-btn:hover {
  transform: scale(1.1);
  background-color: var(--udx-indigo-500);
}

/* Play icon — shift right like ml-1.5 */
.udx-vsl__play-btn svg.icon-play { margin-left: 0.375rem; }

/* bg-slate-950/85 backdrop-blur-md px-5 py-2 rounded-lg
   border border-slate-800 max-w-lg */
.udx-vsl__title-card {
  background-color: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.5rem 1.25rem;  /* py-2 px-5 */
  border-radius: var(--udx-r-md);   /* rounded-lg */
  border: 1px solid var(--udx-slate-800);
  max-width: 32rem;           /* max-w-lg */
}
/* text-xs sm:text-sm font-sans font-medium text-slate-200 */
.udx-vsl__title-card p {
  font-family: var(--udx-font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--udx-slate-200);
}
@media (min-width: 640px) { .udx-vsl__title-card p { font-size: 0.875rem; } }

/* ── Bottom controls bar ──
   absolute bottom-0 inset-x-0 bg-slate-950/90 p-3 flex items-center
   justify-between text-xs text-slate-300
   border-t border-slate-800/80 backdrop-blur-md z-20 */
.udx-vsl__controls {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  background-color: rgba(2, 6, 23, 0.9);
  padding: 0.75rem 1rem;   /* p-3 (approx) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--udx-slate-300);
  border-top: 1px solid rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(12px);
  z-index: var(--udx-z-controls);
}

.udx-vsl__ctrl-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;  /* gap-3 */
  flex-shrink: 0;
}

/* p-1 hover:text-white transition flex items-center gap-1.5 */
.udx-vsl__ctrl-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem;
  color: var(--udx-slate-300);
  transition: color var(--udx-t-fast);
  cursor: pointer;
}
.udx-vsl__ctrl-btn:hover { color: #fff; }

/* font-mono text-[11px] text-slate-400 */
.udx-vsl__audio-lbl {
  font-family: var(--udx-font-mono);
  font-size: 11px;
  color: var(--udx-slate-400);
}

/* flex-1 mx-4 bg-slate-800 h-1.5 rounded-full overflow-hidden */
.udx-vsl__progress {
  flex: 1;
  background-color: var(--udx-slate-800);
  height: 6px;         /* h-1.5 */
  border-radius: var(--udx-r-full);
  overflow: hidden;
  cursor: pointer;
}

/* bg-indigo-500 h-full transition-all duration-300 */
.udx-vsl__progress-fill {
  width: 0%;
  height: 100%;
  background-color: var(--udx-indigo-500);
  transition: width 300ms ease;
  border-radius: var(--udx-r-full);
}

/* font-mono text-[11px] text-slate-400 */
.udx-vsl__time {
  font-family: var(--udx-font-mono);
  font-size: 11px;
  color: var(--udx-slate-400);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. HERO CTA AREA
   ───────────────────────────────────────────────────────────────────────────── */

/* max-w-2xl mx-auto mb-10 */
.udx-cta-wrap {
  max-width: 42rem;    /* max-w-2xl */
  margin-inline: auto;
  margin-bottom: 2.5rem; /* mb-10 */
}

/* text-xs text-slate-400 mt-3 font-sans */
.udx-cta-sub {
  font-family: var(--udx-font-sans);
  font-size: 0.75rem;
  color: var(--udx-slate-400);
  margin-top: 0.75rem; /* mt-3 */
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. PROOF BAR
   pt-6 border-t border-slate-800/80 flex flex-wrap items-center
   justify-center gap-6 sm:gap-10 text-xs font-bold uppercase
   tracking-wider text-slate-400
   ───────────────────────────────────────────────────────────────────────────── */
.udx-proof-bar {
  padding-top: 1.5rem;   /* pt-6 */
  border-top: 1px solid rgba(30, 41, 59, 0.8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;           /* gap-6 */
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking-wider */
  color: var(--udx-slate-400);
}
@media (min-width: 640px) { .udx-proof-bar { gap: 2.5rem; } } /* sm:gap-10 */

/* flex items-center gap-2 */
.udx-proof-item {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
}
/* w-4 h-4 text-indigo-400 */
.udx-proof-item svg { color: var(--udx-indigo-400); width: 1rem; height: 1rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   10. 3-STEP PROCESS SECTION
   Source: src/components/HowWeDoSection.tsx
   py-20 px-4 sm:px-6 bg-slate-900 text-white relative overflow-hidden
   border-b border-slate-800
   ───────────────────────────────────────────────────────────────────────────── */
.udx-process {
  padding-top: 5rem;     /* py-20 */
  padding-bottom: 5rem;
  padding-inline: 1rem;  /* px-4 */
  background-color: var(--udx-slate-900);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--udx-slate-800);
}
@media (min-width: 640px) { .udx-process { padding-inline: 1.5rem; } } /* sm:px-6 */

/* max-w-6xl mx-auto relative z-10 */
.udx-process__inner {
  max-width: 72rem; /* max-w-6xl */
  margin-inline: auto;
  position: relative;
  z-index: 10;
}

/* text-center max-w-3xl mx-auto mb-14 */
.udx-process__header {
  text-align: center;
  max-width: 48rem; /* max-w-3xl */
  margin-inline: auto;
  margin-bottom: 3.5rem; /* mb-14 */
}

/* text-[10px] font-bold uppercase tracking-[0.2em] text-indigo-400 mb-3 */
.udx-section-eyebrow {
  font-family: var(--udx-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--udx-indigo-400);
  margin-bottom: 0.75rem; /* mb-3 */
  display: block;
}

/* text-3xl sm:text-4xl md:text-5xl font-serif text-white mb-4 */
.udx-section-title {
  font-family: var(--udx-font-serif);
  font-size: 1.875rem;  /* text-3xl */
  color: #fff;
  margin-bottom: 1rem;  /* mb-4 */
  font-weight: 700;
}
@media (min-width: 640px) { .udx-section-title { font-size: 2.25rem; }  } /* sm:text-4xl */
@media (min-width: 768px) { .udx-section-title { font-size: 3rem; }     } /* md:text-5xl */

/* text-base text-slate-300 leading-relaxed font-sans */
.udx-section-sub {
  font-family: var(--udx-font-sans);
  font-size: 1rem;
  color: var(--udx-slate-300);
  line-height: 1.625; /* leading-relaxed */
}

/* grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 */
.udx-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;         /* gap-6 */
  margin-bottom: 3rem; /* mb-12 */
}
@media (min-width: 768px) {
  .udx-steps-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Step Card ──
   p-7 rounded-xl bg-slate-950 border border-slate-800/90
   hover:border-indigo-500/60 transition-all duration-300
   flex flex-col justify-between group */
.udx-step-card {
  padding: 1.75rem;    /* p-7 */
  border-radius: var(--udx-r-lg);  /* rounded-xl */
  background-color: var(--udx-slate-950);
  border: 1px solid rgba(30, 41, 59, 0.9); /* border-slate-800/90 */
  transition: border-color var(--udx-t-slow), box-shadow var(--udx-t-slow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.udx-step-card:hover {
  border-color: rgba(99, 102, 241, 0.6); /* hover:border-indigo-500/60 */
}

/* flex items-center justify-between mb-5 */
.udx-step-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem; /* mb-5 */
}

/* w-10 h-10 rounded-lg bg-indigo-950 border border-indigo-800/60
   flex items-center justify-center */
.udx-step-icon {
  width: 2.5rem;    /* w-10 */
  height: 2.5rem;   /* h-10 */
  border-radius: var(--udx-r-md); /* rounded-lg */
  background-color: var(--udx-indigo-950);
  border: 1px solid rgba(55, 48, 163, 0.6); /* border-indigo-800/60 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* w-5 h-5 text-indigo-400 */
.udx-step-icon svg { color: var(--udx-indigo-400); width: 1.25rem; height: 1.25rem; }

/* text-2xl font-serif font-bold text-slate-600
   group-hover:text-indigo-400 transition-colors */
.udx-step-num {
  font-family: var(--udx-font-serif);
  font-size: 1.5rem;  /* text-2xl */
  font-weight: 700;
  color: var(--udx-slate-500); /* text-slate-600 ≈ slate-500 */
  transition: color var(--udx-t-slow);
}
.udx-step-card:hover .udx-step-num { color: var(--udx-indigo-400); }

/* text-lg font-serif font-bold text-white mb-3 */
.udx-step-card__title {
  font-family: var(--udx-font-serif);
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem; /* mb-3 */
}

/* text-xs text-slate-400 leading-relaxed font-sans */
.udx-step-card__desc {
  font-family: var(--udx-font-sans);
  font-size: 0.75rem;  /* text-xs */
  color: var(--udx-slate-400);
  line-height: 1.625;  /* leading-relaxed */
  flex: 1;
}

/* pt-6 mt-6 border-t border-slate-900 flex items-center gap-2
   text-[11px] font-bold text-indigo-400 */
.udx-step-card__foot {
  padding-top: 1.5rem;   /* pt-6 */
  margin-top: 1.5rem;    /* mt-6 */
  border-top: 1px solid var(--udx-slate-900);
  display: flex;
  align-items: center;
  gap: 0.5rem;           /* gap-2 */
  font-size: 11px;
  font-weight: 700;
  color: var(--udx-indigo-400);
}
/* w-3.5 h-3.5 text-indigo-400 */
.udx-step-card__foot svg { color: var(--udx-indigo-400); width: 0.875rem; height: 0.875rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   11. PROCESS CTA BANNER
   bg-gradient-to-r from-indigo-950 via-slate-900 to-indigo-950
   p-6 sm:p-8 rounded-xl border border-indigo-800/60
   flex flex-col sm:flex-row items-center justify-between gap-6
   ───────────────────────────────────────────────────────────────────────────── */
.udx-cta-banner {
  background: linear-gradient(90deg,
    var(--udx-indigo-950),
    var(--udx-slate-900),
    var(--udx-indigo-950)
  );
  padding: 1.5rem;    /* p-6 */
  border-radius: var(--udx-r-lg);   /* rounded-xl */
  border: 1px solid rgba(55, 48, 163, 0.6);  /* border-indigo-800/60 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;        /* gap-6 */
  text-align: center;
}
@media (min-width: 640px) {
  .udx-cta-banner {
    flex-direction: row;
    padding: 2rem;     /* sm:p-8 */
    text-align: left;
  }
}

/* text-left max-w-xl */
.udx-cta-banner__body { max-width: 36rem; }

/* text-lg sm:text-xl font-serif text-white mb-1 */
.udx-cta-banner__title {
  font-family: var(--udx-font-serif);
  font-size: 1.125rem;
  color: #fff;
  margin-bottom: 0.25rem; /* mb-1 */
}
@media (min-width: 640px) { .udx-cta-banner__title { font-size: 1.25rem; } }

/* text-xs text-slate-300 font-sans */
.udx-cta-banner__sub {
  font-family: var(--udx-font-sans);
  font-size: 0.75rem;
  color: var(--udx-slate-300);
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. BOOKING MODAL
   Source: src/components/BookingModal.tsx
   fixed inset-0 z-50 flex items-center justify-center
   p-3 sm:p-4 bg-slate-950/85 backdrop-blur-md animate-fadeIn
   ───────────────────────────────────────────────────────────────────────────── */
.udx-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--udx-z-modal);
  align-items: center;
  justify-content: center;
  padding: 0.75rem;   /* p-3 */
  background-color: rgba(2, 6, 23, 0.85); /* bg-slate-950/85 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.udx-modal[aria-hidden="false"] {
  display: flex;
  animation: udx-fadeIn 0.25s ease-out;
}
@media (min-width: 640px) { .udx-modal { padding: 1rem; } } /* sm:p-4 */

/* Backdrop — clickable to close */
.udx-modal__backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* relative w-full max-w-4xl h-[90vh] max-h-[750px] bg-slate-900
   rounded-2xl shadow-2xl border border-slate-800
   overflow-hidden flex flex-col */
.udx-modal__card {
  position: relative;
  width: 100%;
  max-width: 56rem;   /* max-w-4xl */
  height: 90vh;
  max-height: 750px;
  background-color: var(--udx-slate-900);
  border-radius: var(--udx-r-xl);  /* rounded-2xl */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); /* shadow-2xl */
  border: 1px solid var(--udx-slate-800);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: udx-fadeIn 0.25s ease-out;
}

/* flex items-center justify-between px-6 py-4
   border-b border-slate-800 bg-slate-950 shrink-0 */
.udx-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;  /* py-4 px-6 */
  border-bottom: 1px solid var(--udx-slate-800);
  background-color: var(--udx-slate-950);
  flex-shrink: 0;
}

/* text-lg sm:text-xl font-serif font-bold text-white */
.udx-modal__title {
  font-family: var(--udx-font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
}
@media (min-width: 640px) { .udx-modal__title { font-size: 1.25rem; } }

/* text-xs text-slate-400 */
.udx-modal__sub {
  font-size: 0.75rem;
  color: var(--udx-slate-400);
  margin-top: 0.125rem;
}

/* p-2 text-slate-400 hover:text-white rounded-lg hover:bg-slate-800 transition */
.udx-modal__close {
  padding: 0.5rem;
  color: var(--udx-slate-400);
  border-radius: var(--udx-r-md);
  transition: all var(--udx-t-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.udx-modal__close:hover {
  color: #fff;
  background-color: var(--udx-slate-800);
}

/* flex-1 w-full bg-slate-900 overflow-y-auto p-3 sm:p-6 flex justify-center */
.udx-modal__body {
  flex: 1;
  width: 100%;
  background-color: var(--udx-slate-900);
  overflow-y: auto;
  padding: 0.75rem;  /* p-3 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@media (min-width: 640px) { .udx-modal__body { padding: 1.5rem; } } /* sm:p-6 */

/* w-full h-full min-h-[550px] max-w-4xl rounded-xl overflow-hidden shadow-lg */
.udx-calcom-embed {
  width: 100%;
  min-height: 550px;
  max-width: 56rem;
  border-radius: var(--udx-r-lg);
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. FLOATING ACTION BUTTON
   Source: src/components/FloatingBookingTrigger.tsx
   fixed bottom-6 right-6 z-40 flex flex-col items-end gap-2 group
   ───────────────────────────────────────────────────────────────────────────── */
.udx-fab {
  position: fixed;
  bottom: 1.5rem;  /* bottom-6 */
  right: 1.5rem;   /* right-6 */
  z-index: var(--udx-z-fab);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;     /* gap-2 */
}

/* hidden sm:flex items-center gap-2 bg-slate-900 text-white
   text-[11px] font-sans px-3.5 py-2 rounded-lg shadow-2xl
   border border-slate-800 animate-bounce */
.udx-fab__tip {
  display: none;
  align-items: center;
  gap: 0.5rem;      /* gap-2 */
  background-color: var(--udx-slate-900);
  color: #fff;
  font-family: var(--udx-font-sans);
  font-size: 11px;
  padding: 0.5rem 0.875rem;  /* py-2 px-3.5 */
  border-radius: var(--udx-r-md);  /* rounded-lg */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* shadow-2xl */
  border: 1px solid var(--udx-slate-800);
  animation: udx-bounce 2s ease-in-out infinite;
  white-space: nowrap;
}
.udx-fab__tip svg { color: var(--udx-indigo-400); flex-shrink: 0; }
@media (min-width: 640px) { .udx-fab__tip { display: flex; } } /* sm:flex */

/* w-13 h-13 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white
   shadow-xl hover:scale-105 active:scale-95 transition-all duration-300
   flex items-center justify-center cursor-pointer ring-4 ring-slate-900/10 */
.udx-fab__btn {
  width: 3.25rem;     /* w-13 = 13 * 0.25rem */
  height: 3.25rem;    /* h-13 */
  border-radius: 50%;
  background-color: var(--udx-indigo-600);
  color: #fff;
  box-shadow:
    0 20px 25px -5px rgba(0,0,0,0.1),
    0 8px 10px -6px rgba(0,0,0,0.1),  /* shadow-xl */
    0 0 0 4px rgba(15, 23, 42, 0.1);  /* ring-4 ring-slate-900/10 */
  transition: all var(--udx-t-slow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.udx-fab__btn:hover {
  background-color: #4338ca;  /* hover:bg-indigo-700 */
  transform: scale(1.05);
}
.udx-fab__btn:active { transform: scale(0.95); }

/* ─────────────────────────────────────────────────────────────────────────────
   14. FOOTER
   Source: src/components/Footer.tsx
   bg-slate-950 text-slate-400 py-12 px-4 sm:px-6 border-t border-slate-900
   ───────────────────────────────────────────────────────────────────────────── */
.udx-footer {
  background-color: var(--udx-slate-950);
  color: var(--udx-slate-400);
  padding-top: 3rem;      /* py-12 */
  padding-bottom: 3rem;
  padding-inline: 1rem;   /* px-4 */
  border-top: 1px solid var(--udx-slate-900);
}
@media (min-width: 640px) { .udx-footer { padding-inline: 1.5rem; } } /* sm:px-6 */

/* max-w-7xl mx-auto flex flex-col md:flex-row items-center
   justify-between gap-8 mb-8 pb-8 border-b border-slate-900 */
.udx-footer__top {
  max-width: var(--udx-container-width, 1280px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;             /* gap-8 */
  margin-bottom: 2rem;   /* mb-8 */
  padding-bottom: 2rem;  /* pb-8 */
  border-bottom: 1px solid var(--udx-slate-900);
}
@media (min-width: 768px) {
  .udx-footer__top { flex-direction: row; } /* md:flex-row */
}

/* Footer brand logo: w-9 h-9 rounded bg-indigo-600 font-serif font-bold text-xl shadow-md */
.udx-footer .udx-brand__logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 4px;   /* rounded */
  background: var(--udx-indigo-600);  /* flat, no gradient in footer */
}

/* flex flex-wrap items-center justify-center gap-6 text-xs font-semibold */
.udx-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;      /* gap-6 */
  font-size: 0.75rem;
  font-weight: 600;
}

/* hover:text-indigo-400 transition */
.udx-footer__nav-link {
  color: var(--udx-slate-400);
  transition: color var(--udx-t-base);
}
.udx-footer__nav-link:hover { color: var(--udx-indigo-400); }

/* max-w-7xl mx-auto flex flex-col sm:flex-row items-center
   justify-between text-xs text-slate-500 gap-4 */
.udx-footer__bottom {
  max-width: var(--udx-container-width, 1280px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--udx-slate-500);
  gap: 1rem;   /* gap-4 */
}
@media (min-width: 640px) {
  .udx-footer__bottom { flex-direction: row; } /* sm:flex-row */
}

/* hover:text-indigo-400 transition flex items-center gap-1.5 cursor-pointer text-xs */
.udx-footer__backtop {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--udx-slate-500);
  font-size: 0.75rem;
  transition: color var(--udx-t-base);
  cursor: pointer;
  background: none;
  border: none;
}
.udx-footer__backtop:hover { color: var(--udx-indigo-400); }

/* ─────────────────────────────────────────────────────────────────────────────
   15. 404 PAGE
   ───────────────────────────────────────────────────────────────────────────── */
.udx-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem;
}
.udx-404__wrap { max-width: 500px; margin-inline: auto; }
.udx-404__code {
  font-family: var(--udx-font-serif);
  font-size: clamp(5rem, 20vw, 8rem);
  font-weight: 800;
  color: var(--udx-indigo-950);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
}
.udx-404__title { font-size: 2rem; margin-bottom: 1rem; }
.udx-404__desc { color: var(--udx-slate-400); margin-bottom: 2rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   16. GENERIC PAGE / ARCHIVE / SEARCH / SINGLE
   ───────────────────────────────────────────────────────────────────────────── */
.udx-page-wrap {
  min-height: 60vh;
  padding-top: 7rem;  /* clear fixed navbar */
  padding-bottom: 4rem;
}
.udx-page-inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.udx-entry__title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 1.5rem;
}
.udx-entry__content {
  color: var(--udx-slate-300);
  line-height: 1.75;
  font-size: 1rem;
}
.udx-entry__content p { margin-bottom: 1rem; }
.udx-entry__content a { color: var(--udx-indigo-400); }
.udx-entry__content a:hover { color: var(--udx-indigo-300); }
.udx-entry__content strong { color: #fff; }

.udx-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.udx-card {
  background-color: var(--udx-slate-900);
  border: 1px solid var(--udx-slate-800);
  border-radius: var(--udx-r-lg);
  overflow: hidden;
  transition: border-color var(--udx-t-slow);
}
.udx-card:hover { border-color: rgba(99,102,241,0.5); }
.udx-card__body { padding: 1.5rem; }
.udx-card__title { font-size: 1.125rem; margin-bottom: 0.5rem; }
.udx-card__title a { color: #fff; }
.udx-card__title a:hover { color: var(--udx-indigo-400); }
.udx-card__meta { font-size: 0.75rem; color: var(--udx-slate-500); margin-bottom: 0.75rem; }
.udx-card__excerpt { font-size: 0.875rem; color: var(--udx-slate-400); line-height: 1.6; }

/* ─────────────────────────────────────────────────────────────────────────────
   17. RESPONSIVE — DESKTOP UNLOCK
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .udx-nav-links    { display: flex; }  /* hidden lg:flex */
  .udx-nav-actions  { display: flex; }  /* hidden lg:flex */
  .udx-nav-toggle   { display: none; }  /* lg:hidden */
  .udx-mobile-menu  { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. MOBILE OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .udx-vsl__unmute { font-size: 10px; padding: 0.375rem 0.75rem; }
  .udx-vsl__play-btn { width: 4rem; height: 4rem; }
  .udx-btn--cta  { font-size: 0.8125rem; padding: 1.125rem 1.25rem; }
  .udx-fab__btn  { width: 3rem; height: 3rem; }
}