:root { --css-build: "e63bef4865"; }
/* ══════════════════════════════════════════════════════════
   Kardopal Landing Page — Premium Modern Design
   ══════════════════════════════════════════════════════════ */

:root {
  --blue: #3B82F6;
  --blue-dark: #1D4ED8;
  --blue-light: #EFF6FF;
  --purple: #8B5CF6;
  --pink: #EC4899;
  --green: #10B981;
  --orange: #F59E0B;
  --red: #EF4444;
  --text: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #94A3B8;
  --border: #E2E8F0;
  --bg: #FFFFFF;
  --bg-alt: #F8FAFC;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  border-radius: 12px; transition: all .2s; cursor: pointer; border: none;
  /* A default size. Without one, `.btn` on its own had no padding at all
     and rendered as bare text — easy to miss in review, and it had
     already happened on a dozen buttons across the site. `.btn-sm` and
     `.btn-lg` are declared after this and still win. */
  padding: 11px 22px;
}
.btn-sm { padding: 8px 18px; font-size: 14px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(59,130,246,.3); }
.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--blue); }
.btn-white { background: #fff; color: var(--blue-dark); }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.btn-block { display: flex; justify-content: center; width: 100%; }

/* ── Nav ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 12px 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: all .3s;
}
.nav-scrolled {
  background: rgba(255,255,255,.98);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  padding: 8px 0;
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 16px;
}
.nav-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.nav-logo-img { height: 44px; width: auto; object-fit: contain; }
.nav-logo-text { font-weight: 800; font-size: 19px; color: var(--text); letter-spacing: -.3px; }
.nav-links { display: flex; gap: 20px; flex: 1; justify-content: center; align-items: center; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; white-space: nowrap; }
.nav-links a:hover { color: var(--blue); }
.nav-actions { display: flex; gap: 8px; flex-shrink: 0; }
.nav-mobile-toggle { display: none; background: none; border: none; color: var(--text); cursor: pointer; }

/* ── Hero ── */
.hero {
  position: relative;
  padding: 160px 0 100px;
  text-align: center;
  overflow: hidden;
}
.hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.hero-shape {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .15;
}
.hero-shape-1 { width: 600px; height: 600px; background: var(--blue); top: -200px; right: -200px; }
.hero-shape-2 { width: 500px; height: 500px; background: var(--purple); bottom: -100px; left: -200px; }
.hero-shape-3 { width: 300px; height: 300px; background: var(--pink); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hero-inner { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-light); color: var(--blue-dark);
  padding: 8px 18px; border-radius: 100px;
  font-size: 13px; font-weight: 600; margin-bottom: 28px;
}
.hero-title {
  font-size: clamp(36px, 6vw, 64px); font-weight: 900;
  line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 20px;
}
.hero-title-gradient {
  background: linear-gradient(135deg, var(--blue), var(--purple), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 18px; color: var(--text-secondary);
  max-width: 640px; margin: 0 auto 36px; line-height: 1.7;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.hero-pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 100px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.hero-pill svg { color: var(--blue); }

/* ── Stats ── */
.stats { padding: 60px 0; background: var(--bg-alt); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-card { text-align: center; padding: 24px; }
.stat-number { font-size: 36px; font-weight: 900; color: var(--blue); letter-spacing: -1px; }
.stat-label { font-size: 14px; color: var(--text-secondary); font-weight: 500; margin-top: 4px; }

/* ── Section Header ── */
.section-header { text-align: center; margin-bottom: 56px; }
.section-badge {
  display: inline-block;
  background: var(--blue-light); color: var(--blue-dark);
  padding: 6px 16px; border-radius: 100px;
  font-size: 13px; font-weight: 700; margin-bottom: 16px;
  letter-spacing: .3px;
}
.section-title { font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: 1.15; letter-spacing: -.8px; }
.section-sub { font-size: 17px; color: var(--text-secondary); max-width: 560px; margin: 12px auto 0; line-height: 1.6; }

/* ── Features ── */
.features { padding: 100px 0; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  background: var(--bg-alt); border-radius: var(--radius);
  padding: 32px; border: 1px solid transparent;
  transition: all .3s;
}
.feature-card:hover { border-color: var(--border); box-shadow: 0 8px 32px rgba(0,0,0,.06); transform: translateY(-4px); }
.feature-card-lg { grid-column: span 1; }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* ── Modules ── */
.modules { padding: 100px 0; background: var(--bg-alt); }
.modules-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.module-card {
  background: #fff; border-radius: var(--radius); padding: 28px 20px;
  text-align: center; border: 1px solid var(--border);
  transition: all .3s;
}
.module-card:hover { border-color: var(--blue); box-shadow: 0 8px 24px rgba(59,130,246,.1); transform: translateY(-4px); }
.module-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.mi-blue { background: #EFF6FF; color: #3B82F6; }
.mi-purple { background: #F5F3FF; color: #8B5CF6; }
.mi-green { background: #F0FDF4; color: #10B981; }
.mi-orange { background: #FFFBEB; color: #F59E0B; }
.mi-red { background: #FEF2F2; color: #EF4444; }
.mi-teal { background: #F0FDFA; color: #14B8A6; }
.mi-indigo { background: #EEF2FF; color: #6366F1; }
.mi-pink { background: #FDF2F8; color: #EC4899; }
.mi-cyan { background: #ECFEFF; color: #06B6D4; }
.mi-amber { background: #FFFBEB; color: #D97706; }
.module-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.module-card p { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }

/* ── Circle Hub ── */
.circle-section { padding: 100px 0; }
.circle-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.circle-features { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.circle-feat { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-secondary); font-weight: 500; }
.circle-visual { position: relative; min-height: 320px; }
.circle-card-stack { position: relative; }
.cv-card {
  background: #fff; border-radius: var(--radius); padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  position: absolute; width: 100%;
  transition: all .3s;
}
.cv-card-1 { top: 0; left: 0; z-index: 3; }
.cv-card-2 { top: 72px; left: 24px; z-index: 2; opacity: .85; }
.cv-card-3 { top: 144px; left: 48px; z-index: 1; opacity: .7; }
.cv-avatar { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.cv-name { font-size: 14px; font-weight: 700; color: var(--text); }
.cv-time { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* ── AI Section ── */
.ai-section { padding: 100px 0; background: var(--bg-alt); }
.ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ai-card {
  background: #fff; border-radius: var(--radius); padding: 28px;
  border: 1px solid var(--border); transition: all .3s;
}
.ai-card:hover { border-color: var(--blue); box-shadow: 0 8px 24px rgba(59,130,246,.1); transform: translateY(-4px); }
.ai-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--blue-light); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.ai-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.ai-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ── IoT Section ── */
.iot-section { padding: 100px 0; }
.iot-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.iot-visual {
  background: linear-gradient(135deg, #0F172A, #1E293B);
  border-radius: var(--radius-lg); padding: 60px;
  position: relative; min-height: 340px;
}
.iot-grid-visual { position: relative; width: 100%; height: 220px; }
.iot-node {
  position: absolute; width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.iot-n1 { background: var(--blue); top: 0; left: 20%; }
.iot-n2 { background: var(--purple); top: 0; right: 20%; }
.iot-n3 { background: var(--green); bottom: 0; left: 10%; }
.iot-n4 { background: var(--orange); bottom: 0; right: 10%; }
.iot-line {
  position: absolute; background: rgba(255,255,255,.1);
  height: 2px; transform-origin: left;
}
.iot-l1 { width: 200px; top: 28px; left: calc(20% + 56px); }
.iot-l2 { width: 120px; top: 100px; left: calc(10% + 28px); transform: rotate(60deg); }
.iot-l3 { width: 120px; top: 100px; right: calc(10% + 28px); transform: rotate(-60deg); }
.iot-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.iot-tags span {
  background: var(--bg-alt); padding: 6px 14px; border-radius: 100px;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ── Pricing ── */
.pricing { padding: 100px 0; background: var(--bg-alt); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
.price-card {
  background: #fff; border-radius: var(--radius-lg); padding: 36px 28px;
  border: 1.5px solid var(--border); text-align: center;
  transition: all .3s; position: relative;
}
.price-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.08); transform: translateY(-4px); }
.price-card-popular { border-color: var(--blue); box-shadow: 0 8px 32px rgba(59,130,246,.15); transform: scale(1.04); }
.price-card-popular:hover { transform: scale(1.04) translateY(-4px); }
.price-popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; padding: 4px 16px;
  border-radius: 100px; font-size: 12px; font-weight: 700;
}
.price-card h4 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.price-amount { font-size: 44px; font-weight: 900; color: var(--text); margin-bottom: 24px; letter-spacing: -1px; }
.price-amount span { font-size: 16px; font-weight: 500; color: var(--text-tertiary); }
.price-card ul { list-style: none; text-align: start; margin-bottom: 28px; }
.price-card li {
  padding: 8px 0; font-size: 14px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.price-card li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

/* ── CTA ── */
.cta-section { padding: 100px 0; }
.cta-card {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  border-radius: var(--radius-lg); padding: 64px 48px;
  text-align: center; color: #fff;
}
.cta-card h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 900; margin-bottom: 16px; }
.cta-card p { font-size: 17px; opacity: .85; max-width: 520px; margin: 0 auto 32px; line-height: 1.6; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ── */
.footer { background: #0F172A; color: #fff; padding: 64px 0 0; }
.footer-inner { display: grid; grid-template-columns: 1.5fr 2fr; gap: 48px; }
.footer-brand p { font-size: 14px; color: #94A3B8; margin-top: 16px; line-height: 1.6; }
.footer-logo { height: 78px; width: auto; object-fit: contain; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer-col h5 { font-size: 14px; font-weight: 700; margin-bottom: 16px; color: #fff; }
.footer-col a { display: block; font-size: 14px; color: #94A3B8; text-decoration: none; margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: var(--blue); }
.footer-bottom { border-top: 1px solid #1E293B; margin-top: 48px; padding: 20px 0; }
.footer-bottom p { font-size: 13px; color: #475569; }

/* ══════════════════════════════════════ RESPONSIVE ══════════════════════════════════════ */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .modules-grid { grid-template-columns: repeat(3, 1fr); }
  .ai-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-links { display: none; position: absolute; top: 60px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 20px 24px; box-shadow: 0 8px 32px rgba(0,0,0,.1); border-radius: 0 0 16px 16px; }
  .nav-links-open { display: flex; }
  .nav-actions { display: none; }
  .nav-mobile-toggle { display: block; margin-inline-start: auto; }

  .hero { padding: 120px 0 60px; }
  .hero-title { font-size: 32px; }
  .hero-sub { font-size: 16px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-grid { grid-template-columns: 1fr; }

  .circle-split, .iot-split { grid-template-columns: 1fr; }
  .circle-visual { min-height: 240px; }

  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
  .price-card-popular { transform: none; }
  .price-card-popular:hover { transform: translateY(-4px); }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }

  .cta-card { padding: 40px 24px; }
}

@media (max-width: 480px) {
  .modules-grid { grid-template-columns: 1fr 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .hero-pills { gap: 6px; }
  .hero-pill { font-size: 12px; padding: 4px 10px; }
}

/* ══════════════════════════════════════════════════════════
   v2 — Nav dropdowns + Products / Solutions / Hardware / About / Contact
   ══════════════════════════════════════════════════════════ */

/* ── Nav items + dropdowns ── */
.nav-link { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.nav-link:hover { color: var(--blue); }
.nav-caret { transition: transform .2s; opacity: .7; }
.nav-item { position: relative; }
/* Extend the dropdown trigger's hit area downward to the nav's bottom edge so
   the mouse can travel from "Platform" into the mega panel without crossing a
   :hover dead zone (the gap between the link's bottom and the .nav padding-bottom). */
.nav-item-dropdown > .nav-link { padding: 14px 0; margin: -14px 0; }
.nav-item-dropdown:hover .nav-caret,
.nav-item-open .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 40px rgba(15,23,42,.12);
  /* No margin-top + no full-width bridge so it doesn't overlap adjacent nav items. */
  margin-top: 4px;
  display: none;
  z-index: 200;
}
/* Narrow invisible hover bridge — only as wide as the trigger, so it doesn't
   intercept hover events on neighbouring nav links. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 8px;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-open .nav-dropdown { display: block; }
.nav-item-dropdown:hover .nav-dropdown-cols,
.nav-item-open .nav-dropdown-cols { display: grid; }
.nav-item-dropdown:hover .nav-dropdown-grouped,
.nav-item-open .nav-dropdown-grouped { display: grid; }
/* Wide product dropdown (icon + sub) */
.nav-dropdown-wide { min-width: 380px; padding: 10px; }
.nav-dd-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; border-radius: 10px;
  text-decoration: none; color: var(--text);
  transition: background .15s;
}
.nav-dd-item:hover { background: var(--bg-alt); }
.nav-dd-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-dd-icon-blue   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.nav-dd-icon-cyan   { background: linear-gradient(135deg, #06B6D4, #0E7490); }
.nav-dd-icon-purple { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.nav-dd-icon-pink   { background: linear-gradient(135deg, #EC4899, #BE185D); }
.nav-dd-icon-orange { background: linear-gradient(135deg, #F59E0B, #D97706); }
.nav-dd-title { font-weight: 700; font-size: 14px; color: var(--text); }
.nav-dd-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* Two-column dropdown (Solutions). Note: do NOT set `display: grid` here —
   that overrides the base `.nav-dropdown { display: none }` and keeps the
   dropdown permanently open. The hover/open rules above set `display: grid`. */
.nav-dropdown-cols { grid-template-columns: 1fr 1fr; gap: 4px; min-width: 380px; padding: 10px; }
.nav-dd-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text);
  text-decoration: none;
  transition: background .15s;
}
.nav-dd-link:hover { background: var(--bg-alt); color: var(--blue); }

/* ── Nav panel (Resources, Company) ───────────────────────────────
   A middle weight between the flat two-column link list these menus
   used to be and the full Platform mega. Two grouped columns of
   icon + name + description, and a side rail that carries one live
   thing worth seeing before you click.

   Anchored to the trigger's right edge rather than centred: Company
   is the last item in the bar, and a 660px panel centred on it hung
   off the side of the window. */
/* Positioned off the nav rather than the trigger, the way the Platform
   mega is. Anchored to the trigger's own right edge, the panel could
   only grow leftwards until it ran off the window on a narrow screen;
   measuring from the nav means it lines up with the site container's
   right edge and can never overflow, however wide it gets. */
.nav-item-panel { position: static; }
.nav-panel {
  left: auto;
  right: calc(max(0px, (100vw - 1200px) / 2) + 24px);
  transform: none;
  top: 100%; margin-top: 0;
  width: min(900px, calc(100vw - 48px));
  padding: 0;
  grid-template-columns: 1fr 250px;
  /* Matching the mega's own radius and shadow, so the two panels read as
     the same object rather than two different ones. */
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.14);
  overflow: hidden;
}
/* Same bridge the mega uses: a full-width strip across the top edge so
   the cursor never crosses dead space on the way down from the link.
   The inherited one was a 120px tab centred on the panel — with the
   panel this wide it no longer sat under the trigger at all. */
.nav-panel::before {
  top: -20px; left: 0; right: 0;
  width: auto; height: 20px;
  transform: none;
  pointer-events: auto;
}
/* :focus-within is what lets the mega open from the keyboard; without it
   these two panels were reachable by mouse only. */
.nav-item-dropdown:hover .nav-panel,
.nav-item-dropdown:focus-within .nav-panel,
.nav-item-open .nav-panel { display: grid; }

.nav-panel-main {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; padding: 24px;
}
.nav-panel-group { display: flex; flex-direction: column; min-width: 0; }
.nav-panel-title {
  font-size: 10px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--text-tertiary);
  padding: 0 8px 8px;
}
.nav-panel-item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 10px; border-radius: 12px;
  text-decoration: none; color: var(--text);
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
  min-width: 0;
}
/* `.nav-links a` (0,1,1) sets nowrap for the top-level bar items. These
   are anchors inside .nav-links too, so they match it — and their second
   line is a sentence that has to wrap. Needs the extra class to outrank
   it, not just a later declaration. */
.nav-links .nav-panel-item,
.nav-links .nav-panel-status,
.nav-links .nav-panel-cta { white-space: normal; }
.nav-panel-item:hover { background: #F7F9FD; border-color: var(--border); }
.nav-panel-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.nav-panel-ico svg { width: 20px; height: 20px; display: block; }
.nav-panel-ico.blue   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.nav-panel-ico.purple { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.nav-panel-ico.green  { background: linear-gradient(135deg, #10B981, #047857); }
.nav-panel-ico.orange { background: linear-gradient(135deg, #F59E0B, #D97706); }
.nav-panel-ico.pink   { background: linear-gradient(135deg, #EC4899, #BE185D); }
.nav-panel-ico.slate  { background: linear-gradient(135deg, #64748B, #334155); }
.nav-panel-text { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.nav-panel-text strong { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.nav-panel-text em {
  font-style: normal; font-size: 12px; line-height: 1.45;
  color: var(--text-tertiary); margin-top: 1px; overflow-wrap: anywhere;
}

/* Side rail */
.nav-panel-side {
  background: #F7F8FB;
  border-inline-start: 1px solid var(--border);
  padding: 24px 20px;
  display: flex; flex-direction: column;
}
.nav-panel-side .nav-panel-title { padding-inline: 0; }
.nav-panel-status {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border);
  text-decoration: none; color: var(--text);
}
.nav-panel-status:hover { border-color: var(--green); }
.nav-panel-status span { display: flex; flex-direction: column; min-width: 0; }
.nav-panel-status strong { font-size: 12px; font-weight: 700; line-height: 1.3; }
.nav-panel-status em {
  font-style: normal; font-size: 10.5px; color: var(--text-tertiary); margin-top: 1px;
}
.nav-panel-status-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  animation: navPanelPulse 2.4s ease-in-out infinite;
}
@keyframes navPanelPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,.05); }
}
.nav-panel-flag {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border);
}
.nav-panel-flag svg {
  flex: 0 0 auto; width: 26px; height: 13px; border-radius: 2px; display: block;
}
.nav-panel-flag span { font-size: 11px; font-weight: 600; line-height: 1.3; }
.nav-panel-note {
  font-size: 11.5px; line-height: 1.5; color: var(--text-secondary);
  margin: 12px 0 0;
}
.nav-panel-cta {
  margin-top: auto; padding-top: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--blue); text-decoration: none;
}
.nav-panel-cta:hover { text-decoration: underline; }

@media (max-width: 980px) {
  /* In the mobile drawer the nav item is full-width and static, so the
     absolute right-anchoring above would pull the panel out of flow. */
  .nav-panel { width: auto; grid-template-columns: 1fr; }
  .nav-panel-main { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .nav-panel-side { border-inline-start: 0; border-top: 1px solid var(--border); }
}

/* ── Mega-menu (Products) — full sub-feature distribution ── */
.nav-item-mega { position: static; }
.nav-mega {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 100%; margin-top: 0;
  width: min(1240px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.14);
  padding: 22px 22px 16px;
  display: none;
  z-index: 200;
}
/* Invisible hover bridge — a transparent strip extending 20px above
   the panel into the nav's padding so the cursor never crosses
   "dead space" between the trigger link and the panel. Without this
   the menu hid the moment the cursor left the link.
   Pointer-events on so the bridge keeps :hover alive on the parent. */
.nav-mega::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
  pointer-events: auto;
}
.nav-item-mega:hover .nav-mega,
.nav-item-mega:focus-within .nav-mega,
.nav-item-mega.nav-item-open .nav-mega { display: block; }
/* NOTE: a `.nav-mega:hover` rule used to live here, meaning to keep the
   panel open while the cursor was on it. It could never fire — the
   panel is display:none until opened, and an element that is not
   rendered cannot be hovered. Keeping the menu open long enough to
   reach it is done in _nav.html, where a short delay on close survives
   the cursor crossing the nav bar on its way down. */
.nav-mega-grid {
  display: grid;
  /* minmax(0, 1fr) lets columns shrink below their min-content so long no-wrap
     sub-items truncate via ellipsis instead of pushing the panel off-screen. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.nav-mega-col {
  display: flex; flex-direction: column;
  padding: 12px 10px;
  border-radius: 12px;
  transition: background .15s;
  min-width: 0;
}
.nav-mega-col:hover { background: var(--bg-alt); }
.nav-mega-head {
  display: flex; align-items: flex-start; gap: 10px;
  text-decoration: none; color: var(--text);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.nav-mega-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0;
}
.nav-mega-dot.blue   { background: #3B82F6; box-shadow: 0 0 12px rgba(59,130,246,.6); }
.nav-mega-dot.cyan   { background: #06B6D4; box-shadow: 0 0 12px rgba(6,182,212,.6); }
.nav-mega-dot.purple { background: #8B5CF6; box-shadow: 0 0 12px rgba(139,92,246,.6); }
.nav-mega-dot.pink   { background: #EC4899; box-shadow: 0 0 12px rgba(236,72,153,.6); }
.nav-mega-dot.orange { background: #F59E0B; box-shadow: 0 0 12px rgba(245,158,11,.6); }
.nav-mega-title { font-weight: 800; font-size: 14px; color: var(--text); letter-spacing: -.2px; }
.nav-mega-desc  { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.45; }

.nav-mega-list {
  display: flex; flex-direction: column; gap: 1px;
}
/* Sub-section header inside a column — groups related items so the
   18-item Business list and 20-item Devices list don't read as a
   wall of links. Quiet tracking + uppercase keeps it secondary to
   the column title above. */
.nav-mega-section {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: 12px;
  margin-bottom: 4px;
  padding-inline-start: 2px;
}
.nav-mega-section:first-child { margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   MEGA-MENU v2 — tabbed rail design (Insta360-style)
   Left rail with the 5 suites, right side shows the active
   suite's hero image + section cards.
   ═══════════════════════════════════════════════════════════════ */
.nav-mega-v2 {
  display: none;
  grid-template-columns: 220px 1fr;
  padding: 0;
  overflow: hidden;
}
.nav-item-mega:hover .nav-mega-v2,
.nav-item-mega:focus-within .nav-mega-v2,
.nav-item-mega.nav-item-open .nav-mega-v2 { display: grid; }
.nav-mega-v2:hover { display: grid; }

/* Left rail — sticky list of suite tabs */
.nav-mega-rail {
  background: #F7F8FB;
  padding: 22px 0 16px;
  border-inline-end: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.nav-mega-rail-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0 22px 12px;
}
.nav-mega-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: transparent;
  border: 0;
  border-inline-start: 3px solid transparent;
  width: 100%;
  text-align: start;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: background .15s, color .15s;
}
.nav-mega-tab:hover { background: rgba(59,130,246,.06); }
.nav-mega-v2[data-active="business"] .nav-mega-tab[data-tab="business"],
.nav-mega-v2[data-active="devices"]  .nav-mega-tab[data-tab="devices"],
.nav-mega-v2[data-active="circle"]   .nav-mega-tab[data-tab="circle"],
.nav-mega-v2[data-active="commerce"] .nav-mega-tab[data-tab="commerce"],
.nav-mega-v2[data-active="spaces"]   .nav-mega-tab[data-tab="spaces"] {
  background: #fff;
  border-inline-start-color: var(--blue);
}
/* Suite icon chips — same Ionicons and gradients as the app side menu
   (src/navigation/HomeSideMenu.tsx). Keep the two in step. */
.nav-mega-tab-ico {
  flex: 0 0 auto; width: 26px; height: 26px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-mega-tab-ico svg { width: 15px; height: 15px; fill: #fff; }
.nav-mega-tab-ico.business { background: linear-gradient(135deg, #3B82F6, #60A5FA); }
.nav-mega-tab-ico.devices  { background: linear-gradient(135deg, #EF4444, #F87171); }
.nav-mega-tab-ico.circle   { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.nav-mega-tab-ico.commerce { background: linear-gradient(135deg, #9333EA, #C084FC); }
.nav-mega-tab-ico.spaces   { background: linear-gradient(135deg, #0EA5E9, #38BDF8); }
.nav-mega-tab:hover .nav-mega-tab-ico { transform: translateY(-1px); }

/* Active tab accent follows the suite tint, not a global blue */
.nav-mega-v2[data-active="business"] .nav-mega-tab[data-tab="business"] { border-inline-start-color: #1E88E5; }
.nav-mega-v2[data-active="devices"]  .nav-mega-tab[data-tab="devices"]  { border-inline-start-color: #E53935; }
.nav-mega-v2[data-active="circle"]   .nav-mega-tab[data-tab="circle"]   { border-inline-start-color: #7C3AED; }
.nav-mega-v2[data-active="commerce"] .nav-mega-tab[data-tab="commerce"] { border-inline-start-color: #9333EA; }
.nav-mega-v2[data-active="spaces"]   .nav-mega-tab[data-tab="spaces"]   { border-inline-start-color: #0EA5E9; }
.nav-mega-v2 .nav-mega-tab[data-tab] .nav-mega-tab-ico { opacity: .82; }
.nav-mega-v2[data-active="business"] .nav-mega-tab[data-tab="business"] .nav-mega-tab-ico,
.nav-mega-v2[data-active="devices"]  .nav-mega-tab[data-tab="devices"]  .nav-mega-tab-ico,
.nav-mega-v2[data-active="circle"]   .nav-mega-tab[data-tab="circle"]   .nav-mega-tab-ico,
.nav-mega-v2[data-active="commerce"] .nav-mega-tab[data-tab="commerce"] .nav-mega-tab-ico,
.nav-mega-v2[data-active="spaces"]   .nav-mega-tab[data-tab="spaces"]   .nav-mega-tab-ico { opacity: 1; }

.nav-mega-rail-foot {
  margin-top: auto;
  padding: 18px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.nav-mega-rail-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}
.nav-mega-rail-link:hover { text-decoration: underline; }

/* Right side — one pane per suite, only the active one shows */
.nav-mega-pane {
  display: none;
  padding: 22px;
  gap: 14px;
  flex-direction: column;
}
.nav-mega-v2[data-active="business"] .nav-mega-pane[data-pane="business"],
.nav-mega-v2[data-active="devices"]  .nav-mega-pane[data-pane="devices"],
.nav-mega-v2[data-active="circle"]   .nav-mega-pane[data-pane="circle"],
.nav-mega-v2[data-active="commerce"] .nav-mega-pane[data-pane="commerce"],
.nav-mega-v2[data-active="spaces"]   .nav-mega-pane[data-pane="spaces"] {
  display: flex;
}

/* Hero card at the top of each pane — slim banner.
   Hard-capped at 120px tall so the menu stays compact at any
   pane width; aspect ratio kept loose for short/wide proportions. */

/* Section cards below the hero — 3 per row */
/* ── Mega menu: three tiles per suite ─────────────────────────────
   One wide banner per pane showed a picture and a sentence and said
   very little about what the suite contains. Three tiles say three
   things, each a link somewhere real. */
.nav-mega-tiles { margin-bottom: 16px; }
.nav-mega-tiles-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 2px 10px;
}
.nav-mega-tiles-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--text-tertiary);
}
.nav-mega-tiles-cta {
  font-size: 12.5px; font-weight: 700; color: var(--blue); text-decoration: none;
}
.nav-mega-tiles-cta:hover { text-decoration: underline; }
.nav-mega-tiles-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.nav-mega-tile {
  display: flex; align-items: center; gap: 11px;
  padding: 9px; border-radius: 12px;
  background: #F7F9FD; border: 1px solid transparent;
  text-decoration: none; color: var(--text);
  transition: background .15s, border-color .15s;
  min-width: 0;
}
.nav-mega-tile:hover { background: #fff; border-color: var(--border); }
.nav-mega-tile-shot {
  flex: 0 0 auto; width: 54px; height: 54px;
  border-radius: 10px; overflow: hidden;
  background: #fff; border: 1px solid #E8EEF7;
}
.nav-mega-tile-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-mega-tile-text { display: flex; flex-direction: column; min-width: 0; }
.nav-mega-tile-text strong { font-size: 13px; font-weight: 700; line-height: 1.3; }
.nav-mega-tile-text em {
  font-style: normal; font-size: 11px; line-height: 1.35; color: var(--text-tertiary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
@media (max-width: 1100px) { .nav-mega-tiles-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* In the phone drawer the panel is ~358px wide, so two tiles leave about
   100px for the sentence and it clamps to "Quotes, orde…". One per row. */
@media (max-width: 560px) { .nav-mega-tiles-row { grid-template-columns: 1fr; } }

.nav-mega-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* ── Mega menu: a suite's modules ─────────────────────────────────
   A flat run of icon + name, four to a row. The grouped version — a
   heading and a sentence per module — read well but made the panel
   tall enough to reach the bottom of the screen on Business, which
   has 25 of them. The names carry it; the description belongs on the
   module's own page. */
.nav-mega-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 8px;
}
.nav-mega-mod {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  text-decoration: none; color: var(--text);
  transition: background .14s;
  min-width: 0;
}
.nav-mega-mod:hover { background: #F1F5FC; }
.nav-mega-mod:hover .nav-mega-mod-ico { background: var(--blue); }
.nav-mega-mod:hover .nav-mega-mod-ico svg { fill: #fff; }
.nav-mega-mod-ico {
  flex: 0 0 auto; width: 26px; height: 26px;
  border-radius: 7px;
  background: #E7EDF8;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s;
}
.nav-mega-mod-ico svg {
  width: 15px; height: 15px;
  fill: var(--blue);
  transition: fill .14s;
}
.nav-mega-mod-name {
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1100px) { .nav-mega-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.nav-mega-section-card {
  display: block;
  padding: 14px 16px;
  background: #F7F8FB;
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: all .15s;
}
.nav-mega-section-card:hover {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  transform: translateY(-1px);
}
.nav-mega-section-card h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -.1px;
}
.nav-mega-section-card p {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   SOLUTIONS mega — industry image cards (Insta360 Enterprise style)
   ═══════════════════════════════════════════════════════════════ */
.nav-mega-industries {
  display: none;
  padding: 24px;
  width: min(1160px, calc(100vw - 32px));
}
.nav-item-mega:hover .nav-mega-industries,
.nav-item-mega:focus-within .nav-mega-industries,
.nav-item-mega.nav-item-open .nav-mega-industries { display: block; }
.nav-mega-industries:hover { display: block; }

.nav-mega-industries-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 28px;
}
.industry-grid {
  /* Flex rather than grid so a short last row sits centred instead of
     leaving an empty cell (nine industries since Factory was held back). */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.industry-grid > .industry-card { flex: 0 0 calc((100% - 4 * 10px) / 5); min-width: 0; }
.industry-card {
  position: relative;
  display: block;
  height: 128px;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: #0F172A;
  background: #EEF3FB;
  border: 1px solid rgba(15,23,42,.06);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.industry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15,23,42,.14);
  border-color: rgba(37,99,235,.35);
}
.industry-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center 40%;
  padding: 6px;
  transition: transform .25s;
}
.industry-card:hover img { transform: scale(1.04); }
.industry-card-label {
  position: absolute; left: 8px; bottom: 8px;
  padding: 4px 8px 4px 10px;
  display: inline-flex; gap: 4px; align-items: center;
  font-size: 12px;
  color: #0F172A;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.industry-card-label strong { font-weight: 600; letter-spacing: -.1px; }
.industry-card-chevron { font-size: 14px; opacity: .55; transition: transform .15s, opacity .15s; }
.industry-card:hover .industry-card-chevron { transform: translateX(2px); opacity: 1; }

.nav-mega-industries-side {
  display: flex; flex-direction: column;
  padding-top: 8px;
}
.nav-mega-side-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  transition: color .15s;
}
.nav-mega-side-link:last-child { border-bottom: 0; }
.nav-mega-side-link:hover { color: var(--blue); }

/* Mobile — collapse mega panels to single column lists */
@media (max-width: 980px) {
  .nav-mega-v2 { grid-template-columns: 1fr; }
  .nav-mega-rail { border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .nav-mega-rail-foot { display: none; }
  .nav-mega-sections { grid-template-columns: 1fr 1fr; }
  .nav-mega-industries { width: 100%; }
  .nav-mega-industries-grid { grid-template-columns: 1fr; }
  .industry-grid > .industry-card { flex-basis: calc((100% - 10px) / 2); }
}
.nav-mega-item {
  font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary);
  padding: 5px 8px; margin-inline-start: -8px; border-radius: 6px;
  text-decoration: none;
  transition: all .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-mega-item:hover {
  background: #EFF6FF;
  color: var(--blue);
  transform: translateX(2px);
}

.nav-mega-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.nav-mega-foot-link {
  font-size: 13px; font-weight: 600; color: var(--blue);
  text-decoration: none;
}
.nav-mega-foot-link span { display: inline-block; transition: transform .15s; }
.nav-mega-foot-link:hover span { transform: translateX(3px); }

/* Keep all 5 columns visible from desktop down to the mobile breakpoint —
   tighten spacing instead of reflowing so users can scan the full lineup at a glance. */
@media (max-width: 1200px) {
  .nav-mega { padding: 18px 16px 14px; }
  .nav-mega-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .nav-mega-col { padding: 10px 8px; }
  .nav-mega-item { font-size: 12px; padding: 4px 6px; }
  .nav-mega-title { font-size: 13px; }
  .nav-mega-desc { display: none; }
}
@media (max-width: 980px) {
  .nav-mega { position: static; width: 100%; box-shadow: none; border: 0; padding: 8px 0; transform: none; left: 0; }
  .nav-mega-grid { grid-template-columns: 1fr; gap: 4px; }
  .nav-mega-col { padding: 8px; }
  .nav-mega-item { font-size: 13px; }
  .nav-mega-desc { display: block; }
  .nav-mega-foot { flex-direction: column; gap: 8px; align-items: stretch; }
}


/* Grouped dropdown (AI categories). Same warning: no `display: grid` here. */
.nav-dropdown-grouped { grid-template-columns: repeat(2, 1fr); gap: 16px; min-width: 480px; padding: 16px; }
.nav-dd-group-title { font-size: 11px; font-weight: 700; color: var(--text-tertiary); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 6px; padding: 0 10px; }

/* ── Products section ── */
.products { padding: 80px 0; background: var(--bg); }
.product-block {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 16px;
  transition: box-shadow .25s, transform .25s;
}
.product-block:hover { box-shadow: 0 20px 50px rgba(15,23,42,.08); transform: translateY(-2px); }
.product-block-header { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.product-block-icon {
  width: 64px; height: 64px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.product-block-header h3 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 6px; }
.product-block-header p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.product-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.product-tags span {
  background: #fff; border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 100px;
  font-size: 13px; color: var(--text-secondary); font-weight: 500;
}

/* ── Solutions section ── */
.solutions { padding: 80px 0; background: var(--bg-alt); }
.solutions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.sol-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  transition: all .2s;
}
.sol-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(59,130,246,.1); }
.sol-emoji { font-size: 32px; line-height: 1; margin-bottom: 10px; }
.sol-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sol-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

/* ── AI categories ── */
.ai-category { margin-bottom: 48px; }
.ai-category:last-child { margin-bottom: 0; }
.ai-category-header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.ai-cat-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 4px 10px; border-radius: 100px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ai-cat-pill-blue   { background: #DBEAFE; color: #1D4ED8; }
.ai-cat-pill-green  { background: #D1FAE5; color: #047857; }
.ai-cat-pill-orange { background: #FEF3C7; color: #B45309; }
.ai-cat-pill-purple { background: #EDE9FE; color: #5B21B6; }
.ai-category-header h3 { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.3px; }
.ai-card-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ai-icon-blue   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.ai-icon-purple { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.ai-icon-cyan   { background: linear-gradient(135deg, #06B6D4, #0E7490); }
.ai-icon-green  { background: linear-gradient(135deg, #10B981, #047857); }
.ai-icon-pink   { background: linear-gradient(135deg, #EC4899, #BE185D); }
.ai-icon-amber  { background: linear-gradient(135deg, #F59E0B, #D97706); }
.ai-icon-orange { background: linear-gradient(135deg, #F97316, #C2410C); }
.ai-icon-red    { background: linear-gradient(135deg, #EF4444, #B91C1C); }
.ai-icon-teal   { background: linear-gradient(135deg, #14B8A6, #0F766E); }
.ai-icon-indigo { background: linear-gradient(135deg, #6366F1, #4338CA); }

/* ── Hardware section ── */
.hardware { padding: 80px 0; background: var(--bg); }
.hw-categories { display: grid; gap: 24px; }
.hw-cat {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.hw-cat-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.hw-cat-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.hw-cat-header h3 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.hw-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 18px; }
.hw-item {
  display: flex; flex-direction: column;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.hw-item strong { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.hw-item span { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.hw-note { text-align: center; margin-top: 24px; color: var(--text-secondary); font-size: 14px; }
.hw-note a { color: var(--blue); font-weight: 600; }

/* ── About section ── */
.about { padding: 80px 0; background: var(--bg-alt); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 40px; }
.about-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px;
  transition: all .2s;
}
.about-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(59,130,246,.08); }
.about-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.about-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.about-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.65; }

.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  margin-bottom: 32px;
}
.about-stat { text-align: center; }
.as-num { font-size: 32px; font-weight: 900; color: var(--blue); letter-spacing: -.5px; }
.as-label { font-size: 13px; color: var(--text-tertiary); font-weight: 500; margin-top: 4px; }

.about-story {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.about-story h3 { font-size: 22px; font-weight: 800; margin-bottom: 16px; letter-spacing: -.3px; }
.about-story p { font-size: 15px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 14px; }
.about-story p:last-child { margin-bottom: 0; }
.about-story p strong { color: var(--text); font-weight: 700; }
.about-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.about-info-label { font-size: 11px; font-weight: 700; color: var(--text-tertiary); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; }
.about-info-value { font-size: 15px; color: var(--text); line-height: 1.7; }
.about-info-value a { color: var(--blue); text-decoration: none; }
.about-info-value a:hover { text-decoration: underline; }
@media (max-width: 880px) { .about-info-grid { grid-template-columns: 1fr; } }

/* ── Contact section ── */
.contact-section { padding: 80px 0; background: var(--bg); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: 24px; align-items: start;
}
.contact-channels { display: grid; gap: 12px; }
.contact-channel {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  text-decoration: none;
  transition: all .2s;
}
.contact-channel:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59,130,246,.08); }
.cc-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-channel strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.contact-channel span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

.contact-form {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--text); }
.form-field input,
.form-field select,
.form-field textarea {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: border-color .15s;
  resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--blue); }
.form-note { font-size: 12px; color: var(--text-tertiary); text-align: center; margin-top: -2px; }
.form-note a { color: var(--blue); font-weight: 600; }

/* ── Home product grid ── */
.home-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.home-product-card {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; text-decoration: none;
  display: flex; flex-direction: column; gap: 8px;
  transition: all .25s;
}
.home-product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,23,42,.1); border-color: transparent; }
.home-product-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.home-product-card h4 { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.3px; margin-top: 6px; }
.home-product-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; flex: 1; }
.home-product-cta { font-size: 13px; font-weight: 700; color: var(--blue); margin-top: 8px; }

/* ── AI band on home ── */
.ai-band { padding: 80px 0; background: linear-gradient(135deg, #F8FAFC, #FFFFFF, #F1F5F9); }
.ai-band-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.ai-band .section-title, .ai-band .section-sub { text-align: start; margin-inline-start: 0; max-width: 540px; }
.ai-band .section-header { display: contents; }
.ai-band-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ai-band-tags span { background: #fff; border: 1px solid var(--border); padding: 6px 12px; border-radius: 100px; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.ai-band-visual { position: relative; height: 320px; }
.ai-band-card {
  position: absolute; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; width: 280px;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.ai-band-card-1 { top: 0; right: 30px; }
.ai-band-card-2 { top: 100px; right: 0; }
.ai-band-card-3 { top: 200px; right: 50px; }
.abc-q { font-size: 13px; color: var(--text-tertiary); font-weight: 500; margin-bottom: 6px; }
.abc-a { font-size: 14px; color: var(--text); line-height: 1.5; }
.abc-a strong { color: var(--blue); }

@media (max-width: 880px) {
  .ai-band-inner { grid-template-columns: 1fr; }
  .ai-band-visual { height: 360px; }
  .ai-band-card-1, .ai-band-card-2, .ai-band-card-3 { left: 0; right: auto; max-width: 100%; }
}

/* ── Page hero (sub-pages) ── */
.page-hero {
  position: relative; padding: 130px 0 70px;
  text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(139,92,246,.08) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(59,130,246,.08) 0%, transparent 50%);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }

/* Split hero — text + isometric mockup */
.page-hero.split { padding: 120px 0 80px; text-align: start; }
.page-hero.split .container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.page-hero.split .hero-content { max-width: 540px; }
.page-hero.split h1, .page-hero.split p { text-align: start; margin-inline-start: 0; }
.page-hero.split .page-hero-cta { justify-content: flex-start; }
@media (max-width: 980px) {
  .page-hero.split { padding: 110px 0 60px; text-align: center; }
  .page-hero.split .container { grid-template-columns: 1fr; gap: 32px; }
  .page-hero.split h1, .page-hero.split p, .page-hero.split .hero-content { text-align: center; max-width: none; margin: 0 auto; }
  .page-hero.split .page-hero-cta { justify-content: center; }
}

/* ── Isometric mockup — phone + floating cards ── */
.iso-stage {
  position: relative;
  width: 100%; height: 460px;
  perspective: 1200px;
}
.iso-phone {
  position: absolute;
  top: 50%; left: 50%;
  width: 230px; height: 460px;
  transform: translate(-50%, -50%) rotateY(-12deg) rotateX(6deg) rotateZ(-3deg);
  border-radius: 38px;
  background: linear-gradient(160deg, #1F2937, #0B1120);
  box-shadow:
    0 40px 80px rgba(15,23,42,.25),
    0 20px 40px rgba(15,23,42,.15),
    inset 0 0 0 4px #1F2937;
  padding: 8px;
  z-index: 2;
}
.iso-phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 18px; background: #0B1120; border-radius: 12px;
  z-index: 3;
}
.iso-phone-screen {
  width: 100%; height: 100%;
  border-radius: 30px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.iso-phone-bar { height: 28px; flex-shrink: 0; }
.iso-phone-content {
  flex: 1; padding: 36px 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.iso-row {
  background: rgba(255,255,255,.94);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.iso-row-dot { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
.iso-row-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.iso-row-line { height: 7px; border-radius: 3px; background: #E2E8F0; }
.iso-row-line.short { width: 60%; }

.iso-floating {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 20px 40px rgba(15,23,42,.12);
  z-index: 3;
  animation: isoFloat 4.5s ease-in-out infinite;
}
.iso-floating-1 { top: 10%; left: -5%; animation-delay: 0s; }
.iso-floating-2 { bottom: 12%; right: -4%; animation-delay: 1.5s; }
.iso-floating-3 { top: 50%; right: -10%; transform: translateY(-50%); animation-delay: 3s; }
@keyframes isoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.iso-floating-3 { animation-name: isoFloat3; }
@keyframes isoFloat3 {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 10px)); }
}

.iso-stat-num { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.iso-stat-num.green { color: #10B981; }
.iso-stat-num.blue { color: #3B82F6; }
.iso-stat-num.purple { color: #8B5CF6; }
.iso-stat-num.pink { color: #EC4899; }
.iso-stat-num.orange { color: #F59E0B; }
.iso-stat-label { font-size: 11px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.iso-mini { display: flex; align-items: center; gap: 8px; }
.iso-mini-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.iso-mini-text { font-size: 12px; font-weight: 600; }
.iso-mini-sub { font-size: 10px; color: var(--text-tertiary); margin-top: 1px; }

/* Background blobs behind iso stage */
.iso-stage::before, .iso-stage::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; z-index: 1;
}
.iso-stage::before { top: -10%; right: 10%; width: 280px; height: 280px; }
.iso-stage::after { bottom: -10%; left: 10%; width: 240px; height: 240px; }
.iso-stage.theme-blue::before { background: #3B82F6; }
.iso-stage.theme-blue::after { background: #8B5CF6; }
.iso-stage.theme-cyan::before { background: #06B6D4; }
.iso-stage.theme-cyan::after { background: #3B82F6; }
.iso-stage.theme-purple::before { background: #8B5CF6; }
.iso-stage.theme-purple::after { background: #EC4899; }
.iso-stage.theme-pink::before { background: #EC4899; }
.iso-stage.theme-pink::after { background: #F59E0B; }
.iso-stage.theme-orange::before { background: #F59E0B; }
.iso-stage.theme-orange::after { background: #EC4899; }
.page-hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 900; letter-spacing: -1px; margin-bottom: 18px; line-height: 1.1; }
.page-hero h1 .grad { background: linear-gradient(135deg, var(--blue), var(--purple), var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.page-hero p { font-size: 17px; color: var(--text-secondary); max-width: 640px; margin: 0 auto 28px; line-height: 1.6; }
.page-hero .badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-light); color: var(--blue-dark);
  padding: 6px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 700; margin-bottom: 24px;
  letter-spacing: .3px;
}
.page-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Feature grid (sub-pages) ── */
.page-section { padding: 70px 0; }
.page-section.alt { background: var(--bg-alt); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
/* Section divider that spans every column inside a feat-grid. Used to
   break the 18- or 20-card grids on product pages into semantic
   groups (Customers · Catalog · Sell · Finance · …) without
   restructuring the layout. */
.feat-section-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.feat-section-head:first-child { margin-top: 0; }
.feat-section-head .feat-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.feat-section-head .feat-section-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.feat-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: all .2s;
}
.page-section.alt .feat-card { background: #fff; }
.feat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.08); border-color: transparent; }
.feat-card-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feat-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feat-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.feat-card.link { display: block; text-decoration: none; color: inherit; position: relative; }
.feat-card.link:hover { border-color: var(--blue); }
.feat-card.link::after { content: "→"; position: absolute; top: 22px; right: 22px; color: var(--text-tertiary); font-size: 18px; opacity: 0; transform: translateX(-4px); transition: all .2s; }
.feat-card.link:hover::after { opacity: 1; transform: translateX(0); color: var(--blue); }

/* ══════════════════════════════════════════════════════════
   HOMEPAGE — ground-zero rebuild
   ══════════════════════════════════════════════════════════ */
.home-hero {
  position: relative;
  padding: 140px 0 70px;
  background: radial-gradient(circle at 80% 20%, #DBEAFE 0%, transparent 60%),
              radial-gradient(circle at 20% 80%, #EFF6FF 0%, transparent 50%),
              #FFFFFF;
  overflow: hidden;
}
.home-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.home-hero-content h1 {
  font-size: 64px; font-weight: 900; letter-spacing: -2px;
  line-height: 1.02; margin-bottom: 20px;
}
.home-hero-content h1 .grad {
  background: linear-gradient(135deg, #2563EB, #60A5FA);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-hero-content .lead {
  font-size: 19px; color: var(--text-secondary); line-height: 1.55;
  max-width: 560px; margin-bottom: 28px;
}
.home-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.home-hero-trust {
  display: flex; gap: 32px; margin-top: 36px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.home-hero-trust > div {
  font-size: 13px; color: var(--text-tertiary); font-weight: 500;
}
.home-hero-trust strong {
  display: block; color: var(--text); font-size: 22px; font-weight: 800;
  letter-spacing: -.5px; margin-bottom: 2px;
}
.home-hero-img {
  width: 100%; height: auto;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(37,99,235,.18);
}

/* ── Hero carousel ─────────────────────────────────────────────
   Five slides fade between each other every 5s. All images stack
   absolutely so the container height matches the largest — no
   layout shift when the slide changes. First slide is `is-active`
   so it's visible immediately on paint; the others sit at opacity 0
   until the JS promotes them. The container's aspect-ratio locks
   the layout so the CSS never needs to know the image size.

   Safety net: `.home-hero-media img` caps any nested image to the
   parent column width so a stale-cache visitor (loading the new
   HTML with the previous CSS) doesn't see the raw 1400px asset
   blow out of the layout. Redundant with .hero-slide styles below
   but cheap to keep.                                                */
.home-hero-media img {
  max-width: 100%;
  height: auto;
  display: block;
}
.home-hero-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1400 / 933;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(37,99,235,.18);
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  z-index: 2;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(15, 23, 42, .25);
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
}
.hero-dot:hover { background: rgba(37, 99, 235, .55); }
.hero-dot.is-active {
  background: #2563eb;
  width: 22px;
  border-radius: 999px;
}
/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

@media (max-width: 980px) {
  .home-hero { padding: 110px 0 50px; }
  .home-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .home-hero-content h1 { font-size: 42px; letter-spacing: -1.2px; }
  .home-hero-trust { gap: 18px; }
}

/* Suite cards */
.suite-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.suite-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: 22px;
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: all .25s;
  position: relative;
}
.suite-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(37,99,235,.14);
  border-color: transparent;
}
.suite-card-media {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  aspect-ratio: 16/10;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.suite-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s;
}
.suite-card:hover .suite-card-media img { transform: scale(1.04); }
.suite-card-body { padding: 22px; }
.suite-card-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 8px;
}
.suite-card h3 {
  font-size: 20px; font-weight: 800; letter-spacing: -.4px;
  margin-bottom: 8px; color: var(--text);
}
.suite-card p {
  font-size: 14px; color: var(--text-secondary); line-height: 1.55;
  margin-bottom: 12px;
}
.suite-card-link {
  font-size: 13px; font-weight: 700; color: var(--blue);
}
.suite-card-link span { display: inline-block; transition: transform .2s; }
.suite-card:hover .suite-card-link span { transform: translateX(4px); }

.suite-card.suite-cyan .suite-card-eyebrow   { color: #0891B2; }
.suite-card.suite-purple .suite-card-eyebrow { color: #7C3AED; }
.suite-card.suite-pink .suite-card-eyebrow   { color: #DB2777; }
.suite-card.suite-orange .suite-card-eyebrow { color: #EA580C; }
.suite-card.suite-grey .suite-card-eyebrow   { color: var(--text-tertiary); }
.suite-card.suite-grey { background: linear-gradient(135deg, #0F172A, #1E293B); color: #fff; }
.suite-card.suite-grey h3, .suite-card.suite-grey p { color: #fff; }
.suite-card.suite-grey p { color: rgba(255,255,255,.75); }
.suite-card.suite-grey .suite-card-link { color: #60A5FA; }

@media (max-width: 980px) { .suite-grid { grid-template-columns: 1fr; } }
@media (min-width: 981px) and (max-width: 1200px) { .suite-grid { grid-template-columns: repeat(2, 1fr); } }

/* Why grid */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.why-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 26px;
  transition: all .2s;
}
.why-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.why-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: #DBEAFE; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.why-card h4 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.why-card p  { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
@media (max-width: 980px) { .why-grid { grid-template-columns: 1fr; } }

/* AI strip */
.ai-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
  align-items: center;
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #60A5FA 100%);
  border-radius: 28px;
  padding: 56px;
  color: #fff;
  position: relative; overflow: hidden;
}
.ai-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.18) 0%, transparent 50%);
  pointer-events: none;
}
.ai-strip > div { position: relative; z-index: 1; }
.ai-strip h2 { font-size: 36px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 12px 0 14px; }
.ai-strip p  { font-size: 16px; color: rgba(255,255,255,.86); line-height: 1.6; margin-bottom: 22px; }
.ai-strip .badge { background: rgba(255,255,255,.2); color: #fff; }
.ai-strip .btn-primary { background: #fff; color: #1D4ED8; }
.ai-strip .btn-primary:hover { background: #F8FAFC; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.ai-strip .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; }
.ai-strip .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.ai-strip-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.ai-tile {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.ai-tile-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: rgba(255,255,255,.7); }
.ai-tile-title   { font-size: 15px; font-weight: 800; }
.ai-tile-sub     { font-size: 12px; color: rgba(255,255,255,.7); }
@media (max-width: 980px) {
  .ai-strip { grid-template-columns: 1fr; padding: 32px; gap: 28px; border-radius: 22px; }
  .ai-strip h2 { font-size: 26px; }
}

/* Industries grid */
/* minmax(0, 1fr), not 1fr. A bare `1fr` track is `minmax(auto, 1fr)`,
   and when the browser works out that `auto` minimum a percentage
   width on a replaced element counts as auto — so each card's minimum
   became the image's own 320px. Five of those plus gaps is 1648px
   inside a 1152px container, and the last cards ran off the screen.
   The zero minimum lets the tracks shrink to the space that exists. */
.ind-grid {
  /* Flex so a short last row is centred, not left with an empty cell. */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.ind-grid > .ind-card { flex: 0 0 calc((100% - 4 * 14px) / 5); min-width: 0; }
.ind-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 0 0 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  text-decoration: none; color: var(--text);
  transition: all .2s;
  overflow: hidden;
}
/* The picture fills the top of the card. A fixed aspect ratio means the
   row keeps its shape whatever the image's own dimensions are, and the
   card reserves its height before the image loads — so the section
   below does not jump once it arrives. */
.ind-shot {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  background: var(--bg-subtle, #F1F5F9);
  overflow: hidden;
}
.ind-shot img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.ind-card:hover .ind-shot img { transform: scale(1.04); }
.ind-card:hover {
  border-color: var(--blue); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37,99,235,.12);
}
/* Still used by any card that has no picture yet. */
.ind-emoji { font-size: 28px; padding-top: 22px; }
.ind-card strong { font-size: 13px; font-weight: 700; color: var(--text); padding: 0 10px; text-align: center; }
@media (max-width: 980px) { .ind-grid > .ind-card { flex-basis: calc((100% - 14px) / 2); } }

/* ── Sub-feature deep-dive page (e.g. /business/contacts/loyalty) ── */
.dd-hero { padding: 130px 0 60px; background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%); }
.dd-crumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-tertiary); margin-bottom: 22px; }
.dd-crumb a { color: var(--text-secondary); text-decoration: none; }
.dd-crumb a:hover { color: var(--blue); }
.dd-crumb-sep { color: var(--text-tertiary); }
.dd-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.dd-hero h1 { font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 18px; }
.dd-hero h1 .grad { background: linear-gradient(135deg, #2563EB, #60A5FA); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Module pages (Sales, Items…) use the same <span class="grad"> in their
   h1 but had no rule for it, so the word rendered plain. */
.md-hero h1 .grad { background: linear-gradient(135deg, var(--accent, #2563EB), #60A5FA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-hero p.lead { font-size: 19px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 26px; max-width: 560px; }
.dd-hero-img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 60px rgba(37,99,235,.12); }
.dd-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 920px) {
  .dd-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .dd-hero h1 { font-size: 38px; letter-spacing: -1px; }
}

.dd-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dd-pill { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #DBEAFE; color: #1D4ED8; }

.dd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; padding: 50px 0; border-bottom: 1px solid var(--border); }
.dd-stat-num { font-size: 38px; font-weight: 800; color: var(--blue); letter-spacing: -1px; line-height: 1; margin-bottom: 6px; }
.dd-stat-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

.dd-feat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.dd-feat-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: all .2s; }
.dd-feat-item:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(37,99,235,.08); }
.dd-feat-item .ic { width: 36px; height: 36px; border-radius: 9px; background: #DBEAFE; color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.dd-feat-item h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.dd-feat-item p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

.dd-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: step; }
.dd-flow-step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: relative; counter-increment: step; }
.dd-flow-step::before { content: "0" counter(step); position: absolute; top: 16px; right: 22px; font-size: 32px; font-weight: 800; color: #DBEAFE; letter-spacing: -1px; }
.dd-flow-step h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; padding-inline-end: 50px; }
.dd-flow-step p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

.dd-side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dd-side { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.dd-side.bad { background: #FEF2F2; border-color: #FECACA; }
.dd-side.good { background: #F0FDF4; border-color: #BBF7D0; }
.dd-side h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-tertiary); margin-bottom: 12px; }
.dd-side.bad h4 { color: #B91C1C; }
.dd-side.good h4 { color: #15803D; }
.dd-side ul { list-style: none; padding: 0; margin: 0; }
.dd-side li { padding: 8px 0; font-size: 14px; color: var(--text); border-bottom: 1px solid rgba(0,0,0,.04); padding-inline-start: 22px; position: relative; }
.dd-side.bad li::before { content: "✕"; position: absolute; left: 0; color: #B91C1C; font-weight: 700; }
.dd-side.good li::before { content: "✓"; position: absolute; left: 0; color: #15803D; font-weight: 700; }
@media (max-width: 720px) { .dd-side-by-side { grid-template-columns: 1fr; } }


/* Feature split — alternating image / text rows */
.feat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px 0; }
.feat-split.reverse > .feat-split-media { order: 2; }
.feat-split + .feat-split { border-top: 1px solid rgba(15,23,42,.06); }
.feat-split-content .eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--purple, #7C3AED); margin-bottom: 14px;
}
.feat-split-content h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.6px; line-height: 1.18; margin-bottom: 14px; }
.feat-split-content p { font-size: 16px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 16px; }
.feat-split-content .feat-list { display: grid; gap: 8px; margin-top: 8px; }
.feat-split-content .feat-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text-secondary); list-style: none; }
.feat-split-content .feat-list li::before { content: "✓"; color: var(--purple, #7C3AED); font-weight: 800; flex-shrink: 0; }
.feat-split-media {
  position: relative; border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, #0F172A, #1E1B4B);
  box-shadow: 0 30px 60px -20px rgba(15,23,42,.5), 0 0 0 1px rgba(124,58,237,.2);
}
.feat-split-media img { width: 100%; height: auto; display: block; transform: scale(1.02); transition: transform .6s ease; }
.feat-split-media:hover img { transform: scale(1.05); }
.feat-split-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(124,58,237,.18), transparent 60%);
}
@media (max-width: 880px) {
  .feat-split { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
  .feat-split.reverse > .feat-split-media { order: 0; }
}

/* Hero with image (for sub-pages) */
.page-hero.split.contacts-hero { padding-bottom: 64px; }
.page-hero.split.contacts-hero .feat-split-media {
  border-radius: 24px;
  box-shadow: 0 40px 80px -20px rgba(15,23,42,.6), 0 0 0 1px rgba(124,58,237,.25);
}

/* Bullet list */
.page-bullets { display: grid; gap: 10px; }
.page-bullet {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px;
}
.page-bullet svg { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.page-bullet div strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.page-bullet div span { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

/* Two-column splitter */
.page-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.page-split img { width: 100%; border-radius: var(--radius); }
@media (max-width: 880px) { .page-split { grid-template-columns: 1fr; } }

/* Mid CTA */
.mid-cta {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center;
}
.mid-cta h3 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.mid-cta p { font-size: 15px; opacity: .9; max-width: 520px; margin: 0 auto 18px; }
.mid-cta .btn-white { background: #fff; color: var(--blue-dark); }

/* ── Tighter packing at smaller widths (before mobile menu kicks in) ── */
@media (max-width: 1100px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13px; }
  .nav-actions .btn-ghost { display: none; } /* hide "Partners" link to free space */
}

/* ── Mobile adjustments for v2 ── */
@media (max-width: 980px) {
  .nav-links { display: none; }
  /* The drawer.
     Three things were wrong with it. `.nav-links` sets align-items:center
     for the desktop bar; in a column that centres each row, and since
     .nav-item is width:100% but a plain <a> is not, the items with
     submenus sat left while Pricing and Hardware floated to the middle.
     Stretch instead, so every row starts at the same place.

     It also had no height limit: opening Platform made the drawer
     1339px tall inside an 844px screen, and the last 563px of it —
     including most of the menu — could not be reached at all. Capped to
     the space under the nav and scrollable. dvh so the browser's own
     chrome does not push the bottom off. */
  .nav-links-open {
    display: flex; flex-direction: column; align-items: stretch;
    /* flex-start matters as much as the height cap. `.nav-links` centres
       on the main axis for the desktop bar; in a column whose content
       overflows, centring pushes the excess out of BOTH ends, and the
       part above the box cannot be scrolled back to. With Platform open
       the whole top-level list sat at -262px with scrollTop already 0. */
    justify-content: flex-start;
    gap: 2px; padding: 10px 16px 20px;
    background: #fff;
    position: absolute; top: 100%; left: 0; right: 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(15,23,42,.10);
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Rows sized for a thumb rather than a cursor. */
  .nav-links-open .nav-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 12px; margin: 0;
    min-height: 50px;
    font-size: 16px; font-weight: 650;
    color: var(--text);
    border-radius: 12px;
  }
  .nav-links-open .nav-link:active { background: var(--bg-alt); }
  .nav-links-open .nav-caret { width: 14px; height: 14px; }
  .nav-links-open .nav-item { width: 100%; }
  /* Hairline between top-level entries, so the list reads as a list. */
  .nav-links-open > .nav-item + .nav-item,
  .nav-links-open > a + .nav-item,
  .nav-links-open > .nav-item + a,
  .nav-links-open > a + a { border-top: 1px solid #F1F5F9; }
  .nav-links-open > a {
    display: flex; align-items: center;
    padding: 14px 12px; min-height: 50px;
    font-size: 16px; font-weight: 650; color: var(--text);
    border-radius: 12px;
  }
  /* The open submenu, set in from the row it belongs to. */
  .nav-links-open .nav-item-open > .nav-link { color: var(--blue); }
  .nav-links-open .nav-dropdown {
    position: static; transform: none; box-shadow: none;
    border: 0; border-radius: 0;
    padding: 2px 0 14px 12px; min-width: 0; display: none; margin-top: 0;
    background: transparent;
  }
  .nav-links-open .nav-dropdown::before { display: none; }
  .nav-links-open .nav-item-open .nav-dropdown { display: block; }
  .nav-mobile-toggle { display: block; }
  .nav-dropdown-wide,
  .nav-dropdown-cols,
  .nav-dropdown-grouped { grid-template-columns: 1fr; min-width: 0; }
  .product-block-header { flex-direction: column; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Suite page: one card per module ──────────────────────────────
   The picture is a CSS background with the module's icon sitting on
   top of it. A module whose photograph has not been made yet shows
   the icon on a tinted panel instead of a broken image, so the page
   is complete from day one and fills in as artwork arrives.

   Drop a file at asset_Website/modules/<suite>-<module>.webp and it
   appears — 1200x750 (16:10). */
.mod-group-title {
  font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-tertiary);
  margin: 34px 0 14px;
}
.mod-group-title:first-of-type { margin-top: 0; }
.mod-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.mod-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  /* The nav links here by fragment; without this the sticky header
     lands on top of the card it just jumped to. */
  scroll-margin-top: 96px;
}
.mod-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 12px 30px rgba(37,99,235,.12);
}
.mod-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: #EEF3FD;
  background-image: var(--shot);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
/* Once a real picture is in place the icon would sit on top of it, so
   it only shows while the slot is empty. */
.mod-shot[style*="url"] .mod-shot-ico { display: none; }
.mod-shot-ico { width: 40px; height: 40px; fill: rgba(37,99,235,.34); }
.mod-body { padding: 16px 18px 18px; }
.mod-body h4 { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
.mod-body p {
  font-size: 13px; line-height: 1.5; margin: 0;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
@media (max-width: 980px)  { .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .mod-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Module page ──────────────────────────────────────────────────
   One page per module. Every picture is a CSS background with the
   module's own icon behind it, so a slot with no artwork yet shows the
   icon on a tinted panel instead of a broken image.

   Sizes:  hero  1600x1000 (16:10)   ...-wide.webp
           gallery 1200x900 (4:3)    ...-1/-2/-3.webp
           card  1200x750  (16:10)   ...webp                        */
.md-hero {
  padding: 120px 0 56px;
  background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
}
.md-hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 48px; align-items: center;
}
.md-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--accent, var(--blue));
  margin-bottom: 14px;
}
.md-eyebrow svg { width: 15px; height: 15px; fill: currentColor; }
.md-hero h1 {
  font-size: clamp(30px, 4vw, 46px); line-height: 1.08;
  letter-spacing: -1.3px; margin: 0 0 14px;
  text-wrap: balance;
}
.md-tagline { font-size: 18px; line-height: 1.45; color: var(--text-secondary); margin: 0 0 14px; }
.md-intro   { font-size: 15px; line-height: 1.65; color: var(--text-tertiary); margin: 0 0 26px; max-width: 62ch; }
.md-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.md-shot-wide, .md-gal {
  position: relative;
  background-color: #EAF1FD;
  background-image: var(--shot);
  background-size: cover; background-position: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.md-shot-wide { aspect-ratio: 16 / 10; }
.md-gal       { aspect-ratio: 4 / 3; margin: 0; }
/* The icon is the placeholder — once a picture is set it would sit on
   top of it, so it goes away. */
.md-shot-wide[style*="url"] .md-shot-ico,
.md-gal[style*="url"] svg { display: none; }
.md-shot-wide svg { width: 64px; height: 64px; fill: rgba(37,99,235,.28); }
.md-gal svg       { width: 40px; height: 40px; fill: rgba(37,99,235,.24); }

.md-points {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.md-point {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px;
}
.md-point h4 { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.md-point p  { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; overflow-wrap: anywhere; }

.md-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.md-rels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.md-rel {
  display: flex; align-items: flex-start; gap: 11px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 16px;
  text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  min-width: 0;
}
.md-rel:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,99,235,.10); }
.md-rel svg { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--blue); margin-top: 1px; }
.md-rel span { display: flex; flex-direction: column; min-width: 0; }
.md-rel strong { font-size: 13.5px; font-weight: 700; }
.md-rel em {
  font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--text-tertiary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .md-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .md-points, .md-gallery, .md-rels { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .md-rels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Sales page ───────────────────────────────────────────────────
   Built around the app's own Sales screen rather than a generic
   template, because the screenshot names ten real features and a
   three-bullet page would be selling less than the product does. */
.sales-hero { padding-bottom: 20px; overflow: hidden; }
.sales-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 56px; align-items: center;
}
.sales-hero-list {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: flex; flex-direction: column; gap: 9px;
}
.sales-hero-list li {
  position: relative; padding-inline-start: 26px;
  font-size: 14px; color: var(--text-secondary);
}
.sales-hero-list li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(37,99,235,.12);
  box-shadow: inset 0 0 0 2px var(--blue);
}
/* The screenshot is a phone capture, so it is shown as one — a device
   shell rather than a floating rectangle, which reads as a screenshot
   pasted onto a page. */
.sales-phone {
  margin: 0; justify-self: center;
  width: min(300px, 78vw);
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #E8EEF9 0%, #C9D6EC 100%);
  box-shadow: 0 30px 70px rgba(15,23,42,.20), 0 2px 6px rgba(15,23,42,.10);
}
.sales-phone img {
  display: block; width: 100%; height: auto;
  border-radius: 32px;
  background: #fff;
}

.sales-feat-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.sales-feat {
  background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 22px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  min-width: 0;
}
.sales-feat:hover {
  border-color: var(--blue); transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37,99,235,.10);
}
.sales-feat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: color-mix(in srgb, var(--c) 12%, white);
  margin-bottom: 13px;
}
.sales-feat-ico svg { width: 21px; height: 21px; fill: var(--c); }
.sales-feat h3 { font-size: 16px; font-weight: 800; margin: 0 0 7px; }
.sales-feat p  { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; overflow-wrap: anywhere; }

.sales-flow { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.sales-flow-shot { margin: 0; }
.sales-flow-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 18px; border: 1px solid var(--border);
}
.sales-steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 16px; }
.sales-steps li { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); }
.sales-steps strong { color: var(--text); }

.sales-gal { margin: 0; }
.sales-gal img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: 1px solid var(--border); background: #fff;
}
.sales-gal figcaption {
  display: block; margin-top: 12px;
  font-size: 13px; line-height: 1.55; color: var(--text-tertiary);
}
.sales-gal figcaption strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 3px; }

/* The photograph of somebody using it is not shot yet. Until the file
   lands this reads as a designed band rather than a gap — the text is
   the point, and the picture joins it later. */
.sales-hands {
  position: relative; overflow: hidden;
  border-radius: 22px;
  min-height: 340px;
  display: flex; align-items: center;
  padding: 44px;
  background-color: #0F172A;
  background-image: linear-gradient(100deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.62) 52%, rgba(15,23,42,.30) 100%), var(--shot);
  background-size: cover; background-position: center right;
}
.sales-hands-text { max-width: 46ch; color: #fff; }
.sales-hands-text h2 { font-size: clamp(22px, 3vw, 32px); line-height: 1.15; margin: 0 0 12px; color: #fff; }
.sales-hands-text p  { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.86); margin: 0 0 22px; }

@media (max-width: 980px) {
  .sales-hero-grid, .sales-flow { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sales-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-hands { padding: 30px; }
}
@media (max-width: 640px) {
  .sales-feat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Feature cards that lead somewhere. */
a.sales-feat { display: block; text-decoration: none; color: var(--text); }
.sales-feat-more {
  display: inline-block; margin-top: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--blue);
}
/* Three real captures side by side. Phones are tall, so they are shown
   smaller than the illustrations were and capped, or the section
   becomes a wall. */
.sales-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.sales-screen { margin: 0; text-align: center; }
.sales-screen img {
  width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto;
  border-radius: 22px; border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(15,23,42,.14);
  background: #fff;
}
.sales-screen figcaption {
  margin-top: 16px; font-size: 13px; line-height: 1.55;
  color: var(--text-tertiary); text-align: center;
}
.sales-screen figcaption strong { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 4px; }
@media (max-width: 900px) { .sales-screens { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* Hardware models we have no photograph for yet. A broken-image icon
   told the visitor the site was broken; this says the picture is
   simply not here, and keeps the row aligned. */
.hw-shot-pending {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 14px;
  background:
    repeating-linear-gradient(45deg, #F4F7FC 0 10px, #EDF2FA 10px 20px);
  border: 1px dashed #D3DEEE;
}

/* ── Home hero: full-bleed slider ─────────────────────────────────
   Seven slides, one per thing the platform is for.

   The image is shown whole — width:100%, height:auto — rather than
   cropped to a band. object-fit:cover was cutting the top and bottom
   off compositions that were drawn to be read across, so the coin at
   the end of the sales flow, and the racking behind the stock scene,
   simply were not there. The artwork is instead extended to 2.5:1 on
   its own white background, which is seamless, and the copy sits in
   the space that creates on the left. */
/* The nav is fixed at roughly 69px, so without this the top of every
   illustration sat underneath it — on the sales slide the chart panel
   was half behind the menu bar. */
.hslider { position: relative; background: #FFFFFF; overflow: hidden; padding-top: 76px; }
.hslider-track { position: relative; }
.hslide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease;
}
.hslide.is-active { position: relative; opacity: 1; visibility: visible; }
.hslide-img {
  display: block; width: 100%; height: auto;
  /* On a wide monitor a 2.2:1 band would be 1240px tall and push
     everything below it off the fold. Capped, with contain rather
     than cover so the cap never crops — the artwork is on white, so
     the space the cap creates is invisible. */
  max-height: 78vh;
  object-fit: contain;
  position: relative; z-index: 0;
}
/* A wash from the left, so the copy holds contrast over whatever the
   illustration does at that point. */
.hslide::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, #FFFFFF 0%, rgba(255,255,255,.95) 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 66%);
}
.hslide-body {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 0; padding-bottom: 0;
}
/* The artwork starts around 38% across, so the copy has to stop
   before it. 44ch let the headline and the last words of the
   paragraph run onto the illustration. The heading is capped tighter
   than the body because it is set much larger — at 50px, 20ch is
   already most of the space there is. */
.hslide-body > * { max-width: 34ch; }
.hslide-body h2 { max-width: 20ch; }
.hslide-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 12px;
}
.hslide-body h2 {
  font-size: clamp(26px, 3.6vw, 50px); line-height: 1.05;
  letter-spacing: -1.5px; margin: 0 0 14px;
  text-wrap: balance;
}
.hslide-body p {
  font-size: clamp(14px, 1.35vw, 18px); line-height: 1.55;
  color: var(--text-secondary); margin: 0 0 24px;
}
.hslide-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hslider-nav {
  position: absolute; left: 0; right: 0; bottom: 22px;
  z-index: 3; display: flex;
}
.hslider .hero-dots { display: flex; gap: 9px; }
.hslider .hero-dot {
  width: 30px; height: 4px; padding: 0;
  border: 0; border-radius: 4px;
  background: rgba(15,23,42,.18);
  cursor: pointer; transition: background .2s, width .2s;
}
.hslider .hero-dot.is-active { background: var(--blue); width: 46px; }

/* Eight dots at 30px with 9px gaps come to 343px, which does not fit a
   320px phone — the last one was being clipped by the body's
   overflow-x. Narrower dots and a tighter gap bring the row to ~200px. */
@media (max-width: 400px) {
  .hslider .hero-dots { gap: 6px; }
  .hslider .hero-dot { width: 18px; }
  .hslider .hero-dot.is-active { width: 30px; }
}

/* Below this the 2.5:1 band is too short to hold the copy over the
   artwork, so the two stack: picture first, words under it. */
@media (max-width: 900px) {
  .hslide-body {
    position: relative; inset: auto;
    /* padding-block, not the shorthand: these are .container elements and
     the shorthand's second value resets the 24px side padding the
     container gives them, so the copy ran flush to both screen edges. */
    padding-block: 26px 54px;
  }
  .hslide-body > * { max-width: none; }
  .hslide::before { display: none; }
  .hslider-nav { bottom: 16px; }

  /* These illustrations carry roughly a third of empty canvas on the
     left, because on desktop the copy sits on top of it. Stacked, that
     third holds nothing — the picture becomes a 177px strip on a 844px
     screen with the subject squeezed into the right of it. Cropping to
     the part that has something in it gives the artwork the width back. */
  .hslide-img {
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: none;
    object-fit: cover;
    object-position: 100% center;
  }
  /* The RTL nudge is the same desktop device in mirror — it slides the
     art out from under right-aligned copy. Stacked there is nothing to
     slide out from under, and .hslider clips what it pushes out. */
  /* Needs the extra class: the desktop RTL rule is the same weight and
     sits further down the file, so a plain [dir=rtl] .hslide-img here
     loses to it. */
  [dir="rtl"] .hslide .hslide-img { transform: none; }
}
/* ── The hero band in right-to-left ──
   The copy flips to the right with the text direction, but the white
   wash that makes it readable only ran from the left — so in Arabic,
   Persian and Kurdish the headline sat on the unfaded middle of the
   illustration and could not be read at all.

   Mirroring the wash rather than moving the copy: the text belongs at
   the reading start of the line in any language, and the artwork is
   symmetrical enough that fading it from the other side works as well
   as it does in English. */
/* ── Full-bleed bands in right-to-left ──
   Three sections put the copy on top of a wide illustration: the home
   hero slider, the live-shopping band, and the Kardo AI hero. All three
   use artwork composed with its ink in the right 40–99% of the frame
   and the left half left deliberately empty, because that is where the
   English copy sits. Flip the page and the copy lands on the busiest
   part of the picture — no amount of white wash rescues that.

   So the artwork moves. Shifting it 38% to the left puts every one of
   these images in roughly the left two-thirds and leaves the right ~39%
   clear for the Arabic, Persian and Kurdish copy. What is clipped off
   the left edge is the empty white margin, and each band's own
   background is white, so the space opened on the right is invisible.

   With the artwork out from under the words the wash only has to guard
   the far right, so it is much lighter than the LTR one and leaves the
   illustration at full strength. */
[dir="rtl"] .hslide-img,
[dir="rtl"] .livecta-img,
[dir="rtl"] .ai-hero-img { transform: translateX(-38%); }

[dir="rtl"] .hslide::before,
[dir="rtl"] .livecta::after,
[dir="rtl"] .ai-hero::after {
  background: linear-gradient(260deg, #FFFFFF 0%, rgba(255,255,255,.92) 20%, rgba(255,255,255,.4) 34%, rgba(255,255,255,0) 46%);
}

/* `ch` is the width of a zero, and Arabic and Persian set far wider
   than Latin at the same measure — 34ch of Arabic ran past the wash and
   onto the artwork. */
[dir="rtl"] .hslide-body > * { max-width: 30ch; }
[dir="rtl"] .hslide-body h2 { max-width: 17ch; }
[dir="rtl"] .livecta-body > * { max-width: 34ch; }
[dir="rtl"] .ai-hero-body > * { max-width: 30ch; }

/* Latin display type is tightened with negative tracking in thirty
   places here. Arabic, Persian and Kurdish are joined scripts: pulling
   the glyphs together does not tighten a word, it collides the strokes.
   Normal tracking, everywhere, for those three. */
[dir="rtl"] * { letter-spacing: normal; }
/* Except the uppercase Latin eyebrows and chips, which are still Latin
   even on an Arabic page and lose their shape without the tracking. */
[dir="rtl"] .hslide-eyebrow,
[dir="rtl"] .badge,
[dir="rtl"] .lang-pick-code,
[dir="rtl"] .lang-pick-head { letter-spacing: .8px; }

@media (prefers-reduced-motion: reduce) { .hslide { transition: none; } }

/* ── In your hand ─────────────────────────────────────────────────
   The two photographs carry the real app on their screens — the
   Sales screen, composited in — so this section is showing the
   product rather than a stock phone. */
.inhand { background: #fff; }
.inhand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.inhand-shot { margin: 0; }
.inhand-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 20px; border: 1px solid var(--border);
}
@media (max-width: 900px) { .inhand-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Kardo AI page ────────────────────────────────────────────────
   The one feature on the site that had no page of its own, which was
   an odd gap given it is the thing the search bar on every screen
   actually is. */
/* Same treatment as the homepage hero: the picture is shown whole and
   the copy sits on the white space the artwork was drawn with, rather
   than in a column beside a shrunken image. */
.ai-hero {
  position: relative; overflow: hidden;
  background: #FFFFFF; padding-top: 76px;
}
.ai-hero-img {
  display: block; width: 100%; height: auto;
  max-height: 74vh; object-fit: contain;
  position: relative; z-index: 0;
}
.ai-hero::after {
  content: ''; position: absolute; inset: 76px 0 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, #FFFFFF 0%, rgba(255,255,255,.95) 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 66%);
}
.ai-hero-body {
  position: absolute; inset: 76px 0 0 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
}
.ai-hero-body > * { max-width: 34ch; }
.ai-hero-body h1 {
  font-size: clamp(26px, 3.6vw, 50px); line-height: 1.05;
  letter-spacing: -1.5px; margin: 0 0 14px; max-width: 20ch;
  text-wrap: balance;
}
.ai-hero-body .dd-crumb { margin-bottom: 16px; max-width: none; }
.ai-hero-body .md-cta { max-width: none; }

@media (max-width: 900px) {
  .ai-hero-body { position: relative; inset: auto; padding-block: 24px 44px; }
  .ai-hero-body > *, .ai-hero-body h1 { max-width: none; }
  .ai-hero::after { display: none; }
  /* Same as the hero: stacked, the empty third the artwork carries on
     the left has nothing to hold, so crop to the subject. */
  .ai-hero-img {
    aspect-ratio: 4 / 3;
    height: auto; max-height: none;
    object-fit: cover; object-position: 100% center;
  }
  [dir="rtl"] .ai-hero-img { transform: none; }
}

/* Question on top, what comes back underneath — the pairing is the
   point, so they are one block rather than two columns. */
.ai-says { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ai-say {
  display: flex; flex-direction: column; gap: 5px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
  transition: border-color .18s, transform .18s;
}
.ai-say:hover { border-color: var(--blue); transform: translateY(-1px); }
.ai-say-q { font-size: 14.5px; font-weight: 700; color: var(--text); }
.ai-say-a { font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); }

.ai-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ai-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
}
.ai-card-shot { margin: 0; background: #F6F9FE; }
.ai-card-shot img { width: 100%; height: auto; display: block; }
.ai-card h3 { font-size: 17px; font-weight: 800; margin: 18px 20px 8px; }
.ai-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 20px 20px; }

.ai-safety { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: center; }
.ai-safety-shot { margin: 0; }
.ai-safety-shot img { width: 100%; height: auto; display: block; border-radius: 18px; }
.ai-safety-text h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; margin: 0 0 12px; }
.ai-safety-text > p { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 22px; }
.ai-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ai-list li {
  position: relative; padding-inline-start: 26px;
  font-size: 13.5px; line-height: 1.6; color: var(--text-secondary);
}
.ai-list li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(124,58,237,.12); box-shadow: inset 0 0 0 2px #7C3AED;
}
.ai-list strong { color: var(--text); }

@media (max-width: 900px) {
  .ai-hero-grid, .ai-safety, .ai-three, .ai-says { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* ── Live for retail ──────────────────────────────────────────────
   The one full-bleed band between the hero and the footer, so it
   reads as the thing being singled out rather than another row of
   cards. Same construction as the hero: whole picture, copy on the
   white space it was drawn with. */
.livecta { position: relative; overflow: hidden; background: #FFFFFF; }
.livecta-img {
  display: block; width: 100%; height: auto;
  max-height: 86vh; object-fit: contain;
  position: relative; z-index: 0;
}
.livecta::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, #FFFFFF 0%, rgba(255,255,255,.96) 32%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 68%);
}
.livecta-body {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
}
.livecta-body > * { max-width: 40ch; }
.livecta-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: #E11D48; margin-bottom: 12px;
}
/* The dot pulses, because a live indicator that does not is just a
   red circle. Stopped for anyone who asked for less motion. */
.livecta-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #E11D48;
  box-shadow: 0 0 0 0 rgba(225,29,72,.55);
  animation: livepulse 1.8s ease-out infinite;
}
@keyframes livepulse {
  70%  { box-shadow: 0 0 0 9px rgba(225,29,72,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,29,72,0); }
}
@media (prefers-reduced-motion: reduce) { .livecta-dot { animation: none; } }
.livecta-body h2 {
  font-size: clamp(24px, 3.2vw, 42px); line-height: 1.08;
  letter-spacing: -1.3px; margin: 0 0 14px; max-width: 22ch;
  text-wrap: balance;
}
.livecta-body > p {
  font-size: clamp(14px, 1.3vw, 16.5px); line-height: 1.6;
  color: var(--text-secondary); margin: 0 0 20px;
}
.livecta-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.livecta-list li {
  position: relative; padding-inline-start: 24px;
  font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
}
.livecta-list li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(225,29,72,.10); box-shadow: inset 0 0 0 2px #E11D48;
}
.livecta-list strong { color: var(--text); }
.livecta-cta { display: flex; gap: 12px; flex-wrap: wrap; max-width: none; }

@media (max-width: 980px) {
  .livecta-body { position: relative; inset: auto; padding-block: 26px 52px; }
  .livecta-body > *, .livecta-body h2 { max-width: none; }
  .livecta::after { display: none; }
  /* Same as the hero: stacked, the empty third the artwork carries on
     the left has nothing to hold, so crop to the subject. */
  .livecta-img {
    aspect-ratio: 4 / 3;
    height: auto; max-height: none;
    object-fit: cover; object-position: 100% center;
  }
  [dir="rtl"] .livecta-img { transform: none; }
}

/* ── Pricing: the six-step ladder ──
   Six across fitted, but only barely: at 1240px each card was ~190px,
   which wrapped "One person, one counter" onto two lines and turned
   "Priority email support" into three. Three across gives each card
   360px, which is room for the tagline to sit on one line and for the
   bullets to read as a list rather than as a squeeze. Two rows loses
   nothing — the ladder still reads left to right, top to bottom. */
.ladder-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; max-width: 1180px; margin: 0 auto; align-items: stretch;
}
.ladder-grid .price-card { padding: 34px 28px; display: flex; flex-direction: column; }
.ladder-grid .price-card h4 { font-size: 21px; margin-bottom: 6px; }
.ladder-grid .price-amount { font-size: 42px; margin-bottom: 2px; }
.ladder-grid .price-amount span { font-size: 15px; }
.ladder-tagline { font-size: 14px; color: var(--text-tertiary); margin-bottom: 22px; }
.ladder-grid .price-card ul { margin-bottom: 22px; flex: 1; }
.ladder-grid .price-card li { font-size: 14px; padding: 9px 0; }
.ladder-year { font-size: 12.5px; color: var(--text-tertiary); margin-top: 12px; }
.ladder-incvat { font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 14px; }
.pack-incvat { font-size: 11.5px; color: var(--text-tertiary); text-align: right; margin: -2px 0 6px; }
.addon-group-title { text-align: center; font-size: 15px; font-weight: 700; color: var(--text); margin: 34px 0 14px; }
@media (max-width: 1020px) { .ladder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
@media (max-width: 620px)  { .ladder-grid { grid-template-columns: 1fr; max-width: 400px; } }

/* ── Pricing: what every plan carries ──
   The ladder lists seats and terminals, which makes it look as though
   that is all you get. This is the part that says otherwise: the whole
   product is in every plan, and the price only tracks how big you are. */
.included { max-width: 1180px; margin: 0 auto; }
.included-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.included-col {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 22px;
}
.included-col h4 {
  font-size: 12px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 4px;
}
.included-col .included-sub { font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px; line-height: 1.5; }
.included-col ul { list-style: none; }
.included-col li {
  font-size: 13.5px; color: var(--text-secondary); padding: 5px 0;
  display: flex; align-items: flex-start; gap: 8px;
}
.included-col li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0; margin-top: 7px; opacity: .55;
}
.included-note {
  text-align: center; margin-top: 28px; font-size: 15px; color: var(--text-secondary);
}
.included-note strong { color: var(--text); }
@media (max-width: 1020px) { .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .included-grid { grid-template-columns: 1fr; } }

/* ── Pricing: trade packs ── */
.pack-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1160px; margin: 0 auto; }
.pack-grid > .pack-card { flex: 0 0 calc((100% - 3 * 20px) / 4); min-width: 0; }
.pack-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 26px 22px; transition: all .3s; }
.pack-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.08); transform: translateY(-4px); }
.pack-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pack-head h4 { font-size: 17px; font-weight: 800; }
.pack-price { font-size: 20px; font-weight: 900; white-space: nowrap; }
.pack-price span { font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.pack-card p { font-size: 13px; color: var(--text-tertiary); margin-bottom: 14px; }
.pack-card ul { list-style: none; }
.pack-card li { font-size: 13.5px; color: var(--text-secondary); padding: 6px 0; display: flex; align-items: flex-start; gap: 8px; }
.pack-card li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 7px; }
@media (max-width: 1000px) { .pack-grid { max-width: 620px; } .pack-grid > .pack-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 560px)  { .pack-grid { max-width: 380px; } .pack-grid > .pack-card { flex-basis: 100%; } }

/* ── Pricing: single add-ons ── */
.addon-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; max-width: 900px; margin: 0 auto; }
.addon-chip { background: #fff; border: 1.5px solid var(--border); border-radius: 100px; padding: 14px 26px; font-size: 15px; color: var(--text-secondary); }
.addon-chip strong { color: var(--text); font-weight: 800; }
/* The packs intro is a paragraph, not a strapline — it needs the width. */
.section-header .section-sub.wide { max-width: 720px; }

/* ── Language picker ──
   A bare <details> so it works with JavaScript off and needs no hook
   into the nav script, whose mega-menu hover timing is easy to break.

   The trigger is a globe and a two-letter code. The nav already carries
   five mega-menu links and two buttons; "Bahasa Indonesia" in there
   pushes the sign-in button off the row. Full names live in the menu. */
.lang-pick { position: relative; flex-shrink: 0; }
.lang-pick > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 9px 0 10px; border-radius: 100px;
  border: 1.5px solid var(--border); background: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-secondary); transition: all .2s;
}
.lang-pick > summary::-webkit-details-marker { display: none; }
.lang-pick > summary::marker { content: ''; }
.lang-pick > summary:hover,
.lang-pick[open] > summary { border-color: var(--blue); color: var(--blue); }
.lang-pick-globe { flex-shrink: 0; }
.lang-pick-cur { font-variant-numeric: tabular-nums; }
.lang-pick-caret { opacity: .55; transition: transform .2s; }
.lang-pick[open] .lang-pick-caret { transform: rotate(180deg); }

.lang-pick-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 300;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 52px rgba(15,23,42,.16);
  padding: 12px; width: 340px; max-width: calc(100vw - 32px);
  max-height: min(66vh, 480px); overflow-y: auto;
}
.lang-pick-head {
  font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--text-tertiary); padding: 2px 8px 10px;
}
.lang-pick-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.lang-pick-list a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 9px;
  font-size: 13.5px; color: var(--text-secondary); text-decoration: none;
  min-width: 0;
}
.lang-pick-list a:hover { background: var(--bg-alt); color: var(--text); }
.lang-pick-code {
  flex-shrink: 0; width: 26px; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  color: var(--text-tertiary); background: var(--bg-alt);
  border-radius: 5px; padding: 3px 0; line-height: 1;
}
.lang-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-pick-tick { flex-shrink: 0; margin-inline-start: auto; color: var(--blue); }
.lang-pick-list a[aria-current] { background: var(--blue-light); color: var(--blue-dark); font-weight: 700; }
.lang-pick-list a[aria-current] .lang-pick-code { background: #fff; color: var(--blue); }

@media (max-width: 900px) {
  .lang-pick-menu { width: 268px; }
  .lang-pick-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* nav-links and nav-actions both go on mobile; the picker is a
     sibling of them, so it stays. It pushes to the end of the row and
     the hamburger follows immediately after it. */
  .lang-pick { margin-inline-start: auto; }
  .nav-mobile-toggle { margin-inline-start: 0; }
  .lang-pick > summary { height: 32px; padding: 0 8px 0 9px; }
}

/* ── Right-to-left ──
   The layout is written with logical properties nearly everywhere, so
   RTL mostly falls out of dir="rtl". These are the places that still
   held a physical side. */
[dir="rtl"] .nav-caret { transform: scaleX(-1); }

/* ── Contact form: honeypot and result line ── */
/* Off-screen rather than display:none — some bots skip hidden inputs,
   and this one is meant to be filled in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 12px; font-size: 14px; line-height: 1.5; text-align: center; }
.form-status.is-ok { color: #047857; }
.form-status.is-err { color: #B91C1C; }
.form-status a { color: inherit; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   API & DOCS (/docs)
   ═══════════════════════════════════════════════════════════════ */
.api-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.api-fact {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 18px; text-align: center;
}
.af-num {
  font-size: 38px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.af-label {
  margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
}

/* Code samples */
.api-code-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 34px;
}
.api-code {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff; min-width: 0;
}
.api-code-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--bg-alt);
}
.api-code-head code {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  background: none; padding: 0;
}
.api-code-head em {
  font-style: normal; font-size: 11.5px; color: var(--text-tertiary);
  flex-basis: 100%; line-height: 1.4;
}
.api-verb {
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  color: #fff; background: var(--green);
  padding: 3px 7px; border-radius: 5px;
}
.api-code pre {
  margin: 0; padding: 16px; overflow-x: auto;
  background: #0F172A;
}
.api-code pre code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.65; color: #CBD5E1;
  white-space: pre; background: none; padding: 0;
}

/* Parameter table */
.api-params { margin-top: 6px; }
.api-params h3 { font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.api-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.api-table th {
  text-align: start; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .9px; color: var(--text-tertiary);
  background: var(--bg-alt); padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.api-table td {
  padding: 12px 16px; font-size: 13.5px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.api-table tr:last-child td { border-bottom: 0; }
.api-table td:first-child { white-space: nowrap; }
.api-params-note {
  margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary);
}

/* Inline code, used across this page */
.api-table code, .api-params-note code, .feat-card code, .page-bullet code,
.page-hero code, .section-sub code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .88em; background: #EEF2F9; color: var(--blue-dark);
  padding: 2px 6px; border-radius: 5px;
}

/* Module catalogue */
.api-mod-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.api-mod {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.api-mod:hover {
  border-color: var(--blue); transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(15,23,42,.07);
}
.api-mod-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.api-mod-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.api-mod-head h4 { font-size: 15px; font-weight: 800; flex: 1; min-width: 0; }
.api-mod-count {
  font-size: 11px; font-weight: 800; color: var(--text-tertiary);
  background: var(--bg-alt); border-radius: 20px; padding: 3px 9px;
}
.api-mod-blurb {
  font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 11px;
}
.api-mod-paths { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }
.api-mod-paths code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10.5px; color: var(--text-secondary);
  background: var(--bg-alt); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 5px;
}
.api-mod-more { font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); align-self: center; }
.api-mod-foot {
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.api-mod-scope {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 700; color: var(--blue-dark);
  background: var(--blue-light); padding: 3px 8px; border-radius: 5px;
}
.api-mod-phone {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--text-tertiary);
}
.api-mod-phone svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* Phone section */
.api-phone {
  display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: center;
}
.api-phone-copy h2 { font-size: 34px; font-weight: 900; line-height: 1.18; margin: 14px 0 14px; }
.api-phone-copy > p { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); }
.api-phone-list { list-style: none; margin: 20px 0 26px; display: grid; gap: 13px; }
.api-phone-list li {
  font-size: 14px; line-height: 1.6; color: var(--text-secondary);
  padding-inline-start: 26px; position: relative;
}
.api-phone-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
}
.api-phone-list strong { color: var(--text); font-weight: 700; }
.api-phone-art img { width: 100%; height: auto; display: block; }

@media (max-width: 1000px) {
  .api-facts { grid-template-columns: repeat(2, 1fr); }
  .api-code-grid { grid-template-columns: 1fr; }
  .api-mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-phone { grid-template-columns: 1fr; gap: 28px; }
  .api-phone-art { max-width: 320px; margin: 0 auto; }
  .api-phone-copy h2 { font-size: 28px; }
}
@media (max-width: 640px) {
  .api-mod-grid { grid-template-columns: 1fr; }
  .api-table th, .api-table td { padding: 10px 12px; font-size: 12.5px; }
}

/* Six advantage cards read as 4 + 2 in the shared four-up grid; three
   across leaves two even rows. Scoped to this page only. */
.api-page .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .api-page .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .api-page .feat-grid { grid-template-columns: 1fr; } }

/* Cards in a row stretch to the tallest; without this the dark block
   stops at its own content and leaves a white gap under short samples. */
.api-code { display: flex; flex-direction: column; }
.api-code pre { flex: 1; }

/* `.badge` is only styled inside `.page-hero`; this one sits in a body
   section, so it carries its own pill rather than changing the shared
   rule out from under the other pages that use it. */
.api-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-light); color: var(--blue-dark);
  padding: 6px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER STORIES (/customers)
   ═══════════════════════════════════════════════════════════════ */
.story-note {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--blue-light); border: 1px solid #DBEAFE;
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 30px;
  color: var(--blue-dark);
}
.story-note svg { flex: 0 0 auto; margin-top: 1px; }
.story-note p { font-size: 13.5px; line-height: 1.6; }

.story-grid { display: grid; gap: 20px; }
.story {
  display: grid; grid-template-columns: 300px 1fr;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.story:hover { border-color: #CBD5E1; box-shadow: 0 14px 40px rgba(15,23,42,.08); }
.story-shot { position: relative; min-height: 240px; background: var(--bg-alt); }
.story-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-sector {
  position: absolute; inset-block-start: 14px; inset-inline-start: 14px;
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  padding: 5px 11px; border-radius: 100px;
}
.story-body { padding: 26px 28px; display: flex; flex-direction: column; }
.story-body h3 { font-size: 22px; font-weight: 800; line-height: 1.28; }
.story-shape {
  font-size: 13.5px; color: var(--text-tertiary); margin-top: 8px; line-height: 1.55;
}
.story-turn {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0 18px;
}
.story-half { padding-inline-start: 14px; border-inline-start: 2px solid var(--border); }
.story-half p { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
.story-half-label {
  display: block; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.1px; margin-bottom: 6px;
}
.story-before { border-inline-start-color: #FCA5A5; }
.story-before .story-half-label { color: #DC2626; }
.story-after { border-inline-start-color: #6EE7B7; }
.story-after .story-half-label { color: #047857; }
.story-mods { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.story-mods span {
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-alt); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 100px;
}

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-shot { min-height: 190px; }
  .story-body { padding: 22px; }
  .story-body h3 { font-size: 19px; }
  .story-turn { grid-template-columns: 1fr; gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   SYSTEM STATUS (/status)
   States come from data-state on the card, set by the live probe:
   checking · up · slow · down
   ═══════════════════════════════════════════════════════════════ */
.st-overall {
  display: flex; align-items: center; gap: 15px;
  padding: 20px 24px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-alt);
  margin-bottom: 22px;
}
.st-overall-dot {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  background: var(--text-tertiary);
}
.st-overall-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-overall-text strong { font-size: 18px; font-weight: 800; }
.st-overall-text em { font-style: normal; font-size: 13px; color: var(--text-tertiary); }
.st-overall[data-state="up"]   { background: #ECFDF5; border-color: #A7F3D0; }
.st-overall[data-state="up"]   .st-overall-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(16,185,129,.16); }
.st-overall[data-state="slow"] { background: #FFFBEB; border-color: #FDE68A; }
.st-overall[data-state="slow"] .st-overall-dot { background: var(--orange); box-shadow: 0 0 0 5px rgba(245,158,11,.16); }
.st-overall[data-state="down"] { background: #FEF2F2; border-color: #FECACA; }
.st-overall[data-state="down"] .st-overall-dot { background: var(--red); box-shadow: 0 0 0 5px rgba(239,68,68,.16); }
.st-overall[data-state="checking"] .st-overall-dot { animation: stBlink 1.1s ease-in-out infinite; }
@keyframes stBlink { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.st-recheck {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--text-secondary); cursor: pointer;
  background: #fff; border: 1px solid var(--border);
  padding: 9px 15px; border-radius: 10px; transition: all .15s;
}
.st-recheck:hover { border-color: var(--blue); color: var(--blue); }

.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column;
}
.st-card header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.st-card header h4 { font-size: 16px; font-weight: 800; flex: 1; min-width: 0; }
.st-card > p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.st-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-tertiary);
}
.st-pill {
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  padding: 4px 9px; border-radius: 100px;
  background: var(--bg-alt); color: var(--text-tertiary);
  white-space: nowrap;
}
.st-card[data-state="up"]   .st-dot  { background: var(--green); box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.st-card[data-state="up"]   .st-pill { background: #ECFDF5; color: #047857; }
.st-card[data-state="slow"] .st-dot  { background: var(--orange); box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.st-card[data-state="slow"] .st-pill { background: #FFFBEB; color: #B45309; }
.st-card[data-state="down"] .st-dot  { background: var(--red); box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.st-card[data-state="down"] .st-pill { background: #FEF2F2; color: #B91C1C; }
.st-card[data-state="checking"] .st-dot { animation: stBlink 1.1s ease-in-out infinite; }

.st-meta {
  margin-top: auto; padding-top: 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.st-latency {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 21px; font-weight: 700; color: var(--text);
}
.st-note { font-size: 11.5px; line-height: 1.5; color: var(--text-tertiary); }

.st-disclaimer {
  margin-top: 20px; font-size: 13px; line-height: 1.7;
  color: var(--text-tertiary); max-width: 760px;
}

.st-report {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px 32px;
}
.st-report h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.st-report p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); max-width: 560px; }
.st-report-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .st-grid { grid-template-columns: 1fr; }
  .st-overall { flex-wrap: wrap; }
  .st-report { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT — UK section, careers, press
   ═══════════════════════════════════════════════════════════════ */
.uk-band {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #F8FAFF 0%, #EEF4FF 100%);
  padding: 38px 38px 0;
}
/* Decorative city artwork, anchored to the bottom edge and sitting
   behind the copy. Drawn rather than photographed — it is a skyline,
   not a picture of the office. */
.uk-skyline {
  position: absolute; inset-inline: 0; bottom: 0;
  line-height: 0; pointer-events: none;
}
.uk-skyline svg { width: 100%; height: auto; display: block; }
.uk-content { position: relative; z-index: 1; padding-bottom: 150px; }
.uk-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
.uk-flag {
  flex: 0 0 auto; width: 54px; height: 27px; margin-top: 6px;
  border-radius: 3px; box-shadow: 0 2px 8px rgba(15,23,42,.18);
}
.uk-head h2 { font-size: 30px; font-weight: 900; line-height: 1.2; margin-bottom: 10px; }
.uk-head p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); max-width: 640px; }
.uk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.uk-card {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px;
}
.uk-card-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--blue); margin-bottom: 10px;
}
.uk-card-value {
  font-style: normal; font-size: 13.5px; line-height: 1.75; color: var(--text-secondary);
}
.uk-card-value a { color: var(--blue); text-decoration: none; }
.uk-card-value a:hover { text-decoration: underline; }

/* Careers */
.about-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.role-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.role-card h4 { font-size: 17px; font-weight: 800; margin-bottom: 9px; }
.role-card p { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }

/* Press */
.press-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.press-facts, .press-brand {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px;
}
.press-facts h4, .press-brand h4 { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.press-dl { display: grid; gap: 10px; }
.press-dl > div {
  display: grid; grid-template-columns: 140px 1fr; gap: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.press-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.press-dl dt { font-size: 12.5px; font-weight: 700; color: var(--text-tertiary); }
.press-dl dd { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.press-dl dd a { color: var(--blue); text-decoration: none; }
.press-dl dd a:hover { text-decoration: underline; }
.press-logo {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 22px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.press-logo img { max-width: 190px; height: auto; display: block; }
.press-rules { list-style: none; display: grid; gap: 9px; }
.press-rules li {
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  padding-inline-start: 18px; position: relative;
}
.press-rules li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}

@media (max-width: 900px) {
  .uk-band { padding: 26px 22px 0; }
  .uk-content { padding-bottom: 96px; }
  .uk-head { flex-direction: column; gap: 12px; }
  .uk-head h2 { font-size: 24px; }
  .uk-cards, .about-roles { grid-template-columns: 1fr; }
  .press-grid { grid-template-columns: 1fr; }
  .press-dl > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ═══════════════════════════════════════════════════════════════
   SOLUTION PAGES
   These were a text-only template — an emoji, six identical
   checkmark icons and three bullets. Now the imagery carries part
   of the argument.
   ═══════════════════════════════════════════════════════════════ */
.sol-hero {
  padding: 128px 0 62px;
  background: linear-gradient(170deg, #F6F9FF 0%, #EDF3FE 55%, #fff 100%);
  border-bottom: 1px solid var(--border);
}
.sol-hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.sol-hero .badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-light); color: var(--blue-dark);
  padding: 6px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.sol-hero-copy h1 {
  font-size: clamp(32px, 4vw, 50px); font-weight: 900; line-height: 1.08;
  letter-spacing: -1.2px; margin: 16px 0 18px;
}
.sol-hero-copy > p { font-size: 17px; line-height: 1.65; color: var(--text-secondary); max-width: 34em; }
.sol-hero .page-hero-cta { justify-content: flex-start; margin-top: 26px; }
.sol-hero-art { border-radius: var(--radius-lg); overflow: hidden; }
.sol-hero-art img { width: 100%; height: auto; display: block; }

.sol-mods { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.sol-mods span {
  font-size: 12px; font-weight: 650; color: var(--text-secondary);
  background: #fff; border: 1px solid var(--border);
  padding: 5px 11px; border-radius: 100px;
}

/* Before / after */
.sol-turn {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch;
}
.sol-turn-half {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 26px;
}
.sol-turn-half p { font-size: 14.5px; line-height: 1.68; color: var(--text-secondary); }
.sol-turn-label {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 9px;
}
.sol-turn-before { border-inline-start: 3px solid #FCA5A5; }
.sol-turn-before .sol-turn-label { color: #DC2626; }
.sol-turn-after  { border-inline-start: 3px solid #6EE7B7; }
.sol-turn-after .sol-turn-label { color: #047857; }
.sol-turn-arrow {
  display: flex; align-items: center; color: var(--text-tertiary);
}
.sol-turn-arrow svg { width: 30px; height: 30px; }
.sol-kicker {
  margin: 26px auto 0; max-width: 46em; text-align: center;
  font-size: 19px; line-height: 1.55; font-weight: 650; color: var(--text);
}

/* Screen showcase */
.sol-shots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px; max-width: 860px; margin: 0 auto;
}
.sol-shot { display: flex; flex-direction: column; gap: 14px; }
.sol-shot-img {
  display: block; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--border);
  background: #fff; box-shadow: 0 16px 40px rgba(15,23,42,.11);
  aspect-ratio: 900 / 1955;
}
.sol-shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sol-shot figcaption { font-size: 13.5px; font-weight: 650; color: var(--text-secondary); text-align: center; }

/* ══════════════════════════════════════════════════════════════
   SOLUTION PAGES — app parity
   ══════════════════════════════════════════════════════════════
   Everything below is scoped to body.solution-page on purpose.
   .feat-card-icon is used 187 more times across the rest of the
   site, where the icons are hand-drawn outlines carrying inline
   fill="none" stroke="currentColor". A CSS `fill` beats a
   presentation attribute, so an unscoped rule here would flood
   every one of those outlines solid. */

/* The app draws a module icon as a soft tinted tile with a FILLED
   glyph — not a saturated gradient with a white outline. These are
   now the same Ionicons glyphs the app itself renders, pulled from
   the #ic-* sprite in _nav.html, so a feature card and the screen
   it describes show the identical mark. Tints come from
   HomeSideMenu.tsx. */
/* A gradient tile with a white glyph — the treatment the app uses for
   its suite icons, and the one this stylesheet already applies to
   .nav-mega-tab-ico. The first pass used the app's *module tile* look
   instead (pale fill, tinted glyph); correct inside a dense app grid,
   but at 46px on a marketing page it read washed out and weightless. */
.solution-page .feat-card-icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(135deg, var(--ic-a, #3B82F6), var(--ic-b, #60A5FA));
  border: 0;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .13);
}
.solution-page .feat-card-icon svg {
  width: 24px; height: 24px;
  fill: #fff; stroke: none;
}

/* Hero-art band — replaces the tall app screenshots.
   The artwork is composed with its own whitespace, so it is
   contained on a light ground rather than cropped to fill. */
.sol-art {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; max-width: 1140px; margin: 0 auto;
}
.sol-art figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
/* `cover`, not `contain`. The artwork is 2200x1000 with a lot of empty
   canvas around a centred subject, so containing it in a 16:10 box fits
   it to the width and then leaves it floating small in the middle.
   Covering crops the dead margin and lets the subject fill the frame. */
.sol-art img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 18px; display: block;
}
.sol-art figcaption {
  font-size: 13.5px; font-weight: 650;
  color: var(--text-secondary); text-align: center;
}

/* Rollout steps */
.sol-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; counter-reset: solstep;
}
.sol-step {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.sol-step::before {
  counter-increment: solstep; content: counter(solstep);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: #E3F2FD; color: #1565C0;
  font-weight: 800; font-size: 14px; margin-bottom: 13px;
}
.sol-step h4 { font-size: 15.5px; font-weight: 750; margin-bottom: 7px; }
.sol-step p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

/* "Works with" — the modules this industry leans on, same icons again */
.sol-with { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.sol-with a {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 18px 10px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; transition: all .2s;
}
.sol-with a:hover {
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.08);
  border-color: transparent;
}
.sol-with .i {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ic-a, #3B82F6), var(--ic-b, #60A5FA));
  box-shadow: 0 4px 11px rgba(15, 23, 42, .12);
}
.sol-with .i svg { width: 22px; height: 22px; fill: #fff; }
.sol-with em {
  font-style: normal; font-size: 12.5px; font-weight: 650;
  color: var(--text-secondary); text-align: center; line-height: 1.35;
}

/* FAQ — native <details>, so it works with JS off and is crawlable */
.sol-faq { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.sol-faq details {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px;
}
.sol-faq summary {
  font-size: 15.5px; font-weight: 700; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.sol-faq summary::-webkit-details-marker { display: none; }
.sol-faq summary::after { content: "+"; font-size: 21px; font-weight: 400; color: var(--text-tertiary); }
.sol-faq details[open] summary::after { content: "\2212"; }
.sol-faq details p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin-top: 12px; }

@media (max-width: 980px) { .sol-with { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .sol-art { grid-template-columns: 1fr; }
  .sol-steps { grid-template-columns: 1fr; }
}

/* ── Catering banners ───────────────────────────────────────────
   Wide 16:9 marketing shots rather than the tall app screenshots
   .sol-shots is built for. Two per row on a desktop, one on a phone,
   and no crop: these are composed images with type baked in, so
   object-fit: cover would cut the headline off. */
.cat-shots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px; max-width: 1120px; margin: 0 auto;
}
.cat-shot { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.cat-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 18px; border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(15,23,42,.13);
  background: #0F172A;
}
.cat-shot figcaption {
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); text-align: center;
}
.cat-shot figcaption strong { color: var(--text); font-weight: 700; }
@media (max-width: 860px) {
  .cat-shots { grid-template-columns: 1fr; gap: 22px; }
}

/* Hardware band */
.sol-hw { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: center; }
.sol-hw-copy h2 { font-size: 30px; font-weight: 900; line-height: 1.15; margin: 14px 0 12px; }
.sol-hw-copy p { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 22px; }
.sol-hw-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end;
}
.sol-dev {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; height: 148px;
  display: flex; align-items: center; justify-content: center;
}
.sol-dev img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Closing wide band */
.sol-wide { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; }
.sol-wide figure { border-radius: var(--radius-lg); overflow: hidden; }
.sol-wide figure img { width: 100%; height: auto; display: block; }
.sol-wide h3 { font-size: 27px; font-weight: 900; line-height: 1.2; margin-bottom: 12px; }
.sol-wide p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 20px; }

@media (max-width: 980px) {
  .sol-hero { padding: 104px 0 46px; }
  .sol-hero-in, .sol-hw, .sol-wide { grid-template-columns: 1fr; gap: 30px; }
  .sol-hero-art { order: -1; max-width: 460px; }
  .sol-turn { grid-template-columns: 1fr; }
  .sol-turn-arrow { transform: rotate(90deg); justify-content: center; }
  .sol-shots { grid-template-columns: 1fr; }
  .sol-hw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES (/terms)
   ═══════════════════════════════════════════════════════════════ */
.tos-dates { font-size: 13.5px !important; color: var(--text-tertiary) !important; margin-top: 14px; }
.tos-layout { display: grid; grid-template-columns: 232px 1fr; gap: 48px; align-items: start; }

.tos-toc-inner { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.tos-toc-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px;
}
.tos-toc a {
  font-size: 13px; line-height: 1.35; color: var(--text-secondary);
  text-decoration: none; padding: 7px 10px; border-radius: 8px;
  border-inline-start: 2px solid transparent;
}
.tos-toc a:hover { background: var(--bg-alt); color: var(--blue); border-inline-start-color: var(--blue); }

.tos-body { min-width: 0; max-width: 68ch; }
.tos-section { scroll-margin-top: 92px; }
.tos-section + .tos-section {
  margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--border);
}
.tos-section h2 { font-size: 24px; font-weight: 800; line-height: 1.25; margin-bottom: 14px; }
.tos-section p { font-size: 15px; line-height: 1.75; color: var(--text-secondary); }
.tos-section p + p { margin-top: 13px; }
.tos-section a { color: var(--blue); text-decoration: none; }
.tos-section a:hover { text-decoration: underline; }
.tos-section strong { color: var(--text); font-weight: 700; }

/* The technology table — categories, not product names. */
.tos-tech {
  margin-top: 20px; display: grid; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.tos-tech-row { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 15px 18px; }
.tos-tech-row + .tos-tech-row { border-top: 1px solid var(--border); }
.tos-tech-row:nth-child(odd) { background: var(--bg-alt); }
.tos-tech dt { font-size: 13.5px; font-weight: 750; color: var(--text); }
.tos-tech dd { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin: 0; }

@media (max-width: 900px) {
  .tos-layout { grid-template-columns: 1fr; gap: 26px; }
  .tos-toc-inner { position: static; }
  .tos-toc { border-bottom: 1px solid var(--border); padding-bottom: 18px; }
  .tos-tech-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Footer contact — sales, support and the phone on every page. */
.footer-contact { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact svg {
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px;
  fill: none; stroke: var(--blue); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.footer-contact span { display: flex; flex-direction: column; min-width: 0; }
.footer-contact em {
  font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: #64748B;
}
.footer-contact a {
  font-size: 14px; color: #CBD5E1; text-decoration: none;
  margin-bottom: 0; overflow-wrap: anywhere;
}
.footer-contact a:hover { color: var(--blue); }

/* ── Not released yet ─────────────────────────────────────────────
   Commerce ships in Q1 2027. One look everywhere it is marked, so a
   visitor learns it once: an amber "Coming Q1 2027" badge beside the
   name, and a banner on its own pages saying what is available today. */
.soon-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: #FEF3C7; color: #92400E;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; line-height: 1.5;
  white-space: nowrap; vertical-align: middle;
}
.soon-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #F59E0B; flex: none; }
.soon-badge.sm { font-size: 10.5px; padding: 1px 7px; gap: 4px; }
.soon-badge.sm::before { width: 5px; height: 5px; }
.soon-banner {
  background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F;
  border-radius: 14px; padding: 12px 16px; margin: 16px 0 18px;
  font-size: 15px; line-height: 1.55; max-width: 620px;
}
.soon-banner strong { color: #92400E; }