/* ==========================================================================
   Enluka Design System 2026
   Scope: new global design system for the enluka_web Frappe app.
   Loaded ONLY by pages that opt in (v2 homepage + product pages), so the
   existing style.css and existing routes are unaffected.
   Namespaced under .ek- to guarantee no collision with legacy styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
.ek-scope {
  /* Brand — carried over from the existing Enluka equity */
  --ek-navy:      #18205F;
  --ek-navy-deep: #0B123F;
  --ek-blue:      #126FF4;
  --ek-blue-lift: #2B87FF;
  --ek-blue-ink:  #0B4FB0; /* 7.6:1 on white — safe for small link text */
  --ek-teal:      #10C9A6; /* decorative on light, text-safe on navy only */
  --ek-mint:      #C9FFF3;
  --ek-ink:       #0D1636;
  --ek-cloud:     #F5F8FC;

  /* Derived neutrals */
  --ek-body:      #4B5675; /* 7.2:1 on white, 6.8:1 on cloud */
  --ek-body-dark: #A8B4D8; /* 8.6:1 on navy-deep */
  --ek-line:      #E3E9F4;
  --ek-line-dark: rgba(255, 255, 255, .12);
  --ek-white:     #FFFFFF;

  /* Surfaces */
  --ek-surface:      var(--ek-white);
  --ek-surface-soft: var(--ek-cloud);
  --ek-surface-dark: var(--ek-navy-deep);

  /* Gradients */
  --ek-grad-brand: linear-gradient(120deg, #18205F 0%, #126FF4 62%, #10C9A6 130%);
  --ek-grad-cta:   linear-gradient(120deg, #0B123F 0%, #18205F 38%, #126FF4 100%);
  --ek-grad-mark:  linear-gradient(135deg, #2B87FF 0%, #10C9A6 100%);

  /* Type */
  --ek-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ek-font-ui:      "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Spacing — 4px base */
  --ek-s1: 4px;   --ek-s2: 8px;   --ek-s3: 12px;  --ek-s4: 16px;
  --ek-s5: 20px;  --ek-s6: 24px;  --ek-s8: 32px;  --ek-s10: 40px;
  --ek-s12: 48px; --ek-s16: 64px; --ek-s20: 80px; --ek-s24: 96px;

  /* Layout */
  --ek-max: 1240px;
  --ek-gutter: 48px;

  /* Radius */
  --ek-r-card: 26px;
  --ek-r-sm:   14px;
  --ek-r-xs:   10px;
  --ek-r-pill: 999px;

  /* Elevation */
  --ek-shadow-sm: 0 2px 8px rgba(13, 22, 54, .05);
  --ek-shadow:    0 12px 32px -12px rgba(13, 22, 54, .16);
  --ek-shadow-lg: 0 32px 70px -28px rgba(13, 22, 54, .32);

  /* Motion */
  --ek-ease: cubic-bezier(.22, .61, .36, 1);
  --ek-dur:  .38s;

  /* Header height, used for scroll-padding + drawer offset */
  --ek-header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.ek-scope *,
.ek-scope *::before,
.ek-scope *::after { box-sizing: border-box; }

.ek-scope {
  margin: 0;
  font-family: var(--ek-font-ui);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ek-body);
  background: var(--ek-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html:has(.ek-scope) { scroll-behavior: smooth; scroll-padding-top: calc(var(--ek-header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html:has(.ek-scope) { scroll-behavior: auto; } }

.ek-scope img,
.ek-scope svg { max-width: 100%; height: auto; display: block; }

.ek-scope h1, .ek-scope h2, .ek-scope h3,
.ek-scope h4, .ek-scope h5, .ek-scope h6 {
  font-family: var(--ek-font-display);
  color: var(--ek-ink);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 var(--ek-s5);
  text-wrap: balance;
}

.ek-scope p { margin: 0 0 var(--ek-s4); }
.ek-scope p:last-child { margin-bottom: 0; }
.ek-scope ul, .ek-scope ol { margin: 0 0 var(--ek-s4); padding-left: 1.15em; }
.ek-scope li { margin-bottom: var(--ek-s2); }

.ek-scope a { color: var(--ek-blue-ink); text-decoration: none; }
.ek-scope a:hover { text-decoration: underline; }

/* Block-level links wrap whole cards and rows. Their body copy must read as
   body text, not as link text — `color: inherit` on the component alone loses
   to `.ek-scope a`, so these need the extra specificity. */
.ek-scope a.ek-pcard,
.ek-scope a.ek-srow,
.ek-scope a.ek-mega-link { color: var(--ek-body); }
.ek-scope a.ek-ind-card { color: var(--ek-body-dark); }

/* Accessible focus — visible on both light and dark surfaces */
.ek-scope :focus-visible {
  outline: 3px solid var(--ek-blue-lift);
  outline-offset: 3px;
  border-radius: 6px;
}
.ek-scope .ek-dark :focus-visible { outline-color: var(--ek-mint); }

.ek-scope .ek-skip {
  position: absolute; left: var(--ek-s4); top: -100px; z-index: 999;
  background: var(--ek-ink); color: #fff; padding: 12px 20px;
  border-radius: var(--ek-r-xs); font-weight: 700;
  transition: top .2s var(--ek-ease);
}
.ek-scope .ek-skip:focus { top: var(--ek-s4); text-decoration: none; }

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

/* --------------------------------------------------------------------------
   3. Typography scale
   -------------------------------------------------------------------------- */
.ek-h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.04; }
.ek-h2 { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.1; }
.ek-h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.ek-h4 { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.3; }

.ek-lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.7; }
.ek-small { font-size: 14px; line-height: 1.65; }

.ek-eyebrow {
  display: inline-flex; align-items: center; gap: var(--ek-s2);
  font-family: var(--ek-font-ui);
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--ek-blue-ink);
  margin: 0 0 var(--ek-s4);
}
.ek-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ek-grad-mark);
}
.ek-dark .ek-eyebrow { color: var(--ek-mint); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.ek-container {
  width: 100%; max-width: var(--ek-max);
  margin-inline: auto;
  padding-inline: var(--ek-gutter);
}

.ek-section { padding-block: clamp(64px, 8vw, 112px); position: relative; }
.ek-section--tight { padding-block: clamp(48px, 5vw, 72px); }
.ek-section--soft { background: var(--ek-surface-soft); }
.ek-dark { background: var(--ek-surface-dark); color: var(--ek-body-dark); }
.ek-dark h1, .ek-dark h2, .ek-dark h3, .ek-dark h4 { color: #fff; }
.ek-dark a { color: var(--ek-mint); }

.ek-section-head { max-width: 760px; margin-bottom: clamp(40px, 4vw, 60px); }
.ek-section-head--wide { max-width: 900px; }
.ek-section-head p { font-size: clamp(16px, 1.2vw, 18px); }

.ek-split {
  display: grid; gap: clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .ek-split { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (min-width: 900px) { .ek-split--40-60 { grid-template-columns: 5fr 7fr; align-items: start; } }
/* Editorial splits read better top-aligned than centred when the two columns
   differ a lot in height. */
.ek-split--top { align-items: start; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.ek-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ek-s2);
  min-height: 48px; padding: 12px 26px;
  border-radius: var(--ek-r-pill); border: 2px solid transparent;
  font-family: var(--ek-font-ui); font-size: 15px; font-weight: 800;
  letter-spacing: .01em; line-height: 1.2;
  cursor: pointer; text-decoration: none !important;
  transition: transform var(--ek-dur) var(--ek-ease),
              box-shadow var(--ek-dur) var(--ek-ease),
              background-color var(--ek-dur) var(--ek-ease),
              border-color var(--ek-dur) var(--ek-ease),
              color var(--ek-dur) var(--ek-ease);
}
.ek-btn svg { flex: 0 0 auto; transition: transform var(--ek-dur) var(--ek-ease); }
.ek-btn:hover svg { transform: translateX(4px); }

/* Every variant is written as `.ek-scope .ek-btn--x` (two classes) so it
   outranks `.ek-scope a` and `.ek-dark a`. Without the prefix, buttons that are
   anchors inherit link colour — which rendered the light CTA as mint-on-white. */
.ek-scope .ek-btn--primary { background: var(--ek-blue); color: #fff; box-shadow: 0 10px 26px -12px rgba(18, 111, 244, .9); }
.ek-scope .ek-btn--primary:hover { background: #0B58CC; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(18, 111, 244, .95); }

.ek-scope .ek-btn--ghost { background: transparent; color: var(--ek-ink); border-color: var(--ek-line); }
.ek-scope .ek-btn--ghost:hover { border-color: var(--ek-blue); color: var(--ek-blue-ink); transform: translateY(-2px); }

.ek-scope .ek-dark .ek-btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); }
.ek-scope .ek-dark .ek-btn--ghost:hover { border-color: var(--ek-mint); color: var(--ek-mint); }

.ek-scope .ek-btn--light { background: #fff; color: var(--ek-navy); }
.ek-scope .ek-btn--light:hover { color: var(--ek-navy); transform: translateY(-2px); box-shadow: var(--ek-shadow); }

.ek-btn--block { width: 100%; }

.ek-btn-row { display: flex; flex-wrap: wrap; gap: var(--ek-s3); margin-top: var(--ek-s8); }

/* Text link with moving arrow */
.ek-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 15px; color: var(--ek-blue-ink);
  text-decoration: none;
}
.ek-link svg { transition: transform var(--ek-dur) var(--ek-ease); }
.ek-link:hover { text-decoration: none; }
a.ek-link { min-height: 44px; }
.ek-link:hover svg { transform: translateX(5px); }
.ek-dark .ek-link { color: var(--ek-mint); }

/* --------------------------------------------------------------------------
   6. Utility bar
   -------------------------------------------------------------------------- */
.ek-utility {
  background: var(--ek-navy-deep);
  color: #C6D0EC;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ek-utility .ek-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ek-s5); min-height: 46px; flex-wrap: wrap;
}
.ek-utility-list { display: flex; align-items: center; gap: var(--ek-s6); flex-wrap: wrap; }
/* min-height 44px on standalone links meets the brand spec's 44x44 tap-target
   rule (stricter than WCAG 2.2 AA, which asks for 24x24). */
.ek-utility a {
  color: #C6D0EC; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
}
.ek-utility a:hover { color: #fff; text-decoration: none; }
.ek-utility svg { opacity: .75; flex: 0 0 auto; }
.ek-utility-note { display: inline-flex; align-items: center; gap: 8px; color: #96A4CC; }
@media (max-width: 900px) { .ek-utility-note { display: none; } }

/* --------------------------------------------------------------------------
   7. Header / navigation
   -------------------------------------------------------------------------- */
.ek-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ek-line);
  transition: box-shadow var(--ek-dur) var(--ek-ease);
}
.ek-header.is-stuck { box-shadow: 0 8px 26px -18px rgba(13,22,54,.5); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ek-header { background: #fff; }
}

.ek-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ek-s6); min-height: var(--ek-header-h);
}

.ek-logo { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
.ek-logo:hover { text-decoration: none; }
.ek-logo img, .ek-logo svg { height: 42px; width: auto; }

.ek-nav { display: none; }
@media (min-width: 1080px) { .ek-nav { display: flex; align-items: center; gap: var(--ek-s1); } }

.ek-nav-item { position: relative; }

.ek-scope .ek-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; min-height: 44px; border-radius: var(--ek-r-xs);
  font-size: 15px; font-weight: 700; color: var(--ek-ink);
  background: none; border: 0; cursor: pointer;
  font-family: var(--ek-font-ui);
  transition: background-color .2s var(--ek-ease), color .2s var(--ek-ease);
}
.ek-scope .ek-nav-link:hover { background: var(--ek-cloud); color: var(--ek-blue-ink); text-decoration: none; }
.ek-nav-link .ek-chev { transition: transform .25s var(--ek-ease); }
.ek-nav-link[aria-expanded="true"] { background: var(--ek-cloud); color: var(--ek-blue-ink); }
.ek-nav-link[aria-expanded="true"] .ek-chev { transform: rotate(180deg); }

/* Mega menu */
.ek-mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: max-content; max-width: min(820px, calc(100vw - 64px));
  background: #fff; border: 1px solid var(--ek-line);
  border-radius: 22px; box-shadow: var(--ek-shadow-lg);
  padding: var(--ek-s6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ek-ease), transform .22s var(--ek-ease), visibility .22s;
}
.ek-mega[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.ek-mega-grid { display: grid; gap: var(--ek-s2); grid-template-columns: repeat(2, minmax(240px, 1fr)); }
.ek-mega-grid--1 { grid-template-columns: minmax(260px, 1fr); }

.ek-mega-link {
  display: block; padding: 12px 14px; border-radius: var(--ek-r-sm);
  transition: background-color .2s var(--ek-ease);
}
.ek-mega-link:hover { background: var(--ek-cloud); text-decoration: none; }
.ek-mega-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ek-font-display); font-weight: 700; font-size: 15.5px;
  color: var(--ek-ink); margin-bottom: 2px;
}
.ek-mega-desc { font-size: 13.5px; line-height: 1.55; color: var(--ek-body); margin: 0; }
.ek-mega-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--ek-r-pill);
  background: var(--ek-mint); color: #06614F;
}

.ek-header-actions { display: flex; align-items: center; gap: var(--ek-s3); flex: 0 0 auto; }
.ek-header-actions .ek-btn { min-height: 44px; padding: 10px 22px; font-size: 14.5px; }
@media (max-width: 1079px) { .ek-header-actions .ek-btn { display: none; } }

/* Mobile toggle — 44x44 minimum tap target */
.ek-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 auto;
  border: 1px solid var(--ek-line); border-radius: 12px;
  background: #fff; cursor: pointer; color: var(--ek-ink);
}
@media (min-width: 1080px) { .ek-burger { display: none; } }
.ek-burger span {
  position: relative; display: block; width: 19px; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: background-color .2s var(--ek-ease);
}
.ek-burger span::before,
.ek-burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: transform .28s var(--ek-ease), top .28s var(--ek-ease);
}
.ek-burger span::before { top: -6px; }
.ek-burger span::after  { top: 6px; }
.ek-burger[aria-expanded="true"] span { background: transparent; }
.ek-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.ek-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile drawer — full-width, sits below the header */
.ek-drawer {
  position: fixed; left: 0; right: 0;
  top: var(--ek-drawer-top, 118px);
  bottom: 0; z-index: 190;
  background: #fff;
  border-top: 1px solid var(--ek-line);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--ek-s6) 0 var(--ek-s16);
  transform: translateY(-12px); opacity: 0;
  visibility: hidden; pointer-events: none;
  transition: opacity .26s var(--ek-ease), transform .26s var(--ek-ease), visibility .26s;
}
.ek-drawer[data-open="true"] { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
@media (min-width: 1080px) { .ek-drawer { display: none; } }
body.ek-locked { overflow: hidden; }

.ek-drawer-group { border-bottom: 1px solid var(--ek-line); }
.ek-scope .ek-drawer-toggle,
.ek-scope .ek-drawer-flat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ek-s4);
  width: 100%; min-height: 58px; padding: var(--ek-s4) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--ek-font-display); font-size: 18px; font-weight: 700;
  color: var(--ek-ink);
}
.ek-scope .ek-drawer-flat:hover, .ek-scope .ek-drawer-toggle:hover { text-decoration: none; color: var(--ek-blue-ink); }
.ek-drawer-toggle .ek-chev { transition: transform .25s var(--ek-ease); flex: 0 0 auto; }
.ek-drawer-toggle[aria-expanded="true"] .ek-chev { transform: rotate(180deg); }

.ek-drawer-panel { display: none; padding-bottom: var(--ek-s4); }
.ek-drawer-panel[data-open="true"] { display: block; }
.ek-drawer-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ek-s3);
  min-height: 48px; padding: 10px 0 10px 16px;
  border-left: 2px solid var(--ek-line);
  font-size: 15.5px; font-weight: 600; color: var(--ek-body);
}
.ek-drawer-panel a:hover { color: var(--ek-blue-ink); border-left-color: var(--ek-blue); text-decoration: none; }

.ek-drawer-cta { margin-top: var(--ek-s8); display: grid; gap: var(--ek-s3); }
.ek-drawer-contact { margin-top: var(--ek-s8); font-size: 14.5px; display: grid; gap: var(--ek-s2); }

/* --------------------------------------------------------------------------
   8. Hero + product cloud
   -------------------------------------------------------------------------- */
.ek-hero {
  position: relative; overflow: hidden;
  background: var(--ek-navy-deep); color: var(--ek-body-dark);
  padding-block: clamp(56px, 7vw, 104px);
}
.ek-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 82% 10%,  rgba(18,111,244,.36), transparent 62%),
    radial-gradient(700px 480px at 8%  92%,  rgba(16,201,166,.20), transparent 60%);
  pointer-events: none;
}
/* Faint engineering grid — replaces stock photography */
.ek-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}
.ek-hero > .ek-container { position: relative; z-index: 1; }

.ek-hero-grid { display: grid; gap: clamp(40px, 5vw, 68px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .ek-hero-grid { grid-template-columns: 1.06fr .94fr; } }

.ek-hero h1 { color: #fff; margin-bottom: var(--ek-s6); }
.ek-hero h1 .ek-accent {
  background: linear-gradient(100deg, #58A6FF 0%, #35E0C1 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ek-hero-lead { font-size: clamp(17px, 1.4vw, 19.5px); max-width: 56ch; color: #C3CEEC; }

/* 2x2 rather than auto-fit: the hero's left column is never wide enough for
   four across, and auto-fit was breaking them 3 + 1. */
.ek-hero-proof {
  display: grid; gap: var(--ek-s6) var(--ek-s8);
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(40px, 4vw, 56px);
  padding-top: var(--ek-s8);
  border-top: 1px solid var(--ek-line-dark);
}
.ek-proof-k {
  font-family: var(--ek-font-display); font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 4px;
  letter-spacing: -.02em;
}
.ek-proof-l { font-size: 13.5px; line-height: 1.5; color: #96A4CC; }

/* Product cloud visual */
.ek-cloud { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; margin-inline: auto; }
.ek-cloud-rings { position: absolute; inset: 0; }
.ek-cloud-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
}
.ek-cloud-ring--1 { inset: 4%; }
.ek-cloud-ring--2 { inset: 20%; border-style: dashed; border-color: rgba(255,255,255,.10); }
.ek-cloud-ring--3 { inset: 36%; }
.ek-cloud-spin { position: absolute; inset: 4%; animation: ek-spin 44s linear infinite; }
.ek-cloud-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ek-teal); box-shadow: 0 0 14px 2px rgba(16,201,166,.7);
}
.ek-cloud-dot--a { top: -4px;  left: 50%; margin-left: -4px; }
.ek-cloud-dot--b { bottom: 12%; right: 4%; background: var(--ek-blue-lift); box-shadow: 0 0 14px 2px rgba(43,135,255,.7); }
@keyframes ek-spin { to { transform: rotate(360deg); } }

.ek-cloud-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 27%; aspect-ratio: 1; border-radius: 26px;
  background: var(--ek-grad-mark);
  display: grid; place-items: center;
  box-shadow: 0 24px 60px -18px rgba(43,135,255,.85);
}
.ek-cloud-core svg { width: 54%; height: auto; }

.ek-scope .ek-cloud-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: var(--ek-r-pill);
  background: rgba(11,18,63,.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.17);
  font-size: 13.5px; font-weight: 800; color: #fff;
  white-space: nowrap; text-decoration: none;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,.85);
  transition: transform var(--ek-dur) var(--ek-ease), border-color var(--ek-dur) var(--ek-ease);
}
.ek-scope .ek-cloud-chip:hover { transform: translateY(-3px); border-color: var(--ek-teal); text-decoration: none; color: #fff; }
.ek-cloud-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ek-teal); flex: 0 0 auto; }
.ek-cloud-chip--emr  { top: 4%;   left: 50%; transform: translateX(-50%); }
.ek-cloud-chip--emr:hover  { transform: translateX(-50%) translateY(-3px); }
.ek-cloud-chip--lex  { top: 40%;  right: -4%; }
.ek-cloud-chip--erp  { bottom: 8%; left: 44%; transform: translateX(-50%); }
.ek-cloud-chip--erp:hover { transform: translateX(-50%) translateY(-3px); }
.ek-cloud-chip--seid { top: 40%;  left: -4%; }

@media (max-width: 640px) {
  /* Simplified, not removed (spec §10) */
  .ek-cloud { max-width: 340px; }
  .ek-cloud-chip { font-size: 12px; padding: 8px 12px; }
  .ek-cloud-ring--2 { display: none; }
}

/* --------------------------------------------------------------------------
   9. Client logo strip
   -------------------------------------------------------------------------- */
.ek-clients { padding-block: clamp(40px, 4vw, 56px); border-bottom: 1px solid var(--ek-line); }
.ek-clients-label {
  font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ek-body); text-align: center; margin-bottom: var(--ek-s8);
}
/* Sized so all seven tiles sit on one row inside the 1240px container
   (7 x 140 + 6 x 12 = 1052). Below 1080px it becomes a scroller instead. */
.ek-clients-track {
  display: flex; align-items: center; justify-content: center;
  gap: var(--ek-s3); flex-wrap: wrap;
}
/* The supplied logo files are a mixed bag: four are the brands' own solid
   coloured square tiles (navy, magenta, purple, green) and three are wordmarks
   on white or light grey. None has transparency. Two consequences:
     - No grayscale filter. It turns the coloured tiles into grey mud.
     - Sizing uses width/height 100% + object-fit, not max-height percentages,
       which do not reliably contain a replaced element here.
   Uniform tiles absorb the inconsistency. Commissioning transparent-background
   versions is a recommended follow-up — see QA-CHECKLIST.md. */
.ek-client {
  /* Explicit 1fr row/column: an implicit auto row would size itself to the
     image's natural height, which is what percentage heights would then
     resolve against instead of the tile. */
  display: grid;
  grid-template-rows: 1fr; grid-template-columns: 1fr;
  place-items: center;
  width: 140px; height: 76px; padding: 10px;
  border: 1px solid var(--ek-line); border-radius: var(--ek-r-sm);
  background: #fff; overflow: hidden;
  transition: border-color var(--ek-dur) var(--ek-ease),
              box-shadow var(--ek-dur) var(--ek-ease),
              transform var(--ek-dur) var(--ek-ease);
}
.ek-client:hover { border-color: #CBD9F2; box-shadow: var(--ek-shadow-sm); transform: translateY(-2px); }
.ek-client img {
  /* Absolute caps as well, so containment never depends on percentage
     resolution against the grid area. */
  width: auto; height: auto;
  max-width: 120px; max-height: 56px;
  object-fit: contain;
  opacity: .88;
  transition: opacity var(--ek-dur) var(--ek-ease);
}
.ek-client:hover img { opacity: 1; }

@media (max-width: 1079px) {
  /* Horizontal scroll below desktop (spec §10) */
  .ek-clients-track {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x proximity;
    padding-bottom: var(--ek-s3);
    -webkit-overflow-scrolling: touch;
  }
  .ek-client { flex: 0 0 auto; scroll-snap-align: center; width: 128px; height: 68px; }
  .ek-client img { max-width: 108px; max-height: 46px; }
}

/* --------------------------------------------------------------------------
   10. Positioning split
   -------------------------------------------------------------------------- */
.ek-pos-points { display: grid; gap: var(--ek-s5); margin-top: var(--ek-s8); }
.ek-pos-point {
  display: grid; grid-template-columns: 42px 1fr; gap: var(--ek-s4);
  align-items: start;
}
.ek-pos-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--ek-mint); color: #06614F; flex: 0 0 auto;
}
.ek-pos-point h3 { font-size: 17.5px; margin-bottom: 4px; }
.ek-pos-point p { font-size: 15px; margin: 0; }

/* --------------------------------------------------------------------------
   11. Product portfolio grid
   -------------------------------------------------------------------------- */
.ek-portfolio { display: grid; gap: var(--ek-s6); grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .ek-portfolio { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
  .ek-portfolio-side { display: grid; gap: var(--ek-s6); grid-template-rows: repeat(3, 1fr); }
}

.ek-pcard {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ek-line);
  border-radius: var(--ek-r-card); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--ek-dur) var(--ek-ease),
              box-shadow var(--ek-dur) var(--ek-ease),
              border-color var(--ek-dur) var(--ek-ease);
}
.ek-pcard:hover { transform: translateY(-4px); box-shadow: var(--ek-shadow-lg); border-color: #CBD9F2; text-decoration: none; }
.ek-pcard-body { padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; flex: 1 1 auto; }

.ek-pcard-tag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--ek-r-pill);
  background: var(--ek-cloud); color: var(--ek-blue-ink);
  margin-bottom: var(--ek-s4);
}
.ek-pcard-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--ek-teal); }
.ek-pcard h3 { margin-bottom: var(--ek-s3); }
.ek-pcard p { font-size: 15.5px; }
.ek-pcard .ek-link { margin-top: auto; padding-top: var(--ek-s5); }

.ek-pcard-meta {
  display: flex; flex-wrap: wrap; gap: var(--ek-s2);
  margin-top: var(--ek-s5);
}
.ek-pcard-meta span {
  font-size: 12.5px; font-weight: 700; color: var(--ek-body);
  padding: 5px 11px; border-radius: var(--ek-r-pill);
  border: 1px solid var(--ek-line); background: #fff;
}

/* Feature card gets a product-UI mockup instead of a stock photo */
.ek-pcard--feature { background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 46%); }
.ek-pcard--feature h3 { font-size: clamp(24px, 2.2vw, 32px); }

/* The feature card is stretched by the grid to match the three side cards.
   Keep the copy at its natural height and let the console mock absorb the
   surplus, instead of opening a gap in the middle of the text. */
@media (min-width: 980px) {
  .ek-pcard--feature .ek-pcard-body { flex: 0 0 auto; }
  .ek-pcard--feature .ek-mock { flex: 1 1 auto; display: flex; flex-direction: column; }
  .ek-pcard--feature .ek-mock-rows { flex: 1 1 auto; align-content: space-between; }
}

.ek-mock {
  position: relative; margin: 0 clamp(24px, 2.6vw, 34px);
  border-radius: 16px 16px 0 0;
  background: var(--ek-navy-deep);
  border: 1px solid rgba(255,255,255,.1); border-bottom: 0;
  box-shadow: 0 -18px 44px -26px rgba(13,22,54,.6);
  overflow: hidden; padding: 14px;
  margin-top: clamp(20px, 2vw, 28px);
}
.ek-mock-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.ek-mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.ek-mock-bar b {
  margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: #8FA0CE; text-transform: uppercase;
}
.ek-mock-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.ek-mock-tile {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px; padding: 10px;
}
.ek-mock-tile em { display: block; font-style: normal; font-size: 9.5px; color: #8FA0CE; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px; }
.ek-mock-tile b { display: block; font-family: var(--ek-font-display); font-size: 17px; color: #fff; font-weight: 700; }
.ek-mock-rows { margin-top: 8px; display: grid; gap: 6px; }
.ek-mock-row {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.04); border-radius: 8px; padding: 8px 10px;
}
.ek-mock-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--ek-teal); flex: 0 0 auto; }
.ek-mock-row i.is-blue { background: var(--ek-blue-lift); }
.ek-mock-row i.is-amber { background: #F5B544; }
.ek-mock-row span { flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); }
.ek-mock-row span.is-short { max-width: 34%; }
.ek-mock-row span.is-mid { max-width: 58%; }

/* Compact side cards */
.ek-pcard--compact .ek-pcard-body { padding: clamp(22px, 2vw, 28px); }
.ek-pcard--compact h3 { font-size: clamp(19px, 1.6vw, 22px); }
.ek-pcard--compact p { font-size: 14.5px; }

/* --------------------------------------------------------------------------
   12. Service editorial list
   -------------------------------------------------------------------------- */
.ek-services { border-top: 1px solid var(--ek-line); }
.ek-srow {
  display: grid; gap: var(--ek-s4);
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-block: clamp(24px, 2.6vw, 34px);
  border-bottom: 1px solid var(--ek-line);
  text-decoration: none; color: inherit;
  transition: background-color var(--ek-dur) var(--ek-ease), padding-inline var(--ek-dur) var(--ek-ease);
}
.ek-srow:hover { background: var(--ek-cloud); padding-inline: var(--ek-s5); text-decoration: none; }
@media (min-width: 900px) {
  .ek-srow { grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: var(--ek-s8); }
}
.ek-srow-num {
  font-family: var(--ek-font-display); font-size: 14px; font-weight: 800;
  color: var(--ek-blue); letter-spacing: .06em;
}
@media (max-width: 899px) { .ek-srow-num { display: none; } }
.ek-srow h3 { font-size: clamp(20px, 1.8vw, 26px); margin: 0; }
.ek-srow p { font-size: 15px; margin: 0; }
@media (max-width: 899px) { .ek-srow p { grid-column: 1 / -1; } }
.ek-srow-arrow {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--ek-line); background: #fff;
  display: grid; place-items: center; color: var(--ek-blue);
  transition: background-color var(--ek-dur) var(--ek-ease),
              color var(--ek-dur) var(--ek-ease),
              transform var(--ek-dur) var(--ek-ease);
}
.ek-srow:hover .ek-srow-arrow { background: var(--ek-blue); color: #fff; transform: translateX(4px); }

/* --------------------------------------------------------------------------
   13. Industries (dark cards)
   -------------------------------------------------------------------------- */
.ek-ind-grid {
  display: grid; gap: var(--ek-s5);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ek-ind-card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--ek-r-card);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--ek-line-dark);
  text-decoration: none; color: inherit;
  transition: transform var(--ek-dur) var(--ek-ease),
              background-color var(--ek-dur) var(--ek-ease),
              border-color var(--ek-dur) var(--ek-ease);
}
.ek-ind-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.08); border-color: rgba(16,201,166,.5); text-decoration: none; }
.ek-ind-icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: var(--ek-s5);
  display: grid; place-items: center;
  background: rgba(16,201,166,.16); color: var(--ek-teal);
}
.ek-ind-card h3 { font-size: 20px; margin-bottom: var(--ek-s3); }
.ek-ind-card p { font-size: 14.5px; color: var(--ek-body-dark); margin: 0; }
/* margin-top:auto keeps the four links on one baseline when headings wrap to
   different line counts. */
.ek-ind-card .ek-link { margin-top: auto; padding-top: var(--ek-s5); font-size: 14px; }

/* --------------------------------------------------------------------------
   14. Delivery method
   -------------------------------------------------------------------------- */
.ek-method { display: grid; gap: var(--ek-s6); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: ek-step; }
.ek-step { position: relative; padding-top: var(--ek-s8); border-top: 2px solid var(--ek-line); counter-increment: ek-step; }
.ek-step::before {
  content: "0" counter(ek-step);
  position: absolute; top: -15px; left: 0;
  font-family: var(--ek-font-display); font-size: 13px; font-weight: 800;
  color: var(--ek-blue); background: var(--ek-surface-soft); padding-right: 12px;
  letter-spacing: .06em;
}
.ek-section:not(.ek-section--soft) .ek-step::before { background: #fff; }
.ek-step h3 { font-size: 20px; margin-bottom: var(--ek-s3); }
.ek-step p { font-size: 15px; margin: 0; }

/* --------------------------------------------------------------------------
   15. Consultation CTA
   -------------------------------------------------------------------------- */
.ek-cta { padding-block: clamp(48px, 5vw, 72px); }
.ek-cta-panel {
  position: relative; overflow: hidden;
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--ek-grad-cta);
  padding: clamp(40px, 5vw, 76px) clamp(26px, 4vw, 68px);
  color: #C3CEEC;
}
.ek-cta-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 420px at 88% 6%, rgba(16,201,166,.30), transparent 62%);
}
.ek-cta-panel > * { position: relative; z-index: 1; }
.ek-cta-panel h2 { color: #fff; max-width: 20ch; }
.ek-cta-panel p { max-width: 58ch; font-size: clamp(16px, 1.2vw, 18px); }
.ek-cta-inner { display: grid; gap: var(--ek-s8); align-items: center; }
/* auto second column so both buttons sit on one row instead of staggering */
@media (min-width: 940px) { .ek-cta-inner { grid-template-columns: minmax(0, 1fr) auto; } }
.ek-cta-actions { display: flex; flex-wrap: wrap; gap: var(--ek-s3); }
@media (min-width: 940px) { .ek-cta-actions { justify-content: flex-end; } }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.ek-footer { background: var(--ek-navy-deep); color: var(--ek-body-dark); padding-top: clamp(56px, 6vw, 88px); }
/* Footer column headings are h2: <footer> starts a new outline, so h2 keeps the
   document heading order gap-free while staying visually small. */
.ek-footer h2 {
  font-family: var(--ek-font-ui); font-size: 12px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: #fff;
  margin-bottom: var(--ek-s5);
}
.ek-footer-grid {
  display: grid; gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1fr;
  padding-bottom: clamp(40px, 4vw, 64px);
}
@media (min-width: 700px)  { .ek-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ek-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

.ek-footer-brand img, .ek-footer-brand svg { height: 44px; width: auto; margin-bottom: var(--ek-s5); }
.ek-footer-brand p { font-size: 15px; max-width: 40ch; }
.ek-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ek-s1); }
.ek-footer-list a {
  display: inline-flex; align-items: center; padding: 8px 0; font-size: 14.5px;
  color: var(--ek-body-dark); min-height: 44px;
}
.ek-footer-list a:hover { color: #fff; text-decoration: none; }

.ek-footer-offices { display: grid; gap: var(--ek-s5); font-size: 14.5px; }
.ek-office b { display: block; color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
.ek-office a {
  color: var(--ek-body-dark);
  display: inline-flex; align-items: center; min-height: 44px;
}
.ek-office a:hover { color: #fff; text-decoration: none; }

.ek-footer-bottom {
  border-top: 1px solid var(--ek-line-dark);
  padding-block: var(--ek-s6);
  display: flex; flex-wrap: wrap; gap: var(--ek-s4);
  align-items: center; justify-content: space-between;
  font-size: 13.5px; color: #8B99C2;
}
.ek-footer-legal { display: flex; flex-wrap: wrap; gap: var(--ek-s5); }
.ek-footer-legal a {
  color: #8B99C2; display: inline-flex; align-items: center; min-height: 44px;
}
.ek-footer-legal a:hover { color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   17. Product page components
   -------------------------------------------------------------------------- */
.ek-crumb { font-size: 13.5px; padding-top: var(--ek-s6); }
.ek-crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.ek-crumb li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.ek-crumb li + li::before { content: "/"; color: rgba(255,255,255,.35); }
.ek-crumb a { color: #A8B4D8; display: inline-flex; align-items: center; min-height: 32px; }
.ek-crumb a:hover { color: #fff; }
.ek-crumb [aria-current="page"] { color: #fff; font-weight: 700; }

.ek-phero { background: var(--ek-navy-deep); color: var(--ek-body-dark); position: relative; overflow: hidden; }
.ek-phero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(880px 520px at 78% 4%, rgba(18,111,244,.34), transparent 62%),
              radial-gradient(600px 420px at 4% 96%, rgba(16,201,166,.17), transparent 60%);
}
.ek-phero > .ek-container { position: relative; z-index: 1; }
.ek-phero-grid {
  display: grid; gap: clamp(36px, 4.5vw, 64px); grid-template-columns: 1fr;
  align-items: center;
  padding-block: clamp(44px, 5vw, 80px) clamp(56px, 6vw, 96px);
}
@media (min-width: 1000px) { .ek-phero-grid { grid-template-columns: 1.05fr .95fr; } }
.ek-phero h1 { color: #fff; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.06; }
.ek-phero-lead { font-size: clamp(17px, 1.35vw, 19px); color: #C3CEEC; max-width: 54ch; }

.ek-badges {
  display: flex; flex-wrap: wrap; gap: var(--ek-s3);
  padding-block: var(--ek-s6);
}
.ek-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: var(--ek-r-pill);
  border: 1px solid var(--ek-line); background: #fff;
  font-size: 13.5px; font-weight: 700; color: var(--ek-ink);
}
.ek-badge svg { color: var(--ek-blue); flex: 0 0 auto; }

/* Capability grid */
.ek-caps { display: grid; gap: var(--ek-s5); grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.ek-cap {
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--ek-line); border-radius: var(--ek-r-card);
  background: #fff;
  transition: transform var(--ek-dur) var(--ek-ease), box-shadow var(--ek-dur) var(--ek-ease);
}
.ek-cap:hover { transform: translateY(-3px); box-shadow: var(--ek-shadow); }
.ek-cap-icon {
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: var(--ek-s5);
  display: grid; place-items: center;
  background: var(--ek-cloud); color: var(--ek-blue);
}
.ek-cap h3 { font-size: 18.5px; margin-bottom: var(--ek-s3); }
.ek-cap p { font-size: 14.8px; margin: 0; }

/* Architecture diagram */
.ek-arch { display: grid; gap: var(--ek-s4); }
.ek-arch-layer {
  display: grid; gap: var(--ek-s4);
  grid-template-columns: 1fr;
  padding: clamp(20px, 2vw, 26px);
  border-radius: var(--ek-r-sm);
  border: 1px solid var(--ek-line-dark);
  background: rgba(255,255,255,.045);
}
@media (min-width: 820px) { .ek-arch-layer { grid-template-columns: 190px 1fr; align-items: center; } }
.ek-arch-label {
  font-family: var(--ek-font-display); font-weight: 700; font-size: 15.5px; color: #fff;
}
.ek-arch-label em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ek-teal); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.ek-arch-items { display: flex; flex-wrap: wrap; gap: var(--ek-s2); }
.ek-arch-items span {
  font-size: 13px; font-weight: 700; color: #D6DEF5;
  padding: 7px 13px; border-radius: var(--ek-r-pill);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11);
}
.ek-arch-flow {
  display: grid; place-items: center; color: rgba(255,255,255,.3);
}

/* Integration cloud */
.ek-integrations { display: flex; flex-wrap: wrap; gap: var(--ek-s3); }
.ek-integrations span {
  font-size: 14px; font-weight: 700; color: var(--ek-ink);
  padding: 10px 18px; border-radius: var(--ek-r-pill);
  background: #fff; border: 1px solid var(--ek-line);
}

/* Numbered implementation approach */
.ek-approach { display: grid; gap: var(--ek-s5); counter-reset: ek-ph; }
.ek-approach-item {
  display: grid; grid-template-columns: 46px 1fr; gap: var(--ek-s5);
  padding-bottom: var(--ek-s5); border-bottom: 1px solid var(--ek-line);
  counter-increment: ek-ph;
}
.ek-approach-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ek-approach-item::before {
  content: counter(ek-ph);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ek-cloud); color: var(--ek-blue-ink);
  font-family: var(--ek-font-display); font-weight: 800; font-size: 16px;
}
.ek-approach-item h3 { font-size: 18.5px; margin-bottom: 4px; }
.ek-approach-item p { font-size: 15px; margin: 0; }

/* Fact list used in "who it's for" / problem statement */
.ek-facts { display: grid; gap: var(--ek-s4); }
.ek-fact { display: grid; grid-template-columns: 26px 1fr; gap: var(--ek-s3); align-items: start; }
.ek-fact svg { color: var(--ek-teal); margin-top: 4px; flex: 0 0 auto; }
.ek-fact p { font-size: 15.5px; margin: 0; }
.ek-dark .ek-fact svg { color: var(--ek-teal); }

/* Panel used for security/governance callouts */
.ek-panel {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--ek-r-card);
  background: var(--ek-cloud);
  border: 1px solid var(--ek-line);
}
.ek-panel--dark { background: rgba(255,255,255,.045); border-color: var(--ek-line-dark); }

.ek-note {
  display: flex; gap: var(--ek-s3); align-items: flex-start;
  padding: var(--ek-s5);
  border-radius: var(--ek-r-sm);
  background: #FFF8E9; border: 1px solid #F3DFB4;
  font-size: 14.5px; color: #6B4E12;
}
.ek-note svg { flex: 0 0 auto; margin-top: 3px; color: #B07C13; }

/* Product index cards */
.ek-pindex { display: grid; gap: var(--ek-s6); grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

/* Free-floating console mock used in product heroes */
.ek-mock--panel {
  margin: 0; border-radius: 20px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(11,18,63,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -34px rgba(0,0,0,.9);
  padding: 18px;
}
.ek-mock--panel .ek-mock-tile { background: rgba(255,255,255,.07); }
.ek-mock--panel .ek-mock-rows { margin-top: 10px; gap: 7px; }
@media (max-width: 520px) {
  .ek-mock-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Optional line break that collapses on small screens */
@media (max-width: 700px) { .ek-sr-br { display: none; } }

/* --------------------------------------------------------------------------
   18. Scroll reveal
   -------------------------------------------------------------------------- */
/* Fail-safe: content is visible by default. It is only hidden for animation
   once the inline bootstrap script has proved JS is running, so a JS error or
   blocked script can never leave the page blank. */
.ek-reveal { opacity: 1; transform: none; }

html.ek-js .ek-reveal { opacity: 0; transform: translateY(22px); }
html.ek-js .ek-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ek-ease), transform .7s var(--ek-ease);
}

/* --------------------------------------------------------------------------
   19. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ek-scope *,
  .ek-scope *::before,
  .ek-scope *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.ek-js .ek-reveal { opacity: 1 !important; transform: none !important; }
  .ek-cloud-spin { animation: none !important; }
}

/* --------------------------------------------------------------------------
   20. Responsive gutters + mobile rules (spec §4, §10)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) { .ek-scope { --ek-gutter: 32px; } }
@media (max-width: 640px)  { .ek-scope { --ek-gutter: 20px; } }
@media (max-width: 380px)  { .ek-scope { --ek-gutter: 16px; } }

@media (max-width: 640px) {
  /* Full-width CTAs on mobile */
  .ek-btn-row .ek-btn,
  .ek-cta-actions .ek-btn,
  .ek-drawer-cta .ek-btn { width: 100%; }
  .ek-hero-proof { grid-template-columns: repeat(2, 1fr); gap: var(--ek-s5); }
}

/* Print */
@media print {
  .ek-header, .ek-utility, .ek-drawer, .ek-cta, .ek-burger { display: none !important; }
  .ek-scope { color: #000; background: #fff; }
}

/* ==========================================================================
   21. Interactive product showcase
   Replaces the static portfolio grid on the homepage. A tablist of the four
   products drives a large animated console. Every animation is CSS-only and is
   neutralised by the prefers-reduced-motion block in section 19.
   ========================================================================== */

.ek-show-grid { display: grid; gap: clamp(28px, 3.5vw, 48px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .ek-show-grid { grid-template-columns: 340px minmax(0, 1fr); } }

/* --- tablist ------------------------------------------------------------ */
.ek-show-tabs { display: flex; flex-direction: column; gap: var(--ek-s2); }
@media (max-width: 999px) {
  .ek-show-tabs {
    flex-direction: row; overflow-x: auto;
    scroll-snap-type: x proximity; padding-bottom: var(--ek-s2);
    -webkit-overflow-scrolling: touch;
  }
}

.ek-scope .ek-show-tab {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  width: 100%; min-height: 44px;
  padding: 16px 18px 16px 22px;
  border: 1px solid transparent; border-radius: var(--ek-r-sm);
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--ek-font-ui); color: var(--ek-body);
  transition: background-color var(--ek-dur) var(--ek-ease),
              border-color var(--ek-dur) var(--ek-ease),
              box-shadow var(--ek-dur) var(--ek-ease);
}
.ek-scope .ek-show-tab::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 3px; background: var(--ek-line);
  transition: background var(--ek-dur) var(--ek-ease), top .3s var(--ek-ease), bottom .3s var(--ek-ease);
}
.ek-scope .ek-show-tab:hover { background: #fff; border-color: var(--ek-line); }
.ek-scope .ek-show-tab[aria-selected="true"] {
  background: #fff; border-color: #CBD9F2; box-shadow: var(--ek-shadow);
}
.ek-scope .ek-show-tab[aria-selected="true"]::before { background: var(--ek-grad-mark); top: 8px; bottom: 8px; }

.ek-show-tab b {
  font-family: var(--ek-font-display); font-size: 17px; font-weight: 700;
  color: var(--ek-ink); letter-spacing: -.01em;
}
.ek-show-tab span { font-size: 13.5px; line-height: 1.45; }
@media (max-width: 999px) {
  .ek-scope .ek-show-tab { width: auto; flex: 0 0 auto; scroll-snap-align: start; min-width: 196px; }
}

/* --- panels ------------------------------------------------------------- */
.ek-show-panel[hidden] { display: none; }
.ek-show-panel { animation: ek-panel-in .45s var(--ek-ease) both; }
@keyframes ek-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ek-show-foot { margin-top: var(--ek-s6); }
.ek-show-foot h3 { font-size: clamp(21px, 1.9vw, 26px); margin-bottom: var(--ek-s3); }
.ek-show-foot p { font-size: 15.5px; max-width: 62ch; }

/* ==========================================================================
   22. Product consoles — the animated stage
   ========================================================================== */

.ek-stage {
  position: relative; overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(160deg, #111A46 0%, #0B123F 60%);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 40px 90px -40px rgba(13, 22, 54, .75);
  padding: 16px;
}
.ek-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 320px at 88% -8%, rgba(43, 135, 255, .22), transparent 62%);
}
.ek-stage > * { position: relative; z-index: 1; }

.ek-stage-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.ek-stage-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.ek-stage-bar b {
  margin-left: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  color: #8FA0CE; text-transform: uppercase;
}
.ek-stage-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--ek-teal);
  text-transform: uppercase;
}
.ek-stage-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ek-teal); animation: ek-blip 1.8s ease-in-out infinite;
}
@keyframes ek-blip {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,201,166,.55); }
  50%      { opacity: .5; box-shadow: 0 0 0 6px rgba(16,201,166,0); }
}

/* shared console furniture */
.ek-tiles { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .ek-tiles { grid-template-columns: repeat(2, 1fr); } }
.ek-tile {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px; padding: 11px 12px;
}
.ek-tile em { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #8FA0CE; margin-bottom: 5px; }
.ek-tile b { display: block; font-family: var(--ek-font-display); font-size: 20px; font-weight: 700; color: #fff; line-height: 1; }
.ek-tile.is-accent b { color: var(--ek-teal); }

.ek-rows { display: grid; gap: 7px; margin-top: 10px; }
.ek-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.045); border-radius: 9px; padding: 9px 11px;
  animation: ek-row-in .5s var(--ek-ease) both;
  animation-delay: calc(var(--i, 0) * .09s + .12s);
}
@keyframes ek-row-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.ek-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--ek-teal); flex: 0 0 auto; }
.ek-row i.is-blue { background: var(--ek-blue-lift); }
.ek-row i.is-amber { background: #F5B544; }
.ek-row i.is-live { animation: ek-blip 2.2s ease-in-out infinite; }
.ek-row s { flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); text-decoration: none; }
.ek-row s.is-short { max-width: 30%; }
.ek-row s.is-mid { max-width: 55%; }
.ek-row u {
  text-decoration: none; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px; flex: 0 0 auto; white-space: nowrap;
  background: rgba(16,201,166,.16); color: var(--ek-teal);
}
.ek-row u.is-warn { background: rgba(245,181,68,.16); color: #F5B544; }
.ek-row u.is-info { background: rgba(43,135,255,.18); color: #8FC0FF; }

/* --- EMR: vitals trace -------------------------------------------------- */
.ek-ecg { margin-top: 10px; background: rgba(255,255,255,.045); border-radius: 10px; padding: 10px 12px; }
.ek-ecg-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #8FA0CE; margin-bottom: 6px; }
.ek-ecg-head b { color: var(--ek-teal); font-size: 12px; letter-spacing: 0; text-transform: none; }
.ek-ecg svg { width: 100%; height: 46px; display: block; }
.ek-ecg path {
  fill: none; stroke: var(--ek-teal); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: ek-trace 4.2s linear infinite;
}
@keyframes ek-trace { to { stroke-dashoffset: -620; } }

/* --- LexSuite: deadline ring + matter pulse rail ------------------------ */
.ek-lex { display: grid; gap: 10px; grid-template-columns: 132px minmax(0, 1fr); margin-top: 10px; }
@media (max-width: 560px) { .ek-lex { grid-template-columns: 1fr; } }
.ek-ring {
  background: rgba(255,255,255,.045); border-radius: 10px; padding: 12px;
  display: grid; place-items: center; text-align: center;
}
.ek-ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.ek-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ek-ring .ek-ring-bg { stroke: rgba(255,255,255,.11); }
.ek-ring .ek-ring-fg {
  stroke: #10C9A6; stroke-dasharray: 213;
  stroke-dashoffset: 213; animation: ek-ring 2.2s var(--ek-ease) .3s forwards;
}
@keyframes ek-ring { to { stroke-dashoffset: 68; } }
.ek-ring em { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #8FA0CE; margin-top: 8px; }

.ek-pulse { display: flex; align-items: flex-end; gap: 5px; height: 112px; background: rgba(255,255,255,.045); border-radius: 10px; padding: 12px; }
.ek-pulse span {
  flex: 1 1 auto; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #2B87FF, #10C9A6);
  height: 14%; transform-origin: bottom;
  animation: ek-pulse-bar 2.6s var(--ek-ease) infinite alternate;
  animation-delay: calc(var(--i, 0) * .16s);
}
@keyframes ek-pulse-bar { from { height: 14%; opacity: .5; } to { height: var(--h, 70%); opacity: 1; } }

/* --- ERPNext: procure-to-pay chain -------------------------------------- */
.ek-chain { position: relative; margin-top: 10px; background: rgba(255,255,255,.045); border-radius: 10px; padding: 16px 12px 12px; }
.ek-chain-track { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.ek-chain-track::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 9px; height: 2px;
  background: rgba(255,255,255,.14); border-radius: 2px;
}
.ek-chain-track::after {
  content: ""; position: absolute; top: 4px; left: 10%; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ek-teal);
  box-shadow: 0 0 14px 3px rgba(16,201,166,.65);
  animation: ek-travel 4.4s var(--ek-ease) infinite;
}
@keyframes ek-travel {
  0%   { left: 10%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: calc(90% - 12px); opacity: 0; }
}
.ek-chain-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 7px; flex: 1 1 0; }
.ek-chain-node i { width: 20px; height: 20px; border-radius: 50%; background: #0B123F; border: 2px solid rgba(255,255,255,.28); }
.ek-chain-node span { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #A8B4D8; text-align: center; line-height: 1.25; }

.ek-bars { display: flex; align-items: flex-end; gap: 6px; height: 78px; margin-top: 10px; background: rgba(255,255,255,.045); border-radius: 10px; padding: 12px; }
.ek-bars span {
  flex: 1 1 auto; border-radius: 3px 3px 2px 2px; background: rgba(43,135,255,.75);
  height: 10%; animation: ek-bar-grow 1.1s var(--ek-ease) both;
  animation-delay: calc(var(--i, 0) * .1s + .2s);
}
.ek-bars span:last-child { background: linear-gradient(180deg, #35E0C1, #10C9A6); }
@keyframes ek-bar-grow { from { height: 8%; } to { height: var(--h, 60%); } }

/* --- SEID: SLA queue ---------------------------------------------------- */
.ek-sla { display: grid; gap: 8px; margin-top: 10px; }
.ek-sla-row { background: rgba(255,255,255,.045); border-radius: 9px; padding: 10px 12px; }
.ek-sla-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.ek-sla-top span { font-size: 11px; font-weight: 700; color: #D6DEF5; }
.ek-sla-top u { text-decoration: none; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: #8FA0CE; }
.ek-sla-meter { height: 5px; border-radius: 3px; background: rgba(255,255,255,.13); overflow: hidden; }
.ek-sla-meter b {
  display: block; height: 100%; border-radius: 3px; width: 0;
  background: linear-gradient(90deg, #2B87FF, #10C9A6);
  animation: ek-sla-fill 1.6s var(--ek-ease) both;
  animation-delay: calc(var(--i, 0) * .14s + .25s);
}
.ek-sla-row.is-risk .ek-sla-meter b { background: linear-gradient(90deg, #F5B544, #F5843F); }
@keyframes ek-sla-fill { to { width: var(--w, 60%); } }

/* ==========================================================================
   23. Hero product cloud — animated connectors
   Data pulses travel from each product chip into the platform core. Animating
   top/left percentages rather than offset-path, which has patchy support.
   ========================================================================== */
.ek-cloud-links {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.ek-cloud-links line {
  stroke: rgba(255, 255, 255, .17);
  stroke-width: .4; stroke-dasharray: 1.6 2.4;
}

.ek-flow {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--ek-teal);
  box-shadow: 0 0 10px 2px rgba(16, 201, 166, .85);
  pointer-events: none;
}
.ek-flow--top    { left: 50%; animation: ek-flow-top    3.6s ease-in-out infinite; }
.ek-flow--right  { top: 43%;  animation: ek-flow-right  3.6s ease-in-out infinite .9s; }
.ek-flow--bottom { left: 48%; animation: ek-flow-bottom 3.6s ease-in-out infinite 1.8s; }
.ek-flow--left   { top: 43%;  animation: ek-flow-left   3.6s ease-in-out infinite 2.7s; }

/* chip -> core, so the visual reads as the platform consolidating the products */
@keyframes ek-flow-top {
  0%   { top: 14%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 50%; opacity: 0; }
}
@keyframes ek-flow-right {
  0%   { left: 86%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 50%; opacity: 0; }
}
@keyframes ek-flow-bottom {
  0%   { top: 84%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 50%; opacity: 0; }
}
@keyframes ek-flow-left {
  0%   { left: 14%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 50%; opacity: 0; }
}

@media (max-width: 640px) { .ek-flow { width: 6px; height: 6px; margin: -3px 0 0 -3px; } }

/* ==========================================================================
   24. Service page components
   ========================================================================== */
.ek-outcomes { display: grid; gap: var(--ek-s5); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ek-outcome {
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--ek-r-card); border: 1px solid var(--ek-line-dark);
  background: rgba(255,255,255,.045);
}
.ek-outcome b {
  display: block; font-family: var(--ek-font-display); font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: var(--ek-s3);
  letter-spacing: -.02em;
}
.ek-outcome p { font-size: 14.5px; color: var(--ek-body-dark); margin: 0; }

.ek-engage { display: grid; gap: var(--ek-s5); grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.ek-engage-card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--ek-line); border-radius: var(--ek-r-card); background: #fff;
}
.ek-engage-card h3 { font-size: 19px; margin-bottom: var(--ek-s2); }
.ek-engage-tag {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ek-blue-ink);
  background: var(--ek-cloud); padding: 5px 11px; border-radius: var(--ek-r-pill);
  margin-bottom: var(--ek-s4);
}
.ek-engage-card p { font-size: 14.8px; }
.ek-engage-card ul { margin: var(--ek-s4) 0 0; padding-left: 1.1em; font-size: 14.5px; }