/* ============================
   RETENTIONMASTER GLOBAL STYLESHEET (PROD)
   - Unified tokens + light/dark
   - Clean header + mobile nav panel
   - Theme toggle (stable SVG)
   - Sections, cards, timeline, FAQ, logo marquee
   - Scroll-animated arrow integration
   - Fixes: horizontal overflow, mobile menu layout, toggle placement
   Palette:
   #201E1F (ink)
   #FF4000 (hot accent)
   #FAAA8D (warm)
   #FEEFDD (cream bg)
   #50B2C0 (teal)
   ============================ */


/* ---------- TOKENS ---------- */
:root{
  /* palette */
  --ink: #201E1F;
  --hot: #FF4000;
  --warm: #FAAA8D;
  --cream: #FEEFDD;
  --teal: #50B2C0;

  /* theme */
  --bg: var(--cream);
  --text: var(--ink);
  --muted: rgba(32,30,31,.70);

  /* surfaces + borders */
  --card: rgba(255,255,255,.78);
  --card-strong: rgba(255,255,255,.92);
  --border: rgba(32,30,31,.12);
  --border-strong: rgba(32,30,31,.18);

  /* accents */
  --accent: var(--hot);
  --accent-2: var(--teal);
  --ring: rgba(255,64,0,.30);

  /* layout */
  --maxw: 1200px;
  --radius: 16px;
  --radius-md: 12px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 45px rgba(0,0,0,.18);

  /* glass */
  --glass-bg: rgba(254,239,221,.72); /* cream glass */
  --glass-stroke: rgba(32,30,31,.10);

  /* transitions */
  --transition-fast: 160ms ease;
  --transition-normal: 220ms ease;

  color-scheme: light;
}

/* DARK THEME */
:root[data-theme="dark"]{
  --bg: #0f0e10;                   /* deep ink */
  --text: rgba(254,239,221,.92);   /* cream text */
  --muted: rgba(254,239,221,.70);

  --card: rgba(255,255,255,.06);
  --card-strong: rgba(255,255,255,.08);

  --border: rgba(254,239,221,.12);
  --border-strong: rgba(254,239,221,.18);

  --glass-bg: rgba(15,14,16,.66);
  --glass-stroke: rgba(254,239,221,.12);

  --ring: rgba(80,178,192,.35);    /* teal ring on dark */

  color-scheme: dark;
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* screen reader helper */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- GLOBAL SAFETY: prevent horizontal scroll ---------- */
html, body{ overflow-x: clip; }
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.72rem 1.05rem;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background: var(--ink);
  color: var(--cream);
  font-weight:700;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.18); }

.btn-outline{
  background: transparent;
  color: var(--accent);
  border-color: rgba(255,64,0,.30);
}
:root[data-theme="dark"] .btn-outline{
  border-color: rgba(255,64,0,.36);
}

.btn-accent{
  background: var(--accent);
  color: #1a1414;
  border: 1px solid rgba(0,0,0,.06);
}
.btn-accent:hover{ box-shadow:0 18px 38px rgba(255,64,0,.22); }

.btn:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  padding: 14px 0 8px;
  background: transparent;
  border: 0;
  pointer-events: none;
  transition: padding var(--transition-normal), transform var(--transition-normal);
}

.site-header,
.site-header--glass{ max-width: 100%; }

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  pointer-events: auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-weight:900;
  letter-spacing:.2px;
}
.brand-logo{ width:46px; height:auto; }

.nav-shell{ position:relative; display:flex; align-items:center; }
.nav-links{
  display:flex;
  gap:1.0rem;
  align-items:center;
}
.nav-links a{ opacity:.84; font-size:.95rem; }
.nav-links a:hover{ opacity:1; }
.nav-links a.active{ font-weight:700; position:relative; }

/* burger */
.hamburger{
  display:none;
  border:0;
  background:transparent;
  padding:8px;
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:24px;height:2px;
  background: var(--text);
  margin:5px 0;
  border-radius:2px;
}
:root[data-theme="dark"] .hamburger span{ background: rgba(254,239,221,.86); }

/* ---------- HEADER v2 — Glass + rail + sheen ---------- */
.site-header--glass{
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.site-header--glass .nav{
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition:
    transform 260ms cubic-bezier(.22,.8,.18,1),
    box-shadow var(--transition-normal),
    background var(--transition-normal),
    border-color var(--transition-normal);
}
:root[data-theme="dark"] .site-header--glass .nav{
  background: rgba(15,14,16,.66);
  border-color: rgba(254,239,221,.12);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.site-header.is-scrolled{
  padding-top: 10px;
}
.site-header.is-scrolled .nav{
  background: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.68);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}
:root[data-theme="dark"] .site-header.is-scrolled .nav{
  background: rgba(15,14,16,.78);
  border-color: rgba(254,239,221,.16);
}
.site-header.is-scroll-pop .nav{
  animation: headerScrollPop 360ms cubic-bezier(.18,.9,.24,1) both;
}
@keyframes headerScrollPop{
  0%{ transform: translateY(-6px) scale(.985); }
  60%{ transform: translateY(1px) scale(1.006); }
  100%{ transform: translateY(0) scale(1); }
}

/* sheen (contained visually, but doesn't cause page width) */
.header-glass-sheen{
  position:absolute;
  left:50%;
  top:14px;
  width:min(1200px, calc(100% - 48px));
  height:64px;
  border-radius:999px;
  background:
    radial-gradient(60% 40% at 18% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(45% 35% at 82% 14%, rgba(80,178,192,.18), rgba(80,178,192,0) 60%),
    radial-gradient(45% 35% at 72% 82%, rgba(250,170,141,.20), rgba(250,170,141,0) 60%);
  filter: blur(12px);
  opacity: .55;
  pointer-events:none;
  animation: headerSheen 14s ease-in-out infinite;
  will-change: transform;
  transform: translate3d(-50%,0,0);
  z-index:-1;
}
@keyframes headerSheen{
  0%{ transform: translate3d(-51%, -1%, 0) rotate(-1deg); }
  50%{ transform: translate3d(-49%, 1%, 0) rotate(1deg); }
  100%{ transform: translate3d(-51%, -1%, 0) rotate(-1deg); }
}

/* rail */
.header-energy-rail{
  position:absolute;
  left:50%;
  bottom:8px;
  width:min(1120px, calc(100% - 80px));
  height:2px;
  transform:translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,64,0,.95), rgba(80,178,192,.95), transparent);
  opacity:.42;
  pointer-events:none;
  border-radius:999px;
}

.nav--energy{ position:relative; }
.nav-links--energy{ gap:.85rem; }

.nav-divider{
  width:1px;height:26px;
  background: linear-gradient(180deg, transparent, rgba(32,30,31,.22), transparent);
  margin: 0 .25rem;
}
:root[data-theme="dark"] .nav-divider{
  background: linear-gradient(180deg, transparent, rgba(254,239,221,.18), transparent);
}

/* CTAs in nav */
.nav-cta{ white-space:nowrap; }
.nav-cta--ghost{
  background: rgba(32,30,31,.92);
  border-color: rgba(254,239,221,.25);
  color: rgba(254,239,221,.92);
}
:root[data-theme="dark"] .nav-cta--ghost{
  background: rgba(255,255,255,.08);
  border-color: rgba(254,239,221,.14);
  color: rgba(254,239,221,.92);
}
.nav-cta--primary{
  box-shadow: 0 16px 40px rgba(255,64,0,.16);
}

/* Nav link pill */
.nav-link{
  position:relative;
  padding:.52rem .62rem;
  border-radius:999px;
  opacity:.92;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  isolation:isolate;
  outline:none;
}
.nav-link > span{ position:relative; z-index:2; }

.nav-link::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:999px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(32,30,31,.10);
  opacity: 0;
  transform: translateY(1px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index:0;
}
:root[data-theme="dark"] .nav-link::before{
  background: rgba(255,255,255,.06);
  border-color: rgba(254,239,221,.10);
}

.nav-link::after{
  content:"";
  position:absolute; inset:2px;
  border-radius:999px;
  background: linear-gradient(90deg,
    rgba(255,64,0,0) 0%,
    rgba(255,64,0,.18) 30%,
    rgba(80,178,192,.18) 65%,
    rgba(255,64,0,0) 100%);
  opacity: 0;
  transform: scaleX(.18);
  transform-origin: left;
  z-index:1;
}

.nav-link:hover,
.nav-link:focus-visible{
  opacity: 1;
  transform: translateY(-1px);
}
.nav-link:hover::before,
.nav-link:focus-visible::before{
  opacity:1;
  transform:translateY(0);
}
.nav-link:hover::after,
.nav-link:focus-visible::after{
  opacity:1;
  animation: energyImpulse 850ms ease-out both;
}

.nav-links .nav-link.active::before{
  opacity:1;
  background: rgba(255,255,255,.55);
  border-color: rgba(255,64,0,.22);
}
:root[data-theme="dark"] .nav-links .nav-link.active::before{
  background: rgba(255,255,255,.08);
  border-color: rgba(80,178,192,.26);
}
.nav-links .nav-link.active::after{
  opacity:1;
  animation: energyIdle 2.8s ease-in-out infinite;
}

@keyframes energyImpulse{
  0%   { transform: scaleX(.08); opacity:0; }
  15%  { opacity:.95; }
  60%  { transform: scaleX(1); opacity:.72; }
  100% { transform: scaleX(1); opacity:0; }
}
@keyframes energyIdle{
  0%   { transform: scaleX(.92); opacity:.18; }
  50%  { transform: scaleX(1); opacity:.34; }
  100% { transform: scaleX(.92); opacity:.18; }
}

/* Zap (optional JS adds .is-zap) */
.nav-link.is-zap{ animation: zapJolt 420ms ease-out both; }
.nav-link.is-zap::after{ opacity:1; animation: energyZap 520ms ease-out both; }
.nav-link.is-zap::before{
  opacity:1;
  border-color: rgba(250,170,141,.45);
  box-shadow:
    0 0 0 3px rgba(255,64,0,.10),
    0 14px 30px rgba(255,64,0,.10);
}
@keyframes zapJolt{
  0%{ transform: translateY(-1px) scale(1); }
  35%{ transform: translateY(-2px) scale(1.02); }
  100%{ transform: translateY(-1px) scale(1); }
}
@keyframes energyZap{
  0%{
    transform: scaleX(.05);
    opacity: 0;
    background: linear-gradient(90deg, rgba(255,64,0,0) 0%, rgba(255,64,0,.40) 40%, rgba(80,178,192,.42) 70%, rgba(80,178,192,0) 100%);
  }
  20%{ opacity: 1; }
  55%{
    transform: scaleX(1);
    opacity: .92;
    background: linear-gradient(90deg, rgba(255,64,0,0) 0%, rgba(80,178,192,.55) 40%, rgba(255,64,0,.55) 70%, rgba(255,64,0,0) 100%);
  }
  100%{ opacity: 0; transform: scaleX(1); }
}

/* ---------- THEME TOGGLE (stable, no overlap flash) ---------- */
.theme-toggle{
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-md);
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  margin-left: .6rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.theme-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.theme-toggle:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.theme-toggle .theme-icon{
  position:absolute;
  width:20px;height:20px;
  color: var(--text);
  transform-origin: 50% 50%;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform: rotate(-120deg) scale(.75);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal),
    visibility 0s linear var(--transition-normal);

  /* SVG stability */
  shape-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
  transform: translateZ(0);
}
.theme-toggle svg{ overflow: visible; }

/* Light: show sun */
:root:not([data-theme="dark"]) .theme-toggle .theme-icon.sun{
  opacity:1;
  visibility:visible;
  transform: rotate(0deg) scale(1);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal),
    visibility 0s linear 0s;
}
/* Dark: show moon */
:root[data-theme="dark"] .theme-toggle .theme-icon.moon{
  opacity:1;
  visibility:visible;
  transform: rotate(0deg) scale(1);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal),
    visibility 0s linear 0s;
}
:root[data-theme="dark"] .theme-toggle .theme-icon.sun{
  opacity:0;
  visibility:hidden;
  transform: rotate(120deg) scale(.75);
}
:root:not([data-theme="dark"]) .theme-toggle .theme-icon.moon{
  opacity:0;
  visibility:hidden;
  transform: rotate(120deg) scale(.75);
}

/* ---------- INTRO OVERLAY VIDEO (optional) ---------- */
#intro{
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  transition: opacity 1.2s ease;
}
#intro video{ width:100%; height:100%; object-fit:cover; }
#intro.fade-out{ opacity:0; pointer-events:none; }

/* ---------- SECTIONS / COMMON ---------- */
section.section{ padding:64px 0; }
.section-heading{ font-size:1.85rem; margin:0 0 .4rem; letter-spacing:.1px; }
.section-sub{ margin:0 0 1.8rem; color:var(--muted); max-width:60ch; }

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition: opacity .9s ease-out, transform .9s ease-out;
}
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ---------- HERO (legacy helper; page may override) ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background: radial-gradient(900px 520px at 20% 15%, rgba(80,178,192,.16), rgba(0,0,0,0) 60%),
              radial-gradient(800px 520px at 80% 20%, rgba(250,170,141,.18), rgba(0,0,0,0) 62%),
              linear-gradient(180deg, rgba(254,239,221,.85), rgba(254,239,221,1));
  color: var(--text);
  padding:72px 0 80px;
}
.hero .container{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
}
.hero-title{
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.05;
  margin:0 0 12px 0;
  font-weight:900;
}
.hero-title .accent{ color:var(--accent); }
.hero-sub{
  color:var(--muted);
  font-size:clamp(1rem,2.2vw,1.1rem);
  max-width:54ch;
  margin-bottom:20px;
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:18px;
  font-size:.85rem;
  color: rgba(32,30,31,.62);
}
:root[data-theme="dark"] .hero-meta{ color: rgba(254,239,221,.62); }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.hero-card{
  position:relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:24px;
  isolation:isolate;
}
:root[data-theme="dark"] .hero-card{
  background: rgba(255,255,255,.06);
  border-color: var(--border);
}
.mock{
  position:relative;
  aspect-ratio:16/10;
  border-radius:14px;
  border:1px solid rgba(255,64,0,.18);
  box-shadow:0 10px 35px rgba(255,64,0,.12);
  overflow:hidden;
  background: rgba(255,255,255,.25);
}
:root[data-theme="dark"] .mock{ background: rgba(255,255,255,.03); }
.mock img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.phone-glow{
  position:absolute; bottom:-30px; left:50%;
  transform:translateX(-50%);
  width:60%; height:90px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.40), rgba(255,255,255,0) 65%);
  filter: blur(12px);
  pointer-events:none;
}

/* ---------- PILL ROW ---------- */
.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 20px;
  font-size:.85rem;
  color: rgba(32,30,31,.74);
}
.pill{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.65);
}
:root[data-theme="dark"] .pill-row{ color: rgba(2, 6, 23, .92); }
:root[data-theme="dark"] .pill{
  background: rgba(255,255,255,.6);
  border-color: var(--border);
}

/* ---------- CUSTOMERS / FLIP CARDS ---------- */
.customers-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(5,1fr);
}
.flip{ position:relative; perspective:1000px; cursor:pointer; }
.flip:focus-visible .front{ outline:3px solid var(--ring); outline-offset:4px; }

.flip-card{
  position:relative;
  height:200px;
  border-radius:var(--radius);
  transform-style:preserve-3d;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.front,.back{
  position:absolute; inset:0;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  backface-visibility:hidden;
}
.front{ background: rgba(255,255,255,.70); }
.back{
  background: rgba(32,30,31,.92);
  color: rgba(254,239,221,.92);
  border-color: rgba(80,178,192,.24);
  transform:rotateY(180deg);
}

/* Only apply hover flip on real hover devices */
@media (hover: hover) and (pointer: fine){
  .flip:hover .flip-card{
    transform: rotateY(180deg) scale(1.02);
    box-shadow:0 14px 40px rgba(0,0,0,.18);
  }
}
/* Touch devices: rely on .is-flipped only */
@media (hover: none) and (pointer: coarse){
  .flip:hover .flip-card{ transform: none; box-shadow: none; }
}

.flip.is-flipped .flip-card{
  transform: rotateY(180deg) scale(1.02);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}

.back ul{ margin:0; padding-left:18px; text-align:left; }
.back li{ margin:.25rem 0; }

.muted{ color:var(--muted); font-weight:500; font-size:.92rem; }

:root[data-theme="dark"] .front{
  background: rgba(255,255,255,.06);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .back{
  border-color: rgba(80,178,192,.26);
}

/* ---------- FEATURES ---------- */
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.feature{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  background: rgba(255,255,255,.70);
}
.feature h3{ margin:0 0 6px 0; font-size:1.05rem; }
.feature p{ margin:0; color:var(--muted); font-size:.95rem; }

:root[data-theme="dark"] .feature{
  background: rgba(255,255,255,.06);
  border-color: var(--border);
}

/* ---------- PLATFORM LAYOUT ---------- */
.platform-layout{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:32px;
  align-items:start;
}
.code-block{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:.85rem;
  background:#0c0b0d;
  color: rgba(254,239,221,.92);
  border-radius:var(--radius);
  padding:14px 16px;
  border:1px solid rgba(254,239,221,.10);
  overflow-x:auto;
  box-shadow:0 16px 45px rgba(0,0,0,.30);
}

/* ---------- USE CASES ---------- */
.usecase-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.usecase{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(255,255,255,.78);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
}
.usecase img{ aspect-ratio:4/3; object-fit:cover; }
.usecase-body{ padding:16px; }
.usecase-body h3{ margin:0 0 4px; font-size:1.05rem; }
.usecase-body p{ margin:0 0 10px; color:var(--muted); font-size:.93rem; }
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; font-size:.8rem; color: rgba(32,30,31,.70); }
.tag{ padding:3px 8px; border-radius:999px; background: rgba(32,30,31,.06); }

:root[data-theme="dark"] .usecase{
  background: rgba(255,255,255,.04);
  border-color: var(--border);
}
:root[data-theme="dark"] .tag{
  background: rgba(255,255,255,.06);
  color: rgba(254,239,221,.82);
}
:root[data-theme="dark"] .tag-row{ color: rgba(254,239,221,.70); }

/* ---------- ARCHITECTURE STRIP ---------- */
.arch{
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(80,178,192,.14), rgba(255,255,255,.65) 60%),
    rgba(255,255,255,.70);
}
.arch-rows{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:16px;
}
.arch-col h3{ margin:0 0 6px; font-size:1rem; }
.arch-col ul{ margin:0; padding-left:18px; font-size:.9rem; color: rgba(32,30,31,.78); }
.arch-col li{ margin:4px 0; }

:root[data-theme="dark"] .arch{
  background:
    radial-gradient(circle at 0% 0%, rgba(80,178,192,.16), rgba(255,255,255,.03) 65%),
    rgba(255,255,255,.03);
  border-color: var(--border);
}
:root[data-theme="dark"] .arch-col ul{ color: rgba(254,239,221,.78); }

/* ---------- CASE / TIMELINE ---------- */
.case-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:start;
}
.timeline{
  border-left:2px solid rgba(32,30,31,.14);
  padding-left:16px;
  margin-left:4px;
}
:root[data-theme="dark"] .timeline{ border-left-color: var(--border); }

.timeline-item{ margin-bottom:16px; position:relative; }
.timeline-item::before{
  content:"";
  position:absolute;
  left:-22px; top:3px;
  width:10px;height:10px;
  border-radius:999px;
  background: var(--accent);
  box-shadow:0 0 0 3px rgba(255,64,0,.18);
}
.timeline-item h3{ margin:0 0 4px; font-size:.96rem; }
.timeline-item p{ margin:0; font-size:.9rem; color: var(--muted); }

.stat-card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:16px;
  background: rgba(255,255,255,.70);
  margin-bottom:10px;
}
:root[data-theme="dark"] .stat-card{
  background: rgba(255,255,255,.05);
  border-color: var(--border);
}

.stat-label{
  font-size:.8rem;
  color: rgba(32,30,31,.60);
  text-transform:uppercase;
  letter-spacing:.06em;
}
:root[data-theme="dark"] .stat-label{ color: rgba(254,239,221,.60); }

.stat-value{ font-size:1.3rem; font-weight:900; margin-top:3px; }
.stat-note{ font-size:.85rem; color: var(--muted); margin-top:4px; }

/* ---------- INTEGRATION HELPERS ---------- */
.integration-grid{ 
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:start;
}

.integration-timeline{
  border-left:2px solid rgba(32,30,31,.14);
  padding-left:16px;
  margin-left:4px;
}
:root[data-theme="dark"] .integration-timeline{ border-left-color: var(--border); }

.integration-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.integration-chip{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.65);
  font-size:.8rem;
  color: rgba(32,30,31,.74);
}
:root[data-theme="dark"] .integration-chip{
  background: rgba(255,255,255,.06);
  border-color: var(--border);
  color: rgba(254,239,221,.82);
}

.integration-card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:16px;
  background: rgba(255,255,255,.70);
  margin-bottom:10px;
}
:root[data-theme="dark"] .integration-card{
  background: rgba(255,255,255,.05);
  border-color: var(--border);
}

.integration-cta{
  border-radius:var(--radius);
  border:1px dashed rgba(32,30,31,.26);
  padding:16px;
  background: rgba(255,255,255,.60);
  margin-top:10px;
}
:root[data-theme="dark"] .integration-cta{
  background: rgba(255,255,255,.04);
  border-color: rgba(254,239,221,.18);
}

.integration-cta__title{
  font-weight:700;
  margin-bottom:4px;
}

.integration-cta__sub{
  font-size:.9rem;
  color: var(--muted);
  margin-bottom:12px;
}

/* ---------- FAQ ---------- */
.faq-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:26px;
}
.faq-item{ border-bottom:1px solid var(--border); padding:10px 0; }
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item p{ margin:6px 0 0; font-size:.94rem; color: var(--muted); }

.faq-kicker{
  font-size:.9rem;
  color: var(--muted);
  max-width:36ch;
  border-radius:var(--radius);
  border:1px dashed rgba(32,30,31,.26);
  padding:12px;
  background: rgba(255,255,255,.60);
}
:root[data-theme="dark"] .faq-kicker{
  background: rgba(255,255,255,.04);
  border-color: rgba(254,239,221,.18);
  color: rgba(254,239,221,.72);
}

/* ---------- SIMPLE METRICS / SERVICES HELPERS ---------- */
.metric{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.78);
  padding:16px;
}
.metric-label{ font-size:.8rem; color: rgba(32,30,31,.62); text-transform:uppercase; letter-spacing:.08em; }
.metric-value{ font-size:1.3rem; font-weight:900; margin:4px 0; }
.metric-note{ font-size:.9rem; color: var(--muted); }

:root[data-theme="dark"] .metric{
  background: rgba(255,255,255,.04);
  border-color: var(--border);
}
:root[data-theme="dark"] .metric-label{ color: rgba(254,239,221,.60); }

.service-section{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.78);
  padding:20px;
  margin-bottom:18px;
}
.service-section h3{ margin:0 0 6px; font-size:1.2rem; }
.service-section p{ margin:0 0 8px; color: var(--muted); }
.service-section ul{ margin:0; padding-left:18px; color: var(--muted); font-size:.93rem; }
.service-label{
  font-size:.8rem;
  color: rgba(32,30,31,.62);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
:root[data-theme="dark"] .service-section{
  background: rgba(255,255,255,.04);
  border-color: var(--border);
}
:root[data-theme="dark"] .service-label{ color: rgba(254,239,221,.60); }

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--border);
  padding:28px 0;
  color: rgba(32,30,31,.70);
  margin-top:32px;
}
:root[data-theme="dark"] footer{
  border-top-color: var(--border);
  color: rgba(254,239,221,.70);
}

.foot{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.foot-links{ display:flex; gap:14px; font-size:.9rem; }

/* ---------- CustomerLogoSection — 2-row marquee ---------- */
.CustomerLogoSection{
  padding:24px 0 10px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.CustomerLogoSection__container{
  max-width: 100%;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  gap:12px;
}

.CustomerLogoCarousel{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(32,30,31,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:root[data-theme="dark"] .CustomerLogoCarousel{
  background: rgba(255,255,255,.06);
  border-color: rgba(254,239,221,.12);
}

/* edge fades */
.CustomerLogoCarousel::before,
.CustomerLogoCarousel::after{
  content:"";
  position:absolute; top:0; bottom:0; width:90px;
  pointer-events:none;
  z-index:2;
}
:root:not([data-theme="dark"]) .CustomerLogoCarousel::before{
  left:0;
  background: linear-gradient(90deg, rgba(254,239,221,1), rgba(254,239,221,0));
}
:root:not([data-theme="dark"]) .CustomerLogoCarousel::after{
  right:0;
  background: linear-gradient(270deg, rgba(254,239,221,1), rgba(254,239,221,0));
}
:root[data-theme="dark"] .CustomerLogoCarousel::before{
  left:0;
  background: linear-gradient(90deg, rgba(15,14,16,1), rgba(15,14,16,0));
}
:root[data-theme="dark"] .CustomerLogoCarousel::after{
  right:0;
  background: linear-gradient(270deg, rgba(15,14,16,1), rgba(15,14,16,0));
}

.CustomerLogoCarousel__track{
  display:flex;
  align-items:center;
  gap:34px;
  padding:12px 18px;
  width:max-content;
  animation: logoMarquee 22s linear infinite;
  will-change: transform;
}
.CustomerLogoCarousel--row2 .CustomerLogoCarousel__track{
  animation-duration:30s;
  animation-direction:reverse;
}

.CustomerLogoCarousel__logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:200px;
  height:80px;
  min-width:160px;
  opacity:.86;
  transition: opacity .25s ease, transform .25s ease;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.10));
  background: rgba(255,255,255,.88);
  border-radius: 22px;
  border: 1px solid rgba(32,30,31,.10);
}
:root[data-theme="dark"] .CustomerLogoCarousel__logo{
  background: rgba(255,255,255,.08);
  border-color: rgba(254,239,221,.12);
}

.CustomerLogoCarousel__logo img{
  height:26px;
  width:auto;
  max-width:170px;
  opacity:.92;
  filter: grayscale(1) brightness(1.25);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.CustomerLogoCarousel__logo:hover{
  opacity:1;
  transform: translateY(-1px);
}
.CustomerLogoCarousel__logo:hover img{
  transform: translateY(-1px) scale(1.02);
  opacity:1;
  filter: grayscale(0) brightness(1.05);
}

@keyframes logoMarquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .header-glass-sheen,
  .site-header.is-scroll-pop .nav,
  .nav-link::after,
  .nav-link.is-zap,
  .nav-links .nav-link.active::after,
  .CustomerLogoCarousel__track{
    animation:none !important;
  }
  .reveal{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  .btn, .theme-toggle, .theme-toggle .theme-icon{
    transition:none !important;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .hero{ padding:60px 0 64px; }
  .hero .container{ grid-template-columns:1fr; gap:32px; }
  .hero-card{ order:-1; }

  .customers-grid{ grid-template-columns:repeat(2,1fr); }
  .features-grid{ grid-template-columns:1fr; }
  .platform-layout{ grid-template-columns:1fr; }
  .usecase-grid{ grid-template-columns:repeat(2,1fr); }
  .arch-rows{ grid-template-columns:repeat(2,1fr); }
  .case-grid{ grid-template-columns:1fr; }
  .integration-grid{ grid-template-columns:1fr; }
  .faq-grid{ grid-template-columns:1fr; }

  .nav-links{
    display:none;
    position:absolute;
    inset:64px 0 auto 0;
    background: rgba(254,239,221,.94);
    border-bottom:1px solid rgba(32,30,31,.12);
    padding:10px 24px 16px;
    flex-direction:column;
    gap:10px;
  }
  :root[data-theme="dark"] .nav-links{
    background: rgba(15,14,16,.92);
    border-bottom-color: var(--border);
  }

  .nav-links.open{ display:flex; }
  .hamburger{ display:block; }
  .nav-divider{ display:none; }
}

@media (max-width: 640px){
  .customers-grid{ grid-template-columns:1fr; }
  .usecase-grid{ grid-template-columns:1fr; }
  .arch-rows{ grid-template-columns:1fr; }
}

/* ---------- MOBILE MENU PANEL POLISH (fix broken full-width dropdown) ---------- */
.nav-shell{ position: relative; }

@media (max-width: 980px){
  .nav-links{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 32px));
    margin: 12px auto 0;
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(0,0,0,.18);
    border: 1px solid rgba(32,30,31,.12);
  }
  :root[data-theme="dark"] .nav-links{
    border-color: rgba(254,239,221,.12);
  }

  .nav-links.open{ max-width: calc(100vw - 32px); }

  .nav-links a,
  .nav-links button{
    width: 100%;
    justify-content: center;
  }
  .nav-cta{
    width: 100%;
    justify-content: center;
  }
  .nav-divider{ display:none !important; }
}

/* ---------- Theme toggle OUT of burger on mobile ---------- */
.nav-mobile-controls{
  display:none;
  align-items:center;
  gap:10px;
}
@media (max-width: 980px){
  .nav-mobile-controls{ display:flex; }

  /* Hide the toggle inside the dropdown (keep markup, hide it) */
  #nav-links .theme-toggle{ display:none !important; }

  #menu-btn.hamburger{ margin-left: 0; }

  .nav-shell{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
  }
  .nav-mobile-controls{ margin-left:auto; }
}

/* ---------- Dark theme form fields ---------- */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea{
  background: rgba(255,255,255,.06) !important;
  color: rgba(254,239,221,.92) !important;
  border-color: rgba(254,239,221,.14) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{
  color: rgba(254,239,221,.55) !important;
}



.rm-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px){
  .rm-form-grid{ grid-template-columns: 1fr; }
}

.rm-field{ display:flex; flex-direction:column; gap:4px; }
.rm-field--full{ margin-top: 8px; }

.rm-field__label{
  font-weight: 800;
  font-size: .92rem;
}
.rm-field__opt{
  font-weight: 600;
  color: var(--muted);
  font-size: .9em;
}
.rm-field__hint{
  font-size: .82rem;
  color: var(--muted);
}

.rm-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
  padding: 12px 12px;
  font: inherit;
  outline: none;
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}
:root[data-theme="dark"] .rm-input{
  background: rgba(255,255,255,.06);
  border-color: rgba(254,239,221,.14);
  color: rgba(254,239,221,.92);
}

.rm-input:focus{
  border-color: rgba(255,64,0,.36);
  box-shadow: 0 0 0 4px rgba(255,64,0,.14);
}
:root[data-theme="dark"] .rm-input:focus{
  border-color: rgba(80,178,192,.36);
  box-shadow: 0 0 0 4px rgba(80,178,192,.14);
}

.rm-textarea{ resize: vertical; min-height: 84px; }

.rm-fieldset{
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
}
:root[data-theme="dark"] .rm-fieldset{
  background: rgba(255,255,255,.04);
  border-color: rgba(254,239,221,.12);
}

.rm-fieldset__legend{
  font-weight: 900;
  padding: 0 6px;
}

.rm-radio-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 900px){
  .rm-radio-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .rm-radio-grid{ grid-template-columns: 1fr; }
}

.rm-radio{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  cursor:pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.rm-radio:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
:root[data-theme="dark"] .rm-radio{
  background: rgba(255,255,255,.04);
  border-color: rgba(254,239,221,.12);
}

.rm-radio input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.rm-radio__dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(32,30,31,.28);
  background: transparent;
  box-shadow: inset 0 0 0 0 rgba(255,64,0,.0);
}
:root[data-theme="dark"] .rm-radio__dot{
  border-color: rgba(254,239,221,.26);
}

.rm-radio input:checked + .rm-radio__dot{
  border-color: rgba(255,64,0,.70);
  box-shadow: inset 0 0 0 4px rgba(255,64,0,.80);
}
:root[data-theme="dark"] .rm-radio input:checked + .rm-radio__dot{
  border-color: rgba(80,178,192,.70);
  box-shadow: inset 0 0 0 4px rgba(80,178,192,.85);
}

.rm-radio__text{
  font-weight: 750;
}


.rm-form-error{
  margin-top: 4px;
  font-size: .9rem;
  color: rgba(255,64,0,.88);
  min-height: 1.1em;
}

/* Success overlay */
.rm-success{
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 10px;
  min-height: 300px;
  background: transparent;
  text-align:center;
  padding: 12px 8px 0;
}
:root[data-theme="dark"] .rm-success{
  background: transparent;
}
.rm-success.is-on{ display:flex; }
.rm-success[hidden]{ display:none !important; }

.rm-success__ring{
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,64,0,.20), rgba(255,64,0,0) 62%),
    radial-gradient(circle at 70% 30%, rgba(80,178,192,.22), rgba(80,178,192,0) 62%),
    rgba(255,255,255,.60);
  border: 1px solid var(--border);
  box-shadow: 0 22px 55px rgba(0,0,0,.16);
  position: relative;
}

.rm-success__check{
  width: 64px;
  height: 64px;
  margin-top: -80px;
}
.rm-success__check path{
  stroke: rgba(80,178,192,.95);
  stroke-width: 5.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  filter: drop-shadow(0 10px 22px rgba(80,178,192,.18));
}

.rm-success__title{
  font-weight: 950;
  font-size: 1.2rem;
}
.rm-success__sub{
  color: var(--muted);
  max-width: 56ch;
}

.rm-success__actions{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}

/* tick animation */
.rm-success.is-on .rm-success__check path{
  animation: rmTick 520ms ease-out 120ms forwards;
}
@keyframes rmTick{
  to { stroke-dashoffset: 0; }
}


/* Body lock when modal open (class toggled in JS) */
body.rm-scroll-lock{
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
}

/* iOS Safari helper: lock with fixed position (set via JS) */
body.rm-scroll-lock{
  position: fixed;
  width: 100%;
}


/* =========================
   Mobile nav dropdown: centered + animated
   ========================= */

@media (max-width: 980px){
  /* Make nav-shell a stable anchor */
  .nav-shell{ position: relative; }

  /* Center panel in viewport instead of relative offsets */
  #nav-links.nav-links{
    position: fixed !important;
    left: 50% !important;
    top: 92px !important;               /* below sticky pill header */
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-8px) scale(.985);
    width: min(520px, calc(100vw - 28px));
    max-height: calc(100vh - 108px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(0,0,0,.22);
    border: 1px solid rgba(32,30,31,.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity 220ms ease,
      transform 220ms cubic-bezier(.22,.8,.18,1),
      visibility 0s linear 220ms;
  }

  :root[data-theme="dark"] #nav-links.nav-links{
    border-color: rgba(254,239,221,.12);
  }

  /* Open state animation */
  #nav-links.nav-links.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    transition:
      opacity 220ms ease,
      transform 220ms cubic-bezier(.22,.8,.18,1),
      visibility 0s linear 0s;
  }

  /* Ensure it doesn't create horizontal overflow */
  #nav-links.nav-links,
  #nav-links.nav-links *{
    max-width: 100%;
  }
}


.rm-input, .rm-textarea{ max-width: 100%; }


/* =========================================================
   CONTACT MODAL — PROD OVERRIDES (single source of truth)
   Put this at the VERY END of style.css
   ========================================================= */

.rm-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  /* Don’t block scrolling inside the dialog on touch devices */
  touch-action: manipulation;
}

.rm-modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;

  /* Use padding instead of dialog margin-top to avoid phantom scroll */
  padding:
    max(16px, env(safe-area-inset-top))
    14px
    max(16px, env(safe-area-inset-bottom));

  overscroll-behavior: contain;
}

.rm-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(32,30,31,.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: none; /* backdrop itself shouldn’t scroll */
}

/* Make the dialog the ONE scroll container */
.rm-modal__dialog{
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(700px, 100%);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: 0;                 /* kill old margin-top behavior */
  border-radius: 18px;
  background: var(--card-strong);
  border: 1px solid var(--border);
  box-shadow: 0 30px 90px rgba(0,0,0,.25);

  overflow: hidden;
  -webkit-overflow-scrolling: touch;

  overscroll-behavior: contain;
  touch-action: pan-y;       /* allow vertical scroll inside dialog */
}

.rm-modal__dialog.is-calendly{
  width:min(1040px, 100%);
  border-radius:24px;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(20,184,166,.18), transparent 62%),
    radial-gradient(760px 360px at 86% 10%, rgba(255,201,77,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
}

:root[data-theme="dark"] .rm-modal__dialog{
  background: rgba(15,14,16,.88);
  border-color: rgba(254,239,221,.12);
  box-shadow: 0 36px 100px rgba(0,0,0,.45);
}

:root[data-theme="dark"] .rm-modal__dialog.is-calendly{
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(20,184,166,.18), transparent 62%),
    radial-gradient(760px 360px at 86% 10%, rgba(255,201,77,.11), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,14,16,.92));
}

.rm-modal__dialog::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background:
    radial-gradient(60% 40% at 22% 18%, rgba(255,64,0,.18), rgba(255,64,0,0) 62%),
    radial-gradient(45% 35% at 82% 16%, rgba(80,178,192,.18), rgba(80,178,192,0) 62%),
    radial-gradient(45% 35% at 70% 82%, rgba(250,170,141,.20), rgba(250,170,141,0) 62%);
  filter: blur(14px);
  opacity: .95;
  pointer-events:none;
}

/* Close button: sticky inside the scroll container */
.rm-modal__close{
  position: absolute !important;
  top: 14px;
  right: 14px;
  z-index: 5;
  margin: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* avoids tap delay & improves mobile */
  touch-action: manipulation;
}
.rm-modal__close span{
  font-size: 0;
}
.rm-modal__close span::before{
  content: "\00d7";
  font-size: 22px;
  line-height: 1;
}

.rm-modal__close:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

:root[data-theme="dark"] .rm-modal__close{
  background: rgba(255,255,255,.06);
  border-color: rgba(254,239,221,.12);
  color: rgba(254,239,221,.92);
}

/* Header/form spacing: keep content from hiding behind sticky close */
.rm-modal__head{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 22px 22px 8px;
  padding-right: 64px; /* room so title never sits under close */
}

.rm-modal__body{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 22px 22px;
  -webkit-overflow-scrolling: touch;
}
.rm-modal__body.is-success{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.rm-modal__form{
  position: relative;
  z-index: 1;
  padding: 0;
}

.rm-calendly-panel{
  position:relative;
  width:100%;
  padding:0 0 8px;
}

.rm-calendly-panel[hidden]{
  display:none !important;
}

.rm-calendly-panel__hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:0 0 14px;
  padding:14px 16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:
    radial-gradient(380px 160px at 12% 0%, rgba(20,184,166,.14), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.44));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74);
}

.rm-calendly-panel__kicker{
  color:#0f766e;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:5px;
}

.rm-calendly-panel__title{
  margin:0;
  color:#06111f;
  font-size:clamp(22px, 3vw, 34px);
  line-height:1.05;
  font-weight:950;
  letter-spacing:0;
}

.rm-calendly-panel__pill{
  flex:0 0 auto;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 13px;
  border-radius:999px;
  background:#ecfdf5;
  border:1px solid rgba(20,184,166,.22);
  color:#047857;
  font-weight:900;
  font-size:13px;
}

.rm-calendly-loading{
  position:absolute;
  inset:92px 0 8px;
  z-index:2;
  display:none;
  align-items:center;
  justify-content:center;
  gap:14px;
  border-radius:18px;
  background:
    radial-gradient(420px 220px at 45% 38%, rgba(20,184,166,.18), transparent 70%),
    linear-gradient(180deg, rgba(248,250,252,.92), rgba(255,255,255,.94));
  border:1px solid rgba(15,23,42,.08);
  color:#06111f;
  text-align:left;
}

.rm-calendly-panel.is-loading .rm-calendly-loading{
  display:flex;
}

.rm-calendly-loading__mark{
  width:54px;
  height:54px;
  border-radius:999px;
  border:4px solid rgba(20,184,166,.18);
  border-top-color:#14b8a6;
  box-shadow:0 16px 34px rgba(20,184,166,.18);
  animation:rmCalendlySpin .9s linear infinite;
}

.rm-calendly-loading__title{
  font-size:18px;
  font-weight:950;
  margin-bottom:3px;
}

.rm-calendly-loading__sub{
  color:rgba(15,23,42,.68);
  font-size:14px;
}

.rm-calendly-panel .calendly-inline-widget{
  width:100%;
  min-width:320px;
  height:min(760px, calc(100dvh - 210px));
  min-height:620px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 18px 50px rgba(15,23,42,.10);
}

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

@media (max-width:720px){
  .rm-calendly-panel__hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .rm-calendly-loading{
    inset:128px 0 8px;
    padding:24px;
    text-align:center;
    flex-direction:column;
  }

  .rm-calendly-panel .calendly-inline-widget{
    height:720px;
    min-height:620px;
  }
}

/* Sticky action bar should stick to bottom of the dialog */
.rm-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding-top: 4px;
  margin-top: 8px;
  background: transparent;
  border-top: 0;
}

:root[data-theme="dark"] .rm-modal__actions{
  background: transparent;
  border-top-color: transparent;
}

/* Success overlay should cover the dialog content cleanly */
.rm-success{
  width: 100%;
  min-height: 280px;
}

@media (max-width: 720px){
  .rm-modal.is-open{
    align-items: flex-start;
  }
  .rm-modal__dialog{
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .rm-modal__body{
    padding: 0 18px 18px;
  }
}

/* Body scroll lock: iOS-safe */
body.rm-scroll-lock{
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}
html, body{
  max-width: 100%;
}



/* =========================
   TESTIMONIALS — SLICK ROTATOR
   ========================= */

.rm-tm-rotator{
  position: relative;
  max-width: 920px;
  margin: 18px auto 0;
  padding: 34px 20px 18px;
  border-radius: 26px;

  /* minimal “container” — no boxy border */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.58),
    rgba(255,255,255,.40)
  );
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  box-shadow:
    0 28px 90px rgba(2,6,23,.10),
    inset 0 1px 0 rgba(255,255,255,.55);

  overflow: hidden;
}

:root[data-theme="dark"] .rm-tm-rotator{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03)
  );
  box-shadow:
    0 34px 110px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* soft glow blobs */
.rm-tm-rotator__bg{
  position:absolute;
  inset:-40% -30%;
  pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 22%, rgba(255,64,0,.16), rgba(255,64,0,0) 60%),
    radial-gradient(55% 40% at 82% 18%, rgba(80,178,192,.18), rgba(80,178,192,0) 62%),
    radial-gradient(50% 45% at 55% 85%, rgba(250,170,141,.14), rgba(250,170,141,0) 60%);
  filter: blur(18px);
  opacity: .95;
  transform: translateZ(0);
}

.rm-tm-rotator__mark{
  position:absolute;
  left: 20px;
  top: 10px;
  font-size: 64px;
  line-height: 1;
  font-weight: 900;
  color: rgba(255,64,0,.18);
  user-select:none;
  pointer-events:none;
}
:root[data-theme="dark"] .rm-tm-rotator__mark{
  color: rgba(80,178,192,.18);
}

/* viewport */
.rm-tm-rotator__viewport{
  position: relative;
  min-height: 210px;
}

/* slide animation: float + fade (non-boxy) */
.rm-tm-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translate3d(10px, 10px, 0) scale(.985);
  transition:
    opacity 520ms cubic-bezier(.22,.8,.18,1),
    transform 680ms cubic-bezier(.22,.8,.18,1);
  will-change: opacity, transform;
  pointer-events:none;
}

.rm-tm-slide.is-active{
  opacity:1;
  transform: translate3d(0,0,0) scale(1);
  pointer-events:auto;
}

.rm-tm-slide.from-left{ opacity:0; transform: translate3d(-28px, 6px, 0) scale(.99); }
.rm-tm-slide.from-right{ opacity:0; transform: translate3d(28px, 6px, 0) scale(.99); }
.rm-tm-slide.to-left{ opacity:0; transform: translate3d(-26px, -4px, 0) scale(.99); }
.rm-tm-slide.to-right{ opacity:0; transform: translate3d(26px, -4px, 0) scale(.99); }

.rm-tm-slide__quote{
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 72ch;
  text-align: center;
  font-size: 1.12rem;
  line-height: 1.8;
  color: rgba(2,6,23,.82);
  padding: 14px 12px 10px;
}
:root[data-theme="dark"] .rm-tm-slide__quote{
  color: rgba(255,255,255,.78);
}

/* identity row */
.rm-tm-slide__who{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin-top: 12px;
  padding-bottom: 6px;
}

.rm-tm-slide__logo{
  width: 140px;
  height: 100px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;

  /* subtle, not boxy */
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  color: rgba(2,6,23,.75);
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .08em;
}

:root[data-theme="dark"] .rm-tm-slide__logo{
  background: rgba(255,255,255,.06);
  border-color: rgba(254,239,221,.10);
  box-shadow: 0 16px 45px rgba(0,0,0,.22);
  color: rgba(254,239,221,.78);
}

.rm-tm-slide__logo img{
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.15);
  opacity: .95;
}

.rm-tm-slide__id{
  text-align:left;
  min-width: 0;
}

.rm-tm-slide__name{
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1.15;
}

.rm-tm-slide__meta{
  margin-top: 3px;
  font-size: .92rem;
  color: var(--muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: min(520px, 70vw);
}

/* controls */
.rm-tm-rotator__controls{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 14px;
}

.rm-tm-nav{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.rm-tm-nav:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

:root[data-theme="dark"] .rm-tm-nav{
  border-color: rgba(254,239,221,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.rm-tm-nav span{
  font-size: 22px;
  line-height: 1;
  opacity: .9;
}

.rm-tm-dots{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:center;
  padding: 0 4px;
}

.rm-tm-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(15,23,42,.06);
  cursor: pointer;
  padding: 0;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.rm-tm-dot:hover{ transform: scale(1.12); }

.rm-tm-dot.is-active{
  background: rgba(255,64,0,.90);
  border-color: rgba(80,178,192,.35);
}

:root[data-theme="dark"] .rm-tm-dot{
  border-color: rgba(254,239,221,.18);
  background: rgba(255,255,255,.06);
}

:root[data-theme="dark"] .rm-tm-dot.is-active{
  background: rgba(80,178,192,.88);
  border-color: rgba(255,64,0,.30);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .rm-tm-slide{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    position: relative !important;
  }
  .rm-tm-rotator__viewport{ min-height: auto; }
}


/* --- Send email loading state (slick + consistent) --- */
.btn-load{ position: relative; }
.btn-load__spinner{
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(254,239,221,.35);
  border-top-color: rgba(254,239,221,.92);
  display: none;
  animation: rmBtnSpin 800ms linear infinite;
}
:root[data-theme="dark"] .btn-load__spinner{
  border-color: rgba(254,239,221,.20);
  border-top-color: rgba(80,178,192,.92);
}
@keyframes rmBtnSpin{ to{ transform: rotate(360deg); } }

.btn-load.is-loading{
  pointer-events: none;
  opacity: .92;
  filter: saturate(.95);
}
.btn-load.is-loading .btn-load__spinner{ display: inline-block; }
.btn-load.is-loading .btn-load__text{ opacity: .92; }

/* Optional: subtle “processing” shimmer */
.btn-load.is-loading::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,0) 70%
  );
  opacity: .55;
  transform: translateX(-40%);
  animation: rmBtnShine 1100ms ease-in-out infinite;
  pointer-events:none;
}
@keyframes rmBtnShine{
  0%{ transform: translateX(-60%); opacity:.0; }
  30%{ opacity:.55; }
  100%{ transform: translateX(60%); opacity:0; }
}