/* =========================================================
   Entrophy — entrophy.in
   2026 blue, animated, modern.
   ========================================================= */

:root {
  /* surfaces */
  --bg:        #FFFFFF;
  --bg-2:      #F5F7FB;
  --card:      #FFFFFF;
  --ink:       #0B1838;
  --ink-2:     #1F2A4D;
  --muted:     #5B6478;
  --muted-2:   #8A92A6;
  --line:      #E4E8F3;
  --line-2:    #D2D8E8;

  /* Zoom blues */
  --blue:      #0B5CFF;          /* Zoom signature button blue */
  --blue-2:    #0048DD;
  --blue-deep: #002BB8;
  --cyan:      #38BDF8;
  --indigo:    #5462DC;
  --blue-soft: #EEF2FF;
  --blue-tint: rgba(11, 92, 255, 0.08);

  /* Zoom hero gradient stops */
  --hero-1:    #0E1E5B;          /* deepest navy */
  --hero-2:    #2336B3;          /* mid royal */
  --hero-3:    #5462DC;          /* indigo top */

  /* signal */
  --green:     #10B981;
  --amber:     #F59E0B;
  --red:       #EF4444;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(11,24,56,.04);
  --shadow-md: 0 12px 36px -8px rgba(11,24,56,.10), 0 4px 12px -4px rgba(11,24,56,.06);
  --shadow-lg: 0 40px 100px -20px rgba(11,24,56,.22), 0 14px 28px -10px rgba(11,24,56,.12);
  --shadow-blue: 0 24px 60px -16px rgba(11,92,255,.45), 0 8px 20px -6px rgba(11,92,255,.30);

  /* shape */
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --maxw:      1200px;
  --pad:       clamp(20px, 4vw, 44px);

  /* type */
  --font-sans:  'Lato', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* section padding container */
.hero, .stats, .trust, .pains, .services, .industries, .integrations,
.work, .process, .compare, .pricing, .quotes, .faq, .cta, .foot, .nav, .strip {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* selection */
::selection { background: var(--blue); color: #fff; }

/* =========================================================
   Scroll progress
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 100;
  pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px rgba(45,91,255,.5);
  transition: width 80ms linear;
}

/* =========================================================
   Top strip
   ========================================================= */
.strip {
  background: var(--ink);
  color: #DCE3F5;
  font-size: 13px;
  padding-top: 11px;
  padding-bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(45,91,255,.18), transparent);
  animation: stripShine 4s ease-in-out infinite;
}
@keyframes stripShine {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}
.strip > * { position: relative; }
.strip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(56,189,248,.18);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(56,189,248,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(56,189,248,0); }
}
.strip-link {
  color: var(--cyan);
  font-weight: 500;
  margin-left: 8px;
  transition: color .15s ease;
}
.strip-link:hover { color: #fff; }

/* =========================================================
   Navigation
   ========================================================= */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 252, 255, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(251, 252, 255, 0.88);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.brand-mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  position: relative;
  box-shadow: 0 4px 10px -2px rgba(45,91,255,.4);
}
.brand-mark::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 6px;
  background: linear-gradient(135deg, transparent 60%, rgba(56,189,248,.5));
  pointer-events: none;
}

.nav-links {
  display: flex;
  gap: 30px;
  font-size: 14.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.nav-links a {
  position: relative;
  transition: color .15s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .25s cubic-bezier(.2,.6,.2,1);
  transform-origin: left;
}
.nav-links a:hover { color: var(--blue); }
.nav-links a:hover::after { transform: scaleX(1); }

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

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 36px; height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  width: 18px; height: 1.5px;
  background: var(--ink);
  display: block;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  padding: 10px 18px;
  border: 1px solid transparent;
  transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: var(--shadow-blue);
  transform: translateY(-1px);
}
.btn-primary:hover .btn-arrow { transform: translateX(3px); }
.btn-arrow { transition: transform .25s cubic-bezier(.2,.6,.2,1); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}

.btn-lg { padding: 14px 24px; font-size: 15.5px; }
.btn-block { display: flex; width: 100%; }

.btn-cta {
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  font-size: 16px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 10px 30px -10px rgba(45,91,255,.6);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px -10px rgba(45,91,255,.7);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 10vw, 130px);
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

/* animated mesh background */
.mesh {
  position: absolute;
  inset: -50px;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
}
.blob-1 {
  width: 420px; height: 420px;
  background: var(--blue);
  top: -80px; left: -100px;
  animation: blobMove1 18s ease-in-out infinite;
}
.blob-2 {
  width: 360px; height: 360px;
  background: var(--cyan);
  top: 20%; right: -120px;
  animation: blobMove2 22s ease-in-out infinite;
}
.blob-3 {
  width: 320px; height: 320px;
  background: var(--indigo);
  bottom: -100px; left: 30%;
  opacity: .35;
  animation: blobMove3 26s ease-in-out infinite;
}
@keyframes blobMove1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(80px, 40px) scale(1.1); }
}
@keyframes blobMove2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-60px, 80px) scale(.9); }
}
@keyframes blobMove3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(40px, -60px) scale(1.15); }
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45,91,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,91,255,.05) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 70%);
}

.cursor-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,91,255,.10), transparent 60%);
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease;
  opacity: 0;
  will-change: transform;
}
.cursor-glow.on { opacity: 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  margin-bottom: 26px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,.2);
  animation: dotPulse 2.4s ease-in-out infinite;
}

.display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 6.3vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.038em;
  margin: 0 0 22px;
  color: var(--ink);
}
.display em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--blue);
  letter-spacing: -0.01em;
}

/* word cycler */
.cycle {
  display: inline-block;
  height: 1em;
  vertical-align: bottom;
  overflow: hidden;
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.cycle-track {
  display: flex;
  flex-direction: column;
  animation: cycleWords 10s steps(4) infinite;
}
.cycle-track span {
  display: block;
  line-height: 1;
  height: 1em;
}
@keyframes cycleWords {
  0%, 22%  { transform: translateY(0%); }
  25%, 47% { transform: translateY(-100%); }
  50%, 72% { transform: translateY(-200%); }
  75%, 97% { transform: translateY(-300%); }
  100%     { transform: translateY(-400%); }
}

.lede {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--muted);
  max-width: 540px;
  margin: 0 0 32px;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 580px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-meta > div { display: flex; flex-direction: column; gap: 2px; }
.hero-meta strong {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.hero-meta span {
  font-size: 12.5px;
  color: var(--muted);
}

/* hero mock */
.hero-mock {
  position: relative;
}
.mock-float {
  animation: heroFloat 6s ease-in-out infinite;
  position: relative;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.mock-window {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: perspective(1800px) rotateX(3deg) rotateY(-4deg);
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.hero-mock:hover .mock-window {
  transform: perspective(1800px) rotateX(0deg) rotateY(0deg);
}

.mock-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #F7F9FE, #F1F4FB);
  border-bottom: 1px solid var(--line);
}
.mock-chrome > span {
  width: 10px; height: 10px; border-radius: 50%;
}
.mock-chrome > span:nth-child(1) { background: #FF6058; }
.mock-chrome > span:nth-child(2) { background: #FFBE2E; }
.mock-chrome > span:nth-child(3) { background: #28C840; }
.mock-url {
  margin-left: 12px;
  font-size: 12px;
  color: var(--muted);
  background: #fff;
  border-radius: 8px;
  padding: 5px 12px;
  flex: 1;
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mock-url svg { color: var(--green); }

.mock-body {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 340px;
}
.mock-side {
  background: #FAFBFE;
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.mock-side-item {
  padding: 8px 10px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease;
}
.mock-side-item:hover { background: var(--blue-soft); }
.mock-side-item.active {
  background: var(--ink);
  color: #fff;
}
.mock-side-new {
  background: var(--blue-soft);
  color: var(--blue);
  border: 1px dashed var(--blue);
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
}

.mock-main {
  padding: 16px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock-row {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr 1.5fr;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 8px;
  transition: background .15s ease;
}
.mock-row:not(.mock-head):hover { background: var(--blue-soft); }
.mock-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 500;
}

.pulse {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.pulse.green { background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.pulse.amber { background: var(--amber); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }

.mock-toast {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(45,91,255,.2);
  animation: toastIn 1.2s cubic-bezier(.2,.6,.2,1) .8s both, toastPulse 4s ease-in-out 2.5s infinite;
  max-width: 240px;
}
.mock-toast div { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.mock-toast strong { font-weight: 500; }
.mock-toast span { color: rgba(255,255,255,.6); font-size: 11.5px; }
@keyframes toastIn {
  0%   { opacity: 0; transform: translateY(8px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastPulse {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 1px rgba(45,91,255,.2); }
  50%      { box-shadow: var(--shadow-md), 0 0 0 6px rgba(45,91,255,0); }
}
.bolt {
  width: 16px; height: 16px;
  background: var(--cyan);
  clip-path: polygon(45% 0, 100% 0, 55% 45%, 100% 45%, 0 100%, 45% 55%, 0 55%);
  flex-shrink: 0;
}

/* floating chips around mock */
.float-chip {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.float-chip svg { color: var(--green); }
.chip-1 {
  top: -16px; left: -30px;
  animation: chipFloat 7s ease-in-out infinite;
}
.chip-2 {
  top: 50%; right: -42px;
  animation: chipFloat 9s ease-in-out infinite .8s;
}
.chip-3 {
  bottom: -22px; left: 50px;
  animation: chipFloat 8s ease-in-out infinite 1.6s;
}
@keyframes chipFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-8px) rotate(-1deg); }
}
.chip-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(45,91,255,.2);
  animation: dotPulse 2s ease-in-out infinite;
}

/* =========================================================
   Stats bar
   ========================================================= */
.stats {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}
.stats-inner {
  background: linear-gradient(135deg, var(--ink), #0E1838);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 36px clamp(20px, 4vw, 50px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.stats-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 10% 0%, rgba(45,91,255,.4), transparent 50%),
    radial-gradient(ellipse 50% 80% at 100% 100%, rgba(56,189,248,.2), transparent 50%);
  pointer-events: none;
}
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat .num {
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(180deg, #fff, #B6C4FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat .lbl {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  letter-spacing: 0.01em;
}

/* =========================================================
   Trust strip + marquee
   ========================================================= */
.trust {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 70px;
  text-align: center;
}
.trust-label {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 26px;
}
.trust-label strong {
  color: var(--ink);
  font-weight: 600;
}

.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-pill {
  font-size: 14px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--card);
  padding: 10px 18px;
  border-radius: 999px;
  letter-spacing: -0.005em;
  flex-shrink: 0;
  font-weight: 500;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.logo-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

/* =========================================================
   Section heads
   ========================================================= */
.section-head {
  max-width: 760px;
  margin: 0 auto clamp(44px, 6vw, 68px);
  text-align: center;
}
.kicker {
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
  font-weight: 600;
  position: relative;
  padding-left: 18px;
}
.kicker::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 1.5px;
  background: var(--blue);
  transform: translateY(-50%);
}
.section-head h2 {
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.034em;
  font-weight: 600;
  margin: 0 0 16px;
}
.section-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.section-head p {
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 17.5px);
  margin: 0 auto;
  max-width: 640px;
  line-height: 1.6;
}

/* =========================================================
   Pain points
   ========================================================= */
.pains {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pain-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 26px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pain-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(45,91,255,.10), transparent 40%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.pain-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.pain-card:hover::after { opacity: 1; }

.pain-icon {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 18px;
  transition: background .2s ease, transform .25s cubic-bezier(.2,.6,.2,1);
}
.pain-card:hover .pain-icon {
  background: var(--blue);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}
.pain-tag {
  display: inline-block;
  font-size: 11.5px;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pain-card h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  line-height: 1.3;
}
.pain-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* =========================================================
   Services
   ========================================================= */
.services {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.svc-card {
  grid-column: span 2;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  position: relative;
  overflow: hidden;
}
.svc-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.svc-lg {
  grid-column: span 4;
  background: linear-gradient(135deg, #fff, #F5F8FF);
}
.svc-lg .svc-list {
  grid-template-columns: 1fr 1fr;
}
.svc-accent {
  grid-column: span 4;
  background: linear-gradient(135deg, var(--ink), #0E1838);
  color: #DCE3F5;
  border-color: var(--ink);
  position: relative;
}
.svc-accent::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 100%, rgba(45,91,255,.4), transparent 50%);
  pointer-events: none;
}
.svc-accent > * { position: relative; }
.svc-accent:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.svc-accent .svc-num,
.svc-accent h3 { color: #fff; }
.svc-accent .svc-desc { color: rgba(220,227,245,.78); }

.svc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.svc-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.svc-card h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}
.svc-desc {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 18px;
  max-width: 540px;
  line-height: 1.55;
}

.svc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 18px;
}
.svc-list li {
  font-size: 14.5px;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.svc-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 1.5px;
  background: var(--blue);
}
.svc-accent .svc-list li { color: rgba(220,227,245,.9); }
.svc-list-accent li::before { background: var(--cyan); }

.svc-pill {
  margin-left: auto;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
}

/* =========================================================
   Industries grid
   ========================================================= */
.industries {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ind-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .3s ease;
  position: relative;
  overflow: hidden;
}
.ind-tile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, #fff, var(--blue-soft));
}
.ind-ic {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: var(--blue-soft);
  color: var(--blue);
  border-radius: 10px;
  font-size: 18px;
  margin-bottom: 14px;
  transition: transform .3s ease, background .3s ease;
}
.ind-tile:hover .ind-ic {
  transform: rotate(-8deg) scale(1.05);
  background: var(--blue);
  color: #fff;
}
.ind-tile h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--ink);
}
.ind-tile p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* =========================================================
   Integrations
   ========================================================= */
.integrations {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.int-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.int-cat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  transition: border-color .2s ease, transform .2s ease;
}
.int-cat:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}
.int-cat h4 {
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 14px;
}
.int-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.int-chip {
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.int-chip:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}
.int-note {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--muted);
}

/* =========================================================
   Work / case studies
   ========================================================= */
.work {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.work-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 30px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.work-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, var(--blue-soft));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.work-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.work-card:hover::before { opacity: 1; }
.work-card > * { position: relative; }

.work-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
}
.work-tag {
  font-size: 12px;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  font-weight: 500;
  text-transform: uppercase;
}
.work-time {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}
.work-card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.25;
}
.work-card p {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 20px;
  max-width: 460px;
  line-height: 1.55;
}
.work-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.work-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.work-metrics strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.work-metrics span {
  font-size: 12px;
  color: var(--muted);
}
.work-meta {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  flex-wrap: wrap;
}

/* =========================================================
   Process
   ========================================================= */
.process {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 60px; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  z-index: 0;
}
.steps li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  position: relative;
  z-index: 1;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.steps li:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.step-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.steps h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  line-height: 1.3;
}
.step-time {
  display: block;
  font-size: 11.5px;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 10px;
}
.steps p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* =========================================================
   Compare table
   ========================================================= */
.compare {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.compare-table {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.compare-row:last-child { border-bottom: none; }
.compare-row > div {
  padding: 18px 24px;
  font-size: 14.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
}
.compare-row > div:nth-child(2) {
  background: linear-gradient(180deg, var(--blue-soft), rgba(238,242,255,.4));
  font-weight: 600;
  color: var(--blue);
  position: relative;
}
.compare-row > div:nth-child(2)::before {
  content: '✓ ';
  display: inline-block;
  margin-right: 8px;
  color: var(--green);
  font-weight: 700;
}
.compare-row > div:nth-child(3) {
  color: var(--muted);
}
.compare-row > div:nth-child(3)::before {
  content: '×';
  display: inline-block;
  margin-right: 8px;
  color: var(--muted-2);
  font-size: 18px;
  line-height: 1;
}
.compare-head > div {
  background: var(--ink) !important;
  color: #fff !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 16px 24px;
}
.compare-head > div::before { display: none !important; }
.compare-head > div:nth-child(2) {
  background: var(--blue) !important;
}

/* =========================================================
   Pricing
   ========================================================= */
.pricing {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 30px 30px;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.price-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.price-feature {
  background: linear-gradient(135deg, var(--ink), #0E1838);
  color: #DCE3F5;
  border-color: var(--ink);
  transform: translateY(-8px);
}
.price-feature:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-lg);
}
.price-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(45,91,255,.4), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(56,189,248,.2), transparent 50%);
  pointer-events: none;
}
.price-feature > *:not(.price-glow) { position: relative; }
.price-feature .price-desc { color: rgba(220,227,245,.72); }
.price-feature .price-list li { color: rgba(220,227,245,.88); }
.price-feature .price-list li::before { background: var(--cyan); }
.price-feature .currency,
.price-feature .per { color: rgba(220,227,245,.6); }
.price-feature .price-amt { border-bottom-color: rgba(255,255,255,.14); }
.price-feature .btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.price-feature .btn-primary:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.price-head h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.price-pill {
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  font-weight: 500;
  text-transform: uppercase;
}
.price-pill-accent {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(45,91,255,.3);
}
.price-feature .price-pill {
  background: rgba(255,255,255,.08);
  color: #DCE3F5;
  border-color: rgba(255,255,255,.16);
}

.price-desc {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.55;
}
.price-amt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.currency {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  width: 100%;
}
.price-amt .num {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.per {
  font-size: 13px;
  color: var(--muted);
}
.price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.price-list li {
  font-size: 14.5px;
  padding-left: 22px;
  position: relative;
  color: var(--ink-2);
}
.price-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 1.5px;
  background: var(--blue);
}
.price-note {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 32px 0 0;
}

/* =========================================================
   Quotes
   ========================================================= */
.quotes {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.quote {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.quote:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.quote-stars {
  color: var(--amber);
  font-size: 16px;
  letter-spacing: 2px;
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex-grow: 1;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.quote figcaption > div { display: flex; flex-direction: column; gap: 2px; }
.quote figcaption strong { font-weight: 600; }
.quote figcaption span { color: var(--muted); }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  max-width: 880px;
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 60px);
}
.faq-list {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.faq-list details:last-child { border-bottom: none; }
.faq-list details[open] {
  background: linear-gradient(180deg, var(--blue-soft), transparent 40%);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 28px;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
  position: relative;
  color: var(--ink);
  transition: color .15s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '';
  position: absolute;
  right: 28px;
  top: 50%;
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transform: translateY(-50%);
  color: var(--muted);
  transition: transform .3s cubic-bezier(.2,.6,.2,1), color .15s ease;
}
.faq-list details[open] summary::after {
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat;
  transform: translateY(-50%) rotate(180deg);
  color: var(--blue);
}
.faq-list summary:hover { color: var(--blue); }
.faq-list details p {
  margin: 0 56px 22px 28px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* =========================================================
   Closing CTA
   ========================================================= */
.cta {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(80px, 10vw, 120px);
}
.cta-inner {
  background: linear-gradient(135deg, var(--ink), #0A1638);
  color: #DCE3F5;
  border-radius: var(--radius-xl);
  padding: clamp(48px, 7vw, 84px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cta-mesh span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.cta-mesh span:nth-child(1) {
  width: 400px; height: 400px;
  background: var(--blue);
  top: -150px; left: -100px;
  opacity: .4;
  animation: blobMove1 16s ease-in-out infinite;
}
.cta-mesh span:nth-child(2) {
  width: 320px; height: 320px;
  background: var(--cyan);
  bottom: -100px; right: -80px;
  opacity: .25;
  animation: blobMove2 20s ease-in-out infinite;
}
.cta-mesh span:nth-child(3) {
  width: 280px; height: 280px;
  background: var(--indigo);
  top: 30%; right: 30%;
  opacity: .25;
  animation: blobMove3 24s ease-in-out infinite;
}
.cta-content {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
}
.cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(220,227,245,.85);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.cta-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
  animation: dotPulse 2s ease-in-out infinite;
}
.cta h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
  color: #fff;
  line-height: 1.04;
}
.cta-content > p {
  color: rgba(220,227,245,.72);
  font-size: clamp(15px, 1.3vw, 18px);
  max-width: 540px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 540px;
  margin: 0 auto;
}
.cta-form label.sr { display: contents; }
.cta-form input,
.cta-form textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
  width: 100%;
  transition: border-color .2s ease, background .2s ease, box-shadow .25s ease;
}
.cta-form input::placeholder,
.cta-form textarea::placeholder {
  color: rgba(220,227,245,.45);
}
.cta-form input:focus,
.cta-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 4px rgba(45,91,255,.15);
}
.cta-form textarea {
  grid-column: span 2;
  min-height: 110px;
}
.cta-form .btn {
  grid-column: span 2;
  margin-top: 4px;
}
.cta-or {
  margin: 26px 0 0;
  font-size: 14px;
  color: rgba(220,227,245,.55);
}
.cta-or a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cta-or a:hover { color: #fff; }

/* =========================================================
   Footer
   ========================================================= */
.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 50px;
  border-top: 1px solid var(--line);
}
.foot-top {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: 60px;
  margin-bottom: 50px;
}
.foot-brand p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 360px;
  margin: 14px 0 22px;
  line-height: 1.6;
}
.foot-socials {
  display: flex;
  gap: 8px;
}
.foot-socials a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.foot-socials a:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.foot-cols h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 18px;
}
.foot-cols a {
  display: block;
  font-size: 14.5px;
  color: var(--ink-2);
  padding: 5px 0;
  transition: color .15s ease, transform .15s ease;
}
.foot-cols a:hover {
  color: var(--blue);
  transform: translateX(3px);
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 12px;
}
.foot-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =========================================================
   Reveal animation
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .blob, .float-chip, .mock-float, .marquee-track, .cycle-track,
  .strip::before, .mock-toast, .strip .dot, .eyebrow-dot, .cta-dot,
  .chip-pulse, .pulse { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 50px;
    padding-bottom: 80px;
  }
  .hero-mock { max-width: 580px; margin: 0 auto; width: 100%; }
  .mock-window { transform: none; }
  .float-chip { display: none; }

  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr 1fr; }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
  .int-cats { grid-template-columns: 1fr 1fr; }

  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card, .svc-lg, .svc-accent { grid-column: span 2; }
  .svc-lg .svc-list { grid-template-columns: 1fr 1fr; }

  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps::before { display: none; }

  .price-grid { grid-template-columns: 1fr; }
  .price-feature { transform: none; }
  .price-feature:hover { transform: translateY(-4px); }

  .foot-top { grid-template-columns: 1fr; gap: 40px; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .display { font-size: clamp(34px, 9vw, 48px); }

  .pain-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .int-cats { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card, .svc-lg, .svc-accent { grid-column: span 1; }
  .svc-lg .svc-list { grid-template-columns: 1fr; }

  .stats-inner { grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px; }

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

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

  .cta-form { grid-template-columns: 1fr; }
  .cta-form textarea, .cta-form .btn { grid-column: span 1; }

  .strip { font-size: 12px; padding-left: 16px; padding-right: 16px; }
  .strip-link { display: none; }
  .strip-text { text-align: center; }

  .compare-row { grid-template-columns: 1fr 1fr; }
  .compare-row > div:nth-child(1) { grid-column: span 2; background: var(--bg-2); font-weight: 600; padding: 12px 20px; }
  .compare-head > div:nth-child(1) { display: none; }

  .work-metrics { grid-template-columns: 1fr; gap: 14px; }

  .faq-list summary { padding: 18px 50px 18px 20px; font-size: 15.5px; }
  .faq-list summary::after { right: 20px; }
  .faq-list details p { margin: 0 50px 18px 20px; }

  .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* nav mobile drawer */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--bg);
  z-index: 40;
  padding: 30px var(--pad);
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
  overflow-y: auto;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-size: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.nav-mobile .btn { margin-top: 14px; }
.nav-mobile h5 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 16px 0 4px;
  font-weight: 600;
}

/* =========================================================
   NAV DROPDOWNS
   ========================================================= */
.has-drop { position: relative; }
.has-drop > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.has-drop > a::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 4px;
  opacity: .6;
  transition: transform .2s ease;
}
.has-drop:hover > a::after { transform: rotate(225deg) translateY(0); }

.drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
  min-width: 580px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.6,.2,1), visibility .2s ease;
  z-index: 60;
}
.drop-wide { min-width: 680px; grid-template-columns: 1fr 1fr 1fr; }
.has-drop:hover .drop,
.has-drop:focus-within .drop {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.drop a {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s ease;
}
.drop a:hover { background: var(--blue-soft); }
.drop a:hover::after { display: none; }
.drop a strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.drop a small {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}
.drop-ic {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  background: var(--blue-soft);
  color: var(--blue);
  border-radius: 6px;
  font-size: 12px;
}

/* =========================================================
   SUBPAGE HERO
   ========================================================= */
.sub-hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 80px);
  text-align: center;
}
.sub-hero .mesh { position: absolute; inset: -50px; z-index: -2; pointer-events: none; overflow: hidden; }

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
}
.breadcrumb a {
  color: var(--muted);
  transition: color .15s ease;
}
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb-sep { color: var(--muted-2); }
.breadcrumb strong {
  color: var(--ink);
  font-weight: 500;
}

.sub-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 22px;
}

.sub-hero h1 {
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 18px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.sub-hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--blue);
}
.sub-hero > .lede {
  margin: 0 auto 32px;
  max-width: 640px;
  text-align: center;
}
.sub-hero .hero-cta {
  justify-content: center;
}

/* =========================================================
   SUBPAGE BANDS
   ========================================================= */
.band {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  padding-top: clamp(70px, 9vw, 110px);
  padding-bottom: clamp(40px, 6vw, 60px);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.two-col.flip { grid-template-columns: 1fr 1fr; }
.two-col h2 {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.two-col h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--blue);
}
.two-col p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.two-col ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.two-col ul li {
  padding-left: 24px;
  position: relative;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
}
.two-col ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 1.5px;
  background: var(--blue);
}

.illus-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.illus-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(45,91,255,.08), transparent 50%);
  pointer-events: none;
}
.illus-card > * { position: relative; }

/* features grid */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.feat:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.feat-ic {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 16px;
  transition: background .2s ease, transform .25s cubic-bezier(.2,.6,.2,1);
}
.feat:hover .feat-ic {
  background: var(--blue);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}
.feat h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  line-height: 1.3;
}
.feat p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* pain vs cure two-column */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.vs-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.vs-card.vs-pain {
  background: linear-gradient(180deg, #FFF5F5, #fff);
  border-color: #FECACA;
}
.vs-card.vs-cure {
  background: linear-gradient(180deg, var(--blue-soft), #fff);
  border-color: var(--blue);
}
.vs-card h3 {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 600;
}
.vs-pain h3 { color: #DC2626; }
.vs-cure h3 { color: var(--blue); }
.vs-card ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.vs-card li {
  padding-left: 24px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.5;
}
.vs-pain li::before {
  content: '×';
  position: absolute;
  left: 0; top: 0;
  color: #DC2626;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.vs-cure li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--blue);
  font-weight: 700;
  font-size: 15px;
}

/* stat bar variant for subpages */
.sub-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sub-stats > div {
  padding: 28px 26px;
  border-right: 1px solid var(--line);
}
.sub-stats > div:last-child { border-right: none; }
.sub-stats strong {
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.sub-stats span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* mini CTA */
.mini-cta {
  background: linear-gradient(135deg, var(--ink), #0E1838);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.mini-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(45,91,255,.4), transparent 50%);
  pointer-events: none;
}
.mini-cta > * { position: relative; }
.mini-cta h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  line-height: 1.2;
}
.mini-cta p {
  color: rgba(220,227,245,.7);
  font-size: 15px;
  margin: 0;
  line-height: 1.55;
  max-width: 540px;
}
.mini-cta-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.mini-cta .btn-primary { background: var(--blue); border-color: var(--blue); }
.mini-cta .btn-primary:hover { background: #fff; color: var(--ink); border-color: #fff; }
.mini-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.2); }
.mini-cta .btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.4); }

/* tab-like flow */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
  margin-top: 24px;
}
.flow::before {
  content: '';
  position: absolute;
  top: 28px; left: 8%; right: 8%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  z-index: 0;
}
.flow-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  position: relative;
  z-index: 1;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
}
.flow-step:hover { border-color: var(--blue); transform: translateY(-2px); }
.flow-num {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  color: #fff;
  border-radius: 50%;
  font-weight: 600;
  font-size: 15px;
  margin: 0 auto 14px;
  box-shadow: 0 6px 16px -4px rgba(45,91,255,.4);
}
.flow-step h4 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.flow-step p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* chip cloud */
.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
.chip-cloud .int-chip { font-size: 14px; padding: 8px 16px; }

/* embedded chatbot demo (widget page) */
.chatbot-demo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
.chatbot-head {
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chatbot-avatar {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.2);
}
.chatbot-head strong { display: block; font-size: 15px; font-weight: 600; }
.chatbot-head small { display: block; font-size: 12px; color: rgba(255,255,255,.7); }
.chatbot-status {
  margin-left: auto;
  font-size: 11.5px;
  padding: 4px 10px;
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chatbot-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  min-height: 280px;
}
.chat-msg {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 80%;
  animation: chatIn .5s ease both;
}
.chat-msg.bot {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  background: var(--blue);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-msg.typing {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
}
.chat-msg.typing span {
  width: 6px; height: 6px;
  background: var(--muted-2);
  border-radius: 50%;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.chat-msg.typing span:nth-child(2) { animation-delay: .15s; }
.chat-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes chatIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.chatbot-input {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
  display: flex;
  gap: 10px;
  align-items: center;
}
.chatbot-input input {
  flex: 1;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.chatbot-send {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
}

/* widget gallery */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.widget-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.widget-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.widget-preview {
  height: 180px;
  background: linear-gradient(135deg, var(--blue-soft), #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.widget-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(45,91,255,.12), transparent 50%);
}
.widget-body {
  padding: 22px 24px 24px;
}
.widget-body h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.widget-body p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* mini widget previews */
.w-kpi {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.w-kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.w-kpi-val { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 4px 0; }
.w-kpi-spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.w-kpi-spark i { display: block; width: 6px; background: var(--blue); border-radius: 2px; opacity: .8; }

.w-pipe {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.w-pipe-row { display: flex; justify-content: space-between; font-size: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.w-pipe-row:last-child { border-bottom: none; }
.w-pipe-row strong { color: var(--blue); font-weight: 600; }

.w-bot {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.w-bot-msg { font-size: 12px; padding: 6px 10px; border-radius: 10px; max-width: 80%; }
.w-bot-msg.b { background: var(--bg-2); border-bottom-left-radius: 4px; }
.w-bot-msg.u { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }

@media (max-width: 1100px) {
  .two-col { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .vs-grid { grid-template-columns: 1fr; }
  .sub-stats { grid-template-columns: 1fr 1fr; }
  .sub-stats > div:nth-child(2) { border-right: none; }
  .sub-stats > div:nth-child(1), .sub-stats > div:nth-child(2) { border-bottom: 1px solid var(--line); }
  .mini-cta { grid-template-columns: 1fr; }
  .mini-cta-actions { justify-content: flex-start; }
  .flow { grid-template-columns: 1fr 1fr; gap: 14px; }
  .flow::before { display: none; }
  .widget-grid { grid-template-columns: 1fr 1fr; }
  .drop, .drop-wide { min-width: 0; width: calc(100vw - 40px); }
}
@media (max-width: 720px) {
  .feat-grid { grid-template-columns: 1fr; }
  .sub-stats { grid-template-columns: 1fr; }
  .sub-stats > div { border-right: none; border-bottom: 1px solid var(--line); }
  .sub-stats > div:last-child { border-bottom: none; }
  .flow { grid-template-columns: 1fr; }
  .widget-grid { grid-template-columns: 1fr; }
  .has-drop > a::after { display: none; }
  .drop { display: none; }
}

/* =========================================================
   ZOOM-STYLE DARK HERO (overrides)
   Deep navy → royal → indigo gradient with white text.
   Bleeds edge-to-edge regardless of max-width container.
   ========================================================= */

.hero,
.sub-hero {
  position: relative;
  isolation: isolate;
}

.hero::before,
.sub-hero::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(84, 98, 220, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 70% at 90% 80%, rgba(56, 189, 248, 0.25), transparent 55%),
    linear-gradient(180deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-3) 100%);
  z-index: -3;
}

/* --- Text colors on dark hero --- */
.hero .display,
.sub-hero h1 {
  color: #FFFFFF;
}
.hero .display em,
.sub-hero h1 em {
  color: var(--cyan);
}
.hero .cycle {
  color: var(--cyan);
}
.hero .lede,
.sub-hero > .lede {
  color: rgba(255, 255, 255, 0.78);
}

/* --- Eyebrow / sub-tag pills on dark --- */
.hero .eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sub-hero .sub-tag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--cyan);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sub-hero .breadcrumb {
  color: rgba(255, 255, 255, 0.6);
}
.sub-hero .breadcrumb a { color: rgba(255, 255, 255, 0.6); }
.sub-hero .breadcrumb a:hover { color: var(--cyan); }
.sub-hero .breadcrumb strong { color: #fff; }
.sub-hero .breadcrumb-sep { color: rgba(255, 255, 255, 0.3); }

/* --- Hero meta bar --- */
.hero .hero-meta {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.hero .hero-meta strong { color: #fff; }
.hero .hero-meta span { color: rgba(255, 255, 255, 0.55); }

/* --- Buttons inside the hero --- */
.hero .btn-primary,
.sub-hero .btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(11, 92, 255, 0.5);
}
.hero .btn-primary:hover,
.sub-hero .btn-primary:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  box-shadow: 0 14px 36px -8px rgba(255, 255, 255, 0.4);
}
.hero .btn-ghost,
.sub-hero .btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero .btn-ghost:hover,
.sub-hero .btn-ghost:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* --- Blobs adapted for dark --- */
.hero .blob,
.sub-hero .blob {
  opacity: 0.42;
  mix-blend-mode: screen;
  filter: blur(90px);
}
.hero .blob-1, .sub-hero .blob-1 { background: var(--cyan); }
.hero .blob-2, .sub-hero .blob-2 { background: #7B8CFF; }
.hero .blob-3, .sub-hero .blob-3 { background: #C084FC; opacity: 0.3; }

/* --- Grid overlay: white lines on dark --- */
.hero .grid-overlay,
.sub-hero .grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* --- Cursor glow brighter for dark hero --- */
.cursor-glow {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 60%);
}

/* --- Mock window: deeper shadow on dark bg --- */
.hero .mock-window {
  box-shadow:
    0 60px 120px -30px rgba(0, 0, 0, 0.55),
    0 24px 48px -12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* --- Float chips already white pills: lift them on dark --- */
.float-chip {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.35);
}

/* --- Nav: transparent over dark hero, white-glassy when scrolled --- */
.nav:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}
.nav:not(.scrolled) .brand,
.nav:not(.scrolled) .nav-links > a,
.nav:not(.scrolled) .has-drop > a {
  color: #fff;
}
.nav:not(.scrolled) .has-drop > a::after {
  border-color: rgba(255, 255, 255, 0.7);
}
.nav:not(.scrolled) .nav-links a:hover,
.nav:not(.scrolled) .has-drop > a:hover {
  color: var(--cyan);
}
.nav:not(.scrolled) .nav-links a::after {
  background: var(--cyan);
}
.nav:not(.scrolled) .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav:not(.scrolled) .btn-ghost:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.nav:not(.scrolled) .btn-primary {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.nav:not(.scrolled) .btn-primary:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 10px 24px -6px rgba(11, 92, 255, 0.45);
}
.nav:not(.scrolled) .nav-toggle span {
  background: #fff;
}

/* --- Subpage hero: extra top padding so it breathes under nav --- */
.sub-hero {
  padding-top: clamp(72px, 10vw, 130px);
  padding-bottom: clamp(64px, 9vw, 110px);
}

/* --- Lato lifts ~5% above Inter at the same px — tighten heading tracking back --- */
body { font-family: var(--font-sans); }
.display { font-weight: 900; letter-spacing: -0.04em; }
.section-head h2 { font-weight: 900; letter-spacing: -0.035em; }
.sub-hero h1 { font-weight: 900; letter-spacing: -0.04em; }
.cta h2 { font-weight: 900; letter-spacing: -0.04em; }
.two-col h2 { font-weight: 900; }
.brand-word { font-weight: 900; letter-spacing: -0.02em; }

/* --- Stats inner: keep dark theme but tune gradient stops to Zoom palette --- */
.stats-inner {
  background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 60%, var(--blue-deep) 100%);
}

/* --- CTA section already dark; tune to match Zoom gradient stops --- */
.cta-inner {
  background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-3) 100%);
}

/* --- Mobile: keep dark gradient working on narrow screens --- */
@media (max-width: 1100px) {
  .hero::before,
  .sub-hero::before {
    background:
      radial-gradient(ellipse 100% 50% at 50% 0%, rgba(84, 98, 220, 0.5), transparent 60%),
      linear-gradient(180deg, var(--hero-1) 0%, var(--hero-2) 60%, var(--hero-3) 100%);
  }
}

/* =========================================================
   PREMIUM BLUE — ambient page wash, tinted alternating bands,
   blue-shadowed card lift, refined gradients & typography.
   ========================================================= */

/* --- Body: subtle blue ambient wash (Stripe / Linear style) --- */
body {
  background:
    radial-gradient(ellipse 70% 50% at 100% 12%, rgba(11, 92, 255, 0.05), transparent 60%),
    radial-gradient(ellipse 55% 40% at 0% 55%, rgba(84, 98, 220, 0.05), transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(56, 189, 248, 0.04), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  font-feature-settings: 'kern', 'liga';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- Tinted alternating bands on HOMEPAGE specific sections --- */
.pains,
.industries,
.work,
.pricing,
.quotes,
.faq {
  position: relative;
  isolation: isolate;
}

.pains::before,
.work::before,
.quotes::before {
  content: '';
  position: absolute;
  inset: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(11, 92, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(84, 98, 220, 0.06), transparent 60%),
    linear-gradient(180deg, #F3F6FD 0%, #FBFCFF 100%);
  z-index: -1;
}

.industries::before,
.pricing::before,
.faq::before {
  content: '';
  position: absolute;
  inset: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background:
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(11, 92, 255, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(56, 189, 248, 0.05), transparent 55%),
    linear-gradient(180deg, #FBFCFF 0%, #F0F4FC 100%);
  z-index: -1;
}

/* --- Subpages: alternating soft-blue bands via :nth-of-type --- */
.band:nth-of-type(even) {
  position: relative;
  isolation: isolate;
}
.band:nth-of-type(even)::before {
  content: '';
  position: absolute;
  inset: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(11, 92, 255, 0.06), transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(84, 98, 220, 0.05), transparent 60%),
    linear-gradient(180deg, #F3F6FD 0%, #FBFCFF 100%);
  z-index: -1;
}

/* --- Premium card lift with blue-tinted shadow --- */
.pain-card,
.work-card,
.svc-card,
.ind-tile,
.feat,
.price-card,
.quote,
.flow-step {
  box-shadow:
    0 1px 2px rgba(11, 24, 56, 0.04),
    0 6px 14px -6px rgba(11, 24, 56, 0.06);
  transition:
    transform .45s cubic-bezier(.2, .65, .25, 1),
    box-shadow .45s cubic-bezier(.2, .65, .25, 1),
    border-color .3s ease,
    background .3s ease;
}

.pain-card:hover,
.work-card:hover,
.svc-card:hover,
.ind-tile:hover,
.feat:hover,
.price-card:hover,
.quote:hover,
.flow-step:hover {
  border-color: rgba(11, 92, 255, 0.45);
  box-shadow:
    0 1px 2px rgba(11, 24, 56, 0.05),
    0 28px 60px -22px rgba(11, 92, 255, 0.32),
    0 10px 24px -10px rgba(11, 92, 255, 0.20);
}

/* --- Pricing feature card: full Zoom gradient (showpiece) --- */
.price-feature {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 55%, var(--indigo) 100%);
  border-color: transparent;
}
.price-feature .price-glow {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.25), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.3), transparent 50%);
}

/* --- Stats inner: bolder gradient --- */
.stats-inner {
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, rgba(11, 92, 255, 0.55), transparent 50%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(56, 189, 248, 0.3), transparent 50%),
    linear-gradient(135deg, var(--hero-1) 0%, var(--blue-deep) 100%);
}

/* --- CTA inner: refined gradient stops --- */
.cta-inner {
  background: linear-gradient(135deg, var(--hero-1) 0%, var(--blue-deep) 50%, var(--indigo) 100%);
}

/* --- AI service card (svc-accent): match Zoom gradient --- */
.svc-accent {
  background: linear-gradient(135deg, var(--hero-1) 0%, var(--blue-deep) 60%, var(--indigo) 100%);
}

/* --- Integration chips: gradient pills --- */
.int-chip {
  background: linear-gradient(180deg, var(--blue-soft), #E4EBFC);
  border: 1px solid transparent;
  font-weight: 600;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.int-chip:hover {
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(11, 92, 255, 0.45);
}

/* --- Pain/feat/industry icon backgrounds: gradient --- */
.pain-icon,
.feat-ic,
.ind-ic {
  background: linear-gradient(135deg, var(--blue-soft), #DDE5FE);
  transition: background .25s ease, transform .3s cubic-bezier(.2, .6, .2, 1), box-shadow .3s ease;
}
.pain-card:hover .pain-icon,
.feat:hover .feat-ic,
.ind-tile:hover .ind-ic {
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  box-shadow: 0 12px 24px -8px rgba(11, 92, 255, 0.5);
  color: #fff;
}

/* --- FAQ list: subtle tinted bg with refined hover --- */
.faq-list {
  background: linear-gradient(180deg, #FFFFFF, #F8FAFE);
  box-shadow: 0 1px 2px rgba(11, 24, 56, 0.04), 0 8px 24px -10px rgba(11, 92, 255, 0.10);
}
.faq-list summary {
  transition: color .2s ease, background .2s ease;
}
.faq-list summary:hover { background: rgba(238, 242, 255, 0.5); }
.faq-list details[open] {
  background: linear-gradient(180deg, var(--blue-soft) 0%, transparent 60%);
}

/* --- Logo pills: subtle gradient, premium hover --- */
.logo-pill {
  background: linear-gradient(180deg, #FFFFFF, #FBFCFF);
}
.logo-pill:hover {
  background: linear-gradient(135deg, var(--blue-soft), #FFFFFF);
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 8px 20px -8px rgba(11, 92, 255, 0.3);
}

/* --- Process connector: blue gradient line --- */
.steps::before {
  background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), var(--blue), transparent);
  opacity: 0.4;
}
.flow::before {
  background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), var(--blue), transparent);
  opacity: 0.4;
}

/* --- Step numbers & metrics: blue glow --- */
.step-num,
.svc-num,
.flow-num {
  filter: drop-shadow(0 4px 12px rgba(11, 92, 255, 0.22));
}
.work-metrics strong,
.stat .num {
  filter: drop-shadow(0 0 24px rgba(56, 189, 248, 0.18));
}

/* --- Quote stars: warm glow --- */
.quote-stars {
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.3));
}

/* --- Smoother button press feel --- */
.btn {
  transition:
    transform .18s cubic-bezier(.4, 0, .2, 1),
    background .3s ease,
    color .3s ease,
    border-color .3s ease,
    box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary:hover { transform: translateY(-2px); }

/* --- Section heads: more breathing room --- */
.section-head { margin-bottom: clamp(52px, 7vw, 80px); }

/* --- Premium typography: balance & wrap --- */
.display, .section-head h2, .sub-hero h1, .cta h2, .two-col h2, .mini-cta h3 {
  font-feature-settings: 'kern', 'liga', 'ss01';
  text-wrap: balance;
}
.lede, .section-head p, .two-col p { text-wrap: pretty; }

/* --- Compare table: subtle blue row stripe on the leftmost dimension column --- */
.compare-row:nth-child(even):not(.compare-head) > div:nth-child(1) {
  background: rgba(248, 250, 254, 0.7);
}

/* --- Smoother reveal animation: opacity + slight blur clear --- */
.reveal {
  transition:
    opacity .9s cubic-bezier(.2, .65, .25, 1),
    transform .9s cubic-bezier(.2, .65, .25, 1),
    filter .9s ease;
  filter: blur(6px);
}
.reveal.in { filter: blur(0); }

/* --- Sub-stats card: subtle blue gradient bg --- */
.sub-stats {
  background: linear-gradient(180deg, #FFFFFF, #FAFBFF);
  box-shadow: 0 1px 2px rgba(11, 24, 56, 0.04), 0 12px 28px -12px rgba(11, 92, 255, 0.12);
}

/* --- Illus cards: refined shadow --- */
.illus-card {
  box-shadow:
    0 1px 2px rgba(11, 24, 56, 0.04),
    0 24px 48px -16px rgba(11, 92, 255, 0.18);
}

/* --- Trust label: brand color emphasis --- */
.trust-label strong {
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Smoother scroll alignment under sticky nav --- */
html { scroll-padding-top: 100px; }

/* --- Refined selection --- */
::selection { background: var(--blue); color: #fff; }

/* --- Subpage section paddings unified for rhythm --- */
.band + .band { padding-top: clamp(60px, 8vw, 100px); }

/* --- Subpage hero stat-blocks softer --- */
.sub-stats > div { transition: background .3s ease; }
.sub-stats > div:hover { background: rgba(238, 242, 255, 0.4); }

/* --- Nav drop-down menu: premium shadow --- */
.drop {
  box-shadow:
    0 1px 2px rgba(11, 24, 56, 0.04),
    0 24px 60px -16px rgba(11, 92, 255, 0.22),
    0 8px 20px -8px rgba(11, 24, 56, 0.12);
}

/* --- Strip: subtle inner glow --- */
.strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11, 92, 255, 0.08));
  pointer-events: none;
}

/* --- Footer: subtle top fade into next section --- */
.foot {
  background: linear-gradient(180deg, #FBFCFF, #F5F7FB);
}

/* =========================================================
   FORM STATUS — inline success / error states inside the
   dark CTA contact card. Lives below the submit button.
   ========================================================= */
.form-status {
  grid-column: span 2;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: statusIn .35s cubic-bezier(.2, .65, .25, 1) both;
}
.form-status[hidden] { display: none; }

.form-status--success {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #6EE7B7;
}
.form-status--success strong { color: #A7F3D0; font-weight: 700; }

.form-status--error {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.38);
  color: #FCA5A5;
}

.form-status a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  font-weight: 600;
  margin-left: 4px;
}
.form-status a:hover {
  text-decoration-thickness: 2.5px;
}

@keyframes statusIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Disable submit button visually when it's been sent */
.cta-form button[type="submit"]:disabled {
  opacity: 0.85;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 720px) {
  .form-status { grid-column: span 1; }
}

/* =========================================================
   FEEDBACK FIXES (final overrides)
   - kill the dropdown chevron arrows in nav
   - drop the cursive Instrument Serif font everywhere
   - make the whole page blue with WHITE cards for contrast
   - smoother nav scroll transition
   ========================================================= */

/* 1. ────────── Kill the chevron arrows in nav (the "blue dots") */
.has-drop > a::after,
.has-drop:hover > a::after {
  display: none !important;
  content: none !important;
}

/* 2. ────────── No more cursive — Lato everywhere */
:root {
  --font-serif: 'Lato', 'Inter', sans-serif;
}

.display em,
.sub-hero h1 em,
.section-head h2 em,
.two-col h2 em,
.cta h2 em,
.mini-cta h3 em,
.faq-list summary em,
.hero .display em {
  font-family: var(--font-sans) !important;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.cycle {
  font-family: var(--font-sans) !important;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Hero accents (on dark gradient) stay cyan */
.hero .display em,
.hero .cycle,
.sub-hero h1 em {
  color: var(--cyan) !important;
}

/* Decorative numerals: clean bold Lato, no italic */
.svc-num,
.step-num,
.flow-num {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

/* Quote blockquotes: clean Lato, no italic serif */
.quote blockquote {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em;
}

/* 3. ────────── Whole page blue (with white cards for contrast) */
body {
  background:
    radial-gradient(ellipse 70% 50% at 100% 12%, rgba(11, 92, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 55% 40% at 0% 55%, rgba(84, 98, 220, 0.12), transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(56, 189, 248, 0.10), transparent 60%),
    linear-gradient(180deg, #E0E8F8 0%, #D4DEF7 50%, #DCE4F9 100%) !important;
  background-attachment: fixed !important;
}

/* All tinted bands: richer, more saturated blue */
.pains::before,
.work::before,
.quotes::before {
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(11, 92, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(84, 98, 220, 0.14), transparent 60%),
    linear-gradient(180deg, #CDD9F4 0%, #DCE4F8 100%) !important;
}
.industries::before,
.pricing::before,
.faq::before {
  background:
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(11, 92, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(56, 189, 248, 0.12), transparent 55%),
    linear-gradient(180deg, #D6E0F6 0%, #BFCDF1 100%) !important;
}
.band:nth-of-type(even)::before {
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(11, 92, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(84, 98, 220, 0.12), transparent 60%),
    linear-gradient(180deg, #CDD9F4 0%, #DCE4F8 100%) !important;
}

/* The Trust marquee section: keep the blue brand colour for the strong text */
.trust { background: transparent; }

/* Cards: BRIGHT WHITE on blue page for max contrast */
.pain-card,
.work-card,
.svc-card,
.ind-tile,
.feat,
.price-card,
.quote,
.flow-step,
.faq-list,
.compare-table,
.illus-card,
.int-cat,
.vs-card,
.sub-stats {
  background: #FFFFFF !important;
  border: 1px solid rgba(11, 24, 56, 0.08) !important;
  box-shadow:
    0 1px 2px rgba(11, 24, 56, 0.04),
    0 12px 32px -12px rgba(11, 92, 255, 0.18) !important;
}

/* Keep dark theme cards dark */
.svc-accent,
.price-feature,
.stats-inner,
.cta-inner,
.vs-card.vs-pain,
.vs-card.vs-cure {
  background: revert !important;
  border-color: transparent !important;
}
.svc-accent {
  background: linear-gradient(135deg, var(--hero-1) 0%, var(--blue-deep) 60%, var(--indigo) 100%) !important;
}
.price-feature {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 55%, var(--indigo) 100%) !important;
}
.stats-inner {
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, rgba(11, 92, 255, 0.6), transparent 50%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(56, 189, 248, 0.35), transparent 50%),
    linear-gradient(135deg, var(--hero-1) 0%, var(--blue-deep) 100%) !important;
}
.cta-inner {
  background: linear-gradient(135deg, var(--hero-1) 0%, var(--blue-deep) 50%, var(--indigo) 100%) !important;
}
.vs-card.vs-pain {
  background: linear-gradient(180deg, #FFF5F5, #FFFFFF) !important;
  border: 1px solid #FECACA !important;
}
.vs-card.vs-cure {
  background: linear-gradient(180deg, var(--blue-soft), #FFFFFF) !important;
  border: 1px solid var(--blue) !important;
}

/* Hover lift more dramatic on white cards over blue */
.pain-card:hover,
.work-card:hover,
.svc-card:hover,
.ind-tile:hover,
.feat:hover,
.price-card:hover,
.quote:hover,
.flow-step:hover {
  border-color: var(--blue) !important;
  box-shadow:
    0 1px 2px rgba(11, 24, 56, 0.06),
    0 32px 64px -20px rgba(11, 92, 255, 0.40),
    0 12px 24px -8px rgba(11, 92, 255, 0.24) !important;
  transform: translateY(-4px);
}

/* Footer: deeper blue band */
.foot {
  background: linear-gradient(180deg, #D4DEF7 0%, #BFCDF1 100%) !important;
  border-top-color: rgba(11, 92, 255, 0.15);
}

/* 4. ────────── Nav: cleaner, smoother scroll transition */
.nav {
  transition:
    background .45s cubic-bezier(.2, .65, .25, 1),
    border-color .45s cubic-bezier(.2, .65, .25, 1),
    backdrop-filter .45s cubic-bezier(.2, .65, .25, 1),
    -webkit-backdrop-filter .45s cubic-bezier(.2, .65, .25, 1);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(11, 92, 255, 0.12) !important;
  box-shadow: 0 4px 24px -12px rgba(11, 24, 56, 0.08);
}

/* When nav is over the dark hero (not scrolled), keep transparent + white text */
.nav:not(.scrolled) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Nav links text on scrolled state: dark blue ink */
.nav.scrolled .brand,
.nav.scrolled .nav-links > a,
.nav.scrolled .has-drop > a {
  color: var(--ink) !important;
}
.nav.scrolled .nav-links a:hover,
.nav.scrolled .has-drop > a:hover {
  color: var(--blue) !important;
}
.nav.scrolled .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.nav.scrolled .btn-ghost:hover {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: var(--blue);
}
.nav.scrolled .btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.nav.scrolled .btn-primary:hover {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 10px 26px -8px rgba(11, 92, 255, 0.5);
}

/* 5. ────────── Quotes section blockquote: cleaner avatar pairing */
.quote figcaption strong { font-weight: 700; }

/* 6. ────────── Compare table: cards on blue bg */
.compare-table { background: #FFFFFF; }
.compare-row:nth-child(even):not(.compare-head) > div:nth-child(1) {
  background: rgba(238, 242, 255, 0.6);
}

/* 7. ────────── Strip stays dark for hierarchy */
.strip { background: var(--ink); }

/* 8. ────────── Polish: dropdown menu has the same blue glow */
.drop {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
}

/* 9. ────────── FAQ details: cleaner hover */
.faq-list details[open] summary { color: var(--blue); }

/* 10. ────────── Subpage hero: same dark gradient still, no change */
/* (.hero::before and .sub-hero::before retain their dark gradient) */

/* =========================================================
   FIX — cycling word in hero ("friction / guesswork / …")
   was empty 75% of the loop because translateY(-100%) was
   relative to the 5em-tall track, not the 1em visible window.
   Replaced with absolute em offsets + smooth easing.
   ========================================================= */
.cycle {
  height: 1.05em;                      /* a hair taller so descenders don't clip */
  vertical-align: baseline;
  line-height: 1;
}
.cycle-track {
  animation: cycleWords 10s cubic-bezier(.85, 0, .15, 1) infinite !important;
}
.cycle-track span {
  display: block;
  height: 1em;
  line-height: 1;
  flex-shrink: 0;
}
@keyframes cycleWords {
  0%,  20%  { transform: translateY(0em); }
  25%, 45%  { transform: translateY(-1em); }
  50%, 70%  { transform: translateY(-2em); }
  75%, 95%  { transform: translateY(-3em); }
  100%      { transform: translateY(-4em); }
}
@media (prefers-reduced-motion: reduce) {
  .cycle-track { animation: none !important; transform: translateY(0); }
}

/* =========================================================
   NAV REWORK — always solid white, dark text, smooth dropdowns
   (user feedback: gradient transition was hectic + bad contrast)
   ========================================================= */

/* Always solid white-glass, regardless of scroll state */
.nav,
.nav:not(.scrolled),
.nav.scrolled {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(11, 92, 255, 0.10) !important;
  box-shadow: 0 1px 0 rgba(11, 92, 255, 0.04);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 6px 28px -14px rgba(11, 24, 56, 0.14) !important;
}

/* Brand + links + dropdowns: ALWAYS dark blue ink, no white-on-light wash */
.nav .brand,
.nav .nav-links > a,
.nav .has-drop > a,
.nav:not(.scrolled) .brand,
.nav:not(.scrolled) .nav-links > a,
.nav:not(.scrolled) .has-drop > a,
.nav.scrolled .brand,
.nav.scrolled .nav-links > a,
.nav.scrolled .has-drop > a {
  color: var(--ink) !important;
}
.nav .nav-links a:hover,
.nav .has-drop > a:hover,
.nav:not(.scrolled) .nav-links a:hover,
.nav:not(.scrolled) .has-drop > a:hover {
  color: var(--blue) !important;
}
.nav .nav-links a::after,
.nav:not(.scrolled) .nav-links a::after {
  background: var(--blue) !important;
}

/* Nav toggle bars always dark */
.nav-toggle span,
.nav:not(.scrolled) .nav-toggle span,
.nav.scrolled .nav-toggle span {
  background: var(--ink) !important;
}

/* Buttons in nav: dark theme always (no more white-on-light invisibility) */
.nav .btn-ghost,
.nav:not(.scrolled) .btn-ghost,
.nav.scrolled .btn-ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav .btn-ghost:hover,
.nav:not(.scrolled) .btn-ghost:hover,
.nav.scrolled .btn-ghost:hover {
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}
.nav .btn-primary,
.nav:not(.scrolled) .btn-primary,
.nav.scrolled .btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
.nav .btn-primary:hover,
.nav:not(.scrolled) .btn-primary:hover,
.nav.scrolled .btn-primary:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 10px 26px -8px rgba(11, 92, 255, 0.5) !important;
}

/* =========================================================
   DROPDOWN UX — stable hover, generous trigger, bridge the gap
   so the menu doesn't disappear when you move toward it.
   ========================================================= */

/* Make the trigger huge — full nav height clickable/hoverable */
.has-drop {
  position: relative;
  display: flex;
  align-items: center;
}
.has-drop > a {
  position: relative;
  padding-top: 26px !important;
  padding-bottom: 26px !important;
  margin-top: -26px;
  margin-bottom: -26px;
}

/* Drop sits closer to the trigger + has an invisible hover bridge above
   so the mouse can travel down without losing hover state */
.drop {
  top: calc(100% + 2px) !important;
  transition:
    opacity .18s ease,
    transform .25s cubic-bezier(.2, .65, .25, 1),
    visibility .18s ease !important;
}
.drop::before {
  content: '';
  position: absolute;
  top: -18px;
  left: -10px;
  right: -10px;
  height: 18px;
  background: transparent;
}

/* Dropdown panel: stronger surface, snappier item hover */
.drop {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(11, 92, 255, 0.10) !important;
  box-shadow:
    0 1px 2px rgba(11, 24, 56, 0.05),
    0 28px 64px -20px rgba(11, 92, 255, 0.30),
    0 12px 28px -12px rgba(11, 24, 56, 0.15) !important;
}
.drop a {
  padding: 11px 14px !important;
  transition: background .12s ease, transform .12s ease, padding-left .15s ease !important;
}
.drop a:hover {
  background: var(--blue-soft) !important;
  padding-left: 18px !important;
}
.drop a:hover strong { color: var(--blue); }

/* Keep dropdowns open for a tiny moment after pointer leaves — kills flicker */
.has-drop > a {
  transition-delay: 0s;
}