/* =============================================================
   ESHAL - Single Source of Truth Stylesheet
   =============================================================
   Structure (use Cmd/Ctrl+F to jump):
     [TOKENS]      CSS custom properties (colors, spacing, radii)
     [RESET]       Baseline resets + typography
     [LAYOUT]      .container, .section, grids
     [TYPE]        Headings, section heads, eyebrow
     [BUTTONS]     .btn, variants
     [UTILS]       .reveal, .eyebrow-pill, keyframes
     [NAV]         Top nav + dropdowns + mobile menu
     [FOOTER]      Footer
     [COMPONENTS]  Shared components (logowall, steps, cap-tabs,
                   industries, gating, security, cta-banner,
                   feature-card, faq, frame-wrap, etc.)
     [PAGE:HOME]   Sections only used on index.html
     [PAGE:PLATFORM] Sections only used on platform.html
     [PAGE:ABOUT]  Sections only used on about.html
     [PAGE:PRICING] Sections only used on pricing.html

   Rules for contributors (important for scaling to 100s of pages):
     1. NEVER add a <style> block to a page. Everything belongs here.
     2. Start from shared components. Only add a page-specific
        section when a layout is genuinely unique.
     3. Scope page-only styles under the body class:
        .page-{name} .my-class { ... }
     4. Always reference colors through the tokens (var(--blue), etc.)
        never hardcode hex / rgba - that's how themes break at scale.
     5. Use the spacing (--s*) and radius (--r-*) tokens, not
        magic numbers.
   ============================================================= */

/* ========================= [TOKENS] ========================= */
:root {
  --black: #000000;
  --white: #FFFFFF;

  /* Primary brand */
  --blue: #1D4ED8;
  --blue-d: #1E40AF;
  --blue-rgb: 29, 78, 216;        /* use for rgba() */
  --blue-bg: rgba(var(--blue-rgb), 0.06);
  --blue-border: rgba(var(--blue-rgb), 0.16);

  /* Accent */
  --green: #00bf63;
  --amber: #D97706;
  --red: #DC2626;

  /* Grayscale */
  --gray-900: #1A1A1A;
  --gray-700: #444444;
  --gray-600: #666666;
  --gray-500: #808080;
  --gray-400: #999999;
  --gray-300: #CCCCCC;
  --gray-200: #E0E0E0;
  --gray-100: #EDEDED;
  --gray-50:  #F5F5F5;

  /* Surfaces */
  --bg-page: #FFFFFF;
  --bg-alt:  #F5F5F5;
  --border:  #E5E5E5;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-blue: 0 0 0 3px rgba(var(--blue-rgb), 0.08);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

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

  /* Radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px;
}

/* ========================= [RESET] ========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--gray-900);
  background: var(--bg-page);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ========================= [LAYOUT] ========================= */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--s6); }
section { position: relative; }
.section { padding: var(--s24) 0; }
.section-alt { background: var(--bg-alt); }
.section-accent { background: var(--blue); color: var(--white); }
.section-dark { background: var(--black); color: var(--white); }
.section-dark .section-h2 { color: var(--white); }
.section-dark .section-sub { color: rgba(255,255,255,0.65); }
.section-dark .eyebrow { color: var(--green); }
.section-dark .eyebrow::before { background: var(--green); }

/* Generic split two-column */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); align-items: center; }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
@media (max-width: 900px) { .split, .split.reverse { grid-template-columns: 1fr; direction: ltr; } }

/* ========================= [TYPE] =========================== */
.eyebrow {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue);
}
.section-head { max-width: 720px; margin-bottom: var(--s12); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow {
  display: inline-flex; padding: 4px 12px;
  background: var(--blue-bg); border-radius: var(--r-full);
}
h2.section-h2 {
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.028em; line-height: 1.08;
  margin-top: var(--s3);
  color: var(--black);
}
.section-sub {
  margin-top: var(--s4);
  font-size: 17px; line-height: 1.7;
  color: var(--gray-600);
  max-width: 620px;
}
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* Eyebrow pill (used in hero-style sections) */
.eyebrow-pill,
.page-hero-pill,
.hero-pill,
.page-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue);
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.eyebrow-pill::before,
.page-hero-pill::before,
.hero-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(0, 191, 99, 0.6);
  animation: pulse 2s ease-in-out infinite;
}

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--gray-600);
  margin-bottom: var(--s6);
}
.breadcrumb a { color: var(--gray-600); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb span, .breadcrumb .sep { color: var(--gray-300); }
.breadcrumb strong { color: var(--gray-900); font-weight: 500; }

/* ========================= [BUTTONS] ======================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px;
  font-size: 14px; font-weight: 500;
  border-radius: var(--r-md);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-outline { border-color: var(--border); color: var(--gray-700); background: var(--white); }
.btn-outline:hover { border-color: var(--gray-300); color: var(--black); }
.btn-solid { background: var(--black); color: var(--white); }
.btn-solid:hover { background: var(--gray-900); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--blue-d); }
.btn-ghost { background: transparent; color: var(--gray-700); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--black); color: var(--black); }
.btn-ghost-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost-white:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-white-blue { background: var(--white); color: var(--blue); }
.btn-white-blue:hover { background: #f4f4f4; }
.btn-transparent-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-transparent-white:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }

/* ========================= [UTILS] ========================== */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

@keyframes fadeUp  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes blink   { 50% { opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes checkIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadePane { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes underlineIn { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

/* ========================= [NAV] ============================ */
.nav-wrap {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.nav-wrap.scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 6px 18px rgba(0,0,0,0.04); }

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 68px;
  max-width: 1240px; margin: 0 auto;
  padding: 0 var(--s6);
  gap: var(--s6);
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; letter-spacing: 0.08em;
  font-size: 18px; color: var(--black);
  flex-shrink: 0;
}
.nav-logo img { display: block; height: 40px; width: auto; }
@media (max-width: 520px) { .nav-logo img { height: 26px; } }
.nav-logo-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--blue), #7e6bff, var(--blue));
  position: relative;
}
.nav-logo-mark::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--white); }
.nav-logo-mark::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--blue); }

.nav-links { list-style: none; display: flex; align-items: center; gap: var(--s2); justify-self: center; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a,
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--gray-700);
  border-radius: var(--r-md);
  transition: color 150ms ease, background 150ms ease;
}
.nav-links > li > a:hover,
.nav-dropdown-trigger:hover,
.nav-links .has-dropdown.open > .nav-dropdown-trigger {
  color: var(--black); background: var(--gray-50);
}
.chevron-icon { width: 12px; height: 12px; transition: transform 200ms ease; }
.has-dropdown.open .chevron-icon { transform: rotate(180deg); }

/* Mega dropdown */
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: -24px;
  min-width: 640px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s4);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease), visibility 200ms var(--ease), transform 200ms var(--ease);
}
.nav-dropdown::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.has-dropdown.open > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.nav-dropdown-col { display: flex; flex-direction: column; gap: 2px; }
.nav-dropdown-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  transition: background 150ms ease;
  min-height: 86px;
}
.nav-dropdown-item > div:last-child { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.nav-dropdown-item:hover { background: var(--gray-50); }
.nav-dropdown-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--blue-bg);
  color: var(--blue);
}
.nav-dropdown-icon svg { width: 20px; height: 20px; }
.nav-dropdown-title { font-size: 14px; font-weight: 600; color: var(--black); letter-spacing: -0.005em; margin-bottom: 2px; }
.nav-dropdown-desc  { font-size: 12.5px; color: var(--gray-600); line-height: 1.5; }
.nav-dropdown-foot {
  grid-column: 1 / -1;
  margin-top: var(--s2);
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.nav-dropdown-foot a { color: var(--blue); font-weight: 500; }
.nav-dropdown { max-width: calc(100vw - 16px); }
.nav-dropdown.wide { min-width: min(820px, calc(100vw - 16px)); }
.nav-dropdown.wide .nav-dropdown-inner { grid-template-columns: repeat(3, 1fr); }

.nav-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }

.hamburger {
  display: none; width: 40px; height: 40px;
  border-radius: var(--r-md);
  align-items: center; justify-content: center;
  color: var(--black);
}
.hamburger:hover { background: var(--gray-50); }
.hamburger svg { width: 22px; height: 22px; }

.mobile-menu {
  position: fixed;
  top: 68px; left: 0; right: 0;
  height: calc(100vh - 68px);
  height: calc(100dvh - 68px);
  background: var(--white);
  z-index: 999;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 280ms var(--ease);
  padding: var(--s5);
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .m-item    { display: block; padding: 14px 8px; font-size: 16px; font-weight: 500; color: var(--black); border-bottom: 1px solid var(--border); }
.mobile-menu .m-section { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); padding: 18px 8px 8px; }
.mobile-menu .m-sub     { display: block; padding: 10px 8px; font-size: 14px; color: var(--gray-700); }
.mobile-menu .m-cta     { display: flex; gap: 10px; margin-top: var(--s5); }
.mobile-menu .m-cta .btn { flex: 1; }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .hamburger { display: inline-flex; }
  .btn-outline.m-hide { display: none; }
  .m-hide-sm { display: none !important; }
}

/* ========================= [FOOTER] ========================= */
footer {
  background: var(--black);
  color: rgba(255,255,255,0.55);
  padding: var(--s20) 0 var(--s6);
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--s10);
  padding-bottom: var(--s16);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .nav-logo { color: var(--white); margin-bottom: var(--s4); }
.footer-brand .nav-logo-mark::after { background: var(--black); }
.footer-tagline { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.7; max-width: 320px; }
.footer-social {
  display: flex; gap: 10px;
  margin-top: var(--s5);
}
.footer-social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.footer-social a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 {
  color: var(--white);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: var(--s5);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.footer-col a { color: rgba(255,255,255,0.55); font-size: 14px; transition: color 150ms ease; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  margin-top: var(--s6);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
  font-size: 13px;
}
.footer-legal { display: flex; gap: var(--s5); flex-wrap: wrap; }
@media (max-width: 1000px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ========================= [COMPONENTS] ===================== */
/* --- Logowall / marquee --- */
.logowall { padding: var(--s12) 0; background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.logowall-label {
  text-align: center;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: var(--s8);
}
.marquee {
  display: flex; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track { display: flex; gap: var(--s10); padding-right: var(--s10); animation: marquee 38s linear infinite; flex-shrink: 0; }
.logo-chip {
  height: 52px; min-width: 200px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 var(--s5);
  color: var(--gray-600);
  font-weight: 500; font-size: 13px; letter-spacing: 0.06em;
}
.logo-chip::before { content: ''; width: 16px; height: 16px; border-radius: 4px; background: var(--blue); opacity: 0.3; }

/* --- Steps (How it works) --- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
}
.step { padding: var(--s8) var(--s6); border-right: 1px solid var(--border); position: relative; transition: background 200ms ease; }
.step:last-child { border-right: none; }
.step:hover { background: var(--gray-50); }
.step-num { display: none; }
.step-ico {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--gray-50);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--black);
  margin-bottom: var(--s5);
}
.step-ico svg { width: 22px; height: 22px; }
.step h3 { font-size: 18px; font-weight: 600; color: var(--black); letter-spacing: -0.015em; margin-bottom: var(--s2); }
.step p { font-size: 14px; color: var(--gray-600); line-height: 1.6; }

.integrations { margin-top: var(--s10); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.integration-label { color: var(--gray-600); font-size: 13px; margin-right: var(--s3); align-self: center; font-weight: 500; }
.integration-badge {
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 13px; color: var(--gray-900);
  font-weight: 500;
}

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(1), .step:nth-child(2) { border-bottom: 1px solid var(--border); }
  .step:nth-child(2) { border-right: none; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--border); }
  .step:last-child { border-bottom: none; }
}

/* --- Capabilities tabs --- */
.cap-wrap { display: grid; grid-template-columns: 320px 1fr; gap: var(--s8); align-items: start; }
.cap-tabs { display: flex; flex-direction: column; gap: 2px; }
.cap-tab {
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--r-md);
  color: var(--gray-600);
  font-size: 14.5px; font-weight: 500;
  display: flex; align-items: flex-start; gap: 10px;
  border-left: 3px solid transparent;
  background: transparent;
  transition: all 200ms ease;
}
.cap-tab .tick {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gray-100); color: var(--gray-400);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.cap-tab .tick svg { width: 11px; height: 11px; }
.cap-tab:hover { background: var(--gray-50); color: var(--black); }
.cap-tab.active {
  background: var(--white); color: var(--black);
  border-left-color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.cap-tab.active .tick { background: var(--green); color: var(--white); }

.cap-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s10);
  min-height: 440px;
  position: relative; overflow: hidden;
}
.cap-panel::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 320px; height: 160px;
  background: radial-gradient(circle at top right, var(--blue-bg), transparent 70%);
  pointer-events: none;
}
.cap-content { display: none; animation: fadePane 0.4s var(--ease); position: relative; }
.cap-content.active { display: block; }
.cap-content h3 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s3); color: var(--black); }
.cap-content p.lede { font-size: 16px; color: var(--gray-600); margin-bottom: var(--s6); line-height: 1.7; max-width: 560px; }
.cap-list { display: flex; flex-direction: column; gap: var(--s2); }
.cap-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--gray-50);
  border-radius: var(--r-md);
  font-size: 14px; color: var(--gray-900);
  animation: checkIn 0.5s var(--ease) backwards;
}
.cap-content.active .cap-list-item:nth-child(1) { animation-delay: 0.1s; }
.cap-content.active .cap-list-item:nth-child(2) { animation-delay: 0.2s; }
.cap-content.active .cap-list-item:nth-child(3) { animation-delay: 0.3s; }
.cap-content.active .cap-list-item:nth-child(4) { animation-delay: 0.4s; }
.cap-list-item .check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cap-list-item .check svg { width: 11px; height: 11px; }
.cap-connects { margin-top: var(--s10); padding-top: var(--s6); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cap-connects .label { font-size: 13px; color: var(--gray-600); margin-right: var(--s3); font-weight: 500; }
.cap-connects .badge {
  padding: 5px 11px; background: var(--gray-50); border: 1px solid var(--border);
  border-radius: var(--r-full); font-size: 12px; color: var(--gray-900); font-weight: 500;
}
@media (max-width: 900px) { .cap-wrap { grid-template-columns: 1fr; } .cap-panel { padding: var(--s6); } }

/* --- Industries cards --- */
.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.industry {
  padding: var(--s8) var(--s6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  color: var(--gray-900);
  position: relative; overflow: hidden;
  transition: all 250ms ease;
  display: block;
}
.industry:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 10px 30px rgba(var(--blue-rgb), 0.08);
}
.industry-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--blue-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  margin-bottom: var(--s5);
}
.industry-icon svg { width: 22px; height: 22px; }
.industry h3 { font-size: 18px; font-weight: 600; color: var(--black); margin-bottom: var(--s2); letter-spacing: -0.01em; }
.industry p  { color: var(--gray-600); font-size: 14px; line-height: 1.6; margin-bottom: var(--s5); }
.industry-link {
  color: var(--blue);
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 200ms ease;
}
.industry:hover .industry-link { gap: 10px; }
@media (max-width: 900px) { .industries { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industries { grid-template-columns: 1fr; } }

/* --- Gating columns (Fully automated / approval / hardcoded) --- */
.gating-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
}
.gating-col { border-right: 1px solid var(--border); }
.gating-col:last-child { border-right: none; }
.gating-head {
  padding: var(--s5) var(--s6);
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
}
.gating-head .ico {
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.gating-head .ico svg { width: 14px; height: 14px; }
.gating-head.g-green { background: rgba(0,191,99,0.08); color: #006b37; }
.gating-head.g-green .ico { background: rgba(0,191,99,0.18); color: #006b37; }
.gating-head.g-amber { background: rgba(217,119,6,0.08); color: #9a5700; }
.gating-head.g-amber .ico { background: rgba(217,119,6,0.18); color: #9a5700; }
.gating-head.g-red   { background: rgba(220,38,38,0.06); color: #8b1414; }
.gating-head.g-red .ico { background: rgba(220,38,38,0.14); color: #8b1414; }
.gating-body { padding: var(--s4) var(--s6) var(--s6); }
.gating-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.55;
  color: var(--gray-900);
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}
.gating-item:last-child { border-bottom: 0; }
.gating-item .dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 8px; flex-shrink: 0; }
.gating-col:nth-child(1) .dot { background: var(--green); }
.gating-col:nth-child(2) .dot { background: var(--amber); }
.gating-col:nth-child(3) .dot { background: var(--red); }

.section-dark .gating-grid { border-color: rgba(255,255,255,0.08); background: transparent; }
.section-dark .gating-col  { border-right-color: rgba(255,255,255,0.08); }
.section-dark .gating-item { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.06); }
.section-dark .gating-head { border-bottom-color: rgba(255,255,255,0.1); }

.gating-note {
  margin-top: var(--s6);
  padding: var(--s5) var(--s6);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  font-size: 14.5px; color: var(--gray-900); line-height: 1.7;
}
.gating-note strong { color: var(--blue); }

@media (max-width: 900px) {
  .gating-grid { grid-template-columns: 1fr; }
  .gating-col  { border-right: none; border-bottom: 1px solid var(--border); }
  .gating-col:last-child { border-bottom: none; }
}

/* --- Security / badge cards --- */
.security { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); }
.sec-card {
  padding: var(--s6) var(--s4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  text-align: center;
  transition: all 200ms ease;
}
.sec-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sec-ico {
  width: 40px; height: 40px; margin: 0 auto var(--s3);
  background: var(--blue-bg); color: var(--blue);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.sec-ico svg { width: 20px; height: 20px; }
.sec-title { font-size: 14px; font-weight: 600; color: var(--black); margin-bottom: 4px; }
.sec-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
@media (max-width: 900px) { .security { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .security { grid-template-columns: repeat(2, 1fr); } }

/* --- CTA Banner (blue) --- */
.cta-banner {
  background: var(--blue);
  color: var(--white);
  padding: var(--s24) 0;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 70%);
}
.cta-inner { position: relative; z-index: 2; text-align: center; max-width: 720px; margin: 0 auto; }
.cta-inner h2 { font-weight: 700; font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -0.028em; line-height: 1.1; }
.cta-inner p  { margin-top: var(--s5); font-size: 17px; color: rgba(255,255,255,0.85); line-height: 1.7; }
.cta-buttons  { margin-top: var(--s10); display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

/* --- Feature card (3-col grid) --- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  position: relative; overflow: hidden;
  transition: all 250ms ease;
}
.feature-card::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 180px; height: 90px;
  background: radial-gradient(circle at top right, var(--blue-bg), transparent 70%);
  pointer-events: none;
}
.feature-card:hover { border-color: var(--blue-border); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(var(--blue-rgb), 0.08); }
.fc-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--blue-bg); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s4);
}
.fc-icon svg { width: 22px; height: 22px; }
.fc-title { font-size: 17px; font-weight: 600; color: var(--black); letter-spacing: -0.01em; margin-bottom: var(--s2); }
.fc-desc  { font-size: 14px; color: var(--gray-600); line-height: 1.65; }
.fc-link  { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s4); font-size: 13px; font-weight: 600; color: var(--blue); transition: gap 200ms ease; }
.feature-card:hover .fc-link { gap: 9px; }

/* --- Frame (screenshot/browser chrome) --- */
.frame-wrap { position: relative; }
.frame-wrap::before {
  content: ''; position: absolute; inset: -40px;
  background: radial-gradient(circle at top right, var(--blue-bg), transparent 65%);
  pointer-events: none; z-index: 0;
}
.browser-frame {
  position: relative; z-index: 1;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.browser-bar {
  background: var(--gray-50); border-bottom: 1px solid var(--border);
  padding: 10px 14px; display: flex; align-items: center; gap: 8px;
}
.dot-r { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.dot-y { width: 10px; height: 10px; border-radius: 50%; background: #febc2e; }
.dot-g { width: 10px; height: 10px; border-radius: 50%; background: #28c840; }
.url-bar {
  flex: 1; margin-left: 8px; background: var(--white);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 12px; font-size: 11px; font-family: monospace; color: var(--gray-600);
}
.browser-img { width: 100%; height: auto; display: block; background: var(--gray-50); }

/* --- Channel card (reusable list-style item) --- */
.channel-list { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s6); }
.channel-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.channel-card .ico {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--blue-bg); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.channel-card .ico svg { width: 20px; height: 20px; }
.channel-card .title { font-size: 14px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.channel-card .desc  { font-size: 13px; color: var(--gray-600); line-height: 1.55; }

/* --- Bullet list with glowing green dot --- */
.bullet-list { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s6); }
.bullet-item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--gray-700); line-height: 1.6; }
.bullet-item .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); margin-top: 7px; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0,191,99,0.5);
}
.bullet-item strong { display: inline; font-weight: 600; color: var(--black); }

/* --- Integration filter + grid --- */
.int-filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s8); }
.int-filter {
  padding: 6px 16px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--border); background: var(--white); color: var(--gray-700);
  cursor: pointer; transition: all 150ms ease;
}
.int-filter:hover { border-color: var(--blue-border); color: var(--blue); background: var(--blue-bg); }
.int-filter.active { border-color: var(--blue); background: var(--blue); color: var(--white); }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); }
.int-badge {
  padding: 12px 14px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  font-size: 13px; font-weight: 500; color: var(--gray-900);
  display: flex; align-items: center; gap: 8px;
  transition: all 200ms ease;
}
.int-badge:hover { border-color: var(--blue-border); box-shadow: var(--shadow-blue); color: var(--blue); }
.int-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); opacity: 0.4; flex-shrink: 0; }
.int-badge.native .int-badge-dot { opacity: 1; background: var(--green); }
.int-more { text-align: center; margin-top: var(--s8); }

/* --- FAQ accordion --- */
.faq-list { display: flex; flex-direction: column; gap: var(--s3); }
.faq-item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color 200ms ease;
}
.faq-item.open { border-color: var(--blue-border); }
.faq-q {
  width: 100%; text-align: left;
  padding: var(--s5) var(--s6);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  font-size: 15px; font-weight: 600; color: var(--black);
  cursor: pointer; background: none; border: none;
  transition: background 150ms ease;
}
.faq-item.open .faq-q { background: var(--blue-bg); }
.faq-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--gray-400); transition: transform 250ms ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--blue); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 350ms ease, padding 350ms ease;
  font-size: 14.5px; color: var(--gray-600); line-height: 1.75;
  padding: 0 var(--s6);
}
.faq-item.open .faq-a { max-height: 400px; padding: 0 var(--s6) var(--s5); }

/* --- Testimonial --- */
.testimonial-block {
  background: var(--black); color: var(--white);
  padding: var(--s12) var(--s10); border-radius: var(--r-2xl);
  position: relative; overflow: hidden;
}
.testimonial-block::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 70%);
}
.testimonial-quote { position: relative; z-index: 1; }
.q-mark { font-size: 80px; font-family: Georgia, serif; color: rgba(255,255,255,0.08); line-height: 0.5; margin-bottom: var(--s5); }
.q-text { font-size: clamp(17px, 2vw, 22px); font-weight: 500; line-height: 1.65; color: var(--white); letter-spacing: -0.01em; margin-bottom: var(--s8); }
.q-author { display: flex; align-items: center; gap: var(--s4); }
.q-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(var(--blue-rgb), 0.3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: rgba(120,140,255,1);
  flex-shrink: 0;
}
.q-name { font-size: 15px; font-weight: 600; color: var(--white); }
.q-role { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.q-stats { position: relative; z-index: 1; display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid rgba(255,255,255,0.08); }
.q-stat-num { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
.q-stat-num .suf { color: var(--green); }
.q-stat-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 3px; }

/* --- Key bar (4-col stat strip) --- */
.keybar {
  margin-top: var(--s16);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.keybar-item { padding: var(--s6) var(--s5); border-right: 1px solid var(--border); }
.keybar-item:last-child { border-right: none; }
.keybar-num { font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1; color: var(--black); }
.keybar-num .suf { color: var(--blue); font-weight: 600; }
.keybar-label { display: block; margin-top: var(--s2); font-size: 13px; color: var(--gray-600); line-height: 1.4; }
@media (max-width: 780px) {
  .keybar { grid-template-columns: repeat(2, 1fr); }
  .keybar-item:nth-child(2) { border-right: none; }
  .keybar-item:nth-child(1), .keybar-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* --- Page hero (shared: platform, about, etc.) --- */
.page-hero {
  position: relative;
  padding: var(--s20) 0 var(--s16);
  background: var(--white); overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--gray-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.page-hero::after {
  content: ''; position: absolute; right: -200px; top: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-bg) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 860px; }
.page-hero-inner h1 {
  font-weight: 700; font-size: clamp(38px, 5.5vw, 66px);
  letter-spacing: -0.035em; line-height: 1.05;
  color: var(--black); margin-top: var(--s4);
  opacity: 0; animation: fadeUp 0.6s 0.1s var(--ease) forwards;
}
.page-hero-inner h1 em { font-style: normal; color: var(--blue); position: relative; }
.page-hero-inner h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 6px; background: var(--blue); opacity: 0.12; border-radius: 3px;
}
.page-hero-sub {
  font-size: clamp(16px, 1.7vw, 19px); color: var(--gray-600);
  max-width: 620px; margin-top: var(--s5); line-height: 1.75;
  opacity: 0; animation: fadeUp 0.6s 0.2s var(--ease) forwards;
}
.page-hero-cta {
  margin-top: var(--s8); display: flex; gap: var(--s3); flex-wrap: wrap;
  opacity: 0; animation: fadeUp 0.6s 0.3s var(--ease) forwards;
}
.page-hero-pill {
  opacity: 0; animation: fadeUp 0.5s var(--ease) forwards;
  margin-bottom: var(--s3);
}

/* ========================= [PAGE:HOME] ====================== */
.page-home .hero {
  position: relative;
  padding: var(--s24) 0 var(--s20);
  background: var(--white);
  overflow: hidden;
}
.page-home .hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--gray-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.page-home .hero::after {
  content: ''; position: absolute; right: -200px; top: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-bg) 0%, transparent 65%);
  pointer-events: none;
}
.page-home .hero-inner { position: relative; z-index: 1; max-width: 900px; text-align: center; margin: 0 auto; }
.page-home .hero-pill { opacity: 0; animation: fadeUp 0.5s var(--ease) forwards; }

.page-home .hero h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: -0.035em; line-height: 1.04;
  color: var(--black);
  margin-top: var(--s5);
  opacity: 0; animation: fadeUp 0.6s 0.1s var(--ease) forwards;
}
.page-home .hero h1 .rotating-wrap { display: block; position: relative; height: 1.04em; overflow: hidden; }
.page-home .rotating-text { display: inline-block; color: var(--blue); position: relative; }
.page-home .rotating-text::after {
  content: ''; position: absolute; left: 0; right: 4px; bottom: 2px;
  height: 6px; background: var(--blue); opacity: 0.12; border-radius: 3px;
  animation: underlineIn 0.5s var(--ease) forwards;
}
.page-home .rotating-cursor {
  display: inline-block; width: 3px; height: 0.85em;
  background: var(--blue); margin-left: 4px; vertical-align: -0.1em;
  animation: blink 1s steps(2) infinite;
}

.page-home .hero-sub {
  font-size: clamp(16px, 1.55vw, 19px);
  color: var(--gray-600);
  max-width: 680px; margin: var(--s6) auto 0;
  line-height: 1.7;
  opacity: 0; animation: fadeUp 0.6s 0.2s var(--ease) forwards;
}
.page-home .hero-cta {
  margin-top: var(--s10);
  display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap;
  opacity: 0; animation: fadeUp 0.6s 0.3s var(--ease) forwards;
}
.page-home .hero-fine {
  margin-top: var(--s4);
  font-size: 13px; color: var(--gray-600);
  opacity: 0; animation: fadeUp 0.6s 0.35s var(--ease) forwards;
}
.page-home .hero-stats {
  margin-top: var(--s20);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  opacity: 0; animation: fadeUp 0.6s 0.45s var(--ease) forwards;
  box-shadow: var(--shadow-sm);
}
.page-home .hero-stat { padding: var(--s6) var(--s5); border-right: 1px solid var(--border); text-align: left; }
.page-home .hero-stat:last-child { border-right: none; }
.page-home .hero-stat-num {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(32px, 3.8vw, 48px);
  letter-spacing: -0.03em; line-height: 1;
  color: var(--black);
  display: flex; align-items: baseline; gap: 2px;
}
.page-home .hero-stat-num .suf { color: var(--blue); font-weight: 600; }
.page-home .hero-stat-label { display: block; margin-top: var(--s3); font-size: 13px; color: var(--gray-600); line-height: 1.4; }
@media (max-width: 780px) {
  .page-home .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .page-home .hero-stat:nth-child(2) { border-right: none; }
  .page-home .hero-stat:nth-child(1), .page-home .hero-stat:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* ========================= [PAGE:PLATFORM] ================== */
.page-platform .keybar { opacity: 0; animation: fadeUp 0.6s 0.4s var(--ease) forwards; }

/* API / developer dark section */
.page-platform .dev-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); align-items: start; }
@media (max-width: 900px) { .page-platform .dev-split { grid-template-columns: 1fr; } }

.page-platform .api-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.page-platform .api-card-bar {
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px 16px; display: flex; align-items: center; gap: 8px;
}
.page-platform .api-card-bar .dot-r,
.page-platform .api-card-bar .dot-y,
.page-platform .api-card-bar .dot-g { opacity: 0.7; }
.page-platform .api-url { flex: 1; margin-left: 8px; font-size: 11px; font-family: monospace; color: rgba(255,255,255,0.4); }
.page-platform .api-body { padding: var(--s6) var(--s5); }
.page-platform .api-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: var(--s4); }
.page-platform .api-key-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-md);
  margin-bottom: var(--s3);
  font-size: 13px; color: rgba(255,255,255,0.7);
}
.page-platform .api-key-row .ak-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.page-platform .api-key-val { font-family: monospace; font-size: 12px; color: rgba(255,255,255,0.5); }
.page-platform .api-endpoint-box {
  margin-top: var(--s5); padding: var(--s4) var(--s5);
  background: rgba(var(--blue-rgb), 0.15);
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  border-radius: var(--r-md);
}
.page-platform .api-endpoint-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.page-platform .api-endpoint-val { font-family: monospace; font-size: 13px; color: rgba(255,255,255,0.85); }
.page-platform .api-warn {
  font-size: 12px; color: rgba(255,255,255,0.55);
  padding: 10px 12px;
  background: rgba(var(--blue-rgb), 0.1);
  border: 1px solid rgba(var(--blue-rgb), 0.2);
  border-radius: 8px;
  line-height: 1.6;
  margin-bottom: var(--s4);
}
.page-platform .api-note { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: var(--s3); line-height: 1.6; }
.page-platform .api-note a { color: rgba(120,140,255,1); }

.page-platform .dev-features { display: flex; flex-direction: column; gap: var(--s4); }
.page-platform .dev-feature {
  padding: var(--s5);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-lg);
  display: flex; gap: var(--s4); align-items: flex-start;
  transition: all 200ms ease;
}
.page-platform .dev-feature:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
.page-platform .dev-feature-ico {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: rgba(var(--blue-rgb), 0.2); color: rgba(120,140,255,1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.page-platform .dev-feature-ico svg { width: 20px; height: 20px; }
.page-platform .dev-feature h4 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.page-platform .dev-feature p  { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.6; }

/* Agent builder split (intro) */
.page-platform .agent-builder { margin-bottom: var(--s6); }
.page-platform .agent-builder .fc-icon { width: 56px; height: 56px; border-radius: var(--r-lg); margin-bottom: var(--s4); }
.page-platform .agent-builder .fc-icon svg { width: 28px; height: 28px; }
.page-platform .agent-builder h3 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: var(--s3);
}
.page-platform .agent-builder h3 em { font-style: normal; color: var(--blue); }
.page-platform .agent-builder p {
  font-size: 16px; color: var(--gray-600); line-height: 1.75; max-width: 480px;
}
.page-platform .agent-builder-list { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.page-platform .agent-builder-list .item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--gray-900);
}
.page-platform .agent-builder-list .check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.page-platform .agent-builder-list .check svg { width: 11px; height: 11px; }

/* Integration category tile (split left side) */
.page-platform .int-cat-grid { margin-top: var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.page-platform .int-cat-tile {
  padding: 12px 14px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.page-platform .int-cat-tile-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray-600); margin-bottom: 6px;
}
.page-platform .int-cat-tile-val { font-size: 13px; color: var(--gray-900); }

/* ========================= [PAGE:ABOUT] ===================== */
.page-about .hero-about {
  padding: var(--s24) 0 0;
  background: var(--white);
  overflow: hidden; position: relative;
}
.page-about .hero-about::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--gray-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.page-about .hero-about::after {
  content: ''; position: absolute; right: -200px; top: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-bg) 0%, transparent 65%);
  pointer-events: none;
}
.page-about .hero-about-inner {
  position: relative; z-index: 1; max-width: 780px;
  text-align: center; margin: 0 auto; padding-bottom: var(--s20);
}
.page-about .hero-about-inner .eyebrow-pill { animation: fadeUp 0.5s var(--ease) both; }
.page-about .hero-about-inner h1 {
  font-weight: 700; font-size: clamp(38px, 5.5vw, 68px);
  letter-spacing: -0.035em; line-height: 1.05; color: var(--black);
  margin-top: var(--s5); animation: fadeUp 0.6s 0.1s var(--ease) both;
}
.page-about .hero-about-inner h1 em { font-style: normal; color: var(--blue); position: relative; }
.page-about .hero-about-inner h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 6px; background: var(--blue); opacity: 0.12; border-radius: 3px;
}
.page-about .hero-about-sub {
  font-size: clamp(16px, 1.7vw, 19px); color: var(--gray-600);
  max-width: 640px; margin: var(--s6) auto 0; line-height: 1.75;
  animation: fadeUp 0.6s 0.2s var(--ease) both;
}
.page-about .hero-keybar {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm);
  animation: fadeUp 0.6s 0.35s var(--ease) both;
}
.page-about .hero-keybar-item { padding: var(--s6) var(--s5); border-right: 1px solid var(--border); text-align: left; }
.page-about .hero-keybar-item:last-child { border-right: none; }
.page-about .hero-keybar-num { font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1; color: var(--black); }
.page-about .hero-keybar-num .suf { color: var(--blue); font-weight: 600; }
.page-about .hero-keybar-label { display: block; margin-top: var(--s2); font-size: 13px; color: var(--gray-600); line-height: 1.4; }
@media (max-width: 780px) {
  .page-about .hero-keybar { grid-template-columns: repeat(2, 1fr); }
  .page-about .hero-keybar-item:nth-child(2) { border-right: none; }
  .page-about .hero-keybar-item:nth-child(1),
  .page-about .hero-keybar-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

.page-about .mission-block {
  max-width: 860px; margin: 0 auto; text-align: center;
  padding: var(--s10) var(--s8);
  background: var(--white); border: 1px solid var(--border);
  border-left: 4px solid var(--blue); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.page-about .mission-block blockquote {
  font-size: clamp(20px, 2.8vw, 30px); font-weight: 600;
  color: var(--black); line-height: 1.5; letter-spacing: -0.02em;
}
.page-about .mission-block blockquote span { color: var(--blue); }
.page-about .mission-tag {
  display: inline-block; margin-top: var(--s5);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-400);
}

.page-about .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.page-about .value-card {
  padding: var(--s8) var(--s6); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  transition: all 250ms ease; position: relative; overflow: hidden;
}
.page-about .value-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease);
}
.page-about .value-card:hover::before { transform: scaleX(1); }
.page-about .value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(var(--blue-rgb), 0.08);
  border-color: var(--blue);
}
.page-about .value-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--blue-bg);
  font-size: 15px; font-weight: 700;
  color: var(--blue); letter-spacing: -0.02em;
  margin-bottom: var(--s5);
}
.page-about .value-card h3 { font-size: 19px; font-weight: 600; color: var(--black); letter-spacing: -0.01em; margin-bottom: var(--s3); }
.page-about .value-card p  { font-size: 14px; color: var(--gray-600); line-height: 1.75; }
@media (max-width: 780px) { .page-about .values-grid { grid-template-columns: 1fr; } }

.page-about .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.page-about .story-card {
  padding: var(--s8) var(--s6);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.04);
  transition: background 200ms ease;
}
.page-about .story-card:hover { background: rgba(255,255,255,0.07); }
.page-about .story-card.full { grid-column: 1 / -1; }
.page-about .story-step {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  margin-bottom: var(--s5);
}
.page-about .story-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.55);
}
.page-about .story-card h3 { font-size: 20px; font-weight: 600; color: var(--white); letter-spacing: -0.015em; margin-bottom: var(--s3); }
.page-about .story-card p  { font-size: 14.5px; color: rgba(255,255,255,0.62); line-height: 1.75; }
@media (max-width: 780px) {
  .page-about .story-grid { grid-template-columns: 1fr; }
  .page-about .story-card.full { grid-column: auto; }
}

.page-about .diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.page-about .diff-card {
  padding: var(--s8) var(--s6); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  text-align: center; transition: all 250ms ease;
  display: flex; flex-direction: column; align-items: center;
}
.page-about .diff-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(var(--blue-rgb), 0.08);
}
.page-about .diff-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: var(--r-lg);
  background: var(--blue-bg); color: var(--blue);
  margin: 0 auto var(--s5);
}
.page-about .diff-icon-wrap svg { width: 28px; height: 28px; }
.page-about .diff-number { font-weight: 700; font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.04em; line-height: 1.1; color: var(--black); margin-bottom: var(--s3); min-height: 1.2em; display: flex; align-items: center; justify-content: center; gap: 5px; }
.page-about .diff-number .accent { color: var(--blue); }
.page-about .diff-title { font-size: 16px; font-weight: 600; color: var(--black); margin-bottom: var(--s2); }
.page-about .diff-desc  { font-size: 14px; color: var(--gray-600); line-height: 1.6; }
@media (max-width: 780px) { .page-about .diff-grid { grid-template-columns: 1fr; } }

.page-about .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.page-about .team-card {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s6); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  transition: all 200ms ease;
}
.page-about .team-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.page-about .team-avatar {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--white);
  background: conic-gradient(from 200deg, var(--blue), #7e6bff, var(--blue));
}
.page-about .team-info h4 { font-size: 16px; font-weight: 600; color: var(--black); letter-spacing: -0.01em; }
.page-about .team-info .team-role { font-size: 13px; color: var(--blue); font-weight: 500; margin: 3px 0 var(--s2); }
.page-about .team-info p { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; }
@media (max-width: 900px) { .page-about .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .page-about .team-grid { grid-template-columns: 1fr; } }

.page-about .compliance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s8); }
.page-about .compliance-card {
  padding: 28px var(--s5);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl); text-align: center;
  transition: all 200ms ease;
}
.page-about .compliance-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-3px);
}
.page-about .compliance-badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-lg);
  background: rgba(var(--blue-rgb), 0.18);
  color: rgba(120, 140, 255, 1);
  margin: 0 auto var(--s3);
}
.page-about .compliance-badge-icon svg { width: 28px; height: 28px; }
.page-about .compliance-name { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: var(--s2); }
.page-about .compliance-desc { font-size: 13px; color: rgba(255,255,255,0.5); }
.page-about .adgm-note {
  padding: var(--s5) var(--s6);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  font-size: 15px; text-align: center; color: rgba(255,255,255,0.7);
  max-width: 640px; margin: 0 auto;
}
.page-about .adgm-note strong { color: var(--white); }
@media (max-width: 780px) { .page-about .compliance-grid { grid-template-columns: repeat(2, 1fr); } }

.page-about .cta-about {
  position: relative; overflow: hidden;
  padding: var(--s24) 0;
  background: var(--blue); color: var(--white);
}
.page-about .cta-about::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 70%);
}
.page-about .cta-about-inner { position: relative; z-index: 2; text-align: center; max-width: 680px; margin: 0 auto; }
.page-about .cta-about-inner h2 { font-weight: 700; font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.028em; line-height: 1.1; color: var(--white); }
.page-about .cta-about-inner p  { margin-top: var(--s5); font-size: 17px; color: rgba(255,255,255,0.82); line-height: 1.7; }
.page-about .cta-btns { margin-top: var(--s10); display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

/* ========================= [PAGE:PRICING] =================== */
.page-pricing .pricing-hero {
  padding: var(--s20) 0 var(--s16);
  text-align: center;
  position: relative; overflow: hidden;
  background: var(--white);
}
.page-pricing .pricing-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--gray-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0.45;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
}
.page-pricing .pricing-hero-inner { position: relative; z-index: 1; }
.page-pricing .page-pill {
  margin-bottom: var(--s5);
  opacity: 0; animation: fadeUp 0.4s var(--ease) 0.05s forwards;
}
.page-pricing .pricing-hero h1 {
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.06;
  color: var(--black);
  opacity: 0; animation: fadeUp 0.5s var(--ease) 0.1s forwards;
}
.page-pricing .pricing-hero p {
  margin-top: var(--s5);
  font-size: 18px; color: var(--gray-600); line-height: 1.7;
  max-width: 560px; margin-left: auto; margin-right: auto;
  opacity: 0; animation: fadeUp 0.5s var(--ease) 0.18s forwards;
}

.page-pricing .billing-toggle-wrap {
  margin-top: var(--s8);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  opacity: 0; animation: fadeUp 0.5s var(--ease) 0.25s forwards;
}
.page-pricing .toggle-label { font-size: 15px; font-weight: 500; color: var(--gray-700); }
.page-pricing .toggle-label.active { color: var(--black); }
.page-pricing .toggle-switch {
  position: relative; width: 52px; height: 28px;
  background: var(--black); border-radius: var(--r-full);
  cursor: pointer; flex-shrink: 0;
  transition: background 200ms ease;
  border: none; outline: none;
}
.page-pricing .toggle-switch::after {
  content: ''; position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white);
  transition: transform 200ms var(--ease);
}
.page-pricing .toggle-switch.annual::after { transform: translateX(24px); }
.page-pricing .annual-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: rgba(0,191,99,0.1);
  border: 1px solid rgba(0,191,99,0.25);
  color: #006b37; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
  transition: opacity 200ms ease;
}
.page-pricing .annual-badge.hidden { opacity: 0; pointer-events: none; }

.page-pricing .pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin-top: var(--s4);
  align-items: stretch;
}
@media (max-width: 960px) {
  .page-pricing .pricing-cards { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

.page-pricing .plan-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--s8);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
  opacity: 0; animation: fadeUp 0.5s var(--ease) forwards;
}
.page-pricing .plan-card:nth-child(1) { animation-delay: 0.3s; }
.page-pricing .plan-card:nth-child(2) { animation-delay: 0.38s; }
.page-pricing .plan-card:nth-child(3) { animation-delay: 0.46s; }
.page-pricing .plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.page-pricing .plan-card.featured {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 20px 48px rgba(var(--blue-rgb), 0.1);
}
.page-pricing .plan-card.featured:hover { transform: translateY(-8px); }
.page-pricing .plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: var(--white);
  padding: 4px 16px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
}
.page-pricing .plan-name { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); margin-bottom: var(--s3); }
.page-pricing .plan-card.featured .plan-name { color: var(--blue); }
.page-pricing .plan-price-wrap { display: flex; align-items: baseline; gap: 6px; }
.page-pricing .plan-price {
  font-size: 48px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--black);
  transition: all 200ms ease;
}
.page-pricing .plan-price-unit { font-size: 16px; color: var(--gray-600); font-weight: 500; }
.page-pricing .plan-price-sub {
  font-size: 12.5px; color: var(--gray-600); margin-top: var(--s2);
  min-height: 18px;
  transition: color 200ms ease;
}
.page-pricing .plan-price-sub.savings { color: #006b37; font-weight: 600; }
.page-pricing .plan-desc {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--border);
  font-size: 14px; color: var(--gray-600); line-height: 1.65;
}
.page-pricing .plan-cta {
  display: block; margin-top: var(--s6);
  text-align: center;
  height: 46px; line-height: 46px;
  border-radius: var(--r-md);
  font-size: 15px; font-weight: 600;
  transition: all 200ms ease;
}
.page-pricing .plan-cta:hover { transform: translateY(-2px); }
.page-pricing .cta-outline-dark { border: 1.5px solid var(--border); color: var(--black); }
.page-pricing .cta-outline-dark:hover { border-color: var(--blue); background: var(--blue); color: var(--white); }
.page-pricing .cta-filled-blue  { background: var(--blue); color: var(--white); }
.page-pricing .cta-filled-blue:hover { background: var(--blue-d); }
.page-pricing .cta-outline-blue { border: 1.5px solid var(--blue); color: var(--blue); }
.page-pricing .cta-outline-blue:hover { background: var(--blue); color: var(--white); }

.page-pricing .plan-features { margin-top: auto; padding-top: var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.page-pricing .feat-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--gray-900); line-height: 1.55;
}
.page-pricing .feat-item .feat-icon {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}
.page-pricing .feat-icon.ok { background: rgba(0,191,99,0.12); color: #006b37; }
.page-pricing .feat-icon.na { background: var(--gray-100); color: var(--gray-400); }
.page-pricing .feat-icon svg { width: 10px; height: 10px; }
.page-pricing .feat-item.dimmed { color: var(--gray-500); }

.page-pricing .comp-section { margin-top: var(--s20); }
.page-pricing .comp-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--s8);
}
.page-pricing .comp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.page-pricing .comp-table thead th {
  background: var(--gray-50);
  padding: 16px 20px;
  text-align: center;
  font-weight: 600; font-size: 13px; color: var(--gray-700);
  border-bottom: 1px solid var(--border);
}
.page-pricing .comp-table thead th:first-child { text-align: left; }
.page-pricing .comp-table thead th.featured-col {
  background: var(--blue-bg); color: var(--blue);
  border-left: 1px solid var(--blue-border);
  border-right: 1px solid var(--blue-border);
}
.page-pricing .comp-table .group-header td {
  background: var(--gray-50);
  padding: 10px 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray-600);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.page-pricing .comp-table tbody tr:not(.group-header):hover td { background: rgba(var(--blue-rgb), 0.02); }
.page-pricing .comp-table td { padding: 13px 20px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.page-pricing .comp-table tr:last-child td { border-bottom: none; }
.page-pricing .comp-table td:not(:first-child) { text-align: center; }
.page-pricing .comp-table td.feat-col { color: var(--gray-700); font-size: 13.5px; max-width: 260px; }
.page-pricing .comp-table td.featured-col {
  background: rgba(var(--blue-rgb), 0.02);
  border-left: 1px solid var(--blue-border);
  border-right: 1px solid var(--blue-border);
}
.page-pricing .tc { color: var(--green); font-size: 18px; font-weight: 700; }
.page-pricing .tx { color: var(--gray-300); font-size: 18px; font-weight: 700; }
.page-pricing .tp { color: var(--amber); font-size: 12px; font-weight: 600; }
.page-pricing .tn { font-size: 13px; color: var(--gray-700); font-weight: 500; }

.page-pricing .faq-section { margin-top: var(--s20); max-width: 760px; margin-left: auto; margin-right: auto; }
.page-pricing .faq-list { margin-top: var(--s8); display: flex; flex-direction: column; gap: 2px; }
.page-pricing .faq-item {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.page-pricing .faq-q {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; gap: var(--s4);
  font-size: 15px; font-weight: 600; color: var(--black); line-height: 1.4;
  background: var(--white);
  cursor: pointer;
  transition: background 150ms ease;
}
.page-pricing .faq-q:hover { background: var(--gray-50); }
.page-pricing .faq-q svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gray-400); transition: transform 200ms var(--ease); }
.page-pricing .faq-item.open .faq-q { background: var(--gray-50); }
.page-pricing .faq-item.open .faq-q svg { transform: rotate(45deg); color: var(--blue); }
.page-pricing .faq-a {
  display: none;
  padding: 0 22px 20px;
  background: var(--gray-50);
  font-size: 14.5px; color: var(--gray-700); line-height: 1.75;
}
.page-pricing .faq-item.open .faq-a { display: block; }

.page-pricing .trust-strip {
  margin-top: var(--s16);
  padding: var(--s10) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  gap: var(--s10); flex-wrap: wrap;
}
.page-pricing .trust-item { display: flex; align-items: center; gap: 10px; }
.page-pricing .trust-ico {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--blue-bg); color: var(--blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.page-pricing .trust-ico svg { width: 18px; height: 18px; }
.page-pricing .trust-text { font-size: 13px; font-weight: 500; color: var(--gray-700); line-height: 1.4; }
.page-pricing .trust-text strong { display: block; color: var(--black); font-weight: 600; font-size: 13.5px; }

.page-pricing .section-header { text-align: center; }
.page-pricing .section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); margin-bottom: var(--s5);
}
.page-pricing .section-tag::before {
  content: ''; width: 18px; height: 2px;
  background: var(--blue); border-radius: 2px;
}
.page-pricing .section-header h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: var(--black);
}
.page-pricing .section-header p {
  margin-top: var(--s4); font-size: 16px; color: var(--gray-600); line-height: 1.7;
  max-width: 540px; margin-left: auto; margin-right: auto;
}

.page-pricing .enterprise-band {
  margin-top: var(--s10);
  background: var(--black);
  border-radius: var(--r-2xl);
  padding: var(--s12);
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s10); align-items: center;
  position: relative; overflow: hidden;
}
.page-pricing .enterprise-band::before {
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--blue-rgb), 0.35), transparent 70%);
  pointer-events: none;
}
.page-pricing .enterprise-band-text { position: relative; z-index: 1; }
.page-pricing .enterprise-band h3 {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--white);
  margin-bottom: var(--s3);
}
.page-pricing .enterprise-band p { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.65; max-width: 520px; }
.page-pricing .enterprise-band-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s5); }
.page-pricing .ent-feat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 12.5px; color: rgba(255,255,255,0.8); font-weight: 500;
}
.page-pricing .ent-feat::before {
  content: ''; width: 12px; height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300bf63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.page-pricing .enterprise-band-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s3); flex-shrink: 0; }
@media (max-width: 760px) {
  .page-pricing .enterprise-band { grid-template-columns: 1fr; }
  .page-pricing .enterprise-band-actions { flex-direction: row; }
}

/* Reveal (pricing uses 0.55s variant) */
.page-pricing .reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.page-pricing .reveal.in { opacity: 1; transform: translateY(0); }

@media (max-width: 1200px) {
  .page-pricing .comp-table thead th,
  .page-pricing .comp-table td { padding: 12px 14px; font-size: 13px; }
}

/* ========================= [COMPARE] ========================= */
.page-compare .hero-cmp {
  position: relative; background: var(--white);
  padding: var(--s20) 0 var(--s16); overflow: hidden;
}
.page-compare .hero-cmp::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--gray-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.page-compare .hero-cmp::after {
  content: ''; position: absolute; right: -200px; top: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-bg) 0%, transparent 65%);
  pointer-events: none;
}
.page-compare .hero-cmp .container { position: relative; z-index: 1; }
.page-compare .hero-cmp .breadcrumb { font-size: 13px; color: var(--gray-600); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-compare .hero-cmp .breadcrumb a { color: var(--gray-600); }
.page-compare .hero-cmp .breadcrumb a:hover { color: var(--blue); }
.page-compare .hero-cmp .breadcrumb .sep { color: var(--gray-400); }
.page-compare .hero-cmp h1 { color: var(--black); font-weight: 700; font-size: clamp(32px, 4.5vw, 52px); letter-spacing: -0.035em; line-height: 1.1; max-width: 720px; }
.page-compare .hero-cmp h1 + p { color: var(--gray-600); font-size: 17px; max-width: 560px; line-height: 1.7; margin-top: var(--s4); }

.page-compare .vs-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 7px 18px; margin-bottom: var(--s5); box-shadow: var(--shadow-sm);
}
.page-compare .vs-pill .nm { font-size: 13px; font-weight: 700; color: var(--black); }
.page-compare .vs-pill .sp { font-size: 11px; color: var(--gray-400); }
.page-compare .vs-pill .tg { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }

.page-compare .tldr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s10); }
.page-compare .tc { border-radius: var(--r-xl); padding: var(--s6); }
.page-compare .tc-eshal { background: var(--blue-bg); border: 1px solid var(--blue-border); }
.page-compare .tc-other { background: var(--gray-50); border: 1px solid var(--border); }
.page-compare .tc-eye { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-full); margin-bottom: 14px; }
.page-compare .tc-eshal .tc-eye { background: rgba(0,191,99,.18); color: #006b37; }
.page-compare .tc-other .tc-eye { background: var(--white); color: var(--gray-500); border: 1px solid var(--border); }
.page-compare .tc h3 { font-size: 22px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.015em; color: var(--black); }
.page-compare .tc-other h3 { color: var(--gray-900); }
.page-compare .tc ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-left: 0; margin: 0; }
.page-compare .tc ul li { font-size: 14px; color: var(--gray-700); display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; }
.page-compare .tc-eshal ul li::before { content: '✓'; color: var(--green); font-weight: 800; flex-shrink: 0; }
.page-compare .tc-other ul li::before { content: '→'; color: var(--gray-400); font-weight: 700; flex-shrink: 0; }

.page-compare .stat-strip { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.page-compare .stat-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.page-compare .si { padding: var(--s8) var(--s6); text-align: center; border-right: 1px solid var(--border); }
.page-compare .si:last-child { border-right: none; }
.page-compare .si-num { font-family: 'Montserrat', sans-serif; font-size: 44px; font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -0.03em; }
.page-compare .si-lbl { font-size: 12.5px; color: var(--gray-600); margin-top: 8px; line-height: 1.55; }

.page-compare .section-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); background: var(--blue-bg); border: 1px solid var(--blue-border); border-radius: var(--r-full); padding: 5px 12px; margin-bottom: var(--s4); }
.page-compare .mb-8 { margin-bottom: var(--s8); }
.page-compare .section h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; color: var(--black); letter-spacing: -0.025em; line-height: 1.15; }

.page-compare .tw { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--s3); box-shadow: var(--shadow-sm); }
.page-compare .tsl { background: var(--gray-50); padding: 12px 20px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); border-bottom: 1px solid var(--border); }
.page-compare .comp-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.page-compare .comp-table thead th { padding: 13px 20px; background: var(--gray-50); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-700); text-align: left; border-bottom: 1px solid var(--border); }
.page-compare .comp-table thead th:first-child,.page-compare .comp-table td:first-child { width: 40%; }
.page-compare .comp-table thead th:nth-child(2),.page-compare .comp-table td:nth-child(2) { width: 30%; color: var(--gray-700); }
.page-compare .comp-table thead th:nth-child(3),.page-compare .comp-table td:nth-child(3) { width: 30%; }
.page-compare .comp-table thead th:nth-child(2) { color: var(--blue); }
.page-compare .comp-table td { padding: 13px 20px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); vertical-align: middle; }
.page-compare .comp-table tr:last-child td { border-bottom: none; }
.page-compare .comp-table tbody tr:hover td { background: rgba(var(--blue-rgb), 0.02); }
.page-compare .comp-table td strong { color: var(--black); font-weight: 600; }
.page-compare .comp-table .check { color: var(--green); font-weight: 600; }
.page-compare .comp-table .cross { color: #b91c1c; }
.page-compare .comp-table .partial { color: #b45309; }
.page-compare .comp-table .rw td { background: rgba(var(--blue-rgb), 0.02); }
.page-compare .comp-table .rw td:nth-child(2) { color: var(--blue); font-weight: 600; }

.page-compare .callout-box { background: var(--blue-bg); border: 1px solid var(--blue-border); border-radius: var(--r-xl); padding: 20px 24px; margin: var(--s8) 0; }
.page-compare .callout-box p { color: var(--gray-900); font-size: 14px; line-height: 1.65; margin: 0; }
.page-compare .callout-box p strong { color: var(--blue); }

.page-compare .honest { background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 32px; margin-top: var(--s10); }
.page-compare .honest h3 { font-size: 18px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.page-compare .honest .sub { font-size: 14px; color: var(--gray-600); margin-bottom: 16px; }
.page-compare .honest ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-left: 0; margin: 0; }
.page-compare .honest ul li { font-size: 14px; color: var(--gray-700); display: flex; gap: 10px; line-height: 1.55; }
.page-compare .honest ul li::before { content: '✓'; color: var(--gray-500); font-weight: 700; flex-shrink: 0; margin-top: 2px; }

.page-compare .sw-banner { background: linear-gradient(135deg, #0d0088 0%, var(--blue) 100%); border-radius: var(--r-xl); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: var(--s10); }
.page-compare .sw-banner h3 { color: var(--white); font-size: 20px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.page-compare .sw-banner p { color: rgba(255,255,255,.75); font-size: 14px; margin: 0; }
.page-compare .sw-btns { display: flex; gap: 10px; flex-shrink: 0; }
.page-compare .sw-banner .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.3); }
.page-compare .sw-banner .btn-ghost:hover { background: rgba(255,255,255,.1); }

.page-compare .badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-full); }
.page-compare .badge-green { background: rgba(0,191,99,.1); color: #006b37; border: 1px solid rgba(0,191,99,.22); }
.page-compare .badge-gray { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--border); }

.page-compare .cta-strip { text-align: center; padding: var(--s12) var(--s6); border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--white); box-shadow: var(--shadow-sm); }
.page-compare .cta-strip h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; color: var(--black); letter-spacing: -0.025em; line-height: 1.15; margin-bottom: var(--s4); }
.page-compare .cta-strip > p { font-size: 16px; color: var(--gray-600); max-width: 560px; margin: 0 auto var(--s6); }
.page-compare .btn-row { display: inline-flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }

/* FAQ - lighter override matching compare aesthetic */
.page-compare .faq-item { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--white); margin-bottom: 10px; overflow: hidden; }
.page-compare .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; font-size: 15px; font-weight: 600; color: var(--black); text-align: left; background: transparent; border: none; cursor: pointer; font-family: inherit; }
.page-compare .faq-q:hover { background: var(--gray-50); }
.page-compare .faq-q .icon { color: var(--blue); font-weight: 700; font-size: 20px; transition: transform 200ms; }
.page-compare .faq-item.open .faq-q .icon { transform: rotate(45deg); }
.page-compare .faq-a { max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease); padding: 0; }
.page-compare .faq-item.open .faq-a { max-height: 600px; }
.page-compare .faq-a-inner { padding: 0 22px 20px; font-size: 14px; color: var(--gray-600); line-height: 1.7; }

/* vs-chatgpt cost breakdown */
.page-compare .cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: var(--s8) 0; }
.page-compare .cost-card { border-radius: var(--r-xl); padding: var(--s6); border: 1px solid var(--border); background: var(--white); }
.page-compare .cost-card.eshal-cost { background: var(--blue-bg); border-color: var(--blue-border); }
.page-compare .cost-card h4 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; color: var(--gray-500); }
.page-compare .cost-card.eshal-cost h4 { color: var(--blue); }
.page-compare .cost-line { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
.page-compare .cost-line:last-child { border-bottom: none; font-weight: 700; padding-top: 12px; }
.page-compare .cost-line .label { color: var(--gray-700); }
.page-compare .cost-line .val { font-weight: 600; color: var(--black); }
.page-compare .cost-card.eshal-cost .cost-line:last-child .val { color: var(--blue); }

@media (max-width: 768px) {
  .page-compare .tldr-grid,
  .page-compare .cost-grid { grid-template-columns: 1fr; }
  .page-compare .stat-inner { grid-template-columns: 1fr; }
  .page-compare .si { border-right: none; border-bottom: 1px solid var(--border); }
  .page-compare .si:last-child { border-bottom: none; }
  .page-compare .sw-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .page-compare .comp-table { font-size: 13px; }
  .page-compare .comp-table thead th,
  .page-compare .comp-table td { padding: 11px 14px; }
}

/* ========================= [CONTACT] ========================= */
.page-contact .contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--s12); align-items: start; }
@media (max-width: 900px) { .page-contact .contact-grid { grid-template-columns: 1fr; } }

.page-contact .contact-form-wrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: var(--s10); box-shadow: var(--shadow-md); }
.page-contact .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.page-contact .form-group { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.page-contact .form-group label { font-size: 13px; font-weight: 600; color: var(--gray-900); }
.page-contact .form-group input,
.page-contact .form-group select,
.page-contact .form-group textarea {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 14px; font-family: inherit; color: var(--gray-900); background: var(--white);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
}
.page-contact .form-group input:focus,
.page-contact .form-group select:focus,
.page-contact .form-group textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--shadow-blue); }
.page-contact .form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.page-contact .form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.page-contact .form-submit { width: 100%; height: 50px; font-size: 15px; }
.page-contact .form-note { font-size: 12px; color: var(--gray-500); text-align: center; margin-top: var(--s3); line-height: 1.5; }
.page-contact .form-success { display: none; text-align: center; padding: var(--s12) var(--s6); }
.page-contact .form-success.show { display: block; animation: fadeUp .4s var(--ease) both; }
.page-contact .form-success-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,191,99,.1); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s5); }
.page-contact .form-success-icon svg { width: 32px; height: 32px; color: var(--green); }
.page-contact .form-success h3 { font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: var(--s3); }
.page-contact .form-success p { font-size: 15px; color: var(--gray-600); max-width: 400px; margin: 0 auto; line-height: 1.7; }
@media (max-width: 560px) { .page-contact .form-row { grid-template-columns: 1fr; } }

.page-contact .enquiry-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin-bottom: var(--s5); }
.page-contact .eq-type { padding: 12px var(--s4); border: 1px solid var(--border); border-radius: var(--r-lg); cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--gray-700); transition: all 150ms ease; background: var(--white); font-family: inherit; text-align: left; }
.page-contact .eq-type:hover { border-color: var(--blue-border); color: var(--blue); background: var(--blue-bg); }
.page-contact .eq-type.active { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.page-contact .eq-type-icon { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 400px) { .page-contact .enquiry-types { grid-template-columns: 1fr; } }

.page-contact .contact-info { display: flex; flex-direction: column; gap: var(--s5); }
.page-contact .contact-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s6); }
.page-contact .contact-card h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: var(--s2); display: flex; align-items: center; gap: 8px; }
.page-contact .contact-card-h-icon { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }
.page-contact .contact-card p { font-size: 13px; color: var(--gray-600); line-height: 1.6; margin-bottom: var(--s4); }
.page-contact .contact-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--blue); }
.page-contact .contact-card-link svg { width: 14px; height: 14px; }
.page-contact .response-times { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.page-contact .response-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.page-contact .response-row:last-child { border-bottom: none; }
.page-contact .response-label { color: var(--gray-700); }
.page-contact .response-time { font-weight: 600; color: var(--black); font-size: 12px; background: var(--gray-50); padding: 2px 8px; border-radius: var(--r-full); border: 1px solid var(--border); }
.page-contact .rt-fast { background: rgba(0,191,99,.08); color: #006b37; border-color: rgba(0,191,99,.2); }

.page-contact .channels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.page-contact .ch-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s5) var(--s4); text-align: center; transition: all 200ms ease; text-decoration: none; color: inherit; display: block; }
.page-contact .ch-card:hover { border-color: var(--blue-border); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.page-contact .ch-icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--blue-bg); color: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s3); }
.page-contact .ch-icon svg { width: 22px; height: 22px; }
.page-contact .ch-label { font-size: 13px; font-weight: 600; color: var(--black); margin-bottom: 4px; }
.page-contact .ch-sub { font-size: 12px; color: var(--gray-600); line-height: 1.4; }

/* ===== Shared utility grids + cards (site-wide fallback) ===== */
/* These keep .values-grid / .value-card / .hero-keybar layouts working on
   pages that aren't .page-about. Per-page scoped overrides keep winning on
   specificity, so existing pages are untouched. */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
@media (max-width: 980px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .values-grid { grid-template-columns: 1fr; } }

.value-card {
  padding: var(--s8) var(--s6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease);
  position: relative;
  overflow: hidden;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-border);
}
.value-card .value-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: var(--s5);
}
.value-card h3 { font-size: 19px; font-weight: 600; color: var(--black); letter-spacing: -0.01em; margin-bottom: var(--s3); }
.value-card p  { font-size: 14px; color: var(--gray-600); line-height: 1.75; margin-bottom: var(--s3); }
.value-card p:last-child { margin-bottom: 0; }

a.value-card { display: block; color: inherit; text-decoration: none; }

.section-dark .value-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.section-dark .value-card h3 { color: var(--white); }
.section-dark .value-card p { color: rgba(255,255,255,0.65); }

/* Shared hero-keybar fallback (scoped .page-about version keeps winning) */
.hero-keybar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--s10);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--white);
  overflow: hidden;
}
.hero-keybar-item { padding: var(--s6) var(--s5); border-right: 1px solid var(--border); text-align: left; }
.hero-keybar-item:last-child { border-right: none; }
.hero-keybar-num { font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1; color: var(--black); }
.hero-keybar-num .suf { color: var(--blue); font-weight: 600; }
.hero-keybar-label { display: block; margin-top: var(--s2); font-size: 13px; color: var(--gray-600); line-height: 1.4; }
@media (max-width: 820px) {
  .hero-keybar { grid-template-columns: repeat(2, 1fr); }
  .hero-keybar-item:nth-child(2) { border-right: none; }
  .hero-keybar-item:nth-child(1),
  .hero-keybar-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* mission-block fallback (site-wide) - already styled inside .page-about */
.mission-block { max-width: 820px; margin: 0 auto; text-align: center; }
.mission-block blockquote {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--black);
  font-weight: 500;
}
.mission-block blockquote span { color: var(--blue); font-weight: 700; }
.mission-block .mission-tag { margin-top: var(--s5); font-size: 13px; color: var(--gray-500); letter-spacing: 0.04em; text-transform: uppercase; }

/* ===== Shared utility: chip + badge (used on new pages) ===== */
.chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--gray-50); color: var(--gray-700);
  border: 1px solid var(--border);
}
.chip-platform { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border); }
.badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--black); color: var(--white);
}

@media (max-width: 640px) { .page-contact .channels-grid { grid-template-columns: 1fr 1fr; } }

/* ========================= [MIGRATED PAGE STYLES] ========================= */

/* ===== Page: /404.html ===== */
body.page-404 { min-height:100vh; display:flex; flex-direction:column; }
.page-404 .four-oh-four {
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--white);
      position:relative;
      overflow:hidden;
      padding:var(--s16) var(--s6);
    }
/* Grid background */
.page-404 .four-oh-four::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background-image: linear-gradient(var(--gray-100) 1px,transparent 1px),linear-gradient(90deg,var(--gray-100) 1px,transparent 1px);
      background-size:48px 48px; opacity:.5;
      mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);
    }
/* Blue glow */
.page-404 .four-oh-four::after {
      content:''; position:absolute; right:-200px; top:-200px;
      width:600px; height:600px; border-radius:50%;
      background:radial-gradient(circle,var(--blue-bg) 0%,transparent 65%);
      pointer-events:none;
    }
.page-404 .fof-inner { position:relative; z-index:1; text-align:center; max-width:620px; }
.page-404 .fof-code {
      font-family:'Montserrat',sans-serif;
      font-size:clamp(100px,18vw,180px);
      font-weight:700;
      letter-spacing:-.06em;
      line-height:.85;
      color:transparent;
      background:linear-gradient(135deg, var(--black) 0%, var(--gray-400) 100%);
      -webkit-background-clip:text;
      background-clip:text;
      margin-bottom:var(--s6);
      opacity:0;
      animation:fadeUp .6s .1s var(--ease) forwards;
    }
.page-404 .fof-title {
      font-size:clamp(22px,3vw,32px);
      font-weight:700;
      letter-spacing:-.02em;
      color:var(--black);
      margin-bottom:var(--s3);
      opacity:0;
      animation:fadeUp .6s .2s var(--ease) forwards;
    }
.page-404 .fof-sub {
      font-size:16px;
      color:var(--gray-600);
      line-height:1.7;
      max-width:480px;
      margin:0 auto var(--s8);
      opacity:0;
      animation:fadeUp .6s .3s var(--ease) forwards;
    }
.page-404 .fof-actions {
      display:flex;
      gap:var(--s3);
      justify-content:center;
      flex-wrap:wrap;
      margin-bottom:var(--s12);
      opacity:0;
      animation:fadeUp .6s .4s var(--ease) forwards;
    }
.page-404 .fof-links {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:var(--s3);
      width:100%;
      opacity:0;
      animation:fadeUp .6s .5s var(--ease) forwards;
    }
.page-404 .fof-link {
      display:flex; align-items:center; gap:10px;
      padding:12px var(--s4);
      background:var(--white);
      border:1px solid var(--border);
      border-radius:var(--r-lg);
      font-size:13px; font-weight:500; color:var(--gray-700);
      text-decoration:none;
      transition:all 200ms ease;
    }
.page-404 .fof-link:hover { border-color:var(--blue-border); color:var(--blue); background:var(--blue-bg); transform:translateY(-2px); }
.page-404 .fof-link-icon { width:32px; height:32px; border-radius:var(--r-sm); background:var(--gray-50); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.page-404 .fof-link-icon svg { width:16px; height:16px; }
.page-404 .fof-link:hover .fof-link-icon { background:var(--blue-bg); border-color:var(--blue-border); color:var(--blue); }
.page-404 .fof-link-text { text-align:left; }
.page-404 .fof-link-title { font-size:13px; font-weight:600; color:var(--black); line-height:1; margin-bottom:2px; }
.page-404 .fof-link-sub { font-size:11px; color:var(--gray-500); }
.page-404 .fof-link:hover .fof-link-title { color:var(--blue); }
@media(max-width:640px) {
.page-404 .fof-links {grid-template-columns:1fr;}
.page-404 .fof-code {font-size:clamp(80px,20vw,140px);}
}
/* Minimal nav for 404 */
.page-404 .fof-nav { padding:0 var(--s6); height:68px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:var(--white); }
.page-404 .fof-footer { padding:var(--s6) var(--s6); text-align:center; border-top:1px solid var(--border); font-size:13px; color:var(--gray-500); }
.page-404 .fof-footer a { color:var(--gray-500); text-decoration:none; margin:0 var(--s3); }
.page-404 .fof-footer a:hover { color:var(--blue); }

/* ===== Page: /case-studies/banking-ksa.html ===== */
.page-case-banking-ksa .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-case-banking-ksa .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-case-banking-ksa .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-case-banking-ksa .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-case-banking-ksa .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-case-banking-ksa .wf-step-row:last-child { border-bottom: none; }
.page-case-banking-ksa .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-case-banking-ksa .wf-num.blue { background: var(--blue); }
.page-case-banking-ksa .wf-num.green { background: var(--green); }
.page-case-banking-ksa .wf-num.amber { background: var(--amber); }
.page-case-banking-ksa .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-case-banking-ksa .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-case-banking-ksa .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-case-banking-ksa .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-case-banking-ksa .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-case-banking-ksa .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-case-banking-ksa .comp-badge-icon svg { width: 22px; height: 22px; }
.page-case-banking-ksa .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-case-banking-ksa .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-case-banking-ksa .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-case-banking-ksa .compliance-grid { grid-template-columns: 1fr; }
}
.page-case-banking-ksa .cs-hero {background:var(--black);padding:var(--s16) 0 var(--s12);}
.page-case-banking-ksa .cs-hero-inner {max-width:820px;}
.page-case-banking-ksa .cs-industry-pill {display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:var(--s5);}
.page-case-banking-ksa .cs-hero h1 {font-size:clamp(28px,4vw,50px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--white);margin-bottom:var(--s4);}
.page-case-banking-ksa .cs-hero h1 em {font-style:normal;color:var(--green);}
.page-case-banking-ksa .cs-hero-sub {font-size:17px;color:rgba(255,255,255,.6);line-height:1.7;max-width:680px;margin-bottom:var(--s8);}
.page-case-banking-ksa .cs-metrics {display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);overflow:hidden;margin-top:var(--s8);}
.page-case-banking-ksa .cs-metric {background:rgba(255,255,255,.04);padding:var(--s6) var(--s5);text-align:center;}
.page-case-banking-ksa .cs-metric-num {font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.04em;color:var(--white);line-height:1;}
.page-case-banking-ksa .cs-metric-num .suf {font-size:.6em;color:var(--green);}
.page-case-banking-ksa .cs-metric-label {font-size:12px;color:rgba(255,255,255,.4);margin-top:var(--s2);line-height:1.3;}
@media(max-width:700px) {
.page-case-banking-ksa .cs-metrics {grid-template-columns:repeat(2,1fr);}
}
.page-case-banking-ksa .cs-wrap {max-width:1100px;margin:0 auto;padding:var(--s12) var(--s6) var(--s16);display:grid;grid-template-columns:1fr 300px;gap:var(--s12);align-items:start;}
@media(max-width:920px) {
.page-case-banking-ksa .cs-wrap {grid-template-columns:1fr;}
}
.page-case-banking-ksa .cs-prose h2 {font-size:clamp(20px,2.5vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--black);margin:var(--s10) 0 var(--s4);}
.page-case-banking-ksa .cs-prose h2:first-child {margin-top:0;}
.page-case-banking-ksa .cs-prose p {font-size:15px;color:var(--gray-700);line-height:1.8;margin-bottom:var(--s5);}
.page-case-banking-ksa .cs-prose p strong {color:var(--black);font-weight:600;}
.page-case-banking-ksa .cs-prose ul {list-style:none;display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5);}
.page-case-banking-ksa .cs-prose ul li {display:block;overflow:hidden;font-size:14.5px;color:var(--gray-700);line-height:1.6;}
.page-case-banking-ksa .cs-prose ul li::before {content:"";display:block;float:left;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:8px;margin-right:12px;}
.page-case-banking-ksa .result-callout {background:rgba(0,191,99,.05);border:1px solid rgba(0,191,99,.2);border-radius:var(--r-xl);padding:var(--s6);margin:var(--s8) 0;}
.page-case-banking-ksa .result-callout-num {font-size:clamp(36px,4vw,54px);font-weight:700;letter-spacing:-.04em;color:var(--green);line-height:1;margin-bottom:var(--s2);}
.page-case-banking-ksa .result-callout-label {font-size:14px;font-weight:600;color:var(--black);margin-bottom:var(--s2);}
.page-case-banking-ksa .result-callout-desc {font-size:13px;color:var(--gray-600);line-height:1.6;}
.page-case-banking-ksa .cs-quote {border-left:3px solid var(--blue);padding:var(--s5) var(--s6);background:var(--blue-bg);border-radius:0 var(--r-lg) var(--r-lg) 0;margin:var(--s8) 0;}
.page-case-banking-ksa .cs-quote blockquote {font-size:16px;font-style:italic;color:var(--gray-900);line-height:1.7;margin:0 0 var(--s3);}
.page-case-banking-ksa .cs-quote cite {font-size:13px;font-style:normal;font-weight:600;color:var(--gray-600);}
.page-case-banking-ksa .cs-sidebar {display:flex;flex-direction:column;gap:var(--s5);position:sticky;top:120px;}
.page-case-banking-ksa .cs-sidebar-card {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);}
.page-case-banking-ksa .cs-sidebar-card h4 {font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);margin-bottom:var(--s4);}
.page-case-banking-ksa .cs-fact-row {display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--gray-100);font-size:13px;}
.page-case-banking-ksa .cs-fact-row:last-child {border-bottom:none;}
.page-case-banking-ksa .cs-fact-label {color:var(--gray-600);}
.page-case-banking-ksa .cs-fact-val {font-weight:600;color:var(--black);font-size:12.5px;text-align:right;}
.page-case-banking-ksa .cs-feature-tag {display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r-full);padding:3px 10px;margin:2px;}
.page-case-banking-ksa .cs-related-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);}
.page-case-banking-ksa .cs-rel {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);text-decoration:none;transition:all 200ms ease;display:block;}
.page-case-banking-ksa .cs-rel:hover {border-color:var(--blue-border);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.page-case-banking-ksa .cs-rel-tag {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:var(--s2);}
.page-case-banking-ksa .cs-rel h4 {font-size:14px;font-weight:700;color:var(--black);margin-bottom:4px;}
.page-case-banking-ksa .cs-rel p {font-size:12.5px;color:var(--gray-600);line-height:1.5;}
@media(max-width:700px) {
.page-case-banking-ksa .cs-related-grid {grid-template-columns:1fr;}
}

/* ===== Page: /case-studies/index.html ===== */
.page-case-studies .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-case-studies .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-case-studies .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-case-studies .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-case-studies .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-case-studies .wf-step-row:last-child { border-bottom: none; }
.page-case-studies .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-case-studies .wf-num.blue { background: var(--blue); }
.page-case-studies .wf-num.green { background: var(--green); }
.page-case-studies .wf-num.amber { background: var(--amber); }
.page-case-studies .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-case-studies .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-case-studies .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-case-studies .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-case-studies .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-case-studies .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-case-studies .comp-badge-icon svg { width: 22px; height: 22px; }
.page-case-studies .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-case-studies .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-case-studies .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-case-studies .compliance-grid { grid-template-columns: 1fr; }
}
/* ── Case study hero ── */
.page-case-studies .cs-hero { background:var(--black); padding:var(--s16) 0 var(--s12); }
.page-case-studies .cs-hero-inner { max-width:820px; }
.page-case-studies .cs-industry-pill { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:var(--s5); }
.page-case-studies .cs-industry-pill .sep { color:rgba(255,255,255,.2); }
.page-case-studies .cs-hero h1 { font-size:clamp(28px,4vw,50px); font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--white); margin-bottom:var(--s4); }
.page-case-studies .cs-hero h1 em { font-style:normal; color:var(--green); }
.page-case-studies .cs-hero-sub { font-size:17px; color:rgba(255,255,255,.6); line-height:1.7; max-width:680px; margin-bottom:var(--s8); }
/* ── Metrics bar ── */
.page-case-studies .cs-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xl); overflow:hidden; margin-top:var(--s8); }
.page-case-studies .cs-metric { background:rgba(255,255,255,.04); padding:var(--s6) var(--s5); text-align:center; }
.page-case-studies .cs-metric-num { font-size:clamp(28px,3vw,44px); font-weight:700; letter-spacing:-.04em; color:var(--white); line-height:1; }
.page-case-studies .cs-metric-num .suf { font-size:.6em; color:var(--green); }
.page-case-studies .cs-metric-label { font-size:12px; color:rgba(255,255,255,.4); margin-top:var(--s2); line-height:1.3; }
@media(max-width:700px) {
.page-case-studies .cs-metrics {grid-template-columns:repeat(2,1fr);}
}
/* ── Case study body ── */
.page-case-studies .cs-body { max-width:1100px; margin:0 auto; padding:0 var(--s6); display:grid; grid-template-columns:1fr 320px; gap:var(--s12); align-items:start; padding-top:var(--s12); padding-bottom:var(--s16); }
@media(max-width:920px) {
.page-case-studies .cs-body {grid-template-columns:1fr;}
}
/* ── Prose ── */
.page-case-studies .cs-prose h2 { font-size:clamp(20px,2.5vw,26px); font-weight:700; letter-spacing:-.02em; color:var(--black); margin:var(--s10) 0 var(--s4); }
.page-case-studies .cs-prose h2:first-child { margin-top:0; }
.page-case-studies .cs-prose p { font-size:15px; color:var(--gray-700); line-height:1.8; margin-bottom:var(--s5); }
.page-case-studies .cs-prose p strong { color:var(--black); font-weight:600; }
.page-case-studies .cs-prose ul { list-style:none; display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s5); }
.page-case-studies .cs-prose ul li { display:block; overflow:hidden; font-size:14.5px; color:var(--gray-700); line-height:1.6; }
.page-case-studies .cs-prose ul li::before { content:''; display:block; float:left; width:6px; height:6px; border-radius:50%; background:var(--blue); margin-top:8px; margin-right:12px; }
/* ── Result callout ── */
.page-case-studies .result-callout { background:rgba(0,191,99,.05); border:1px solid rgba(0,191,99,.2); border-radius:var(--r-xl); padding:var(--s6); margin:var(--s8) 0; }
.page-case-studies .result-callout-num { font-size:clamp(36px,4vw,54px); font-weight:700; letter-spacing:-.04em; color:var(--green); line-height:1; margin-bottom:var(--s2); }
.page-case-studies .result-callout-label { font-size:14px; font-weight:600; color:var(--black); margin-bottom:var(--s2); }
.page-case-studies .result-callout-desc { font-size:13px; color:var(--gray-600); line-height:1.6; }
/* ── Pull quote ── */
.page-case-studies .cs-quote { border-left:3px solid var(--blue); padding:var(--s5) var(--s6); background:var(--blue-bg); border-radius:0 var(--r-lg) var(--r-lg) 0; margin:var(--s8) 0; }
.page-case-studies .cs-quote p { font-size:16px; font-style:italic; color:var(--gray-900); line-height:1.7; margin:0 0 var(--s3); }
.page-case-studies .cs-quote cite { font-size:13px; font-style:normal; font-weight:600; color:var(--gray-600); }
/* ── Sidebar ── */
.page-case-studies .cs-sidebar { display:flex; flex-direction:column; gap:var(--s5); position:sticky; top:120px; }
.page-case-studies .cs-sidebar-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s6); }
.page-case-studies .cs-sidebar-card h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-500); margin-bottom:var(--s4); }
.page-case-studies .cs-fact-row { display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--gray-100); font-size:13px; }
.page-case-studies .cs-fact-row:last-child { border-bottom:none; }
.page-case-studies .cs-fact-label { color:var(--gray-600); }
.page-case-studies .cs-fact-val { font-weight:600; color:var(--black); text-align:right; font-size:12.5px; }
.page-case-studies .cs-feature-tag { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--blue); background:var(--blue-bg); border:1px solid var(--blue-border); border-radius:var(--r-full); padding:4px 10px; margin:2px; }
/* ── Related CTA ── */
.page-case-studies .cs-related { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.page-case-studies .cs-rel-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s5); text-decoration:none; transition:all 200ms ease; }
.page-case-studies .cs-rel-card:hover { border-color:var(--blue-border); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.page-case-studies .cs-rel-tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--blue); margin-bottom:var(--s2); }
.page-case-studies .cs-rel-card h4 { font-size:14px; font-weight:700; color:var(--black); margin-bottom:4px; }
.page-case-studies .cs-rel-card p { font-size:12.5px; color:var(--gray-600); line-height:1.5; }
@media(max-width:700px) {
.page-case-studies .cs-related {grid-template-columns:1fr;}
}
.page-case-studies .cs-hub-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); }
.page-case-studies .cs-hub-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; text-decoration:none; transition:all 250ms ease; display:flex; flex-direction:column; }
.page-case-studies .cs-hub-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--blue-border); }
.page-case-studies .cs-hub-card:first-child { grid-column:1/-1; flex-direction:row; }
@media(max-width:840px) {
.page-case-studies .cs-hub-card:first-child {flex-direction:column;}
.page-case-studies .cs-hub-grid {grid-template-columns:1fr;}
}
.page-case-studies .cs-hub-card-visual { min-height:220px; background:var(--black); position:relative; overflow:hidden; flex-shrink:0; }
.page-case-studies .cs-hub-card:first-child .cs-hub-card-visual { width:340px; min-height:auto; flex-shrink:0; }
@media(max-width:840px) {
.page-case-studies .cs-hub-card:first-child .cs-hub-card-visual {width:100%; min-height:200px;}
}
.page-case-studies .cs-hub-card-visual-num { position:absolute; right:var(--s5); bottom:var(--s4); font-family:"Montserrat",sans-serif; font-size:clamp(48px,6vw,80px); font-weight:700; letter-spacing:-.06em; color:rgba(255,255,255,.07); line-height:1; }
.page-case-studies .cs-hub-card-visual-tag { position:absolute; top:var(--s5); left:var(--s5); }
.page-case-studies .cs-hub-card-visual-metrics { position:absolute; bottom:var(--s5); left:var(--s5); display:flex; gap:var(--s3); }
.page-case-studies .cs-mini-metric { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:var(--r-md); padding:6px 12px; text-align:center; backdrop-filter:blur(4px); }
.page-case-studies .cs-mini-metric-num { font-size:20px; font-weight:700; color:var(--white); line-height:1; }
.page-case-studies .cs-mini-metric-label { font-size:10px; color:rgba(255,255,255,.55); margin-top:2px; }
.page-case-studies .cs-hub-card-body { padding:var(--s6) var(--s8); flex:1; display:flex; flex-direction:column; }
.page-case-studies .cs-hub-card-body .industry-tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--blue); margin-bottom:var(--s3); }
.page-case-studies .cs-hub-card-body h3 { font-size:clamp(18px,2vw,22px); font-weight:700; letter-spacing:-.02em; color:var(--black); margin-bottom:var(--s3); line-height:1.25; }
.page-case-studies .cs-hub-card-body p { font-size:14px; color:var(--gray-600); line-height:1.65; flex:1; margin-bottom:var(--s5); }
.page-case-studies .cs-hub-card-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--blue); }
.page-case-studies .cs-stat-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border-top:1px solid var(--border); }
.page-case-studies .cs-stat-bar-item { background:var(--white); padding:var(--s4); text-align:center; }
.page-case-studies .cs-stat-bar-num { font-size:22px; font-weight:700; letter-spacing:-.03em; color:var(--black); line-height:1; }
.page-case-studies .cs-stat-bar-label { font-size:11px; color:var(--gray-500); margin-top:3px; line-height:1.3; }

/* ===== Page: /case-studies/logistics-uae.html ===== */
.page-case-logistics-uae .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-case-logistics-uae .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-case-logistics-uae .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-case-logistics-uae .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-case-logistics-uae .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-case-logistics-uae .wf-step-row:last-child { border-bottom: none; }
.page-case-logistics-uae .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-case-logistics-uae .wf-num.blue { background: var(--blue); }
.page-case-logistics-uae .wf-num.green { background: var(--green); }
.page-case-logistics-uae .wf-num.amber { background: var(--amber); }
.page-case-logistics-uae .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-case-logistics-uae .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-case-logistics-uae .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-case-logistics-uae .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-case-logistics-uae .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-case-logistics-uae .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-case-logistics-uae .comp-badge-icon svg { width: 22px; height: 22px; }
.page-case-logistics-uae .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-case-logistics-uae .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-case-logistics-uae .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-case-logistics-uae .compliance-grid { grid-template-columns: 1fr; }
}
.page-case-logistics-uae .cs-hero {background:var(--black);padding:var(--s16) 0 var(--s12);}
.page-case-logistics-uae .cs-hero-inner {max-width:820px;}
.page-case-logistics-uae .cs-industry-pill {display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:var(--s5);}
.page-case-logistics-uae .cs-hero h1 {font-size:clamp(28px,4vw,50px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--white);margin-bottom:var(--s4);}
.page-case-logistics-uae .cs-hero h1 em {font-style:normal;color:var(--green);}
.page-case-logistics-uae .cs-hero-sub {font-size:17px;color:rgba(255,255,255,.6);line-height:1.7;max-width:680px;margin-bottom:var(--s8);}
.page-case-logistics-uae .cs-metrics {display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);overflow:hidden;margin-top:var(--s8);}
.page-case-logistics-uae .cs-metric {background:rgba(255,255,255,.04);padding:var(--s6) var(--s5);text-align:center;}
.page-case-logistics-uae .cs-metric-num {font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.04em;color:var(--white);line-height:1;}
.page-case-logistics-uae .cs-metric-num .suf {font-size:.6em;color:var(--green);}
.page-case-logistics-uae .cs-metric-label {font-size:12px;color:rgba(255,255,255,.4);margin-top:var(--s2);line-height:1.3;}
@media(max-width:700px) {
.page-case-logistics-uae .cs-metrics {grid-template-columns:repeat(2,1fr);}
}
.page-case-logistics-uae .cs-wrap {max-width:1100px;margin:0 auto;padding:var(--s12) var(--s6) var(--s16);display:grid;grid-template-columns:1fr 300px;gap:var(--s12);align-items:start;}
@media(max-width:920px) {
.page-case-logistics-uae .cs-wrap {grid-template-columns:1fr;}
}
.page-case-logistics-uae .cs-prose h2 {font-size:clamp(20px,2.5vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--black);margin:var(--s10) 0 var(--s4);}
.page-case-logistics-uae .cs-prose h2:first-child {margin-top:0;}
.page-case-logistics-uae .cs-prose p {font-size:15px;color:var(--gray-700);line-height:1.8;margin-bottom:var(--s5);}
.page-case-logistics-uae .cs-prose p strong {color:var(--black);font-weight:600;}
.page-case-logistics-uae .cs-prose ul {list-style:none;display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5);}
.page-case-logistics-uae .cs-prose ul li {display:block;overflow:hidden;font-size:14.5px;color:var(--gray-700);line-height:1.6;}
.page-case-logistics-uae .cs-prose ul li::before {content:"";display:block;float:left;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:8px;margin-right:12px;flex-shrink:0;}
.page-case-logistics-uae .result-callout {background:rgba(0,191,99,.05);border:1px solid rgba(0,191,99,.2);border-radius:var(--r-xl);padding:var(--s6);margin:var(--s8) 0;}
.page-case-logistics-uae .result-callout-num {font-size:clamp(36px,4vw,54px);font-weight:700;letter-spacing:-.04em;color:var(--green);line-height:1;margin-bottom:var(--s2);}
.page-case-logistics-uae .result-callout-label {font-size:14px;font-weight:600;color:var(--black);margin-bottom:var(--s2);}
.page-case-logistics-uae .result-callout-desc {font-size:13px;color:var(--gray-600);line-height:1.6;}
.page-case-logistics-uae .cs-quote {border-left:3px solid var(--blue);padding:var(--s5) var(--s6);background:var(--blue-bg);border-radius:0 var(--r-lg) var(--r-lg) 0;margin:var(--s8) 0;}
.page-case-logistics-uae .cs-quote blockquote {font-size:16px;font-style:italic;color:var(--gray-900);line-height:1.7;margin:0 0 var(--s3);}
.page-case-logistics-uae .cs-quote cite {font-size:13px;font-style:normal;font-weight:600;color:var(--gray-600);}
.page-case-logistics-uae .cs-sidebar {display:flex;flex-direction:column;gap:var(--s5);position:sticky;top:120px;}
.page-case-logistics-uae .cs-sidebar-card {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);}
.page-case-logistics-uae .cs-sidebar-card h4 {font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);margin-bottom:var(--s4);}
.page-case-logistics-uae .cs-fact-row {display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--gray-100);font-size:13px;}
.page-case-logistics-uae .cs-fact-row:last-child {border-bottom:none;}
.page-case-logistics-uae .cs-fact-label {color:var(--gray-600);}
.page-case-logistics-uae .cs-fact-val {font-weight:600;color:var(--black);font-size:12.5px;text-align:right;}
.page-case-logistics-uae .cs-feature-tag {display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r-full);padding:3px 10px;margin:2px;}
.page-case-logistics-uae .cs-related-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);}
.page-case-logistics-uae .cs-rel {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);text-decoration:none;transition:all 200ms ease;display:block;}
.page-case-logistics-uae .cs-rel:hover {border-color:var(--blue-border);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.page-case-logistics-uae .cs-rel-tag {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:var(--s2);}
.page-case-logistics-uae .cs-rel h4 {font-size:14px;font-weight:700;color:var(--black);margin-bottom:4px;}
.page-case-logistics-uae .cs-rel p {font-size:12.5px;color:var(--gray-600);line-height:1.5;}
@media(max-width:700px) {
.page-case-logistics-uae .cs-related-grid {grid-template-columns:1fr;}
}

/* ===== Page: /case-studies/retail-ecommerce.html ===== */
.page-case-retail-ecommerce .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-case-retail-ecommerce .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-case-retail-ecommerce .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-case-retail-ecommerce .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-case-retail-ecommerce .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-case-retail-ecommerce .wf-step-row:last-child { border-bottom: none; }
.page-case-retail-ecommerce .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-case-retail-ecommerce .wf-num.blue { background: var(--blue); }
.page-case-retail-ecommerce .wf-num.green { background: var(--green); }
.page-case-retail-ecommerce .wf-num.amber { background: var(--amber); }
.page-case-retail-ecommerce .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-case-retail-ecommerce .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-case-retail-ecommerce .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-case-retail-ecommerce .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-case-retail-ecommerce .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-case-retail-ecommerce .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-case-retail-ecommerce .comp-badge-icon svg { width: 22px; height: 22px; }
.page-case-retail-ecommerce .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-case-retail-ecommerce .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-case-retail-ecommerce .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-case-retail-ecommerce .compliance-grid { grid-template-columns: 1fr; }
}
.page-case-retail-ecommerce .cs-hero {background:var(--black);padding:var(--s16) 0 var(--s12);}
.page-case-retail-ecommerce .cs-hero-inner {max-width:820px;}
.page-case-retail-ecommerce .cs-industry-pill {display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:var(--s5);}
.page-case-retail-ecommerce .cs-hero h1 {font-size:clamp(28px,4vw,50px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--white);margin-bottom:var(--s4);}
.page-case-retail-ecommerce .cs-hero h1 em {font-style:normal;color:var(--green);}
.page-case-retail-ecommerce .cs-hero-sub {font-size:17px;color:rgba(255,255,255,.6);line-height:1.7;max-width:680px;margin-bottom:var(--s8);}
.page-case-retail-ecommerce .cs-metrics {display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);overflow:hidden;margin-top:var(--s8);}
.page-case-retail-ecommerce .cs-metric {background:rgba(255,255,255,.04);padding:var(--s6) var(--s5);text-align:center;}
.page-case-retail-ecommerce .cs-metric-num {font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.04em;color:var(--white);line-height:1;}
.page-case-retail-ecommerce .cs-metric-num .suf {font-size:.6em;color:var(--green);}
.page-case-retail-ecommerce .cs-metric-label {font-size:12px;color:rgba(255,255,255,.4);margin-top:var(--s2);line-height:1.3;}
@media(max-width:700px) {
.page-case-retail-ecommerce .cs-metrics {grid-template-columns:repeat(2,1fr);}
}
.page-case-retail-ecommerce .cs-wrap {max-width:1100px;margin:0 auto;padding:var(--s12) var(--s6) var(--s16);display:grid;grid-template-columns:1fr 300px;gap:var(--s12);align-items:start;}
@media(max-width:920px) {
.page-case-retail-ecommerce .cs-wrap {grid-template-columns:1fr;}
}
.page-case-retail-ecommerce .cs-prose h2 {font-size:clamp(20px,2.5vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--black);margin:var(--s10) 0 var(--s4);}
.page-case-retail-ecommerce .cs-prose h2:first-child {margin-top:0;}
.page-case-retail-ecommerce .cs-prose p {font-size:15px;color:var(--gray-700);line-height:1.8;margin-bottom:var(--s5);}
.page-case-retail-ecommerce .cs-prose p strong {color:var(--black);font-weight:600;}
.page-case-retail-ecommerce .cs-prose ul {list-style:none;display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5);}
.page-case-retail-ecommerce .cs-prose ul li {display:block;overflow:hidden;font-size:14.5px;color:var(--gray-700);line-height:1.6;}
.page-case-retail-ecommerce .cs-prose ul li::before {content:"";display:block;float:left;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:8px;margin-right:12px;}
.page-case-retail-ecommerce .result-callout {background:rgba(0,191,99,.05);border:1px solid rgba(0,191,99,.2);border-radius:var(--r-xl);padding:var(--s6);margin:var(--s8) 0;}
.page-case-retail-ecommerce .result-callout-num {font-size:clamp(36px,4vw,54px);font-weight:700;letter-spacing:-.04em;color:var(--green);line-height:1;margin-bottom:var(--s2);}
.page-case-retail-ecommerce .result-callout-label {font-size:14px;font-weight:600;color:var(--black);margin-bottom:var(--s2);}
.page-case-retail-ecommerce .result-callout-desc {font-size:13px;color:var(--gray-600);line-height:1.6;}
.page-case-retail-ecommerce .cs-quote {border-left:3px solid var(--blue);padding:var(--s5) var(--s6);background:var(--blue-bg);border-radius:0 var(--r-lg) var(--r-lg) 0;margin:var(--s8) 0;}
.page-case-retail-ecommerce .cs-quote blockquote {font-size:16px;font-style:italic;color:var(--gray-900);line-height:1.7;margin:0 0 var(--s3);}
.page-case-retail-ecommerce .cs-quote cite {font-size:13px;font-style:normal;font-weight:600;color:var(--gray-600);}
.page-case-retail-ecommerce .cs-sidebar {display:flex;flex-direction:column;gap:var(--s5);position:sticky;top:120px;}
.page-case-retail-ecommerce .cs-sidebar-card {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);}
.page-case-retail-ecommerce .cs-sidebar-card h4 {font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);margin-bottom:var(--s4);}
.page-case-retail-ecommerce .cs-fact-row {display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--gray-100);font-size:13px;}
.page-case-retail-ecommerce .cs-fact-row:last-child {border-bottom:none;}
.page-case-retail-ecommerce .cs-fact-label {color:var(--gray-600);}
.page-case-retail-ecommerce .cs-fact-val {font-weight:600;color:var(--black);font-size:12.5px;text-align:right;}
.page-case-retail-ecommerce .cs-feature-tag {display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r-full);padding:3px 10px;margin:2px;}
.page-case-retail-ecommerce .cs-related-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);}
.page-case-retail-ecommerce .cs-rel {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);text-decoration:none;transition:all 200ms ease;display:block;}
.page-case-retail-ecommerce .cs-rel:hover {border-color:var(--blue-border);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.page-case-retail-ecommerce .cs-rel-tag {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:var(--s2);}
.page-case-retail-ecommerce .cs-rel h4 {font-size:14px;font-weight:700;color:var(--black);margin-bottom:4px;}
.page-case-retail-ecommerce .cs-rel p {font-size:12.5px;color:var(--gray-600);line-height:1.5;}
@media(max-width:700px) {
.page-case-retail-ecommerce .cs-related-grid {grid-template-columns:1fr;}
}

/* ===== Page: /demo.html ===== */
/* ── Demo scenario selector ── */
.page-demo .scenario-tabs { display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s6); }
.page-demo .sc-tab { padding:8px 18px; border-radius:var(--r-full); border:1px solid var(--border); background:var(--white); font-size:13px; font-weight:500; color:var(--gray-700); cursor:pointer; transition:all 150ms ease; display:flex; align-items:center; gap:6px; }
.page-demo .sc-tab:hover { border-color:var(--blue-border); color:var(--blue); background:var(--blue-bg); }
.page-demo .sc-tab.active { border-color:var(--blue); background:var(--blue); color:var(--white); font-weight:600; }
.page-demo .sc-tab .dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(0,191,99,.6); }
.page-demo .sc-tab.active .dot { background:rgba(255,255,255,.8); box-shadow:none; }
/* ── Chat simulation ── */
.page-demo .chat-window { background:var(--white); border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.page-demo .chat-header { background:var(--black); padding:var(--s4) var(--s6); display:flex; align-items:center; gap:var(--s3); }
.page-demo .chat-avatar { width:36px; height:36px; border-radius:50%; background:conic-gradient(from 200deg,var(--blue),#7e6bff,var(--blue)); position:relative; flex-shrink:0; }
.page-demo .chat-avatar::after { content:''; position:absolute; inset:6px; border-radius:50%; background:var(--black); }
.page-demo .chat-avatar::before { content:''; position:absolute; inset:11px; border-radius:50%; background:var(--blue); }
.page-demo .chat-header-info .name { font-size:13px; font-weight:700; color:var(--white); }
.page-demo .chat-header-info .status { font-size:11px; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:5px; }
.page-demo .chat-header-info .status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(0,191,99,.7); }
.page-demo .chat-body { padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); min-height:380px; background:var(--gray-50); overflow-y:auto; max-height:480px; }
.page-demo .msg { display:flex; flex-direction:column; gap:4px; max-width:72%; }
.page-demo .msg.user { align-self:flex-end; align-items:flex-end; }
.page-demo .msg.eshal { align-self:flex-start; align-items:flex-start; }
.page-demo .msg-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); }
.page-demo .msg-bubble { padding:10px 14px; border-radius:var(--r-xl); font-size:14px; line-height:1.6; }
.page-demo .msg.user .msg-bubble { background:var(--blue); color:var(--white); border-bottom-right-radius:var(--r-sm); }
.page-demo .msg.eshal .msg-bubble { background:var(--white); color:var(--gray-900); border:1px solid var(--border); border-bottom-left-radius:var(--r-sm); }
.page-demo .msg-bubble.arabic { direction:rtl; text-align:right; font-size:15px; }
.page-demo .msg-time { font-size:10px; color:var(--gray-400); }
.page-demo .msg-action { padding:8px 14px; background:var(--blue-bg); border:1px solid var(--blue-border); border-radius:var(--r-lg); font-size:12.5px; color:var(--blue); font-weight:600; display:flex; align-items:center; gap:6px; }
.page-demo .msg-action svg { width:14px; height:14px; flex-shrink:0; }
.page-demo .msg-typing { display:flex; align-items:center; gap:4px; padding:10px 14px; background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); border-bottom-left-radius:var(--r-sm); width:60px; }
.page-demo .typing-dot { width:6px; height:6px; border-radius:50%; background:var(--gray-400); animation:typingBounce .8s infinite; }
.page-demo .typing-dot:nth-child(2) { animation-delay:.15s; }
.page-demo .typing-dot:nth-child(3) { animation-delay:.3s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-5px);} }
.page-demo .chat-footer { padding:var(--s4) var(--s6); border-top:1px solid var(--border); display:flex; align-items:center; gap:var(--s3); background:var(--white); }
.page-demo .chat-input-mock { flex:1; padding:10px 14px; background:var(--gray-50); border:1px solid var(--border); border-radius:var(--r-full); font-size:13px; color:var(--gray-500); cursor:default; }
.page-demo .chat-send { width:36px; height:36px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.page-demo .chat-send svg { width:16px; height:16px; color:var(--white); }
.page-demo .chat-controls { display:flex; gap:var(--s2); align-items:center; justify-content:center; margin-top:var(--s4); }
.page-demo .ctrl-btn { padding:8px 16px; border-radius:var(--r-full); border:1px solid var(--border); background:var(--white); font-size:12px; font-weight:600; color:var(--gray-700); cursor:pointer; transition:all 150ms ease; display:flex; align-items:center; gap:6px; }
.page-demo .ctrl-btn:hover { border-color:var(--blue-border); color:var(--blue); }
.page-demo .ctrl-btn.playing { background:var(--blue); color:var(--white); border-color:var(--blue); }
.page-demo .ctrl-btn svg { width:14px; height:14px; }
.page-demo .speed-label { font-size:12px; color:var(--gray-500); }
/* ── Demo split layout ── */
.page-demo .demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s10); align-items:start; }
@media(max-width:920px) {
.page-demo .demo-grid {grid-template-columns:1fr;}
}
/* ── What you'll see cards ── */
.page-demo .see-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.page-demo .see-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s6); }
.page-demo .see-num { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:var(--s3); }.page-demo .see-card h4 { font-size:15px; font-weight:700; color:var(--black); margin-bottom:var(--s2); }
.page-demo .see-card p { font-size:13px; color:var(--gray-600); line-height:1.6; }
@media(max-width:760px) {
.page-demo .see-grid {grid-template-columns:1fr;}
}
/* ── Book form ── */
.page-demo .book-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.page-demo .book-form-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--r-2xl); padding:var(--s10); }
.page-demo .form-group { display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s5); }
.page-demo .form-group label { font-size:13px; font-weight:600; color:var(--gray-900); }
.page-demo .form-group input, .page-demo .form-group select { padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-md); font-size:14px; font-family:inherit; color:var(--gray-900); background:var(--white); transition:border-color 150ms ease, box-shadow 150ms ease; width:100%; }
.page-demo .form-group input:focus, .page-demo .form-group select:focus { outline:none; border-color:var(--blue); box-shadow:var(--shadow-blue); }
.page-demo .form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:40px; }
@media(max-width:560px) {
.page-demo .book-grid {grid-template-columns:1fr;}
}
.page-demo .book-success { display:none; text-align:center; padding:var(--s12); }
.page-demo .book-success.show { display:block; animation:fadeUp .4s var(--ease) both; }
.page-demo .book-success-icon { width:64px; height:64px; border-radius:50%; background:rgba(0,191,99,.1); display:flex; align-items:center; justify-content:center; margin:0 auto var(--s5); }
.page-demo .book-success-icon svg { width:32px; height:32px; color:var(--green); }

/* ===== Page: /glossary/index.html ===== */
/* Glossary - page-specific styles */
.page-glossary .gl-hero { background: linear-gradient(180deg, var(--blue-bg) 0%, var(--white) 100%); padding: var(--s16) 0 var(--s10); position: relative; overflow: hidden; }
.page-glossary .gl-hero-inner { max-width: 720px; position: relative; z-index: 1; }
.page-glossary .gl-hero h1 { font-size: clamp(38px, 5vw, 56px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: var(--black); margin: var(--s3) 0 var(--s5); }
.page-glossary .gl-hero h1 em { color: var(--blue); font-style: normal; }
.page-glossary .gl-hero p { font-size: 17px; color: var(--gray-600); line-height: 1.75; max-width: 620px; }
.page-glossary .gl-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s10); max-width: 620px; }
.page-glossary .gl-stat-num { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -0.02em; }
.page-glossary .gl-stat-label { font-size: 12.5px; color: var(--gray-600); margin-top: 6px; line-height: 1.4; }
/* Sticky letter filter */
.page-glossary .gl-filter-bar { position: sticky; top: 68px; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); z-index: 20; padding: var(--s3) 0; }
.page-glossary .gl-filter-inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.page-glossary .gl-filter-inner::-webkit-scrollbar { display: none; }
.page-glossary .gl-filter-btn { flex-shrink: 0; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--white); color: var(--gray-700); cursor: pointer; transition: all 150ms; font-family: inherit; }
.page-glossary .gl-filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.page-glossary .gl-filter-btn.active { background: var(--black); border-color: var(--black); color: var(--white); }
/* Two-column layout */
.page-glossary .gl-layout { max-width: 1180px; margin: 0 auto; padding: var(--s10) var(--s6) var(--s16); display: grid; grid-template-columns: 1fr 280px; gap: var(--s10); align-items: start; }
@media (max-width: 900px) {
.page-glossary .gl-layout { grid-template-columns: 1fr; }
}
.page-glossary .gl-search { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); font-size: 14px; font-family: inherit; color: var(--gray-900); background: var(--white); transition: border-color 150ms, box-shadow 150ms; }
.page-glossary .gl-search:focus { outline: none; border-color: var(--blue); box-shadow: var(--shadow-blue); }
.page-glossary .no-results { display: none; text-align: center; color: var(--gray-500); font-size: 14px; padding: var(--s8) 0; }
.page-glossary .gl-letter-group { margin-bottom: var(--s10); scroll-margin-top: 140px; }
.page-glossary .gl-letter-heading { font-family: 'Montserrat', sans-serif; font-size: 44px; font-weight: 800; color: var(--blue); letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 2px solid var(--blue-border); }
.page-glossary .gl-term { padding: var(--s5) 0; border-bottom: 1px solid var(--gray-100); }
.page-glossary .gl-term:last-child { border-bottom: none; }
.page-glossary .gl-term-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }
.page-glossary .gl-term-name { font-size: 18px; font-weight: 700; color: var(--black); letter-spacing: -0.015em; }
.page-glossary .gl-term-tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-full); border: 1px solid transparent; }
.page-glossary .tag-platform { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border); }
.page-glossary .tag-arabic { background: rgba(127,165,248,0.12); color: #3d5fc4; border-color: rgba(127,165,248,0.25); }
.page-glossary .tag-mena { background: rgba(0,191,99,0.08); color: #007840; border-color: rgba(0,191,99,0.22); }
.page-glossary .tag-tech { background: rgba(217,119,6,0.08); color: #b45309; border-color: rgba(217,119,6,0.2); }
.page-glossary .gl-term-def { font-size: 14.5px; color: var(--gray-700); line-height: 1.75; margin-bottom: var(--s3); }
.page-glossary .gl-term-eshal { font-size: 13.5px; color: var(--gray-700); line-height: 1.7; padding: var(--s3) var(--s4); background: var(--blue-bg); border-left: 3px solid var(--blue); border-radius: 0 var(--r-md) var(--r-md) 0; }
.page-glossary .gl-term-eshal strong { color: var(--blue); font-weight: 600; }
.page-glossary .gl-sidebar { display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: 140px; align-self: start; }
.page-glossary .gl-sb-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s5); }
.page-glossary .gl-sb-card h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-500); margin-bottom: var(--s3); }
.page-glossary .gl-sb-link { display: block; padding: 8px 10px; font-size: 13px; color: var(--gray-700); text-decoration: none; border-radius: var(--r-md); transition: all 150ms; line-height: 1.4; width: 100%; }
.page-glossary .gl-sb-link:hover { background: var(--gray-50); color: var(--blue); }
.page-glossary .gl-letter-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--gray-700); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font-family: inherit; transition: all 150ms; }
.page-glossary .gl-letter-btn:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ===== Page: /industries/banking.html ===== */
.page-banking .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-banking .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-banking .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-banking .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-banking .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-banking .wf-step-row:last-child { border-bottom: none; }
.page-banking .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-banking .wf-num.blue { background: var(--blue); }
.page-banking .wf-num.green { background: var(--green); }
.page-banking .wf-num.amber { background: var(--amber); }
.page-banking .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-banking .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-banking .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-banking .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-banking .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-banking .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-banking .comp-badge-icon svg { width: 22px; height: 22px; }
.page-banking .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-banking .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-banking .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-banking .compliance-grid { grid-template-columns: 1fr; }
}

/* ===== Page: /industries/education.html ===== */
.page-education .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-education .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-education .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-education .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-education .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-education .wf-step-row:last-child { border-bottom: none; }
.page-education .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-education .wf-num.blue { background: var(--blue); }
.page-education .wf-num.green { background: var(--green); }
.page-education .wf-num.amber { background: var(--amber); }
.page-education .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-education .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-education .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-education .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-education .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-education .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-education .comp-badge-icon svg { width: 22px; height: 22px; }
.page-education .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-education .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-education .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-education .compliance-grid { grid-template-columns: 1fr; }
}

/* ===== Page: /industries/government.html ===== */
.page-government .service-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      font-size: 14px;
    }
.page-government .service-table th {
      background: var(--gray-50);
      padding: 12px 16px;
      text-align: left;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gray-600);
      border-bottom: 1px solid var(--border);
    }
.page-government .service-table td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--gray-100);
      vertical-align: top;
      color: var(--gray-900);
      line-height: 1.5;
    }
.page-government .service-table tr:last-child td { border-bottom: none; }
.page-government .service-table tr:hover td { background: rgba(var(--blue-rgb), 0.015); }
.page-government .svc-badge {
      display: inline-block;
      font-size: 10px; font-weight: 700;
      padding: 2px 8px; border-radius: var(--r-full);
    }
.page-government .svc-auto { background: rgba(0,191,99,0.1); color: #006b37; border: 1px solid rgba(0,191,99,0.2); }
.page-government .svc-gate { background: rgba(217,119,6,0.1); color: #9a5700; border: 1px solid rgba(217,119,6,0.2); }
.page-government .svc-human { background: rgba(220,38,38,0.06); color: #8b1414; border: 1px solid rgba(220,38,38,0.15); }

/* ===== Page: /industries/healthcare.html ===== */
.page-healthcare .safety-notice {
      background: rgba(217,119,6,0.06);
      border: 1px solid rgba(217,119,6,0.2);
      border-left: 3px solid var(--amber);
      border-radius: var(--r-md);
      padding: var(--s5) var(--s6);
      font-size: 13.5px; color: var(--gray-900); line-height: 1.7;
      margin-top: var(--s8);
    }
.page-healthcare .safety-notice strong { color: var(--amber); }

/* ===== Page: /industries/hospitality.html ===== */
.page-hospitality .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-hospitality .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-hospitality .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-hospitality .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-hospitality .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-hospitality .wf-step-row:last-child { border-bottom: none; }
.page-hospitality .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-hospitality .wf-num.blue { background: var(--blue); }
.page-hospitality .wf-num.green { background: var(--green); }
.page-hospitality .wf-num.amber { background: var(--amber); }
.page-hospitality .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-hospitality .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-hospitality .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-hospitality .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-hospitality .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-hospitality .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-hospitality .comp-badge-icon svg { width: 22px; height: 22px; }
.page-hospitality .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-hospitality .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-hospitality .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-hospitality .compliance-grid { grid-template-columns: 1fr; }
}

/* ===== Page: /industries/index.html ===== */
/* ── page-specific additions only ── */
.page-industries .ind-hub-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s4);
      margin-top: var(--s12);
    }
.page-industries .ind-hub-card {
      padding: var(--s8) var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      position: relative; overflow: hidden;
      transition: all 250ms ease;
      display: block;
      text-decoration: none;
      color: inherit;
    }
.page-industries .ind-hub-card::before {
      content: ''; position: absolute; top: 0; right: 0;
      width: 200px; height: 120px;
      background: radial-gradient(circle at top right, var(--blue-bg), transparent 70%);
      pointer-events: none;
    }
.page-industries .ind-hub-card:hover {
      transform: translateY(-5px);
      border-color: var(--blue-border);
      box-shadow: 0 12px 36px rgba(var(--blue-rgb), 0.09);
    }
.page-industries .ind-hub-icon {
      width: 48px; height: 48px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: var(--s5);
    }
.page-industries .ind-hub-icon svg { width: 24px; height: 24px; }
.page-industries .ind-hub-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--black); margin-bottom: var(--s2); }
.page-industries .ind-hub-card p { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin-bottom: var(--s5); }
.page-industries .ind-hub-kpis { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.page-industries .ind-kpi { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full); background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
.page-industries .ind-hub-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--blue); transition: gap 200ms ease; }
.page-industries .ind-hub-card:hover .ind-hub-link { gap: 10px; }
.page-industries .ind-hub-link svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
.page-industries .ind-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.page-industries .ind-hub-grid { grid-template-columns: 1fr; }
}
.page-industries .cross-sell {
      background: var(--black);
      border-radius: var(--r-2xl);
      padding: var(--s12) var(--s12);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s10);
      align-items: center;
      margin-top: var(--s12);
    }
.page-industries .cross-sell h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.025em; color: var(--white); line-height: 1.15; margin-bottom: var(--s4); }
.page-industries .cross-sell p { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; }
.page-industries .cross-sell-right { display: flex; flex-direction: column; gap: var(--s3); }
.page-industries .cross-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-lg); color: rgba(255,255,255,0.8); font-size: 14px; text-decoration: none; transition: all 200ms ease; }
.page-industries .cross-item:hover { background: rgba(255,255,255,0.09); color: var(--white); }
.page-industries .cross-item svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }
.page-industries .cross-arrow { margin-left: auto; color: rgba(255,255,255,0.3); }
.page-industries .cross-item:hover .cross-arrow { color: rgba(255,255,255,0.7); }
@media (max-width: 760px) {
.page-industries .cross-sell { grid-template-columns: 1fr; padding: var(--s8); }
}

/* ===== Page: /industries/logistics.html ===== */
.page-logistics .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-logistics .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-logistics .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-logistics .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-logistics .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-logistics .wf-step-row:last-child { border-bottom: none; }
.page-logistics .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-logistics .wf-num.blue { background: var(--blue); }
.page-logistics .wf-num.green { background: var(--green); }
.page-logistics .wf-num.amber { background: var(--amber); }
.page-logistics .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-logistics .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-logistics .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-logistics .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-logistics .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-logistics .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-logistics .comp-badge-icon svg { width: 22px; height: 22px; }
.page-logistics .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-logistics .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-logistics .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-logistics .compliance-grid { grid-template-columns: 1fr; }
}

/* ===== Page: /industries/real-estate.html ===== */
.page-real-estate .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-real-estate .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-real-estate .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-real-estate .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-real-estate .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-real-estate .wf-step-row:last-child { border-bottom: none; }
.page-real-estate .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-real-estate .wf-num.blue { background: var(--blue); }
.page-real-estate .wf-num.green { background: var(--green); }
.page-real-estate .wf-num.amber { background: var(--amber); }
.page-real-estate .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-real-estate .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-real-estate .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-real-estate .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-real-estate .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-real-estate .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-real-estate .comp-badge-icon svg { width: 22px; height: 22px; }
.page-real-estate .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-real-estate .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-real-estate .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-real-estate .compliance-grid { grid-template-columns: 1fr; }
}

/* ===== Page: /industries/retail.html ===== */
.page-retail .channel-badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.page-retail .ch-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: var(--r-full);
      border: 1px solid var(--border); background: var(--white);
      font-size: 12px; font-weight: 500; color: var(--gray-900);
    }
.page-retail .ch-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.page-retail .platform-logos {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3);
      margin-top: var(--s8);
    }
.page-retail .platform-chip {
      padding: var(--s4) var(--s5);
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--r-lg);
      font-size: 13px; font-weight: 600; color: var(--gray-700);
      text-align: center; transition: all 200ms ease;
    }
.page-retail .platform-chip:hover { border-color: var(--blue-border); color: var(--blue); }
@media (max-width: 600px) {
.page-retail .platform-logos { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Page: /industries/telecom.html ===== */
.page-telecom .workflow-demo {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
.page-telecom .wf-header {
      background: var(--black);
      padding: var(--s4) var(--s6);
      display: flex; align-items: center; gap: 10px;
    }
.page-telecom .wf-header-title { font-size: 13px; font-weight: 600; color: var(--white); }
.page-telecom .wf-header-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0,191,99,0.2); color: var(--green); border: 1px solid rgba(0,191,99,0.3); margin-left: auto; }
.page-telecom .wf-step-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px var(--s6);
      border-bottom: 1px solid var(--border);
    }
.page-telecom .wf-step-row:last-child { border-bottom: none; }
.page-telecom .wf-num {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--white);
    }
.page-telecom .wf-num.blue { background: var(--blue); }
.page-telecom .wf-num.green { background: var(--green); }
.page-telecom .wf-num.amber { background: var(--amber); }
.page-telecom .wf-step-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.page-telecom .wf-step-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.page-telecom .wf-step-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 3px; }
.page-telecom .compliance-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
    }
.page-telecom .comp-badge-card {
      padding: var(--s6);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    }
.page-telecom .comp-badge-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: var(--blue-bg); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
.page-telecom .comp-badge-icon svg { width: 22px; height: 22px; }
.page-telecom .comp-badge-name { font-size: 15px; font-weight: 700; color: var(--black); }
.page-telecom .comp-badge-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
@media (max-width: 760px) {
.page-telecom .compliance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.page-telecom .compliance-grid { grid-template-columns: 1fr; }
}

/* ===== Pages: /legal/privacy.html & /legal/terms.html ===== */
.page-privacy .legal-hero, .page-terms .legal-hero {background:var(--bg-alt);padding:var(--s16) 0 var(--s12);border-bottom:1px solid var(--border);}
.page-privacy .legal-hero-inner, .page-terms .legal-hero-inner {max-width:680px;}
.page-privacy .legal-hero h1, .page-terms .legal-hero h1 {font-size:clamp(26px,4vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--gray-900);margin-bottom:var(--s3);}
.page-privacy .legal-hero-sub, .page-terms .legal-hero-sub {color:var(--gray-700);font-size:16px;line-height:1.7;margin-top:var(--s3);}
.page-privacy .legal-hero-meta, .page-terms .legal-hero-meta {font-size:13px;color:var(--gray-500);margin-top:var(--s4);display:flex;gap:var(--s5);flex-wrap:wrap;}
.page-privacy .legal-hero .post-breadcrumb, .page-terms .legal-hero .post-breadcrumb {margin-bottom:var(--s5);font-size:13px;color:var(--gray-500);}
.page-privacy .legal-hero .post-breadcrumb a, .page-terms .legal-hero .post-breadcrumb a {color:var(--gray-600);text-decoration:none;}
.page-privacy .legal-hero .post-breadcrumb a:hover, .page-terms .legal-hero .post-breadcrumb a:hover {color:var(--blue);}
.page-privacy .legal-hero .post-breadcrumb .sep, .page-terms .legal-hero .post-breadcrumb .sep {margin:0 6px;color:var(--gray-400);}
.page-privacy .legal-hero .post-breadcrumb strong, .page-terms .legal-hero .post-breadcrumb strong {color:var(--gray-800);font-weight:600;}
.page-privacy .legal-layout, .page-terms .legal-layout {max-width:900px;margin:0 auto;padding:var(--s12) var(--s6) var(--s20);display:grid;grid-template-columns:220px 1fr;gap:var(--s10);align-items:start;}
@media(max-width:760px) {
.page-privacy .legal-layout, .page-terms .legal-layout {grid-template-columns:1fr;}
}
.page-privacy .legal-toc, .page-terms .legal-toc {position:sticky;top:100px;}
.page-privacy .legal-toc-title, .page-terms .legal-toc-title {font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-500);margin-bottom:var(--s4);}
.page-privacy .legal-toc a, .page-terms .legal-toc a {display:block;padding:6px 0 6px 12px;border-left:2px solid var(--border);color:var(--gray-600);font-size:13px;line-height:1.45;transition:all 150ms;text-decoration:none;margin-bottom:2px;}
.page-privacy .legal-toc a:hover, .page-terms .legal-toc a:hover {border-left-color:var(--blue);color:var(--blue);}
.page-privacy .legal-prose h2, .page-terms .legal-prose h2 {font-size:clamp(18px,2.5vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--gray-900);margin:var(--s10) 0 var(--s4);padding-top:var(--s4);border-top:1px solid var(--border);scroll-margin-top:100px;}
.page-privacy .legal-prose h2:first-child, .page-terms .legal-prose h2:first-child {border-top:none;margin-top:0;padding-top:0;}
.page-privacy .legal-prose h3, .page-terms .legal-prose h3 {font-size:16px;font-weight:700;color:var(--gray-900);margin:var(--s6) 0 var(--s3);}
.page-privacy .legal-prose p, .page-terms .legal-prose p {font-size:15px;color:var(--gray-700);line-height:1.8;margin-bottom:var(--s4);}
.page-privacy .legal-prose ul, .page-terms .legal-prose ul {padding-left:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5);}
.page-privacy .legal-prose ul li, .page-terms .legal-prose ul li {position:relative;padding-left:18px;font-size:14.5px;color:var(--gray-700);line-height:1.7;}
.page-privacy .legal-prose ul li::before, .page-terms .legal-prose ul li::before {content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--blue);}
.page-privacy .legal-prose ul li strong, .page-terms .legal-prose ul li strong {color:var(--gray-900);font-weight:700;}
.page-privacy .legal-prose a, .page-terms .legal-prose a {color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.page-privacy .legal-callout, .page-terms .legal-callout {background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r-lg);padding:var(--s5) var(--s6);margin:var(--s6) 0;font-size:14px;color:var(--gray-800);line-height:1.7;}
.page-privacy .legal-callout strong, .page-terms .legal-callout strong {color:var(--blue);font-weight:700;}
.page-privacy .legal-table, .page-terms .legal-table {width:100%;border-collapse:collapse;font-size:13.5px;margin:var(--s6) 0;}
.page-privacy .legal-table th, .page-terms .legal-table th {background:var(--bg-alt);padding:10px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-600);border-bottom:1px solid var(--border);}
.page-privacy .legal-table td, .page-terms .legal-table td {padding:10px 14px;border-bottom:1px solid var(--gray-100);color:var(--gray-700);vertical-align:top;line-height:1.6;}
.page-privacy .legal-table tr:last-child td, .page-terms .legal-table tr:last-child td {border-bottom:none;}
.page-privacy .last-updated, .page-terms .last-updated {display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gray-500);background:var(--bg-alt);border:1px solid var(--border);padding:4px 12px;border-radius:var(--r-full);margin-bottom:var(--s8);}

/* ===== Page: /roi.html ===== */
/* ── Calculator layout ── */
.page-roi .calc-grid { display:grid; grid-template-columns:1fr 420px; gap:var(--s8); align-items:start; }
@media(max-width:960px) {
.page-roi .calc-grid {grid-template-columns:1fr;}
}
/* ── Preset &amp; currency controls ── */
.page-roi .calc-controls { display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center; margin-top:var(--s10); margin-bottom:var(--s8); padding-top:var(--s8); border-top:1px solid var(--border); }
.page-roi .ctrl-group { display:flex; flex-direction:column; gap:var(--s2); }
.page-roi .ctrl-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-600); }
.page-roi .btn-group { display:flex; gap:var(--s1); flex-wrap:wrap; }
.page-roi .pill-btn { padding:6px 14px; border-radius:var(--r-full); border:1px solid var(--border); background:var(--white); font-size:12px; font-weight:600; color:var(--gray-700); cursor:pointer; transition:all 150ms ease; }
.page-roi .pill-btn:hover { border-color:var(--blue-border); color:var(--blue); background:var(--blue-bg); }
.page-roi .pill-btn.active { border-color:var(--blue); background:var(--blue); color:var(--white); }
/* ── Slider card ── */
.page-roi .slider-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s8); box-shadow:var(--shadow-sm); }
.page-roi .slider-card h3 { font-size:16px; font-weight:700; color:var(--black); margin-bottom:var(--s6); }
.page-roi .slider-row { margin-bottom:var(--s6); }
.page-roi .slider-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s2); }
.page-roi .slider-name { font-size:13.5px; font-weight:600; color:var(--gray-900); }
.page-roi .slider-val { font-size:14px; font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; min-width:80px; text-align:right; }
.page-roi .slider-hint { font-size:11.5px; color:var(--gray-500); margin-bottom:var(--s3); }
.page-roi input[type="range"] {
      -webkit-appearance:none; appearance:none;
      width:100%; height:4px; border-radius:2px;
      background:linear-gradient(90deg, var(--blue) 50%, var(--border) 50%);
      outline:none; cursor:pointer;
    }
.page-roi input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance:none; appearance:none;
      width:18px; height:18px; border-radius:50%;
      background:var(--white); border:2px solid var(--blue);
      box-shadow:0 1px 4px rgba(var(--blue-rgb),.25);
      cursor:pointer; transition:transform 150ms ease;
    }
.page-roi input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.2); }
.page-roi input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--white); border:2px solid var(--blue); box-shadow:0 1px 4px rgba(var(--blue-rgb),.25); cursor:pointer; }
.page-roi .slider-divider { border:none; border-top:1px solid var(--border); margin:var(--s5) 0; }
/* ── Results panel ── */
.page-roi .results-panel { display:flex; flex-direction:column; gap:var(--s4); position:sticky; top:130px; }
.page-roi .result-hero { background:var(--black); border-radius:var(--r-2xl); padding:var(--s8) var(--s6); color:var(--white); position:relative; overflow:hidden; }
.page-roi .result-hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse at center,black,transparent 70%); pointer-events:none; }
.page-roi .result-hero-inner { position:relative; z-index:1; }
.page-roi .result-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:var(--s2); }
.page-roi .result-big { font-size:clamp(40px,5vw,58px); font-weight:700; letter-spacing:-.04em; color:var(--white); line-height:1; transition:transform 180ms ease; }
.page-roi .result-big .suf { font-size:.55em; color:var(--green); }
.page-roi .result-sub { font-size:13px; color:rgba(255,255,255,.5); margin-top:var(--s2); }
.page-roi .result-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s4) var(--s5); background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); }
.page-roi .result-row-label { font-size:13px; color:var(--gray-700); }
.page-roi .result-row-val { font-size:16px; font-weight:700; color:var(--black); transition:transform 180ms ease; font-variant-numeric:tabular-nums; }
.page-roi .result-row-val.green-val { color:var(--green); }
/* ── Breakdown table ── */
.page-roi .breakdown { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; }
.page-roi .bk-head { background:var(--gray-50); padding:12px var(--s5); border-bottom:1px solid var(--border); }
.page-roi .bk-head-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-600); }
.page-roi .bk-row { display:grid; grid-template-columns:1fr auto auto; gap:var(--s3); padding:10px var(--s5); border-bottom:1px solid var(--border); align-items:center; font-size:13px; }
.page-roi .bk-row:last-child { border-bottom:none; }
.page-roi .bk-row-label { color:var(--gray-700); }
.page-roi .bk-row-before { color:var(--gray-500); font-size:12px; text-decoration:line-through; }
.page-roi .bk-row-after { color:var(--black); font-weight:600; }
.page-roi .bk-total { background:rgba(0,191,99,.04); border-top:2px solid var(--border); }
.page-roi .bk-total .bk-row-label { font-weight:700; color:var(--black); }
.page-roi .bk-total .bk-row-after { color:var(--green); font-size:14px; }
/* ── Payback bar ── */
.page-roi .payback-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s6); }
.page-roi .payback-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-600); margin-bottom:var(--s3); }
.page-roi .payback-num { font-size:28px; font-weight:700; color:var(--black); letter-spacing:-.03em; margin-bottom:var(--s3); }
.page-roi .pb-track { width:100%; height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:var(--s3); }
.page-roi .pb-bar { height:100%; background:linear-gradient(90deg, var(--green), var(--blue)); border-radius:3px; transition:width 300ms ease; width:60%; }
.page-roi .pb-caption { font-size:12.5px; color:var(--gray-600); line-height:1.55; }
/* ── Methodology note ── */
.page-roi .methodology { background:var(--gray-50); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s6); }
.page-roi .methodology h4 { font-size:13px; font-weight:700; color:var(--black); margin-bottom:var(--s3); }
.page-roi .methodology p { font-size:12.5px; color:var(--gray-600); line-height:1.65; }
/* ── Social proof ── */
.page-roi .proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.page-roi .proof-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s6); text-align:center; }
.page-roi .proof-num { font-size:clamp(28px,3vw,40px); font-weight:700; letter-spacing:-.03em; color:var(--black); line-height:1; }
.page-roi .proof-num .suf { color:var(--blue); }
.page-roi .proof-label { font-size:12px; color:var(--gray-600); margin-top:var(--s2); line-height:1.4; }
@media(max-width:640px) {
.page-roi .proof-grid {grid-template-columns:1fr;}
}

/* ===== Page: /security.html ===== */
/* ── Anchor nav ── */
.page-security .anchor-nav { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:68px; z-index:99; }
.page-security .anchor-nav-inner { display:flex; gap:0; overflow-x:auto; max-width:1100px; margin:0 auto; padding:0 var(--s6); }
.page-security .anchor-btn { padding:14px 18px; font-size:13px; font-weight:500; color:var(--gray-600); border:none; background:none; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; transition:all 150ms ease; }
.page-security .anchor-btn:hover { color:var(--black); }
.page-security .anchor-btn.active { color:var(--blue); border-bottom-color:var(--blue); font-weight:600; }
/* ── Sovereignty grid ── */
.page-security .sov-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.page-security .sov-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s8) var(--s6); position:relative; overflow:hidden; }
.page-security .sov-card.featured { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue-border), var(--shadow-md); }
.page-security .sov-card.featured::before { content:'Primary'; position:absolute; top:var(--s4); right:var(--s4); background:var(--blue); color:var(--white); font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--r-full); letter-spacing:.06em; text-transform:uppercase; }
.page-security .sov-flag { width:48px; height:32px; margin-bottom:var(--s4); border-radius:3px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.08); display:block; }
.page-security .sov-flag svg { width:100%; height:100%; display:block; }
.page-security .sov-card h3 { font-size:16px; font-weight:700; color:var(--black); margin-bottom:var(--s2); }
.page-security .sov-card p { font-size:13px; color:var(--gray-600); line-height:1.6; margin-bottom:var(--s4); }
.page-security .sov-detail { display:block; font-size:11px; color:var(--gray-500); background:var(--gray-50); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s3) var(--s4); line-height:1.6; }
@media(max-width:760px) {
.page-security .sov-grid {grid-template-columns:1fr;}
}
/* ── Deploy cards ── */
.page-security .deploy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.page-security .deploy-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s8) var(--s6); }
.page-security .deploy-card.featured { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue-border), var(--shadow-md); position:relative; }
.page-security .deploy-card.featured::before { content:'Most common'; position:absolute; top:var(--s4); right:var(--s4); background:var(--blue); color:var(--white); font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--r-full); letter-spacing:.06em; text-transform:uppercase; }
.page-security .deploy-icon { width:48px; height:48px; border-radius:var(--r-md); background:var(--blue-bg); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s5); }
.page-security .deploy-icon svg { width:24px; height:24px; color:var(--blue); }
.page-security .deploy-card h3 { font-size:17px; font-weight:700; color:var(--black); margin-bottom:var(--s2); }
.page-security .deploy-card > p { font-size:14px; color:var(--gray-600); line-height:1.6; margin-bottom:var(--s5); }
.page-security .deploy-features { list-style:none; display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s6); }
.page-security .deploy-features li { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--gray-700); }
.page-security .deploy-features li .ico { color:var(--green); font-weight:700; flex-shrink:0; }
.page-security .deploy-footer { font-size:12px; color:var(--gray-600); background:var(--gray-50); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s3) var(--s4); }
@media(max-width:900px) {
.page-security .deploy-grid {grid-template-columns:1fr;}
}
/* ── Infra stats ── */
.page-security .infra-stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; margin-top:var(--s6); background:var(--white); }
.page-security .infra-stat { padding:var(--s6) var(--s5); border-right:1px solid var(--border); text-align:center; }
.page-security .infra-stat:last-child { border-right:none; }
.page-security .infra-stat-num { font-size:clamp(24px,2.5vw,34px); font-weight:700; letter-spacing:-.03em; color:var(--blue); line-height:1; }
.page-security .infra-stat-lbl { font-size:12px; color:var(--gray-600); margin-top:var(--s1); }
@media(max-width:640px) {
.page-security .infra-stats {grid-template-columns:repeat(2,1fr);}
.page-security .infra-stat:nth-child(2) {border-right:none;}
.page-security .infra-stat:nth-child(1), .page-security .infra-stat:nth-child(2) {border-bottom:1px solid var(--border);}
}
/* ── Data architecture ── */
.page-security .arch-table { border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:var(--white); }
.page-security .arch-row { display:grid; grid-template-columns:120px 1fr; border-bottom:1px solid var(--border); }
.page-security .arch-row:last-child { border-bottom:none; }
.page-security .arch-label { padding:var(--s5) var(--s5); background:var(--gray-50); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.page-security .arch-label-icon { width:18px; height:18px; display:inline-flex; color:var(--gray-700); }
.page-security .arch-label-icon svg { width:100%; height:100%; }
.page-security .arch-label-text { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-600); }
.page-security .arch-content { padding:var(--s4) var(--s5); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.page-security .arch-node { padding:5px 12px; background:var(--gray-50); border:1px solid var(--border); border-radius:var(--r-md); font-size:12.5px; color:var(--gray-900); white-space:nowrap; }
.page-security .arch-node.blue { background:var(--blue-bg); border-color:var(--blue-border); color:var(--blue); font-weight:600; }
.page-security .arch-node.green { background:rgba(0,191,99,.06); border-color:rgba(0,191,99,.2); color:#006b37; font-weight:600; }
.page-security .arch-node.red { background:rgba(220,38,38,.05); border-color:rgba(220,38,38,.15); color:var(--red); }
.page-security .arch-node.dark { background:var(--black); border-color:var(--black); color:var(--white); }
.page-security .arch-arrow { font-size:14px; color:var(--gray-400); }
.page-security .arch-tag { font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--r-full); }
.page-security .arch-tag.green { background:rgba(0,191,99,.1); border:1px solid rgba(0,191,99,.2); color:#006b37; }
@media(max-width:600px) {
.page-security .arch-row {grid-template-columns:1fr;}
.page-security .arch-label {border-right:none;border-bottom:1px solid var(--border);flex-direction:row;align-items:center;}
}
/* ── Tenant isolation ── */
.page-security .isolation-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:var(--white); margin-top:var(--s6); }
.page-security .iso-cell { padding:var(--s6); border-right:1px solid var(--border); }
.page-security .iso-cell:last-child { border-right:none; }
.page-security .iso-icon { width:40px; height:40px; border-radius:var(--r-md); background:var(--blue-bg); color:var(--blue); display:inline-flex; align-items:center; justify-content:center; margin-bottom:var(--s3); }
.page-security .iso-icon svg { width:22px; height:22px; }
.page-security .iso-title { font-size:14px; font-weight:700; color:var(--black); margin-bottom:var(--s2); }
.page-security .iso-desc { font-size:13px; color:var(--gray-600); line-height:1.6; }
@media(max-width:760px) {
.page-security .isolation-grid {grid-template-columns:1fr;}
.page-security .iso-cell {border-right:none;border-bottom:1px solid var(--border);}
.page-security .iso-cell:last-child {border-bottom:none;}
}
/* ── Cert cards ── */
.page-security .cert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.page-security .cert-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s6); }
.page-security .cert-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s4); }
.page-security .cert-badge { width:40px; height:40px; border-radius:var(--r-md); background:var(--blue-bg); color:var(--blue); display:inline-flex; align-items:center; justify-content:center; }
.page-security .cert-badge svg { width:22px; height:22px; }
.page-security .cert-badge.flag { background:transparent; padding:0; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.page-security .cert-badge.flag svg { width:100%; height:100%; }
.page-security .cert-status { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-full); }
.page-security .cert-status.active { background:rgba(0,191,99,.1); color:#006b37; border:1px solid rgba(0,191,99,.2); }
.page-security .cert-status.aligned { background:var(--blue-bg); color:var(--blue); border:1px solid var(--blue-border); }
.page-security .cert-status.planned { background:rgba(217,119,6,.08); color:var(--amber); border:1px solid rgba(217,119,6,.2); }
.page-security .cert-card h3 { font-size:14.5px; font-weight:700; color:var(--black); margin-bottom:var(--s2); }
.page-security .cert-card p { font-size:13px; color:var(--gray-600); line-height:1.6; margin-bottom:var(--s3); }
.page-security .cert-scope { font-size:11px; color:var(--gray-500); background:var(--gray-50); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s2) var(--s3); }
@media(max-width:900px) {
.page-security .cert-grid {grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px) {
.page-security .cert-grid {grid-template-columns:1fr;}
}
/* ── Specs table ── */
.page-security .specs-table { width:100%; border-collapse:collapse; font-size:13px; }
.page-security .specs-table thead tr { border-bottom:2px solid var(--border); }
.page-security .specs-table th { text-align:left; padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-600); }
.page-security .specs-table td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.page-security .specs-table tr:last-child td { border-bottom:none; }
.page-security .specs-table tr:hover td { background:var(--gray-50); }
.page-security .spec-val { font-family:monospace; font-size:12px; background:var(--blue-bg); border:1px solid var(--blue-border); border-radius:var(--r-sm); padding:2px 8px; color:var(--blue); font-weight:600; }
.page-security .spec-note { font-size:12px; color:var(--gray-500); }
/* ── Access controls ── */
.page-security .access-list { border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:var(--white); }
.page-security .access-item { display:flex; align-items:flex-start; gap:14px; padding:14px var(--s5); border-bottom:1px solid var(--border); }
.page-security .access-item:last-child { border-bottom:none; }
.page-security .access-check { color:var(--green); font-weight:700; flex-shrink:0; margin-top:2px; }
.page-security .access-title { font-size:13.5px; font-weight:600; color:var(--black); margin-bottom:2px; }
.page-security .access-sub { font-size:12px; color:var(--gray-600); line-height:1.5; }
/* ── Audit demo ── */
.page-security .audit-demo { border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:var(--white); }
.page-security .audit-head { padding:14px var(--s5); border-bottom:1px solid var(--border); background:var(--gray-50); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.page-security .audit-head-title { font-size:13px; font-weight:700; color:var(--black); }
.page-security .audit-filters { display:flex; gap:6px; }
.page-security .audit-filter { font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--r-md); border:1px solid var(--border); color:var(--gray-600); background:var(--white); cursor:pointer; }
.page-security .audit-filter.active { background:var(--black); color:var(--white); border-color:var(--black); }
.page-security .audit-cols { display:grid; grid-template-columns:150px 130px 1fr 90px 110px; padding:8px var(--s5); background:var(--gray-50); border-bottom:1px solid var(--border); }
.page-security .audit-cols span { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-600); }
.page-security .audit-row { display:grid; grid-template-columns:150px 130px 1fr 90px 110px; padding:11px var(--s5); border-bottom:1px solid var(--border); transition:background 120ms ease; align-items:center; }
.page-security .audit-row:last-child { border-bottom:none; }
.page-security .audit-row:hover { background:var(--gray-50); }
.page-security .audit-ts { font-family:monospace; font-size:11px; color:var(--gray-500); }
.page-security .audit-actor { font-size:12px; font-weight:600; color:var(--gray-900); }
.page-security .audit-action { font-size:12.5px; color:var(--gray-700); }
.page-security .audit-ch { font-size:11px; font-weight:600; color:var(--gray-600); }
.page-security .audit-result { font-size:11px; font-weight:700; padding:3px 8px; border-radius:var(--r-full); }
.page-security .r-resolved { background:rgba(0,191,99,.1); color:#006b37; }
.page-security .r-escalated { background:rgba(217,119,6,.1); color:var(--amber); }
.page-security .r-blocked { background:rgba(220,38,38,.08); color:var(--red); }
.page-security .r-admin { background:var(--blue-bg); color:var(--blue); }
@media(max-width:860px) {
.page-security .audit-cols, .page-security .audit-row {grid-template-columns:1fr 1fr;}
}
@media(max-width:560px) {
.page-security .audit-cols {display:none;}
.page-security .audit-row {grid-template-columns:1fr; gap:4px;}
}
/* ── Industry compliance ── */
.page-security .ind-comp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
.page-security .ind-comp-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s5) var(--s4); text-align:center; }
.page-security .ind-comp-card h4 { font-size:13px; font-weight:700; color:var(--black); margin-bottom:var(--s2); }
.page-security .ind-comp-card p { font-size:12px; color:var(--gray-600); line-height:1.5; margin-bottom:var(--s3); }
.page-security .ind-comp-tags { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.page-security .ind-comp-tag { font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--r-full); background:var(--blue-bg); color:var(--blue); border:1px solid var(--blue-border); }
@media(max-width:900px) {
.page-security .ind-comp-grid {grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px) {
.page-security .ind-comp-grid {grid-template-columns:1fr;}
}

/* ===== Page: /solutions/education.html ===== */
/* ── Solutions shared additions (scoped, no eshal.css overrides) ── */
.page-solutions-education .ba-wrap {display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s6);align-items:stretch;}
.page-solutions-education .ba-col {border-radius:var(--r-xl);padding:var(--s8) var(--s6);}
.page-solutions-education .ba-before {background:rgba(220,38,38,.04);border:1px solid rgba(220,38,38,.12);}
.page-solutions-education .ba-after {background:rgba(0,191,99,.04);border:1px solid rgba(0,191,99,.15);}
.page-solutions-education .ba-label {font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s5);}
.page-solutions-education .ba-before .ba-label {color:var(--red);}
.page-solutions-education .ba-after .ba-label {color:#006b37;}
.page-solutions-education .ba-item {display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:14px;line-height:1.55;color:var(--gray-900);}
.page-solutions-education .ba-item:last-child {border-bottom:none;}
.page-solutions-education .ba-dot {width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.page-solutions-education .ba-before .ba-dot {background:var(--red);}
.page-solutions-education .ba-after .ba-dot {background:var(--green);}
.page-solutions-education .ba-divider {display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:200;color:var(--blue);padding-top:96px;}
.page-solutions-education .roi-strip {display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:center;padding:var(--s10) var(--s12);background:var(--white);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-sm);margin-top:var(--s12);}
.page-solutions-education .roi-block {text-align:center;padding:0 var(--s4);}
.page-solutions-education .roi-num {font-size:clamp(32px,3.5vw,48px);font-weight:700;letter-spacing:-.03em;color:var(--black);line-height:1;}
.page-solutions-education .roi-num .suf {color:var(--blue);}
.page-solutions-education .roi-lbl {font-size:12px;color:var(--gray-600);margin-top:var(--s1);line-height:1.4;max-width:110px;margin-left:auto;margin-right:auto;}
.page-solutions-education .roi-op {font-size:36px;font-weight:200;color:var(--gray-300);line-height:1;}
.page-solutions-education .roi-result .roi-num {color:var(--green);}
.page-solutions-education .wf-card {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);}
.page-solutions-education .wf-card-hd {background:var(--black);padding:var(--s4) var(--s6);display:flex;align-items:center;gap:10px;}
.page-solutions-education .wf-card-title {font-size:13px;font-weight:600;color:var(--white);}
.page-solutions-education .wf-card-badge {font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);background:rgba(0,191,99,.2);color:var(--green);border:1px solid rgba(0,191,99,.3);margin-left:auto;}
.page-solutions-education .wf-row {display:flex;align-items:flex-start;gap:14px;padding:13px var(--s6);border-bottom:1px solid var(--border);}
.page-solutions-education .wf-row:last-child {border-bottom:none;}
.page-solutions-education .wf-n {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:var(--white);}
.page-solutions-education .wf-n.b {background:var(--blue);}
.page-solutions-education .wf-n.g {background:var(--green);}
.page-solutions-education .wf-n.a {background:var(--amber);}
.page-solutions-education .wf-t {font-size:13.5px;font-weight:600;color:var(--black);margin-bottom:2px;}
.page-solutions-education .wf-s {font-size:12px;color:var(--gray-600);line-height:1.5;}
.page-solutions-education .wf-time {margin-left:auto;font-size:11px;font-weight:700;color:var(--blue);white-space:nowrap;padding-top:3px;flex-shrink:0;}
.page-solutions-education .split-testimonial {display:grid;grid-template-columns:1fr 260px;background:var(--black);border-radius:var(--r-2xl);overflow:hidden;}
.page-solutions-education .st-q {padding:var(--s10) var(--s10);position:relative;}
.page-solutions-education .st-q::before {content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at center,black,transparent 70%);pointer-events:none;}
.page-solutions-education .st-qi {position:relative;z-index:1;}
.page-solutions-education .st-mark {font-size:72px;font-family:Georgia,serif;color:rgba(255,255,255,.08);line-height:.5;margin-bottom:var(--s5);}
.page-solutions-education .st-text {font-size:clamp(15px,1.7vw,19px);font-weight:500;line-height:1.7;color:var(--white);letter-spacing:-.01em;margin-bottom:var(--s6);}
.page-solutions-education .st-who {display:flex;align-items:center;gap:var(--s4);}
.page-solutions-education .st-av {width:44px;height:44px;border-radius:50%;background:rgba(var(--blue-rgb),.3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:rgba(120,140,255,1);flex-shrink:0;}
.page-solutions-education .st-name {font-size:14px;font-weight:600;color:var(--white);}
.page-solutions-education .st-role {font-size:12px;color:rgba(255,255,255,.45);margin-top:2px;}
.page-solutions-education .st-nums {display:flex;flex-direction:column;justify-content:center;gap:var(--s6);padding:var(--s10) var(--s8);background:rgba(255,255,255,.04);border-left:1px solid rgba(255,255,255,.08);}
.page-solutions-education .st-n {font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--white);line-height:1;}
.page-solutions-education .st-n .suf {color:var(--green);}
.page-solutions-education .st-nl {font-size:12px;color:rgba(255,255,255,.45);margin-top:3px;line-height:1.4;}
.page-solutions-education .stack-logos {display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s8);}
.page-solutions-education .stack-chip {padding:var(--s4) var(--s4);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);font-size:12.5px;font-weight:600;color:var(--gray-700);text-align:center;transition:all 200ms ease;}
.page-solutions-education .stack-chip:hover {border-color:var(--blue-border);color:var(--blue);}
@media(max-width:860px) {
.page-solutions-education .ba-wrap {grid-template-columns:1fr;}
.page-solutions-education .ba-divider {padding:var(--s3) 0;font-size:20px;}
.page-solutions-education .split-testimonial {grid-template-columns:1fr;}
.page-solutions-education .st-nums {flex-direction:row;border-left:none;border-top:1px solid rgba(255,255,255,.08);padding:var(--s6) var(--s8);}
.page-solutions-education .roi-strip {padding:var(--s8) var(--s6);}
.page-solutions-education .roi-op {display:none;}
.page-solutions-education .stack-logos {grid-template-columns:repeat(2,1fr);}
}

/* ===== Page: /solutions/finance.html ===== */
/* ── Solutions shared additions (scoped, no eshal.css overrides) ── */
.page-solutions-finance .ba-wrap {display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s6);align-items:stretch;}
.page-solutions-finance .ba-col {border-radius:var(--r-xl);padding:var(--s8) var(--s6);}
.page-solutions-finance .ba-before {background:rgba(220,38,38,.04);border:1px solid rgba(220,38,38,.12);}
.page-solutions-finance .ba-after {background:rgba(0,191,99,.04);border:1px solid rgba(0,191,99,.15);}
.page-solutions-finance .ba-label {font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s5);}
.page-solutions-finance .ba-before .ba-label {color:var(--red);}
.page-solutions-finance .ba-after .ba-label {color:#006b37;}
.page-solutions-finance .ba-item {display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:14px;line-height:1.55;color:var(--gray-900);}
.page-solutions-finance .ba-item:last-child {border-bottom:none;}
.page-solutions-finance .ba-dot {width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.page-solutions-finance .ba-before .ba-dot {background:var(--red);}
.page-solutions-finance .ba-after .ba-dot {background:var(--green);}
.page-solutions-finance .ba-divider {display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:200;color:var(--blue);padding-top:96px;}
.page-solutions-finance .roi-strip {display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:center;padding:var(--s10) var(--s12);background:var(--white);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-sm);margin-top:var(--s12);}
.page-solutions-finance .roi-block {text-align:center;padding:0 var(--s4);}
.page-solutions-finance .roi-num {font-size:clamp(32px,3.5vw,48px);font-weight:700;letter-spacing:-.03em;color:var(--black);line-height:1;}
.page-solutions-finance .roi-num .suf {color:var(--blue);}
.page-solutions-finance .roi-lbl {font-size:12px;color:var(--gray-600);margin-top:var(--s1);line-height:1.4;max-width:110px;margin-left:auto;margin-right:auto;}
.page-solutions-finance .roi-op {font-size:36px;font-weight:200;color:var(--gray-300);line-height:1;}
.page-solutions-finance .roi-result .roi-num {color:var(--green);}
.page-solutions-finance .wf-card {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);}
.page-solutions-finance .wf-card-hd {background:var(--black);padding:var(--s4) var(--s6);display:flex;align-items:center;gap:10px;}
.page-solutions-finance .wf-card-title {font-size:13px;font-weight:600;color:var(--white);}
.page-solutions-finance .wf-card-badge {font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);background:rgba(0,191,99,.2);color:var(--green);border:1px solid rgba(0,191,99,.3);margin-left:auto;}
.page-solutions-finance .wf-row {display:flex;align-items:flex-start;gap:14px;padding:13px var(--s6);border-bottom:1px solid var(--border);}
.page-solutions-finance .wf-row:last-child {border-bottom:none;}
.page-solutions-finance .wf-n {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:var(--white);}
.page-solutions-finance .wf-n.b {background:var(--blue);}
.page-solutions-finance .wf-n.g {background:var(--green);}
.page-solutions-finance .wf-n.a {background:var(--amber);}
.page-solutions-finance .wf-t {font-size:13.5px;font-weight:600;color:var(--black);margin-bottom:2px;}
.page-solutions-finance .wf-s {font-size:12px;color:var(--gray-600);line-height:1.5;}
.page-solutions-finance .wf-time {margin-left:auto;font-size:11px;font-weight:700;color:var(--blue);white-space:nowrap;padding-top:3px;flex-shrink:0;}
.page-solutions-finance .split-testimonial {display:grid;grid-template-columns:1fr 260px;background:var(--black);border-radius:var(--r-2xl);overflow:hidden;}
.page-solutions-finance .st-q {padding:var(--s10) var(--s10);position:relative;}
.page-solutions-finance .st-q::before {content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at center,black,transparent 70%);pointer-events:none;}
.page-solutions-finance .st-qi {position:relative;z-index:1;}
.page-solutions-finance .st-mark {font-size:72px;font-family:Georgia,serif;color:rgba(255,255,255,.08);line-height:.5;margin-bottom:var(--s5);}
.page-solutions-finance .st-text {font-size:clamp(15px,1.7vw,19px);font-weight:500;line-height:1.7;color:var(--white);letter-spacing:-.01em;margin-bottom:var(--s6);}
.page-solutions-finance .st-who {display:flex;align-items:center;gap:var(--s4);}
.page-solutions-finance .st-av {width:44px;height:44px;border-radius:50%;background:rgba(var(--blue-rgb),.3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:rgba(120,140,255,1);flex-shrink:0;}
.page-solutions-finance .st-name {font-size:14px;font-weight:600;color:var(--white);}
.page-solutions-finance .st-role {font-size:12px;color:rgba(255,255,255,.45);margin-top:2px;}
.page-solutions-finance .st-nums {display:flex;flex-direction:column;justify-content:center;gap:var(--s6);padding:var(--s10) var(--s8);background:rgba(255,255,255,.04);border-left:1px solid rgba(255,255,255,.08);}
.page-solutions-finance .st-n {font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--white);line-height:1;}
.page-solutions-finance .st-n .suf {color:var(--green);}
.page-solutions-finance .st-nl {font-size:12px;color:rgba(255,255,255,.45);margin-top:3px;line-height:1.4;}
.page-solutions-finance .stack-logos {display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s8);}
.page-solutions-finance .stack-chip {padding:var(--s4) var(--s4);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);font-size:12.5px;font-weight:600;color:var(--gray-700);text-align:center;transition:all 200ms ease;}
.page-solutions-finance .stack-chip:hover {border-color:var(--blue-border);color:var(--blue);}
@media(max-width:860px) {
.page-solutions-finance .ba-wrap {grid-template-columns:1fr;}
.page-solutions-finance .ba-divider {padding:var(--s3) 0;font-size:20px;}
.page-solutions-finance .split-testimonial {grid-template-columns:1fr;}
.page-solutions-finance .st-nums {flex-direction:row;border-left:none;border-top:1px solid rgba(255,255,255,.08);padding:var(--s6) var(--s8);}
.page-solutions-finance .roi-strip {padding:var(--s8) var(--s6);}
.page-solutions-finance .roi-op {display:none;}
.page-solutions-finance .stack-logos {grid-template-columns:repeat(2,1fr);}
}

/* ===== Page: /solutions/government.html ===== */
/* ── Solutions shared additions (scoped, no eshal.css overrides) ── */
.page-solutions-government .ba-wrap {display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s6);align-items:stretch;}
.page-solutions-government .ba-col {border-radius:var(--r-xl);padding:var(--s8) var(--s6);}
.page-solutions-government .ba-before {background:rgba(220,38,38,.04);border:1px solid rgba(220,38,38,.12);}
.page-solutions-government .ba-after {background:rgba(0,191,99,.04);border:1px solid rgba(0,191,99,.15);}
.page-solutions-government .ba-label {font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s5);}
.page-solutions-government .ba-before .ba-label {color:var(--red);}
.page-solutions-government .ba-after .ba-label {color:#006b37;}
.page-solutions-government .ba-item {display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:14px;line-height:1.55;color:var(--gray-900);}
.page-solutions-government .ba-item:last-child {border-bottom:none;}
.page-solutions-government .ba-dot {width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.page-solutions-government .ba-before .ba-dot {background:var(--red);}
.page-solutions-government .ba-after .ba-dot {background:var(--green);}
.page-solutions-government .ba-divider {display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:200;color:var(--blue);padding-top:96px;}
.page-solutions-government .roi-strip {display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:center;padding:var(--s10) var(--s12);background:var(--white);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-sm);margin-top:var(--s12);}
.page-solutions-government .roi-block {text-align:center;padding:0 var(--s4);}
.page-solutions-government .roi-num {font-size:clamp(32px,3.5vw,48px);font-weight:700;letter-spacing:-.03em;color:var(--black);line-height:1;}
.page-solutions-government .roi-num .suf {color:var(--blue);}
.page-solutions-government .roi-lbl {font-size:12px;color:var(--gray-600);margin-top:var(--s1);line-height:1.4;max-width:110px;margin-left:auto;margin-right:auto;}
.page-solutions-government .roi-op {font-size:36px;font-weight:200;color:var(--gray-300);line-height:1;}
.page-solutions-government .roi-result .roi-num {color:var(--green);}
.page-solutions-government .wf-card {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);}
.page-solutions-government .wf-card-hd {background:var(--black);padding:var(--s4) var(--s6);display:flex;align-items:center;gap:10px;}
.page-solutions-government .wf-card-title {font-size:13px;font-weight:600;color:var(--white);}
.page-solutions-government .wf-card-badge {font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);background:rgba(0,191,99,.2);color:var(--green);border:1px solid rgba(0,191,99,.3);margin-left:auto;}
.page-solutions-government .wf-row {display:flex;align-items:flex-start;gap:14px;padding:13px var(--s6);border-bottom:1px solid var(--border);}
.page-solutions-government .wf-row:last-child {border-bottom:none;}
.page-solutions-government .wf-n {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:var(--white);}
.page-solutions-government .wf-n.b {background:var(--blue);}
.page-solutions-government .wf-n.g {background:var(--green);}
.page-solutions-government .wf-n.a {background:var(--amber);}
.page-solutions-government .wf-t {font-size:13.5px;font-weight:600;color:var(--black);margin-bottom:2px;}
.page-solutions-government .wf-s {font-size:12px;color:var(--gray-600);line-height:1.5;}
.page-solutions-government .wf-time {margin-left:auto;font-size:11px;font-weight:700;color:var(--blue);white-space:nowrap;padding-top:3px;flex-shrink:0;}
.page-solutions-government .split-testimonial {display:grid;grid-template-columns:1fr 260px;background:var(--black);border-radius:var(--r-2xl);overflow:hidden;}
.page-solutions-government .st-q {padding:var(--s10) var(--s10);position:relative;}
.page-solutions-government .st-q::before {content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at center,black,transparent 70%);pointer-events:none;}
.page-solutions-government .st-qi {position:relative;z-index:1;}
.page-solutions-government .st-mark {font-size:72px;font-family:Georgia,serif;color:rgba(255,255,255,.08);line-height:.5;margin-bottom:var(--s5);}
.page-solutions-government .st-text {font-size:clamp(15px,1.7vw,19px);font-weight:500;line-height:1.7;color:var(--white);letter-spacing:-.01em;margin-bottom:var(--s6);}
.page-solutions-government .st-who {display:flex;align-items:center;gap:var(--s4);}
.page-solutions-government .st-av {width:44px;height:44px;border-radius:50%;background:rgba(var(--blue-rgb),.3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:rgba(120,140,255,1);flex-shrink:0;}
.page-solutions-government .st-name {font-size:14px;font-weight:600;color:var(--white);}
.page-solutions-government .st-role {font-size:12px;color:rgba(255,255,255,.45);margin-top:2px;}
.page-solutions-government .st-nums {display:flex;flex-direction:column;justify-content:center;gap:var(--s6);padding:var(--s10) var(--s8);background:rgba(255,255,255,.04);border-left:1px solid rgba(255,255,255,.08);}
.page-solutions-government .st-n {font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--white);line-height:1;}
.page-solutions-government .st-n .suf {color:var(--green);}
.page-solutions-government .st-nl {font-size:12px;color:rgba(255,255,255,.45);margin-top:3px;line-height:1.4;}
.page-solutions-government .stack-logos {display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s8);}
.page-solutions-government .stack-chip {padding:var(--s4) var(--s4);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);font-size:12.5px;font-weight:600;color:var(--gray-700);text-align:center;transition:all 200ms ease;}
.page-solutions-government .stack-chip:hover {border-color:var(--blue-border);color:var(--blue);}
@media(max-width:860px) {
.page-solutions-government .ba-wrap {grid-template-columns:1fr;}
.page-solutions-government .ba-divider {padding:var(--s3) 0;font-size:20px;}
.page-solutions-government .split-testimonial {grid-template-columns:1fr;}
.page-solutions-government .st-nums {flex-direction:row;border-left:none;border-top:1px solid rgba(255,255,255,.08);padding:var(--s6) var(--s8);}
.page-solutions-government .roi-strip {padding:var(--s8) var(--s6);}
.page-solutions-government .roi-op {display:none;}
.page-solutions-government .stack-logos {grid-template-columns:repeat(2,1fr);}
}

/* ===== Page: /solutions/hr.html ===== */
/* ── Solutions shared additions (scoped, no eshal.css overrides) ── */
.page-solutions-hr .ba-wrap {display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s6);align-items:stretch;}
.page-solutions-hr .ba-col {border-radius:var(--r-xl);padding:var(--s8) var(--s6);}
.page-solutions-hr .ba-before {background:rgba(220,38,38,.04);border:1px solid rgba(220,38,38,.12);}
.page-solutions-hr .ba-after {background:rgba(0,191,99,.04);border:1px solid rgba(0,191,99,.15);}
.page-solutions-hr .ba-label {font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s5);}
.page-solutions-hr .ba-before .ba-label {color:var(--red);}
.page-solutions-hr .ba-after .ba-label {color:#006b37;}
.page-solutions-hr .ba-item {display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:14px;line-height:1.55;color:var(--gray-900);}
.page-solutions-hr .ba-item:last-child {border-bottom:none;}
.page-solutions-hr .ba-dot {width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.page-solutions-hr .ba-before .ba-dot {background:var(--red);}
.page-solutions-hr .ba-after .ba-dot {background:var(--green);}
.page-solutions-hr .ba-divider {display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:200;color:var(--blue);padding-top:96px;}
.page-solutions-hr .roi-strip {display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:center;padding:var(--s10) var(--s12);background:var(--white);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-sm);margin-top:var(--s12);}
.page-solutions-hr .roi-block {text-align:center;padding:0 var(--s4);}
.page-solutions-hr .roi-num {font-size:clamp(32px,3.5vw,48px);font-weight:700;letter-spacing:-.03em;color:var(--black);line-height:1;}
.page-solutions-hr .roi-num .suf {color:var(--blue);}
.page-solutions-hr .roi-lbl {font-size:12px;color:var(--gray-600);margin-top:var(--s1);line-height:1.4;max-width:110px;margin-left:auto;margin-right:auto;}
.page-solutions-hr .roi-op {font-size:36px;font-weight:200;color:var(--gray-300);line-height:1;}
.page-solutions-hr .roi-result .roi-num {color:var(--green);}
.page-solutions-hr .wf-card {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);}
.page-solutions-hr .wf-card-hd {background:var(--black);padding:var(--s4) var(--s6);display:flex;align-items:center;gap:10px;}
.page-solutions-hr .wf-card-title {font-size:13px;font-weight:600;color:var(--white);}
.page-solutions-hr .wf-card-badge {font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);background:rgba(0,191,99,.2);color:var(--green);border:1px solid rgba(0,191,99,.3);margin-left:auto;}
.page-solutions-hr .wf-row {display:flex;align-items:flex-start;gap:14px;padding:13px var(--s6);border-bottom:1px solid var(--border);}
.page-solutions-hr .wf-row:last-child {border-bottom:none;}
.page-solutions-hr .wf-n {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:var(--white);}
.page-solutions-hr .wf-n.b {background:var(--blue);}
.page-solutions-hr .wf-n.g {background:var(--green);}
.page-solutions-hr .wf-n.a {background:var(--amber);}
.page-solutions-hr .wf-t {font-size:13.5px;font-weight:600;color:var(--black);margin-bottom:2px;}
.page-solutions-hr .wf-s {font-size:12px;color:var(--gray-600);line-height:1.5;}
.page-solutions-hr .wf-time {margin-left:auto;font-size:11px;font-weight:700;color:var(--blue);white-space:nowrap;padding-top:3px;flex-shrink:0;}
.page-solutions-hr .split-testimonial {display:grid;grid-template-columns:1fr 260px;background:var(--black);border-radius:var(--r-2xl);overflow:hidden;}
.page-solutions-hr .st-q {padding:var(--s10) var(--s10);position:relative;}
.page-solutions-hr .st-q::before {content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at center,black,transparent 70%);pointer-events:none;}
.page-solutions-hr .st-qi {position:relative;z-index:1;}
.page-solutions-hr .st-mark {font-size:72px;font-family:Georgia,serif;color:rgba(255,255,255,.08);line-height:.5;margin-bottom:var(--s5);}
.page-solutions-hr .st-text {font-size:clamp(15px,1.7vw,19px);font-weight:500;line-height:1.7;color:var(--white);letter-spacing:-.01em;margin-bottom:var(--s6);}
.page-solutions-hr .st-who {display:flex;align-items:center;gap:var(--s4);}
.page-solutions-hr .st-av {width:44px;height:44px;border-radius:50%;background:rgba(var(--blue-rgb),.3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:rgba(120,140,255,1);flex-shrink:0;}
.page-solutions-hr .st-name {font-size:14px;font-weight:600;color:var(--white);}
.page-solutions-hr .st-role {font-size:12px;color:rgba(255,255,255,.45);margin-top:2px;}
.page-solutions-hr .st-nums {display:flex;flex-direction:column;justify-content:center;gap:var(--s6);padding:var(--s10) var(--s8);background:rgba(255,255,255,.04);border-left:1px solid rgba(255,255,255,.08);}
.page-solutions-hr .st-n {font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--white);line-height:1;}
.page-solutions-hr .st-n .suf {color:var(--green);}
.page-solutions-hr .st-nl {font-size:12px;color:rgba(255,255,255,.45);margin-top:3px;line-height:1.4;}
.page-solutions-hr .stack-logos {display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s8);}
.page-solutions-hr .stack-chip {padding:var(--s4) var(--s4);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);font-size:12.5px;font-weight:600;color:var(--gray-700);text-align:center;transition:all 200ms ease;}
.page-solutions-hr .stack-chip:hover {border-color:var(--blue-border);color:var(--blue);}
@media(max-width:860px) {
.page-solutions-hr .ba-wrap {grid-template-columns:1fr;}
.page-solutions-hr .ba-divider {padding:var(--s3) 0;font-size:20px;}
.page-solutions-hr .split-testimonial {grid-template-columns:1fr;}
.page-solutions-hr .st-nums {flex-direction:row;border-left:none;border-top:1px solid rgba(255,255,255,.08);padding:var(--s6) var(--s8);}
.page-solutions-hr .roi-strip {padding:var(--s8) var(--s6);}
.page-solutions-hr .roi-op {display:none;}
.page-solutions-hr .stack-logos {grid-template-columns:repeat(2,1fr);}
}

/* ===== Page: /solutions/index.html ===== */
.page-solutions .sol-hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s12); }
.page-solutions .sol-hub-card { padding:var(--s8) var(--s6); background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); position:relative; overflow:hidden; transition:all 250ms ease; display:block; text-decoration:none; color:inherit; }
.page-solutions .sol-hub-card::before { content:''; position:absolute; top:0; right:0; width:200px; height:120px; background:radial-gradient(circle at top right,var(--blue-bg),transparent 70%); pointer-events:none; }
.page-solutions .sol-hub-card:hover { transform:translateY(-5px); border-color:var(--blue-border); box-shadow:0 12px 36px rgba(var(--blue-rgb),.09); }
.page-solutions .sol-hub-icon { width:48px; height:48px; border-radius:var(--r-md); background:var(--blue-bg); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s5); }
.page-solutions .sol-hub-icon svg { width:24px; height:24px; }
.page-solutions .sol-hub-card h3 { font-size:19px; font-weight:700; letter-spacing:-0.01em; color:var(--black); margin-bottom:var(--s2); }
.page-solutions .sol-hub-card p { font-size:14px; color:var(--gray-600); line-height:1.65; margin-bottom:var(--s5); }
.page-solutions .sol-kpis { display:flex; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5); }
.page-solutions .sol-kpi { font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--r-full); background:var(--blue-bg); color:var(--blue); border:1px solid var(--blue-border); }
.page-solutions .sol-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--blue); transition:gap 200ms ease; }
.page-solutions .sol-hub-card:hover .sol-link { gap:10px; }
.page-solutions .sol-link svg { width:14px; height:14px; }
@media (max-width:900px) {
.page-solutions .sol-hub-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
.page-solutions .sol-hub-grid { grid-template-columns:1fr; }
}
.page-solutions .vs-industry { background:var(--black); border-radius:var(--r-2xl); padding:var(--s12); display:grid; grid-template-columns:1fr 1fr; gap:var(--s10); align-items:center; margin-top:var(--s12); }
.page-solutions .vs-industry h3 { font-size:clamp(22px,2.8vw,32px); font-weight:700; letter-spacing:-0.025em; color:var(--white); line-height:1.2; margin-bottom:var(--s4); }
.page-solutions .vs-industry p { font-size:15px; color:rgba(255,255,255,.6); line-height:1.7; margin-bottom:var(--s6); }
.page-solutions .vs-table { border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); overflow:hidden; }
.page-solutions .vs-row { display:grid; grid-template-columns:1fr 1fr; }
.page-solutions .vs-row-head { background:rgba(255,255,255,.06); }
.page-solutions .vs-row-head div { padding:10px 16px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.page-solutions .vs-row div { padding:12px 16px; font-size:13px; color:rgba(255,255,255,.75); border-top:1px solid rgba(255,255,255,.07); }
.page-solutions .vs-row:first-child div { border-top:none; }
.page-solutions .vs-row div:first-child { border-right:1px solid rgba(255,255,255,.07); }
@media (max-width:760px) {
.page-solutions .vs-industry { grid-template-columns:1fr; padding:var(--s8); }
}

/* ===== Page: /solutions/logistics.html ===== */
/* ── Solutions shared additions (scoped, no eshal.css overrides) ── */
.page-solutions-logistics .ba-wrap {display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s6);align-items:stretch;}
.page-solutions-logistics .ba-col {border-radius:var(--r-xl);padding:var(--s8) var(--s6);}
.page-solutions-logistics .ba-before {background:rgba(220,38,38,.04);border:1px solid rgba(220,38,38,.12);}
.page-solutions-logistics .ba-after {background:rgba(0,191,99,.04);border:1px solid rgba(0,191,99,.15);}
.page-solutions-logistics .ba-label {font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s5);}
.page-solutions-logistics .ba-before .ba-label {color:var(--red);}
.page-solutions-logistics .ba-after .ba-label {color:#006b37;}
.page-solutions-logistics .ba-item {display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:14px;line-height:1.55;color:var(--gray-900);}
.page-solutions-logistics .ba-item:last-child {border-bottom:none;}
.page-solutions-logistics .ba-dot {width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.page-solutions-logistics .ba-before .ba-dot {background:var(--red);}
.page-solutions-logistics .ba-after .ba-dot {background:var(--green);}
.page-solutions-logistics .ba-divider {display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:200;color:var(--blue);padding-top:96px;}
.page-solutions-logistics .roi-strip {display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:center;padding:var(--s10) var(--s12);background:var(--white);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-sm);margin-top:var(--s12);}
.page-solutions-logistics .roi-block {text-align:center;padding:0 var(--s4);}
.page-solutions-logistics .roi-num {font-size:clamp(32px,3.5vw,48px);font-weight:700;letter-spacing:-.03em;color:var(--black);line-height:1;}
.page-solutions-logistics .roi-num .suf {color:var(--blue);}
.page-solutions-logistics .roi-lbl {font-size:12px;color:var(--gray-600);margin-top:var(--s1);line-height:1.4;max-width:110px;margin-left:auto;margin-right:auto;}
.page-solutions-logistics .roi-op {font-size:36px;font-weight:200;color:var(--gray-300);line-height:1;}
.page-solutions-logistics .roi-result .roi-num {color:var(--green);}
.page-solutions-logistics .wf-card {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);}
.page-solutions-logistics .wf-card-hd {background:var(--black);padding:var(--s4) var(--s6);display:flex;align-items:center;gap:10px;}
.page-solutions-logistics .wf-card-title {font-size:13px;font-weight:600;color:var(--white);}
.page-solutions-logistics .wf-card-badge {font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);background:rgba(0,191,99,.2);color:var(--green);border:1px solid rgba(0,191,99,.3);margin-left:auto;}
.page-solutions-logistics .wf-row {display:flex;align-items:flex-start;gap:14px;padding:13px var(--s6);border-bottom:1px solid var(--border);}
.page-solutions-logistics .wf-row:last-child {border-bottom:none;}
.page-solutions-logistics .wf-n {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:var(--white);}
.page-solutions-logistics .wf-n.b {background:var(--blue);}
.page-solutions-logistics .wf-n.g {background:var(--green);}
.page-solutions-logistics .wf-n.a {background:var(--amber);}
.page-solutions-logistics .wf-t {font-size:13.5px;font-weight:600;color:var(--black);margin-bottom:2px;}
.page-solutions-logistics .wf-s {font-size:12px;color:var(--gray-600);line-height:1.5;}
.page-solutions-logistics .wf-time {margin-left:auto;font-size:11px;font-weight:700;color:var(--blue);white-space:nowrap;padding-top:3px;flex-shrink:0;}
.page-solutions-logistics .split-testimonial {display:grid;grid-template-columns:1fr 260px;background:var(--black);border-radius:var(--r-2xl);overflow:hidden;}
.page-solutions-logistics .st-q {padding:var(--s10) var(--s10);position:relative;}
.page-solutions-logistics .st-q::before {content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at center,black,transparent 70%);pointer-events:none;}
.page-solutions-logistics .st-qi {position:relative;z-index:1;}
.page-solutions-logistics .st-mark {font-size:72px;font-family:Georgia,serif;color:rgba(255,255,255,.08);line-height:.5;margin-bottom:var(--s5);}
.page-solutions-logistics .st-text {font-size:clamp(15px,1.7vw,19px);font-weight:500;line-height:1.7;color:var(--white);letter-spacing:-.01em;margin-bottom:var(--s6);}
.page-solutions-logistics .st-who {display:flex;align-items:center;gap:var(--s4);}
.page-solutions-logistics .st-av {width:44px;height:44px;border-radius:50%;background:rgba(var(--blue-rgb),.3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:rgba(120,140,255,1);flex-shrink:0;}
.page-solutions-logistics .st-name {font-size:14px;font-weight:600;color:var(--white);}
.page-solutions-logistics .st-role {font-size:12px;color:rgba(255,255,255,.45);margin-top:2px;}
.page-solutions-logistics .st-nums {display:flex;flex-direction:column;justify-content:center;gap:var(--s6);padding:var(--s10) var(--s8);background:rgba(255,255,255,.04);border-left:1px solid rgba(255,255,255,.08);}
.page-solutions-logistics .st-n {font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--white);line-height:1;}
.page-solutions-logistics .st-n .suf {color:var(--green);}
.page-solutions-logistics .st-nl {font-size:12px;color:rgba(255,255,255,.45);margin-top:3px;line-height:1.4;}
.page-solutions-logistics .stack-logos {display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s8);}
.page-solutions-logistics .stack-chip {padding:var(--s4) var(--s4);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);font-size:12.5px;font-weight:600;color:var(--gray-700);text-align:center;transition:all 200ms ease;}
.page-solutions-logistics .stack-chip:hover {border-color:var(--blue-border);color:var(--blue);}
@media(max-width:860px) {
.page-solutions-logistics .ba-wrap {grid-template-columns:1fr;}
.page-solutions-logistics .ba-divider {padding:var(--s3) 0;font-size:20px;}
.page-solutions-logistics .split-testimonial {grid-template-columns:1fr;}
.page-solutions-logistics .st-nums {flex-direction:row;border-left:none;border-top:1px solid rgba(255,255,255,.08);padding:var(--s6) var(--s8);}
.page-solutions-logistics .roi-strip {padding:var(--s8) var(--s6);}
.page-solutions-logistics .roi-op {display:none;}
.page-solutions-logistics .stack-logos {grid-template-columns:repeat(2,1fr);}
}

/* ===== Page: /solutions/sales.html ===== */
/* ── Solutions shared additions (scoped, no eshal.css overrides) ── */
.page-solutions-sales .ba-wrap {display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s6);align-items:stretch;}
.page-solutions-sales .ba-col {border-radius:var(--r-xl);padding:var(--s8) var(--s6);}
.page-solutions-sales .ba-before {background:rgba(220,38,38,.04);border:1px solid rgba(220,38,38,.12);}
.page-solutions-sales .ba-after {background:rgba(0,191,99,.04);border:1px solid rgba(0,191,99,.15);}
.page-solutions-sales .ba-label {font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s5);}
.page-solutions-sales .ba-before .ba-label {color:var(--red);}
.page-solutions-sales .ba-after .ba-label {color:#006b37;}
.page-solutions-sales .ba-item {display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:14px;line-height:1.55;color:var(--gray-900);}
.page-solutions-sales .ba-item:last-child {border-bottom:none;}
.page-solutions-sales .ba-dot {width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.page-solutions-sales .ba-before .ba-dot {background:var(--red);}
.page-solutions-sales .ba-after .ba-dot {background:var(--green);}
.page-solutions-sales .ba-divider {display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:200;color:var(--blue);padding-top:96px;}
.page-solutions-sales .roi-strip {display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:center;padding:var(--s10) var(--s12);background:var(--white);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-sm);margin-top:var(--s12);}
.page-solutions-sales .roi-block {text-align:center;padding:0 var(--s4);}
.page-solutions-sales .roi-num {font-size:clamp(32px,3.5vw,48px);font-weight:700;letter-spacing:-.03em;color:var(--black);line-height:1;}
.page-solutions-sales .roi-num .suf {color:var(--blue);}
.page-solutions-sales .roi-lbl {font-size:12px;color:var(--gray-600);margin-top:var(--s1);line-height:1.4;max-width:110px;margin-left:auto;margin-right:auto;}
.page-solutions-sales .roi-op {font-size:36px;font-weight:200;color:var(--gray-300);line-height:1;}
.page-solutions-sales .roi-result .roi-num {color:var(--green);}
.page-solutions-sales .wf-card {background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);}
.page-solutions-sales .wf-card-hd {background:var(--black);padding:var(--s4) var(--s6);display:flex;align-items:center;gap:10px;}
.page-solutions-sales .wf-card-title {font-size:13px;font-weight:600;color:var(--white);}
.page-solutions-sales .wf-card-badge {font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);background:rgba(0,191,99,.2);color:var(--green);border:1px solid rgba(0,191,99,.3);margin-left:auto;}
.page-solutions-sales .wf-row {display:flex;align-items:flex-start;gap:14px;padding:13px var(--s6);border-bottom:1px solid var(--border);}
.page-solutions-sales .wf-row:last-child {border-bottom:none;}
.page-solutions-sales .wf-n {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:var(--white);}
.page-solutions-sales .wf-n.b {background:var(--blue);}
.page-solutions-sales .wf-n.g {background:var(--green);}
.page-solutions-sales .wf-n.a {background:var(--amber);}
.page-solutions-sales .wf-t {font-size:13.5px;font-weight:600;color:var(--black);margin-bottom:2px;}
.page-solutions-sales .wf-s {font-size:12px;color:var(--gray-600);line-height:1.5;}
.page-solutions-sales .wf-time {margin-left:auto;font-size:11px;font-weight:700;color:var(--blue);white-space:nowrap;padding-top:3px;flex-shrink:0;}
.page-solutions-sales .split-testimonial {display:grid;grid-template-columns:1fr 260px;background:var(--black);border-radius:var(--r-2xl);overflow:hidden;}
.page-solutions-sales .st-q {padding:var(--s10) var(--s10);position:relative;}
.page-solutions-sales .st-q::before {content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at center,black,transparent 70%);pointer-events:none;}
.page-solutions-sales .st-qi {position:relative;z-index:1;}
.page-solutions-sales .st-mark {font-size:72px;font-family:Georgia,serif;color:rgba(255,255,255,.08);line-height:.5;margin-bottom:var(--s5);}
.page-solutions-sales .st-text {font-size:clamp(15px,1.7vw,19px);font-weight:500;line-height:1.7;color:var(--white);letter-spacing:-.01em;margin-bottom:var(--s6);}
.page-solutions-sales .st-who {display:flex;align-items:center;gap:var(--s4);}
.page-solutions-sales .st-av {width:44px;height:44px;border-radius:50%;background:rgba(var(--blue-rgb),.3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:rgba(120,140,255,1);flex-shrink:0;}
.page-solutions-sales .st-name {font-size:14px;font-weight:600;color:var(--white);}
.page-solutions-sales .st-role {font-size:12px;color:rgba(255,255,255,.45);margin-top:2px;}
.page-solutions-sales .st-nums {display:flex;flex-direction:column;justify-content:center;gap:var(--s6);padding:var(--s10) var(--s8);background:rgba(255,255,255,.04);border-left:1px solid rgba(255,255,255,.08);}
.page-solutions-sales .st-n {font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--white);line-height:1;}
.page-solutions-sales .st-n .suf {color:var(--green);}
.page-solutions-sales .st-nl {font-size:12px;color:rgba(255,255,255,.45);margin-top:3px;line-height:1.4;}
.page-solutions-sales .stack-logos {display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s8);}
.page-solutions-sales .stack-chip {padding:var(--s4) var(--s4);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);font-size:12.5px;font-weight:600;color:var(--gray-700);text-align:center;transition:all 200ms ease;}
.page-solutions-sales .stack-chip:hover {border-color:var(--blue-border);color:var(--blue);}
@media(max-width:860px) {
.page-solutions-sales .ba-wrap {grid-template-columns:1fr;}
.page-solutions-sales .ba-divider {padding:var(--s3) 0;font-size:20px;}
.page-solutions-sales .split-testimonial {grid-template-columns:1fr;}
.page-solutions-sales .st-nums {flex-direction:row;border-left:none;border-top:1px solid rgba(255,255,255,.08);padding:var(--s6) var(--s8);}
.page-solutions-sales .roi-strip {padding:var(--s8) var(--s6);}
.page-solutions-sales .roi-op {display:none;}
.page-solutions-sales .stack-logos {grid-template-columns:repeat(2,1fr);}
}

/* ========================= [MOBILE FIXES v4] ========================= */
/* End-of-file responsive overrides. These come last so media-query
   specificity wins over earlier rules. */

/* --- Security: featured-card PRIMARY badge on mobile --- */
@media (max-width: 600px) {
  .page-security .sov-card { padding: var(--s6) var(--s5); }
  .page-security .sov-card.featured { padding-top: var(--s12); }
  .page-security .sov-card.featured::before {
    top: 10px; right: 10px; font-size: 9px; padding: 2px 8px; letter-spacing: 0.05em;
  }
}

/* --- Security: data-architecture row icons on mobile --- */
@media (max-width: 600px) {
  .page-security .arch-label { padding: var(--s3) var(--s4); gap: 10px; flex-direction: row; align-items: center; }
  .page-security .arch-label-icon { width: 16px; height: 16px; flex-shrink: 0; margin-bottom: 0; display: inline-flex; align-items: center; justify-content: center; }
  .page-security .arch-label-icon svg { width: 100%; height: 100%; display: block; }
  .page-security .arch-label-text { font-size: 10.5px; line-height: 1.2; }
  .page-security .arch-content { padding: var(--s3) var(--s4); gap: 6px; }
  .page-security .arch-node { font-size: 11.5px; padding: 4px 10px; }
}

/* --- Blog/newsletter CTA overflow fix --- */
@media (max-width: 600px) {
  form:has(> input[type="email"] + button),
  form:has(> button + input[type="email"]),
  form:has(> input[type="email"] ~ button):not(.page-contact form):not(.page-demo form),
  div:has(> input[type="email"] + button),
  div:has(> button + input[type="email"]) {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    gap: 10px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  form:has(> input[type="email"] + button) > input,
  form:has(> input[type="email"] + button) > button,
  form:has(> button + input[type="email"]) > input,
  form:has(> button + input[type="email"]) > button,
  form:has(> input[type="email"] ~ button):not(.page-contact form):not(.page-demo form) > input,
  form:has(> input[type="email"] ~ button):not(.page-contact form):not(.page-demo form) > button,
  div:has(> input[type="email"] + button) > input,
  div:has(> input[type="email"] + button) > button,
  div:has(> button + input[type="email"]) > input,
  div:has(> button + input[type="email"]) > button {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    box-sizing: border-box !important; display: block !important;
  }
  *:has(> form:has(> input[type="email"] + button)),
  *:has(> form:has(> button + input[type="email"])),
  *:has(> div:has(> input[type="email"] + button)) {
    overflow: hidden; max-width: 100%; box-sizing: border-box;
    word-break: break-word; overflow-wrap: break-word;
  }
  *:has(> form:has(> input[type="email"] + button)) > h2,
  *:has(> form:has(> input[type="email"] + button)) > h3,
  *:has(> div:has(> input[type="email"] + button)) > h2,
  *:has(> div:has(> input[type="email"] + button)) > h3 {
    font-size: clamp(18px, 5.5vw, 24px); line-height: 1.25;
    word-break: break-word; overflow-wrap: break-word;
  }
  [class*="newsletter"],[class*="subscribe"],[class*="cta-card"],[class*="cta-dark"],
  [class*="cta-black"],[class*="blog-cta"],[class*="post-cta"],.sub-band,.nl-card,.nl-cta {
    overflow: hidden; max-width: 100%; box-sizing: border-box;
  }
  [class*="newsletter"] form,[class*="subscribe"] form,[class*="cta-card"] form,
  [class*="cta-dark"] form,[class*="cta-black"] form,[class*="blog-cta"] form,
  [class*="post-cta"] form,.sub-band form,.nl-card form,.nl-cta form {
    display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important;
  }
  [class*="newsletter"] input,[class*="subscribe"] input,[class*="cta-card"] input,
  [class*="cta-dark"] input,[class*="cta-black"] input,[class*="blog-cta"] input,
  [class*="post-cta"] input,.sub-band input,.nl-card input,.nl-cta input,
  [class*="newsletter"] button,[class*="subscribe"] button,[class*="cta-card"] button,
  [class*="cta-dark"] button,[class*="cta-black"] button,[class*="blog-cta"] button,
  [class*="post-cta"] button,.sub-band button,.nl-card button,.nl-cta button {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important;
  }
}

/* --- CTA banner stacking on mobile --- */
@media (max-width: 480px) {
  .cta-banner { padding: var(--s16) 0; }
  .cta-inner { padding: 0 var(--s5); max-width: 100%; }
  .cta-inner h2 { font-size: clamp(22px, 6vw, 28px); word-break: break-word; overflow-wrap: break-word; }
  .cta-inner p { font-size: 14.5px; }
  .cta-buttons { flex-direction: column; align-items: stretch; gap: var(--s2); padding: 0 var(--s4); }
  .cta-buttons .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   [MOBILE FIXES v7]
   Drop-in replacement for the [MOBILE FIXES v4/v5/v6] block at
   the end of eshal.css.

   CHANGES IN v7:
     - Comparison table: BACK to original grid format, scrolls
       horizontally INSIDE its wrapper (not as cards)
     - Mobile menu no longer leaks in from the right when a
       wide table is on the page — body horizontal scroll is
       strictly blocked
     - Trust strip grid + all other fixes preserved from v6
   ============================================================ */

/* =============================================================
   0. GLOBAL SAFETY — no page-level horizontal scroll, ever
   =============================================================
   The comparison table and a few wide elements can exceed the
   viewport width. Without these rules, the whole page starts
   scrolling horizontally, which also reveals the off-screen
   mobile menu (it's at `translateX(100%)` — i.e. just past the
   right edge of the viewport). Locking overflow-x on html, body
   and the outer section ensures only the table scrolls, not
   the page. */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
body.page-pricing .section,
body.page-pricing .comp-section,
body.page-pricing .container {
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile menu belt-and-braces. Closed menu must be fully
   non-interactive and pushed further off-screen than 100% so
   a stray pixel of horizontal scroll can't reveal it. */
.mobile-menu:not(.open) {
  pointer-events: none;
  visibility: hidden;
}
.mobile-menu.open {
  pointer-events: auto;
  visibility: visible;
}

/* =============================================================
   1. SECURITY PAGE — Country flag SVG text no longer clips
   =============================================================
   Specificity-raised with `body.page-security` so `overflow:
   visible` beats the base rule at every viewport size. */

body.page-security .sov-flag {
  width: 64px !important;
  height: 44px !important;
  overflow: visible !important;
  border-radius: var(--r-sm);
  margin-bottom: var(--s4);
  border: 1px solid var(--border);
  background: var(--gray-50);
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
}
body.page-security .sov-flag svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible !important;
}
body.page-security .sov-flag svg text {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  dominant-baseline: middle;
  text-anchor: middle;
}

body.page-security .cert-badge.flag {
  overflow: visible !important;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--gray-50);
}
body.page-security .cert-badge.flag svg {
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: visible !important;
}

/* Security mobile-only tweaks */
@media (max-width: 600px) {
  .page-security .sov-card { padding: var(--s6) var(--s5); }
  .page-security .sov-card.featured { padding-top: var(--s12); }
  .page-security .sov-card.featured::before {
    top: 10px; right: 10px;
    font-size: 9px; padding: 2px 8px; letter-spacing: 0.05em;
  }
  .page-security .arch-label {
    padding: var(--s3) var(--s4); gap: 10px;
    flex-direction: row; align-items: center;
  }
  .page-security .arch-label-icon {
    width: 16px; height: 16px; flex-shrink: 0; margin-bottom: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .page-security .arch-label-icon svg { width: 100%; height: 100%; display: block; }
  .page-security .arch-label-text { font-size: 10.5px; line-height: 1.2; }
  .page-security .arch-content { padding: var(--s3) var(--s4); gap: 6px; }
  .page-security .arch-node { font-size: 11.5px; padding: 4px 10px; }
}

/* =============================================================
   2. PRICING — Enterprise CTA ("Need more?") mobile overflow
   ============================================================= */

@media (max-width: 760px) {
  body.page-pricing .enterprise-band {
    padding: var(--s8) var(--s6) !important;
    grid-template-columns: 1fr !important;
    gap: var(--s6) !important;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  body.page-pricing .enterprise-band h3 {
    font-size: clamp(20px, 5.5vw, 24px);
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  body.page-pricing .enterprise-band p {
    font-size: 14px; line-height: 1.6;
    word-break: break-word; overflow-wrap: break-word;
  }
  body.page-pricing .enterprise-band-feats {
    margin-top: var(--s4); gap: 6px;
  }
  body.page-pricing .enterprise-band .ent-feat {
    font-size: 11.5px; padding: 4px 10px;
  }
  body.page-pricing .enterprise-band-actions {
    flex-direction: column !important;
    width: 100%; gap: var(--s2) !important;
  }
  body.page-pricing .enterprise-band-actions .btn {
    width: 100%; justify-content: center;
  }
}

/* =============================================================
   3. PRICING — Trust strip (ISO 27001, Setup in 1 day, etc.)
   =============================================================
   Two columns on tablet, single column on phone. Kills the
   huge vertical gaps caused by flex-wrap + 40px gap. */

@media (max-width: 760px) {
  body.page-pricing .trust-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--s4) !important;
    padding: var(--s6) var(--s4) !important;
    align-items: start;
  }
  body.page-pricing .trust-item {
    padding: var(--s2) 0;
  }
}
@media (max-width: 480px) {
  body.page-pricing .trust-strip {
    grid-template-columns: 1fr !important;
    gap: var(--s3) !important;
  }
}

/* =============================================================
   4. PRICING — Feature comparison table: ORIGINAL grid, slides
   =============================================================
   Keep the table looking exactly like desktop (grid with
   columns and checkmarks). On narrow screens it becomes wider
   than the viewport — `.comp-table-wrap` handles the horizontal
   scroll internally so the page itself doesn't scroll.

   Padding/font tightened slightly so more fits in view without
   being cramped. */

@media (max-width: 760px) {
  body.page-pricing .comp-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-radius: var(--r-xl);
    /* Subtle shadow inside the scroll container edges as a
       visual cue that it scrolls */
    background:
      linear-gradient(90deg, var(--white) 30%, rgba(255,255,255,0)),
      linear-gradient(90deg, rgba(255,255,255,0), var(--white) 70%) right,
      linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0)),
      linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.06)) right;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  body.page-pricing .comp-table {
    min-width: 560px;
    font-size: 13px !important;
    table-layout: auto;
  }
  body.page-pricing .comp-table thead th,
  body.page-pricing .comp-table td {
    padding: 11px 14px !important;
    font-size: 13px !important;
    white-space: normal;
  }
  body.page-pricing .comp-table thead th {
    font-size: 11px !important;
    white-space: nowrap;
  }
  body.page-pricing .comp-table .group-header td {
    padding: 9px 14px !important;
    font-size: 10.5px !important;
  }
}

/* Smaller phones — allow the table to be a bit narrower so
   more of it is visible before needing to scroll */
@media (max-width: 480px) {
  body.page-pricing .comp-table {
    min-width: 500px;
  }
  body.page-pricing .pricing-hero { padding: var(--s12) 0 var(--s10); }
  body.page-pricing .pricing-hero h1 {
    font-size: clamp(26px, 8vw, 36px);
    word-break: break-word;
  }
}

/* =============================================================
   5. BLOG / NEWSLETTER CTA — structural mobile fix
   ============================================================= */

@media (max-width: 600px) {
  form:has(> input[type="email"] + button),
  form:has(> button + input[type="email"]),
  form:has(> input[type="email"] ~ button):not(.page-contact form):not(.page-demo form),
  div:has(> input[type="email"] + button),
  div:has(> button + input[type="email"]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  form:has(> input[type="email"] + button) > input,
  form:has(> input[type="email"] + button) > button,
  form:has(> button + input[type="email"]) > input,
  form:has(> button + input[type="email"]) > button,
  form:has(> input[type="email"] ~ button):not(.page-contact form):not(.page-demo form) > input,
  form:has(> input[type="email"] ~ button):not(.page-contact form):not(.page-demo form) > button,
  div:has(> input[type="email"] + button) > input,
  div:has(> input[type="email"] + button) > button,
  div:has(> button + input[type="email"]) > input,
  div:has(> button + input[type="email"]) > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  *:has(> form:has(> input[type="email"] + button)),
  *:has(> form:has(> button + input[type="email"])),
  *:has(> div:has(> input[type="email"] + button)) {
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  *:has(> form:has(> input[type="email"] + button)) > h2,
  *:has(> form:has(> input[type="email"] + button)) > h3,
  *:has(> div:has(> input[type="email"] + button)) > h2,
  *:has(> div:has(> input[type="email"] + button)) > h3 {
    font-size: clamp(18px, 5.5vw, 24px);
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  [class*="newsletter"], [class*="subscribe"], [class*="cta-card"],
  [class*="cta-dark"], [class*="cta-black"], [class*="blog-cta"],
  [class*="post-cta"], .sub-band, .nl-card, .nl-cta {
    overflow: hidden; max-width: 100%; box-sizing: border-box;
  }
  [class*="newsletter"] form, [class*="subscribe"] form,
  [class*="cta-card"] form, [class*="cta-dark"] form,
  [class*="cta-black"] form, [class*="blog-cta"] form,
  [class*="post-cta"] form, .sub-band form, .nl-card form, .nl-cta form {
    display: flex !important; flex-direction: column !important;
    gap: 10px !important; width: 100% !important;
  }
  [class*="newsletter"] input, [class*="subscribe"] input,
  [class*="cta-card"] input, [class*="cta-dark"] input,
  [class*="cta-black"] input, [class*="blog-cta"] input,
  [class*="post-cta"] input, .sub-band input, .nl-card input, .nl-cta input,
  [class*="newsletter"] button, [class*="subscribe"] button,
  [class*="cta-card"] button, [class*="cta-dark"] button,
  [class*="cta-black"] button, [class*="blog-cta"] button,
  [class*="post-cta"] button, .sub-band button, .nl-card button, .nl-cta button {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =============================================================
   6. CTA banner (blue) stacking on small phones
   ============================================================= */

@media (max-width: 480px) {
  .cta-banner { padding: var(--s16) 0; }
  .cta-inner { padding: 0 var(--s5); max-width: 100%; }
  .cta-inner h2 {
    font-size: clamp(22px, 6vw, 28px);
    word-break: break-word; overflow-wrap: break-word;
  }
  .cta-inner p { font-size: 14.5px; }
  .cta-buttons {
    flex-direction: column; align-items: stretch;
    gap: var(--s2); padding: 0 var(--s4);
  }
  .cta-buttons .btn { width: 100%; justify-content: center; }
}