/* ==========================================================================
   Medix-Link — Healthcare Integration Platform
   Design tokens, layout, and component styles.
   Structure is RTL-ready: logical properties (margin-inline, inset-inline,
   text-align: start/end) are used throughout instead of left/right so the
   page can flip cleanly when dir="rtl" / an Arabic locale is introduced.
   ========================================================================== */

:root {
  /* Brand palette — strict 6-color identity.
     #5D2EE0 purple = main primary accent (fills/gradients, brand-invariant).
     #69FFB4 / #2FC191 mint+green = highlights, icons, glow, active/success states.
     #130935 / #08191B = dark backgrounds. #F2F2F2 = light backgrounds & light text. */
  --color-brand: #5D2EE0;
  --color-primary: #5D2EE0;
  --color-primary-dark: #130935;
  --color-navy: #130935;
  --color-soft-blue: rgba(93, 46, 224, 0.08);
  --color-border: rgba(93, 46, 224, 0.18);
  --color-text: #130935;
  --color-text-muted: rgba(19, 9, 53, 0.65);
  --color-bg: #F2F2F2;
  --color-white: #F2F2F2;
  --color-purple: #5D2EE0;
  --color-green: #2FC191;
  --color-mint: #69FFB4;
  --color-orange: #2FC191;
  --color-red: #5D2EE0;
  --color-heading: #130935;
  --color-surface: #F2F2F2;
  --color-focus-ring: rgba(93, 46, 224, 0.15);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #5D2EE0 0%, #2FC191 100%);
  --gradient-hub: linear-gradient(145deg, #5D2EE0 0%, #130935 100%);
  --gradient-active: linear-gradient(135deg, #69FFB4 0%, #2FC191 100%);

  /* Elevation (tinted, never pure black) */
  --shadow-sm: 0 1px 2px rgba(19, 9, 53, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(93, 46, 224, 0.16), 0 2px 6px rgba(19, 9, 53, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(93, 46, 224, 0.2), 0 4px 12px rgba(19, 9, 53, 0.08);
  --shadow-navy: 0 20px 40px -12px rgba(19, 9, 53, 0.4);

  /* Radius scale — locked: soft cards 20px, small elements 10px, pills full */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1280px;
  --header-height: 76px;

  font-size: 16px;
}

/* ---------- Dark mode overrides (default theme is dark; see main.js) ----------
   Light mode keeps #5D2EE0 purple as the text/icon/border accent (great
   contrast on #F2F2F2). On the dark backgrounds, plain purple text fails
   contrast, so dark mode swaps the TEXT/ICON accent to the brand's green
   highlight (#2FC191) instead — --color-brand stays purple so buttons,
   the logo mark, and gradient fills stay on-brand in both themes. */
html.theme-dark {
  --color-primary: #2FC191;
  --color-primary-dark: #130935;
  --color-heading: #F2F2F2;
  --color-text: rgba(242, 242, 242, 0.92);
  --color-text-muted: rgba(242, 242, 242, 0.62);
  --color-bg: #130935;
  --color-surface: rgba(31, 17, 74, 0.65);
  --color-border: rgba(242, 242, 242, 0.12);
  --color-soft-blue: rgba(47, 193, 145, 0.14);
  --color-focus-ring: rgba(47, 193, 145, 0.2);
}

html.theme-dark .site-header {
  background: rgba(19, 9, 53, 0.72);
}

/* Glass-style cards in dark mode */
html.theme-dark .card,
html.theme-dark .form-card,
html.theme-dark .features-flow-icon,
html.theme-dark .main-nav.is-open {
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
svg { stroke: currentColor; fill: none; }

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

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 999;
}
.skip-link:focus {
  inset-inline-start: 16px;
  top: 16px;
}

section { position: relative; }

.section-pad { padding-block: 96px; }

/* Subtle alternating grid background for a premium dark-mode texture —
   applied to alternating sections (hero stays clean; every other section
   after it gets this), for a consistent look site-wide. */
.bg-grid { overflow: hidden; }
html.theme-dark .bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(620px 380px at 50% 55%, rgba(93, 46, 224, 0.14), transparent 65%),
    linear-gradient(rgba(242, 242, 242, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 242, 242, 0.035) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-soft-blue);
  border: 1px solid var(--color-border);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  line-height: 1.2;
}

.section-desc {
  margin-top: 14px;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.65;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-heading);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.btn-block { width: 100%; }
.btn-sm { padding: 10px 22px; font-size: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: var(--header-height);
  background: rgba(242, 242, 242, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 0 transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  z-index: 500;
}
.site-header.header-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  color: var(--color-heading);
  flex-shrink: 0;
}

/* Same brand logo icon used in the header/footer, reused wherever a diagram
   previously showed a plain "Medix-Link" label — no colored box behind it,
   matching the header/footer treatment. Height is set per diagram below. */
.hub-logo-img {
  display: block;
  width: auto;
  object-fit: contain;
}

/* Logo icon cropped from the high-res brand PNG + a real HTML wordmark,
   so "Medix-Link" is always crisp text instead of a raster.
   No background/border/shadow — .logo already sets color: var(--color-heading),
   which is navy in light mode (matching the source logo) and near-white in
   dark mode, so "Medix" stays readable on both without any box or glow. */
.logo-icon-img {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
}
.logo-accent { color: var(--color-green); }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
  position: relative;
}
.main-nav a:hover { color: var(--color-primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--color-border);
}
.nav-toggle span {
  width: 18px;
  height: 2px;
  margin-inline: auto;
  background: var(--color-heading);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-heading);
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.theme-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.theme-dark .theme-toggle .icon-sun { display: block; }
html.theme-dark .theme-toggle .icon-moon { display: none; }

/* ---------- Language switcher ---------- */
.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: 14px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.lang-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block-start: calc(var(--header-height) + 40px);
  padding-block-end: 18px;
  background: var(--color-bg);
}
/* The corner glows live on a separate masked layer (instead of directly on
   .hero's background) so they fade to nothing before the section's bottom
   edge — a radial-gradient painted straight on .hero is at full strength
   exactly at the box boundary, which reads as a hard line against the
   next section. Masking only this decorative layer, not .hero itself,
   keeps the actual content (text/diagram) untouched. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 420px at 85% 0%, rgba(93, 46, 224, 0.10), transparent 65%),
    radial-gradient(600px 380px at 0% 100%, rgba(47, 193, 145, 0.08), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
}

.hero-head {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.hero-title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  max-width: 480px;
  margin-inline: auto;
  text-wrap: balance;
}
.hero-title .accent { color: var(--color-primary); }

.hero-desc {
  margin-top: 12px;
  margin-inline: auto;
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
}

/* ---------- Hero flow diagram: devices ↔ Medix-Link ↔ systems ---------- */
.hero-flow {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding-inline: 24px;
  /* The diagram's node/arrow positions are hand-tuned art, not prose — keep
     them fixed in both languages instead of mirroring with the page. */
  direction: ltr;
}

/* Arabic node labels still read RTL and right-align; only the diagram's
   own layout direction (set above) stays fixed. */
html[data-lang="ar"] .flow-node-label {
  direction: rtl;
  text-align: right;
}

/* Same fix as above, for the "and many more..." line: without this, the
   "..." (a directionless run at the very end of the string) resolves
   against the diagram's forced LTR base direction and renders before the
   Arabic text instead of after it. */
html[data-lang="ar"] .flow-more {
  direction: rtl;
}

.flow-wrap {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  /* Wider than the arrows SVG's own viewBox (which stays at 1.8/1 with
     preserveAspectRatio="none" so it stretches to match exactly) — this
     widens the diagram without growing its height, so it still fits
     inside the hero without needing more vertical space. */
  aspect-ratio: 2.2 / 1;
  display: flex;
  align-items: stretch;
}

.flow-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.flow-arrows path.flow-line-in,
.flow-arrows path.flow-line-out {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.flow-arrows .flow-line-in { stroke: var(--color-brand); opacity: 0.7; }
.flow-arrows .flow-line-out { stroke: var(--color-green); opacity: 0.7; }
.hero-flow.in-view .flow-arrows path.flow-line-in,
.hero-flow.in-view .flow-arrows path.flow-line-out { stroke-dashoffset: 0; }
.flow-arrows path.flow-line-in:nth-of-type(1) { transition-delay: 0.15s; }
.flow-arrows path.flow-line-in:nth-of-type(2) { transition-delay: 0.35s; }
.flow-arrows path.flow-line-in:nth-of-type(3) { transition-delay: 0.55s; }
.flow-arrows path.flow-line-in:nth-of-type(4) { transition-delay: 0.75s; }
.flow-arrows path.flow-line-in:nth-of-type(5) { transition-delay: 0.95s; }
.flow-arrows path.flow-line-out:nth-of-type(6) { transition-delay: 1.6s; }
.flow-arrows path.flow-line-out:nth-of-type(7) { transition-delay: 1.8s; }
.flow-arrows path.flow-line-out:nth-of-type(8) { transition-delay: 2s; }
.flow-arrows path.flow-line-out:nth-of-type(9) { transition-delay: 2.2s; }
.flow-arrows path.flow-line-out:nth-of-type(10) { transition-delay: 2.4s; }

/* Decorative dashed ring around the hub, echoing the reference's "spoke"
   attachment points — static art, not motion. */
.flow-hub-ring {
  fill: none;
  stroke-width: 0.6;
  stroke-dasharray: 1.6 1.6;
  opacity: 0.55;
}
.flow-hub-ring-in { stroke: var(--color-brand); }
.flow-hub-ring-out { stroke: var(--color-green); }
.flow-hub-dot { stroke: none; opacity: 0.9; }
.flow-hub-dot-in { fill: var(--color-brand); }
.flow-hub-dot-out { fill: var(--color-green); }

/* Idle perpetual flow, kept subtle, once the first draw-in has finished */
@keyframes flow-idle-glow { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.8; } }
.hero-flow.in-view .flow-arrows path.flow-line-in,
.hero-flow.in-view .flow-arrows path.flow-line-out {
  animation: flow-idle-glow 4s ease-in-out 3s infinite;
}

.flow-side {
  flex: 0 0 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.flow-hub-wrap {
  position: relative;
  flex: 0 0 32%;
}

.flow-pill {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-white);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  z-index: 2;
}
.pill-devices { background: linear-gradient(135deg, #5D2EE0, #33206e); }
.pill-systems { background: linear-gradient(135deg, #1f6e56, #2FC191); }

.flow-ellipse {
  flex: 1;
  width: 96%;
  border-radius: 50%;
  box-shadow: var(--shadow-navy);
}
.devices-ellipse { background: radial-gradient(120% 100% at 30% 40%, #4a2f9e, #130935); }
.systems-ellipse { background: radial-gradient(120% 100% at 70% 40%, #1c4d40, #08191B); }

.flow-more {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-green);
  margin-top: 4px;
}

.flow-node {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  z-index: 2;
}
.devices-node { inset-inline-end: calc(77.8% - 14px); }
.systems-node { inset-inline-start: calc(77.8% - 14px); }
.devices-node .flow-node-label { text-align: end; font-size: 13px; }
.systems-node .flow-node-label { text-align: start; font-size: 12px; }

.pos-1 { top: 15%; }
.pos-2 { top: 32.5%; }
.pos-3 { top: 50%; }
.pos-4 { top: 67.5%; }
.pos-5 { top: 85%; }

/* This row's phrase is long enough that, at the icon's original top:15%,
   its box always crosses the ellipse's curve no matter how it wraps (the
   icon sits close to the oval's narrow tip). Nudged down slightly — and
   its one connector line (first .flow-line-out path) nudged to match —
   just enough to clear the curve; kept at its original (non-enlarged)
   size so the nudge stays as small as possible. */
.systems-node.pos-1 { top: 22%; }
.systems-node.pos-1 .flow-node-label {
  font-size: 11.5px;
  max-width: 110px;
}

.flow-node-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.25;
  white-space: normal;
  max-width: 118px;
}


.flow-node-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(242, 242, 242, 0.12), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.flow-node-icon svg { width: 14px; height: 14px; }
.flow-node-icon.icon-purple { color: #5D2EE0; }
.flow-node-icon.icon-teal   { color: #1c8a68; }

/* The ring is the hub's own background (a purple-to-teal gradient); a
   white ::after inset a few px covers the center, leaving only a thin
   glowing rim visible — matching the reference's gradient hub border.
   (A pseudo-element with a negative z-index still paints ON TOP of its
   own parent's background, never behind it, so the ring has to be the
   base layer with the white disc layered above it, not the reverse.) */
.flow-hub {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 58%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(90deg, #5D2EE0, #2FC191);
  z-index: 3;
  box-shadow: 0 0 40px 8px rgba(105, 255, 180, 0.18), var(--shadow-navy);
}
.flow-hub::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-white);
}
.flow-hub-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  color: var(--color-navy);
}
.flow-hub .hub-logo-img { height: 34px; }
.flow-hub .logo-text { font-size: 17px; font-weight: 800; }

/* Subtle glow pulse — starts once the lines have reached the hub, then
   keeps a very soft perpetual idle breathing afterward. */
@keyframes flow-hub-pulse {
  0%, 100% { box-shadow: 0 0 40px 8px rgba(105, 255, 180, 0.18), 0 0 0 0 rgba(105, 255, 180, 0.4), var(--shadow-navy); }
  50% { box-shadow: 0 0 40px 8px rgba(105, 255, 180, 0.18), 0 0 0 18px rgba(105, 255, 180, 0), var(--shadow-navy); }
}
.flow-hub-pulse { animation: flow-hub-pulse 3s ease-out 1.1s infinite; }

/* ---------- Mobile compact fallback ---------- */
.hero-flow-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}
.hero-flow-mobile .flow-hub {
  position: relative;
  top: auto;
  inset-inline-start: auto;
  transform: none;
  width: 160px;
  height: 160px;
}
.flow-mobile-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
/* :first-of-type/:last-of-type would match by tag name, not class — .flow-hub
   is also a sibling <div>, so plain :first-of-type never matches a .flow-mobile-row.
   Sibling combinators target the actual devices/systems rows instead. */
.hero-flow-mobile .flow-hub + .flow-mobile-row { background: linear-gradient(135deg, #4a2f9e, #130935); }
.flow-mobile-row + .flow-mobile-row { background: linear-gradient(135deg, #1c4d40, #08191B); }
.flow-mobile-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-white);
}
.flow-mobile-icons { display: flex; gap: 8px; }

/* ---------- Cards (challenges / features / benefits) ---------- */
.card-grid {
  display: grid;
  gap: 24px;
}
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #2FC191;
}

.badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.badge svg { width: 24px; height: 24px; stroke: currentColor; }
.badge-blue,
.badge-purple,
.badge-red    { background: rgba(93, 46, 224, 0.15); border-color: rgba(93, 46, 224, 0.35); color: #5D2EE0; }
.badge-green,
.badge-orange { background: rgba(47, 193, 145, 0.15); border-color: rgba(47, 193, 145, 0.35); color: #2FC191; }

.card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 10px;
}
.card p {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.challenges { position: relative; overflow: hidden; background: var(--color-bg); }
html.theme-dark .challenges::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(560px 380px at 10% 0%, rgba(93, 46, 224, 0.16), transparent 65%),
    radial-gradient(520px 380px at 100% 100%, rgba(47, 193, 145, 0.12), transparent 65%),
    linear-gradient(rgba(242, 242, 242, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 242, 242, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}

/* ---------- Challenges: stacked, offset, glass cards ---------- */
.challenges-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 780px;
  margin-inline: auto;
}

.challenge-card {
  --offset: 0px;
  --accent-start: var(--color-primary);
  --accent-end: var(--color-primary-dark);
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 30px;
  border-radius: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transform: translateX(var(--offset));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.challenge-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
}
.challenge-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--accent-start), var(--accent-end));
  opacity: 0;
  filter: blur(24px);
  z-index: -1;
  transition: opacity 0.35s ease;
}
.challenge-card:hover {
  transform: translateX(var(--offset)) translateY(-6px);
  box-shadow: var(--shadow-md);
}
.challenge-card:hover::after { opacity: 0.18; }

html.theme-dark .challenge-card {
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.challenge-card:nth-child(1) { --offset: -16px; }
.challenge-card:nth-child(2) { --offset: 18px; }
.challenge-card:nth-child(3) { --offset: -12px; }
.challenge-card:nth-child(4) { --offset: 16px; }

.challenge-card.accent-purple-blue { --accent-start: #69FFB4; --accent-end: #5D2EE0; }
.challenge-card.accent-cyan-teal   { --accent-start: #69FFB4; --accent-end: #2FC191; }
.challenge-card.accent-blue-indigo { --accent-start: #5D2EE0; --accent-end: #130935; }
.challenge-card.accent-teal-purple { --accent-start: #2FC191; --accent-end: #5D2EE0; }

.challenge-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-soft-blue);
  border: 1px solid var(--color-border);
  color: var(--accent-start);
}
.challenge-icon svg { width: 22px; height: 22px; }

.challenge-copy h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 6px;
}
.challenge-copy p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ---------- Features: horizontal connected flow ----------
   Layout style referenced from images/features-reference.png (circular
   icon nodes linked by a dashed connector, title + description below each)
   — rebuilt natively as real markup; the reference image itself is not
   used/embedded anywhere on the page. */
.features-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.features-flow::before {
  content: '';
  position: absolute;
  top: 26px;
  inset-inline: 8%;
  height: 0;
  border-top: 2px dashed var(--color-border);
  z-index: 0;
}

.features-flow-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.features-flow-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.features-flow-icon svg { width: 22px; height: 22px; }
.features-flow-icon.accent-purple { color: var(--color-brand); }
.features-flow-icon.accent-green { color: var(--color-green); }

.features-flow-item h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.features-flow-item p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1100px) {
  .features-flow { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .features-flow::before { display: none; }
}

@media (max-width: 768px) {
  .features-flow { grid-template-columns: 1fr; gap: 28px; }
}

/* Extra breathing room around this specific section boundary so the
   Advanced Features content and the Key Benefits heading never feel like
   they run into each other (both sections share the same background,
   with no divider to lean on). Scoped to these two sections only — the
   shared .section-pad spacing elsewhere is untouched. */
.features.section-pad { padding-bottom: 152px; }
.benefits.section-pad { padding-top: 152px; }

@media (max-width: 768px) {
  .features.section-pad { padding-bottom: 100px; }
  .benefits.section-pad { padding-top: 100px; }
}

/* ---------- Workflow: tab switcher + source/process/destination diagram ---------- */
.workflow { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); }

/* "Medix-Link" in the heading is typed out letter by letter by JS once the
   section scrolls into view (see alignWorkflowTitleTypewriter in main.js);
   the span holds the full text as a no-JS fallback, so it still reads fine
   if JS never runs. The cursor only blinks while .is-typing is present. */
.workflow-title-cursor {
  display: inline-block;
  width: 3px;
  height: 0.8em;
  margin-inline-start: 2px;
  background: currentColor;
  vertical-align: -0.05em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.workflow-title-type.is-typing + .workflow-title-cursor {
  opacity: 1;
  animation: workflow-cursor-blink 0.9s step-end infinite;
}
@keyframes workflow-cursor-blink {
  50% { opacity: 0; }
}

.workflow-switcher {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.workflow-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  margin-bottom: 32px;
}

.workflow-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.workflow-tab svg { width: 17px; height: 17px; flex-shrink: 0; }
.workflow-tab:hover { color: var(--color-primary); }
.workflow-tab.is-active {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

/* ---- Panel frame: two panels cross-fade in place (active sizes the frame,
   the other overlays it via inset:0 — both panels share the same card
   counts/layout so their rendered heights match). ---- */
.workflow-panel-frame {
  position: relative;
  width: 100%;
  max-width: 1120px;
}

.workflow-panel {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px clamp(16px, 4vw, 48px) 36px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.workflow-panel.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.workflow-panel:not(.is-active) {
  position: absolute;
  inset: 0;
}

/* Mirrors .workflow-grid's five flex slots exactly (same flex-basis + gap)
   so each label centers over its own column instead of the panel edges. */
.workflow-panel-labels {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.workflow-side-label {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.workflow-label-spacer { flex: 0 0 104px; }
.workflow-label-spacer-center { flex: 0 0 auto; width: 26%; }

.workflow-col-label {
  display: none;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.workflow-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 28px;
  background: var(--gradient-primary);
  color: var(--color-white);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 15px;
  box-shadow: var(--shadow-md);
  width: fit-content;
}
.workflow-badge-logo { height: 20px; }
.workflow-badge .logo-accent { color: var(--color-mint); }

.workflow-grid {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.workflow-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.workflow-col-center { flex: 0 0 auto; width: 26%; }

.workflow-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.workflow-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-soft-blue);
}
.workflow-card-icon svg { width: 18px; height: 18px; }
.workflow-card-icon.icon-purple { color: #5D2EE0; }
.workflow-card-icon.icon-teal { color: #1c8a68; }

.workflow-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: start;
  min-width: 0;
}
.workflow-card-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.3;
}
.workflow-card-text em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.workflow-steps-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}

.workflow-step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
}
.workflow-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-soft-blue);
  color: #5D2EE0;
}
.workflow-step-icon svg { width: 16px; height: 16px; }
.workflow-step span:last-child {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-heading);
}

/* ---- Connectors: dashed curved data-flow lines from each side card into
   the center box, drawn in a local 0-100 coordinate space (X=0 = source
   side, X=100 = center side, matching document/logical order) and mirrored
   for RTL via scaleX so the flow always visually reads source -> center ->
   destination regardless of language direction. ---- */
.workflow-connector {
  position: relative;
  flex: 0 0 104px;
  align-self: stretch;
}

.workflow-connector-svg,
.workflow-connector-mobile-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.workflow-connector-mobile-svg { display: none; }
html[dir="rtl"] .workflow-connector-svg,
html[dir="rtl"] .workflow-connector-mobile-svg { transform: scaleX(-1); }

.workflow-flow-path {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
  animation: workflow-flow-dash 1.8s linear infinite;
}

@keyframes workflow-flow-dash {
  to { stroke-dashoffset: -26; }
}

/* The arrowhead is a native SVG marker attached to each path's own end
   point (marker-end), so it is always exactly where its line stops —
   never a separately-positioned element that can drift out of place. */
.workflow-arrowhead-shape {
  fill: var(--color-brand);
  stroke: none;
}

/* ---------- Contact / Demo ---------- */
.contact { background: var(--color-bg); }

.contact-heading {
  max-width: 620px;
  margin: 0 auto 48px;
  text-align: center;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 32px;
  align-items: start;
}

.contact-title {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  color: var(--color-heading);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.contact-desc {
  margin-top: 16px;
  margin-inline: auto;
  color: var(--color-text-muted);
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 46ch;
}

.contact-bullets {
  margin-top: 26px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 24px;
}
.contact-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--color-heading);
  font-size: 15px;
}
.contact-bullets .check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-soft-blue);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-bullets svg { width: 13px; height: 13px; stroke: var(--color-primary); }

.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading);
}
.form-group input,
.form-group textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-text-muted); }
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.form-group textarea { resize: vertical; min-height: 110px; }

/* ---------- Demo appointment calendar ---------- */
.appointment-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-heading);
  margin-bottom: 16px;
}
.appointment-block { margin-bottom: 16px; }
.appointment-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.calendar {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
}
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.calendar-month {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-heading);
}
.calendar-nav-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-heading);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.calendar-nav-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.calendar-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  padding-block: 4px;
}
.calendar-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-heading);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.calendar-day.is-empty { visibility: hidden; pointer-events: none; }
.calendar-day:not(:disabled):hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.calendar-day.is-disabled {
  color: var(--color-text-muted);
  opacity: 0.35;
  cursor: not-allowed;
}
.calendar-day.is-today:not(.is-selected) { border-color: var(--color-border); font-weight: 800; }
.calendar-day.is-selected {
  background: var(--gradient-active);
  color: #130935;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.time-slot {
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-heading);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.time-slot:hover { border-color: var(--color-primary); color: var(--color-primary); }
.time-slot.is-selected {
  background: var(--gradient-active);
  border-color: transparent;
  color: #130935;
}

.appointment-summary {
  margin-top: 16px;
  margin-bottom: 22px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-soft-blue);
  border: 1px solid var(--color-border);
  font-size: 13.5px;
  color: var(--color-heading);
}

.form-hint {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(93, 46, 224, 0.08);
  border: 1px solid rgba(93, 46, 224, 0.3);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
}

.contact-form.is-locked .form-group input,
.contact-form.is-locked .form-group textarea {
  opacity: 0.5;
  cursor: not-allowed;
}
.contact-form.is-locked button[type="submit"] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 420px) {
  .time-slots { grid-template-columns: repeat(2, 1fr); }
}

.form-success {
  display: none;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-soft-blue);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  color: var(--color-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.55;
}
.form-success svg { width: 22px; height: 22px; stroke: var(--color-green); flex-shrink: 0; margin-top: 1px; }
.form-success.is-visible { display: flex; }
.contact-form.is-hidden { display: none; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy);
  color: rgba(242, 242, 242, 0.75);
  padding-block-start: 72px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-block-end: 48px;
  border-bottom: 1px solid rgba(242, 242, 242, 0.08);
}

.footer-brand .logo { color: var(--color-white); }
.footer-brand p {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(242, 242, 242, 0.6);
  max-width: 30ch;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(242, 242, 242, 0.06);
  border: 1px solid rgba(242, 242, 242, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease;
}
.footer-social a:hover { background: var(--color-brand); transform: translateY(-2px); }
.footer-social svg { width: 15px; height: 15px; stroke: #F2F2F2; }

.footer-col h4 {
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col li {
  font-size: 14.5px;
  color: rgba(242, 242, 242, 0.6);
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--color-white); }

.footer-bottom {
  padding-block: 24px;
  text-align: center;
  font-size: 13.5px;
  color: rgba(242, 242, 242, 0.45);
}

/* ---------- Scroll reveal (JS-enhanced; content stays visible without JS) ---------- */
.reveal-ready {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-ready.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }

  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}

@media (max-width: 860px) {
  /* Show the exact same source/process/destination composition as desktop —
     columns side by side, curved dashed connectors, badge centered on top —
     just uniformly shrunk to fit, instead of restacking it into a different
     layout. .workflow-panel-frame is rendered at its full desktop width
     (1120px, its own max-width) so every card/connector/label lays out and
     wraps exactly as it does on desktop, then `zoom` (not `transform`)
     shrinks it: unlike transform, zoom changes the element's actual used
     size, so its parent naturally collapses/centers around the shrunk
     result with no separate height calculation needed. */
  .workflow-panel-frame {
    width: 1120px;
    max-width: none;
    zoom: calc((100vw - 48px) / 1120px);
  }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-inner { position: relative; }

  .main-nav.is-open {
    display: block;
    position: absolute;
    top: var(--header-height);
    inset-inline: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: 20px 24px 28px;
  }
  .main-nav.is-open ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .header-actions .btn-sm { display: none; }
  /* Logo + remaining action icons are ~5px wider than the viewport at very
     narrow widths (e.g. 390px) once the CTA button is hidden — tightening
     the gap keeps the nav-toggle button fully on-screen. */
  .header-actions { gap: 10px; }

  .section-pad { padding-block: 64px; }

  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }

  .workflow-tabs { width: 100%; max-width: 340px; }
  .workflow-tab { flex: 1; padding: 11px 14px; font-size: 13.5px; }
  .workflow-tab svg { width: 15px; height: 15px; }
  .workflow-panel { padding: 24px 18px 28px; border-radius: var(--radius-md); }
  .workflow-badge { font-size: 13.5px; padding: 9px 18px; }

  /* "How it works" diagram: keep the exact desktop composition (source cards |
     connector | center steps | connector | destination cards, side by side)
     instead of the tablet `zoom` trick — zoom shrinks text/icons in lockstep
     with the layout, and at phone widths that makes them unreadably tiny.
     Cancel the 860px zoom here and re-lay-out with real flex sizes instead,
     so column proportions still match desktop but text/icons/gaps can be
     tuned to stay legible. */
  .workflow-panel-frame { width: 100%; max-width: none; zoom: 1; }

  .workflow-panel-labels { margin-bottom: 10px; }
  .workflow-side-label { font-size: 10px; }
  .workflow-label-spacer { flex: 0 0 16px; }
  .workflow-label-spacer-center { width: 28%; }

  .workflow-grid { gap: 4px; }
  .workflow-col { gap: 6px; }
  .workflow-col-center { width: 28%; }

  .workflow-card { gap: 6px; padding: 6px 8px; border-radius: var(--radius-sm); }
  .workflow-card-icon { width: 20px; height: 20px; }
  .workflow-card-icon svg { width: 11px; height: 11px; }
  .workflow-card-text { gap: 0; }
  .workflow-card-text strong { font-size: 8.5px; line-height: 1.25; }
  .workflow-card-text em { font-size: 7px; line-height: 1.25; }

  .workflow-steps-card { padding: 6px; gap: 4px; border-radius: var(--radius-md); }
  .workflow-step { gap: 6px; padding: 5px 7px; border-radius: var(--radius-sm); }
  .workflow-step-icon { width: 16px; height: 16px; }
  .workflow-step-icon svg { width: 9px; height: 9px; }
  .workflow-step span:last-child { font-size: 7.5px; line-height: 1.25; }

  /* Swap the desktop's curved multi-line connector (drawn for a wide box)
     for the simpler straight single-arrow connector — it already exists in
     the markup for exactly this case, just unused until now. */
  .workflow-connector { flex: 0 0 16px; }
  .workflow-connector-svg { display: none; }
  .workflow-connector-mobile-svg { display: block; }
  .workflow-flow-path { stroke-width: 4; }

  /* Card offsets are a desktop flourish; keep them centered and compact on small screens */
  .challenge-card:nth-child(1),
  .challenge-card:nth-child(2),
  .challenge-card:nth-child(3),
  .challenge-card:nth-child(4) { --offset: 0px; }
  .challenges-stack { gap: 18px; }
  .challenge-card { padding: 20px 22px; gap: 16px; }

  /* CTA buttons read oversized next to the scaled-down mobile diagram
     below them — trim padding/font here only; colors, radius, and the
     .hero-actions column-stack/full-width rule (max-width: 480px) are
     untouched. */
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding: 9px 18px; font-size: 12.5px; }

  /* Show the exact same devices↔hub↔systems diagram as desktop on mobile,
     just uniformly scaled down to fit — no separate simplified layout.
     .flow-wrap keeps its desktop-authored 960px layout width (so every
     icon/label/position inside it is laid out identically to desktop);
     it's then scaled as a whole via transform so all of its fixed-px and
     percentage-based children shrink together in the same proportions.
     The wrapper's height is computed to match the shrunk diagram's own
     visual height exactly (rather than aspect-ratio on the wrapper's own
     border-box, which would count its 24px side padding twice and leave
     a slack gap below the diagram). */
  .hero-flow {
    overflow: hidden;
    padding-inline: 6px;
    height: calc((100vw - 12px) / 2.2);
  }
  .hero-flow .flow-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    width: 960px;
    max-width: none;
    margin-left: -480px;
    transform-origin: top center;
    transform: scale(calc((100vw - 12px) / 960px));
  }
  .hero-flow-mobile { display: none; }

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

@media (min-width: 769px) {
  .hero-flow-mobile { display: none; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .form-card { padding: 26px; }
}