/* ==========================================================================
   FPMS — Fusion Pump Monitoring System — Landing Page Styles
   WOW Digital Information Technology
   ========================================================================== */

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

html,
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
table,
th,
td {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

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

/* No contenteditable / cursor:text / stray tabindex exists anywhere in
   this codebase — the blinking caret some browsers render when clicking
   plain text (e.g. Edge/Chrome "caret browsing", F7) is a browser feature
   applied to any page, not something this markup turns on. This just
   neutralizes its visual caret on ordinary content while leaving it fully
   functional inside real form fields. */
*,
*::before,
*::after {
  caret-color: transparent;
}

input,
textarea,
select,
[contenteditable='true'] {
  caret-color: auto;
  cursor: text;
}

/* Explicit, not just implied by the browser default: ordinary content
   never looks editable, only real controls ever show a text cursor. */
main,
section,
div,
article,
aside,
header,
footer,
h1, h2, h3, h4, h5, h6,
p,
span {
  cursor: default;
}

a {
  cursor: pointer;
}

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

/* Higher specificity than the bare span/div/h*/p rule above: any icon or
   label wrapped in a span/svg/div inside a link or button must keep
   showing the hand cursor across its whole clickable area, not flip to
   "default" the moment the mouse is over the inner label. */
a *,
button * {
  cursor: pointer;
}

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

input,
textarea {
  font: inherit;
}

/* ---------- Design tokens (FPMS logo brand system) ----------
   Palette extracted from the new FPMS logo: purple/violet, mint/green,
   dark navy, and a soft light-neutral background. */
:root {
  /* Canonical brand tokens — extracted from the FPMS logo */
  --color-primary: #6b4cc2;        /* logo purple/violet */
  --color-primary-dark: #52389f;   /* pressed/hover state */
  --color-secondary: #19142d;      /* logo dark navy (near-black) */
  --color-accent: #35c992;         /* logo mint/green */
  --color-accent-strong: #1f9e73;  /* darker step of the mint ramp — accessible on light bg */
  --color-background: #f7f6fb;     /* off-white page canvas, from the logo's soft light-neutral */
  --color-background-rgb: 247, 246, 251; /* same value as --color-background, as r,g,b — needed for the translucent header (rgba() can't read a hex custom property directly) */
  --color-surface: #ffffff;
  --color-surface-alt: #f1eef7;    /* soft violet-tinted light-neutral, matching the new background */
  --color-text: #19142d;
  --color-muted: #6e6580;
  --color-border: #e7e2f2;
  --color-on-dark: #ffffff; /* fixed — text/icons on permanently-dark brand panels (hero, security, footer, architecture). Never overridden by the dark theme, because those panels don't get any darker. */

  /* Status colors — kept in the brand's jewel-tone family rather than generic traffic-light colors */
  --color-success: var(--color-accent-strong);
  --color-warning: #c6892e;
  --color-alarm: #c1473f;
  --color-offline: #8a8398;

  --font-heading: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-logo: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; /* matches the logo's own clean bold sans wordmark */
  --font-arabic: 'Cairo', 'IBM Plex Sans Arabic', 'Tajawal', ui-sans-serif, system-ui, -apple-system, sans-serif; /* Plus Jakarta Sans has no Arabic glyphs */

  --radius-card: 1.1rem;
  --radius-button: 0.85rem;
  --shadow-card: 0 1px 2px rgba(21, 10, 46, 0.05), 0 8px 24px -8px rgba(21, 10, 46, 0.12);
  --shadow-panel: 0 2px 10px rgba(21, 10, 46, 0.08), 0 28px 56px -18px rgba(21, 10, 46, 0.2);

  /* ---- Legacy component aliases ----
     Every existing component rule below reads colors through these names.
     They all resolve back to the canonical tokens above, so the whole
     site re-themes from one place with no hardcoded colors in components. */
  --bg: var(--color-background);
  --navy: var(--color-secondary);
  --medblue: var(--color-primary);
  --cyan: var(--color-accent);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --alert: var(--color-alarm);
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --cardline: var(--color-border);
  --white: var(--color-surface);

  --success-10: rgba(31, 158, 115, 0.12);
  --warning-10: rgba(198, 137, 46, 0.12);
  --alert-10: rgba(193, 71, 63, 0.1);
  --medblue-10: rgba(107, 76, 194, 0.1);
  --cyan-10: rgba(53, 201, 146, 0.18);
  --muted-10: rgba(110, 101, 128, 0.12);

  --radius-md: 0.75rem;
  --radius-lg: var(--radius-card);
  --radius-xl: 1.25rem;
  --radius-full: 999px;

  --container: 1280px;
}

/* ---------- Dark theme ----------
   Overrides only the canonical --color-* tokens. Every component below
   reads colors through the legacy aliases (--medblue, --ink, --white, ...)
   which are declared once in :root as var(--color-*) references — so
   changing the canonical tokens here re-themes the entire site with zero
   changes to component rules. --color-secondary and --color-on-dark are
   deliberately NOT overridden: the hero/security/footer/architecture
   panels are already permanently dark brand surfaces in light mode, so
   they stay exactly as-is in dark mode too. */
:root[data-theme='dark'] {
  --color-primary: #8b6fe8;
  --color-primary-dark: #6a4fcb;
  --color-accent: #4cdb9e;
  --color-accent-strong: #3ed694;
  --color-background: #150f28;
  --color-background-rgb: 21, 15, 40;
  --color-surface: #1c1339;
  --color-surface-alt: #221545;
  --color-text: #f1eefa;
  --color-muted: #a79fc0;
  --color-border: #362a5f;

  --color-success: var(--color-accent-strong);
  --color-warning: #e7b860;
  --color-alarm: #f0837a;
  --color-offline: #a79fc0;

  --success-10: rgba(62, 214, 148, 0.16);
  --warning-10: rgba(231, 184, 96, 0.16);
  --alert-10: rgba(240, 131, 122, 0.18);
  --medblue-10: rgba(139, 111, 232, 0.2);
  --cyan-10: rgba(76, 219, 158, 0.16);
  --muted-10: rgba(167, 159, 192, 0.14);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-panel: 0 4px 18px rgba(0, 0, 0, 0.45), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

:root[data-theme='dark'] body {
  background-color: var(--color-background);
}

/* ---------- Arabic typography ----------
   Plus Jakarta Sans has no Arabic glyphs, so every Arabic string was
   silently falling back to whatever font the OS substituted — different
   elements could resolve to different fallback fonts/weights, which is
   why headings, cards and paragraphs looked visually inconsistent.
   Overriding the two canonical font tokens re-themes every heading and
   body element at once, the same way the dark-theme block above re-themes
   colors — no per-component selectors needed. */
html[lang='ar'] {
  --font-heading: var(--font-arabic);
  --font-body: var(--font-arabic);
}

html[lang='ar'] body {
  line-height: 1.75;
  letter-spacing: normal;
}

html[lang='ar'] .h1,
html[lang='ar'] .integration-section .section-heading h2 {
  letter-spacing: normal;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
}

html {
  scroll-behavior: smooth;
}

#overview,
#dashboard,
#workflow,
#integration,
#security,
#demo,
#meeting {
  scroll-margin-top: 5.5rem;
}

::selection {
  background-color: var(--cyan);
  color: var(--color-on-dark);
}

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

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

.icon {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 2rem;
  }
}

.section {
  padding-block: 5rem;
}

@media (max-width: 640px) {
  .section {
    padding-block: 3.5rem;
  }
}

.section--white {
  background-color: var(--white);
}

.section--navy {
  position: relative;
  overflow: hidden;
  background-color: var(--navy);
  color: var(--color-on-dark);
}

.section--navy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(45% 60% at 8% 0%, rgba(53, 201, 146, 0.14), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(107, 76, 194, 0.28), transparent 70%);
}

.section--navy > .container {
  position: relative;
  z-index: 1;
}

.stack {
  display: flex;
  flex-direction: column;
}

.gap-xs { gap: 0.5rem; }
.gap-sm { gap: 0.75rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }
.gap-2xl { gap: 3rem; }
.gap-3xl { gap: 3.5rem; }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--cardline);
  background-color: var(--white);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--medblue);
}

.eyebrow__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--cyan);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 42rem;
}

.section-heading--center {
  text-align: center;
  align-items: center;
  margin-inline: auto;
}

.section-heading--left {
  text-align: left;
  align-items: flex-start;
}

.section-heading h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.section-heading p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted);
}

.section--navy .section-heading h2 {
  color: var(--color-on-dark);
}

.section--navy .section-heading p {
  color: rgba(255, 255, 255, 0.7);
}

.h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
  color: var(--ink);
}

.lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 34rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: var(--radius-button);
  padding: 0.9rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-primary:active,
.btn-secondary:active,
.btn-cyan:active {
  transform: translateY(1px);
}

.btn-primary {
  background-color: var(--medblue);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-card);
}

.btn-primary:hover {
  background-color: var(--navy);
}

.btn-secondary {
  background-color: var(--white);
  color: var(--ink);
  border: 1px solid var(--cardline);
}

.btn-secondary:hover {
  border-color: var(--medblue);
  color: var(--medblue);
}

.btn-cyan {
  background-color: var(--cyan);
  color: var(--navy);
}

.btn-cyan:hover {
  background-color: var(--white);
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background-color: rgba(var(--color-background-rgb), 0.38);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  background-color: rgba(var(--color-background-rgb), 0.62);
  border-bottom-color: var(--color-border);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.18);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand__mark {
  flex-shrink: 0;
  display: block;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__name {
  font-family: var(--font-logo);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.brand__name--fusion {
  color: var(--ink);
}

.brand__name--pump {
  color: var(--medblue);
}

.brand__company {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav-desktop a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.2s ease;
}

.nav-desktop a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 2px;
  border-radius: 999px;
  background-color: var(--medblue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nav-desktop a:hover,
.nav-desktop a:focus-visible {
  color: var(--medblue);
}

.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after {
  transform: scaleX(1);
}

.header-cta {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background-color: var(--color-surface-alt);
  font-size: 1.25rem;
  color: var(--ink);
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--cardline);
  background-color: rgba(var(--color-background-rgb), 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 1.5rem 1.25rem;
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-menu a {
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.mobile-menu a:hover {
  background-color: var(--bg);
}

.mobile-menu .btn {
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
  }
  .header-cta {
    display: block;
  }
  .nav-toggle {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem 5rem;
  background-color: var(--color-secondary);
  color: var(--color-on-dark);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(50% 45% at 12% 12%, rgba(53, 201, 146, 0.22), transparent 70%),
    radial-gradient(55% 55% at 88% 28%, rgba(107, 76, 194, 0.35), transparent 70%),
    radial-gradient(40% 40% at 30% 95%, rgba(53, 201, 146, 0.1), transparent 70%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%);
  mask-image: linear-gradient(to bottom, black, transparent 80%);
  opacity: 0.7;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  text-align: center;
}

.hero .h1 {
  color: var(--color-on-dark);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
}

/* Hero title accent: the closing clause of the headline only — rest of
   the line stays the fixed white above. Purple -> mint, the logo's own
   two accent colors, brought into the text itself. Hardcoded to the
   bright/dark-mode-style values (not the theme-toggle tokens) because
   the hero panel is a fixed-dark surface in both site themes. */
.hero-title__gradient {
  background: linear-gradient(90deg, #8b6fe8 0%, #6ba5c3 50%, #4cdb9e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(139, 111, 232, 0.18));
}

html[dir='rtl'] .hero-title__gradient {
  background: linear-gradient(270deg, #8b6fe8 0%, #6ba5c3 50%, #4cdb9e 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero .lede {
  color: rgba(255, 255, 255, 0.72);
}

.hero .btn-secondary {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-on-dark);
}

.hero .btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 44rem;
  margin-inline: auto;
}

.hero__copy .lede {
  margin-inline: auto;
}

.hero__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.62);
}

.hero__note span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero__visual {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 40rem;
}

@media (min-width: 640px) {
  .hero__visual {
    max-width: 46rem;
  }
}

@media (min-width: 900px) {
  .hero__visual {
    max-width: 60rem;
  }
}

@media (min-width: 1200px) {
  .hero__visual {
    max-width: 74rem;
  }
}

/* Dashboard mockup (hero) */
.mockup {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid var(--cardline);
  background-color: var(--white);
  box-shadow: var(--shadow-panel), 0 0 70px -22px rgba(53, 201, 146, 0.45), 0 0 40px -18px rgba(107, 76, 194, 0.3);
  padding: 0.6rem;
}

.mockup__topbar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-bottom: 1px solid var(--cardline);
  padding: 0.25rem 0.5rem 0.65rem;
}

.mockup__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.mockup__dot--alert { background-color: rgba(193, 71, 63, 0.6); }
.mockup__dot--warning { background-color: rgba(198, 137, 46, 0.6); }
.mockup__dot--success { background-color: rgba(34, 154, 107, 0.6); }

.mockup__url {
  margin-inline-start: 0.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  padding: 0.6rem;
}

.mockup__sidebar {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  width: 8.5rem;
  border-radius: 0.75rem;
  background-color: var(--navy);
  padding: 0.75rem;
  color: var(--color-on-dark);
}

.mockup__sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 0.5rem;
}

.mockup__sidebar-item {
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.mockup__sidebar-item.is-active {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-on-dark);
}

.mockup__main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.mockup__kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (min-width: 900px) {
  .mockup__kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mockup__kpi {
  border-radius: 0.75rem;
  border: 1px solid var(--cardline);
  background-color: var(--bg);
  padding: 0.6rem 0.75rem;
}

.mockup__kpi-label {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.mockup__kpi-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
}

.mockup__table-wrap {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--cardline);
  overflow-x: auto;
}

.mockup__table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.75rem;
  text-align: start;
}

.mockup__table thead {
  background-color: var(--bg);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.mockup__table th,
.mockup__table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--cardline);
}

.mockup__table tbody tr:last-child td {
  border-bottom: none;
}

.mockup__table td:first-child {
  font-weight: 600;
  color: var(--ink);
}

.mockup__table td:nth-child(2),
.mockup__table td:nth-child(3) {
  color: var(--muted);
}

.mockup__caption {
  padding: 0 0.25rem;
  font-size: 0.625rem;
  color: var(--muted);
}

.floating-card {
  position: absolute;
  display: none;
  align-items: center;
  gap: 0.65rem;
  width: 12rem;
  border-radius: 0.75rem;
  border: 1px solid var(--cardline);
  background-color: var(--white);
  box-shadow: var(--shadow-card);
  padding: 0.75rem;
  z-index: 5;
  animation: floatSlow 5s ease-in-out infinite;
}

.floating-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  font-size: 1rem;
}

.floating-card__text {
  min-width: 0;
}

.floating-card__title {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floating-card__sub {
  display: block;
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floating-card--1 { left: -3%; top: 6%; animation-delay: 0s; }
.floating-card--2 { right: -3%; top: 20%; animation-delay: 0.6s; }
.floating-card--3 { left: -4%; bottom: 14%; animation-delay: 1.1s; }
.floating-card--4 { right: -2%; bottom: 4%; animation-delay: 1.6s; }

.tone-alert { color: var(--alert); background-color: var(--alert-10); }
.tone-blue { color: var(--medblue); background-color: var(--medblue-10); }
.tone-amber { color: var(--warning); background-color: var(--warning-10); }
.tone-green { color: var(--success); background-color: var(--success-10); }
.tone-cyan { color: var(--cyan); background-color: var(--cyan-10); }
.tone-muted { color: var(--muted); background-color: var(--muted-10); }

/* Floating alert cards sit at negative left/right/bottom offsets relative
   to .hero__visual, which only gets real side clearance once its own
   max-width steps up (see the min-width:900px rule above). Revealing
   them at 640px — before that clearance exists — let them clip against
   .hero's overflow:hidden edge on phones/tablets, reading as "cards
   falling off the hero". 1024px matches where the sidebar also appears:
   the point the layout has clearly moved past mobile/tablet density. */
@media (min-width: 1024px) {
  .floating-card {
    display: flex;
  }

  .mockup__sidebar {
    display: flex;
  }
}

/* Brand corner-curve frame — signature WOWIT motif reused on every dark section */
.brand-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Mockup tilt (JS-driven) */
.mockup {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Hero mini dashboard controls */
.mockup__sidebar-item {
  text-align: start;
  width: 100%;
}

.mockup__sidebar-item--static {
  opacity: 0.5;
  cursor: default;
}

.badge--sm {
  padding: 0.2rem 0.5rem;
  font-size: 0.62rem;
  gap: 0.3rem;
}

.filter-group--sm .filter-btn {
  padding: 0.32rem 0.6rem;
  font-size: 0.68rem;
}

.hero-pump-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

@media (min-width: 480px) {
  .hero-pump-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .hero-pump-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.hero-pump-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-radius: 0.65rem;
  border: 1px solid var(--cardline);
  background-color: var(--white);
  padding: 0.55rem 0.7rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-pump-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.hero-pump-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.hero-pump-card__room {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
}

.hero-pump-card__room span {
  font-weight: 500;
  color: var(--muted);
}

.hero-pump-card__drug {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: var(--muted);
}

.hero-pump-card__drug strong {
  font-weight: 600;
  color: var(--ink);
}

.pump-grid__empty--hero {
  padding: 1.25rem 0;
  font-size: 0.75rem;
}

/* ---------- Hero: mobile/tablet safety + light density trim ----------
   Desktop layout above is untouched. This only: (1) belt-and-suspenders
   against horizontal overflow from anything inside the hero visual, and
   (2) trims the busiest dashboard mockup on true single-column phones —
   the 4th ICU pump card and the caption line are the two least essential
   pieces on a very small screen, so they're the ones dropped, not a
   parallel "mobile mockup" that would fork the markup. */
@media (max-width: 1023px) {
  .hero,
  .hero__grid,
  .hero__visual,
  .mockup {
    max-width: 100%;
    overflow-x: hidden;
  }
}

@media (max-width: 479px) {
  .hero-pump-grid[data-ward-panel] .hero-pump-card:nth-child(n + 4) {
    display: none;
  }

  .mockup__caption {
    display: none;
  }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ---------- Status badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius-full);
  padding: 0.3rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.badge__dot {
  position: relative;
  display: inline-flex;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}

.badge--running { background-color: var(--success-10); color: var(--success); }
.badge--running .badge__dot { background-color: var(--success); }

.badge--warning { background-color: var(--warning-10); color: var(--warning); }
.badge--warning .badge__dot { background-color: var(--warning); }

.badge--alarm { background-color: var(--alert-10); color: var(--alert); }
.badge--alarm .badge__dot { background-color: var(--alert); }
.badge--alarm .badge__dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--alert);
  animation: pulseDot 1.8s infinite;
}

.badge--offline { background-color: var(--muted-10); color: var(--muted); }
.badge--offline .badge__dot { background-color: var(--muted); }

/* ---------- Generic card grid ---------- */
.grid {
  display: grid;
  gap: 1.25rem;
}

.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-5 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--cardline);
  background-color: var(--white);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-panel);
  border-color: rgba(107, 76, 194, 0.25);
}

.card--flat {
  box-shadow: none;
  background-color: var(--bg);
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  font-size: 1.25rem;
}

.card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

.card__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

.card__text--strong {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}

.closing-statement {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--navy);
}

/* ---------- System Capabilities (Features) ---------- */
.features-audience {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 2rem;
  border-radius: var(--radius-card);
  background-color: var(--color-secondary);
  padding: 1.1rem 1.75rem;
}

.features-audience__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.features-audience__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
}

.features-audience__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.features-audience__list .icon {
  color: var(--color-accent);
}

.features-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .features-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

.features-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

@media (min-width: 640px) {
  .features-bottom {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-bottom {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-panel);
  border-color: rgba(107, 76, 194, 0.28);
}

.feature-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.85rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.06);
  box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 16%, transparent);
}

.feature-card__title {
  font-weight: 700;
  color: var(--ink);
}

.feature-card__text {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.65;
}

.feature-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Flagship tier — the standout feature */
.feature-card--flagship {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2rem;
}

@media (min-width: 768px) {
  .feature-card--flagship {
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    padding: 2.25rem;
  }
}

.feature-card--flagship .feature-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.feature-card--flagship .feature-card__icon {
  width: 3.5rem;
  height: 3.5rem;
}

.feature-card--flagship .feature-card__title {
  font-size: 1.375rem;
}

.feature-card--flagship .feature-card__text {
  font-size: 0.9375rem;
}

.feature-card__strip {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  border-radius: calc(var(--radius-card) - 0.3rem);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}

/* Large tier */
.feature-card--large .feature-card__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.feature-card--large .feature-card__title {
  font-size: 1.125rem;
}

/* Small tier */
.feature-card--sm {
  padding: 1.35rem;
  gap: 0.75rem;
}

.feature-card--sm .feature-card__icon {
  width: 2.25rem;
  height: 2.25rem;
}

.feature-card--sm .feature-card__title {
  font-size: 1rem;
}

/* ---------- Dashboard showcase ---------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .kpi-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kpi-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--cardline);
  background-color: var(--white);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-panel);
}

.kpi-card__label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.kpi-card__value {
  margin-top: 0.25rem;
  font-size: 1.875rem;
  font-weight: 800;
}

.showcase-panel {
  border-radius: 1.5rem;
  border: 1px solid var(--cardline);
  background-color: var(--white);
  box-shadow: var(--shadow-panel);
  padding: 1rem;
}

@media (min-width: 640px) {
  .showcase-panel {
    padding: 1.5rem;
  }
}

.showcase-panel__controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid var(--cardline);
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .showcase-panel__controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.tab-group,
.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 639px) {
  .showcase-panel .tab-group,
  .showcase-panel .filter-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }

  .showcase-panel .tab-btn,
  .showcase-panel .filter-btn {
    flex-shrink: 0;
  }
}

.tab-btn {
  border-radius: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: var(--bg);
  color: var(--muted);
}

.tab-btn.is-active {
  background-color: var(--navy);
  color: var(--color-on-dark);
}

.filter-btn {
  border-radius: var(--radius-full);
  border: 1px solid var(--cardline);
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--white);
  color: var(--muted);
}

.filter-btn.is-active {
  border-color: var(--medblue);
  background-color: var(--medblue-10);
  color: var(--medblue);
}

.showcase-panel__body {
  display: grid;
  gap: 1.5rem;
  padding-top: 1.5rem;
}

@media (min-width: 1024px) {
  .showcase-panel__body {
    grid-template-columns: 1fr 300px;
  }
}

.pump-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  align-content: start;
}

@media (min-width: 640px) {
  .pump-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .pump-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pump-grid__empty {
  grid-column: 1 / -1;
  padding: 2.5rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Pump status card */
.pump-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--cardline);
  background-color: var(--white);
  padding: 1rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  animation: dashCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dashCardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pump-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-panel);
}

.pump-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.pump-card__room {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}

.pump-card__room span {
  font-weight: 500;
  color: var(--muted);
}

.pump-card__meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.pump-card__drug {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--bg);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--ink);
}

.pump-card__drug strong {
  font-weight: 600;
}

.pump-card__drug .icon {
  color: var(--medblue);
}

.pump-card__flag {
  margin: -0.4rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
}

.pump-card__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  font-size: 0.75rem;
}

.pump-card__stat {
  border-radius: 0.5rem;
  border: 1px solid var(--cardline);
  padding: 0.5rem 0.65rem;
}

.pump-card__stat-label {
  color: var(--muted);
}

.pump-card__stat-value {
  font-weight: 600;
  color: var(--ink);
}

.pump-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--cardline);
  padding-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.pump-card__foot span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pump-card__foot .icon--ok { color: var(--success); }
.pump-card__foot .icon--warn { color: var(--warning); }
.pump-card__foot .icon--bad { color: var(--alert); }

/* Alert side panel */
.alert-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: var(--radius-card);
  background-color: var(--bg);
  border: 1px solid var(--cardline);
  padding: 1rem;
}

.alert-panel h3 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}

#dashAlertList {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--white);
  box-shadow: var(--shadow-card);
  padding: 0.75rem;
  animation: dashCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.alert-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.alert-item__body {
  min-width: 0;
  flex: 1;
}

.alert-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.alert-item__desc {
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  color: var(--muted);
  line-height: 1.4;
}

.alert-item__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

.alert-item__sub {
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-item__time {
  margin-top: 0.15rem;
  font-size: 0.625rem;
  color: var(--muted);
}

.sample-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  color: var(--muted);
  padding-top: 0.25rem;
}

/* #workflow's .section--navy must NOT clip: an ancestor with
   overflow:hidden (even with height:auto, even though nothing visually
   overflows it) forces browsers to compute position:sticky relative to
   that ancestor's scroll container in a way that breaks the pin here —
   confirmed by an actual headless-browser scroll test where the sticky
   node's rect.top tracked scrollY 1:1 instead of staying fixed. Security
   still gets its clipped glow via the shared .section--navy rule; this
   ID-scoped override only touches #workflow. */
#workflow.section--navy {
  overflow: visible;
}

/* ---------- Workflow: scroll-progress-driven active step ----------
   Lives inside the permanently-dark .section--navy panel, so every color
   below is a fixed dark-surface value (matching .integration-card),
   not a light/dark theme-toggle token.

   .workflow-scroll is a tall runway (7 steps -> ~240vh). Its
   .workflow-scroll__sticky child stays pinned in the viewport while the
   user scrolls through that runway. script.js reads
   -workflowScroll.getBoundingClientRect() on every scroll/rAF tick and
   turns "how far the user has scrolled through the runway" into a single
   0..1 progress value, then maps that value onto one of 7 fixed bands to
   get exactly one activeStep. There is no timer anywhere in this chain —
   moving the mouse wheel is the only thing that can change activeStep,
   and only one step is ever "active" at a time (previous = completed,
   next = muted). Under prefers-reduced-motion the whole pin/scroll-math
   mechanism is skipped entirely (see .is-static below). */
.workflow-scroll {
  position: relative;
  min-height: 240vh;
}

.workflow-scroll.is-static {
  min-height: auto;
}

.workflow-scroll__sticky {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-block: 1rem;
}

.workflow-scroll.is-static .workflow-scroll__sticky {
  position: static;
}

/* Step track: compact numbered nodes + connector, always visible while pinned. */
.workflow-track {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.workflow-track__item {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.workflow-track__item:last-child {
  flex: 0 0 auto;
}

.workflow-track__node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(53, 201, 146, 0.14), rgba(107, 76, 194, 0.22)), rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 800;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease,
    background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.workflow-track__check {
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.workflow-track__item.is-active .workflow-track__node {
  transform: scale(1.15);
  border-color: rgba(53, 201, 146, 0.55);
  box-shadow: 0 0 0 4px rgba(53, 201, 146, 0.16);
}

.workflow-track__item.is-completed .workflow-track__node {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-secondary);
}

.workflow-track__item.is-completed .workflow-track__number {
  opacity: 0;
}

.workflow-track__item.is-completed .workflow-track__check {
  opacity: 1;
  transform: scale(1);
}

.workflow-track__item.is-muted .workflow-track__node {
  opacity: 0.4;
}

.workflow-track__item--highlight .workflow-track__node {
  width: 2.6rem;
  height: 2.6rem;
}

.workflow-track__connector {
  position: relative;
  flex: 1;
  height: 2px;
  min-width: 0.75rem;
  margin-inline: 0.35rem;
  background-color: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

.workflow-track__item:last-child .workflow-track__connector {
  display: none;
}

.workflow-track__connector-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-accent), var(--medblue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html[dir='rtl'] .workflow-track__connector-fill {
  transform-origin: right;
}

.workflow-track__connector.is-filled .workflow-track__connector-fill {
  transform: scaleX(1);
}

/* Active-step detail card: 7 panels stacked on top of each other, only
   the active one is visible — swapping is a pure opacity/transform
   crossfade driven by the same activeStep value, never a text rewrite. */
.workflow-card {
  position: relative;
  min-height: 15.5rem;
  border-radius: 1.75rem;
  background: radial-gradient(120% 140% at 15% -10%, rgba(53, 201, 146, 0.14), transparent 55%),
    radial-gradient(130% 140% at 100% 120%, rgba(107, 76, 194, 0.22), transparent 55%), rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.workflow-card__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  padding: 2rem;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.workflow-card__panel.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.workflow-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(53, 201, 146, 0.22), rgba(107, 76, 194, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.workflow-card__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.workflow-card__title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-on-dark);
}

.workflow-card__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 34rem;
}

.workflow-card__panel--highlight .workflow-card__icon-wrap {
  border-color: rgba(53, 201, 146, 0.5);
  box-shadow: 0 0 0 5px rgba(53, 201, 146, 0.14);
}

.workflow-card__panel--optional .workflow-card__text {
  color: rgba(255, 255, 255, 0.55);
}

/* Reduced motion: no pin, no runway, no crossfade — every step lays out
   as a normal readable block, all visible at once. */
.workflow-scroll.is-static .workflow-card {
  min-height: 0;
}

.workflow-scroll.is-static .workflow-card__panel {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.workflow-scroll.is-static .workflow-card__panel:last-child {
  border-bottom: none;
}

@media (min-width: 640px) {
  .workflow-track__node {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.75rem;
  }

  .workflow-track__item--highlight .workflow-track__node {
    width: 2.85rem;
    height: 2.85rem;
  }
}

@media (min-width: 1024px) {
  .workflow-scroll__sticky {
    gap: 2.25rem;
  }

  .workflow-card {
    min-height: 13rem;
  }

  .workflow-card__panel {
    padding: 2.5rem 3rem;
  }
}

/* ---------- Workflow: transformation cards ----------
   Same premium dark-glass language as .integration-card (mint/purple
   radial gradient on a fixed dark surface), reused here as a standalone
   component since this grid needs simpler, text-first cards. */
.transform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 760px) {
  .transform-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.transform-card {
  border-radius: 1.5rem;
  padding: 1.75rem;
  background: radial-gradient(120% 140% at 15% -10%, rgba(53, 201, 146, 0.12), transparent 55%),
    radial-gradient(130% 140% at 100% 120%, rgba(107, 76, 194, 0.2), transparent 55%), rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px -26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.transform-card:hover {
  transform: translateY(-4px);
  border-color: rgba(53, 201, 146, 0.3);
}

.transform-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-on-dark);
  margin-bottom: 0.6rem;
}

.transform-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Alerts grid ---------- */
.alert-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--cardline);
  background-color: var(--white);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.alert-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-panel);
}

.alert-card--high { border-color: rgba(193, 71, 63, 0.3); }
.alert-card--medium { border-color: rgba(198, 137, 46, 0.3); }
.alert-card--normal { border-color: rgba(107, 76, 194, 0.3); }

.alert-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alert-card__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  font-size: 1.1rem;
}

.alert-card__icon.is-pulsing::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background-color: inherit;
  animation: pulseDot 1.8s infinite;
}

.alert-card__priority {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.alert-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Before / after ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .compare {
    grid-template-columns: 1fr auto 1fr;
  }
}

.compare__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: var(--radius-card);
  padding: 1.75rem;
}

.compare__col--before {
  border: 1px solid var(--cardline);
  background-color: var(--bg);
}

.compare__col--after {
  border: 1px solid rgba(107, 76, 194, 0.3);
  background-color: var(--medblue-10);
}

.compare__heading {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.compare__col--before .compare__heading { color: var(--muted); }
.compare__col--after .compare__heading { color: var(--medblue); }

.compare__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink);
}

.compare__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  border-radius: 50%;
  font-size: 0.65rem;
}

.compare__arrow {
  display: none;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .compare__arrow {
    display: flex;
  }
}

.compare__arrow span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--medblue);
  color: var(--color-on-dark);
}

/* Before/After choreographed scroll reveal — fires once, in this exact order:
   eyebrow -> title -> description -> before card -> after card ->
   before list items (one by one) -> after list items (one by one). */
.ba-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ba-section.is-visible .ba-anim {
  opacity: 1;
  transform: translateY(0);
}

.ba-section .eyebrow.ba-anim { transition-delay: 0ms; }
.ba-section h2.ba-anim { transition-delay: 100ms; }
.ba-section .section-heading p.ba-anim { transition-delay: 200ms; }
.compare__col--before.ba-anim { transition-delay: 320ms; }
.compare__col--after.ba-anim { transition-delay: 420ms; }

.compare__col--before .compare__list .ba-anim:nth-child(1) { transition-delay: 520ms; }
.compare__col--before .compare__list .ba-anim:nth-child(2) { transition-delay: 580ms; }
.compare__col--before .compare__list .ba-anim:nth-child(3) { transition-delay: 640ms; }
.compare__col--before .compare__list .ba-anim:nth-child(4) { transition-delay: 700ms; }
.compare__col--before .compare__list .ba-anim:nth-child(5) { transition-delay: 760ms; }

.compare__col--after .compare__list .ba-anim:nth-child(1) { transition-delay: 820ms; }
.compare__col--after .compare__list .ba-anim:nth-child(2) { transition-delay: 880ms; }
.compare__col--after .compare__list .ba-anim:nth-child(3) { transition-delay: 940ms; }
.compare__col--after .compare__list .ba-anim:nth-child(4) { transition-delay: 1000ms; }
.compare__col--after .compare__list .ba-anim:nth-child(5) { transition-delay: 1060ms; }

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

/* ---------- Integration note ---------- */
.note-box {
  max-width: 40rem;
  margin-inline: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--cardline);
  background-color: var(--bg);
  padding: 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- Integration section: premium dark-glass cards ----------
   These cards are permanently dark (they use --color-secondary /
   --color-on-dark, the same fixed-dark tokens as the Hero/Security/
   Footer panels) rather than following the light/dark page theme —
   this is the brand's own "premium dark glass" surface from the PDF
   guideline, so it reads as intentional in both site themes instead of
   just inverting. Everything else in this section still follows the
   page theme normally. */
.integration-section {
  position: relative;
  overflow: hidden;
}

.integration-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(45% 45% at 12% 0%, rgba(53, 201, 146, 0.08), transparent 70%),
    radial-gradient(45% 45% at 88% 100%, rgba(107, 76, 194, 0.1), transparent 70%);
  pointer-events: none;
}

.integration-section > .container {
  position: relative;
  z-index: 1;
}

.integration-section .section-heading h2 {
  font-size: clamp(1.9rem, 1.55rem + 1.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.integration-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .integration-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .integration-card--flagship {
    grid-column: 1 / -1;
  }
}

.integration-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 1.75rem;
  padding: 2rem;
  background: radial-gradient(120% 140% at 15% -10%, rgba(53, 201, 146, 0.16), transparent 55%),
    radial-gradient(130% 140% at 100% 120%, rgba(107, 76, 194, 0.24), transparent 55%), var(--color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--color-on-dark);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.integration-card:hover {
  transform: translateY(-6px);
  border-color: rgba(53, 201, 146, 0.35);
  box-shadow: 0 32px 70px -26px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(53, 201, 146, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.integration-card--flagship {
  padding: 2.25rem;
}

@media (min-width: 640px) {
  .integration-card--flagship {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
}

.integration-card__icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  flex-shrink: 0;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, rgba(53, 201, 146, 0.22), rgba(107, 76, 194, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-accent);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.integration-card__icon-wrap::after {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(53, 201, 146, 0.4), transparent 70%);
  opacity: 0.45;
  animation: integrationGlow 4s ease-in-out infinite;
}

.integration-card:hover .integration-card__icon-wrap {
  transform: scale(1.08);
  border-color: rgba(53, 201, 146, 0.4);
}

@keyframes integrationGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.65; }
}

.integration-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.integration-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-on-dark);
}

.integration-card--flagship .integration-card__title {
  font-size: 1.4rem;
}

.integration-card__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: 34rem;
}

.integration-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.integration-card__tag {
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Security section ---------- */
.security-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 1.25rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease;
}

.security-card:hover {
  transform: translateY(-3px);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(53, 201, 146, 0.45);
}

.security-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: rgba(53, 201, 146, 0.2);
  color: var(--cyan);
  font-size: 1.1rem;
}

.security-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-on-dark);
}

/* ---------- Outcomes table ---------- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--cardline);
  background-color: var(--white);
  box-shadow: var(--shadow-card);
}

.outcomes-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: start;
}

.outcomes-table thead {
  background-color: var(--bg);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.outcomes-table th,
.outcomes-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cardline);
}

.outcomes-table tbody tr:last-child td {
  border-bottom: none;
}

.outcomes-table td:first-child {
  font-weight: 600;
  color: var(--ink);
}

.outcomes-table td:nth-child(2) {
  color: var(--muted);
}

.outcomes-table td:nth-child(3) {
  font-weight: 600;
  color: var(--success);
}

/* ---------- Demo section ---------- */
.demo-wrap {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 56rem;
  margin-inline: auto;
  width: 100%;
}

.demo-form-wrap {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid var(--cardline);
  background-color: var(--white);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .demo-form-wrap {
    padding: 2.5rem;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.field .required {
  color: var(--alert);
}

.field input,
.field textarea {
  border-radius: 0.75rem;
  border: 1px solid var(--cardline);
  background-color: var(--white);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(100, 116, 139, 0.7);
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--medblue);
  outline: none;
  box-shadow: 0 0 0 3px var(--medblue-10);
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.demo-form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  border-top: 1px solid var(--cardline);
  padding-top: 1.5rem;
}

.demo-form__actions .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .demo-form__actions .btn {
    width: auto;
  }
}

.demo-form__note {
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: 30rem;
}

.demo-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 0 1rem;
  text-align: center;
  animation: demoSuccessIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes demoSuccessIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.demo-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--success-10);
  color: var(--success);
  font-size: 1.75rem;
}

.demo-success h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.demo-success p {
  max-width: 26rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.demo-success .btn {
  margin-top: 0.5rem;
}

.demo-contact__heading {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.demo-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .demo-contact__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .demo-contact__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--cardline);
  background-color: var(--white);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-panel);
  border-color: rgba(107, 76, 194, 0.28);
}

.contact-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
}

.contact-tile__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.contact-tile__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
  transition: color 0.2s ease;
}

.contact-tile:hover .contact-tile__value {
  color: var(--medblue);
}

/* ---------- FAQ ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 48rem;
  margin-inline: auto;
  width: 100%;
}

.faq-item {
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--cardline);
  background-color: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:hover {
  border-color: rgba(107, 76, 194, 0.3);
  box-shadow: var(--shadow-card);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  text-align: start;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.faq-question .icon {
  color: var(--muted);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.faq-item.is-open .faq-question .icon {
  transform: rotate(180deg);
  color: var(--medblue);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

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

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

.faq-answer p {
  padding: 0 1.25rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--cardline);
  background-color: var(--navy);
  color: var(--color-on-dark);
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(40% 70% at 0% 100%, rgba(53, 201, 146, 0.12), transparent 70%),
    radial-gradient(40% 70% at 100% 0%, rgba(107, 76, 194, 0.24), transparent 70%);
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 3.5rem 2.5rem;
}

@media (min-width: 1024px) {
  .footer-top {
    flex-direction: row;
    align-items: center;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
}

.footer-brand__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-brand__mark {
  flex-shrink: 0;
  display: block;
}

/* The footer panel is permanently dark in both site themes, so its brand
   mark uses fixed bright colors here rather than the theme-toggle
   tokens — same reasoning as the hero title gradient above. */
.footer-brand__mark svg {
  --color-primary: #8b6fe8;
  --color-secondary: #19142d;
  --color-accent: #4cdb9e;
}

.footer-brand__name {
  font-family: var(--font-logo);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.footer-brand__name--fusion {
  color: var(--color-on-dark);
}

.footer-brand__name--pump {
  color: #8b6fe8;
}

.footer-brand__sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-brand p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 2rem;
  font-size: 0.875rem;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: var(--color-on-dark);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-copyright {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.footer-copyright__mark {
  width: 50px;
  height: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  mix-blend-mode: normal;
}

@media (max-width: 640px) {
  .footer-copyright__mark {
    width: 36px;
  }
}

/* ---------- Header controls: language + theme toggle ---------- */
.header-controls {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .header-controls {
    display: flex;
  }
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-muted);
}

.lang-toggle__option {
  padding: 0.15rem 0.35rem;
  border-radius: 0.4rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-toggle__option.is-active {
  background-color: var(--color-primary);
  color: #ffffff;
}

.lang-toggle__sep {
  color: var(--color-border);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  color: var(--color-muted);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  color: var(--color-primary);
  border-color: rgba(107, 76, 194, 0.3);
}

.theme-toggle__icon-moon {
  display: none;
}

:root[data-theme='dark'] .theme-toggle__icon-sun {
  display: none;
}

:root[data-theme='dark'] .theme-toggle__icon-moon {
  display: block;
}

.mobile-menu__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--cardline);
}

@media (min-width: 1024px) {
  .mobile-menu__controls {
    display: none;
  }
}

/* ---------- RTL support ---------- */
html[dir='rtl'] .floating-card--1 { left: auto; right: -3%; }
html[dir='rtl'] .floating-card--2 { right: auto; left: -3%; }
html[dir='rtl'] .floating-card--3 { left: auto; right: -4%; }
html[dir='rtl'] .floating-card--4 { right: auto; left: -2%; }

html[dir='rtl'] .compare__arrow svg {
  transform: scaleX(-1);
}

html[dir='rtl'] input[type='tel'],
html[dir='rtl'] input[type='email'] {
  direction: ltr;
  text-align: right;
}

/* ---------- Calendar Booking section ---------- */
.meeting-wrap {
  max-width: 64rem;
  margin-inline: auto;
  width: 100%;
}

.meeting-card {
  border-radius: 1.5rem;
  border: 1px solid var(--cardline);
  background-color: var(--white);
  box-shadow: var(--shadow-panel);
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .meeting-card {
    padding: 2.25rem;
  }
}

.meeting-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

.meeting-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.meeting-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.6rem;
  border: 1px solid var(--cardline);
  background-color: var(--bg);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.meeting-nav-btn:hover:not(:disabled) {
  background-color: var(--medblue-10);
  color: var(--medblue);
}

.meeting-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.meeting-calendar__month {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.meeting-calendar__weekdays,
.meeting-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.meeting-calendar__weekdays {
  margin-bottom: 0.4rem;
}

.meeting-calendar__weekdays span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

.meeting-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  background-color: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.meeting-day.is-empty {
  visibility: hidden;
}

.meeting-day:hover:not(:disabled):not(.is-empty) {
  background-color: var(--medblue-10);
  border-color: rgba(107, 76, 194, 0.25);
}

.meeting-day.is-today {
  border-color: var(--medblue);
}

.meeting-day.is-selected {
  background-color: var(--medblue);
  color: #ffffff;
}

.meeting-day:disabled {
  color: var(--muted);
  opacity: 0.35;
  cursor: not-allowed;
}

.meeting-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.meeting-side__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.meeting-side__placeholder {
  font-size: 0.875rem;
  color: var(--muted);
  padding: 2.5rem 0;
  text-align: center;
}

.meeting-slots__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-top: 0.6rem;
}

@media (min-width: 420px) {
  .meeting-slots__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.meeting-slot {
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius-button);
  border: 1px solid var(--cardline);
  background-color: var(--bg);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.meeting-slot:hover {
  border-color: rgba(107, 76, 194, 0.3);
}

.meeting-slot.is-selected {
  background-color: var(--medblue);
  border-color: var(--medblue);
  color: #ffffff;
}

.meeting-summary {
  border-radius: var(--radius-card);
  border: 1px solid var(--cardline);
  background-color: var(--bg);
  padding: 1rem 1.25rem;
}

.meeting-summary__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.meeting-summary__list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
}

.meeting-summary__list dt {
  color: var(--muted);
}

.meeting-summary__list dd {
  font-weight: 600;
  color: var(--ink);
}

.meeting-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.meeting-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 0 1rem;
  text-align: center;
  animation: demoSuccessIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.meeting-success p {
  max-width: 26rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- Keyframes ---------- */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(193, 71, 63, 0.45); opacity: 1; }
  70% { box-shadow: 0 0 0 8px rgba(193, 71, 63, 0); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .mockup {
    transform: none !important;
  }
}

/* ---------- Arabic typography: final hard override ----------
   Belt-and-suspenders on top of the --font-heading/--font-body token
   swap above: forces font-family + letter-spacing with !important on
   every Arabic text node, so no component-level override (however
   specific) can reintroduce a different font or leftover Latin tracking.
   Excluded: svg/path/icon-class nodes (icons aren't text) and the Latin
   brand-wordmark nodes ("Fusion Pump" — never translated, stays in
   --font-logo by design; [class*='brand__name'] catches the wrapper
   AND the --fusion/--pump inner spans). */
html[lang='ar'] body,
html[dir='rtl'] body {
  font-family: var(--font-arabic) !important;
  letter-spacing: 0 !important;
}

html[lang='ar'] body *:not(svg):not(path):not(i):not([class*='icon']):not([class*='brand__name']),
html[dir='rtl'] body *:not(svg):not(path):not(i):not([class*='icon']):not([class*='brand__name']) {
  font-family: var(--font-arabic) !important;
  letter-spacing: 0 !important;
}

html[lang='ar'] h1,
html[lang='ar'] h2 {
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

html[lang='ar'] h3,
html[lang='ar'] h4,
html[lang='ar'] h5,
html[lang='ar'] h6 {
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

html[lang='ar'] [class*='card'] h1,
html[lang='ar'] [class*='card'] h2,
html[lang='ar'] [class*='card'] h3,
html[lang='ar'] [class*='card'] h4 {
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

html[lang='ar'] p,
html[lang='ar'] li,
html[lang='ar'] label {
  font-weight: 400 !important;
  line-height: 1.8 !important;
}

html[lang='ar'] button,
html[lang='ar'] a {
  font-weight: 600 !important;
}