/* =====================================================================
   ParagonIT — Vanilla CSS (WordPress/Bricks-friendly · Lighthouse 90+)
   ===================================================================== */

:root {
  --indigo-950: #0b0830;
  --indigo-900: #100a3a;
  --indigo-800: #1a1240;
  --indigo-700: #2a1fd9;
  --indigo-600: #3727e6;
  --indigo-500: #4b3df0;
  --cyan-500: #19bbe9;
  --cyan-400: #1bc8f5;
  --cyan-300: #67d6f0;
  --cyan-100: #e9f9ff;
  --bg-page: #f6f7fb;
  --bg-soft: #f1f3f8;
  --white: #fff;
  --gray-900: #14132b;
  --gray-700: #3a3a55;
  --gray-600: #5b5e78;
  --gray-500: #7a7f96;
  --gray-400: #a8acc1;
  --gray-300: #d9dcea;
  --gray-200: #ebedf5;
  --gray-100: #f1f3f8;
  --border: #e6e8f1;
  --shadow-sm: 0 2px 6px rgba(16,10,58,.05);
  --shadow-md: 0 10px 30px rgba(16,10,58,.08);
  --shadow-lg: 0 22px 60px rgba(16,10,58,.12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --transition-fast: .25s var(--ease);
  --transition: .4s var(--ease);
  --container: 1240px;
  --header-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

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

.accent {
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--cyan-500);
  letter-spacing: -0.01em;
}

.section { padding: 96px 0; position: relative; }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--cyan-100); color: var(--cyan-500);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-eyebrow--dark { background: rgba(255,255,255,.14); color: #fff; }
.section-title {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.1; font-weight: 700; letter-spacing: -0.02em;
  margin: 18px 0; color: var(--indigo-800);
}
.section-subtitle { font-size: 17px; color: var(--gray-600); max-width: 720px; }
.text-center { text-align: center; }
.center-block { margin-left: auto; margin-right: auto; }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  position: relative; overflow: hidden; /* Phase 1: enables ripple ::after */
}
.btn--primary {
  background: var(--cyan-500); color: #fff;
  box-shadow: 0 8px 22px rgba(25,187,233,.35);
}
.btn--primary:hover { background: var(--cyan-400); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(25,187,233,.45); }
.btn--ghost { background: transparent; color: var(--indigo-800); }
.btn .btn-icon {
  display: inline-flex; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(255,255,255,.22);
  align-items: center; justify-content: center;
}
.btn--primary svg { width: 12px; height: 12px; }

/* ============================ HEADER + MEGA MENU ============================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 0;
  transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition), padding var(--transition);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 2px 24px rgba(16,10,58,.06);
  padding: 12px 0;
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; }
.logo { display: flex; align-items: center; height: 42px; }
.logo img { height: 36px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--indigo-800);
  padding: 10px 16px; border-radius: 10px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-item.open > .nav-link { color: var(--cyan-500); background: var(--cyan-100); }
.nav-link .chev { width: 12px; height: 12px; transition: transform var(--transition-fast); }
.nav-item:hover .chev, .nav-item.open .chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(16,10,58,.16);
  padding: 10px 26px; /* reduced vertical padding, preserved horizontal */
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
  z-index: 110;
  max-width: calc(100vw - 32px);
}
.nav-item:hover > .mega, .nav-item.open > .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega--wide {
  /* Pinned to viewport — never overflows on any screen size */
  position: fixed; top: var(--header-h);
  left: 50%;
  width: min(1080px, calc(100vw - 32px));
}
.mega--md { width: 360px; max-width: calc(100vw - 32px); }

.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 32px; /* reduced vertical gap */ }
.mega-col h3 { font-weight: 600; letter-spacing: 1.5px; font-size: 15px; margin: 0 0 4px; }
.mega-col h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cyan-500); margin: 0 0 0; /* tighter under-heading spacing */
}
.mega-col ul { list-style: none; padding: 0; margin: 0; }
.mega-col li { margin-bottom: 2px; }
.mega-col a {
  display: block; font-size: 13.5px; color: var(--indigo-800); font-weight: 500;
  padding: 1px 10px; border-radius: 8px; /* slightly reduced vertical padding to tighten rows */
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.mega-col a:hover { background: var(--cyan-100); color: var(--cyan-500); transform: translateX(3px); }

.mega-cta {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.mega-cta p { margin: 0; font-size: 13.5px; color: var(--gray-600); max-width: 540px; }
.mega-cta .btn { padding: 10px 16px; font-size: 13.5px; }

.nav-cta-wrap { display: flex; align-items: center; gap: 12px; }
.menu-toggle {
  display: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--indigo-800); color: #fff;
  align-items: center; justify-content: center;
}
.menu-toggle svg { width: 20px; height: 20px; }

/* ============================ HERO ============================ */
.hero {
  padding: calc(var(--header-h) + 60px) 0 80px;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fbfcff 0%, #f6f7fb 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 30%, rgba(25,187,233,.07) 0%, transparent 55%),
    radial-gradient(circle at 20% 70%, rgba(42,31,217,.05) 0%, transparent 55%);
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px;
  align-items: center; position: relative; z-index: 1;
}
.hero-content { max-width: 580px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--border);
  color: var(--gray-700); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 0 4px rgba(25,187,233,.18); }
.hero-title {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.05; font-weight: 700; letter-spacing: -0.025em;
  color: var(--indigo-800); margin: 22px 0;
}
.hero-desc { font-size: 17px; color: var(--gray-600); margin-bottom: 32px; max-width: 540px; }

/* Orbit visual — premium dark blue glowing rings */
.orbit-wrap {
  position: relative; width: 100%;
  aspect-ratio: 1/1; max-width: 620px; margin-left: auto;
}
.orbit-glow {
  position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(42,31,217,.22) 0%, rgba(42,31,217,.08) 35%, rgba(42,31,217,0) 65%);
  filter: blur(8px);
  pointer-events: none;
}
.orbit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.orbit-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(42,31,217,.45);
  box-shadow: 0 0 24px rgba(42,31,217,.18), inset 0 0 24px rgba(42,31,217,.08);
}
.orbit-ring--1 { width: 38%; height: 38%; border-color: rgba(42,31,217,.55); }
.orbit-ring--2 { width: 56%; height: 56%; border-color: rgba(42,31,217,.4); border-style: dashed; }
.orbit-ring--3 { width: 76%; height: 76%; border-color: rgba(42,31,217,.28); }
.orbit-ring--4 { width: 94%; height: 94%; border-color: rgba(42,31,217,.18); border-style: dotted; }
.orbit-ring--spin { animation: orbit-spin 80s linear infinite; }
.orbit-ring--spin-rev { animation: orbit-spin 110s linear infinite reverse; }
.orbit-ring--spin-fast { animation: orbit-spin 50s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.orbit-pulse {
  position: absolute; inset: 30%; border-radius: 50%;
  border: 1.5px solid rgba(42,31,217,.4);
  box-shadow: 0 0 30px rgba(42,31,217,.22);
  animation: orbit-pulse 4s ease-in-out infinite;
}
@keyframes orbit-pulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.08); opacity: .2; }
}

.orbit-core {
  position: relative; width: 30%; aspect-ratio: 1/1; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #d1efff 0%, rgba(209,239,255,0) 60%),
    radial-gradient(circle at 70% 70%, #c2e6ff 0%, rgba(194,230,255,0) 65%),
    linear-gradient(160deg, #eaf6ff 0%, #fff 70%);
  box-shadow: inset 0 0 60px rgba(25,187,233,.22), 0 30px 60px rgba(25,187,233,.28), 0 0 0 6px rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.orbit-core img { width: 70%; }

/* 5 service cards floating around orbit, varied animation timings */
.svc-card {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  background: #fff; padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(16,10,58,.10), 0 2px 6px rgba(16,10,58,.05);
  min-width: 200px; z-index: 3;
  border: 1px solid rgba(230,232,241,.7);
  transition: transform var(--transition);
}
.svc-card .ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--cyan-100); color: var(--cyan-500);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.svc-card .ic svg { width: 19px; height: 19px; }
.svc-card .label { font-size: 13px; font-weight: 700; color: var(--indigo-800); display: block; letter-spacing: -0.01em; }
.svc-card .sub { font-size: 11px; color: var(--gray-500); display: block; margin-top: 2px; font-weight: 500; }

.svc-card--1 { top: 4%;  left: -4%;  animation: float-a 7s ease-in-out infinite; }
.svc-card--2 { top: 4%;  right: -4%; animation: float-b 8s ease-in-out infinite; }
.svc-card--3 { top: 46%; left: -8%; animation: float-c 6.5s ease-in-out infinite; }
.svc-card--4 { top: 46%; right: -8%; animation: float-d 7.5s ease-in-out infinite; }
.svc-card--5 { bottom: 4%; left: 50%; transform: translateX(-50%); animation: float-e 8.5s ease-in-out infinite; }

@keyframes float-a { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float-b { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes float-c { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes float-d { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
@keyframes float-e { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-10px)} }

/* ============================ OUTCOMES ============================ */
.outcomes { background: var(--white); padding: 110px 0 100px; }
.outcomes-head { text-align: center; max-width: 880px; margin: 0 auto 56px; }
.outcomes-head .section-subtitle { margin: 0 auto; }

.dashboard-mock {
  position: relative; max-width: 980px; margin: 0 auto 64px;
  background: var(--indigo-800); border-radius: 18px; padding: 14px;
  box-shadow: 0 40px 80px rgba(16,10,58,.18);
  transform: perspective(1400px) rotateX(8deg);
}
.dashboard-mock::after {
  content: ""; position: absolute; bottom: -36px; left: 12%; right: 12%;
  height: 36px;
  background: radial-gradient(ellipse at center, rgba(16,10,58,.32) 0%, rgba(16,10,58,0) 70%);
  filter: blur(2px); z-index: -1;
}
.db-inner { background: #fff; border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: 200px 1fr; min-height: 380px; }
.db-sidebar { background: #f7f8fc; padding: 18px 14px; border-right: 1px solid var(--gray-200); }
.db-sidebar .brand { font-weight: 700; color: var(--indigo-800); margin-bottom: 18px; font-size: 14px; }
.db-sidebar ul { list-style: none; padding: 0; margin: 0; }
.db-sidebar li { padding: 8px 10px; font-size: 12px; color: var(--gray-600); border-radius: 6px; margin-bottom: 4px; }
.db-sidebar li.active { background: var(--cyan-100); color: var(--cyan-500); font-weight: 600; }
.db-main { padding: 18px 22px; }
.db-greeting { font-size: 18px; font-weight: 700; color: var(--gray-900); margin: 0 0 16px; }
.db-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.db-card { background: #f7f8fc; padding: 14px; border-radius: 8px; }
.db-card .h { font-size: 11px; color: var(--gray-500); font-weight: 500; }
.db-card .v { font-size: 18px; font-weight: 700; color: var(--gray-900); margin-top: 4px; }
.db-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 10px; }
.db-bars .bar { flex: 1; background: var(--cyan-500); border-radius: 3px 3px 0 0; opacity: .85; }
.db-bars .bar.alt { background: var(--indigo-700); opacity: .45; }

.outcomes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.outcome-card { position: relative; padding-top: 24px; border-top: 1px solid var(--border); }
.outcome-card .ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--cyan-100); color: var(--indigo-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.outcome-card .ic svg { width: 22px; height: 22px; }
.outcome-card h3 { font-size: 19px; font-weight: 700; color: var(--indigo-800); margin: 0 0 10px; letter-spacing: -0.01em; }
.outcome-card p { font-size: 14.5px; color: var(--gray-600); margin: 0; line-height: 1.6; }

/* ============================ INDUSTRIES (grid + stagger reveal, no slider) ============================ */
.industries {
  background: var(--indigo-700); color: #fff;
  padding: 100px 0; position: relative; overflow: hidden;
}
.industries::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
}
.industries-head {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
  align-items: end; margin-bottom: 56px; position: relative; z-index: 1;
}
.industries .section-eyebrow--dark { background: rgba(255,255,255,.14); color: #fff; }
.industries-head h2 {
  font-size: clamp(34px, 4.6vw, 56px); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em; margin: 18px 0 0;
}
.industries-head h2 .accent { color: #b8e8ff; }
.industries-head p { color: rgba(255,255,255,.78); font-size: 16px; margin: 0 0 22px; }

.industries-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  position: relative; z-index: 1;
}
.industry-card {
  position: relative; overflow: hidden;
  border-radius: 22px;
  background: #0b0830;
  aspect-ratio: 5/4;
  cursor: pointer;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.industry-card:hover { transform: translateY(-6px); box-shadow: 0 34px 80px rgba(0,0,0,.38); }
.industry-card .media {
  position: absolute; inset: 0;
}
.industry-card .media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.industry-card:hover .media img { transform: scale(1.08); }
.industry-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,8,48,0) 35%, rgba(11,8,48,.85) 100%);
  transition: opacity .4s var(--ease);
}
.industry-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,8,48,.25) 0%, rgba(11,8,48,.93) 100%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.industry-card:hover::after { opacity: 1; }

.industry-card .content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 36px 36px 32px;
  color: #fff;
}
.industry-card .tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--cyan-400); text-transform: uppercase; margin-bottom: 8px;
}
.industry-card h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 0; font-weight: 700; letter-spacing: -0.015em; color: #fff;
}
.industry-card .desc {
  font-size: 14.5px; color: rgba(255,255,255,.85);
  margin: 0; line-height: 1.55;
  max-height: 0; opacity: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease), opacity .35s var(--ease) .05s, margin .45s var(--ease);
}
.industry-card .learn {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--cyan-400); font-weight: 600; font-size: 14px;
  max-height: 0; opacity: 0; margin-top: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease), opacity .35s var(--ease) .15s, margin-top .4s var(--ease);
}
.industry-card .learn svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.industry-card:hover .desc { max-height: 130px; opacity: 1; margin: 14px 0 0; }
.industry-card:hover .learn { max-height: 32px; opacity: 1; margin-top: 18px; }
.industry-card:hover .learn svg { transform: translateX(4px); }

/* ============================ MANAGED IT — sticky stacking cards ============================ */
.managed { background: var(--white); padding: 110px 0 130px; }
.managed-head { text-align: center; max-width: 960px; margin: 0 auto 28px; }
.managed-desc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  max-width: 1040px; margin: 0 auto 56px;
}
.managed-desc-grid p { font-size: 15px; color: var(--gray-600); margin: 0; }

.stack-wrap { max-width: 1100px; margin: 0 auto; position: relative; }
.stack-card {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 38px 40px;
  box-shadow: 0 20px 50px rgba(16,10,58,.10);
  margin-bottom: 28px;
  transition: transform .5s var(--ease);
}
.stack-card:nth-child(1) { --i: 0; }
.stack-card:nth-child(2) { --i: 1; }
.stack-card:nth-child(3) { --i: 2; }
.stack-card:nth-child(4) { --i: 3; }
.stack-card { top: calc(var(--header-h) + 32px + (var(--i) * 16px)); }

.stack-card .row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
}
.stack-card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--cyan-100); color: var(--cyan-500);
  font-weight: 800; font-size: 16px; margin-bottom: 18px;
}
.stack-card h3 {
  font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 12px;
  color: var(--indigo-800); font-weight: 700; letter-spacing: -0.015em;
}
.stack-card p { color: var(--gray-600); margin: 0 0 22px; font-size: 15px; }
.stack-card ul { list-style: none; padding: 0; margin: 0 0 22px; }
.stack-card li {
  font-size: 14px; color: var(--indigo-800); padding: 6px 0 6px 26px;
  position: relative;
}
.stack-card li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cyan-100);
  box-shadow: inset 0 0 0 4px var(--cyan-500);
}

.stack-visual {
  background: linear-gradient(160deg, #f7faff 0%, #eef3ff 100%);
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--border);
}
.sv-chip { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; }
.sv-chip .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan-500), var(--indigo-700)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.sv-chip .meta .n { font-size: 13px; font-weight: 700; color: var(--indigo-800); }
.sv-chip .meta .m { font-size: 11.5px; color: var(--gray-500); }
.sv-chip .pill { margin-left: auto; font-size: 10.5px; padding: 4px 9px; border-radius: 999px; background: var(--cyan-100); color: var(--cyan-500); font-weight: 700; letter-spacing: 0.05em; }
.sv-bar { display: flex; gap: 6px; align-items: flex-end; height: 70px; padding: 4px; background: #fff; border-radius: 10px; border: 1px solid var(--border); }
.sv-bar span { flex: 1; background: linear-gradient(180deg, var(--cyan-500), var(--indigo-700)); border-radius: 3px 3px 0 0; opacity: .9; }
.sv-bar span:nth-child(even) { opacity: .55; }

/* ============================ FAQ ============================ */
.faq { background: var(--indigo-700); color: #fff; padding: 100px 0; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; }
.faq-head h2 {
  font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05; margin: 16px 0 32px;
}
.faq-aside {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 22px; backdrop-filter: blur(6px);
}
.faq-aside h4 { margin: 0 0 10px; font-size: 17px; }
.faq-aside p { color: rgba(255,255,255,.7); font-size: 13.5px; margin: 0 0 18px; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: #fff; color: var(--indigo-800);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: box-shadow var(--transition-fast);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 20px 22px;
  font-weight: 600; font-size: 15.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  letter-spacing: -0.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .toggle {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--indigo-800); font-size: 18px; line-height: 1;
  transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0; font-weight: 400;
}
.faq-item[open] .toggle { background: var(--cyan-500); color: #fff; transform: rotate(180deg); }
.faq-item .answer {
  padding: 0 22px 22px;
  color: var(--gray-600); font-size: 14px; line-height: 1.7;
  animation: faq-fade .35s var(--ease);
}
@keyframes faq-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.faq-item .toggle .ic-plus, .faq-item .toggle .ic-minus { display: block; }
.faq-item .toggle .ic-minus { display: none; }
.faq-item[open] .toggle .ic-plus { display: none; }
.faq-item[open] .toggle .ic-minus { display: block; }

/* ============================ TESTIMONIALS — infinite marquee ============================ */
.testimonials { background: #fff; padding: 100px 0 110px; overflow: hidden; }
.testimonials-head { text-align: center; max-width: 700px; margin: 0 auto 48px; }

.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 22px; width: max-content;
  animation: marquee 44s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.t-card {
  width: 380px; background: #fff;
  border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 24px; box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.t-card.dark { background: var(--indigo-700); color: #fff; border-color: transparent; }
.t-card.dark .t-name, .t-card.dark .t-quote h4, .t-card.dark .t-quote { color: #fff; }
.t-card.dark .t-role { color: rgba(255,255,255,.7); }
.t-card.dark .t-date { color: rgba(255,255,255,.75); }
.t-card.dark .t-quote p { color: rgba(255,255,255,.88); }
.t-card.dark .t-logo { background: rgba(255,255,255,.16); color: #fff; }

.t-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.t-id { display: flex; align-items: center; gap: 12px; }
.t-id .av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--gray-200); }
.t-id .av img { width: 100%; height: 100%; object-fit: cover; }
.t-name { font-weight: 700; font-size: 14.5px; color: var(--indigo-800); }
.t-role { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.t-logo {
  font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--gray-100); color: var(--gray-700);
  letter-spacing: 0.04em;
}
.t-quote h4 { font-size: 15px; margin: 0 0 8px; font-weight: 700; }
.t-quote p { font-size: 13.5px; line-height: 1.55; margin: 0; color: var(--gray-600); }
.t-date { margin-top: 16px; font-size: 12px; color: var(--gray-500); }

.marquee-controls { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.marquee-controls button {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gray-100); color: var(--indigo-800);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.marquee-controls button:hover { background: var(--cyan-100); color: var(--cyan-500); }
.marquee-controls svg { width: 16px; height: 16px; }

/* ============================ CONTACT ============================ */
.consult { background: #fff; padding: 80px 0 110px; }
.consult-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.consult-visual {
  position: relative; aspect-ratio: 1/1.05; border-radius: 24px;
  background: radial-gradient(circle at 30% 30%, #d8efff 0%, rgba(216,239,255,0) 60%), linear-gradient(160deg, #e7f5ff 0%, #f0eaff 100%);
  overflow: hidden;
}
.consult-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(25,187,233,.18) 1px, transparent 1.2px);
  background-size: 22px 22px; opacity: .55;
}
.face {
  position: absolute; border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: 0 10px 30px rgba(16,10,58,.14);
  border: 4px solid #fff; overflow: hidden;
}
.face img { width: 100%; height: 100%; object-fit: cover; }
.face.f1 { width: 30%; aspect-ratio: 1/1; top: 18%; left: 28%; }
.face.f2 { width: 22%; aspect-ratio: 1/1; top: 8%;  right: 14%; }
.face.f3 { width: 24%; aspect-ratio: 1/1; bottom: 18%; left: 10%; }
.face.f4 { width: 20%; aspect-ratio: 1/1; bottom: 10%; right: 22%; }
.face.f5 { width: 16%; aspect-ratio: 1/1; top: 48%; left: 6%; }

.consult h2 {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--indigo-800); margin: 0 0 28px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 7px; }
.field input, .field textarea {
  font-family: inherit; font-size: 14.5px;
  padding: 13px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--gray-900);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan-500);
  box-shadow: 0 0 0 4px rgba(25,187,233,.15);
}
.field textarea { min-height: 110px; resize: vertical; }
.field .err { display: none; font-size: 12px; color: #d23a3a; margin-top: 6px; font-weight: 500; }
.field.invalid input, .field.invalid textarea { border-color: #d23a3a; box-shadow: 0 0 0 4px rgba(210,58,58,.12); }
.field.invalid .err { display: block; }

.checkbox-row { display: flex; align-items: center; gap: 10px; margin: 18px 0 22px; font-size: 13.5px; color: var(--gray-700); }
.checkbox-row input { accent-color: var(--cyan-500); width: 18px; height: 18px; }
.checkbox-row a { color: var(--cyan-500); font-weight: 600; }

/* ============================ FOOTER ============================ */
.site-footer {
  background: linear-gradient(180deg, #0d0c1f 0%, #131326 100%);
  color: #fff;
  padding: 80px 0 28px;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(42,31,217,.18) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 0%, rgba(25,187,233,.10) 0%, transparent 50%);
  pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }

.footer-intro {
  display: grid; grid-template-columns: 2fr 1fr; gap: 56px;
  padding-bottom: 48px; margin-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  align-items: center;
}
.footer-intro .lead {
  font-size: 16px; line-height: 1.7;
  color: rgba(255,255,255,.78); margin: 0; max-width: 720px;
}
.footer-intro .lead .accent { color: var(--cyan-400); font-style: italic; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px 18px;
  justify-self: end;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.trust-badge:hover { background: rgba(255,255,255,.07); border-color: rgba(25,187,233,.4); transform: translateY(-2px); }
.trust-badge img { width: 64px; height: 64px; object-fit: contain; }
.trust-badge .t-label {
  display: flex; flex-direction: column; gap: 2px;
}
.trust-badge .t-label .top { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cyan-400); font-weight: 700; }
.trust-badge .t-label .name { font-size: 14px; color: #fff; font-weight: 600; line-height: 1.3; max-width: 180px; }

.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 40px; margin-bottom: 48px;
}
.footer-col { min-width: 0; }
.footer-brand { min-width: 0; }
.footer-brand .logo img { height: 30px; filter: brightness(0) invert(1); width: auto; }
.footer-brand .tagline {
  font-size: 13px; color: rgba(255,255,255,.55);
  letter-spacing: 0.02em; margin: 18px 0 22px;
  line-height: 1.7;
}
.footer-col h5 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.10em;
  color: #fff; margin: 0 0 18px; font-weight: 700;
  position: relative; padding-bottom: 12px;
}
.footer-col h5::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan-500), transparent);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a {
  color: rgba(255,255,255,.62); font-size: 13.5px;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
  display: inline-block; line-height: 1.4;
}
.footer-col a:hover { color: var(--cyan-400); padding-left: 4px; }

.footer-contact { display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; color: rgba(255,255,255,.7); }
.footer-contact .row { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact .row .ic {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  color: var(--cyan-400);
}
.footer-contact .row .ic svg { width: 18px; height: 18px; }
.footer-contact a { color: rgba(255,255,255,.7); transition: color var(--transition-fast); }
.footer-contact a:hover { color: var(--cyan-400); }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.footer-social a:hover { background: var(--cyan-500); color: #fff; border-color: var(--cyan-500); transform: translateY(-2px); }
.footer-social svg { width: 15px; height: 15px; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; margin-top: 16px;
  font-size: 12.5px; color: rgba(255,255,255,.5);
  flex-wrap: wrap;
}
.footer-bottom .australian-owned {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.65); font-weight: 500;
}
.footer-bottom .australian-owned .ic {
  width: 18px; height: 12px;
  background: linear-gradient(90deg, #002868 33%, #fff 33% 66%, #ce1126 66%);
  border-radius: 2px;
  flex-shrink: 0;
}
.footer-bottom .links { display: flex; gap: 18px; }
.footer-bottom .links a {
  color: rgba(255,255,255,.55);
  transition: color var(--transition-fast);
}
.footer-bottom .links a:hover { color: var(--cyan-400); }

/* ============================ SCROLL REVEAL ============================ */
.reveal { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .4s; }
.reveal[data-delay="6"] { transition-delay: .48s; }
.reveal[data-delay="7"] { transition-delay: .56s; }

/* ============================ MOBILE NAV (accordion) ============================ */
.mobile-nav {
  position: fixed; top: var(--header-h); left: 0; right: 0;
  background: #fff; padding: 18px 24px 28px;
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  z-index: 99;
}
.mobile-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-nav .m-item { border-bottom: 1px solid var(--border); }
.mobile-nav .m-item:last-child { border-bottom: none; }
.mobile-nav .m-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; font-weight: 600; color: var(--indigo-800);
  width: 100%; text-align: left;
}
.mobile-nav .m-head .chev { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.mobile-nav .m-item.open .m-head .chev { transform: rotate(180deg); }
.mobile-nav .m-panel { display: none; padding: 0 4px 14px; }
.mobile-nav .m-item.open .m-panel { display: block; }
.mobile-nav .m-group { margin-bottom: 12px; }
.mobile-nav .m-group h6 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cyan-500); margin: 8px 0 6px;
}
.mobile-nav .m-group a {
  display: block; font-size: 14px; color: var(--gray-700);
  padding: 6px 8px; border-radius: 6px;
}
.mobile-nav .m-group a:hover { background: var(--cyan-100); color: var(--cyan-500); }
.mobile-nav .m-cta { display: block; margin-top: 16px; text-align: center; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .outcomes-grid { grid-template-columns: 1fr 1fr; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-top .col-contact { grid-column: span 4; max-width: 480px; }
  .footer-intro { grid-template-columns: 1fr; gap: 28px; }
  .trust-badge { justify-self: start; }
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .main-nav, .nav-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .logo img { height: 30px; }
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero-grid { grid-template-columns: 1fr; }
  .orbit-wrap { max-width: 460px; margin: 0 auto; }
  .industries-head { grid-template-columns: 1fr; align-items: start; }
  .managed-desc-grid { grid-template-columns: 1fr; gap: 18px; }
  .stack-card .row { grid-template-columns: 1fr; gap: 22px; }
  .faq-grid { grid-template-columns: 1fr; }
  .consult-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .dashboard-mock { transform: none; }
  .db-inner { grid-template-columns: 1fr; }
  .db-sidebar { display: none; }
  /* Mobile testimonials swipe */
  .marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee-track { animation: none; gap: 14px; padding: 0 16px; }
  .t-card { scroll-snap-align: start; width: 86vw; max-width: 360px; }
  .marquee-controls { display: none; }
}

@media (max-width: 700px) {
  .industries-grid { grid-template-columns: 1fr; }
  .industry-card { aspect-ratio: 4/3; }
}

@media (max-width: 600px) {
  .section { padding: 64px 0; }
  .outcomes, .industries, .managed, .faq, .testimonials, .consult { padding: 64px 0; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-top .col-contact { grid-column: auto; }
  .footer-intro { padding-bottom: 32px; margin-bottom: 32px; }
  .footer-bottom { justify-content: flex-start; }
  .container { padding: 0 18px; }
  .hero-title { font-size: 38px; }
  .svc-card { min-width: 160px; padding: 10px 12px; }
  .svc-card .label { font-size: 12px; }
  .svc-card .sub { font-size: 10.5px; }
  .stack-card { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* =====================================================================
   SERVICE DETAIL TEMPLATE — Reusable for all service pages
   Add the section markup; replace text/icons/images per service.
   ===================================================================== */

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--gray-600);
  padding: 16px 0 0;
}
.breadcrumb a {
  color: var(--gray-600);
  transition: color var(--transition-fast);
}
.breadcrumb a:hover { color: var(--cyan-500); }
.breadcrumb .sep { color: var(--gray-400); }
.breadcrumb .current { color: var(--indigo-800); font-weight: 600; }

/* ---------- Service Hero (light theme, mirrors homepage hero structure) ---------- */
.service-hero {
  padding: calc(var(--header-h) + 56px) 0 88px;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fbfcff 0%, #f6f7fb 100%);
}
.service-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(25,187,233,.07) 0%, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(42,31,217,.05) 0%, transparent 55%);
  pointer-events: none;
}
.service-hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; position: relative; z-index: 1;
}
.service-hero-content { max-width: 580px; }
.service-hero h1 {
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.07; font-weight: 700; letter-spacing: -0.025em;
  color: var(--indigo-800); margin: 22px 0;
}
.service-hero .lead {
  font-size: 17px; color: var(--gray-600);
  margin: 0 0 32px; max-width: 540px; line-height: 1.65;
}
.service-hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.service-hero-visual {
  position: relative; aspect-ratio: 4/3;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(16,10,58,.18);
}
.service-hero-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.service-hero-visual:hover img { transform: scale(1.04); }
.service-hero-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,8,48,0) 50%, rgba(11,8,48,.18) 100%);
  pointer-events: none;
}

/* ---------- Section Wrapper (white reusable bands) ---------- */
.svc-section { padding: 100px 0; background: #fff; }
.svc-section--soft { background: var(--bg-soft); }
.svc-section--indigo { background: var(--indigo-700); color: #fff; }
.svc-section--indigo .section-title { color: #fff; }
.svc-section--indigo .section-subtitle { color: rgba(255,255,255,.78); }
.svc-section .svc-head {
  text-align: center; max-width: 800px; margin: 0 auto 56px;
}
.svc-section .svc-head .section-subtitle { margin: 14px auto 0; }

/* ---------- Generic equal-height card grid (Challenges / Benefits) ---------- */
.svc-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}
.svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.svc-card-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(16,10,58,.12);
  border-color: rgba(25,187,233,.4);
}
.svc-card-item .ic {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--cyan-100); color: var(--indigo-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px; flex-shrink: 0;
}
.svc-card-item .ic svg { width: 22px; height: 22px; }
.svc-card-item h3 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--indigo-800); margin: 0 0 10px;
}
.svc-card-item p {
  font-size: 14px; color: var(--gray-600);
  line-height: 1.65; margin: 0;
}

/* ---------- Solution split (text + visual) ---------- */
.solution-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 64px; align-items: center;
}
.solution-grid--reversed { grid-template-columns: 1fr 1.05fr; }
.solution-grid--reversed .solution-visual { order: -1; }
.solution-text h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--indigo-800); margin: 18px 0 20px;
}
.solution-text p {
  font-size: 16px; color: var(--gray-600);
  line-height: 1.7; margin: 0 0 14px;
}
.solution-text .solution-points {
  list-style: none; padding: 0; margin: 22px 0 28px;
}
.solution-text .solution-points li {
  position: relative; padding: 8px 0 8px 32px;
  font-size: 15px; color: var(--indigo-800); font-weight: 500;
}
.solution-text .solution-points li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cyan-100);
  box-shadow: inset 0 0 0 5px var(--cyan-500);
}
.solution-visual {
  position: relative; aspect-ratio: 5/4;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(16,10,58,.16);
  perspective: 1000px; /* Phase 1: enables JS tilt */
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.solution-visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px rgba(16,10,58,.22);
}
.solution-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease); /* Phase 1: zoom on hover */
  will-change: transform;
}
.solution-visual:hover img { transform: scale(1.04); }

/* ---------- Feature Cards (Key Features — larger than svc-card-item) ---------- */
.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 30px;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(16,10,58,.14);
  border-color: rgba(25,187,233,.45);
}
.feature-card .ic {
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, var(--cyan-100) 0%, #fff 100%);
  border: 1px solid var(--border);
  color: var(--indigo-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.feature-card .ic svg { width: 26px; height: 26px; }
.feature-card h3 {
  font-size: 19px; font-weight: 700;
  color: var(--indigo-800); margin: 0 0 10px; letter-spacing: -0.01em;
}
.feature-card p {
  font-size: 14.5px; color: var(--gray-600);
  line-height: 1.65; margin: 0;
}

/* ---------- Why Choose (split layout) ---------- */
.why-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 56px; align-items: center;
}
.why-grid .why-text h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--indigo-800); margin: 18px 0 18px;
}
.why-grid .why-text > p {
  font-size: 16px; color: var(--gray-600);
  line-height: 1.7; margin: 0 0 28px;
}
.why-list { display: grid; gap: 18px; }
.why-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.why-item:hover { border-color: rgba(25,187,233,.5); transform: translateX(3px); }
.why-item .ic {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--cyan-100); color: var(--cyan-500);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.why-item .ic svg { width: 20px; height: 20px; }
.why-item h4 {
  font-size: 16px; font-weight: 700;
  color: var(--indigo-800); margin: 0 0 4px; letter-spacing: -0.01em;
}
.why-item p {
  font-size: 13.5px; color: var(--gray-600);
  line-height: 1.6; margin: 0;
}

/* ---------- Related Services (6 tiles) ---------- */
.related-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}
.related-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex; flex-direction: column;
  text-decoration: none;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(16,10,58,.14);
  border-color: rgba(25,187,233,.5);
}
.related-card .ic {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--cyan-100); color: var(--indigo-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.related-card .ic svg { width: 22px; height: 22px; }
.related-card h3 {
  font-size: 17px; font-weight: 700;
  color: var(--indigo-800); margin: 0 0 8px; letter-spacing: -0.01em;
}
.related-card p {
  font-size: 13.5px; color: var(--gray-600);
  line-height: 1.6; margin: 0 0 18px; flex-grow: 1;
}
.related-card .arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--cyan-500);
  transition: gap var(--transition-fast);
}
.related-card:hover .arrow { gap: 10px; }
.related-card .arrow svg { width: 12px; height: 12px; }

/* ---------- Final CTA Banner ---------- */
.cta-banner {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(25,187,233,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(42,31,217,.22) 0%, transparent 55%),
    linear-gradient(160deg, var(--indigo-800) 0%, var(--indigo-900) 100%);
  padding: 80px 0; color: #fff;
  position: relative; overflow: hidden;
}
.cta-banner .container {
  display: grid; grid-template-columns: 1.2fr auto;
  gap: 40px; align-items: center;
}
.cta-banner h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 0 12px;
}
.cta-banner p {
  font-size: 16px; color: rgba(255,255,255,.78);
  margin: 0; max-width: 620px; line-height: 1.65;
}
.cta-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.btn--outline-light {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.32);
}
.btn--outline-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }

/* ---------- Service template responsive ---------- */
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .service-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .service-hero-visual { aspect-ratio: 16/10; }
  .solution-grid, .solution-grid--reversed { grid-template-columns: 1fr; gap: 32px; }
  .solution-grid--reversed .solution-visual { order: 0; }
  .why-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-banner .container { grid-template-columns: 1fr; }
  .cta-actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .svc-section { padding: 64px 0; }
  .svc-grid, .svc-grid--3 { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 56px 0; }
}

/* =====================================================================
   SERVICE TEMPLATE — Polish layer (added 2026-02-26)
   Enhances hover, hierarchy and rhythm without redesigning anything.
   ===================================================================== */

/* ---------- Hero: compact trust row under description ---------- */
.trust-row {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.trust-row .trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--indigo-800);
  letter-spacing: -0.01em;
  transition: transform .25s var(--ease), color .25s var(--ease); /* Phase 1 */
}
.trust-row .trust-item .tick {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cyan-100); color: var(--cyan-500);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-row .trust-item .tick svg { width: 11px; height: 11px; }

/* ---------- Hero: animated cybersecurity network backdrop ---------- */
.hero-network {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 35%, transparent 75%);
}
.hero-network svg { width: 100%; height: 100%; }
.hero-network .net-line {
  stroke: rgba(42,31,217,.22); stroke-width: 0.8; fill: none;
  animation: net-line-pulse 7s ease-in-out infinite;
}
.hero-network .net-line:nth-child(odd) { animation-delay: 1.2s; }
.hero-network .net-line:nth-child(3n) { animation-delay: 2.6s; }
.hero-network .net-node {
  fill: rgba(42,31,217,.55);
  animation: net-node-pulse 4s ease-in-out infinite;
}
.hero-network .net-node:nth-child(2n) { fill: rgba(25,187,233,.55); animation-delay: 1.3s; }
.hero-network .net-node:nth-child(3n) { animation-delay: 2.1s; }
.hero-network .net-node:nth-child(5n) { animation-delay: 2.7s; }
@keyframes net-line-pulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@keyframes net-node-pulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.6); }
}
.hero-network .net-node { transform-origin: center; transform-box: fill-box; }

/* Hero visual: floating particles (CSS-only, on top of image) */
.service-hero-visual { isolation: isolate; }
.service-hero-visual .particles {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
.service-hero-visual .particles span {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-400); opacity: 0; box-shadow: 0 0 16px var(--cyan-400);
  animation: particle-float 7s linear infinite;
}
.service-hero-visual .particles span:nth-child(1) { left: 12%; bottom: -10px; animation-delay: 0s;   animation-duration: 8s; }
.service-hero-visual .particles span:nth-child(2) { left: 38%; bottom: -10px; animation-delay: 2.4s; animation-duration: 9s; background: #fff; box-shadow: 0 0 16px #fff; }
.service-hero-visual .particles span:nth-child(3) { left: 62%; bottom: -10px; animation-delay: 4.2s; animation-duration: 7s; }
.service-hero-visual .particles span:nth-child(4) { left: 82%; bottom: -10px; animation-delay: 1.4s; animation-duration: 10s; background: #fff; box-shadow: 0 0 16px #fff; }
@keyframes particle-float {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-110%) scale(.6); }
}

/* Make sure hero-content + hero-visual sit ABOVE the network */
.service-hero .container { position: relative; z-index: 1; }

/* ---------- NEW: Stats band (rhythm variation between Solution and Benefits) ---------- */
.stats-band {
  background: linear-gradient(160deg, var(--indigo-800) 0%, var(--indigo-900) 100%);
  color: #fff;
  padding: 72px 0;
  position: relative; overflow: hidden;
}
.stats-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(25,187,233,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(42,31,217,.28) 0%, transparent 55%);
  pointer-events: none;
}
.stats-band .container { position: relative; z-index: 1; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.stat-item {
  text-align: center; padding: 8px 12px;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: transform .35s var(--ease), border-color .35s var(--ease); /* Phase 1 */
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { transform: translateY(-3px); } /* Phase 1 */
.stat-item:hover:not(:last-child) { border-right-color: rgba(25,187,233,.3); } /* Phase 1 */
.stat-item .num {
  font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, var(--cyan-300) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1; display: block;
  transition: transform .35s var(--ease); /* Phase 1 */
}
.stat-item:hover .num { transform: scale(1.06); } /* Phase 1 */
.stat-item .lbl {
  font-size: 13.5px; color: rgba(255,255,255,.7);
  margin-top: 12px; letter-spacing: 0.02em;
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 18px; } .stat-item { border: none; } }

/* ---------- Polish: Business Challenges / Benefits / Features hovers ---------- */
.svc-card-item .ic {
  width: 52px; height: 52px;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.svc-card-item:hover .ic {
  background: var(--cyan-500); color: #fff;
  transform: translateY(-2px) rotate(-3deg);
}
.svc-card-item .ic svg { width: 24px; height: 24px; transition: transform .35s var(--ease); }
.svc-card-item:hover .ic svg { transform: scale(1.05); }
.svc-card-item h3 { transition: color .25s var(--ease); }
.svc-card-item:hover h3 { color: var(--indigo-700); }

/* Feature cards: soft blue glow + animated border on hover */
.feature-card { position: relative; }
.feature-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(25,187,233,.55) 0%, rgba(42,31,217,.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover {
  box-shadow: 0 26px 60px rgba(16,10,58,.14), 0 0 0 1px rgba(25,187,233,.15), 0 12px 40px rgba(25,187,233,.12);
}
.feature-card .ic { transition: transform .4s var(--ease); }
.feature-card:hover .ic { transform: translateY(-2px) rotate(2deg); }

/* ---------- Why ParagonIT: stagger reveal already present via .reveal — add hover polish ---------- */
.why-item .ic { transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease); }
.why-item:hover .ic {
  background: var(--cyan-500); color: #fff;
  transform: scale(1.06);
}

/* ---------- Related Services: gradient-border + arrow animation ---------- */
.related-card { position: relative; isolation: isolate; }
.related-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(25,187,233,.7) 0%, rgba(42,31,217,.7) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease);
  pointer-events: none; z-index: 1;
}
.related-card:hover::before { opacity: 1; }
.related-card > * { position: relative; z-index: 2; }
.related-card .ic { transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.related-card:hover .ic { background: var(--indigo-700); color: #fff; transform: translateY(-3px); }
.related-card .arrow svg { transition: transform .35s var(--ease); }
.related-card:hover .arrow svg { transform: translateX(6px); }

/* ---------- FAQ: smoother accordion expand/collapse + icon spin ---------- */
.faq-item { transition: box-shadow .3s var(--ease); }
.faq-item[open] { box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.faq-item summary { transition: padding var(--transition-fast); }
.faq-item .toggle { transition: transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.faq-item[open] .answer { animation: faq-slide-down .4s var(--ease); }
@keyframes faq-slide-down {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: none; max-height: 600px; }
}

/* ---------- CTA banner: stronger premium gradient ---------- */
.cta-banner {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(25,187,233,.22) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(67,46,255,.32) 0%, transparent 50%),
    linear-gradient(135deg, #14123a 0%, #0d0c1f 100%);
  padding: 100px 0;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(25,187,233,.12) 0%, transparent 35%);
  animation: cta-glow 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cta-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.1); }
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 { font-size: clamp(30px, 4vw, 48px); }

/* ---------- Footer: slightly larger logo + bigger spacing ---------- */
.footer-brand .logo img { height: 36px; }
.site-footer { padding-top: 90px; }
.footer-intro { padding-bottom: 56px; margin-bottom: 56px; }
.footer-col a { transition: color var(--transition-fast), transform var(--transition-fast); }
.footer-col a:hover { transform: translateX(4px); color: var(--cyan-400); padding-left: 0; }

/* Universal link underline animation (subtle, premium) */
.solution-text p a,
.cta-banner a:not(.btn) {
  background: linear-gradient(0deg, var(--cyan-500), var(--cyan-500)) no-repeat 0 100% / 0 1.5px;
  transition: background-size .35s var(--ease);
}
.solution-text p a:hover,
.cta-banner a:not(.btn):hover { background-size: 100% 1.5px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero-network .net-line, .hero-network .net-node,
  .service-hero-visual .particles span,
  .cta-banner::before { animation: none !important; }
}

/* =====================================================================
   INDUSTRY TEMPLATE — additions on top of the shared design system
   ===================================================================== */

/* Hero variant for industry pages (slightly more visual emphasis) */
.service-hero.is-industry { padding: calc(var(--header-h) + 72px) 0 100px; }
.service-hero.is-industry .service-hero-visual { aspect-ratio: 5/4; }

/* ---------- Related Industries (4-card grid with imagery, no slider) ---------- */
.rel-ind-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.rel-ind-card {
  position: relative; overflow: hidden;
  border-radius: 18px; background: #0b0830;
  aspect-ratio: 3/4; cursor: pointer;
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  text-decoration: none;
}
.rel-ind-card:hover { transform: translateY(-5px); box-shadow: 0 28px 64px rgba(0,0,0,.32); }
.rel-ind-card .media { position: absolute; inset: 0; }
.rel-ind-card .media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.rel-ind-card:hover .media img { transform: scale(1.08); }
.rel-ind-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,8,48,0) 35%, rgba(11,8,48,.92) 100%);
}
.rel-ind-card .content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 22px 24px; color: #fff;
}
.rel-ind-card h3 {
  font-size: 19px; margin: 0 0 4px; font-weight: 700; letter-spacing: -0.01em; color: #fff;
}
.rel-ind-card .arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--cyan-400);
  margin-top: 8px;
  transition: gap var(--transition-fast);
}
.rel-ind-card:hover .arrow { gap: 10px; }
.rel-ind-card .arrow svg { width: 12px; height: 12px; }

@media (max-width: 960px) { .rel-ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rel-ind-grid { grid-template-columns: 1fr; } .rel-ind-card { aspect-ratio: 4/3; } }

/* ---------- TOUCH / TAP interactions (mobile + tablet without hover) ---------- */
@media (hover: none) and (pointer: coarse) {
  /* Cards: tap = subtle elevation + cyan border highlight + icon tint */
  .svc-card-item:active,
  .feature-card:active,
  .why-item:active,
  .related-card:active,
  .rel-ind-card:active,
  .industry-card:active,
  .stack-card:active,
  .trust-badge:active,
  .outcome-card:active {
    transform: translateY(-2px) !important;
    box-shadow: 0 22px 50px rgba(16,10,58,.14), 0 0 0 1px rgba(25,187,233,.35) !important;
    transition: transform .15s ease-out, box-shadow .15s ease-out;
  }

  /* Icon micro-pulse on tap */
  .svc-card-item:active .ic,
  .feature-card:active .ic,
  .why-item:active .ic,
  .related-card:active .ic { background: var(--cyan-500); color: #fff; transform: scale(1.04); }

  /* Buttons: tap ripple-style */
  .btn:active { transform: translateY(0) scale(.97); box-shadow: 0 6px 18px rgba(25,187,233,.32); }

  /* Footer + nav links — subtle press */
  .footer-col a:active, .nav-link:active, .breadcrumb a:active { color: var(--cyan-500); }

  /* Industry card (homepage) — tap reveals overlay like hover did on desktop */
  .industry-card:active::after { opacity: 1; }
  .industry-card:active .desc { max-height: 130px; opacity: 1; margin: 14px 0 0; }
  .industry-card:active .learn { max-height: 32px; opacity: 1; margin-top: 18px; }
}

/* =====================================================================
   INDUSTRY TEMPLATE — Polish layer (added 2026-02-28)
   ===================================================================== */

/* ---------- Floating healthcare UI overlay on hero image ---------- */
.hero-ui-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
}
.hero-ui-card {
  position: absolute;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 32px rgba(16,10,58,.18);
  font-size: 12.5px; color: var(--indigo-800);
  animation: ui-float 6s ease-in-out infinite;
}
.hero-ui-card .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
  animation: ui-pulse 1.6s ease-in-out infinite;
}
.hero-ui-card.cyan .dot { background: var(--cyan-500); box-shadow: 0 0 0 4px rgba(25,187,233,.22); }
.hero-ui-card .label { font-weight: 700; letter-spacing: -0.005em; line-height: 1.1; }
.hero-ui-card .sub   { font-size: 11px; color: var(--gray-500); margin-top: 1px; line-height: 1.1; }
.hero-ui-card .ic    { width: 28px; height: 28px; border-radius: 8px; background: var(--cyan-100); color: var(--cyan-500); display: inline-flex; align-items: center; justify-content: center; }
.hero-ui-card .ic svg { width: 14px; height: 14px; }
.hero-ui-card--1 { top: 10%; left: -6%; animation-delay: 0s; }
.hero-ui-card--2 { top: 44%; right: -6%; animation-delay: 1.5s; }
.hero-ui-card--3 { bottom: 8%; left: 8%; animation-delay: 3s; }
@keyframes ui-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes ui-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}

/* ---------- Visual ecosystem section (replaces text-heavy How-We-Help + Solutions pair) ---------- */
.eco-section { padding: 110px 0; background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); }
.eco-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.eco-stage {
  position: relative; max-width: 1080px; margin: 0 auto;
  aspect-ratio: 5/4;
}
.eco-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 42%; aspect-ratio: 1/1; border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(16,10,58,.2), 0 0 0 8px #fff;
  z-index: 2;
}
.eco-center img { width: 100%; height: 100%; object-fit: cover; }
.eco-center::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(11,8,48,.25) 100%);
}
.eco-ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px dashed rgba(42,31,217,.22);
  pointer-events: none;
  animation: orbit-spin 90s linear infinite;
}
.eco-ring--1 { width: 64%; height: 64%; }
.eco-ring--2 { width: 92%; height: 92%; border-color: rgba(42,31,217,.14); animation-direction: reverse; animation-duration: 130s; }

.eco-node {
  position: absolute; z-index: 3;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 14px 36px rgba(16,10,58,.10);
  min-width: 170px;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.eco-node:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(16,10,58,.16), 0 0 0 1px rgba(25,187,233,.4);
  border-color: rgba(25,187,233,.5);
}
.eco-node .ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--cyan-100); color: var(--indigo-700);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  flex-shrink: 0;
}
.eco-node:hover .ic { background: var(--cyan-500); color: #fff; transform: rotate(-4deg); }
.eco-node .ic svg { width: 18px; height: 18px; }
.eco-node .label { font-size: 13.5px; font-weight: 700; color: var(--indigo-800); letter-spacing: -0.005em; line-height: 1.15; }
.eco-node .sub   { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; line-height: 1.2; }

/* 6 service nodes positioned around the ring (clock face: 12, 2, 4, 8, 10) */
.eco-node--1 { top: 4%;  left: 50%; transform: translateX(-50%); }
.eco-node--2 { top: 22%; right: 0; }
.eco-node--3 { bottom: 22%; right: 0; }
.eco-node--4 { bottom: 4%; left: 50%; transform: translateX(-50%); }
.eco-node--5 { bottom: 22%; left: 0; }
.eco-node--6 { top: 22%; left: 0; }

/* SVG connector lines */
.eco-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.eco-lines line {
  stroke: rgba(42,31,217,.22); stroke-width: 1; stroke-dasharray: 3 5;
  animation: eco-dash 30s linear infinite;
}
@keyframes eco-dash { to { stroke-dashoffset: -200; } }

/* CTA strip under the ecosystem */
.eco-cta {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  margin-top: 56px; flex-wrap: wrap;
}
.eco-cta p { margin: 0; color: var(--gray-600); font-size: 14.5px; max-width: 520px; }

@media (max-width: 960px) {
  .eco-stage { aspect-ratio: auto; min-height: unset; height: auto; }
  .eco-stage { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 480px; }
  .eco-ring, .eco-lines { display: none; }
  .eco-center { position: static; transform: none; width: 100%; aspect-ratio: 16/10; border-radius: 16px; box-shadow: 0 22px 60px rgba(16,10,58,.16); }
  .eco-center::after { display: none; }
  .eco-node { position: static; transform: none !important; width: 100%; }
}

/* ---------- Related Industries — description + animated arrow reveal ---------- */
.rel-ind-card .content { transition: padding-bottom .4s var(--ease); }
.rel-ind-card .desc {
  display: block; font-size: 13px; color: rgba(255,255,255,.85);
  margin: 6px 0 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--ease), opacity .35s var(--ease) .05s, margin .4s var(--ease);
}
.rel-ind-card .arrow {
  position: relative; padding-right: 18px;
}
.rel-ind-card .arrow svg {
  position: absolute; right: 0; top: 50%; transform: translate(0, -50%);
  transition: transform .35s var(--ease);
}
.rel-ind-card:hover .desc { max-height: 80px; opacity: 1; margin: 8px 0 0; }
.rel-ind-card:hover .arrow svg { transform: translate(6px, -50%); }

/* Touch interaction: reveal description on tap (no hover) */
@media (hover: none) and (pointer: coarse) {
  .rel-ind-card:active .desc { max-height: 80px; opacity: 1; margin: 8px 0 0; }
  .rel-ind-card:active .arrow svg { transform: translate(6px, -50%); }
}
/* Managed Security Hero Image Only */
body.page-template-managed-security .service-hero-visual{
    margin-bottom: 86px;
}

/* ==========================================
ABOUT PAGE
========================================== */
.about-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-top: 56px;
  position: relative; /* Phase 1: enables connector ::before */
}
.about-process-step {
  position: relative;
  transition: transform var(--transition-fast);
}
.about-process-step:hover {
  transform: translateY(-4px);
}
.about-process-step .step-num {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--cyan-500) 0%, var(--indigo-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
  display: block; /* preserved: block keeps gradient text working correctly */
  position: relative; z-index: 1; /* Phase 1: sits above connector line */
  transition: transform .35s var(--ease); /* Phase 1 */
}
.about-process-step h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--indigo-800);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.about-process-step p {
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}
.value-block {
  transition: transform var(--transition-fast);
}
.value-block:hover {
  transform: translateY(-3px);
}
.value-block:hover .ic-wrapper {
  background: var(--cyan-500) !important;
  color: #fff !important;
}
.about-partner-card {
  background: var(--bg-soft);
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.about-partner-card:hover {
  transform: translateY(-2px);
  border-color: rgba(25,187,233,.4);
  box-shadow: var(--shadow-md);
}
.about-partner-card img {
  height: 48px;
  width: auto;
  margin-bottom: 8px;
}
@media (max-width: 960px) {
  .about-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .about-process-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ==========================================
CLOUD IMPLEMENTATION & MIGRATION PAGES
========================================== */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 48px;
}
.directory-item {
  border-left: 2px solid var(--border);
  padding-left: 24px;
  transition: border-color var(--transition-fast);
}
.directory-item:hover {
  border-color: var(--cyan-500);
}
.directory-item .dir-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan-500);
  display: block;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.directory-item h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--indigo-800);
  margin: 0 0 6px;
}
.directory-item p {
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 768px) {
  .directory-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =====================================================================
   PHASE 1 — GLOBAL PREMIUM UTILITIES
   Additive layer. Zero redesign. Zero breaking changes.
   Every rule here is either:
     (a) A new utility class pages can adopt progressively, or
     (b) An enhancement to an existing class that improves it globally.
   ===================================================================== */

/* ─────────────────────────────────────────────
   1. DIRECTIONAL REVEAL ANIMATIONS
   Usage: class="reveal-left"  class="reveal-right"  class="reveal-scale"
   The JS IntersectionObserver adds .in when viewport threshold is met.
   ───────────────────────────────────────────── */

/* Slide in from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal-left.in { opacity: 1; transform: none; }

/* Slide in from right */
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal-right.in { opacity: 1; transform: none; }

/* Scale in from slightly small */
.reveal-scale {
  opacity: 0;
  transform: scale(.93);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-scale.in { opacity: 1; transform: scale(1); }

/* ─────────────────────────────────────────────
   2. STAGGER REVEAL SYSTEM
   Usage: <div class="reveal-stagger"> <div>item</div> … </div>
   JS assigns --stagger-i CSS var to each direct child.
   CSS reads it to offset the transition-delay.
   ───────────────────────────────────────────── */
.reveal-stagger { opacity: 1; transform: none; } /* container is visible */

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px) scale(.98);
  transition:
    opacity  .65s var(--ease) calc(var(--stagger-i, 0) * 80ms),
    transform .65s var(--ease) calc(var(--stagger-i, 0) * 80ms);
}
.reveal-stagger.in > * {
  opacity: 1;
  transform: none;
}

/* Directional stagger variants */
.reveal-stagger.stagger-left > * { transform: translateX(-24px); }
.reveal-stagger.stagger-right > * { transform: translateX(24px); }
.reveal-stagger.stagger-left.in > *,
.reveal-stagger.stagger-right.in > * { transform: none; opacity: 1; }

/* ─────────────────────────────────────────────
   3. SECTION EYEBROW — DEDICATED ENTRANCE
   Eyebrows now slide in from the left independently
   when their parent has class reveal-eyebrow.
   ───────────────────────────────────────────── */
.reveal-eyebrow .section-eyebrow {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  display: inline-flex; /* ensure it stays inline */
}
.reveal-eyebrow.in .section-eyebrow { opacity: 1; transform: none; }

/* When eyebrow sits inside a standard reveal block, delay title/text slightly */
.reveal-eyebrow .section-title,
.reveal-eyebrow h2 {
  transition-delay: .08s;
}
.reveal-eyebrow .section-subtitle,
.reveal-eyebrow .lead,
.reveal-eyebrow > p {
  transition-delay: .14s;
}

/* ─────────────────────────────────────────────
   4. PROCESS STEP CONNECTOR LINES
   The .about-process-grid gets connecting lines between steps.
   Uses ::after on each step (except the last child) to draw
   a dashed line that fills with cyan on scroll entry.
   ───────────────────────────────────────────── */

/* Phase 1 about-process-grid position:relative merged into original selector at line 1692. */
/* Phase 1 .about-process-step .step-num enhancements merged into original at line 1705.   */

/* Connector: an absolutely-positioned element spanning the row */
.about-process-grid::before {
  content: "";
  position: absolute;
  top: 22px; /* aligns with centre of step number */
  left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border) 8%,
    var(--border) 92%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.about-process-step:hover .step-num { transform: scale(1.12); }

/* Heading accent underline on hover */
.about-process-step h4 {
  position: relative;
  display: inline-block;
}
.about-process-step h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: var(--cyan-500);
  border-radius: 2px;
  transition: width .35s var(--ease);
}
.about-process-step:hover h4::after { width: 100%; }

/* On mobile, hide connector line */
@media (max-width: 960px) {
  .about-process-grid::before { display: none; }
}

/* ─────────────────────────────────────────────
   5. ANIMATED STAT COUNTER
   .stat-item[data-count] — JS animates the number.
   CSS provides the visual polish (scale on hover, glow).
   ───────────────────────────────────────────── */
/* Phase 1 stat-item enhancements merged into original selector at line 1307. */

/* ─────────────────────────────────────────────
   6. CAPABILITY GRID — FORMALISED CLASSES
   Replaces inline-style numbered grids across all pages.
   Usage: <div class="capability-grid"> <div class="capability-item"> …
   The existing inline grids still work; these classes are the
   progressive upgrade path for future pages.
   ───────────────────────────────────────────── */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px 40px;
  margin-top: 56px;
}

.capability-item {
  display: flex;
  gap: 20px;
  transition: transform .3s var(--ease);
}
.capability-item:hover { transform: translateX(4px); }

/* The number */
.capability-item .cap-num {
  color: var(--cyan-500);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .25s var(--ease), transform .3s var(--ease);
}
.capability-item:hover .cap-num {
  color: var(--indigo-700);
  transform: scale(1.12);
}

.capability-item .cap-body {}

.capability-item .cap-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--indigo-800);
  margin: 0 0 6px;
  transition: color .25s var(--ease);
}
.capability-item:hover .cap-title { color: var(--cyan-500); }

.capability-item .cap-desc {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ─────────────────────────────────────────────
   7. BORDER-LEFT ACCENT LIST — ANIMATED ENTRANCE
   The vertical cyan/indigo border now draws in from
   the top when the item enters the viewport.
   Usage: add class "accent-list" to the wrapper,
   "accent-list-item" to each row.
   ───────────────────────────────────────────── */
.accent-list {
  display: grid;
  gap: 28px;
}

.accent-list-item {
  position: relative;
  padding-left: 22px;
  /* The visible border is drawn via ::before so we can animate it */
}
/* Default: no visible browser border-left — use ::before instead */
.accent-list-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--cyan-500);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .55s var(--ease) calc(var(--stagger-i, 0) * 80ms);
  border-radius: 2px;
}
/* Indigo variant for alternating items */
.accent-list-item:nth-child(even)::before { background: var(--indigo-500); }

/* Activate when parent has .in class */
.accent-list.in .accent-list-item::before { transform: scaleY(1); }

.accent-list-item .al-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--indigo-800);
  margin: 0 0 4px;
}
.accent-list-item .al-desc {
  font-size: 13.5px;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   8. TRUST-ROW ITEM HOVER
   Each trust-row .trust-item now has a subtle slide + tick brighten.
   ───────────────────────────────────────────── */
/* Phase 1 .trust-row .trust-item transition merged into original at line 1221. */
.trust-row .trust-item:hover { transform: translateX(3px); color: var(--cyan-500); }

.trust-row .trust-item .tick {
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.trust-row .trust-item:hover .tick {
  background: var(--cyan-500);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(25,187,233,.15);
}

/* ─────────────────────────────────────────────
   9. VALUE BLOCK — ICON GLOW ON HOVER
   Adds a soft radial glow behind the icon wrapper.
   ───────────────────────────────────────────── */
.value-block .ic-wrapper {
  position: relative;
}
/* Glow ring behind icon */
.value-block .ic-wrapper::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,187,233,.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  transform: scale(.6);
  pointer-events: none;
  z-index: -1;
}
.value-block:hover .ic-wrapper::after { opacity: 1; transform: scale(1); }

/* ─────────────────────────────────────────────
   10. SOLUTION-VISUAL — IMAGE HOVER PARALLAX TILT
   CSS `perspective` tilt on solution images gives a
   subtle 3D depth feel. JS adds mouse-tracking.
   Base CSS provides the initial hover scale + shadow upgrade.
   ───────────────────────────────────────────── */
/* Phase 1 .solution-visual and .solution-visual img enhancements merged into
   original selector at lines 1036-1041. */

/* ─────────────────────────────────────────────
   11. BUTTON — RIPPLE EFFECT
   A CSS keyframe ripple emanates outward on :active.
   Works on all .btn elements, most visible on primary.
   ───────────────────────────────────────────── */
/* Phase 1 .btn position + overflow merged into original at line 88. */

.btn::after {
  content: "";
  position: absolute;
  inset: 0; border-radius: inherit;
  background: rgba(255,255,255,.25);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.btn:active::after {
  animation: btn-ripple .4s var(--ease) forwards;
}
@keyframes btn-ripple {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(2.2); opacity: 0; }
}

/* ─────────────────────────────────────────────
   12. FAQ LIGHT VARIANT
   Usage: add class "faq--light" alongside "faq"
   Renders FAQ on a white background with the same
   accordion functionality. Prevents dark-on-dark stacking.
   ───────────────────────────────────────────── */
.faq.faq--light {
  background: var(--white);
  color: var(--gray-900);
}
.faq.faq--light .faq-head h2 {
  color: var(--indigo-800);
}
.faq.faq--light .faq-head .section-eyebrow {
  background: var(--cyan-100);
  color: var(--cyan-500);
}
.faq.faq--light .faq-head p { color: var(--gray-600); }
.faq.faq--light .faq-aside {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  backdrop-filter: none;
}
.faq.faq--light .faq-aside h4 { color: var(--indigo-800); }
.faq.faq--light .faq-aside p  { color: var(--gray-600); }

/* Slightly softer FAQ items in light mode */
.faq.faq--light .faq-item {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.faq.faq--light .faq-item[open] { box-shadow: var(--shadow-md); }

/* ─────────────────────────────────────────────
   13. CTA BANNER VARIANTS
   .cta-banner--light  — white/soft background, indigo text
   .cta-banner--split  — two-column with glassy credential panel
   ───────────────────────────────────────────── */

/* Light variant */
.cta-banner.cta-banner--light {
  background: var(--bg-soft);
  color: var(--gray-900);
}
.cta-banner.cta-banner--light h2 { color: var(--indigo-800); }
.cta-banner.cta-banner--light p  { color: var(--gray-600); }
.cta-banner.cta-banner--light::before { display: none; }

/* Split variant — adds a credential/stat panel on the right */
.cta-banner.cta-banner--split .container {
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.cta-banner.cta-banner--split .cta-panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 18px;
}
.cta-banner.cta-banner--split .cta-panel .cp-stat {
  display: flex; align-items: baseline; gap: 8px;
}
.cta-banner.cta-banner--split .cta-panel .cp-num {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, var(--cyan-300) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-banner.cta-banner--split .cta-panel .cp-lbl {
  font-size: 13px; color: rgba(255,255,255,.7); font-weight: 500;
}
.cta-banner.cta-banner--split .cta-panel .cp-divider {
  height: 1px; background: rgba(255,255,255,.1);
}
@media (max-width: 960px) {
  .cta-banner.cta-banner--split .container { grid-template-columns: 1fr; }
  .cta-banner.cta-banner--split .cta-panel { display: none; } /* hide on mobile */
}

/* ─────────────────────────────────────────────
   14. SECTION-EYEBROW ICON VARIANT
   Usage: <span class="section-eyebrow section-eyebrow--icon">
            <svg>…</svg> Label
          </span>
   ───────────────────────────────────────────── */
.section-eyebrow--icon { gap: 8px; }
.section-eyebrow--icon svg {
  width: 14px; height: 14px; flex-shrink: 0;
  color: inherit;
}

/* ─────────────────────────────────────────────
   15. HOVER TIMELINE — INTERACTIVE PROCESS COMPONENT
   A new horizontal connected timeline component.
   Usage:
   <div class="hover-timeline">
     <div class="ht-step">
       <div class="ht-node">01</div>
       <div class="ht-connector"></div>
       <div class="ht-content">
         <h4>Title</h4><p>Description</p>
       </div>
     </div>
   </div>
   ───────────────────────────────────────────── */
.hover-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  position: relative;
  margin-top: 56px;
}

.ht-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 12px;
  cursor: default;
}

/* Connector line between steps */
.ht-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px; /* vertically centred with node */
  left: 50%; right: 0;
  height: 2px;
  background: var(--border);
  z-index: 0;
  transition: background .4s var(--ease);
}
.ht-step:not(:last-child):hover::after,
.ht-step:not(:last-child).ht-active::after {
  background: linear-gradient(90deg, var(--cyan-500), var(--border));
}

/* Node circle */
.ht-node {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  color: var(--gray-500);
  position: relative; z-index: 1;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.ht-step:hover .ht-node,
.ht-step.ht-active .ht-node {
  background: var(--cyan-500);
  border-color: var(--cyan-500);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(25,187,233,.18);
  transform: scale(1.08);
}

/* Content below node */
.ht-content {
  margin-top: 18px;
  padding: 0 4px;
}
.ht-content h4 {
  font-size: 15px; font-weight: 700; color: var(--indigo-800);
  margin: 0 0 6px; letter-spacing: -0.01em;
  transition: color .3s var(--ease);
}
.ht-step:hover .ht-content h4 { color: var(--cyan-500); }

.ht-content p {
  font-size: 13px; color: var(--gray-600);
  line-height: 1.55; margin: 0;
}

/* Dark background variant */
.svc-section--indigo .ht-node {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
}
.svc-section--indigo .ht-step:hover .ht-node {
  background: var(--cyan-500); border-color: var(--cyan-500); color: #fff;
}
.svc-section--indigo .ht-content h4 { color: #fff; }
.svc-section--indigo .ht-content p  { color: rgba(255,255,255,.7); }
.svc-section--indigo .ht-step::after { background: rgba(255,255,255,.12); }

/* Mobile: stack vertically */
@media (max-width: 700px) {
  .hover-timeline { grid-template-columns: 1fr; gap: 32px; }
  .ht-step { align-items: flex-start; text-align: left; flex-direction: row; gap: 16px; padding: 0; }
  .ht-step:not(:last-child)::after { display: none; }
  .ht-content { margin-top: 0; }
}

/* ─────────────────────────────────────────────
   16. STATS BAND — SCROLL-ACTIVATED COUNTER PREP
   Adds transition for count-up animation.
   The actual animation runs via JS.
   ───────────────────────────────────────────── */
.stat-item .num[data-count] {
  /* Ensure count renders cleanly during animation */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* Entry animation: stat items fade-scale in individually */
.stats-band .stat-item {
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition:
    opacity .6s var(--ease) calc(var(--stagger-i, 0) * 100ms),
    transform .6s var(--ease) calc(var(--stagger-i, 0) * 100ms),
    border-color .35s var(--ease);
}
.stats-band.stats-in .stat-item {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────
   17. IMAGE HOVER CARDS — PREMIUM OVERLAY
   .img-hover-card wraps any image and adds a
   gradient overlay + title reveal on hover.
   Usage for future pages:
   <div class="img-hover-card">
     <img …>
     <div class="ihc-overlay"><span>Caption</span></div>
   </div>
   ───────────────────────────────────────────── */
.img-hover-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.img-hover-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.img-hover-card:hover img { transform: scale(1.05); }

.img-hover-card .ihc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,8,48,.72) 100%);
  display: flex; align-items: flex-end;
  padding: 22px;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.img-hover-card:hover .ihc-overlay { opacity: 1; }

.img-hover-card .ihc-overlay span {
  color: #fff; font-size: 14px; font-weight: 600;
  transform: translateY(8px);
  transition: transform .4s var(--ease);
}
.img-hover-card:hover .ihc-overlay span { transform: none; }

/* ─────────────────────────────────────────────
   18. PARTNER CARD — CREDENTIAL REVEAL UPGRADE
   The existing .about-partner-card gets a badge label
   slide-up on hover revealing secondary credential text.
   ───────────────────────────────────────────── */
.about-partner-card {
  position: relative;
  overflow: hidden;
}
/* Shimmer sweep on hover */
.about-partner-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(25,187,233,.06) 50%, transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.about-partner-card:hover::after { opacity: 1; }

/* ─────────────────────────────────────────────
   19. RELATED SERVICES & CARDS — STAGGER SUPPORT
   When .related-grid or .svc-grid wraps items,
   adding .reveal-stagger to the grid parent auto-staggers.
   Already covered by rule #2 above.
   Added here only for documentation clarity.
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   20. SOLUTION-GRID — LEFT/RIGHT ENTRANCE
   When using directional reveal on solution-grid children,
   the left col slides from left, right col from right.
   Add reveal-left / reveal-right to each column directly.
   ───────────────────────────────────────────── */

/* Visual depth: subtle inner border on hover */
.solution-visual::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(25,187,233,.0);
  transition: border-color .45s var(--ease);
  pointer-events: none;
}
.solution-visual:hover::after { border-color: rgba(25,187,233,.22); }

/* ─────────────────────────────────────────────
   21. STATS BAND — SHIMMER PULSE
   A subtle moving shimmer sweeps across the dark
   stats section on entry, drawing the eye.
   ───────────────────────────────────────────── */
.stats-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(25,187,233,.07) 48%,
    rgba(25,187,233,.04) 52%,
    transparent 70%
  );
  opacity: 0;
  animation: stats-shimmer 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stats-shimmer {
  0%   { opacity: 0; transform: translateX(-100%); }
  15%  { opacity: 1; }
  50%  { opacity: 1; transform: translateX(100%); }
  51%  { opacity: 0; transform: translateX(100%); }
  100% { opacity: 0; transform: translateX(-100%); }
}

/* ─────────────────────────────────────────────
   22. FAQ ITEM — PRE-OPEN HOVER STATE
   Before the accordion opens, the summary gets a
   very light cyan wash so users see it's interactive.
   ───────────────────────────────────────────── */
.faq-item summary:hover {
  background: rgba(25,187,233,.05);
}
.faq.faq--light .faq-item summary:hover {
  background: var(--cyan-100);
}

/* ─────────────────────────────────────────────
   23. REDUCED MOTION — SAFETY NET
   All Phase 1 animations respect prefers-reduced-motion.
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-left,
  .reveal-right,
  .reveal-scale { opacity: 1; transform: none; transition: none; }

  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }

  .stats-band::after,
  .about-partner-card::after,
  .btn::after { animation: none; }

  .ht-node, .about-process-step .step-num,
  .solution-visual, .solution-visual img { transition: none; }

  .stat-item .num[data-count] { transition: none; }

  .accent-list-item::before { transform: scaleY(1); transition: none; }
  
  .stats-band .stat-item { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   PERMANENT DESIGN RULE 4 — FAQ POLISH
   "FAQ sections must always have generous spacing, padding and a
   polished expanded state."
   Applies globally to all FAQ variants: dark (.faq), light (.faq--light),
   and the two-column service page layout (.faq-inner).
   ===================================================================== */

/* ── 24. FAQ INNER — two-column service-page layout ─────────────────── */
/* Used in: azure.html, managed-m365.html (and all future service pages) */
.faq-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}

/* Head column sits above the list */
.faq-inner .faq-head {
  grid-column: 1 / -1;        /* spans full width above the split */
  max-width: 660px;
}

/* List occupies left column */
.faq-inner .faq-list {
  /* no extra styles needed — inherits gap from .faq-list */
}

/* Aside occupies right column, sticky on scroll */
.faq-inner .faq-aside {
  position: sticky;
  top: 100px;
}

@media (max-width: 900px) {
  .faq-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .faq-inner .faq-aside {
    position: static;
  }
}

/* ── 25. FAQ ITEM — GENEROUS SPACING (all variants) ─────────────────── */

/* Summary: more breathing room, larger readable font */
.faq-item summary {
  padding: 22px 26px;               /* was 20px 22px */
  font-size: 16px;                  /* was 15.5px */
  line-height: 1.45;
  gap: 20px;
}

/* Toggle button: slightly larger for easier tap on mobile */
.faq-item .toggle {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

/* ── 26. FAQ BODY — polished expanded content area ───────────────────── */
/* Used in azure.html and managed-m365.html                               */
.faq-body {
  padding: 0 26px 26px;             /* generous bottom padding */
  color: var(--gray-600);
  font-size: 15px;                  /* slightly larger than default 14px */
  line-height: 1.8;                 /* more comfortable reading */
  border-top: 1px solid var(--border);
  margin: 0 26px;                   /* inset to align with summary text */
  padding: 20px 0 26px;
  animation: faq-body-reveal .35s var(--ease);
}
@keyframes faq-body-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Paragraphs inside faq-body get a little extra breathing room */
.faq-body p { margin: 0 0 10px; }
.faq-body p:last-child { margin-bottom: 0; }

/* ── 27. OPEN STATE — accent left border + elevated card ─────────────── */

/* Dark variant */
.faq-item[open] {
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
  border-left: 3px solid var(--cyan-500);   /* accent mark */
}

/* Light variant */
.faq.faq--light .faq-item[open] {
  box-shadow: 0 8px 28px rgba(16,10,58,.10);
  border-left: 3px solid var(--cyan-500);
  border-color: rgba(25,187,233,.45);       /* soften outer border */
}

/* Ensure left border doesn't double-shift the toggle icon in open state */
.faq-item[open] summary {
  padding-left: 23px;                        /* compensate for 3px border */
}

/* Upgraded .answer (dark FAQ — managed-it, cloud-consulting, etc.) */
.faq-item .answer {
  padding: 0 26px 26px;
  font-size: 15px;
  line-height: 1.8;
  /* color: rgba(255,255,255,.82); */
  animation: faq-body-reveal .35s var(--ease);
}

/* Answer in light-mode dark FAQ sitting on white page */
.faq.faq--light .faq-item .answer {
  color: var(--gray-600);
}

/* ── 28. LIGHT FAQ ASIDE — richer panel ─────────────────────────────── */

.faq.faq--light .faq-aside {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 20px;              /* was 16px — softer premium feel */
  padding: 32px 28px;               /* was 22px — more generous */
}

.faq.faq--light .faq-aside h4 {
  font-size: 20px;                  /* was 17px */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--indigo-800);
  margin: 0 0 12px;
}

.faq.faq--light .faq-aside p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray-600);
  margin: 0 0 22px;
}

/* Dark FAQ aside already has glass style — just add more padding */
.faq:not(.faq--light) .faq-aside {
  padding: 28px 26px;               /* was 22px */
  border-radius: 18px;
}

/* ── 29. FAQ SECTION PADDING — section-level breathing room ─────────── */

/* All FAQ sections get a little more vertical space */
.faq { padding: 110px 0; }          /* was 100px */

@media (max-width: 768px) {
  .faq { padding: 72px 0; }
  .faq-item summary { padding: 18px 20px; font-size: 15px; }
  .faq-item .answer,
  .faq-body { padding-left: 0; padding-right: 0; margin-left: 20px; margin-right: 20px; }
}

/* ===========================================
   MOBILE MENU HIERARCHY
   Desktop remains untouched
=========================================== */

@media (max-width:960px){

/* LEVEL 2
   Services
   Solutions
   Microsoft
   Industries
*/

.mobile-nav .m-group > h6:not(.sub){

    margin:22px 0 12px;

    padding-bottom:8px;

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.05em;

    color:var(--indigo-800);

    border-bottom:1px solid rgba(20,32,70,.12);

}


/* LEVEL 3
   Managed Services
   Cybersecurity
*/

.mobile-nav .m-group > h6.sub{

    margin:14px 0 8px;

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--cyan-500);

    border:0;

    padding:0;

}


/* LEVEL 4
   Actual links
*/

.mobile-nav .m-group > a{

    display:block;

    padding:6px 0 6px 14px;

    font-size:14px;

    font-weight:400;

}

}

@media (max-width:768px){

.hero{

    margin-top:0 !important;

    transform:none !important;

}

}


/* ============================================================
   AI READINESS PAGE — page-scoped styles (.ai-readiness prefix)
   Moved from inline <style> block in ai-readiness.html
   ============================================================ */

/* ── Horizontal 4-step assessment scope ── */
.ai-readiness .air-scope { background: var(--bg-soft); }
.ai-readiness .air-scope-steps {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  margin-top: 52px; position: relative;
}
.ai-readiness .air-scope-steps::before {
  content: ""; position: absolute;
  top: 28px; left: 14%; right: 14%; height: 2px;
  background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
  z-index: 0;
}
.ai-readiness .air-scope-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 0 16px; position: relative; z-index: 1;
  transition: transform .3s var(--ease);
}
.ai-readiness .air-scope-step:hover { transform: translateY(-4px); }
.ai-readiness .air-step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--indigo-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--indigo-700); font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 0 0 6px var(--bg-soft);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ai-readiness .air-scope-step:hover .air-step-num {
  background: var(--indigo-700); color: #fff; border-color: var(--indigo-700);
  box-shadow: 0 0 0 6px rgba(42,31,217,.08), 0 8px 24px rgba(42,31,217,.25);
}
.ai-readiness .air-scope-step h4 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0; }
.ai-readiness .air-scope-step p { font-size: 13px; color: var(--gray-600); line-height: 1.6; margin: 0; }
@media (max-width: 860px) {
  .ai-readiness .air-scope-steps { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ai-readiness .air-scope-steps::before { display: none; }
}
@media (max-width: 520px) {
  .ai-readiness .air-scope-steps { grid-template-columns: 1fr; }
}

/* ── Maturity Model — 5-level gradient ── */
.ai-readiness .air-maturity { background: var(--white); }
.ai-readiness .air-maturity-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: start; }
.ai-readiness .air-maturity-text h3 { font-size: 22px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
.ai-readiness .air-maturity-text p { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin: 0 0 12px; }
.ai-readiness .air-maturity-text p:last-child { margin: 0; }
.ai-readiness .air-maturity-levels { display: flex; flex-direction: column; gap: 8px; }
.ai-readiness .air-level {
  display: flex; gap: 16px; align-items: center;
  padding: 14px 20px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-soft); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position: relative; overflow: hidden;
}
.ai-readiness .air-level:hover { transform: translateX(6px); box-shadow: 0 6px 20px rgba(16,10,58,.08); border-color: rgba(42,31,217,.2); }
.ai-readiness .air-level-bar {
  width: 4px; height: 100%; position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 0; background: var(--level-color, var(--gray-300));
}
.ai-readiness .air-level-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px; background: var(--level-badge-bg);
  color: var(--level-badge-color); white-space: nowrap; flex-shrink: 0;
}
.ai-readiness .air-level-content h5 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0 0 3px; }
.ai-readiness .air-level-content p { font-size: 12.5px; color: var(--gray-600); line-height: 1.5; margin: 0; }
/* Level colours */
.ai-readiness .air-level:nth-child(1) { --level-color: #ef4444; --level-badge-bg: rgba(239,68,68,.1); --level-badge-color: #dc2626; }
.ai-readiness .air-level:nth-child(2) { --level-color: #f97316; --level-badge-bg: rgba(249,115,22,.1); --level-badge-color: #ea6a0d; }
.ai-readiness .air-level:nth-child(3) { --level-color: #eab308; --level-badge-bg: rgba(234,179,8,.1); --level-badge-color: #ca8a04; }
.ai-readiness .air-level:nth-child(4) { --level-color: #22c55e; --level-badge-bg: rgba(34,197,94,.1); --level-badge-color: #16a34a; }
.ai-readiness .air-level:nth-child(5) { --level-color: var(--indigo-600); --level-badge-bg: rgba(42,31,217,.08); --level-badge-color: var(--indigo-700); }
@media (max-width: 780px) { .ai-readiness .air-maturity-intro { grid-template-columns: 1fr; gap: 32px; } }

/* ── SIGNATURE: Assessment Areas — dark accordion-style card columns ── */
.ai-readiness .air-areas-section {
  background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
  padding: 96px 0; position: relative; overflow: hidden;
}
.ai-readiness .air-areas-section::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 60%, rgba(25,187,233,.12) 0%, transparent 50%),
              radial-gradient(ellipse at 20% 20%, rgba(42,31,217,.18) 0%, transparent 45%);
  pointer-events: none;
}
.ai-readiness .air-areas-section .container { position: relative; z-index: 1; }
.ai-readiness .air-areas-head { text-align: center; margin-bottom: 52px; }
.ai-readiness .air-areas-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
.ai-readiness .air-areas-head p { color: rgba(255,255,255,.65); font-size: 16px; max-width: 620px; margin: 0 auto; line-height: 1.7; }
.ai-readiness .air-areas-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.ai-readiness .air-area-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ai-readiness .air-area-card::before {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan-400), var(--indigo-400));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.ai-readiness .air-area-card:hover::before { transform: scaleX(1); }
.ai-readiness .air-area-card:hover {
  background: rgba(25,187,233,.08); border-color: rgba(25,187,233,.35);
  transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.4);
}
.ai-readiness .air-area-num {
  font-size: 36px; font-weight: 900; color: rgba(255,255,255,.06);
  font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; margin-bottom: -6px;
  transition: color .35s var(--ease);
}
.ai-readiness .air-area-card:hover .air-area-num { color: rgba(25,187,233,.15); }
.ai-readiness .air-area-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.25);
  display: flex; align-items: center; justify-content: center; color: var(--cyan-400);
  transition: background .3s var(--ease);
}
.ai-readiness .air-area-card:hover .air-area-icon { background: rgba(25,187,233,.2); }
.ai-readiness .air-area-icon svg { width: 20px; height: 20px; }
.ai-readiness .air-area-card h3 { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0; }
.ai-readiness .air-area-card p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.65; margin: 0; flex: 1; }
.ai-readiness .air-area-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-readiness .air-tag {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 100px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
}
@media (max-width: 900px) { .ai-readiness .air-areas-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ai-readiness .air-areas-grid { grid-template-columns: 1fr; } }

/* ── Copilot Spotlight — left-right alternating dual blocks ── */
.ai-readiness .air-copilot { background: var(--bg-soft); }
.ai-readiness .air-copilot-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  margin-top: 48px;
}
.ai-readiness .air-copilot-text {
  padding: 48px 44px; background: var(--white);
  display: flex; flex-direction: column; justify-content: center;
}
.ai-readiness .air-copilot-visual {
  padding: 48px 44px;
  background: linear-gradient(135deg, rgba(42,31,217,.06) 0%, rgba(25,187,233,.06) 100%);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
}
.ai-readiness .air-copilot-text h3 { font-size: 24px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
.ai-readiness .air-copilot-text p { font-size: 15px; color: var(--gray-600); line-height: 1.75; margin: 0 0 14px; }
.ai-readiness .air-copilot-text p:last-child { margin: 0; }
.ai-readiness .air-copilot-check-list { display: flex; flex-direction: column; gap: 10px; }
.ai-readiness .air-copilot-check {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; font-weight: 600; color: var(--indigo-800); line-height: 1.4;
}
.ai-readiness .air-copilot-check-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: rgba(25,187,233,.1); color: var(--cyan-500);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
  transition: background .3s var(--ease);
}
.ai-readiness .air-copilot-inner:hover .air-copilot-check-dot { background: rgba(25,187,233,.2); }
.ai-readiness .air-copilot-check-dot svg { width: 11px; height: 11px; }
@media (max-width: 780px) {
  .ai-readiness .air-copilot-inner { grid-template-columns: 1fr; }
  .ai-readiness .air-copilot-visual { border-left: none; border-top: 1px solid var(--border); }
  .ai-readiness .air-copilot-text, .ai-readiness .air-copilot-visual { padding: 32px 28px; }
}

/* ── What You Receive — deliverables reveal strip ── */
.ai-readiness .air-deliverables { background: var(--white); }
.ai-readiness .air-del-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 48px;
}
.ai-readiness .air-del-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 24px 20px;
  background: var(--bg-soft); position: relative; overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.ai-readiness .air-del-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.ai-readiness .air-del-card:hover::before { transform: scaleX(1); }
.ai-readiness .air-del-card:hover { border-color: rgba(42,31,217,.18); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(16,10,58,.08); background: var(--white); }
.ai-readiness .air-del-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(42,31,217,.07); color: var(--indigo-600);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  transition: background .3s var(--ease);
}
.ai-readiness .air-del-card:hover .air-del-icon { background: var(--indigo-700); color: #fff; }
.ai-readiness .air-del-icon svg { width: 20px; height: 20px; }
.ai-readiness .air-del-card h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0 0 7px; }
.ai-readiness .air-del-card p { font-size: 13px; color: var(--gray-600); line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .ai-readiness .air-del-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ai-readiness .air-del-grid { grid-template-columns: 1fr; } }

/* ── Benefits — alternating content blocks ── */
.ai-readiness .air-benefits { background: var(--bg-soft); }
.ai-readiness .air-benefits-list { display: flex; flex-direction: column; gap: 0; margin-top: 48px; }
.ai-readiness .air-benefit-block {
  display: grid; grid-template-columns: 80px 1fr; gap: 28px;
  align-items: flex-start; padding: 28px 0; border-bottom: 1px solid var(--border);
  transition: background .25s var(--ease);
}
.ai-readiness .air-benefit-block:first-child { padding-top: 0; }
.ai-readiness .air-benefit-block:last-child { border-bottom: none; padding-bottom: 0; }
.ai-readiness .air-benefit-block:hover { background: rgba(42,31,217,.015); padding-left: 10px; padding-right: 10px; border-radius: 12px; }
.ai-readiness .air-benefit-num-block {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px;
}
.ai-readiness .air-benefit-num {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: rgba(42,31,217,.07); color: var(--indigo-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.ai-readiness .air-benefit-block:hover .air-benefit-num { background: var(--indigo-700); color: #fff; }
.ai-readiness .air-benefit-line {
  width: 2px; flex: 1; min-height: 20px;
  background: linear-gradient(180deg, var(--indigo-600) 0%, transparent 100%);
  border-radius: 100px; display: none;
}
.ai-readiness .air-benefit-content h4 { font-size: 17px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
.ai-readiness .air-benefit-content p { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin: 0; }
@media (max-width: 580px) {
  .ai-readiness .air-benefit-block { grid-template-columns: 52px 1fr; gap: 16px; }
}


/* =====================================================================
   MANAGED M365 PAGE — page-scoped styles (.managed-m365 namespace)
   Extracted from: managed-m365.html inline <style> block
   ===================================================================== */

/* Platform Coverage */
.managed-m365 .m365-coverage { background: var(--bg-soft); }
.managed-m365 .m365-coverage-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 56px;
}
.managed-m365 .m365-coverage-image {
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/3; position: relative;
  box-shadow: 0 26px 60px rgba(16,10,58,.16);
}
.managed-m365 .m365-coverage-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease);
}
.managed-m365 .m365-coverage-image:hover img { transform: scale(1.03); }
.managed-m365 .m365-coverage-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,8,48,.25) 100%);
  pointer-events: none;
}
.managed-m365 .m365-coverage-list {
  display: flex; flex-direction: column; gap: 0;
}
.managed-m365 .m365-cov-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--border);
  transition: background .2s var(--ease);
}
.managed-m365 .m365-cov-item:first-child { padding-top: 0; }
.managed-m365 .m365-cov-item:last-child { border-bottom: none; padding-bottom: 0; }
.managed-m365 .m365-cov-num {
  font-size: 13px; font-weight: 800; color: var(--cyan-500);
  min-width: 24px; flex-shrink: 0; line-height: 1.8;
}
.managed-m365 .m365-cov-body { flex: 1; }
.managed-m365 .m365-cov-title {
  font-size: 15px; font-weight: 700; color: var(--indigo-800);
  margin: 0 0 4px; line-height: 1.3;
}
.managed-m365 .m365-cov-desc {
  font-size: 13.5px; color: var(--gray-600); line-height: 1.55; margin: 0;
}
@media (max-width: 900px) {
  .managed-m365 .m365-coverage-layout { grid-template-columns: 1fr; gap: 36px; }
}

/* Platform Tools Grid */
.managed-m365 .m365-tools { background: var(--bg-soft); }
.managed-m365 .m365-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 56px;
}
.managed-m365 .m365-tool-cell {
  background: var(--white);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background .3s var(--ease);
  cursor: default;
}
.managed-m365 .m365-tool-cell:hover { background: var(--indigo-800); }
.managed-m365 .m365-tool-ic {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease);
}
.managed-m365 .m365-tool-cell:hover .m365-tool-ic { transform: scale(1.1); }
.managed-m365 .m365-tool-cell h4 {
  font-size: 16px; font-weight: 700; color: var(--indigo-800);
  margin: 0; transition: color .3s var(--ease);
}
.managed-m365 .m365-tool-cell:hover h4 { color: #fff; }
.managed-m365 .m365-tool-cell p {
  font-size: 13.5px; color: var(--gray-600); line-height: 1.5; margin: 0;
  transition: color .3s var(--ease);
}
.managed-m365 .m365-tool-cell:hover p { color: rgba(255,255,255,.7); }
@media (max-width: 900px) { .managed-m365 .m365-tools-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .managed-m365 .m365-tools-grid { grid-template-columns: 1fr; } }

/* Lifecycle Timeline */
.managed-m365 .m365-lifecycle { background: var(--white); }
.managed-m365 .m365-lifecycle-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 60px;
  position: relative;
}
.managed-m365 .m365-lc-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 16px;
  position: relative;
}
.managed-m365 .m365-lc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px; left: 50%; right: -50%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-500) 0%, var(--border) 100%);
  z-index: 0;
}
.managed-m365 .m365-lc-num {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo-700) 0%, var(--indigo-500) 100%);
  color: #fff; font-size: 22px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 8px 24px rgba(42,31,217,.28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.managed-m365 .m365-lc-step:hover .m365-lc-num {
  transform: scale(1.1);
  box-shadow: 0 16px 36px rgba(25,187,233,.35);
  background: linear-gradient(135deg, var(--cyan-500) 0%, var(--indigo-500) 100%);
}
.managed-m365 .m365-lc-body { margin-top: 22px; }
.managed-m365 .m365-lc-title {
  font-size: 16px; font-weight: 700; color: var(--indigo-800);
  margin: 0 0 8px; transition: color .3s var(--ease);
}
.managed-m365 .m365-lc-step:hover .m365-lc-title { color: var(--cyan-500); }
.managed-m365 .m365-lc-desc { font-size: 13.5px; color: var(--gray-600); line-height: 1.55; margin: 0; }
@media (max-width: 800px) {
  .managed-m365 .m365-lifecycle-timeline { grid-template-columns: 1fr 1fr; gap: 48px; }
  .managed-m365 .m365-lc-step:not(:last-child)::after { display: none; }
}
@media (max-width: 500px) {
  .managed-m365 .m365-lifecycle-timeline { grid-template-columns: 1fr; gap: 36px; align-items: flex-start; }
}

/* =====================================================================
   MANAGED CLOUD PAGE — page-scoped styles (.managed-cloud namespace)
   Extracted from: managed-cloud.html inline <style> block
   ===================================================================== */

/* Service Feature Bars */
.managed-cloud .mc-services { background: var(--bg-soft); }
.managed-cloud .mc-service-bars { display: flex; flex-direction: column; gap: 3px; margin-top: 56px; }
.managed-cloud .mc-service-bar {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
}
.managed-cloud .mc-service-bar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--cyan-400);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s var(--ease);
  border-radius: 4px 0 0 4px;
  z-index: 2;
}
.managed-cloud .mc-service-bar:hover::before { transform: scaleY(1); }
.managed-cloud .mc-service-bar:hover {
  border-color: rgba(25,187,233,.32);
  box-shadow: 0 14px 44px rgba(16,10,58,.09);
  transform: translateX(3px);
}
.managed-cloud .mc-service-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  padding: 28px 0;
  transition: background .3s var(--ease);
}
.managed-cloud .mc-service-bar:hover .mc-service-badge { background: rgba(25,187,233,.06); }
.managed-cloud .mc-service-badge span {
  font-size: 13px; font-weight: 900; letter-spacing: .07em;
  color: var(--indigo-700); text-transform: uppercase;
  transition: color .3s var(--ease);
}
.managed-cloud .mc-service-bar:hover .mc-service-badge span { color: var(--cyan-500); }
.managed-cloud .mc-service-body {
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.managed-cloud .mc-service-body h3 {
  font-size: 18px; font-weight: 700; color: var(--indigo-800);
  margin: 0; letter-spacing: -0.01em; line-height: 1.2;
  transition: color .3s var(--ease);
}
.managed-cloud .mc-service-bar:hover .mc-service-body h3 { color: var(--indigo-700); }
.managed-cloud .mc-service-body p {
  font-size: 14.5px; color: var(--gray-600); line-height: 1.65; margin: 0;
}
@media (max-width: 860px) {
  .managed-cloud .mc-service-bar { grid-template-columns: 60px 1fr; }
  .managed-cloud .mc-service-body { padding: 22px 24px; }
  .managed-cloud .mc-service-body h3 { font-size: 16px; }
}
@media (max-width: 520px) {
  .managed-cloud .mc-service-bar { grid-template-columns: 1fr; }
  .managed-cloud .mc-service-badge { border-right: none; border-bottom: 1px solid var(--border); padding: 14px 20px; justify-content: flex-start; }
  .managed-cloud .mc-service-body { padding: 18px 20px; }
}

/* Cloud Platform Comparison Matrix */
.managed-cloud .mc-compare {
  background: linear-gradient(158deg, #08072a 0%, #100c42 45%, #0d0b38 100%);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.managed-cloud .mc-compare::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 10% 15%, rgba(25,187,233,.14) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 85%, rgba(42,31,217,.22) 0%, transparent 55%);
  pointer-events: none;
}
.managed-cloud .mc-compare .container { position: relative; z-index: 1; }
.managed-cloud .mc-compare-header { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.managed-cloud .mc-compare-header .section-eyebrow { color: var(--cyan-400); }
.managed-cloud .mc-compare-header h2 {
  font-size: clamp(26px, 3vw, 40px); font-weight: 700;
  color: #fff; letter-spacing: -0.02em; line-height: 1.12; margin: 12px 0 16px;
}
.managed-cloud .mc-compare-header p { font-size: 16px; color: rgba(255,255,255,.68); line-height: 1.65; margin: 0; }
.managed-cloud .mc-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.45);
}
.managed-cloud .mc-compare-scroll::-webkit-scrollbar { height: 6px; }
.managed-cloud .mc-compare-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 3px; }
.managed-cloud .mc-compare-scroll::-webkit-scrollbar-thumb { background: rgba(25,187,233,.4); border-radius: 3px; }
.managed-cloud .mc-compare-table {
  width: 100%; min-width: 680px;
  border-collapse: collapse;
  background: rgba(255,255,255,.03);
  border-radius: 20px; overflow: hidden;
}
.managed-cloud .mc-compare-table thead tr {
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.managed-cloud .mc-compare-table thead th {
  padding: 20px 22px;
  font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.07);
}
.managed-cloud .mc-compare-table thead th:first-child { text-align: left; color: rgba(255,255,255,.4); min-width: 220px; }
.managed-cloud .mc-compare-table thead th:last-child { border-right: none; }
.managed-cloud .mc-th-platform { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.managed-cloud .mc-th-platform .mc-th-name { font-size: 13px; font-weight: 800; letter-spacing: .03em; color: #fff; text-transform: none; }
.managed-cloud .mc-th-platform .mc-th-tag {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan-400); font-weight: 700;
  background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.2);
  padding: 2px 8px; border-radius: 20px;
}
.managed-cloud .mc-compare-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .25s ease;
  cursor: default;
}
.managed-cloud .mc-compare-table tbody tr:last-child { border-bottom: none; }
.managed-cloud .mc-compare-table tbody tr:hover { background: rgba(25,187,233,.07); }
.managed-cloud .mc-compare-table tbody td {
  padding: 18px 22px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.06);
  vertical-align: middle; font-size: 14px;
  transition: background .25s ease;
}
.managed-cloud .mc-compare-table tbody td:last-child { border-right: none; }
.managed-cloud .mc-compare-table tbody td:first-child {
  text-align: left; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.85); padding-left: 26px;
}
.managed-cloud .mc-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(25,187,233,.15); border: 1.5px solid rgba(25,187,233,.35);
  color: var(--cyan-400);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.managed-cloud .mc-compare-table tbody tr:hover .mc-tick {
  background: rgba(25,187,233,.25); border-color: rgba(25,187,233,.6); transform: scale(1.1);
}
.managed-cloud .mc-tick svg { width: 12px; height: 12px; }
.managed-cloud .mc-dash {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; color: rgba(255,255,255,.2);
}
.managed-cloud .mc-dash-line { display: block; width: 14px; height: 2px; background: rgba(255,255,255,.2); border-radius: 2px; }
.managed-cloud .mc-compare-note { text-align: center; margin-top: 32px; font-size: 13px; color: rgba(255,255,255,.38); }
@media (max-width: 860px) { .managed-cloud .mc-compare { padding: 80px 0; } }

/* Who It's For */
.managed-cloud .mc-who { background: var(--white); }
.managed-cloud .mc-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.managed-cloud .mc-who-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  cursor: default;
}
.managed-cloud .mc-who-item:hover {
  border-color: rgba(42,31,217,.3); transform: translateX(4px);
  box-shadow: 0 10px 28px rgba(16,10,58,.07); background: rgba(42,31,217,.025);
}
.managed-cloud .mc-who-ic {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--indigo-700) 0%, var(--indigo-500) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 1px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.managed-cloud .mc-who-item:hover .mc-who-ic { transform: scale(1.1); box-shadow: 0 6px 16px rgba(42,31,217,.3); }
.managed-cloud .mc-who-ic svg { width: 14px; height: 14px; }
.managed-cloud .mc-who-item p { font-size: 14.5px; color: var(--indigo-800); font-weight: 600; margin: 0; line-height: 1.45; }
@media (max-width: 860px) { .managed-cloud .mc-who-grid { grid-template-columns: 1fr; } }

/* Why ParagonIT */
.managed-cloud .mc-why { background: var(--bg-soft); }
.managed-cloud .mc-why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.managed-cloud .mc-why-item {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 28px 30px;
  background: var(--white); border: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: 0 16px 16px 0;
  transition: border-left-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
}
.managed-cloud .mc-why-item:hover {
  border-left-color: var(--cyan-400); border-color: rgba(25,187,233,.25);
  box-shadow: 0 14px 40px rgba(16,10,58,.08); transform: translateY(-2px);
}
.managed-cloud .mc-why-icon {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--indigo-700) 0%, var(--indigo-500) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.managed-cloud .mc-why-item:hover .mc-why-icon { transform: rotate(-5deg) scale(1.06); box-shadow: 0 10px 24px rgba(42,31,217,.3); }
.managed-cloud .mc-why-icon svg { width: 22px; height: 22px; }
.managed-cloud .mc-why-text h3 {
  font-size: 17px; font-weight: 700; color: var(--indigo-800);
  margin: 0 0 8px; letter-spacing: -0.01em;
  transition: color .3s var(--ease);
}
.managed-cloud .mc-why-item:hover .mc-why-text h3 { color: var(--indigo-700); }
.managed-cloud .mc-why-text p { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin: 0; }
@media (max-width: 860px) {
  .managed-cloud .mc-why-list { grid-template-columns: 1fr; gap: 14px; }
  .managed-cloud .mc-why-item { border-radius: 12px; border-left-width: 4px; }
}

/* =====================================================================
   MANAGED NETWORK PAGE — page-scoped styles (.managed-network namespace)
   Extracted from: managed-network.html inline <style> block
   ===================================================================== */

/* 2-col services description list */
.managed-network .mn-services { background: var(--bg-soft); }
.managed-network .mn-services-grid { margin-top: 56px; display: flex; flex-direction: column; gap: 0; }
.managed-network .mn-service-row {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 0; align-items: stretch;
  background: var(--white); border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: background .3s var(--ease);
}
.managed-network .mn-service-row:first-child { border-radius: 16px 16px 0 0; }
.managed-network .mn-service-row:last-child  { border-radius: 0 0 16px 16px; border-bottom: none; }
.managed-network .mn-service-row:nth-child(even) { background: var(--bg-soft); }
.managed-network .mn-service-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--cyan-500); transform: scaleY(0);
  transform-origin: bottom; transition: transform .35s var(--ease);
  border-radius: 2px 0 0 2px;
}
.managed-network .mn-service-row:hover::before { transform: scaleY(1); }
.managed-network .mn-service-row:hover { transform: translateX(4px); }
.managed-network .mn-service-left {
  padding: 32px 28px; display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--border);
}
.managed-network .mn-service-num {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cyan-500);
}
.managed-network .mn-service-left h3 {
  font-size: 17px; font-weight: 700; color: var(--indigo-800);
  margin: 0; letter-spacing: -0.01em; line-height: 1.3;
}
.managed-network .mn-service-right {
  padding: 32px 36px; display: flex; align-items: center;
}
.managed-network .mn-service-right p {
  font-size: 14.5px; color: var(--gray-600); line-height: 1.65; margin: 0;
}
@media (max-width: 860px) {
  .managed-network .mn-service-row { grid-template-columns: 1fr; }
  .managed-network .mn-service-left { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 24px 16px; }
  .managed-network .mn-service-right { padding: 16px 24px 24px; }
}

/* Network Topology Diagram */
.managed-network .mn-topology-section {
  background: linear-gradient(155deg, #0d0c2e 0%, var(--indigo-900) 50%, #0a0a24 100%);
  padding: 100px 0; position: relative; overflow: hidden;
}
.managed-network .mn-topology-section::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(25,187,233,.12) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 30%, rgba(42,31,217,.18) 0%, transparent 45%);
  pointer-events: none;
}
.managed-network .mn-topology-section .container { position: relative; z-index: 1; }
.managed-network .mn-topology-head { text-align: center; margin-bottom: 60px; }
.managed-network .mn-topology-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 14px; }
.managed-network .mn-topology-head p  { color: rgba(255,255,255,.65); font-size: 16px; max-width: 540px; margin: 0 auto; }
.managed-network .mn-topology {
  display: flex; flex-direction: column; gap: 0; align-items: center;
  max-width: 860px; margin: 0 auto;
}
.managed-network .mn-topo-layer {
  display: flex; justify-content: center; gap: 20px;
  width: 100%; position: relative; z-index: 2;
}
.managed-network .mn-topo-connector {
  display: flex; justify-content: center; gap: 60px;
  width: 100%; padding: 0; position: relative;
  height: 56px; align-items: center;
}
.managed-network .mn-topo-line {
  width: 2px; height: 56px; background: rgba(25,187,233,.25);
  position: relative; border-radius: 1px; overflow: visible;
}
.managed-network .mn-topo-line::after {
  content: ""; position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan-400); left: -3px;
  box-shadow: 0 0 10px rgba(25,187,233,.8);
  animation: topo-pulse 2.4s ease-in-out infinite;
}
.managed-network .mn-topo-line:nth-child(2)::after { animation-delay: .6s; }
.managed-network .mn-topo-line:nth-child(3)::after { animation-delay: 1.2s; }
.managed-network .mn-topo-line:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes topo-pulse {
  0%   { top: 0;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 56px; opacity: 0; }
}
.managed-network .mn-topo-node {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 18px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 140px; text-align: center; cursor: default;
  position: relative;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease), box-shadow .35s var(--ease);
}
.managed-network .mn-topo-node:hover {
  background: rgba(25,187,233,.12); border-color: rgba(25,187,233,.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.4), 0 0 20px rgba(25,187,233,.2);
}
.managed-network .mn-topo-node-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(42,31,217,.4); border: 1px solid rgba(25,187,233,.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-400);
  transition: background .35s var(--ease);
}
.managed-network .mn-topo-node:hover .mn-topo-node-ic { background: rgba(25,187,233,.2); }
.managed-network .mn-topo-node-ic svg { width: 22px; height: 22px; }
.managed-network .mn-topo-node-label {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.88);
  letter-spacing: .02em; line-height: 1.3;
}
.managed-network .mn-topo-node .mn-tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: rgba(10,8,40,.95); border: 1px solid rgba(25,187,233,.35);
  border-radius: 8px; padding: 10px 14px;
  font-size: 11.5px; color: rgba(255,255,255,.82); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 10;
}
.managed-network .mn-topo-node:hover .mn-tooltip { opacity: 1; transform: translateX(-50%) translateY(-2px); }
.managed-network .mn-topo-layer-label {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan-500); margin-bottom: 12px; width: 100%; text-align: center;
  opacity: .7;
}
.managed-network .mn-topo-layer-group { display: flex; flex-direction: column; align-items: center; width: 100%; }
@media (max-width: 720px) {
  .managed-network .mn-topo-node { min-width: 100px; padding: 14px 14px; }
  .managed-network .mn-topo-connector { gap: 30px; }
}
@media (max-width: 480px) {
  .managed-network .mn-topo-layer { flex-wrap: wrap; gap: 10px; }
  .managed-network .mn-topo-node { min-width: 80px; padding: 12px 10px; }
  .managed-network .mn-topo-connector { height: 36px; }
  .managed-network .mn-topo-line { height: 36px; }
}

/* What's Included — 2-col checklist */
.managed-network .mn-included { background: var(--white); }
.managed-network .mn-included-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 40px;
}
.managed-network .mn-inc-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-soft);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.managed-network .mn-inc-item:hover {
  border-color: rgba(25,187,233,.4); transform: translateX(4px);
  background: rgba(25,187,233,.03);
}
.managed-network .mn-inc-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--cyan-100); color: var(--cyan-500);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.managed-network .mn-inc-item:hover .mn-inc-check { background: var(--cyan-500); color: #fff; }
.managed-network .mn-inc-check svg { width: 11px; height: 11px; }
.managed-network .mn-inc-item p { font-size: 14px; font-weight: 600; color: var(--indigo-800); margin: 0; line-height: 1.45; }
@media (max-width: 640px) { .managed-network .mn-included-grid { grid-template-columns: 1fr; } }

/* Why ParagonIT — stacked list */
.managed-network .mn-why { background: var(--bg-soft); }
.managed-network .mn-why-list { display: flex; flex-direction: column; gap: 0; margin-top: 56px; }
.managed-network .mn-why-item {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 24px; padding: 28px 32px; align-items: start;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.managed-network .mn-why-item:first-child { border-radius: 16px 16px 0 0; border-top: 1px solid var(--border); }
.managed-network .mn-why-item:last-child  { border-radius: 0 0 16px 16px; }
.managed-network .mn-why-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--cyan-500); transform: scaleY(0); transform-origin: bottom;
  transition: transform .35s var(--ease);
}
.managed-network .mn-why-item:nth-child(2)::before { background: var(--indigo-500); }
.managed-network .mn-why-item:nth-child(3)::before { background: var(--cyan-500); }
.managed-network .mn-why-item:nth-child(4)::before { background: var(--indigo-700); }
.managed-network .mn-why-item:nth-child(5)::before { background: var(--cyan-400); }
.managed-network .mn-why-item:hover::before { transform: scaleY(1); }
.managed-network .mn-why-item:hover { background: var(--white); transform: translateX(6px); }
.managed-network .mn-why-badge {
  font-size: 32px; font-weight: 900; color: rgba(42,31,217,.12);
  font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1;
  padding-top: 4px;
  transition: color .35s var(--ease);
}
.managed-network .mn-why-item:hover .mn-why-badge { color: rgba(42,31,217,.2); }
.managed-network .mn-why-body h3 { font-size: 18px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
.managed-network .mn-why-body p  { font-size: 14.5px; color: var(--gray-600); line-height: 1.65; margin: 0; }
@media (max-width: 640px) {
  .managed-network .mn-why-item { grid-template-columns: 60px 1fr; gap: 14px; padding: 22px 20px; }
  .managed-network .mn-why-badge { font-size: 24px; }
}

/* Who It's For */
.managed-network .mn-who { background: var(--white); }
.managed-network .mn-who-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 40px;
}
.managed-network .mn-who-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-soft);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.managed-network .mn-who-item:hover { border-color: rgba(42,31,217,.25); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,10,58,.07); }
.managed-network .mn-who-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(42,31,217,.08); color: var(--indigo-700);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.managed-network .mn-who-dot svg { width: 11px; height: 11px; }
.managed-network .mn-who-item p { font-size: 14px; font-weight: 500; color: var(--indigo-800); margin: 0; line-height: 1.45; }
@media (max-width: 640px) { .managed-network .mn-who-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   MANAGED BACKUPS PAGE — page-scoped styles (.managed-backups namespace)
   Extracted from: managed-backups.html inline <style> block
   ===================================================================== */

.managed-backups .mb-section { padding: 112px 0; position: relative; }
.managed-backups .mb-section--soft { background: var(--bg-soft); }

/* Split solution section */
.managed-backups .mb-solution-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.managed-backups .mb-solution-text h2 {
  font-size: clamp(30px, 3.8vw, 50px); line-height: 1.12; font-weight: 700;
  letter-spacing: -0.02em; color: var(--indigo-800); margin: 16px 0 20px;
}
.managed-backups .mb-solution-text p {
  font-size: 16.5px; color: var(--gray-600); line-height: 1.72; margin-bottom: 20px;
}
.managed-backups .mb-solution-visual {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative;
}
.managed-backups .mb-solution-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4/3; transition: transform .7s var(--ease);
}
.managed-backups .mb-solution-visual:hover img { transform: scale(1.03); }

/* Service bars */
.managed-backups .mb-service-bars {
  display: flex; flex-direction: column; gap: 0;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.managed-backups .mb-service-bar {
  display: grid; grid-template-columns: 72px 1fr 52px;
  align-items: center; gap: 0;
  border-bottom: 1px solid var(--border); background: var(--white);
  position: relative; overflow: hidden;
  transition: background var(--transition-fast); cursor: default;
}
.managed-backups .mb-service-bar:last-child { border-bottom: none; }
.managed-backups .mb-service-bar::before {
  content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 0;
  background: linear-gradient(180deg, var(--indigo-700) 0%, var(--cyan-500) 100%);
  transition: height .4s var(--ease); border-radius: 0 2px 2px 0;
}
.managed-backups .mb-service-bar:hover::before { height: 100%; }
.managed-backups .mb-service-bar:hover { background: var(--bg-soft); }
.managed-backups .mb-service-bar-num {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 28px 20px;
  background: linear-gradient(180deg, var(--indigo-800) 0%, var(--indigo-900) 100%);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--cyan-400); text-transform: uppercase; min-width: 72px;
  position: relative; z-index: 1;
}
.managed-backups .mb-service-bar-body { padding: 24px 28px 24px 24px; position: relative; z-index: 1; }
.managed-backups .mb-service-bar-body h3 {
  font-size: 17px; font-weight: 700; color: var(--indigo-800); margin: 0 0 6px;
  line-height: 1.3; transition: color var(--transition-fast);
}
.managed-backups .mb-service-bar:hover .mb-service-bar-body h3 { color: var(--indigo-700); }
.managed-backups .mb-service-bar-body p { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin: 0; }
.managed-backups .mb-service-bar-icon {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px; color: var(--gray-300);
  transition: color var(--transition-fast), transform var(--transition-fast);
  position: relative; z-index: 1;
}
.managed-backups .mb-service-bar-icon svg { width: 24px; height: 24px; stroke: currentColor; }
.managed-backups .mb-service-bar:hover .mb-service-bar-icon { color: var(--cyan-500); transform: scale(1.12); }

/* Capabilities checklist grid */
.managed-backups .mb-caps-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; margin-top: 48px;
}
.managed-backups .mb-cap-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px 16px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--white);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: default; position: relative; overflow: hidden;
}
.managed-backups .mb-cap-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cyan-500); transform: scaleY(0); transform-origin: bottom;
  transition: transform .35s var(--ease); border-radius: 0 2px 2px 0;
}
.managed-backups .mb-cap-item:hover::before { transform: scaleY(1); }
.managed-backups .mb-cap-item:hover { transform: translateX(4px); border-color: rgba(25,187,233,.35); box-shadow: var(--shadow-sm); }
.managed-backups .mb-cap-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cyan-100); color: var(--cyan-500);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.managed-backups .mb-cap-item:hover .mb-cap-icon { background: var(--cyan-500); color: var(--white); transform: scale(1.1); }
.managed-backups .mb-cap-icon svg { width: 14px; height: 14px; }
.managed-backups .mb-cap-item span { font-size: 14.5px; font-weight: 600; color: var(--indigo-800); line-height: 1.3; }

/* Business Continuity Recovery Journey */
.managed-backups .mb-journey-section {
  background: var(--bg-soft); padding: 112px 0; overflow: hidden; position: relative;
}
.managed-backups .mb-journey-section::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(25,187,233,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(42,31,217,.06) 0%, transparent 55%);
  pointer-events: none;
}
.managed-backups .mb-journey-track {
  display: flex; align-items: stretch; gap: 0; margin-top: 64px;
  overflow-x: auto; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.managed-backups .mb-journey-track::-webkit-scrollbar { height: 4px; }
.managed-backups .mb-journey-track::-webkit-scrollbar-track { background: transparent; }
.managed-backups .mb-journey-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.managed-backups .mb-journey-stage {
  flex: 1; min-width: 200px; max-width: 260px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 32px 24px 28px;
  position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  cursor: default; flex-shrink: 0;
}
.managed-backups .mb-journey-stage:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 52px rgba(16,10,58,.13), 0 0 0 1px rgba(25,187,233,.2);
  border-color: rgba(25,187,233,.3); z-index: 2;
}
.managed-backups .mb-journey-stage--warning { border-top: 3px solid #e85c5c; }
.managed-backups .mb-journey-stage--indigo  { border-top: 3px solid var(--indigo-700); }
.managed-backups .mb-journey-stage--success { border-top: 3px solid var(--cyan-500); }
.managed-backups .mb-stage-num {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 16px;
}
.managed-backups .mb-journey-stage--warning .mb-stage-num { color: #e85c5c; }
.managed-backups .mb-journey-stage--indigo  .mb-stage-num { color: var(--indigo-600); }
.managed-backups .mb-journey-stage--success .mb-stage-num { color: var(--cyan-500); }
.managed-backups .mb-stage-icon-wrap {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; transition: transform .35s var(--ease);
}
.managed-backups .mb-journey-stage:hover .mb-stage-icon-wrap { transform: scale(1.08) rotate(-3deg); }
.managed-backups .mb-journey-stage--warning .mb-stage-icon-wrap { background: rgba(232,92,92,.12); color: #e85c5c; }
.managed-backups .mb-journey-stage--indigo  .mb-stage-icon-wrap { background: rgba(42,31,217,.1);  color: var(--indigo-600); }
.managed-backups .mb-journey-stage--success .mb-stage-icon-wrap { background: rgba(25,187,233,.12); color: var(--cyan-500); }
.managed-backups .mb-stage-icon-wrap svg {
  width: 26px; height: 26px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.managed-backups .mb-stage-name {
  font-size: 15px; font-weight: 700; color: var(--indigo-800);
  line-height: 1.3; margin-bottom: 10px; letter-spacing: -0.01em;
}
.managed-backups .mb-stage-desc { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
.managed-backups .mb-journey-arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px; flex-shrink: 0; color: var(--gray-300); align-self: center;
}
.managed-backups .mb-journey-arrow svg {
  width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Why ParagonIT stacked list */
.managed-backups .mb-why-list { display: flex; flex-direction: column; gap: 0; margin-top: 48px; }
.managed-backups .mb-why-item {
  display: grid; grid-template-columns: 52px 1fr; gap: 0 28px;
  align-items: flex-start; padding: 28px 0;
  border-bottom: 1px solid var(--border); position: relative;
  transition: padding-left var(--transition-fast);
}
.managed-backups .mb-why-item:first-child { padding-top: 0; }
.managed-backups .mb-why-item:last-child  { border-bottom: none; }
.managed-backups .mb-why-num {
  font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--indigo-700) 0%, var(--cyan-500) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-top: 2px; flex-shrink: 0; transition: transform var(--transition-fast);
}
.managed-backups .mb-why-item:hover .mb-why-num { transform: scale(1.08); }
.managed-backups .mb-why-item:nth-child(odd)  { border-left: 3px solid var(--indigo-700); padding-left: 20px; }
.managed-backups .mb-why-item:nth-child(even) { border-left: 3px solid var(--cyan-500);   padding-left: 20px; }
.managed-backups .mb-why-item:hover { padding-left: 26px; }
.managed-backups .mb-why-body h3 {
  font-size: 17px; font-weight: 700; color: var(--indigo-800); margin: 0 0 6px;
  line-height: 1.3; transition: color var(--transition-fast);
}
.managed-backups .mb-why-item:hover .mb-why-body h3 { color: var(--indigo-700); }
.managed-backups .mb-why-body p { font-size: 14.5px; color: var(--gray-600); margin: 0; line-height: 1.65; }

/* Continuity split section */
.managed-backups .mb-continuity-split {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.managed-backups .mb-continuity-left {
  background: linear-gradient(160deg, var(--indigo-800) 0%, var(--indigo-900) 100%);
  color: var(--white); padding: 60px 52px; position: relative; overflow: hidden;
}
.managed-backups .mb-continuity-left::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(25,187,233,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(42,31,217,.3) 0%, transparent 55%);
  pointer-events: none;
}
.managed-backups .mb-continuity-left > * { position: relative; z-index: 1; }
.managed-backups .mb-continuity-left .section-eyebrow { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
.managed-backups .mb-continuity-left h2 {
  font-size: clamp(24px, 3vw, 38px); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--white); margin: 18px 0 22px;
}
.managed-backups .mb-continuity-left p { font-size: 15.5px; line-height: 1.72; color: rgba(255,255,255,.78); margin: 0; }
.managed-backups .mb-continuity-right { background: var(--white); padding: 60px 52px; }
.managed-backups .mb-continuity-right h3 {
  font-size: 22px; font-weight: 700; color: var(--indigo-800); margin: 0 0 28px; letter-spacing: -0.01em;
}
.managed-backups .mb-who-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.managed-backups .mb-who-checklist li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 15px; color: var(--gray-700); line-height: 1.55;
  padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  cursor: default;
}
.managed-backups .mb-who-checklist li:hover {
  border-color: rgba(25,187,233,.3); background: var(--cyan-100); transform: translateX(4px);
}
.managed-backups .mb-who-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cyan-100); color: var(--cyan-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.managed-backups .mb-who-checklist li:hover .mb-who-check { background: var(--cyan-500); color: var(--white); }
.managed-backups .mb-who-check svg { width: 12px; height: 12px; }

/* FAQ light variant */
.managed-backups .faq--light { background: var(--bg-soft); padding: 112px 0; }
.managed-backups .faq--light .faq-inner {
  display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: flex-start;
}
.managed-backups .faq--light .faq-sidebar { position: sticky; top: calc(var(--header-h) + 32px); }
.managed-backups .faq--light .faq-sidebar .section-eyebrow { background: var(--cyan-100); color: var(--cyan-500); }
.managed-backups .faq--light .faq-sidebar h2 {
  font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--indigo-800); margin: 18px 0 16px;
}
.managed-backups .faq--light .faq-sidebar p { font-size: 15px; color: var(--gray-600); line-height: 1.65; margin-bottom: 28px; }
.managed-backups .faq--light .faq-list-light { display: flex; flex-direction: column; gap: 12px; }
.managed-backups .faq--light .faq-item-light {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.managed-backups .faq--light .faq-item-light[open] { box-shadow: var(--shadow-md); border-color: rgba(25,187,233,.25); }
.managed-backups .faq--light .faq-item-light summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; font-weight: 600; font-size: 15.5px; color: var(--indigo-800);
  cursor: pointer; list-style: none; user-select: none;
  transition: background var(--transition-fast);
}
.managed-backups .faq--light .faq-item-light summary::-webkit-details-marker { display: none; }
.managed-backups .faq--light .faq-item-light[open] summary { background: rgba(25,187,233,.04); color: var(--indigo-700); }
.managed-backups .faq--light .faq-toggle {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 18px; color: var(--gray-600); line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.managed-backups .faq--light .faq-item-light[open] .faq-toggle { background: var(--cyan-500); color: var(--white); transform: rotate(45deg); }
.managed-backups .faq--light .faq-answer { padding: 0 24px 22px; font-size: 15px; color: var(--gray-600); line-height: 1.72; }

/* CTA stats row */
.managed-backups .mb-cta-stats {
  display: flex; gap: 32px 40px; flex-wrap: wrap; margin-top: 36px;
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,.14); justify-content: center;
}
.managed-backups .mb-cta-stat { text-align: center; }
.managed-backups .mb-cta-stat .num {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, var(--cyan-300) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: block;
}
.managed-backups .mb-cta-stat .lbl { font-size: 12.5px; color: rgba(255,255,255,.65); letter-spacing: 0.02em; margin-top: 4px; }

/* Solution bullet points */
.managed-backups .mb-bullet-list { list-style: none; margin: 22px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.managed-backups .mb-bullet-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--gray-700); line-height: 1.5; }
.managed-backups .mb-bullet-list li::before {
  content: '';
  width: 18px; height: 18px; border-radius: 50%; background: var(--cyan-100); flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-6' stroke='%2319bbe9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px 11px; background-repeat: no-repeat; background-position: center; margin-top: 1px;
}

/* Responsive */
@media (max-width: 860px) {
  .managed-backups .mb-solution-grid { grid-template-columns: 1fr; gap: 40px; }
  .managed-backups .mb-continuity-split { grid-template-columns: 1fr; }
  .managed-backups .mb-continuity-left,
  .managed-backups .mb-continuity-right { padding: 44px 36px; }
  .managed-backups .mb-caps-grid { grid-template-columns: 1fr; gap: 10px; }
  .managed-backups .faq--light .faq-inner { grid-template-columns: 1fr; gap: 48px; }
  .managed-backups .faq--light .faq-sidebar { position: static; }
  .managed-backups .mb-why-item { grid-template-columns: 40px 1fr; gap: 0 20px; }
  .managed-backups .mb-why-num { font-size: 26px; }
}
@media (max-width: 700px) {
  .managed-backups .mb-section,
  .managed-backups .mb-journey-section,
  .managed-backups .faq--light { padding: 72px 0; }
  .managed-backups .mb-service-bar { grid-template-columns: 56px 1fr 40px; }
  .managed-backups .mb-service-bar-num { min-width: 56px; padding: 20px 12px; font-size: 10px; }
  .managed-backups .mb-service-bar-body { padding: 18px 16px 18px 18px; }
  .managed-backups .mb-service-bar-icon { padding: 18px 12px; }
  .managed-backups .mb-continuity-left,
  .managed-backups .mb-continuity-right { padding: 36px 28px; }
}
@media (max-width: 520px) {
  .managed-backups .mb-journey-track { flex-direction: column; overflow-x: visible; gap: 4px; }
  .managed-backups .mb-journey-stage { max-width: 100%; min-width: 0; }
  .managed-backups .mb-journey-arrow { transform: rotate(90deg); padding: 4px 0; }
  .managed-backups .mb-caps-grid { gap: 8px; }
  .managed-backups .mb-why-item:nth-child(odd),
  .managed-backups .mb-why-item:nth-child(even) { padding-left: 16px; }
  .managed-backups .mb-why-item:hover { padding-left: 22px; }
}

/* ai-strategy css start */

      /* ── ai-strategy.html page-scoped styles (.ais- prefix) ── */

      /* ── Microsoft ecosystem tag strip ── */
      .ai-strategy .ais-ecosystem { background: var(--white); padding: 36px 0; border-bottom: 1px solid var(--border); }
      .ai-strategy .ais-ecosystem-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
      .ai-strategy .ais-eco-label { font-size: 12px; font-weight: 700; color: var(--gray-500); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; margin-right: 8px; }
      .ai-strategy .ais-eco-tags { display: flex; flex-wrap: wrap; gap: 8px; }
      .ai-strategy .ais-eco-tag {
        display: flex; align-items: center; gap: 7px;
        font-size: 13px; font-weight: 600; color: var(--indigo-700);
        padding: 6px 14px; border-radius: 100px;
        border: 1px solid rgba(42,31,217,.15); background: rgba(42,31,217,.04);
        transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
      }
      .ai-strategy .ais-eco-tag:hover { border-color: rgba(25,187,233,.4); background: rgba(25,187,233,.05); transform: translateY(-1px); }
      .ai-strategy .ais-eco-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--indigo-500); }

      /* ── Challenge pull-quote band ── */
      .ai-strategy .ais-challenge { background: var(--bg-soft); padding: 80px 0; }
      .ai-strategy .ais-challenge-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
      .ai-strategy .ais-challenge-quote {
        padding: 40px 44px; border-radius: 20px;
        background: linear-gradient(135deg, var(--indigo-800) 0%, #1a1580 100%);
        position: relative; overflow: hidden;
      }
      .ai-strategy .ais-challenge-quote::before {
        content: "\201C"; font-family: 'Instrument Serif', Georgia, serif;
        font-size: 140px; line-height: .8; color: rgba(255,255,255,.06);
        position: absolute; top: 12px; left: 20px; pointer-events: none;
      }
      .ai-strategy .ais-challenge-quote p {
        font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
        font-size: 22px; line-height: 1.55; color: rgba(255,255,255,.92);
        margin: 0 0 24px; position: relative; z-index: 1;
      }
      .ai-strategy .ais-challenge-quote cite { font-size: 13px; font-weight: 600; color: var(--cyan-400); font-style: normal; display: block; position: relative; z-index: 1; }
      .ai-strategy .ais-challenge-points { display: flex; flex-direction: column; gap: 16px; }
      .ai-strategy .ais-challenge-point {
        display: flex; gap: 16px; align-items: flex-start;
        padding: 18px 22px; border-radius: 14px; border: 1px solid var(--border);
        background: var(--white);
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .ai-strategy .ais-challenge-point:hover { border-color: rgba(42,31,217,.2); transform: translateX(4px); box-shadow: 0 6px 20px rgba(16,10,58,.07); }
      .ai-strategy .ais-challenge-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: rgba(25,187,233,.1); color: var(--cyan-500); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .ai-strategy .ais-challenge-point:hover .ais-challenge-ic { background: var(--cyan-500); color: #fff; }
      .ai-strategy .ais-challenge-ic svg { width: 18px; height: 18px; }
      .ai-strategy .ais-challenge-point-body h5 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0 0 4px; }
      .ai-strategy .ais-challenge-point-body p { font-size: 13px; color: var(--gray-600); line-height: 1.55; margin: 0; }
      @media (max-width: 780px) { .ai-strategy .ais-challenge-inner { grid-template-columns: 1fr; gap: 32px; } }

      /* ── SIGNATURE: Services — dark 2-col large card grid ── */
      .ai-strategy .ais-services-section {
        background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .ai-strategy .ais-services-section::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 85% 15%, rgba(25,187,233,.14) 0%, transparent 50%),
                    radial-gradient(ellipse at 5% 85%, rgba(42,31,217,.2) 0%, transparent 45%);
        pointer-events: none;
      }
      .ai-strategy .ais-services-section .container { position: relative; z-index: 1; }
      .ai-strategy .ais-svc-head { text-align: center; margin-bottom: 52px; }
      .ai-strategy .ais-svc-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
      .ai-strategy .ais-svc-head p { color: rgba(255,255,255,.65); font-size: 16px; max-width: 620px; margin: 0 auto; line-height: 1.7; }
      .ai-strategy .ais-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      .ai-strategy .ais-svc-card {
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
        border-radius: 18px; padding: 34px 30px;
        display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start;
        position: relative; overflow: hidden;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .ai-strategy .ais-svc-card::after {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
        background: linear-gradient(180deg, var(--cyan-400), var(--indigo-400));
        transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
      }
      .ai-strategy .ais-svc-card:hover::after { transform: scaleY(1); }
      .ai-strategy .ais-svc-card:hover { background: rgba(25,187,233,.07); border-color: rgba(25,187,233,.3); transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0,0,0,.4); }
      .ai-strategy .ais-svc-icon { width: 48px; height: 48px; border-radius: 13px; background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.22); display: flex; align-items: center; justify-content: center; color: var(--cyan-400); transition: background .3s var(--ease); flex-shrink: 0; }
      .ai-strategy .ais-svc-card:hover .ais-svc-icon { background: rgba(25,187,233,.22); }
      .ai-strategy .ais-svc-icon svg { width: 22px; height: 22px; }
      .ai-strategy .ais-svc-body h3 { font-size: 17px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0 0 10px; }
      .ai-strategy .ais-svc-body p { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.65; margin: 0; }
      @media (max-width: 720px) { .ai-strategy .ais-svc-grid { grid-template-columns: 1fr; } }

      /* ── Adoption journey — 6-step numbered horizontal progression ── */
      .ai-strategy .ais-journey { background: var(--white); }
      .ai-strategy .ais-journey-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
        border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
        margin-top: 52px;
      }
      .ai-strategy .ais-step {
        padding: 32px 28px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
        position: relative; overflow: hidden; background: var(--white);
        transition: background .3s var(--ease);
      }
      .ai-strategy .ais-step:nth-child(3n) { border-right: none; }
      .ai-strategy .ais-step:nth-last-child(-n+3) { border-bottom: none; }
      .ai-strategy .ais-step::before {
        content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .ai-strategy .ais-step:hover::before { transform: scaleX(1); }
      .ai-strategy .ais-step:hover { background: rgba(42,31,217,.015); }
      .ai-strategy .ais-step-num {
        font-size: 44px; font-weight: 900; color: rgba(42,31,217,.07); line-height: 1;
        font-family: 'Plus Jakarta Sans', sans-serif; margin-bottom: 12px;
        transition: color .35s var(--ease);
      }
      .ai-strategy .ais-step:hover .ais-step-num { color: rgba(42,31,217,.13); }.ai-strategy 
      .ais-step h4 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .ai-strategy .ais-step p { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 760px) {
        .ai-strategy .ais-journey-grid { grid-template-columns: 1fr 1fr; }
        .ai-strategy .ais-step:nth-child(3n) { border-right: 1px solid var(--border); }
        .ai-strategy .ais-step:nth-child(2n) { border-right: none; }
        .ai-strategy .ais-step:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); }
        .ai-strategy .ais-step:nth-last-child(-n+2) { border-bottom: none; }
        .ai-strategy .ais-step:last-child { border-bottom: none; border-right: none; }
      }
      @media (max-width: 480px) {
        .ai-strategy .ais-journey-grid { grid-template-columns: 1fr; }
        .ai-strategy .ais-step { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
        .ai-strategy .ais-step:last-child { border-bottom: none !important; }
      }

      /* ── Benefits + Who it's for — side-by-side ── */
      .ai-strategy .ais-bottom { background: var(--bg-soft); }
      .ai-strategy .ais-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: start; }
      .ai-strategy .ais-benefits-list { display: flex; flex-direction: column; gap: 10px; }
      .ai-strategy .ais-benefit-row {
        display: flex; gap: 14px; align-items: flex-start;
        padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border);
        background: var(--white); font-size: 14px; font-weight: 500; color: var(--indigo-800); line-height: 1.45;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .ai-strategy .ais-benefit-row:hover { border-color: rgba(25,187,233,.3); transform: translateX(4px); box-shadow: 0 4px 14px rgba(16,10,58,.06); }
      .ai-strategy .ais-benefit-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: rgba(25,187,233,.1); color: var(--cyan-500); display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background .3s var(--ease); }
      .ai-strategy .ais-benefit-row:hover .ais-benefit-dot { background: var(--cyan-500); color: #fff; }
      .ai-strategy .ais-benefit-dot svg { width: 11px; height: 11px; }
      .ai-strategy .ais-who-list { display: flex; flex-direction: column; gap: 12px; }
      .ai-strategy .ais-who-item {
        display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px;
        border-radius: 12px; border: 1px solid var(--border); background: var(--white);
        transition: border-color .3s var(--ease), transform .3s var(--ease);
      }
      .ai-strategy .ais-who-item:hover { border-color: rgba(42,31,217,.2); transform: translateX(4px); }
      .ai-strategy .ais-who-num { font-size: 22px; font-weight: 900; color: rgba(42,31,217,.12); flex-shrink: 0; line-height: 1; font-family: 'Plus Jakarta Sans', sans-serif; min-width: 28px; transition: color .35s var(--ease); }
      .ai-strategy .ais-who-item:hover .ais-who-num { color: rgba(42,31,217,.25); }
      .ai-strategy .ais-who-item p { font-size: 13.5px; color: var(--gray-700); line-height: 1.55; margin: 0; font-weight: 500; }
      @media (max-width: 780px) { .ai-strategy .ais-bottom-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ai-strategy css end */

      /* ── azure.html page-scoped styles ── */

      /* Solutions — vertical accordion style with preview image */
      .azure .az-solutions { background: var(--white); }
      .azure .az-sol-layout {
        display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: start;
        margin-top: 60px;
      }
      .azure .az-sol-accordion { display: flex; flex-direction: column; gap: 4px; }
      .azure .az-sol-item {
        border: 1px solid var(--border); border-radius: var(--radius-md);
        overflow: hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
        cursor: pointer;
      }
      .azure .az-sol-item.active {
        border-color: rgba(0,120,212,.4);
        box-shadow: 0 8px 32px rgba(0,120,212,.12);
      }
      .azure .az-sol-header {
        display: flex; align-items: center; gap: 16px;
        padding: 20px 22px; transition: background .25s var(--ease);
      }
      .azure .az-sol-item.active .az-sol-header { background: rgba(0,120,212,.04); }
      .azure .az-sol-icon {
        width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease), transform .3s var(--ease);
      }
      .azure .az-sol-item.active .az-sol-icon { transform: scale(1.08); }
      .azure .az-sol-title { font-size: 15px; font-weight: 700; color: var(--indigo-800); flex: 1; transition: color .25s var(--ease); }
      .azure .az-sol-item.active .az-sol-title { color: #0078d4; }
      .azure .az-sol-chevron {
        color: var(--gray-400); transition: transform .3s var(--ease), color .25s var(--ease);
      }
      .azure .az-sol-item.active .az-sol-chevron { transform: rotate(180deg); color: #0078d4; }
      .azure .az-sol-body {
        max-height: 0; overflow: hidden;
        transition: max-height .45s var(--ease), padding .3s var(--ease);
        padding: 0 22px;
      }
      .azure .az-sol-item.active .az-sol-body { max-height: 300px; padding: 0 22px 20px; }
      .azure .az-sol-desc { font-size: 14.5px; color: var(--gray-600); line-height: 1.65; margin: 0; }

      /* Preview image panel */
      .azure .az-sol-preview {
        position: sticky; top: 100px;
        border-radius: var(--radius-lg); overflow: hidden;
        aspect-ratio: 4/3;
        box-shadow: 0 24px 60px rgba(16,10,58,.15);
      }
      .azure .az-sol-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .azure .az-sol-preview-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, transparent 40%, rgba(0,40,100,.7) 100%);
        display: flex; align-items: flex-end; padding: 24px;
      }
      .azure .az-sol-preview-label { color: rgba(255,255,255,.9); font-size: 14px; font-weight: 600; }
      @media (max-width: 1000px) {
        .azure .az-sol-layout { grid-template-columns: 1fr; gap: 40px; }
        .azure .az-sol-preview { position: static; }
      }

      /* Delivery capabilities — horizontal accent list */
      .azure .az-capabilities { background: var(--bg-soft); }
      .azure .az-cap-layout {
        display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
        margin-top: 56px;
      }
      .azure .az-cap-img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
      .azure .az-cap-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
      .azure .az-cap-img:hover img { transform: scale(1.04); }
      .azure .az-cap-list { display: flex; flex-direction: column; gap: 16px; }
      .azure .az-cap-row {
        display: flex; align-items: flex-start; gap: 14px;
        padding: 18px 20px; background: var(--white); border-radius: 12px;
        border: 1px solid var(--border);
        transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
      }
      .azure .az-cap-row:hover { transform: translateX(4px); border-color: rgba(0,120,212,.3); box-shadow: 0 4px 18px rgba(0,120,212,.08); }
      .azure .az-cap-ic {
        width: 36px; height: 36px; border-radius: 8px; background: rgba(0,120,212,.1);
        flex-shrink: 0; display: flex; align-items: center; justify-content: center;
        transition: background .25s var(--ease), transform .25s var(--ease);
      }
      .azure .az-cap-row:hover .az-cap-ic { background: #0078d4; transform: scale(1.08); }
      .azure .az-cap-row:hover .az-cap-ic svg { color: #fff; }
      .azure .az-cap-ic svg { color: #0078d4; transition: color .25s var(--ease); }
      .azure .az-cap-body { flex: 1; }
      .azure .az-cap-title { font-size: 14.5px; font-weight: 700; color: var(--indigo-800); margin: 0 0 3px; }
      .azure .az-cap-desc { font-size: 13px; color: var(--gray-600); margin: 0; line-height: 1.5; }
      @media (max-width: 860px) { .azure .az-cap-layout { grid-template-columns: 1fr; gap: 36px; } }

      /* Signature Section: Azure Architecture Comparison */
      .azure .az-model { background: var(--white); }
      .azure .az-model-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
        background: var(--border); border-radius: var(--radius-lg); overflow: hidden;
        margin-top: 56px;
      }
      .azure .az-model-col {
        background: var(--white); padding: 36px 28px;
        transition: background .3s var(--ease);
      }
      .azure .az-model-col:hover { background: linear-gradient(160deg, rgba(0,120,212,.04) 0%, var(--white) 100%); }
      .azure .az-model-col-tag {
        font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
        color: rgba(0,120,212,.7); margin-bottom: 16px;
      }
      .azure .az-model-col h4 { font-size: 18px; font-weight: 800; color: var(--indigo-800); margin: 0 0 12px; }
      .azure .az-model-col p { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin: 0 0 20px; }
      .azure .az-model-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
      .azure .az-model-col ul li {
        font-size: 13px; color: var(--gray-700); padding: 7px 10px;
        border-radius: 7px; border-left: 2px solid rgba(0,120,212,.25);
        transition: background .2s var(--ease), border-color .2s var(--ease);
      }
      .azure .az-model-col ul li:hover { background: rgba(0,120,212,.05); border-color: #0078d4; }
      .azure .az-model-col.az-model-featured {
        background: linear-gradient(155deg, var(--indigo-800) 0%, #0a1a4a 100%);
      }
      .azure .az-model-col.az-model-featured .az-model-col-tag { color: var(--cyan-400); }
      .azure .az-model-col.az-model-featured h4 { color: #fff; }
      .azure .az-model-col.az-model-featured p { color: rgba(255,255,255,.7); }
      .azure .az-model-col.az-model-featured ul li { color: rgba(255,255,255,.85); border-left-color: rgba(25,187,233,.4); }
      .azure .az-model-col.az-model-featured ul li:hover { background: rgba(255,255,255,.06); border-left-color: var(--cyan-500); }
      .azure .az-model-col.az-model-featured:hover { background: linear-gradient(155deg, var(--indigo-800) 0%, #0a1a4a 100%); }
      @media (max-width: 860px) { .azure .az-model-grid { grid-template-columns: 1fr; } }

      /* Why ParagonIT for Azure */
      .azure .az-why { background: linear-gradient(135deg, var(--indigo-900) 0%, #04070f 100%); color: #fff; }
      .azure .az-why-row {
        display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: center;
        margin-top: 56px;
      }
      .azure .az-why-left h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: #fff; margin: 0 0 16px; line-height: 1.2; }
      .azure .az-why-left p { font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.7; margin: 0 0 28px; }
      .azure .az-why-bullets { display: flex; flex-direction: column; gap: 12px; }
      .azure .az-why-bullet {
        display: flex; align-items: flex-start; gap: 12px;
        color: rgba(255,255,255,.8); font-size: 14.5px; padding: 12px 16px;
        border-radius: 10px; border: 1px solid rgba(255,255,255,.07);
        transition: background .25s var(--ease), border-color .25s var(--ease);
      }
      .azure .az-why-bullet:hover { background: rgba(255,255,255,.05); border-color: rgba(25,187,233,.3); }
      .azure .az-why-bullet-ic { color: var(--cyan-400); flex-shrink: 0; }
      .azure .az-why-right { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
      .azure .az-why-stat {
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
        border-radius: var(--radius-md); padding: 28px 24px; text-align: center;
        transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
      }
      .azure .az-why-stat:hover { background: rgba(0,120,212,.1); border-color: rgba(0,120,212,.3); transform: translateY(-3px); }
      .azure .az-why-stat-num { font-size: 36px; font-weight: 800; color: #5bc0f8; line-height: 1; margin-bottom: 8px; display: block; }
      .azure .az-why-stat-lbl { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.4; }
      @media (max-width: 900px) {
        .azure .az-why-row { grid-template-columns: 1fr; gap: 44px; }
        .azure .az-why-right { grid-template-columns: 1fr 1fr; }
      }
      @media (max-width: 480px) { .azure .az-why-right { grid-template-columns: 1fr; } }

      /* Business Central style start */

          /* ── business-central.html page-scoped styles (.bc- prefix) ── */

      /* ── Why BC — 3-col benefit grid (NOT cards — horizontal split rows) ── */
      .business-central .bc-why { background: var(--bg-soft); }
      .business-central .bc-why-grid {
        display: grid; grid-template-columns: repeat(3,1fr);
        gap: 0; margin-top: 48px;
        background: var(--white); border-radius: 18px; overflow: hidden;
        border: 1px solid var(--border);
      }
      .business-central .bc-why-item {
        padding: 32px 28px; border-right: 1px solid var(--border);
        position: relative; overflow: hidden;
        transition: background .3s var(--ease);
      }
      .business-central .bc-why-item:nth-child(3n) { border-right: none; }
      .business-central .bc-why-item:nth-child(n+4) { border-top: 1px solid var(--border); }
      .business-central .bc-why-item::before {
        content: ""; position: absolute; bottom: 0; left: 0; right: 0;
        height: 3px; background: var(--cyan-500); transform: scaleX(0);
        transform-origin: left; transition: transform .35s var(--ease);
      }
      .business-central .bc-why-item:hover::before { transform: scaleX(1); }
      .business-central .bc-why-item:hover { background: rgba(25,187,233,.03); }
      .business-central .bc-why-icon {
        width: 42px; height: 42px; border-radius: 10px;
        background: var(--indigo-100,rgba(42,31,217,.08));
        display: flex; align-items: center; justify-content: center;
        color: var(--indigo-600); margin-bottom: 16px;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .business-central .bc-why-item:hover .bc-why-icon { background: var(--indigo-700); color: #fff; }
      .business-central .bc-why-icon svg { width: 20px; height: 20px; }
      .business-central .bc-why-item h3 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .business-central .bc-why-item p  { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 860px) {
        .business-central .bc-why-grid { grid-template-columns: repeat(2,1fr); }
        .business-central .bc-why-item:nth-child(3n) { border-right: 1px solid var(--border); }
        .business-central .bc-why-item:nth-child(2n) { border-right: none; }
        .business-central .bc-why-item:nth-child(n+3) { border-top: 1px solid var(--border); }
      }
      @media (max-width: 520px) {
        .business-central .bc-why-grid { grid-template-columns: 1fr; }
        .business-central .bc-why-item { border-right: none !important; border-top: none; border-bottom: 1px solid var(--border); }
        .business-central .bc-why-item:last-child { border-bottom: none; }
      }

      /* ── Service delivery bars ── */
      .business-central .bc-services { background: var(--white); }
      .business-central .bc-svc-bars { display: flex; flex-direction: column; gap: 0; margin-top: 48px; }
      .business-central .bc-svc-bar {
        display: grid; grid-template-columns: 260px 1fr;
        background: var(--white); border-bottom: 1px solid var(--border);
        position: relative; overflow: hidden;
        transition: background .3s var(--ease), transform .3s var(--ease);
      }
      .business-central .bc-svc-bar:first-child { border-radius: 16px 16px 0 0; border: 1px solid var(--border); }
      .business-central .bc-svc-bar:last-child  { border-radius: 0 0 16px 16px; }
      .business-central .bc-svc-bar:not(:first-child) { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
      .business-central .bc-svc-bar::after {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
        background: var(--cyan-500); transform: scaleY(0); transform-origin: top;
        transition: transform .35s var(--ease); border-radius: 2px 0 0 2px;
      }
      .business-central .bc-svc-bar:nth-child(2)::after { background: var(--indigo-500); }
      .business-central .bc-svc-bar:nth-child(3)::after { background: var(--cyan-400); }
      .business-central .bc-svc-bar:nth-child(4)::after { background: var(--indigo-700); }
      .business-central .bc-svc-bar:nth-child(5)::after { background: var(--cyan-500); }
      .business-central .bc-svc-bar:nth-child(6)::after { background: var(--indigo-500); }
      .business-central .bc-svc-bar:hover::after { transform: scaleY(1); }
      .business-central .bc-svc-bar:hover { background: var(--bg-soft); transform: translateX(5px); }
      .business-central .bc-svc-left {
        padding: 28px 24px 28px 32px; border-right: 1px solid var(--border);
        display: flex; flex-direction: column; gap: 6px;
      }
      .business-central .bc-svc-num { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-500); }
      .business-central .bc-svc-left h3 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0; line-height: 1.3; }
      .business-central .bc-svc-right { padding: 28px 36px; display: flex; align-items: center; }
      .business-central .bc-svc-right p { font-size: 14.5px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      @media (max-width: 780px) {
        .business-central .bc-svc-bar { grid-template-columns: 1fr; }
        .business-central .bc-svc-left { border-right: none; border-bottom: 1px solid var(--border); padding: 22px 22px 14px; }
        .business-central .bc-svc-right { padding: 14px 22px 22px; }
      }

      /* ── SIGNATURE: ERP Capabilities Module Grid ── */
      .business-central .bc-modules-section { background: linear-gradient(160deg, #0c0b2e 0%, #141069 50%, #0a0830 100%); padding: 96px 0; position: relative; overflow: hidden; }
      .business-central .bc-modules-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 60%, rgba(25,187,233,.1) 0%, transparent 50%), radial-gradient(ellipse at 75% 20%, rgba(42,31,217,.15) 0%, transparent 45%); pointer-events: none; }
      .business-central .bc-modules-section .container { position: relative; z-index: 1; }
      .business-central .bc-modules-head { text-align: center; margin-bottom: 56px; }
      .business-central .bc-modules-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
      .business-central .bc-modules-head p  { color: rgba(255,255,255,.65); font-size: 16px; max-width: 560px; margin: 0 auto; line-height: 1.7; }

      .business-central .bc-modules-grid {
        display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
      }
      .business-central .bc-module {
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
        border-radius: 16px; padding: 28px 22px;
        display: flex; flex-direction: column; gap: 14px;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
        position: relative; overflow: hidden;
      }
      .business-central .bc-module::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, var(--cyan-400), var(--indigo-400));
        transform: scaleX(0); transform-origin: left;
        transition: transform .4s var(--ease);
      }
      .business-central .bc-module:hover::before { transform: scaleX(1); }
      .business-central .bc-module:hover {
        background: rgba(25,187,233,.08); border-color: rgba(25,187,233,.35);
        transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.4);
      }
      .business-central .bc-module-icon {
        width: 46px; height: 46px; border-radius: 12px;
        background: rgba(42,31,217,.35); border: 1px solid rgba(25,187,233,.2);
        display: flex; align-items: center; justify-content: center; color: var(--cyan-400);
        transition: background .35s var(--ease);
      }
      .business-central .bc-module:hover .bc-module-icon { background: rgba(25,187,233,.18); }
      .business-central .bc-module-icon svg { width: 22px; height: 22px; }
      .business-central .bc-module h3 { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0; line-height: 1.3; }
      .business-central .bc-module p  { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.6; margin: 0; }
      /* 4-col → 2-col → 1-col responsive */
      @media (max-width: 900px) { .business-central .bc-modules-grid { grid-template-columns: repeat(2,1fr); } }
      @media (max-width: 480px) { .business-central .bc-modules-grid { grid-template-columns: 1fr; } }

      /* ── Implementation Lifecycle Timeline ── SIGNATURE ── */
      .business-central .bc-timeline-section {
        background: var(--bg-soft); padding: 96px 0; overflow: hidden;
      }
      .business-central .bc-timeline-head { text-align: center; margin-bottom: 60px; }
      .business-central .bc-timeline-head h2 { font-size: clamp(26px,3vw,36px); font-weight: 700; letter-spacing: -0.02em; color: var(--indigo-900); margin: 14px 0 14px; }
      .business-central .bc-timeline-head p  { font-size: 16px; color: var(--gray-600); max-width: 520px; margin: 0 auto; line-height: 1.7; }

      /* Horizontal stepper timeline */
      .business-central .bc-timeline {
        display: grid; grid-template-columns: repeat(6,1fr); gap: 0;
        position: relative; padding-top: 30px;
      }
      /* Connecting line */
      .business-central .bc-timeline::before {
        content: ""; position: absolute; top: 30px; left: calc(100% / 12); right: calc(100% / 12);
        height: 2px; background: linear-gradient(90deg, var(--indigo-200), var(--cyan-300), var(--indigo-200));
        z-index: 0;
      }
      .business-central .bc-tl-step {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        position: relative; z-index: 1; padding: 0 8px;
      }
      .business-central .bc-tl-dot {
        width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
        background: var(--indigo-700); border: 3px solid var(--white);
        box-shadow: 0 0 0 3px var(--indigo-200);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 12px; font-weight: 800;
        transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
        margin-bottom: 20px;
      }
      .business-central .bc-tl-step:hover .bc-tl-dot {
        background: var(--cyan-500); box-shadow: 0 0 0 4px rgba(25,187,233,.25);
        transform: scale(1.15);
      }
      .business-central .bc-tl-content {
        background: var(--white); border: 1px solid var(--border); border-radius: 14px;
        padding: 18px 14px; width: 100%;
        transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
      }
      .business-central .bc-tl-step:hover .bc-tl-content {
        border-color: rgba(42,31,217,.25); box-shadow: 0 10px 30px rgba(16,10,58,.1);
        transform: translateY(-4px);
      }
      .business-central .bc-tl-content h4 { font-size: 13px; font-weight: 700; color: var(--indigo-800); margin: 0 0 6px; line-height: 1.3; }
      .business-central .bc-tl-content p  { font-size: 12px; color: var(--gray-600); line-height: 1.55; margin: 0; }

      @media (max-width: 900px) {
        .business-central .bc-timeline { grid-template-columns: repeat(3,1fr); gap: 20px; }
        .business-central .bc-timeline::before { display: none; }
        .business-central .bc-tl-dot { margin-bottom: 12px; }
      }
      @media (max-width: 520px) {
        .business-central .bc-timeline { grid-template-columns: repeat(2,1fr); gap: 14px; }
      }

      /* ── Our BC Services checklist ── */
      .business-central .bc-scope { background: var(--white); }
      .business-central .bc-scope-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px;
      }
      .business-central .bc-scope-item {
        display: flex; gap: 12px; align-items: flex-start;
        padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border);
        background: var(--bg-soft);
        transition: border-color .3s var(--ease), transform .3s var(--ease);
      }
      .business-central .bc-scope-item:hover { border-color: rgba(25,187,233,.4); transform: translateX(3px); }
      .business-central .bc-scope-check {
        width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
        background: var(--cyan-100,rgba(25,187,233,.1)); color: var(--cyan-600);
        display: flex; align-items: center; justify-content: center; margin-top: 1px;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .business-central .bc-scope-item:hover .bc-scope-check { background: var(--cyan-500); color: #fff; }
      .business-central .bc-scope-check svg { width: 11px; height: 11px; }
      .business-central .bc-scope-item p { font-size: 14px; font-weight: 600; color: var(--indigo-800); margin: 0; line-height: 1.4; }
      @media (max-width: 580px) { .business-central .bc-scope-grid { grid-template-columns: 1fr; } }

      /* ── Who It's For ── */
      .business-central .bc-who { background: var(--bg-soft); }
      .business-central .bc-who-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 48px; }
      .business-central .bc-who-left h3 { font-size: 24px; font-weight: 700; color: var(--indigo-800); margin: 0 0 16px; }
      .business-central .bc-who-left p  { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin: 0 0 14px; }
      .business-central .bc-who-list { display: flex; flex-direction: column; gap: 10px; }
      .business-central .bc-who-list li {
        display: flex; gap: 12px; align-items: flex-start;
        padding: 12px 16px; border-radius: 10px; background: var(--white);
        border: 1px solid var(--border); list-style: none;
        font-size: 14px; font-weight: 500; color: var(--indigo-800);
        transition: border-color .3s var(--ease), transform .3s var(--ease);
      }
      .business-central .bc-who-list li:hover { border-color: rgba(42,31,217,.22); transform: translateX(4px); }
      .business-central .bc-who-list li::before {
        content: ""; width: 8px; height: 8px; border-radius: 50%;
        background: var(--indigo-600); flex-shrink: 0; margin-top: 5px;
      }
      @media (max-width: 780px) { .business-central .bc-who-split { grid-template-columns: 1fr; gap: 28px; } }

      /* Business Central style ends */

      /* Business Nbn style start */

      /* ── business-nbn.html page-scoped styles (.nbn- prefix) ── */

      /* ── Challenges strip — bold callout tags ── */
      .business-nbn .nbn-challenges { background: var(--white); }
      .business-nbn .nbn-ch-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; margin-top: 48px; align-items: start; }
      .business-nbn .nbn-ch-text h3 { font-size: 21px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
      .business-nbn .nbn-ch-text p { font-size: 14.5px; color: var(--gray-600); line-height: 1.75; margin: 0 0 12px; }
      .business-nbn .nbn-ch-text p:last-child { margin: 0; }
      .business-nbn .nbn-ch-tags { display: flex; flex-direction: column; gap: 10px; }
      .business-nbn .nbn-ch-tag {
        display: flex; align-items: flex-start; gap: 14px;
        padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border);
        background: var(--bg-soft); font-size: 13.5px; font-weight: 600; color: var(--gray-700); line-height: 1.4;
        transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
      }
      .business-nbn .nbn-ch-tag:hover { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.03); transform: translateX(4px); box-shadow: 0 4px 12px rgba(16,10,58,.06); }
      .business-nbn .nbn-ch-tag-ic { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: rgba(239,68,68,.1); color: #dc2626; display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .business-nbn .nbn-ch-tag:hover .nbn-ch-tag-ic { background: #dc2626; color: #fff; }
      .business-nbn .nbn-ch-tag-ic svg { width: 14px; height: 14px; }
      @media (max-width: 760px) { .business-nbn .nbn-ch-intro { grid-template-columns: 1fr; gap: 32px; } }

      /* ── SIGNATURE: Services — dark 3-col icon cards ── */
      .business-nbn .nbn-services-section {
        background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .business-nbn .nbn-services-section::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 20% 30%, rgba(25,187,233,.13) 0%, transparent 50%),
                    radial-gradient(ellipse at 85% 70%, rgba(42,31,217,.2) 0%, transparent 45%);
        pointer-events: none;
      }
      .business-nbn .nbn-services-section .container { position: relative; z-index: 1; }
      .business-nbn .nbn-svc-head { text-align: center; margin-bottom: 52px; }
      .business-nbn .nbn-svc-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
      .business-nbn .nbn-svc-head p { color: rgba(255,255,255,.65); font-size: 16px; max-width: 620px; margin: 0 auto; line-height: 1.7; }
      .business-nbn .nbn-svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
      .business-nbn .nbn-svc-card {
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
        border-radius: 16px; padding: 28px 24px;
        display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .business-nbn .nbn-svc-card::after {
        content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--cyan-400), var(--indigo-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .business-nbn .nbn-svc-card:hover::after { transform: scaleX(1); }
      .business-nbn .nbn-svc-card:hover { background: rgba(25,187,233,.07); border-color: rgba(25,187,233,.3); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.4); }
      .business-nbn .nbn-svc-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.22); display: flex; align-items: center; justify-content: center; color: var(--cyan-400); transition: background .3s var(--ease); flex-shrink: 0; }
      .business-nbn .nbn-svc-card:hover .nbn-svc-icon { background: rgba(25,187,233,.22); }
      .business-nbn .nbn-svc-icon svg { width: 20px; height: 20px; }
      .business-nbn .nbn-svc-card h3 { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.9); margin: 0; }
      .business-nbn .nbn-svc-card p { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.65; margin: 0; flex: 1; }
      @media (max-width: 860px) { .business-nbn .nbn-svc-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .business-nbn .nbn-svc-grid { grid-template-columns: 1fr; } }

      /* ── Who it's for — industry tile segment grid ── */
      .business-nbn .nbn-who { background: var(--bg-soft); }
      .business-nbn .nbn-who-grid {
        display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 48px;
      }
      .business-nbn .nbn-who-tile {
        padding: 20px 18px; border-radius: 14px; border: 1px solid var(--border);
        background: var(--white); display: flex; align-items: center; gap: 12px;
        font-size: 14px; font-weight: 600; color: var(--indigo-800); line-height: 1.35;
        position: relative; overflow: hidden;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
      }
      .business-nbn .nbn-who-tile::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
        background: linear-gradient(180deg, var(--indigo-600), var(--cyan-400));
        transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
      }
      .business-nbn .nbn-who-tile:hover::before { transform: scaleY(1); }
      .business-nbn .nbn-who-tile:hover { border-color: rgba(42,31,217,.18); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,10,58,.08); background: rgba(42,31,217,.02); }
      .business-nbn .nbn-who-ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: rgba(42,31,217,.07); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .business-nbn .nbn-who-tile:hover .nbn-who-ic { background: var(--indigo-700); color: #fff; }
      .business-nbn .nbn-who-ic svg { width: 17px; height: 17px; }
      @media (max-width: 860px) { .business-nbn .nbn-who-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 500px) { .business-nbn .nbn-who-grid { grid-template-columns: 1fr; } }

      /* ── Why ParagonIT — 4 horizontal reason panels ── */
      .business-nbn .nbn-why { background: var(--white); }
      .business-nbn .nbn-why-row {
        display: flex; flex-direction: column; gap: 0; margin-top: 48px;
      }
      .business-nbn .nbn-why-item {
        display: grid; grid-template-columns: 56px 1fr 1fr; gap: 28px; align-items: center;
        padding: 24px 0; border-bottom: 1px solid var(--border);
        transition: padding-left .25s var(--ease), background .25s var(--ease);
      }
      .business-nbn .nbn-why-item:first-child { padding-top: 0; }
      .business-nbn .nbn-why-item:last-child { border-bottom: none; padding-bottom: 0; }
      .business-nbn .nbn-why-item:hover { padding-left: 8px; padding-right: 8px; background: rgba(42,31,217,.015); border-radius: 12px; }
      .business-nbn .nbn-why-num {
        width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
        background: rgba(42,31,217,.07); color: var(--indigo-600);
        display: flex; align-items: center; justify-content: center;
        font-size: 16px; font-weight: 800; font-family: 'Plus Jakarta Sans',sans-serif;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .business-nbn .nbn-why-item:hover .nbn-why-num { background: var(--indigo-700); color: #fff; }
      .business-nbn .nbn-why-primary h4 { font-size: 17px; font-weight: 700; color: var(--indigo-800); margin: 0 0 6px; }
      .business-nbn .nbn-why-primary p { font-size: 13.5px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      .business-nbn .nbn-why-detail {
        padding: 14px 18px; border-radius: 11px; border: 1px solid var(--border);
        background: var(--bg-soft); font-size: 13px; color: var(--gray-600); line-height: 1.6;
        transition: border-color .3s var(--ease), background .3s var(--ease);
      }
      .business-nbn .nbn-why-item:hover .nbn-why-detail { border-color: rgba(25,187,233,.25); background: rgba(25,187,233,.03); }
      @media (max-width: 760px) {
        .business-nbn .nbn-why-item { grid-template-columns: 52px 1fr; }
        .business-nbn .nbn-why-detail { display: none; }
      }

      /* ── 5-step approach — compact numbered horizontal ── */
      .business-nbn .nbn-approach { background: var(--bg-soft); }
      .business-nbn .nbn-approach-track {
        display: grid; grid-template-columns: repeat(5,1fr); gap: 0;
        margin-top: 48px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
      }
      .business-nbn .nbn-approach-step {
        padding: 28px 22px; border-right: 1px solid var(--border);
        background: var(--white); position: relative; overflow: hidden;
        transition: background .3s var(--ease);
      }
      .business-nbn .nbn-approach-step:last-child { border-right: none; }
      .business-nbn .nbn-approach-step::after {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .business-nbn .nbn-approach-step:hover::after { transform: scaleX(1); }
      .business-nbn .nbn-approach-step:hover { background: rgba(42,31,217,.015); }
      .business-nbn .nbn-as-num {
        font-size: 38px; font-weight: 900; color: rgba(42,31,217,.06);
        font-family: 'Plus Jakarta Sans',sans-serif; line-height: 1; margin-bottom: 10px;
        transition: color .35s var(--ease);
      }
      .business-nbn .nbn-approach-step:hover .nbn-as-num { color: rgba(42,31,217,.12); }
      .business-nbn .nbn-approach-step h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0 0 6px; }
      .business-nbn .nbn-approach-step p { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 860px) {
        .business-nbn .nbn-approach-track { grid-template-columns: 1fr 1fr 1fr; }
        .business-nbn .nbn-approach-step:nth-child(3) { border-right: none; }
        .business-nbn .nbn-approach-step:nth-child(4), .business-nbn .nbn-approach-step:nth-child(5) { border-top: 1px solid var(--border); }
        .business-nbn .nbn-approach-step:nth-child(5) { border-right: none; }
      }
      @media (max-width: 560px) {
        .business-nbn .nbn-approach-track { grid-template-columns: 1fr 1fr; }
        .business-nbn .nbn-approach-step { border-right: 1px solid var(--border); }
        .business-nbn .nbn-approach-step:nth-child(2n) { border-right: none; }
        .business-nbn .nbn-approach-step:not(:nth-child(1)):not(:nth-child(2)) { border-top: 1px solid var(--border); }
        .business-nbn .nbn-approach-step:nth-child(3) { border-right: 1px solid var(--border); }
      }

      /* ── Broader IT services integration panel ── */
      .business-nbn .nbn-integration { background: var(--white); }
      .business-nbn .nbn-int-inner {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0;
        border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-top: 48px;
      }
      .business-nbn .nbn-int-content {
        padding: 48px 44px; background: var(--white);
        display: flex; flex-direction: column; justify-content: center;
      }
      .business-nbn .nbn-int-content h3 { font-size: 22px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
      .business-nbn .nbn-int-content p { font-size: 14.5px; color: var(--gray-600); line-height: 1.75; margin: 0 0 14px; }
      .business-nbn .nbn-int-content p:last-child { margin: 0; }
      .business-nbn .nbn-int-services {
        padding: 48px 44px; background: linear-gradient(135deg, rgba(42,31,217,.04) 0%, rgba(25,187,233,.04) 100%);
        border-left: 1px solid var(--border);
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start;
      }
      .business-nbn .nbn-int-svc {
        display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
        border: 1px solid var(--border); background: var(--white); font-size: 13px; font-weight: 600; color: var(--indigo-800);
        transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
      }
      .business-nbn .nbn-int-svc:hover { border-color: rgba(25,187,233,.3); background: rgba(25,187,233,.04); transform: translateY(-1px); }
      .business-nbn .nbn-int-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo-500); flex-shrink: 0; }
      @media (max-width: 760px) {
        .business-nbn .nbn-int-inner { grid-template-columns: 1fr; }
        .business-nbn .nbn-int-services { border-left: none; border-top: 1px solid var(--border); }
        .business-nbn .nbn-int-content, .business-nbn .nbn-int-services { padding: 32px 28px; }
      }

      /* Business Nbn style end */

      /* Cloud Phone systems start */

      /* ── cloud-phone-systems.html page-scoped styles (.cph- prefix) ── */

      /* ── Feature capability ribbon strip ── */
      .cloud-phone-systems .cph-ribbon { background: var(--bg-soft); padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
      .cloud-phone-systems.cph-ribbon-inner { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
      .cloud-phone-systems.cph-feat-pill {
        display: flex; align-items: center; gap: 9px;
        padding: 9px 18px; border-radius: 100px;
        border: 1px solid var(--border); background: var(--white);
        font-size: 13px; font-weight: 600; color: var(--indigo-800);
        transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
      }
      .cloud-phone-systems.cph-feat-pill:hover { border-color: rgba(42,31,217,.25); background: rgba(42,31,217,.04); color: var(--indigo-700); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16,10,58,.07); }
      .cloud-phone-systems.cph-feat-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-500); flex-shrink: 0; }

      /* ── SIGNATURE: Dark 2-col services with numbered accent ── */
      .cloud-phone-systems.cph-services-section {
        background: linear-gradient(155deg, #0b0a2b 0%, #13106a 50%, #09082e 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .cloud-phone-systems.cph-services-section::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 80% 10%, rgba(25,187,233,.14) 0%, transparent 50%),
                    radial-gradient(ellipse at 10% 80%, rgba(42,31,217,.18) 0%, transparent 45%);
        pointer-events: none;
      }
      .cloud-phone-systems.cph-services-section .container { position: relative; z-index: 1; }
      .cloud-phone-systems.cph-svc-head { margin-bottom: 52px; }
      .cloud-phone-systems.cph-svc-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
      .cloud-phone-systems.cph-svc-head p { color: rgba(255,255,255,.6); font-size: 16px; max-width: 580px; line-height: 1.7; }
      .cloud-phone-systems.cph-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .cloud-phone-systems.cph-svc-card {
        background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
        border-radius: 16px; padding: 28px 26px; display: flex; gap: 20px; align-items: flex-start;
        position: relative; overflow: hidden;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .cloud-phone-systems.cph-svc-card::after {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
        background: linear-gradient(180deg, var(--cyan-400), var(--indigo-400));
        transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
      }
      .cloud-phone-systems.cph-svc-card:hover::after { transform: scaleY(1); }
      .cloud-phone-systems.cph-svc-card:hover { background: rgba(25,187,233,.06); border-color: rgba(25,187,233,.25); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
      .cloud-phone-systems.cph-svc-num {
        font-size: 32px; font-weight: 900; color: rgba(255,255,255,.1);
        font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; flex-shrink: 0; min-width: 40px;
        transition: color .35s var(--ease);
      }
      .cloud-phone-systems.cph-svc-card:hover .cph-svc-num { color: rgba(25,187,233,.35); }
      .cloud-phone-systems.cph-svc-body h3 { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.9); margin: 0 0 8px; }
      .cloud-phone-systems.cph-svc-body p { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.65; margin: 0; }
      @media (max-width: 720px) { .cloud-phone-systems.cph-svc-grid { grid-template-columns: 1fr; } }

      /* ── Benefits alternating icon rows ── */
      .cloud-phone-systems.cph-benefits { background: var(--bg-soft); }
      .cloud-phone-systems.cph-ben-rows { display: flex; flex-direction: column; gap: 0; margin-top: 52px; }
      .cloud-phone-systems.cph-ben-row {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0;
        border: 1px solid var(--border); overflow: hidden;
        transition: box-shadow .35s var(--ease);
      }
      .cloud-phone-systems.cph-ben-row:first-child { border-radius: 16px 16px 0 0; }
      .cloud-phone-systems.cph-ben-row:last-child { border-radius: 0 0 16px 16px; border-top: none; }
      .cloud-phone-systems.cph-ben-row:not(:first-child) { border-top: none; }
      .cloud-phone-systems.cph-ben-row:hover { box-shadow: 0 0 0 2px rgba(42,31,217,.15), 0 8px 28px rgba(16,10,58,.08); z-index: 1; position: relative; }
      .cloud-phone-systems.cph-ben-content {
        padding: 32px 36px; display: flex; gap: 20px; align-items: flex-start;
        background: var(--white);
        transition: background .3s var(--ease);
      }
      .cloud-phone-systems.cph-ben-content:hover { background: rgba(42,31,217,.015); }
      .cloud-phone-systems.cph-ben-row:nth-child(even) .cph-ben-content { order: 2; }
      .cloud-phone-systems .cph-ben-row:nth-child(even) .cph-ben-accent { order: 1; }
      .cloud-phone-systems .cph-ben-accent {
        padding: 32px 36px; display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, rgba(42,31,217,.05), rgba(25,187,233,.05));
        border-left: 1px solid var(--border); min-height: 120px;
        transition: background .3s var(--ease);
      }
      .cloud-phone-systems .cph-ben-row:nth-child(even) .cph-ben-accent { border-left: none; border-right: 1px solid var(--border); }
      .cloud-phone-systems .cph-ben-row:hover .cph-ben-accent { background: linear-gradient(135deg, rgba(42,31,217,.09), rgba(25,187,233,.07)); }
      .cloud-phone-systems .cph-ben-ic {
        width: 56px; height: 56px; border-radius: 16px;
        background: var(--white); color: var(--indigo-600);
        border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 12px rgba(16,10,58,.06);
        transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
      }
      .cloud-phone-systems .cph-ben-row:hover .cph-ben-ic { background: var(--indigo-700); color: #fff; box-shadow: 0 8px 24px rgba(42,31,217,.25); }
      .cloud-phone-systems .cph-ben-ic svg { width: 26px; height: 26px; }
      .cloud-phone-systems .cph-ben-text { flex-shrink: 0; flex: 1; }
      .cloud-phone-systems .cph-ben-text h4 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .cloud-phone-systems .cph-ben-text p { font-size: 13.5px; color: var(--gray-600); line-height: 1.7; margin: 0; }
      @media (max-width: 700px) {
        .cloud-phone-systems .cph-ben-row { grid-template-columns: 1fr; }
        .cloud-phone-systems .cph-ben-row:nth-child(even) .cph-ben-content { order: 1; }
        .cloud-phone-systems .cph-ben-row:nth-child(even) .cph-ben-accent { order: 2; }
        .cloud-phone-systems .cph-ben-accent { border-left: none !important; border-right: none !important; border-top: 1px solid var(--border); min-height: 80px; }
        .cloud-phone-systems .cph-ben-row:nth-child(even) .cph-ben-accent { border-top: 1px solid var(--border); }
        .cloud-phone-systems .cph-ben-content { padding: 24px 24px; }
      }

      /* ── Who it's for — compact 2-col cards ── */
      .cloud-phone-systems .cph-who { background: var(--white); }
      .cloud-phone-systems .cph-who-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 48px; }
      .cloud-phone-systems .cph-who-card {
        padding: 22px 20px; border: 1px solid var(--border); border-radius: 14px;
        background: var(--bg-soft); position: relative; overflow: hidden;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
      }
      .cloud-phone-systems .cph-who-card::before {
        content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .cloud-phone-systems .cph-who-card:hover::before { transform: scaleX(1); }
      .cloud-phone-systems .cph-who-card:hover { border-color: rgba(42,31,217,.18); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,10,58,.08); background: var(--white); }
      .cloud-phone-systems .cph-who-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(42,31,217,.07); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: background .3s var(--ease); }
      .cloud-phone-systems .cph-who-card:hover .cph-who-ic { background: var(--indigo-700); color: #fff; }
      .cloud-phone-systems .cph-who-ic svg { width: 18px; height: 18px; }
      .cloud-phone-systems .cph-who-card h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0 0 6px; }
      .cloud-phone-systems .cph-who-card p { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 760px) { .cloud-phone-systems .cph-who-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 480px) { .cloud-phone-systems .cph-who-grid { grid-template-columns: 1fr; } }

      /* ── 4-step stacked approach (full-width bordered rows) ── */
      .cloud-phone-systems .cph-approach { background: var(--bg-soft); }
      .cloud-phone-systems .cph-steps-wrap { margin-top: 52px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
      .cloud-phone-systems .cph-step {
        display: grid; grid-template-columns: 72px 1fr; align-items: stretch;
        border-bottom: 1px solid var(--border); background: var(--white);
        transition: background .3s var(--ease);
      }
      .cloud-phone-systems .cph-step:last-child { border-bottom: none; }
      .cloud-phone-systems .cph-step:hover { background: rgba(42,31,217,.015); }
      .cloud-phone-systems .cph-step-num-col {
        background: linear-gradient(180deg, rgba(42,31,217,.06) 0%, rgba(25,187,233,.04) 100%);
        border-right: 1px solid var(--border);
        display: flex; align-items: center; justify-content: center;
        font-size: 18px; font-weight: 900; color: var(--indigo-600);
        font-family: 'Plus Jakarta Sans', sans-serif;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .cloud-phone-systems .cph-step:hover .cph-step-num-col { background: linear-gradient(180deg, rgba(42,31,217,.12) 0%, rgba(25,187,233,.08) 100%); color: var(--indigo-700); }
      .cloud-phone-systems .cph-step-content { padding: 26px 32px; }
      .cloud-phone-systems .cph-step-content h4 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .cloud-phone-systems .cph-step-content p { font-size: 13.5px; color: var(--gray-600); line-height: 1.7; margin: 0; }
      @media (max-width: 560px) {
        .cloud-phone-systems .cph-step { grid-template-columns: 54px 1fr; }
        .cloud-phone-systems .cph-step-content { padding: 20px 20px; }
        .cloud-phone-systems .cph-step-num-col { font-size: 14px; }
      }

      /* ── Why ParagonIT — dark-accent callout strip ── */
      .cloud-phone-systems .cph-whyus { background: var(--white); }
      .cloud-phone-systems .cph-whyus-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; margin-top: 48px; align-items: start; }
      .cloud-phone-systems .cph-whyus-text h3 { font-size: 21px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
      .cloud-phone-systems .cph-whyus-text p { font-size: 14.5px; color: var(--gray-600); line-height: 1.75; margin: 0 0 14px; }
      .cloud-phone-systems .cph-whyus-text p:last-child { margin: 0; }
      .cloud-phone-systems .cph-whyus-list { display: flex; flex-direction: column; gap: 10px; }
      .cloud-phone-systems .cph-wy-item {
        display: flex; align-items: center; gap: 13px; padding: 14px 18px;
        border: 1px solid var(--border); border-radius: 11px; background: var(--bg-soft);
        font-size: 14px; font-weight: 600; color: var(--indigo-800);
        transition: border-color .3s var(--ease), transform .25s var(--ease), background .3s var(--ease);
      }
      .cloud-phone-systems .cph-wy-item:hover { border-color: rgba(25,187,233,.3); transform: translateX(5px); background: rgba(25,187,233,.03); }
      .cloud-phone-systems .cph-wy-dot { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: rgba(25,187,233,.1); color: var(--cyan-500); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .cloud-phone-systems .cph-wy-item:hover .cph-wy-dot { background: var(--cyan-500); color: #fff; }
      .cloud-phone-systems .cph-wy-dot svg { width: 14px; height: 14px; }
      @media (max-width: 760px) { .cloud-phone-systems .cph-whyus-inner { grid-template-columns: 1fr; gap: 32px; } }

      /* Cloud Phone systems end */

      /* Construction style start */

      /* ── construction.html scoped styles (.cns- prefix) ── */

      /* SIGNATURE: Dark 4-col challenge inline strips */
      .construction .cns-challenges {
        background: linear-gradient(148deg, #0a0928 0%, #15126e 50%, #0c0a30 100%);
        padding: 88px 0; position: relative; overflow: hidden;
      }
      .construction .cns-challenges::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 75% 30%, rgba(25,187,233,.14) 0%, transparent 48%),
                    radial-gradient(ellipse at 15% 70%, rgba(42,31,217,.2) 0%, transparent 45%);
        pointer-events: none;
      }
      .construction .cns-challenges .container { position: relative; z-index: 1; }
      .construction .cns-ch-hd { display: grid; grid-template-columns: 1.1fr 1fr; gap: 52px; align-items: end; margin-bottom: 48px; }
      .construction .cns-ch-hd h2 { font-size: clamp(22px,2.6vw,34px); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin: 12px 0 0; }
      .construction .cns-ch-hd p { font-size: 14.5px; color: rgba(255,255,255,.58); line-height: 1.78; margin: 0; }
      .construction .cns-ch-strips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .construction .cns-ch-strip {
        display: flex; align-items: center; gap: 14px; padding: 16px 20px;
        border: 1px solid rgba(255,255,255,.08); border-radius: 11px;
        background: rgba(255,255,255,.04);
        transition: background .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
      }
      .construction .cns-ch-strip:hover { background: rgba(25,187,233,.07); border-color: rgba(25,187,233,.2); transform: translateX(4px); }
      .construction .cns-ch-strip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--cyan-400); box-shadow: 0 0 6px rgba(25,187,233,.5); }
      .construction .cns-ch-strip-text { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.82); }
      .construction .cns-ch-strip-sub { font-size: 11.5px; color: rgba(255,255,255,.44); margin-top: 2px; }
      @media (max-width: 760px) { .construction .cns-ch-hd { grid-template-columns: 1fr; gap: 16px; } .construction .cns-ch-strips { grid-template-columns: 1fr; } }

      /* Teams we support — 2×3 persona role cards */
      .construction .cns-teams { background: var(--bg-soft); }
      .construction .cns-role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 52px; }
      .construction .cns-role-card {
        background: var(--white); border: 1px solid var(--border); border-radius: 16px;
        padding: 26px 22px; position: relative; overflow: hidden;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .construction .cns-role-card::after {
        content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .construction .cns-role-card:hover::after { transform: scaleX(1); }
      .construction .cns-role-card:hover { border-color: rgba(42,31,217,.2); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(16,10,58,.1); }
      .construction .cns-role-avatar {
        width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
        background: linear-gradient(135deg, rgba(42,31,217,.1), rgba(25,187,233,.06));
        border: 1px solid rgba(42,31,217,.12); color: var(--indigo-600);
        display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease);
      }
      .construction .cns-role-card:hover .cns-role-avatar { background: linear-gradient(135deg, rgba(42,31,217,.18), rgba(25,187,233,.1)); }
      .construction .cns-role-avatar svg { width: 22px; height: 22px; }
      .construction .cns-role-card h4 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .construction .cns-role-card p { font-size: 13px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      @media (max-width: 820px) { .construction .cns-role-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .construction .cns-role-grid { grid-template-columns: 1fr; } }

      /* Services — 2-col staggered layout */
      .construction .cns-services { background: var(--white); }
      .construction .cns-svc-pair-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 52px; }
      /* Odd cards shift up, even cards shift down — staggered */
      .construction .cns-svc-pair-list .cns-svc-card:nth-child(odd) { margin-top: -20px; }
      .construction .cns-svc-pair-list .cns-svc-card:nth-child(even) { margin-top: 20px; }
      .construction .cns-svc-pair-list .cns-svc-card:nth-child(1) { margin-top: 0; }
      .construction .cns-svc-pair-list .cns-svc-card:nth-child(2) { margin-top: 32px; }
      .construction .cns-svc-card {
        background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px;
        padding: 26px 24px; transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
      }
      .construction .cns-svc-card:hover { border-color: rgba(42,31,217,.2); box-shadow: 0 10px 32px rgba(16,10,58,.09); background: var(--white); }
      .construction .cns-svc-chip {
        display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 8px;
        border-radius: 100px; background: rgba(42,31,217,.07); border: 1px solid rgba(42,31,217,.14);
        margin-bottom: 14px;
      }
      .construction .cns-svc-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo-500); }
      .construction .cns-svc-chip span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--indigo-600); }
      .construction .cns-svc-card h3 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .construction .cns-svc-card p { font-size: 13.5px; color: var(--gray-600); line-height: 1.7; margin: 0; }
      @media (max-width: 680px) {
        .construction .cns-svc-pair-list { grid-template-columns: 1fr; }
        .construction .cns-svc-pair-list .cns-svc-card:nth-child(n) { margin-top: 0; }
      }

      /* Why — horizontal 4-phase value strip */
      .construction .cns-why { background: var(--bg-soft); }
      .construction .cns-phase-strip { position: relative; margin-top: 52px; padding: 0 0 36px; }
      .construction .cns-phase-line {
        position: absolute; top: 28px; left: calc(12.5%); right: calc(12.5%);
        height: 2px; background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        z-index: 0;
      }
      .construction .cns-phase-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; z-index: 1; }
      .construction .cns-phase {
        display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px;
      }
      .construction .cns-phase-node {
        width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--indigo-600);
        background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
        color: var(--indigo-600); margin-bottom: 20px; position: relative;
        transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
      }
      .construction .cns-phase:hover .cns-phase-node { background: var(--indigo-700); border-color: var(--indigo-700); color: #fff; transform: scale(1.1); }
      .construction .cns-phase-node svg { width: 22px; height: 22px; }
      .construction .cns-phase h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .construction .cns-phase p { font-size: 12.5px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      @media (max-width: 720px) {
        .construction .cns-phase-line { display: none; }
        .construction .cns-phase-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
        .construction .cns-phase-strip { padding: 0; }
      }
      @media (max-width: 480px) { .construction .cns-phase-grid { grid-template-columns: 1fr; } }


      /* Construction style end */

      /* Contact start */

    /* ── contact.html scoped styles (.ct- prefix) ── */

      /* ── 1. Contact Options — 2×2 premium dark tiles ── */
      .ct-options {
        background: linear-gradient(160deg, #07061e 0%, #0f0e62 48%, #08072d 80%, #060419 100%);
        position: relative; overflow: hidden;
      }
      .ct-options::before {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background:
          radial-gradient(ellipse at 8% 15%, rgba(25,187,233,.14) 0%, transparent 42%),
          radial-gradient(ellipse at 92% 85%, rgba(42,31,217,.22) 0%, transparent 42%);
      }
      .ct-options .section-eyebrow { color: #67e8f9 !important; border-color: rgba(25,187,233,.28) !important; background: rgba(25,187,233,.08) !important; }
      .ct-options .section-title { color: #fff !important; }
      .ct-options .section-subtitle { color: rgba(255,255,255,.58) !important; }
      .ct-option-grid {
        display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 52px;
      }
      .ct-option-tile {
        background: rgba(255,255,255,.048); border: 1px solid rgba(255,255,255,.09);
        border-radius: 24px; padding: 36px 32px 28px;
        display: flex; flex-direction: column; align-items: flex-start;
        text-decoration: none; position: relative; overflow: hidden;
        transition: background .4s var(--ease), border-color .4s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
      }
      /* Coloured top-stripe per tile */
      .ct-option-tile::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
        opacity: 0; transition: opacity .45s var(--ease);
        background: linear-gradient(90deg, #6366f1, #22d3ee);
      }
      .ct-option-tile--email::before  { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
      .ct-option-tile--support::before{ background: linear-gradient(90deg, #22c55e, #4ade80); }
      .ct-option-tile--accounts::before{ background: linear-gradient(90deg, #f97316, #fbbf24); }
      .ct-option-tile:hover::before { opacity: 1; }
      .ct-option-tile:hover {
        background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16);
        transform: translateY(-6px); box-shadow: 0 28px 72px rgba(0,0,0,.45);
      }
      .ct-option-ic {
        width: 60px; height: 60px; border-radius: 18px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
        transition: transform .38s var(--ease), box-shadow .38s var(--ease);
      }
      .ct-option-tile:hover .ct-option-ic { transform: scale(1.1); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
      .ct-option-ic svg { width: 28px; height: 28px; }
      .ct-option-ic--indigo { background: rgba(99,102,241,.22); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
      .ct-option-ic--cyan   { background: rgba(25,187,233,.18); color: #67e8f9; border: 1px solid rgba(25,187,233,.28); }
      .ct-option-ic--green  { background: rgba(34,197,94,.18);  color: #4ade80; border: 1px solid rgba(34,197,94,.28); }
      .ct-option-ic--amber  { background: rgba(249,115,22,.18);  color: #fbbf24; border: 1px solid rgba(249,115,22,.28); }
      .ct-option-label { font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 7px; }
      .ct-option-tile h3 { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.82); margin: 0 0 13px; }
      .ct-option-value {
        font-size: clamp(18px,2.1vw,25px); font-weight: 800; color: #fff;
        letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; word-break: break-all;
      }
      .ct-option-desc { font-size: 13.5px; color: rgba(255,255,255,.44); line-height: 1.7; margin: 0 0 28px; flex: 1; }
      .ct-option-arrow {
        display: inline-flex; align-items: center; gap: 9px; width: 100%;
        padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.1);
        font-size: 13px; font-weight: 700; color: rgba(255,255,255,.48);
        transition: color .3s var(--ease), border-color .3s var(--ease), gap .28s var(--ease);
      }
      .ct-option-tile:hover .ct-option-arrow { color: #fff; border-color: rgba(255,255,255,.22); gap: 15px; }
      .ct-option-arrow svg { width: 15px; height: 15px; }
      @media (max-width: 720px) { .ct-option-grid { grid-template-columns: 1fr; } }

      /* ── 2. Contact Form Section ── */
      .ct-form-section {
        background: linear-gradient(145deg, var(--bg-soft) 0%, rgba(42,31,217,.028) 55%, var(--bg-soft) 100%);
        position: relative; overflow: hidden;
      }
      .ct-form-section::before {
        content: ""; position: absolute; top: -120px; right: -100px;
        width: 500px; height: 500px; border-radius: 50%;
        background: radial-gradient(circle, rgba(42,31,217,.05) 0%, transparent 70%);
        pointer-events: none;
      }
      .ct-form-card { border-top: 3px solid transparent; background-clip: padding-box; }
      .ct-form-card::before {
        content: ""; position: absolute; inset: 0; top: -3px; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        border-radius: 22px 22px 0 0;
      }
      .ct-form-aside-badge {
        display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
        background: rgba(42,31,217,.06); border: 1px solid rgba(42,31,217,.12);
        border-radius: 100px; font-size: 12px; font-weight: 700; color: var(--indigo-700);
        margin-bottom: 20px;
      }
      .ct-form-aside-badge svg { width: 14px; height: 14px; }
      .ct-form-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 52px; }
      .ct-form-aside {}
      .ct-form-aside h2 { font-size: clamp(22px,2.4vw,32px); font-weight: 800; color: var(--indigo-800); letter-spacing: -0.025em; line-height: 1.25; margin: 0 0 16px; }
      .ct-form-aside p { font-size: 15px; color: var(--gray-600); line-height: 1.75; margin: 0 0 32px; }
      .ct-quick-contact { display: flex; flex-direction: column; gap: 14px; }
      .ct-qc-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); text-decoration: none; transition: border-color .3s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease); }
      .ct-qc-row:hover { border-color: rgba(42,31,217,.2); transform: translateX(4px); box-shadow: 0 6px 20px rgba(16,10,58,.08); }
      .ct-qc-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(42,31,217,.08); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
      .ct-qc-ic svg { width: 18px; height: 18px; }
      .ct-qc-body {}
      .ct-qc-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 2px; }
      .ct-qc-val { font-size: 15px; font-weight: 700; color: var(--indigo-800); }
      .ct-form-hours { margin-top: 24px; padding: 18px 20px; background: rgba(42,31,217,.04); border: 1px solid rgba(42,31,217,.1); border-radius: 14px; }
      .ct-form-hours-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo-600); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
      .ct-form-hours-title-dot { width: 7px; height: 7px; border-radius: 50%; background: #27ae60; box-shadow: 0 0 0 3px rgba(39,174,96,.2); }
      .ct-hours-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray-700); padding: 5px 0; border-bottom: 1px solid rgba(42,31,217,.07); }
      .ct-hours-row:last-child { border-bottom: none; }
      .ct-hours-row .ct-hours-day { font-weight: 600; }
      .ct-hours-row .ct-hours-time { color: var(--gray-500); }

      /* Form card */
      .ct-form-card { background: var(--white); border: 1px solid var(--border); border-radius: 22px; padding: 40px 36px; box-shadow: 0 8px 32px rgba(16,10,58,.07); }
      .ct-form-card h3 { font-size: 18px; font-weight: 800; color: var(--indigo-800); margin: 0 0 6px; }
      .ct-form-card > p { font-size: 13.5px; color: var(--gray-500); margin: 0 0 28px; }
      .ct-form { display: flex; flex-direction: column; gap: 0; }
      .ct-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .ct-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
      .ct-field label { font-size: 12px; font-weight: 700; color: var(--indigo-800); letter-spacing: .03em; }
      .ct-field input,
      .ct-field select,
      .ct-field textarea {
        padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 11px;
        font-size: 14px; color: var(--gray-800); font-family: 'Plus Jakarta Sans', sans-serif;
        background: var(--bg-soft); outline: none;
        transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
        width: 100%; box-sizing: border-box;
      }
      .ct-field input:focus,
      .ct-field select:focus,
      .ct-field textarea:focus {
        border-color: var(--indigo-600); background: var(--white);
        box-shadow: 0 0 0 3px rgba(42,31,217,.08);
      }
      .ct-field textarea { resize: vertical; min-height: 110px; }
      .ct-field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px; }
      .ct-field .ct-err { font-size: 11px; color: #c0392b; display: none; }
      .ct-field.has-error input,
      .ct-field.has-error select,
      .ct-field.has-error textarea { border-color: #c0392b; }
      .ct-field.has-error .ct-err { display: block; }
      .ct-consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-size: 12.5px; color: var(--gray-500); line-height: 1.55; }
      .ct-consent input[type="checkbox"] { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; margin-top: 1px; accent-color: var(--indigo-600); cursor: pointer; }
      .ct-consent a { color: var(--indigo-600); }
      .ct-submit { display: flex; align-items: center; gap: 10px; }
      .ct-submit .btn { flex: 1; justify-content: center; }
      .ct-success { display: none; padding: 20px; background: rgba(39,174,96,.07); border: 1px solid rgba(39,174,96,.2); border-radius: 14px; text-align: center; }
      .ct-success-ic { font-size: 28px; margin-bottom: 8px; }
      .ct-success h4 { font-size: 15px; font-weight: 700; color: #27ae60; margin: 0 0 4px; }
      .ct-success p { font-size: 13px; color: var(--gray-600); margin: 0; }
      @media (max-width: 900px) { .ct-form-wrap { grid-template-columns: 1fr; gap: 36px; } .ct-form-card { padding: 28px 22px; } }
      @media (max-width: 520px) { .ct-field-row { grid-template-columns: 1fr; } }

      /* ── 3. Why Contact — 3-col reasons ── */
      .ct-why {
        background: linear-gradient(160deg, var(--white) 0%, rgba(42,31,217,.022) 52%, var(--white) 100%);
        position: relative; overflow: hidden;
      }
      .ct-why::after {
        content: "WHY US"; position: absolute; top: 24px; right: -24px;
        font-size: clamp(72px,10vw,128px); font-weight: 900; letter-spacing: -0.06em;
        color: rgba(42,31,217,.032); pointer-events: none; user-select: none;
        font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1;
      }
      .ct-why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 52px; }
      .ct-why-card {
        padding: 32px 28px; border: 1px solid var(--border); border-radius: 22px; background: var(--bg-soft);
        display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden;
        transition: border-color .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease), background .38s var(--ease);
      }
      .ct-why-card::after {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .48s var(--ease);
      }
      .ct-why-card:hover::after { transform: scaleX(1); }
      .ct-why-card:hover { border-color: rgba(42,31,217,.18); transform: translateY(-6px); box-shadow: 0 18px 52px rgba(16,10,58,.12); background: var(--white); }
      .ct-why-num {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; border-radius: 9px;
        background: rgba(42,31,217,.07); border: 1px solid rgba(42,31,217,.12);
        font-size: 11px; font-weight: 900; letter-spacing: .05em; color: var(--indigo-600);
      }
      .ct-why-ic { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(145deg, rgba(42,31,217,.08), rgba(42,31,217,.04)); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(42,31,217,.1); transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
      .ct-why-card:hover .ct-why-ic { background: linear-gradient(145deg, var(--indigo-700), var(--indigo-600)); color: #fff; box-shadow: 0 6px 20px rgba(42,31,217,.28); }
      .ct-why-ic svg { width: 24px; height: 24px; }
      .ct-why-card h4 { font-size: 15.5px; font-weight: 800; color: var(--indigo-800); margin: 0; letter-spacing: -0.01em; }
      .ct-why-card p { font-size: 13px; color: var(--gray-600); line-height: 1.75; margin: 0; }
      @media (max-width: 840px) { .ct-why-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .ct-why-grid { grid-template-columns: 1fr; } }

      /* ── 4. Office Locations ── */
      .ct-offices { background: var(--bg-soft); }
      .ct-office-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 52px; }
      .ct-office-card {
        background: var(--white); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .ct-office-card:hover { border-color: rgba(42,31,217,.2); transform: translateY(-5px); box-shadow: 0 16px 44px rgba(16,10,58,.1); }
      .ct-office-header {
        background: linear-gradient(145deg, var(--indigo-700), var(--indigo-600));
        padding: 24px 24px 20px; position: relative; overflow: hidden;
      }
      .ct-office-header::after { content: ""; position: absolute; bottom: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.07); }
      .ct-office-city { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 6px; }
      .ct-office-header h3 { font-size: 20px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.02em; }
      .ct-office-hq { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(25,187,233,.25); border: 1px solid rgba(25,187,233,.35); color: var(--cyan-400); border-radius: 100px; padding: 2px 9px; margin-top: 8px; }
      .ct-office-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
      .ct-office-row { display: flex; align-items: flex-start; gap: 10px; }
      .ct-office-row-ic { width: 30px; height: 30px; border-radius: 8px; background: rgba(42,31,217,.07); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
      .ct-office-row-ic svg { width: 14px; height: 14px; }
      .ct-office-row-text { font-size: 13px; color: var(--gray-700); line-height: 1.55; }
      .ct-office-row-text a { color: var(--indigo-700); text-decoration: none; font-weight: 600; transition: color .2s var(--ease); }
      .ct-office-row-text a:hover { color: var(--cyan-600); }
      .ct-office-cta { margin: 16px 24px 24px; }
      .ct-office-cta a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 20px; border: 1.5px solid rgba(42,31,217,.2); border-radius: 11px; font-size: 13px; font-weight: 700; color: var(--indigo-700); text-decoration: none; background: rgba(42,31,217,.04); transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
      .ct-office-cta a:hover { background: var(--indigo-700); border-color: var(--indigo-700); color: #fff; }
      .ct-office-cta a svg { width: 14px; height: 14px; }
      @media (max-width: 840px) { .ct-office-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 540px) { .ct-office-grid { grid-template-columns: 1fr; } }

      /* ── 5. Map Section ── */
      .ct-map-section {
        background: linear-gradient(160deg, #07061e 0%, #0f0e62 48%, #08072d 80%, #060419 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .ct-map-section::before {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background:
          radial-gradient(ellipse at 5% 50%, rgba(25,187,233,.13) 0%, transparent 42%),
          radial-gradient(ellipse at 95% 30%, rgba(42,31,217,.2) 0%, transparent 44%);
      }
      .ct-map-section .container { position: relative; z-index: 1; }
      .ct-map-section .section-eyebrow { color: #67e8f9 !important; border-color: rgba(25,187,233,.28) !important; background: rgba(25,187,233,.08) !important; }
      .ct-map-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
      .ct-map-copy h2 { font-size: clamp(24px,2.8vw,38px); font-weight: 800; color: #fff; letter-spacing: -0.028em; margin: 0 0 18px; line-height: 1.15; }
      .ct-map-copy p { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.8; margin: 0 0 32px; }
      .ct-map-locations { display: flex; flex-direction: column; gap: 10px; }
      .ct-map-loc {
        display: flex; align-items: center; gap: 16px; padding: 16px 18px;
        border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
        background: rgba(255,255,255,.05);
        transition: border-color .3s var(--ease), background .3s var(--ease), transform .28s var(--ease); cursor: default;
      }
      .ct-map-loc:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.09); transform: translateX(6px); }
      .ct-map-loc-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
      .ct-map-loc-dot--primary { background: #a5b4fc; box-shadow: 0 0 0 5px rgba(165,180,252,.18); animation: ctPulse 2.2s ease-in-out infinite; }
      @keyframes ctPulse { 0%,100%{ box-shadow: 0 0 0 5px rgba(165,180,252,.18); } 50%{ box-shadow: 0 0 0 9px rgba(165,180,252,.06); } }
      .ct-map-loc-dot--secondary { background: #67e8f9; box-shadow: 0 0 0 4px rgba(103,232,249,.15); }
      .ct-map-loc-city { font-size: 14px; font-weight: 700; color: #fff; }
      .ct-map-loc-detail { font-size: 12px; color: rgba(255,255,255,.48); margin-top: 2px; }
      .ct-map-visual {
        border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.04); min-height: 380px; position: relative;
        box-shadow: 0 24px 72px rgba(0,0,0,.4);
      }
      .ct-map-embed {
        width: 100%; height: 100%; min-height: 380px; display: flex; align-items: center; justify-content: center;
        background: linear-gradient(145deg, rgba(42,31,217,.12) 0%, rgba(25,187,233,.08) 100%);
        position: relative; padding: 28px; box-sizing: border-box;
      }
      .ct-map-aus-svg { width: 100%; max-width: 380px; opacity: .6; }
      .ct-map-pin { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; }
      .ct-map-pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.9); box-shadow: 0 3px 12px rgba(0,0,0,.4); }
      .ct-map-pin-label { font-size: 10px; font-weight: 800; color: var(--indigo-800); white-space: nowrap; background: rgba(255,255,255,.95); padding: 3px 10px; border-radius: 100px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
      .ct-map-pin--melb { bottom: 26%; left: 55%; }
      .ct-map-pin--melb .ct-map-pin-dot { background: #a5b4fc; }
      @media (max-width: 860px) { .ct-map-inner { grid-template-columns: 1fr; gap: 40px; } .ct-map-visual { min-height: 280px; } }

      /* ── 6. Support Cards ── */
      .ct-support { background: linear-gradient(155deg, #080725 0%, #11106a 50%, #09082e 100%); padding: 96px 0; position: relative; overflow: hidden; }
      .ct-support::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 40%, rgba(25,187,233,.12) 0%, transparent 46%), radial-gradient(ellipse at 80% 70%, rgba(42,31,217,.2) 0%, transparent 44%); pointer-events: none; }
      .ct-support .container { position: relative; z-index: 1; }
      .ct-support-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 52px; }
      .ct-sup-card {
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
        border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
      }
      .ct-sup-card:hover { background: rgba(255,255,255,.08); border-color: rgba(25,187,233,.25); transform: translateY(-5px); }
      .ct-sup-ic { width: 50px; height: 50px; border-radius: 14px; background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.2); color: var(--cyan-400); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .ct-sup-card:hover .ct-sup-ic { background: rgba(25,187,233,.2); }
      .ct-sup-ic svg { width: 24px; height: 24px; }
      .ct-sup-card h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0; }
      .ct-sup-card p { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.7; margin: 0; flex: 1; }
      .ct-sup-action { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--cyan-400); text-decoration: none; transition: gap .25s var(--ease); }
      .ct-sup-action:hover { gap: 13px; }
      .ct-sup-action svg { width: 14px; height: 14px; }
      @media (max-width: 840px) { .ct-support-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .ct-support-grid { grid-template-columns: 1fr; } }

      /* ── 7. FAQ ── (uses existing .faq classes + light variant) ── */

      /* ── 8. Final CTA strip ── (uses existing cta-banner) ── */

      /* Contact end */

      /* ── cyber-awareness-training.html page-scoped styles (.cat- prefix) ── */

      /* ── Why it matters — icon reason strip ── */
      .cat-why { background: var(--white); }
      .cat-why-grid {
        display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 48px;
      }
      .cat-why-card {
        padding: 28px 24px; border-radius: 16px; border: 1px solid var(--border);
        background: var(--bg-soft); position: relative; overflow: hidden;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .cat-why-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .cat-why-card:hover::before { transform: scaleX(1); }
      .cat-why-card:hover { border-color: rgba(25,187,233,.3); transform: translateY(-3px); box-shadow: var(--shadow-md); }
      .cat-why-icon {
        width: 44px; height: 44px; border-radius: 12px;
        background: rgba(25,187,233,.1); color: var(--cyan-500);
        display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
        transition: background .3s var(--ease);
      }
      .cat-why-card:hover .cat-why-icon { background: var(--cyan-500); color: #fff; }
      .cat-why-icon svg { width: 22px; height: 22px; }
      .cat-why-card h4 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 9px; }
      .cat-why-card p { font-size: 13.5px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      @media (max-width: 860px) { .cat-why-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .cat-why-grid { grid-template-columns: 1fr; } }

      /* ── Narrative split — image + text ── */
      .cat-narrative { background: var(--bg-soft); }
      .cat-narrative-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 56px; align-items: center;
      }
      .cat-narrative-visual {
        border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg);
      }
      .cat-narrative-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .cat-narrative-text h3 { font-size: 26px; font-weight: 700; color: var(--indigo-800); margin: 0 0 16px; }
      .cat-narrative-text p { font-size: 15px; color: var(--gray-600); line-height: 1.75; margin: 0 0 14px; }
      .cat-narrative-text p:last-child { margin: 0; }
      @media (max-width: 780px) {
        .cat-narrative-grid { grid-template-columns: 1fr; gap: 32px; }
        .cat-narrative-visual { order: -1; }
      }

      /* ── SIGNATURE: Services — dark card grid ── */
      .cat-services-section {
        background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .cat-services-section::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 75% 30%, rgba(25,187,233,.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 15% 80%, rgba(42,31,217,.18) 0%, transparent 45%);
        pointer-events: none;
      }
      .cat-services-section .container { position: relative; z-index: 1; }
      .cat-svc-head { text-align: center; margin-bottom: 56px; }
      .cat-svc-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
      .cat-svc-head p { color: rgba(255,255,255,.65); font-size: 16px; max-width: 600px; margin: 0 auto; line-height: 1.7; }

      .cat-svc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
      .cat-svc-card {
        background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
        border-radius: 16px; padding: 28px 22px;
        display: flex; flex-direction: column; gap: 12px;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
        position: relative; overflow: hidden;
      }
      .cat-svc-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--cyan-400), var(--indigo-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .cat-svc-card:hover::before { transform: scaleX(1); }
      .cat-svc-card:hover {
        background: rgba(25,187,233,.08); border-color: rgba(25,187,233,.35);
        transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.4);
      }
      .cat-svc-icon {
        width: 42px; height: 42px; border-radius: 11px;
        background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.25);
        display: flex; align-items: center; justify-content: center; color: var(--cyan-400);
        transition: background .3s var(--ease);
      }
      .cat-svc-card:hover .cat-svc-icon { background: rgba(25,187,233,.2); }
      .cat-svc-icon svg { width: 20px; height: 20px; }
      .cat-svc-card h3 { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0; }
      .cat-svc-card p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.6; margin: 0; flex: 1; }
      @media (max-width: 960px) { .cat-svc-grid { grid-template-columns: repeat(2,1fr); } }
      @media (max-width: 520px) { .cat-svc-grid { grid-template-columns: 1fr; } }

      /* ── What we cover — checklist ── */
      .cat-covers { background: var(--white); }
      .cat-covers-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: start; }
      .cat-covers-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-soft); }
      .cat-covers-list li {
        display: flex; gap: 14px; align-items: center;
        padding: 15px 22px; border-bottom: 1px solid var(--border);
        list-style: none; font-size: 14px; font-weight: 500; color: var(--indigo-800);
        transition: background .3s var(--ease), transform .3s var(--ease);
      }
      .cat-covers-list li:last-child { border-bottom: none; }
      .cat-covers-list li:hover { background: rgba(25,187,233,.04); transform: translateX(4px); }
      .cat-covers-list li::before {
        content: ""; width: 8px; height: 8px; border-radius: 2px;
        background: var(--indigo-600); flex-shrink: 0;
        transition: background .3s var(--ease);
      }
      .cat-covers-list li:hover::before { background: var(--cyan-500); }
      .cat-covers-text h3 { font-size: 22px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
      .cat-covers-text p { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin: 0 0 12px; }
      .cat-covers-text p:last-child { margin: 0; }
      @media (max-width: 780px) { .cat-covers-split { grid-template-columns: 1fr; gap: 28px; } }

      /* ── Approach pillars — 5-col ── */
      .cat-approach { background: var(--bg-soft); }
      .cat-approach-grid {
        display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-top: 48px;
      }
      .cat-approach-pillar {
        text-align: center; padding: 28px 18px; border-radius: 16px;
        border: 1px solid var(--border); background: var(--white);
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
        position: relative; overflow: hidden;
      }
      .cat-approach-pillar::after {
        content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--cyan-400), var(--indigo-500));
        transform: scaleX(0); transform-origin: center; transition: transform .4s var(--ease);
      }
      .cat-approach-pillar:hover::after { transform: scaleX(1); }
      .cat-approach-pillar:hover { border-color: rgba(42,31,217,.18); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(16,10,58,.08); }
      .cat-pillar-num {
        font-size: 36px; font-weight: 900; color: rgba(42,31,217,.08); line-height: 1; margin-bottom: 14px;
        font-family: 'Plus Jakarta Sans', sans-serif;
        transition: color .35s var(--ease);
      }
      .cat-approach-pillar:hover .cat-pillar-num { color: rgba(42,31,217,.15); }
      .cat-approach-pillar h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .cat-approach-pillar p { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 900px) { .cat-approach-grid { grid-template-columns: repeat(3,1fr); } }
      @media (max-width: 580px) { .cat-approach-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 380px) { .cat-approach-grid { grid-template-columns: 1fr; } }

      /* ── Who it's for + Why choose ── */
      .cat-why-who { background: var(--white); }
      .cat-why-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: start; }
      .cat-who-list { display: flex; flex-direction: column; gap: 10px; }
      .cat-who-item {
        display: flex; gap: 13px; align-items: flex-start;
        padding: 13px 18px; border-radius: 10px; border: 1px solid var(--border);
        background: var(--bg-soft); font-size: 14px; font-weight: 500; color: var(--indigo-800);
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .cat-who-item:hover { border-color: rgba(42,31,217,.22); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,10,58,.07); }
      .cat-who-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo-600); flex-shrink: 0; margin-top: 5px; }
      .cat-choose-list { display: flex; flex-direction: column; gap: 0; }
      .cat-choose-item {
        display: flex; gap: 18px; padding: 18px 0; align-items: flex-start;
        border-bottom: 1px solid var(--border);
      }
      .cat-choose-item:last-child { border-bottom: none; }
      .cat-choose-ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: rgba(42,31,217,.08); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .cat-choose-item:hover .cat-choose-ic { background: var(--indigo-700); color: #fff; }
      .cat-choose-ic svg { width: 16px; height: 16px; }
      .cat-choose-body p { font-size: 13.5px; color: var(--gray-700); line-height: 1.6; margin: 0; font-weight: 500; }
      @media (max-width: 780px) { .cat-why-who-grid { grid-template-columns: 1fr; gap: 32px; } }

            /* ── data-visualization.html page-scoped styles (.dv- prefix) ── */

      /* ── 5-step horizontal process rail ── */
      .dv-process { background: var(--bg-soft); }
      .dv-rail {
        position: relative; margin-top: 52px;
        display: grid; grid-template-columns: repeat(5,1fr); gap: 0;
      }
      .dv-rail::before {
        content: ""; position: absolute;
        top: 28px; left: 10%; right: 10%; height: 2px;
        background: linear-gradient(90deg,var(--indigo-600),var(--cyan-400));
        z-index: 0;
      }
      .dv-rail-step {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        gap: 14px; padding: 0 12px; position: relative; z-index: 1;
        transition: transform .3s var(--ease);
      }
      .dv-rail-step:hover { transform: translateY(-5px); }
      .dv-rail-num {
        width: 56px; height: 56px; border-radius: 50%;
        background: var(--white); border: 2px solid var(--indigo-600);
        display: flex; align-items: center; justify-content: center;
        font-size: 15px; font-weight: 800; color: var(--indigo-700); font-family:'Plus Jakarta Sans',sans-serif;
        box-shadow: 0 0 0 6px var(--bg-soft);
        transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
      }
      .dv-rail-step:hover .dv-rail-num {
        background: var(--indigo-700); color: #fff; border-color: var(--indigo-700);
        box-shadow: 0 0 0 6px rgba(42,31,217,.08), 0 8px 24px rgba(42,31,217,.25);
      }
      .dv-rail-step h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0; }
      .dv-rail-step p { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 900px) {
        .dv-rail { grid-template-columns: 1fr 1fr; gap: 32px; }
        .dv-rail::before { display: none; }
        .dv-rail-step { align-items: flex-start; text-align: left; flex-direction: row; gap: 16px; }
        .dv-rail-num { flex-shrink: 0; }
      }
      @media (max-width: 520px) { .dv-rail { grid-template-columns: 1fr; } }

      /* ── SIGNATURE: Dark KPI / dashboard showcase ── */
      .dv-showcase-section {
        background: linear-gradient(155deg,#0c0b2e 0%,#141069 55%,#0a0830 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .dv-showcase-section::before {
        content:""; position:absolute; inset:0;
        background: radial-gradient(ellipse at 90% 20%,rgba(25,187,233,.13) 0%,transparent 50%),
                    radial-gradient(ellipse at 10% 80%,rgba(42,31,217,.18) 0%,transparent 45%);
        pointer-events:none;
      }
      .dv-showcase-section .container { position:relative; z-index:1; }
      .dv-showcase-head { text-align:center; margin-bottom:52px; }
      .dv-showcase-head h2 { color:#fff; font-size:clamp(26px,3vw,38px); font-weight:700; letter-spacing:-0.02em; margin:14px 0 14px; }
      .dv-showcase-head p { color:rgba(255,255,255,.65); font-size:16px; max-width:600px; margin:0 auto; line-height:1.7; }

      /* 3-col showcase cards — "dashboard card" aesthetic */
      .dv-showcase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
      .dv-showcase-card {
        background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
        border-radius:18px; padding:32px 26px; position:relative; overflow:hidden;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .dv-showcase-card::before {
        content:""; position:absolute; top:0; left:0; right:0; height:3px;
        background:linear-gradient(90deg,var(--cyan-400),var(--indigo-400));
        transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
      }
      .dv-showcase-card:hover::before { transform:scaleX(1); }
      .dv-showcase-card:hover { background:rgba(25,187,233,.07); border-color:rgba(25,187,233,.3); transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,.4); }
      .dv-sc-kpi {
        font-size:40px; font-weight:900; color:var(--cyan-400); line-height:1;
        font-family:'Plus Jakarta Sans',sans-serif; margin-bottom:6px;
        transition: color .35s var(--ease);
      }
      .dv-showcase-card:hover .dv-sc-kpi { color:#fff; }
      .dv-sc-kpi-label { font-size:11px; font-weight:700; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.07em; margin-bottom:20px; }
      .dv-sc-divider { height:1px; background:rgba(255,255,255,.08); margin-bottom:20px; }
      .dv-sc-icon { width:40px; height:40px; border-radius:11px; background:rgba(25,187,233,.12); border:1px solid rgba(25,187,233,.22); display:flex; align-items:center; justify-content:center; color:var(--cyan-400); margin-bottom:14px; transition:background .3s var(--ease); }
      .dv-showcase-card:hover .dv-sc-icon { background:rgba(25,187,233,.22); }
      .dv-sc-icon svg { width:19px; height:19px; }
      .dv-showcase-card h3 { font-size:16px; font-weight:700; color:rgba(255,255,255,.9); margin:0 0 10px; }
      .dv-showcase-card p { font-size:13px; color:rgba(255,255,255,.58); line-height:1.65; margin:0; }
      @media (max-width:860px) { .dv-showcase-grid { grid-template-columns:1fr 1fr; } }
      @media (max-width:540px) { .dv-showcase-grid { grid-template-columns:1fr; } }

      /* ── Use-case application grid — 2×3 category panels ── */
      .dv-usecases { background:var(--white); }
      .dv-uc-grid {
        display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:48px;
      }
      .dv-uc-panel {
        border:1px solid var(--border); border-radius:16px; padding:26px 22px;
        background:var(--bg-soft); position:relative; overflow:hidden;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
      }
      .dv-uc-panel::after {
        content:""; position:absolute; bottom:0; left:0; right:0; height:3px;
        background:linear-gradient(90deg,var(--indigo-600),var(--cyan-400));
        transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
      }
      .dv-uc-panel:hover::after { transform:scaleX(1); }
      .dv-uc-panel:hover { border-color:rgba(42,31,217,.18); transform:translateY(-3px); box-shadow:0 10px 28px rgba(16,10,58,.09); background:var(--white); }
      .dv-uc-icon { width:42px; height:42px; border-radius:12px; background:rgba(42,31,217,.07); color:var(--indigo-600); display:flex; align-items:center; justify-content:center; margin-bottom:14px; transition:background .3s var(--ease); }
      .dv-uc-panel:hover .dv-uc-icon { background:var(--indigo-700); color:#fff; }
      .dv-uc-icon svg { width:20px; height:20px; }
      .dv-uc-panel h4 { font-size:15px; font-weight:700; color:var(--indigo-800); margin:0 0 8px; }
      .dv-uc-panel p { font-size:13px; color:var(--gray-600); line-height:1.65; margin:0; }
      @media (max-width:780px) { .dv-uc-grid { grid-template-columns:1fr 1fr; } }
      @media (max-width:500px) { .dv-uc-grid { grid-template-columns:1fr; } }

      /* ── Why Power BI — side-by-side text blocks (no images) ── */
      .dv-why { background:var(--bg-soft); }
      .dv-why-inner { display:grid; grid-template-columns:1fr 1fr; gap:52px; margin-top:48px; align-items:start; }
      .dv-why-block { display:flex; flex-direction:column; gap:0; }
      .dv-why-item {
        display:flex; gap:16px; align-items:flex-start; padding:20px 0;
        border-bottom:1px solid var(--border);
        transition: padding-left .25s var(--ease);
      }
      .dv-why-item:last-child { border-bottom:none; }
      .dv-why-item:hover { padding-left:6px; }
      .dv-why-dot {
        width:36px; height:36px; border-radius:10px; flex-shrink:0;
        background:rgba(25,187,233,.1); color:var(--cyan-500);
        display:flex; align-items:center; justify-content:center; margin-top:1px;
        transition: background .3s var(--ease);
      }
      .dv-why-item:hover .dv-why-dot { background:var(--cyan-500); color:#fff; }
      .dv-why-dot svg { width:16px; height:16px; }
      .dv-why-item h5 { font-size:14px; font-weight:700; color:var(--indigo-800); margin:0 0 4px; }
      .dv-why-item p { font-size:13px; color:var(--gray-600); line-height:1.6; margin:0; }
      @media (max-width:760px) { .dv-why-inner { grid-template-columns:1fr; gap:0; } }

      /* ── Zigzag alternating approach phases ── */
      .dv-approach { background:var(--white); }
      .dv-phases { display:flex; flex-direction:column; gap:0; margin-top:48px; }
      .dv-phase {
        display:grid; grid-template-columns:80px 1fr 1fr; gap:28px;
        align-items:center; padding:28px 0; border-bottom:1px solid var(--border);
        transition: background .25s var(--ease);
      }
      .dv-phase:first-child { padding-top:0; }
      .dv-phase:last-child { border-bottom:none; padding-bottom:0; }
      .dv-phase:hover { background:rgba(42,31,217,.015); padding-left:8px; padding-right:8px; border-radius:12px; }
      .dv-phase-num {
        width:64px; height:64px; border-radius:18px; flex-shrink:0;
        background:linear-gradient(135deg,var(--indigo-700),var(--indigo-500));
        color:#fff; display:flex; align-items:center; justify-content:center;
        font-size:20px; font-weight:900; font-family:'Plus Jakarta Sans',sans-serif;
        transition: box-shadow .3s var(--ease), transform .3s var(--ease);
      }
      .dv-phase:hover .dv-phase-num { box-shadow:0 8px 24px rgba(42,31,217,.3); transform:scale(1.05); }
      .dv-phase-primary h4 { font-size:18px; font-weight:700; color:var(--indigo-800); margin:0 0 8px; }
      .dv-phase-primary p { font-size:14px; color:var(--gray-600); line-height:1.65; margin:0; }
      .dv-phase-secondary {
        padding:14px 18px; border-radius:12px; border:1px solid var(--border);
        background:var(--bg-soft); font-size:13px; color:var(--gray-600); line-height:1.6;
        transition: border-color .3s var(--ease), background .3s var(--ease);
      }
      .dv-phase:hover .dv-phase-secondary { border-color:rgba(25,187,233,.25); background:rgba(25,187,233,.03); }
      @media (max-width:760px) {
        .dv-phase { grid-template-columns:56px 1fr; }
        .dv-phase-secondary { display:none; }
        .dv-phase-num { width:48px; height:48px; font-size:16px; border-radius:14px; }
      }

      /* ── defence-contractors.html scoped styles (.def- prefix) ── */

      /* SIGNATURE: Dark — oversized framework text + compliance list */
      .def-framework {
        background: linear-gradient(155deg, #080725 0%, #11106a 48%, #09082e 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .def-framework::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 20% 30%, rgba(25,187,233,.12) 0%, transparent 48%),
                    radial-gradient(ellipse at 85% 75%, rgba(42,31,217,.2) 0%, transparent 45%);
        pointer-events: none;
      }
      .def-framework .container { position: relative; z-index: 1; }
      .def-fw-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
      .def-fw-left { position: relative; }
      .def-fw-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-400); margin-bottom: 24px; }
      .def-fw-words { display: flex; flex-direction: column; gap: 4px; }
      .def-fw-word {
        font-size: clamp(28px, 4vw, 52px); font-weight: 900; font-family: 'Plus Jakarta Sans', sans-serif;
        letter-spacing: -0.03em; line-height: 1.05;
        background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        transition: background .4s var(--ease);
      }
      .def-fw-word:hover {
        background: linear-gradient(90deg, rgba(25,187,233,.6), rgba(42,31,217,.4));
        -webkit-background-clip: text; background-clip: text;
      }
      .def-fw-word.accent-word {
        background: linear-gradient(90deg, rgba(25,187,233,.4), rgba(25,187,233,.15));
        -webkit-background-clip: text; background-clip: text;
      }
      .def-fw-right {}
      .def-fw-right h2 { font-size: clamp(18px, 2vw, 26px); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin: 0 0 10px; }
      .def-fw-right p { font-size: 14px; color: rgba(255,255,255,.58); line-height: 1.75; margin: 0 0 28px; }
      .def-comply-list { display: flex; flex-direction: column; gap: 0; }
      .def-comply-row {
        display: flex; align-items: center; gap: 14px; padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
        transition: padding-left .25s var(--ease);
      }
      .def-comply-row:first-child { padding-top: 0; }
      .def-comply-row:last-child { border-bottom: none; padding-bottom: 0; }
      .def-comply-row:hover { padding-left: 8px; }
      .def-comply-dot { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.22); color: var(--cyan-400); display: flex; align-items: center; justify-content: center; }
      .def-comply-dot svg { width: 12px; height: 12px; }
      .def-comply-row span { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.82); }
      @media (max-width: 840px) { .def-fw-inner { grid-template-columns: 1fr; gap: 36px; } }

      /* Services — 3-col security matrix */
      .def-services { background: var(--bg-soft); }
      .def-svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 52px; }
      .def-svc-card {
        background: var(--white); border: 1px solid var(--border); border-radius: 18px;
        padding: 28px 24px; display: flex; flex-direction: column;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
        position: relative; overflow: hidden;
      }
      .def-svc-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
      }
      .def-svc-card:hover::before { transform: scaleX(1); }
      .def-svc-card:hover { border-color: rgba(42,31,217,.2); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(16,10,58,.1); }
      .def-svc-lock {
        width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
        background: rgba(42,31,217,.08); color: var(--indigo-600);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .def-svc-card:hover .def-svc-lock { background: var(--indigo-700); color: #fff; }
      .def-svc-lock svg { width: 22px; height: 22px; }
      .def-svc-card h3 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .def-svc-card p { font-size: 13px; color: var(--gray-600); line-height: 1.7; margin: 0 0 14px; flex: 1; }
      .def-svc-includes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border); padding-top: 12px; }
      .def-svc-includes li { font-size: 11.5px; color: var(--gray-500); display: flex; align-items: center; gap: 6px; }
      .def-svc-includes li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan-500); flex-shrink: 0; }
      @media (max-width: 860px) { .def-svc-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 540px) { .def-svc-grid { grid-template-columns: 1fr; } }

      /* Before/After contrast layout */
      .def-contrast { background: var(--white); }
      .def-contrast-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin-top: 52px; align-items: stretch; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
      .def-before { background: rgba(220,30,60,.03); padding: 36px 32px; border-right: 1px solid var(--border); }
      .def-before-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #c0392b; background: rgba(192,57,43,.07); border: 1px solid rgba(192,57,43,.15); border-radius: 100px; padding: 4px 12px; margin-bottom: 20px; }
      .def-before-label-dot { width: 6px; height: 6px; border-radius: 50%; background: #c0392b; }
      .def-after { background: rgba(42,31,217,.02); padding: 36px 32px; }
      .def-after-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--indigo-600); background: rgba(42,31,217,.07); border: 1px solid rgba(42,31,217,.15); border-radius: 100px; padding: 4px 12px; margin-bottom: 20px; }
      .def-after-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo-600); }
      .def-contrast-arrow {
        display: flex; align-items: center; justify-content: center; padding: 0 24px;
        background: var(--bg-soft); border-left: 1px solid var(--border); border-right: 1px solid var(--border);
      }
      .def-contrast-arrow-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--indigo-700); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(42,31,217,.3); }
      .def-contrast-arrow-ic svg { width: 18px; height: 18px; }
      .def-contrast-items { display: flex; flex-direction: column; gap: 12px; }
      .def-contrast-item { display: flex; align-items: flex-start; gap: 12px; }
      .def-contrast-item-dot { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
      .def-before .def-contrast-item-dot { background: rgba(192,57,43,.12); color: #c0392b; }
      .def-after .def-contrast-item-dot { background: rgba(42,31,217,.1); color: var(--indigo-600); }
      .def-contrast-item-dot svg { width: 10px; height: 10px; }
      .def-contrast-item p { font-size: 13.5px; color: var(--gray-700); line-height: 1.6; margin: 0; }
      @media (max-width: 800px) { .def-contrast-inner { grid-template-columns: 1fr; } .def-before { border-right: none; border-bottom: 1px solid var(--border); } .def-contrast-arrow { padding: 20px; border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } }

      /* 4-col metric bar */
      .def-metrics { background: var(--bg-soft); }
      .def-metric-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-top: 52px; background: var(--white); }
      .def-metric {
        padding: 32px 24px; text-align: center; border-right: 1px solid var(--border);
        position: relative; overflow: hidden;
        transition: background .35s var(--ease);
      }
      .def-metric:last-child { border-right: none; }
      .def-metric::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400)); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); }
      .def-metric:hover::after { transform: scaleY(1); }
      .def-metric:hover { background: rgba(42,31,217,.025); }
      .def-metric-val { font-size: 32px; font-weight: 900; color: var(--indigo-700); font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; margin-bottom: 8px; }
      .def-metric-lbl { font-size: 12px; font-weight: 700; color: var(--indigo-800); margin-bottom: 6px; }
      .def-metric-sub { font-size: 11.5px; color: var(--gray-500); line-height: 1.5; }
      @media (max-width: 760px) { .def-metric-bar { grid-template-columns: 1fr 1fr; } .def-metric:nth-child(2n) { border-right: none; } .def-metric:nth-child(n+3) { border-top: 1px solid var(--border); } }
      @media (max-width: 480px) { .def-metric-bar { grid-template-columns: 1fr 1fr; } }

            /* ── engineering.html scoped styles (.eng- prefix) ── */

      /* SIGNATURE: Dark — italic statement + 3×2 compact challenge tags */
      .eng-intro {
        background: linear-gradient(150deg, #09082e 0%, #14126e 52%, #0a0928 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .eng-intro::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 60% 20%, rgba(25,187,233,.13) 0%, transparent 48%),
                    radial-gradient(ellipse at 10% 80%, rgba(42,31,217,.18) 0%, transparent 44%);
        pointer-events: none;
      }
      .eng-intro .container { position: relative; z-index: 1; }
      .eng-intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
      .eng-intro-left {}
      .eng-statement {
        font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
        font-size: clamp(22px, 2.8vw, 34px); color: #fff; line-height: 1.5; margin: 16px 0 24px;
        position: relative; padding-left: 20px;
      }
      .eng-statement::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: linear-gradient(180deg, var(--cyan-400), rgba(25,187,233,.2)); border-radius: 2px; }
      .eng-intro-left p { font-size: 14.5px; color: rgba(255,255,255,.58); line-height: 1.78; margin: 0; }
      .eng-intro-right {}
      .eng-intro-right h3 { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.6); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 20px; }
      .eng-tag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .eng-challenge-tag {
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
        border-radius: 10px; padding: 14px 16px;
        transition: background .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
      }
      .eng-challenge-tag:hover { background: rgba(25,187,233,.08); border-color: rgba(25,187,233,.22); transform: translateX(4px); }
      .eng-challenge-tag .eng-tag-title { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.88); margin-bottom: 3px; }
      .eng-challenge-tag .eng-tag-sub { font-size: 11.5px; color: rgba(255,255,255,.42); }
      @media (max-width: 840px) { .eng-intro-inner { grid-template-columns: 1fr; gap: 36px; } }
      @media (max-width: 480px) { .eng-tag-grid { grid-template-columns: 1fr; } }

      /* Services — 3×3 grid, centre card highlighted */
      .eng-services { background: var(--bg-soft); }
      .eng-svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 52px; }
      .eng-svc-card {
        background: var(--white); border: 1px solid var(--border); border-radius: 16px;
        padding: 26px 22px;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .eng-svc-card:hover { border-color: rgba(42,31,217,.2); transform: translateY(-4px); box-shadow: 0 12px 34px rgba(16,10,58,.1); }
      /* Centre card (position 5 in 3×3 = nth-child(5)) */
      .eng-svc-card.eng-svc-featured {
        background: linear-gradient(145deg, var(--indigo-700), var(--indigo-600));
        border-color: var(--indigo-600); color: #fff;
        box-shadow: 0 8px 32px rgba(42,31,217,.3);
      }
      .eng-svc-card.eng-svc-featured:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(42,31,217,.4); }
      .eng-svc-ic {
        width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px;
        background: rgba(42,31,217,.08); color: var(--indigo-600);
        display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .eng-svc-card:not(.eng-svc-featured):hover .eng-svc-ic { background: var(--indigo-700); color: #fff; }
      .eng-svc-featured .eng-svc-ic { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.2); }
      .eng-svc-ic svg { width: 20px; height: 20px; }
      .eng-svc-card h3 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .eng-svc-featured h3 { color: #fff; }
      .eng-svc-card p { font-size: 13px; color: var(--gray-600); line-height: 1.7; margin: 0; }
      .eng-svc-featured p { color: rgba(255,255,255,.75); }
      .eng-svc-pill { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); border-radius: 100px; padding: 3px 10px; margin-bottom: 14px; }
      @media (max-width: 840px) { .eng-svc-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .eng-svc-grid { grid-template-columns: 1fr; } }

      /* Who we serve — CSS scroll-snap sector slider */
      .eng-sectors { background: var(--white); }
      .eng-sector-scroll-wrap { position: relative; margin-top: 52px; }
      .eng-sector-scroll {
        display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; padding-bottom: 12px;
        scrollbar-width: thin; scrollbar-color: rgba(42,31,217,.25) transparent;
      }
      .eng-sector-scroll::-webkit-scrollbar { height: 4px; }
      .eng-sector-scroll::-webkit-scrollbar-track { background: transparent; }
      .eng-sector-scroll::-webkit-scrollbar-thumb { background: rgba(42,31,217,.25); border-radius: 4px; }
      .eng-sector-card {
        flex: 0 0 260px; scroll-snap-align: start;
        background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px;
        padding: 24px 20px; display: flex; flex-direction: column; gap: 10px;
        transition: border-color .35s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
      }
      .eng-sector-card:hover { border-color: rgba(42,31,217,.2); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(16,10,58,.09); background: var(--white); }
      .eng-sector-num { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-500); }
      .eng-sector-card h4 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0; }
      .eng-sector-card p { font-size: 12.5px; color: var(--gray-500); line-height: 1.6; margin: 0; }
      .eng-scroll-hint { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--gray-400); font-weight: 600; margin-top: 12px; }
      .eng-scroll-hint svg { width: 16px; height: 16px; animation: eng-scroll-nudge 2s ease-in-out infinite; }
      @keyframes eng-scroll-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
      @media (max-width: 600px) { .eng-sector-card { flex: 0 0 220px; } }

      /* Why — 3 landscape principle cards */
      .eng-principles { background: var(--bg-soft); }
      .eng-principle-list { display: flex; flex-direction: column; gap: 12px; margin-top: 52px; }
      .eng-principle {
        display: grid; grid-template-columns: 72px 1fr; gap: 0;
        background: var(--white); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
        transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .25s var(--ease);
      }
      .eng-principle:hover { border-color: rgba(42,31,217,.2); box-shadow: 0 10px 32px rgba(16,10,58,.09); transform: translateX(6px); }
      .eng-principle-num-col {
        background: linear-gradient(180deg, var(--indigo-700), var(--indigo-600));
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 900; color: rgba(255,255,255,.5);
        font-family: 'Plus Jakarta Sans', sans-serif; writing-mode: vertical-lr;
        letter-spacing: .2em; text-transform: uppercase;
        transition: background .3s var(--ease);
      }
      .eng-principle:hover .eng-principle-num-col { background: linear-gradient(180deg, var(--indigo-800), var(--indigo-700)); }
      .eng-principle-body { padding: 28px 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; }
      .eng-principle-ic { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; background: rgba(42,31,217,.07); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), color .3s var(--ease); }
      .eng-principle:hover .eng-principle-ic { background: var(--indigo-700); color: #fff; }
      .eng-principle-ic svg { width: 24px; height: 24px; }
      .eng-principle-text {}
      .eng-principle-text h4 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 6px; }
      .eng-principle-text p { font-size: 13.5px; color: var(--gray-600); line-height: 1.7; margin: 0; }
      .eng-principle-tag { padding: 5px 14px; border-radius: 100px; background: rgba(42,31,217,.07); border: 1px solid rgba(42,31,217,.14); font-size: 11px; font-weight: 700; color: var(--indigo-600); white-space: nowrap; }
      @media (max-width: 760px) { .eng-principle-body { grid-template-columns: auto 1fr; } .eng-principle-tag { display: none; } }
      @media (max-width: 540px) { .eng-principle { grid-template-columns: 1fr; } .eng-principle-num-col { writing-mode: horizontal-tb; min-height: 44px; font-size: 10px; } .eng-principle-body { grid-template-columns: auto 1fr; gap: 14px; padding: 18px 20px; } }

            /* ── fibre-connectivity.html page-scoped styles (.fib- prefix) ── */

      /* ── SIGNATURE: Dark asymmetric split showcase ── */
      .fib-showcase {
        background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .fib-showcase::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 5% 50%, rgba(25,187,233,.16) 0%, transparent 48%),
                    radial-gradient(ellipse at 90% 20%, rgba(42,31,217,.2) 0%, transparent 45%);
        pointer-events: none;
      }
      .fib-showcase .container { position: relative; z-index: 1; }
      .fib-showcase-inner {
        display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; align-items: stretch;
      }
      .fib-showcase-left { padding-right: 56px; display: flex; flex-direction: column; justify-content: center; }
      .fib-showcase-divider { background: rgba(255,255,255,.1); width: 1px; }
      .fib-showcase-right { padding-left: 56px; display: flex; flex-direction: column; gap: 0; justify-content: center; }
      .fib-sc-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--cyan-400); margin-bottom: 16px; }
      .fib-sc-headline {
        font-size: clamp(32px, 4vw, 54px); font-weight: 900; color: #fff; line-height: 1.1;
        letter-spacing: -0.03em; margin: 0 0 20px; font-family: 'Plus Jakarta Sans', sans-serif;
      }
      .fib-sc-headline em { color: var(--cyan-400); font-style: normal; }
      .fib-sc-body { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.75; margin: 0 0 28px; }
      .fib-sc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
      .fib-sc-tag {
        font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); padding: 5px 13px;
        border-radius: 100px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05);
        transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
      }
      .fib-sc-tag:hover { border-color: rgba(25,187,233,.5); background: rgba(25,187,233,.1); color: var(--cyan-400); }
      .fib-cap-row {
        display: flex; gap: 20px; align-items: flex-start;
        padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.08);
        transition: padding-left .25s var(--ease);
      }
      .fib-cap-row:first-child { padding-top: 0; }
      .fib-cap-row:last-child { border-bottom: none; padding-bottom: 0; }
      .fib-cap-row:hover { padding-left: 8px; }
      .fib-cap-ic {
        width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
        background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.2);
        color: var(--cyan-400); display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease);
      }
      .fib-cap-row:hover .fib-cap-ic { background: rgba(25,187,233,.22); }
      .fib-cap-ic svg { width: 20px; height: 20px; }
      .fib-cap-text h4 { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.9); margin: 0 0 5px; }
      .fib-cap-text p { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; margin: 0; }
      @media (max-width: 820px) {
        .fib-showcase-inner { grid-template-columns: 1fr; }
        .fib-showcase-divider { display: none; }
        .fib-showcase-left { padding-right: 0; margin-bottom: 40px; }
        .fib-showcase-right { padding-left: 0; }
      }

      /* ── Why Fibre Matters — 5 equal-height benefit cards ── */
      .fib-why { background: var(--bg-soft); }
      .fib-why-grid {
        display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 52px;
      }
      .fib-why-card {
        background: var(--white); border: 1px solid var(--border); border-radius: 18px;
        padding: 28px 22px; display: flex; flex-direction: column; gap: 14px;
        position: relative; overflow: hidden;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .fib-why-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .fib-why-card:hover::before { transform: scaleX(1); }
      .fib-why-card:hover { border-color: rgba(42,31,217,.18); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(16,10,58,.1); }
      .fib-why-ic {
        width: 48px; height: 48px; border-radius: 14px;
        background: rgba(42,31,217,.07); color: var(--indigo-600);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        transition: background .3s var(--ease);
      }
      .fib-why-card:hover .fib-why-ic { background: var(--indigo-700); color: #fff; }
      .fib-why-ic svg { width: 22px; height: 22px; }
      .fib-why-card h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0; line-height: 1.3; }
      .fib-why-card p { font-size: 12.5px; color: var(--gray-600); line-height: 1.65; margin: 0; flex: 1; }
      @media (max-width: 1000px) { .fib-why-grid { grid-template-columns: 1fr 1fr 1fr; } }
      @media (max-width: 640px) { .fib-why-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 420px) { .fib-why-grid { grid-template-columns: 1fr; } }

      /* ── Segment panels — 2×2 large scenario cards ── */
      .fib-segments { background: var(--white); }
      .fib-seg-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 52px;
      }
      .fib-seg-card {
        border: 1px solid var(--border); border-radius: 20px; padding: 36px 32px;
        background: var(--bg-soft); position: relative; overflow: hidden;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
      }
      .fib-seg-card:hover { border-color: rgba(42,31,217,.2); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16,10,58,.1); background: var(--white); }
      .fib-seg-badge {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
        border-radius: 100px; padding: 5px 13px; margin-bottom: 18px;
        background: rgba(42,31,217,.08); color: var(--indigo-700); border: 1px solid rgba(42,31,217,.15);
        transition: background .3s var(--ease), border-color .3s var(--ease);
      }
      .fib-seg-card:hover .fib-seg-badge { background: rgba(42,31,217,.12); border-color: rgba(42,31,217,.25); }
      .fib-seg-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--indigo-500); }
      .fib-seg-card h3 { font-size: 20px; font-weight: 700; color: var(--indigo-800); margin: 0 0 10px; line-height: 1.25; }
      .fib-seg-card p { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin: 0 0 20px; }
      .fib-seg-features { display: flex; flex-direction: column; gap: 8px; }
      .fib-seg-feat {
        display: flex; align-items: center; gap: 10px;
        font-size: 13px; font-weight: 500; color: var(--indigo-800);
      }
      .fib-seg-feat-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: rgba(25,187,233,.12); color: var(--cyan-500); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .fib-seg-card:hover .fib-seg-feat-dot { background: var(--cyan-500); color: #fff; }
      .fib-seg-feat-dot svg { width: 9px; height: 9px; }
      @media (max-width: 720px) { .fib-seg-grid { grid-template-columns: 1fr; } }

      /* ── Approach — left-bordered column steps ── */
      .fib-approach { background: var(--bg-soft); }
      .fib-approach-steps { display: flex; flex-direction: column; gap: 0; margin-top: 52px; }
      .fib-approach-step {
        display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start;
        padding: 28px 0; border-bottom: 1px solid var(--border);
        transition: padding-left .25s var(--ease);
      }
      .fib-approach-step:first-child { padding-top: 0; }
      .fib-approach-step:last-child { border-bottom: none; padding-bottom: 0; }
      .fib-approach-step:hover { padding-left: 10px; }
      .fib-step-label {
        display: flex; align-items: center; gap: 16px;
        padding-right: 28px; border-right: 3px solid var(--border);
        transition: border-color .35s var(--ease);
      }
      .fib-approach-step:hover .fib-step-label { border-color: var(--cyan-500); }
      .fib-step-num {
        width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
        background: linear-gradient(135deg, var(--indigo-700), var(--indigo-500));
        color: #fff; display: flex; align-items: center; justify-content: center;
        font-size: 15px; font-weight: 900; font-family: 'Plus Jakarta Sans', sans-serif;
        transition: box-shadow .3s var(--ease);
      }
      .fib-approach-step:hover .fib-step-num { box-shadow: 0 6px 20px rgba(42,31,217,.3); }
      .fib-step-title { font-size: 14px; font-weight: 700; color: var(--indigo-800); line-height: 1.3; }
      .fib-step-body { font-size: 14px; color: var(--gray-600); line-height: 1.7; }
      @media (max-width: 720px) {
        .fib-approach-step { grid-template-columns: 1fr; gap: 16px; }
        .fib-step-label { border-right: none; border-left: 3px solid var(--border); padding-right: 0; padding-left: 16px; }
        .fib-approach-step:hover .fib-step-label { border-left-color: var(--cyan-500); }
      }

      /* ── Why ParagonIT — 3-col icon list ── */
      .fib-whyus { background: var(--white); }
      .fib-whyus-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; margin-top: 52px; align-items: start; }
      .fib-whyus-intro h3 { font-size: 20px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
      .fib-whyus-intro p { font-size: 14px; color: var(--gray-600); line-height: 1.75; margin: 0; }
      .fib-whyus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .fib-why-item {
        display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
        border: 1px solid var(--border); border-radius: 13px; background: var(--bg-soft);
        transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
      }
      .fib-why-item:hover { border-color: rgba(25,187,233,.3); transform: translateY(-2px); background: rgba(25,187,233,.03); }
      .fib-why-dot { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: rgba(25,187,233,.1); color: var(--cyan-500); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .fib-why-item:hover .fib-why-dot { background: var(--cyan-500); color: #fff; }
      .fib-why-dot svg { width: 14px; height: 14px; }
      .fib-why-item p { font-size: 13px; font-weight: 600; color: var(--indigo-800); line-height: 1.45; margin: 0; }
      @media (max-width: 820px) { .fib-whyus-inner { grid-template-columns: 1fr; gap: 32px; } }
      @media (max-width: 560px) { .fib-whyus-grid { grid-template-columns: 1fr; } }

            /* ── finance.html page-scoped styles (.fin- prefix) ── */

      /* ── SIGNATURE: Dark 2-col — pull paragraph + numbered challenge list ── */
      .fin-context {
        background: linear-gradient(150deg, #09082e 0%, #12106b 45%, #0c0b2e 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .fin-context::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 90% 20%, rgba(25,187,233,.13) 0%, transparent 50%),
                    radial-gradient(ellipse at 5% 80%, rgba(42,31,217,.2) 0%, transparent 45%);
        pointer-events: none;
      }
      .fin-context .container { position: relative; z-index: 1; }
      .fin-ctx-inner { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; align-items: start; }
      .fin-ctx-left { padding-right: 56px; }
      .fin-ctx-divider { background: rgba(255,255,255,.09); }
      .fin-ctx-right { padding-left: 56px; }
      .fin-ctx-pull {
        font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
        font-size: clamp(20px,2.4vw,27px); line-height: 1.55; color: rgba(255,255,255,.88);
        margin: 16px 0 28px;
      }
      .fin-ctx-pull em { color: var(--cyan-400); font-style: normal; }
      .fin-ctx-body { font-size: 14px; color: rgba(255,255,255,.58); line-height: 1.8; margin: 0; }
      .fin-ctx-right h3 { font-size: clamp(14px,1.4vw,16px); font-weight: 700; color: rgba(255,255,255,.9); margin: 0 0 24px; letter-spacing: .01em; text-transform: uppercase; font-size: 11px; letter-spacing: .09em; color: var(--cyan-400); }
      .fin-ch-list { display: flex; flex-direction: column; gap: 0; }
      .fin-ch-row {
        display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start;
        padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08);
        transition: padding-left .25s var(--ease);
      }
      .fin-ch-row:first-child { padding-top: 0; }
      .fin-ch-row:last-child { border-bottom: none; padding-bottom: 0; }
      .fin-ch-row:hover { padding-left: 6px; }
      .fin-ch-n {
        font-size: 12px; font-weight: 800; color: var(--cyan-400); font-family: 'Plus Jakarta Sans',sans-serif;
        padding-top: 3px;
      }
      .fin-ch-row h4 { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.88); margin: 0 0 5px; }
      .fin-ch-row p { font-size: 12.5px; color: rgba(255,255,255,.52); line-height: 1.6; margin: 0; }
      @media (max-width: 840px) {
        .fin-ctx-inner { grid-template-columns: 1fr; }
        .fin-ctx-divider { display: none; }
        .fin-ctx-left { padding-right: 0; margin-bottom: 40px; }
        .fin-ctx-right { padding-left: 0; }
      }

      /* ── Solutions — 2×3 card grid with category badge ── */
      .fin-solutions { background: var(--bg-soft); }
      .fin-sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 52px; }
      .fin-sol-card {
        background: var(--white); border: 1px solid var(--border); border-radius: 18px;
        padding: 28px 26px; display: flex; flex-direction: column; gap: 12px;
        position: relative; overflow: hidden;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .fin-sol-card::before {
        content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .fin-sol-card:hover::before { transform: scaleX(1); }
      .fin-sol-card:hover { border-color: rgba(42,31,217,.2); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,10,58,.1); }
      .fin-sol-badge {
        align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
        font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
        padding: 4px 12px; border-radius: 100px;
        background: rgba(42,31,217,.07); color: var(--indigo-700); border: 1px solid rgba(42,31,217,.14);
        transition: background .3s var(--ease);
      }
      .fin-sol-card:hover .fin-sol-badge { background: rgba(42,31,217,.13); }
      .fin-sol-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo-500); }
      .fin-sol-card h3 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0; line-height: 1.3; }
      .fin-sol-card p { font-size: 13.5px; color: var(--gray-600); line-height: 1.72; margin: 0; flex: 1; }
      @media (max-width: 700px) { .fin-sol-grid { grid-template-columns: 1fr; } }

      /* ── Who we support — marquee ticker + 2-col outcome list ── */
      .fin-who { background: var(--white); overflow: hidden; }
      .fin-ticker-wrap { position: relative; overflow: hidden; margin: 48px 0 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-soft); }
      .fin-ticker-wrap::before,
      .fin-ticker-wrap::after {
        content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
      }
      .fin-ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg-soft), transparent); }
      .fin-ticker-wrap::after { right: 0; background: linear-gradient(-90deg, var(--bg-soft), transparent); }
      .fin-ticker {
        display: flex; gap: 0; white-space: nowrap;
        animation: finTick 22s linear infinite;
      }
      .fin-ticker:hover { animation-play-state: paused; }
      @keyframes finTick {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
      .fin-tick-item {
        display: inline-flex; align-items: center; gap: 10px; padding: 0 28px;
        font-size: 13px; font-weight: 600; color: var(--indigo-800);
        flex-shrink: 0;
      }
      .fin-tick-sep { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-500); flex-shrink: 0; }
      .fin-outcomes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
      .fin-out-row {
        display: flex; align-items: center; gap: 14px; padding: 14px 18px;
        border: 1px solid var(--border); border-radius: 11px; background: var(--bg-soft);
        transition: border-color .3s var(--ease), transform .25s var(--ease), background .3s var(--ease);
      }
      .fin-out-row:hover { border-color: rgba(25,187,233,.3); transform: translateX(4px); background: rgba(25,187,233,.03); }
      .fin-out-ic { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: rgba(25,187,233,.1); color: var(--cyan-500); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .fin-out-row:hover .fin-out-ic { background: var(--cyan-500); color: #fff; }
      .fin-out-ic svg { width: 14px; height: 14px; }
      .fin-out-row p { font-size: 13px; font-weight: 600; color: var(--indigo-800); line-height: 1.4; margin: 0; }
      @media (max-width: 640px) { .fin-outcomes-grid { grid-template-columns: 1fr; } }

      /* ── Why choose paragonIT — 5 horizontal disclosure bars ── */
      .fin-why { background: var(--bg-soft); }
      .fin-why-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 52px; }
      .fin-why-bar {
        border: 1px solid var(--border); border-radius: 13px; overflow: hidden;
        background: var(--white);
        transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
      }
      .fin-why-bar[open] { border-color: rgba(25,187,233,.3); box-shadow: 0 6px 24px rgba(16,10,58,.08); }
      .fin-why-bar-head {
        display: flex; align-items: center; gap: 18px;
        padding: 20px 24px; cursor: pointer; list-style: none; user-select: none;
        transition: background .25s var(--ease);
      }
      .fin-why-bar-head::-webkit-details-marker { display: none; }
      .fin-why-bar-head:hover { background: rgba(25,187,233,.03); }
      .fin-why-bar[open] .fin-why-bar-head { background: rgba(25,187,233,.04); border-bottom: 1px solid rgba(25,187,233,.15); }
      .fin-why-bar-ic {
        width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
        background: rgba(25,187,233,.08); color: var(--cyan-600,#0ea5c9);
        display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .fin-why-bar[open] .fin-why-bar-ic { background: var(--cyan-500); color: #fff; }
      .fin-why-bar-ic svg { width: 18px; height: 18px; }
      .fin-why-bar-title { font-size: 15px; font-weight: 700; color: var(--indigo-800); flex: 1; }
      .fin-why-bar-toggle {
        width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
        border: 1px solid var(--border); background: transparent;
        display: flex; align-items: center; justify-content: center; color: var(--gray-500);
        transition: background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease), color .3s var(--ease);
      }
      .fin-why-bar[open] .fin-why-bar-toggle { background: var(--cyan-500); border-color: var(--cyan-500); color: #fff; transform: rotate(180deg); }
      .fin-why-bar-toggle svg { width: 13px; height: 13px; }
      .fin-why-bar-body { padding: 20px 24px 22px 80px; font-size: 14px; color: var(--gray-600); line-height: 1.75; }
      @media (max-width: 580px) { .fin-why-bar-body { padding-left: 24px; } }

      /* ── Secure IT matters callout — highlight quote panel ── */
      .fin-matters { background: var(--white); }
      .fin-matters-inner {
        border: 1px solid var(--border); border-radius: 20px; padding: 48px;
        background: linear-gradient(135deg, rgba(42,31,217,.04) 0%, rgba(25,187,233,.03) 100%);
        position: relative; overflow: hidden;
      }
      .fin-matters-inner::before {
        content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
        background: linear-gradient(180deg, var(--indigo-600), var(--cyan-400));
        border-radius: 4px 0 0 4px;
      }
      .fin-matters-inner h3 { font-size: 20px; font-weight: 700; color: var(--indigo-800); margin: 0 0 16px; }
      .fin-matters-inner p { font-size: 15px; color: var(--gray-600); line-height: 1.8; margin: 0 0 12px; }
      .fin-matters-inner p:last-child { margin: 0; }
      @media (max-width: 640px) { .fin-matters-inner { padding: 28px 24px; } }

            /* ── governance-compliance.html page-scoped styles (.gc- prefix) ── */

      /* ── Services delivered — 2-col checklist ── */
      .gc-delivers { background: var(--white); }
      .gc-delivers-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px;
      }
      .gc-del-item {
        display: flex; gap: 13px; align-items: flex-start;
        padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border);
        background: var(--bg-soft);
        transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
      }
      .gc-del-item:hover { border-color: rgba(25,187,233,.4); transform: translateX(4px); background: rgba(25,187,233,.03); }
      .gc-del-check {
        width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
        background: rgba(25,187,233,.1); color: var(--cyan-600);
        display: flex; align-items: center; justify-content: center; margin-top: 1px;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .gc-del-item:hover .gc-del-check { background: var(--cyan-500); color: #fff; }
      .gc-del-check svg { width: 11px; height: 11px; }
      .gc-del-item p { font-size: 14px; font-weight: 600; color: var(--indigo-800); margin: 0; line-height: 1.4; }
      @media (max-width: 580px) { .gc-delivers-grid { grid-template-columns: 1fr; } }

      /* ── Governance + Compliance split narrative sections ── */
      .gc-narrative { background: var(--bg-soft); }
      .gc-narrative-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 60px; align-items: start;
      }
      .gc-narrative-panel {
        background: var(--white); border: 1px solid var(--border); border-radius: 18px;
        padding: 40px; position: relative; overflow: hidden;
        transition: box-shadow .35s var(--ease), transform .35s var(--ease);
      }
      .gc-narrative-panel::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        border-radius: 2px 2px 0 0;
      }
      .gc-narrative-panel:hover { box-shadow: 0 16px 44px rgba(16,10,58,.1); transform: translateY(-3px); }
      .gc-narrative-panel h3 { font-size: 22px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
      .gc-narrative-panel p  { font-size: 14.5px; color: var(--gray-600); line-height: 1.7; margin: 0 0 12px; }
      .gc-narrative-panel p:last-child { margin: 0; }
      @media (max-width: 780px) { .gc-narrative-grid { grid-template-columns: 1fr; gap: 24px; } }

      /* ── SIGNATURE: Framework Alignment Comparison ── */
      .gc-frameworks-section {
        background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .gc-frameworks-section::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 15% 60%, rgba(25,187,233,.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 85% 25%, rgba(42,31,217,.18) 0%, transparent 45%);
        pointer-events: none;
      }
      .gc-frameworks-section .container { position: relative; z-index: 1; }
      .gc-fw-head { text-align: center; margin-bottom: 56px; }
      .gc-fw-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
      .gc-fw-head p  { color: rgba(255,255,255,.65); font-size: 16px; max-width: 560px; margin: 0 auto; line-height: 1.7; }

      /* Framework cards */
      .gc-fw-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
      .gc-fw-card {
        background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
        border-radius: 18px; padding: 32px 26px;
        display: flex; flex-direction: column; gap: 16px;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
        position: relative; overflow: hidden;
      }
      .gc-fw-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--cyan-400), var(--indigo-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .gc-fw-card:hover::before { transform: scaleX(1); }
      .gc-fw-card:hover {
        background: rgba(25,187,233,.08); border-color: rgba(25,187,233,.35);
        transform: translateY(-5px); box-shadow: 0 24px 48px rgba(0,0,0,.4);
      }
      .gc-fw-badge {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
        color: var(--cyan-400); background: rgba(25,187,233,.12);
        border: 1px solid rgba(25,187,233,.25); border-radius: 100px; padding: 5px 12px;
        width: fit-content;
      }
      .gc-fw-card h3 { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0; }
      .gc-fw-card p  { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.65; margin: 0 0 4px; flex: 1; }
      .gc-fw-services { display: flex; flex-direction: column; gap: 7px; }
      .gc-fw-service {
        display: flex; align-items: center; gap: 9px;
        font-size: 12.5px; color: rgba(255,255,255,.75); font-weight: 500;
      }
      .gc-fw-service::before {
        content: ""; width: 6px; height: 6px; border-radius: 50%;
        background: var(--cyan-400); flex-shrink: 0;
      }
      @media (max-width: 860px) { .gc-fw-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .gc-fw-grid { grid-template-columns: 1fr; } }

      /* ── Risk management section — horizontal numbered list ── */
      .gc-risk { background: var(--white); }
      .gc-risk-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 48px;
        border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
        background: var(--bg-soft);
      }
      .gc-risk-item {
        padding: 28px 32px; border-bottom: 1px solid var(--border);
        display: flex; gap: 20px; align-items: flex-start; background: var(--white);
        position: relative; overflow: hidden;
        transition: background .3s var(--ease), transform .3s var(--ease);
      }
      .gc-risk-item:nth-child(odd) { border-right: 1px solid var(--border); }
      .gc-risk-item:nth-last-child(-n+2) { border-bottom: none; }
      .gc-risk-item::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
        background: var(--cyan-500); transform: scaleY(0); transform-origin: bottom;
        transition: transform .35s var(--ease);
      }
      .gc-risk-item:hover::before { transform: scaleY(1); }
      .gc-risk-item:hover { background: rgba(25,187,233,.02); transform: translateX(4px); }
      .gc-risk-num {
        font-size: 32px; font-weight: 900; color: rgba(42,31,217,.1); line-height: 1;
        flex-shrink: 0; padding-top: 2px; font-family: 'Plus Jakarta Sans', sans-serif;
        transition: color .35s var(--ease);
      }
      .gc-risk-item:hover .gc-risk-num { color: rgba(42,31,217,.2); }
      .gc-risk-body h4 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 7px; }
      .gc-risk-body p  { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 720px) {
        .gc-risk-grid { grid-template-columns: 1fr; }
        .gc-risk-item:nth-child(odd) { border-right: none; }
        .gc-risk-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
        .gc-risk-item:last-child { border-bottom: none; }
      }

      /* ── Policy documentation list ── */
      .gc-policy { background: var(--bg-soft); }
      .gc-policy-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: start; }
      .gc-policy-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--white); }
      .gc-policy-list li {
        display: flex; gap: 14px; align-items: center;
        padding: 15px 22px; border-bottom: 1px solid var(--border);
        list-style: none; font-size: 14px; font-weight: 500; color: var(--indigo-800);
        transition: background .3s var(--ease), transform .3s var(--ease);
      }
      .gc-policy-list li:last-child { border-bottom: none; }
      .gc-policy-list li:hover { background: rgba(25,187,233,.04); transform: translateX(4px); }
      .gc-policy-list li::before {
        content: ""; width: 8px; height: 8px; border-radius: 2px;
        background: var(--indigo-600); flex-shrink: 0;
        transition: background .3s var(--ease);
      }
      .gc-policy-list li:hover::before { background: var(--cyan-500); }
      .gc-policy-text h3 { font-size: 22px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
      .gc-policy-text p  { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin: 0 0 12px; }
      @media (max-width: 780px) { .gc-policy-split { grid-template-columns: 1fr; gap: 28px; } }

      /* ── Who It's For + Why ParagonIT combined ── */
      .gc-why-who { background: var(--white); }
      .gc-why-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: start; }
      .gc-who-list { display: flex; flex-direction: column; gap: 10px; }
      .gc-who-item {
        display: flex; gap: 13px; align-items: flex-start;
        padding: 13px 18px; border-radius: 10px; border: 1px solid var(--border);
        background: var(--bg-soft); font-size: 14px; font-weight: 500; color: var(--indigo-800);
        transition: border-color .3s var(--ease), transform .3s var(--ease);
      }
      .gc-who-item:hover { border-color: rgba(42,31,217,.22); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,10,58,.07); }
      .gc-who-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo-600); flex-shrink: 0; margin-top: 5px; }
      .gc-why-list { display: flex; flex-direction: column; gap: 0; }
      .gc-why-item {
        display: flex; gap: 18px; padding: 20px 0; align-items: flex-start;
        border-bottom: 1px solid var(--border);
      }
      .gc-why-item:last-child { border-bottom: none; }
      .gc-why-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: var(--indigo-100,rgba(42,31,217,.08)); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .gc-why-item:hover .gc-why-ic { background: var(--indigo-700); color: #fff; }
      .gc-why-ic svg { width: 18px; height: 18px; }
      .gc-why-body h4 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 5px; }
      .gc-why-body p  { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 780px) { .gc-why-who-grid { grid-template-columns: 1fr; gap: 32px; } }

            /* ── insights.html scoped styles (.ins- prefix) ── */

      /* FEATURED ARTICLE — 2-col split */
      .ins-featured { background: var(--bg-soft); }
      .ins-featured-inner {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0;
        border: 1px solid var(--border); border-radius: 22px; overflow: hidden; margin-top: 52px;
        transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
      }
      .ins-featured-inner:hover { box-shadow: 0 20px 56px rgba(16,10,58,.12); border-color: rgba(42,31,217,.2); }
      .ins-featured-img { position: relative; overflow: hidden; min-height: 380px; }
      .ins-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
      .ins-featured-inner:hover .ins-featured-img img { transform: scale(1.03); }
      .ins-featured-body { background: var(--white); padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
      .ins-featured-cat { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; }
      .ins-featured-cat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-500); }
      .ins-featured-cat span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-600); }
      .ins-featured-body h2 { font-size: clamp(18px, 2vw, 26px); font-weight: 800; color: var(--indigo-800); letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 14px; }
      .ins-featured-body p { font-size: 14.5px; color: var(--gray-600); line-height: 1.75; margin: 0 0 24px; }
      .ins-featured-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
      .ins-meta-badge { font-size: 11px; font-weight: 700; color: var(--gray-500); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 100px; padding: 4px 12px; }
      .ins-featured-body .ins-read-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--indigo-700); text-decoration: none; transition: gap .25s var(--ease), color .25s var(--ease); }
      .ins-featured-body .ins-read-link:hover { color: var(--indigo-600); gap: 14px; }
      .ins-featured-body .ins-read-link svg { width: 16px; height: 16px; }
      @media (max-width: 840px) { .ins-featured-inner { grid-template-columns: 1fr; } .ins-featured-img { min-height: 280px; } .ins-featured-body { padding: 28px 24px; } }

      /* TOPIC CARD GRID */
      .ins-topics { background: var(--white); }
      .ins-topics-hd { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 36px; }
      .ins-topics-hd p { font-size: 14px; color: var(--gray-500); max-width: 440px; }
      .ins-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
      .ins-card {
        border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
        background: var(--bg-soft); display: flex; flex-direction: column;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .ins-card:hover { border-color: rgba(42,31,217,.2); transform: translateY(-5px); box-shadow: 0 14px 40px rgba(16,10,58,.1); }
      .ins-card-top { padding: 22px 20px 16px; flex: 1; }
      .ins-card-cat { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; }
      .ins-card-cat-dot { width: 6px; height: 6px; border-radius: 50%; }
      .ins-card h3 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 10px; line-height: 1.35; }
      .ins-card p { font-size: 13px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      .ins-card-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--white); }
      .ins-card-read { font-size: 11.5px; font-weight: 700; color: var(--gray-400); }
      .ins-card-arrow { width: 28px; height: 28px; border-radius: 8px; background: rgba(42,31,217,.07); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), color .3s var(--ease); flex-shrink: 0; }
      .ins-card:hover .ins-card-arrow { background: var(--indigo-700); color: #fff; }
      .ins-card-arrow svg { width: 12px; height: 12px; }
      /* Category colour coding */
      .ins-card[data-cat="cyber"] .ins-card-cat { color: #c0392b; } .ins-card[data-cat="cyber"] .ins-card-cat-dot { background: #c0392b; }
      .ins-card[data-cat="cloud"] .ins-card-cat { color: var(--cyan-600); } .ins-card[data-cat="cloud"] .ins-card-cat-dot { background: var(--cyan-500); }
      .ins-card[data-cat="ms"] .ins-card-cat { color: #0078d4; } .ins-card[data-cat="ms"] .ins-card-cat-dot { background: #0078d4; }
      .ins-card[data-cat="ai"] .ins-card-cat { color: #7b3feb; } .ins-card[data-cat="ai"] .ins-card-cat-dot { background: #7b3feb; }
      .ins-card[data-cat="strat"] .ins-card-cat { color: var(--indigo-600); } .ins-card[data-cat="strat"] .ins-card-cat-dot { background: var(--indigo-600); }
      .ins-card[data-cat="ind"] .ins-card-cat { color: #27ae60; } .ins-card[data-cat="ind"] .ins-card-cat-dot { background: #27ae60; }
      @media (max-width: 840px) { .ins-card-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .ins-card-grid { grid-template-columns: 1fr; } }

      /* NEWSLETTER STRIP */
      .ins-newsletter {
        background: linear-gradient(135deg, var(--indigo-700) 0%, var(--indigo-600) 60%, rgba(25,187,233,.3) 100%);
        padding: 56px 0; position: relative; overflow: hidden;
      }
      .ins-newsletter::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(25,187,233,.15) 0%, transparent 50%); pointer-events: none; }
      .ins-nl-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
      .ins-nl-copy h2 { font-size: clamp(20px,2.2vw,28px); font-weight: 800; color: #fff; margin: 0 0 10px; letter-spacing: -0.02em; }
      .ins-nl-copy p { font-size: 14.5px; color: rgba(255,255,255,.72); line-height: 1.7; margin: 0; }
      .ins-nl-form { display: flex; flex-direction: column; gap: 12px; }
      .ins-nl-row { display: flex; gap: 10px; }
      .ins-nl-input {
        flex: 1; padding: 13px 18px; border-radius: 11px; border: 1px solid rgba(255,255,255,.2);
        background: rgba(255,255,255,.1); color: #fff; font-size: 14px;
        font-family: 'Plus Jakarta Sans', sans-serif; outline: none;
        transition: border-color .3s var(--ease), background .3s var(--ease);
      }
      .ins-nl-input::placeholder { color: rgba(255,255,255,.4); }
      .ins-nl-input:focus { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.14); }
      .ins-nl-btn {
        padding: 13px 24px; border-radius: 11px; border: none; cursor: pointer;
        background: #fff; color: var(--indigo-700); font-size: 13.5px; font-weight: 700;
        font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap;
        transition: background .3s var(--ease), transform .25s var(--ease), color .3s var(--ease);
      }
      .ins-nl-btn:hover { background: var(--cyan-400); color: #fff; transform: translateY(-2px); }
      .ins-nl-disclaimer { font-size: 11px; color: rgba(255,255,255,.45); }
      @media (max-width: 760px) { .ins-nl-inner { grid-template-columns: 1fr; gap: 28px; } .ins-nl-row { flex-direction: column; } }

      /* RESOURCES */
      .ins-resources { background: var(--bg-soft); }
      .ins-res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 52px; }
      .ins-res-card {
        background: var(--white); border: 1px solid var(--border); border-radius: 16px;
        padding: 28px 24px; display: flex; flex-direction: column; gap: 14px;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .ins-res-card:hover { border-color: rgba(42,31,217,.2); transform: translateY(-4px); box-shadow: 0 12px 34px rgba(16,10,58,.1); }
      .ins-res-icon { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; background: rgba(42,31,217,.07); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), color .3s var(--ease); }
      .ins-res-card:hover .ins-res-icon { background: var(--indigo-700); color: #fff; }
      .ins-res-icon svg { width: 22px; height: 22px; }
      .ins-res-type { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo-600); }
      .ins-res-card h4 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0; line-height: 1.3; }
      .ins-res-card p { font-size: 13px; color: var(--gray-500); line-height: 1.65; margin: 0; flex: 1; }
      .ins-res-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--indigo-700); text-decoration: none; margin-top: auto; transition: gap .25s var(--ease); }
      .ins-res-link:hover { gap: 12px; }
      .ins-res-link svg { width: 14px; height: 14px; }
      @media (max-width: 760px) { .ins-res-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 480px) { .ins-res-grid { grid-template-columns: 1fr; } }

      /* EXPLORE TAG CLOUD */
      .ins-explore { background: var(--white); padding: 72px 0; }
      .ins-explore-inner { text-align: center; }
      .ins-explore-inner h2 { font-size: clamp(22px,2.4vw,30px); font-weight: 700; color: var(--indigo-800); margin: 12px 0 24px; letter-spacing: -0.02em; }
      .ins-topic-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
      .ins-topic-chip {
        display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
        border-radius: 100px; border: 1px solid var(--border); background: var(--bg-soft);
        font-size: 13px; font-weight: 600; color: var(--indigo-800); text-decoration: none; cursor: pointer;
        transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
      }
      .ins-topic-chip:hover { background: var(--white); border-color: rgba(42,31,217,.25); color: var(--indigo-700); transform: translateY(-3px); box-shadow: 0 6px 18px rgba(16,10,58,.09); }
      .ins-topic-chip-ic { width: 20px; height: 20px; border-radius: 6px; background: rgba(42,31,217,.08); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
      .ins-topic-chip-ic svg { width: 10px; height: 10px; }

            /* ── manufacturing.html page-scoped styles (.mfg- prefix) ── */

      /* ── SIGNATURE: Dark challenge grid — 3-col problem statements ── */
      .mfg-challenges {
        background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
        padding: 88px 0; position: relative; overflow: hidden;
      }
      .mfg-challenges::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 15% 40%, rgba(25,187,233,.12) 0%, transparent 48%),
                    radial-gradient(ellipse at 85% 60%, rgba(42,31,217,.18) 0%, transparent 45%);
        pointer-events: none;
      }
      .mfg-challenges .container { position: relative; z-index: 1; }
      .mfg-ch-header { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: end; margin-bottom: 52px; }
      .mfg-ch-header h2 { font-size: clamp(24px,3vw,36px); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin: 12px 0 0; }
      .mfg-ch-header p { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.75; margin: 0; }
      .mfg-ch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; }
      .mfg-ch-cell {
        background: rgba(255,255,255,.04); padding: 30px 28px;
        transition: background .35s var(--ease);
        position: relative;
      }
      .mfg-ch-cell::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, var(--cyan-400), var(--indigo-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .mfg-ch-cell:hover { background: rgba(25,187,233,.07); }
      .mfg-ch-cell:hover::before { transform: scaleX(1); }
      .mfg-ch-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-400); margin-bottom: 12px; }
      .mfg-ch-cell h4 { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0 0 10px; line-height: 1.3; }
      .mfg-ch-cell p { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.65; margin: 0; }
      @media (max-width: 860px) {
        .mfg-ch-grid { grid-template-columns: 1fr 1fr; }
        .mfg-ch-header { grid-template-columns: 1fr; gap: 16px; }
      }
      @media (max-width: 560px) { .mfg-ch-grid { grid-template-columns: 1fr; } }

      /* ── Services — native <details> accordion panels ── */
      .mfg-services { background: var(--bg-soft); }
      .mfg-acc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 52px; }
      .mfg-acc {
        border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
        background: var(--white);
        transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
      }
      .mfg-acc[open] { border-color: rgba(42,31,217,.25); box-shadow: 0 8px 28px rgba(16,10,58,.09); }
      .mfg-acc-head {
        display: flex; align-items: center; gap: 20px;
        padding: 22px 26px; cursor: pointer; list-style: none; user-select: none;
        transition: background .25s var(--ease);
      }
      .mfg-acc-head::-webkit-details-marker { display: none; }
      .mfg-acc-head:hover { background: rgba(42,31,217,.025); }
      .mfg-acc[open] .mfg-acc-head { background: rgba(42,31,217,.04); border-bottom: 1px solid var(--border); }
      .mfg-acc-num {
        width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
        background: rgba(42,31,217,.08); color: var(--indigo-600);
        display: flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 800; font-family: 'Plus Jakarta Sans',sans-serif;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .mfg-acc[open] .mfg-acc-num { background: var(--indigo-700); color: #fff; }
      .mfg-acc-title { font-size: 16px; font-weight: 700; color: var(--indigo-800); flex: 1; }
      .mfg-acc-chev {
        width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
        border: 1px solid var(--border); background: transparent;
        display: flex; align-items: center; justify-content: center; color: var(--gray-500);
        transition: background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease), color .3s var(--ease);
      }
      .mfg-acc[open] .mfg-acc-chev { background: var(--indigo-700); border-color: var(--indigo-700); color: #fff; transform: rotate(180deg); }
      .mfg-acc-chev svg { width: 14px; height: 14px; }
      .mfg-acc-body { padding: 24px 26px 26px 82px; }
      .mfg-acc-body p { font-size: 14px; color: var(--gray-600); line-height: 1.75; margin: 0 0 16px; }
      .mfg-acc-body p:last-child { margin: 0; }
      .mfg-acc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
      .mfg-acc-tag {
        font-size: 12px; font-weight: 600; color: var(--indigo-700); padding: 4px 12px;
        border-radius: 100px; border: 1px solid rgba(42,31,217,.18); background: rgba(42,31,217,.06);
      }
      @media (max-width: 600px) { .mfg-acc-body { padding-left: 26px; } }

      /* ── Outcomes strip — inline gradient banner ── */
      .mfg-outcomes {
        background: linear-gradient(135deg, var(--indigo-800) 0%, #1a156e 50%, var(--indigo-900,#0d0b4e) 100%);
        padding: 64px 0; position: relative; overflow: hidden;
      }
      .mfg-outcomes::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 50% 100%, rgba(25,187,233,.12) 0%, transparent 55%);
        pointer-events: none;
      }
      .mfg-outcomes .container { position: relative; z-index: 1; }
      .mfg-out-title { text-align: center; margin-bottom: 36px; }
      .mfg-out-title h2 { font-size: clamp(20px,2.5vw,30px); font-weight: 700; color: #fff; margin: 10px 0 0; letter-spacing: -0.02em; }
      .mfg-out-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
      .mfg-out-item {
        padding: 20px 24px; border-right: 1px solid rgba(255,255,255,.1);
        display: flex; align-items: flex-start; gap: 12px;
        transition: background .3s var(--ease);
      }
      .mfg-out-item:last-child { border-right: none; }
      .mfg-out-item:nth-child(3) { border-right: none; }
      .mfg-out-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1); }
      .mfg-out-item:nth-child(5) { border-top: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1); }
      .mfg-out-item:nth-child(6) { border-top: 1px solid rgba(255,255,255,.1); }
      .mfg-out-item:hover { background: rgba(255,255,255,.05); }
      .mfg-out-tick { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; background: rgba(25,187,233,.2); border: 1px solid rgba(25,187,233,.35); display: flex; align-items: center; justify-content: center; color: var(--cyan-400); margin-top: 2px; }
      .mfg-out-tick svg { width: 10px; height: 10px; }
      .mfg-out-item p { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.45; margin: 0; }
      @media (max-width: 720px) {
        .mfg-out-grid { grid-template-columns: 1fr 1fr; }
        .mfg-out-item:nth-child(3) { border-right: none; border-top: 1px solid rgba(255,255,255,.1); }
        .mfg-out-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
        .mfg-out-item:nth-child(2n) { border-right: none; }
        .mfg-out-item:nth-child(2n-1) { border-right: 1px solid rgba(255,255,255,.1); }
      }
      @media (max-width: 480px) { .mfg-out-grid { grid-template-columns: 1fr; } .mfg-out-item { border-right: none !important; border-top: 1px solid rgba(255,255,255,.1) !important; } .mfg-out-item:first-child { border-top: none !important; } }

      /* ── Who we work with — pill cloud ── */
      .mfg-who { background: var(--bg-soft); }
      .mfg-who-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; margin-top: 52px; align-items: center; }
      .mfg-who-text h3 { font-size: 20px; font-weight: 700; color: var(--indigo-800); margin: 0 0 12px; }
      .mfg-who-text p { font-size: 14px; color: var(--gray-600); line-height: 1.75; margin: 0; }
      .mfg-pill-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
      .mfg-pill {
        padding: 10px 20px; border-radius: 100px; border: 1px solid var(--border);
        background: var(--white); font-size: 13.5px; font-weight: 600; color: var(--indigo-800);
        transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
      }
      .mfg-pill:hover { border-color: var(--indigo-600); background: rgba(42,31,217,.06); color: var(--indigo-700); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(16,10,58,.08); }
      @media (max-width: 760px) { .mfg-who-inner { grid-template-columns: 1fr; gap: 28px; } }

      /* ── Why paragonIT — 3-col numbered text blocks ── */
      .mfg-why { background: var(--white); }
      .mfg-why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px; }
      .mfg-why-block {
        padding: 28px 26px; border-radius: 16px; border: 1px solid var(--border);
        background: var(--bg-soft); position: relative; overflow: hidden;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
      }
      .mfg-why-block::after {
        content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .mfg-why-block:hover::after { transform: scaleX(1); }
      .mfg-why-block:hover { border-color: rgba(42,31,217,.2); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(16,10,58,.1); background: var(--white); }
      .mfg-why-block-num {
        font-size: 44px; font-weight: 900; color: rgba(42,31,217,.08);
        font-family: 'Plus Jakarta Sans',sans-serif; line-height: 1; margin-bottom: 12px;
        transition: color .35s var(--ease);
      }
      .mfg-why-block:hover .mfg-why-block-num { color: rgba(42,31,217,.14); }
      .mfg-why-block h4 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 10px; }
      .mfg-why-block p { font-size: 13.5px; color: var(--gray-600); line-height: 1.7; margin: 0; }
      @media (max-width: 860px) { .mfg-why-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 540px) { .mfg-why-grid { grid-template-columns: 1fr; } }

            /* ── microsoft-copilot.html page-scoped styles ── */

      /* ── Services Grid — numbered capability blocks ── */
      .cop-services { background: var(--bg-soft); }
      .cop-services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
        background: var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-top: 56px;
      }
      .cop-service-cell {
        background: var(--white);
        padding: 40px 36px;
        position: relative;
        transition: background .35s var(--ease);
      }
      .cop-service-cell:hover { background: var(--indigo-800); }
      .cop-cell-num {
        font-size: 13px; font-weight: 800; letter-spacing: .08em;
        color: var(--cyan-500); text-transform: uppercase;
        margin-bottom: 18px; display: block;
        transition: color .35s var(--ease);
      }
      .cop-service-cell:hover .cop-cell-num { color: var(--cyan-400); }
      .cop-service-cell h3 {
        font-size: 19px; font-weight: 700; color: var(--indigo-800);
        margin: 0 0 12px; letter-spacing: -0.01em; line-height: 1.25;
        transition: color .35s var(--ease);
      }
      .cop-service-cell:hover h3 { color: #fff; }
      .cop-service-cell p {
        font-size: 14px; color: var(--gray-600);
        line-height: 1.7; margin: 0;
        transition: color .35s var(--ease);
      }
      .cop-service-cell:hover p { color: rgba(255,255,255,.72); }
      /* Accent bar bottom-left on open */
      .cop-service-cell::after {
        content: ""; position: absolute; bottom: 0; left: 0;
        height: 3px; width: 0; background: var(--cyan-500);
        transition: width .4s var(--ease);
      }
      .cop-service-cell:hover::after { width: 100%; }
      @media (max-width: 700px) { .cop-services-grid { grid-template-columns: 1fr; } }

      /* ── Business Outcome Questions — signature section ── */
      .cop-questions { background: var(--white); }
      .cop-q-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
      .cop-q-text h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; color: var(--indigo-800); letter-spacing: -0.02em; margin: 16px 0 20px; line-height: 1.15; }
      .cop-q-text > p { font-size: 16px; color: var(--gray-600); line-height: 1.7; margin: 0 0 32px; }
      .cop-q-list { display: flex; flex-direction: column; gap: 0; }
      .cop-q-item {
        border-top: 1px solid var(--border);
        padding: 18px 0; display: flex; align-items: flex-start; gap: 14px;
        transition: padding-left .25s var(--ease);
      }
      .cop-q-item:last-child { border-bottom: 1px solid var(--border); }
      .cop-q-item:hover { padding-left: 6px; }
      .cop-q-icon {
        width: 28px; height: 28px; border-radius: 50%;
        background: var(--cyan-100); color: var(--cyan-500);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        transition: background .25s var(--ease), color .25s var(--ease);
        margin-top: 2px;
      }
      .cop-q-item:hover .cop-q-icon { background: var(--cyan-500); color: #fff; }
      .cop-q-icon svg { width: 14px; height: 14px; }
      .cop-q-item p { font-size: 15px; color: var(--indigo-800); font-weight: 500; margin: 0; line-height: 1.5; }
      .cop-q-visual {
        border-radius: 22px; overflow: hidden; aspect-ratio: 4/3;
        box-shadow: 0 28px 64px rgba(16,10,58,.16);
        transition: transform .45s var(--ease), box-shadow .45s var(--ease);
      }
      .cop-q-visual:hover { transform: translateY(-4px); box-shadow: 0 44px 88px rgba(16,10,58,.2); }
      .cop-q-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
      .cop-q-visual:hover img { transform: scale(1.04); }
      @media (max-width: 860px) { .cop-q-layout { grid-template-columns: 1fr; gap: 40px; } }

      /* ── Value by Department — SIGNATURE SECTION ── */
      /* A horizontal department selector with expanding content */
      .cop-dept { background: linear-gradient(160deg, var(--indigo-900) 0%, #0d0c2e 100%); color: #fff; padding: 110px 0; position: relative; overflow: hidden; }
      .cop-dept::before {
        content: ""; position: absolute; inset: 0;
        background:
          radial-gradient(ellipse at 0% 50%, rgba(25,187,233,.14) 0%, transparent 45%),
          radial-gradient(ellipse at 100% 0%, rgba(42,31,217,.22) 0%, transparent 50%);
        pointer-events: none;
      }
      .cop-dept .container { position: relative; z-index: 1; }
      .cop-dept-head { text-align: center; max-width: 640px; margin: 0 auto 72px; }
      .cop-dept-head h2 { color: #fff; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 18px; }
      .cop-dept-head p { color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.65; margin: 0; }
      .cop-dept-grid {
        display: grid; grid-template-columns: repeat(5, 1fr);
        gap: 2px; background: rgba(255,255,255,.06); border-radius: 18px; overflow: hidden;
      }
      .cop-dept-card {
        padding: 40px 28px; display: flex; flex-direction: column; gap: 18px;
        border: none; background: rgba(255,255,255,.03);
        cursor: default;
        transition: background .35s var(--ease);
        position: relative;
      }
      .cop-dept-card:hover { background: rgba(25,187,233,.12); }
      .cop-dept-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0;
        height: 2px; background: var(--cyan-500);
        transform: scaleX(0); transform-origin: left;
        transition: transform .4s var(--ease);
      }
      .cop-dept-card:hover::before { transform: scaleX(1); }
      .cop-dept-ic {
        width: 48px; height: 48px; border-radius: 12px;
        background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
        display: flex; align-items: center; justify-content: center;
        color: var(--cyan-400);
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
      }
      .cop-dept-card:hover .cop-dept-ic { background: rgba(25,187,233,.25); border-color: rgba(25,187,233,.4); transform: translateY(-3px); }
      .cop-dept-ic svg { width: 22px; height: 22px; }
      .cop-dept-label { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.88); letter-spacing: -0.01em; }
      .cop-dept-desc { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.6; }
      @media (max-width: 1000px) { .cop-dept-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 560px) { .cop-dept-grid { grid-template-columns: 1fr; } }

      /* ── Approach — horizontal numbered steps ── */
      .cop-approach { background: var(--bg-soft); }
      .cop-approach-steps {
        display: grid; grid-template-columns: repeat(6, 1fr);
        gap: 2px; background: var(--border); border-radius: 20px; overflow: hidden;
        margin-top: 56px;
      }
      .cop-step {
        background: var(--white); padding: 32px 22px;
        display: flex; flex-direction: column; gap: 14px;
        transition: background .3s var(--ease);
      }
      .cop-step:hover { background: var(--indigo-800); }
      .cop-step-num {
        font-size: 32px; font-weight: 800; line-height: 1;
        background: linear-gradient(135deg, var(--cyan-500) 0%, var(--indigo-500) 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: transform .3s var(--ease);
      }
      .cop-step:hover .cop-step-num { transform: scale(1.1); }
      .cop-step-title {
        font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0;
        transition: color .3s var(--ease);
      }
      .cop-step:hover .cop-step-title { color: #fff; }
      .cop-step-desc {
        font-size: 13px; color: var(--gray-600); line-height: 1.6; margin: 0;
        transition: color .3s var(--ease);
      }
      .cop-step:hover .cop-step-desc { color: rgba(255,255,255,.7); }
      @media (max-width: 1000px) { .cop-approach-steps { grid-template-columns: repeat(3, 1fr); } }
      @media (max-width: 600px) { .cop-approach-steps { grid-template-columns: repeat(2, 1fr); } }

      /* ── Why ParagonIT — accent list ── */
      .cop-why { background: var(--white); }
      .cop-why-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
      .cop-why-visual {
        border-radius: 22px; overflow: hidden; aspect-ratio: 4/3;
        box-shadow: 0 26px 60px rgba(16,10,58,.16);
        transition: transform .45s var(--ease);
      }
      .cop-why-visual:hover { transform: translateY(-4px); }
      .cop-why-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
      .cop-why-visual:hover img { transform: scale(1.04); }
      .cop-why-list { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
      .cop-why-item {
        display: flex; gap: 16px; align-items: flex-start;
        padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border);
        background: var(--bg-soft);
        transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
      }
      .cop-why-item:hover { border-color: rgba(25,187,233,.45); box-shadow: 0 12px 32px rgba(16,10,58,.08); transform: translateX(4px); }
      .cop-why-ic {
        width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
        background: var(--cyan-100); color: var(--cyan-500);
        display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .cop-why-item:hover .cop-why-ic { background: var(--cyan-500); color: #fff; }
      .cop-why-ic svg { width: 18px; height: 18px; }
      .cop-why-item p { font-size: 14.5px; color: var(--indigo-800); font-weight: 500; margin: 0; line-height: 1.5; }
      @media (max-width: 860px) { .cop-why-layout { grid-template-columns: 1fr; gap: 40px; } }

            /* ── microsoft-security.html page-scoped styles ── */

      /* ── Six Pillars — staggered two-row grid ── */
      .msec-pillars { background: var(--bg-soft); }
      .msec-pillars-grid {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 24px; margin-top: 56px;
      }
      .msec-pillar {
        background: var(--white); border: 1px solid var(--border);
        border-radius: 20px; padding: 36px 30px;
        display: flex; flex-direction: column; gap: 18px;
        position: relative; overflow: hidden;
        transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
      }
      .msec-pillar:hover {
        transform: translateY(-5px);
        border-color: rgba(25,187,233,.4);
        box-shadow: 0 24px 56px rgba(16,10,58,.12);
      }
      /* Number watermark */
      .msec-pillar::before {
        content: attr(data-num); position: absolute;
        top: -14px; right: 16px;
        font-size: 88px; font-weight: 900; line-height: 1;
        color: rgba(42,31,217,.04); user-select: none; pointer-events: none;
        font-family: 'Plus Jakarta Sans', sans-serif;
      }
      .msec-pillar-ic {
        width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        color: var(--indigo-700);
        background: var(--bg-soft); border: 1px solid var(--border);
        transition: background .35s var(--ease), color .35s var(--ease),
                    transform .35s var(--ease), border-color .35s var(--ease);
      }
      .msec-pillar:hover .msec-pillar-ic {
        background: var(--indigo-800); color: var(--cyan-400);
        border-color: var(--indigo-800); transform: scale(1.08) rotate(-4deg);
      }
      .msec-pillar-ic svg { width: 24px; height: 24px; }
      .msec-pillar h3 { font-size: 19px; font-weight: 700; color: var(--indigo-800); margin: 0; letter-spacing: -0.01em; }
      .msec-pillar p { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      @media (max-width: 900px) { .msec-pillars-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 580px) { .msec-pillars-grid { grid-template-columns: 1fr; } }

      /* ── Services Checklist — signature section ── */
      .msec-services { background: var(--white); }
      .msec-services-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
      .msec-services-visual {
        border-radius: 22px; overflow: hidden; aspect-ratio: 4/3;
        box-shadow: 0 26px 60px rgba(16,10,58,.18);
        transition: transform .45s var(--ease), box-shadow .45s var(--ease);
      }
      .msec-services-visual:hover { transform: translateY(-5px); box-shadow: 0 44px 80px rgba(16,10,58,.22); }
      .msec-services-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
      .msec-services-visual:hover img { transform: scale(1.04); }
      .msec-checklist { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
      .msec-check-item {
        display: flex; gap: 14px; align-items: flex-start;
        padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border);
        background: var(--bg-soft);
        transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
      }
      .msec-check-item:hover {
        border-color: rgba(25,187,233,.4); transform: translateX(4px);
        background: rgba(25,187,233,.03);
      }
      .msec-check-ic {
        width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
        background: var(--cyan-100); color: var(--cyan-500);
        display: flex; align-items: center; justify-content: center;
        margin-top: 1px; transition: background .3s var(--ease), color .3s var(--ease);
      }
      .msec-check-item:hover .msec-check-ic { background: var(--cyan-500); color: #fff; }
      .msec-check-ic svg { width: 11px; height: 11px; }
      .msec-check-item p { font-size: 14px; color: var(--indigo-800); font-weight: 600; margin: 0; line-height: 1.4; }
      @media (max-width: 860px) { .msec-services-layout { grid-template-columns: 1fr; gap: 40px; } }

      /* ── Threat Landscape — signature DARK section ── */
      .msec-threat { background: linear-gradient(158deg, #0d0c2e 0%, var(--indigo-900) 50%, #0d0c2e 100%); padding: 110px 0; position: relative; overflow: hidden; color: #fff; }
      .msec-threat::before {
        content: ""; position: absolute; inset: 0;
        background:
          radial-gradient(ellipse at 0% 0%, rgba(25,187,233,.16) 0%, transparent 45%),
          radial-gradient(ellipse at 100% 100%, rgba(42,31,217,.25) 0%, transparent 50%);
        pointer-events: none;
      }
      .msec-threat .container { position: relative; z-index: 1; }
      .msec-threat-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
      .msec-threat-text h2 { color: #fff; font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 20px; line-height: 1.12; }
      .msec-threat-text p { color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.7; margin: 0 0 36px; }
      .msec-threat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
      .msec-stat-card {
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
        border-radius: 16px; padding: 28px 24px; text-align: center;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
      }
      .msec-stat-card:hover {
        background: rgba(25,187,233,.12); border-color: rgba(25,187,233,.35);
        transform: translateY(-3px);
      }
      .msec-stat-num {
        font-size: 36px; font-weight: 800; line-height: 1; color: var(--cyan-400);
        letter-spacing: -0.03em; margin-bottom: 8px;
      }
      .msec-stat-lbl { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.45; }
      /* Visual side — stacked threat indicators */
      .msec-threat-visual { display: flex; flex-direction: column; gap: 14px; }
      .msec-threat-row {
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
        border-radius: 14px; padding: 20px 24px;
        display: flex; align-items: center; gap: 16px;
        transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
      }
      .msec-threat-row:hover {
        background: rgba(25,187,233,.1); border-color: rgba(25,187,233,.35);
        transform: translateX(4px);
      }
      .msec-threat-dot {
        width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      }
      .msec-threat-dot.red { background: #f04a4a; box-shadow: 0 0 8px #f04a4a88; }
      .msec-threat-dot.orange { background: #f97316; box-shadow: 0 0 8px #f9731688; }
      .msec-threat-dot.yellow { background: #eab308; box-shadow: 0 0 8px #eab30888; }
      .msec-threat-dot.green { background: #22c55e; box-shadow: 0 0 8px #22c55e88; }
      .msec-threat-dot.blue { background: var(--cyan-400); box-shadow: 0 0 8px rgba(25,187,233,.6); }
      .msec-threat-label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); flex: 1; }
      .msec-threat-status { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan-400); }
      @media (max-width: 860px) { .msec-threat-layout { grid-template-columns: 1fr; gap: 48px; } }
      @media (max-width: 560px) { .msec-threat-stats { grid-template-columns: 1fr 1fr; } }

      /* ── Why ParagonIT — horizontal badge list ── */
      .msec-why { background: var(--bg-soft); }
      .msec-why-grid {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 56px;
      }
      .msec-why-item {
        background: var(--white); border: 1px solid var(--border);
        border-radius: 18px; padding: 32px 28px;
        display: flex; gap: 20px; align-items: flex-start;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .msec-why-item:hover {
        border-color: rgba(42,31,217,.25); transform: translateY(-3px);
        box-shadow: 0 18px 44px rgba(16,10,58,.09);
      }
      .msec-why-ic {
        width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0;
        background: linear-gradient(135deg, var(--indigo-700) 0%, var(--cyan-500) 100%);
        color: #fff; display: flex; align-items: center; justify-content: center;
        transition: transform .3s var(--ease);
      }
      .msec-why-item:hover .msec-why-ic { transform: rotate(-5deg) scale(1.06); }
      .msec-why-ic svg { width: 22px; height: 22px; }
      .msec-why-item h3 { font-size: 17px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .msec-why-item p { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 700px) { .msec-why-grid { grid-template-columns: 1fr; } }

      /* ── Who It's For — two-column list ── */
      .msec-who { background: var(--white); }
      .msec-who-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
      .msec-who-cols { columns: 2; gap: 14px; margin-top: 24px; }
      .msec-who-item {
        break-inside: avoid; display: flex; gap: 12px; align-items: flex-start;
        padding: 12px 0; border-bottom: 1px solid var(--border);
      }
      .msec-who-check {
        width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
        background: var(--cyan-100); color: var(--cyan-500);
        display: flex; align-items: center; justify-content: center; margin-top: 1px;
      }
      .msec-who-check svg { width: 11px; height: 11px; }
      .msec-who-item p { font-size: 14px; color: var(--indigo-800); font-weight: 500; margin: 0; line-height: 1.45; }
      .msec-who-visual {
        border-radius: 22px; overflow: hidden; aspect-ratio: 4/3;
        box-shadow: 0 24px 56px rgba(16,10,58,.16);
        transition: transform .45s var(--ease);
      }
      .msec-who-visual:hover { transform: translateY(-4px); }
      .msec-who-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
      .msec-who-visual:hover img { transform: scale(1.04); }
      @media (max-width: 860px) { .msec-who-layout { grid-template-columns: 1fr; gap: 40px; } .msec-who-cols { columns: 1; } }

            /* ── mobile-device-management.html page-scoped styles (.mdm- prefix) ── */

      /* ── Why MDM matters — 3-stat highlight bar ── */
      .mdm-stakes { background: var(--bg-soft); }
      .mdm-stakes-grid {
        display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
        margin-top: 48px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
      }
      .mdm-stake {
        padding: 36px 32px; display: flex; flex-direction: column; gap: 10px;
        position: relative; background: var(--white);
        transition: background .3s var(--ease);
      }
      .mdm-stake + .mdm-stake { border-left: 1px solid var(--border); }
      .mdm-stake::after {
        content: ""; position: absolute; bottom: 0; left: 24px; right: 24px; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .mdm-stake:hover::after { transform: scaleX(1); }
      .mdm-stake:hover { background: var(--bg-soft); }
      .mdm-stake-ic {
        width: 44px; height: 44px; border-radius: 12px;
        background: rgba(42,31,217,.08); color: var(--indigo-600);
        display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
        transition: background .3s var(--ease);
      }
      .mdm-stake:hover .mdm-stake-ic { background: var(--indigo-700); color: #fff; }
      .mdm-stake-ic svg { width: 22px; height: 22px; }
      .mdm-stake h3 { font-size: 18px; font-weight: 700; color: var(--indigo-800); margin: 0; }
      .mdm-stake p { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      @media (max-width: 720px) {
        .mdm-stakes-grid { grid-template-columns: 1fr; }
        .mdm-stake + .mdm-stake { border-left: none; border-top: 1px solid var(--border); }
      }

      /* ── SIGNATURE: Device types + key features — dark horizontal feature matrix ── */
      .mdm-matrix-section {
        background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .mdm-matrix-section::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 10% 50%, rgba(25,187,233,.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 90% 20%, rgba(42,31,217,.18) 0%, transparent 45%);
        pointer-events: none;
      }
      .mdm-matrix-section .container { position: relative; z-index: 1; }
      .mdm-matrix-head { text-align: center; margin-bottom: 52px; }
      .mdm-matrix-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
      .mdm-matrix-head p { color: rgba(255,255,255,.65); font-size: 16px; max-width: 600px; margin: 0 auto; line-height: 1.7; }

      /* Feature matrix table-style layout */
      .mdm-matrix-table {
        border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden;
      }
      .mdm-matrix-row {
        display: grid; grid-template-columns: 200px 1fr 1fr 1fr;
        border-bottom: 1px solid rgba(255,255,255,.08);
        transition: background .25s var(--ease);
      }
      .mdm-matrix-row:last-child { border-bottom: none; }
      .mdm-matrix-row:hover { background: rgba(25,187,233,.05); }
      .mdm-matrix-row.header-row { background: rgba(25,187,233,.08); }
      .mdm-matrix-cell {
        padding: 18px 22px; border-right: 1px solid rgba(255,255,255,.08);
        display: flex; align-items: center; gap: 10px;
      }
      .mdm-matrix-cell:last-child { border-right: none; }
      .mdm-matrix-cell.feature-label {
        font-size: 13px; font-weight: 600; color: rgba(255,255,255,.5);
        text-transform: uppercase; letter-spacing: .06em;
      }
      .mdm-matrix-cell.col-head {
        font-size: 14px; font-weight: 700; color: #fff; justify-content: center; text-align: center; flex-direction: column; gap: 6px;
      }
      .mdm-matrix-cell.col-head svg { width: 24px; height: 24px; color: var(--cyan-400); }
      .mdm-check { color: var(--cyan-400); flex-shrink: 0; }
      .mdm-check svg { width: 16px; height: 16px; }
      .mdm-matrix-cell span.feat { font-size: 13px; color: rgba(255,255,255,.75); font-weight: 500; }
      @media (max-width: 760px) {
        .mdm-matrix-row { grid-template-columns: 1fr; }
        .mdm-matrix-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
        .mdm-matrix-cell:last-child { border-bottom: none; }
        .mdm-matrix-row.header-row { display: none; }
      }

      /* ── 5-step workflow timeline ── */
      .mdm-workflow { background: var(--white); }
      .mdm-timeline {
        position: relative; margin-top: 56px;
        display: flex; flex-direction: column; gap: 0;
      }
      .mdm-timeline::before {
        content: ""; position: absolute; left: 31px; top: 0; bottom: 0; width: 2px;
        background: linear-gradient(180deg, var(--indigo-600), var(--cyan-400)); z-index: 0;
      }
      .mdm-tl-item {
        display: flex; gap: 28px; align-items: flex-start;
        padding: 0 0 40px 0; position: relative; z-index: 1;
      }
      .mdm-tl-item:last-child { padding-bottom: 0; }
      .mdm-tl-dot {
        width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
        background: var(--white); border: 3px solid var(--indigo-600);
        display: flex; align-items: center; justify-content: center;
        font-size: 18px; font-weight: 900; color: var(--indigo-700); font-family: 'Plus Jakarta Sans', sans-serif;
        z-index: 2; position: relative;
        transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
        box-shadow: 0 0 0 6px var(--white);
      }
      .mdm-tl-item:hover .mdm-tl-dot {
        background: var(--indigo-700); color: #fff; border-color: var(--indigo-700);
        box-shadow: 0 0 0 6px rgba(42,31,217,.08);
      }
      .mdm-tl-body {
        padding: 14px 28px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-soft);
        flex: 1; position: relative;
        transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
      }
      .mdm-tl-item:hover .mdm-tl-body { border-color: rgba(42,31,217,.18); box-shadow: 0 8px 28px rgba(16,10,58,.07); background: var(--white); }
      .mdm-tl-body h4 { font-size: 17px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .mdm-tl-body p { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      @media (max-width: 580px) {
        .mdm-timeline::before { left: 19px; }
        .mdm-tl-dot { width: 40px; height: 40px; font-size: 14px; }
      }

      /* ── BYOD vs Corporate comparison ── */
      .mdm-compare { background: var(--bg-soft); }
      .mdm-compare-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px;
      }
      .mdm-compare-panel {
        border-radius: 18px; padding: 36px; border: 1px solid var(--border); background: var(--white);
        position: relative; overflow: hidden;
        transition: box-shadow .35s var(--ease), transform .35s var(--ease);
      }
      .mdm-compare-panel::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      }
      .mdm-compare-panel:first-child::before { background: linear-gradient(90deg, var(--indigo-600), var(--indigo-400)); }
      .mdm-compare-panel:last-child::before { background: linear-gradient(90deg, var(--cyan-500), var(--cyan-300)); }
      .mdm-compare-panel:hover { box-shadow: 0 16px 44px rgba(16,10,58,.1); transform: translateY(-3px); }
      .mdm-compare-badge {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
        border-radius: 100px; padding: 5px 12px; width: fit-content; margin-bottom: 16px;
      }
      .mdm-compare-panel:first-child .mdm-compare-badge { background: rgba(42,31,217,.08); color: var(--indigo-700); }
      .mdm-compare-panel:last-child .mdm-compare-badge { background: rgba(25,187,233,.1); color: var(--cyan-500); }
      .mdm-compare-panel h3 { font-size: 20px; font-weight: 700; color: var(--indigo-800); margin: 0 0 10px; }
      .mdm-compare-panel > p { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin: 0 0 22px; }
      .mdm-compare-items { display: flex; flex-direction: column; gap: 8px; }
      .mdm-compare-item {
        display: flex; gap: 12px; align-items: flex-start;
        font-size: 13.5px; color: var(--gray-700); line-height: 1.55; font-weight: 500;
      }
      .mdm-compare-item-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
      .mdm-compare-panel:first-child .mdm-compare-item-dot { background: rgba(42,31,217,.1); }
      .mdm-compare-panel:last-child .mdm-compare-item-dot { background: rgba(25,187,233,.1); }
      .mdm-compare-panel:first-child .mdm-compare-item-dot svg { color: var(--indigo-600); }
      .mdm-compare-panel:last-child .mdm-compare-item-dot svg { color: var(--cyan-500); }
      .mdm-compare-item-dot svg { width: 11px; height: 11px; }
      @media (max-width: 680px) { .mdm-compare-grid { grid-template-columns: 1fr; } }

      /* ── Services list — alternating icon rows ── */
      .mdm-services { background: var(--white); }
      .mdm-svc-list { display: flex; flex-direction: column; gap: 0; margin-top: 48px; }
      .mdm-svc-row {
        display: grid; grid-template-columns: 56px 1fr; gap: 20px;
        align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--border);
        transition: background .25s var(--ease); border-radius: 0; padding-left: 0; padding-right: 0;
      }
      .mdm-svc-row:first-child { padding-top: 0; }
      .mdm-svc-row:last-child { border-bottom: none; padding-bottom: 0; }
      .mdm-svc-row:hover { background: rgba(25,187,233,.02); padding-left: 8px; padding-right: 8px; border-radius: 12px; }
      .mdm-svc-icon {
        width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
        background: rgba(42,31,217,.07); color: var(--indigo-600);
        display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .mdm-svc-row:hover .mdm-svc-icon { background: var(--indigo-700); color: #fff; }
      .mdm-svc-icon svg { width: 24px; height: 24px; }
      .mdm-svc-content h4 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 6px; }
      .mdm-svc-content p { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin: 0; }

            /* ── modern-workplace.html page-scoped styles ── */

      /* ── Solution Pillars — horizontal tabbed reveal ── */
      .mw-pillars { background: var(--bg-soft); }
      .mw-pillar-tabs {
        display: flex; gap: 0; border-bottom: 2px solid var(--border);
        margin-bottom: 56px; overflow-x: auto; -webkit-overflow-scrolling: touch;
      }
      .mw-pillar-tab {
        padding: 14px 24px; font-size: 14px; font-weight: 700;
        color: var(--gray-500); border-bottom: 2px solid transparent;
        cursor: pointer; white-space: nowrap; flex-shrink: 0;
        transition: color .25s var(--ease), border-color .25s var(--ease);
        background: none; margin-bottom: -2px;
      }
      .mw-pillar-tab.active, .mw-pillar-tab:hover {
        color: var(--indigo-800); border-bottom-color: var(--cyan-500);
      }
      .mw-pillar-panel { display: none; }
      .mw-pillar-panel.active { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
      .mw-pillar-text .section-eyebrow { margin-bottom: 16px; }
      .mw-pillar-text h3 {
        font-size: clamp(24px, 2.8vw, 36px); font-weight: 700;
        color: var(--indigo-800); letter-spacing: -0.02em; margin: 0 0 18px; line-height: 1.15;
      }
      .mw-pillar-text p { font-size: 16px; color: var(--gray-600); line-height: 1.7; margin: 0 0 24px; }
      .mw-pillar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
      .mw-pillar-list li {
        font-size: 14.5px; color: var(--indigo-800); font-weight: 500;
        padding-left: 28px; position: relative; line-height: 1.5;
      }
      .mw-pillar-list li::before {
        content: ""; position: absolute; left: 0; top: 7px;
        width: 16px; height: 16px; border-radius: 50%;
        background: var(--cyan-100); box-shadow: inset 0 0 0 4.5px var(--cyan-500);
      }
      .mw-pillar-visual {
        border-radius: 22px; overflow: hidden; aspect-ratio: 5/4;
        box-shadow: 0 28px 64px rgba(16,10,58,.16);
        transition: transform .45s var(--ease), box-shadow .45s var(--ease);
      }
      .mw-pillar-visual:hover { transform: translateY(-4px); box-shadow: 0 40px 80px rgba(16,10,58,.22); }
      .mw-pillar-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
      .mw-pillar-visual:hover img { transform: scale(1.04); }
      @media (max-width: 900px) { .mw-pillar-panel.active { grid-template-columns: 1fr; gap: 32px; } }

      /* ── Approach Timeline — signature section ── */
      .mw-approach { background: var(--indigo-900); color: #fff; padding: 110px 0; position: relative; overflow: hidden; }
      .mw-approach::before {
        content: ""; position: absolute; inset: 0;
        background:
          radial-gradient(ellipse at 5% 0%, rgba(25,187,233,.18) 0%, transparent 50%),
          radial-gradient(ellipse at 95% 100%, rgba(42,31,217,.32) 0%, transparent 55%);
        pointer-events: none;
      }
      .mw-approach .container { position: relative; z-index: 1; }
      .mw-approach-head { text-align: center; max-width: 640px; margin: 0 auto 80px; }
      .mw-approach-head h2 { color: #fff; font-size: clamp(30px, 3.8vw, 46px); font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 18px; }
      .mw-approach-head p { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.65; margin: 0; }
      /* Timeline rail */
      .mw-timeline {
        display: grid; grid-template-columns: repeat(5, 1fr);
        gap: 0; position: relative;
      }
      .mw-timeline::before {
        content: ""; position: absolute;
        top: 38px; left: 10%; right: 10%;
        height: 2px;
        background: linear-gradient(90deg, var(--cyan-500) 0%, rgba(25,187,233,.2) 100%);
      }
      .mw-step {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        padding: 0 12px; position: relative;
      }
      .mw-step-icon {
        width: 76px; height: 76px; border-radius: 50%;
        background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.12);
        display: flex; align-items: center; justify-content: center;
        font-size: 26px; font-weight: 800;
        color: var(--cyan-400);
        position: relative; z-index: 1;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .mw-step:hover .mw-step-icon {
        background: rgba(25,187,233,.18);
        border-color: var(--cyan-500);
        transform: translateY(-4px) scale(1.06);
        box-shadow: 0 16px 36px rgba(25,187,233,.3);
      }
      .mw-step-num {
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px; border-radius: 50%;
        background: var(--cyan-500); color: #fff;
        font-size: 11px; font-weight: 800;
        position: absolute; top: -6px; right: -2px; z-index: 2;
      }
      .mw-step-body { margin-top: 22px; }
      .mw-step-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 8px; transition: color .3s var(--ease); }
      .mw-step:hover .mw-step-title { color: var(--cyan-400); }
      .mw-step-desc { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.6; margin: 0; }
      @media (max-width: 900px) {
        .mw-timeline { grid-template-columns: 1fr 1fr; gap: 48px 24px; }
        .mw-timeline::before { display: none; }
      }
      @media (max-width: 500px) { .mw-timeline { grid-template-columns: 1fr; } }

      /* ── Benefits — horizontal illustrated strip ── */
      .mw-benefits { background: var(--white); }
      .mw-benefits-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px;
      }
      .mw-benefit {
        background: var(--bg-soft); border: 1px solid var(--border);
        border-radius: 20px; padding: 36px 30px;
        display: flex; flex-direction: column; gap: 18px;
        transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
      }
      .mw-benefit:hover { transform: translateY(-4px); border-color: rgba(25,187,233,.45); box-shadow: 0 24px 56px rgba(16,10,58,.1); }
      .mw-benefit-ic {
        width: 52px; height: 52px; border-radius: 14px;
        background: linear-gradient(135deg, var(--cyan-100) 0%, rgba(255,255,255,0) 100%);
        border: 1px solid var(--border);
        color: var(--indigo-700);
        display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
      }
      .mw-benefit:hover .mw-benefit-ic { background: var(--cyan-500); color: #fff; transform: rotate(-4deg) scale(1.08); }
      .mw-benefit-ic svg { width: 24px; height: 24px; }
      .mw-benefit h3 { font-size: 18px; font-weight: 700; color: var(--indigo-800); margin: 0; letter-spacing: -0.01em; }
      .mw-benefit p { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin: 0; }
      @media (max-width: 900px) { .mw-benefits-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 560px) { .mw-benefits-grid { grid-template-columns: 1fr; } }

      /* ── Who it's for — accordion-style ── */
      .mw-who { background: var(--bg-soft); }
      .mw-who-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 0; }
      .mw-who-visual {
        border-radius: 22px; overflow: hidden; aspect-ratio: 4/3;
        box-shadow: 0 26px 60px rgba(16,10,58,.16);
        transition: transform .45s var(--ease);
      }
      .mw-who-visual:hover { transform: translateY(-4px); }
      .mw-who-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
      .mw-who-visual:hover img { transform: scale(1.04); }
      .mw-who-list { display: flex; flex-direction: column; gap: 0; margin-top: 36px; }
      .mw-who-item {
        display: flex; gap: 16px; align-items: flex-start;
        padding: 18px 0; border-bottom: 1px solid var(--border);
      }
      .mw-who-item:last-child { border-bottom: none; }
      .mw-who-check {
        width: 20px; height: 20px; border-radius: 50%;
        background: var(--cyan-100); color: var(--cyan-500);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; margin-top: 2px;
      }
      .mw-who-check svg { width: 11px; height: 11px; }
      .mw-who-item p { font-size: 15px; color: var(--indigo-800); font-weight: 500; margin: 0; line-height: 1.5; }
      @media (max-width: 860px) { .mw-who-layout { grid-template-columns: 1fr; gap: 40px; } }

            /* ── office365-solutions.html page-scoped styles ── */

      /* ── Solutions Panel — horizontal service strips ── */
      .o365-solutions { background: var(--bg-soft); }
      .o365-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid var(--border);
        margin-bottom: 2px;
        transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
      }
      .o365-strip:hover {
        border-color: rgba(25,187,233,.3);
        box-shadow: 0 12px 40px rgba(16,10,58,.08);
      }
      .o365-strip-content {
        background: var(--white);
        padding: 36px 40px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        justify-content: center;
      }
      .o365-strip-eyebrow {
        font-size: 11px; font-weight: 800; letter-spacing: .1em;
        text-transform: uppercase; color: var(--cyan-500);
      }
      .o365-strip-content h3 {
        font-size: 21px; font-weight: 700; color: var(--indigo-800);
        margin: 0; letter-spacing: -0.01em; line-height: 1.2;
      }
      .o365-strip-content p {
        font-size: 14.5px; color: var(--gray-600); line-height: 1.65; margin: 0;
      }
      .o365-strip-visual {
        background: var(--bg-soft);
        min-height: 220px;
        overflow: hidden;
        position: relative;
      }
      .o365-strip-visual img {
        width: 100%; height: 100%; object-fit: cover; display: block;
        transition: transform 1.1s var(--ease);
      }
      .o365-strip:hover .o365-strip-visual img { transform: scale(1.04); }
      .o365-strip-visual::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(90deg, transparent 60%, rgba(42,31,217,.04) 100%);
        pointer-events: none;
      }
      /* Alternate: image left on even */
      .o365-strip.reverse { }
      .o365-strip.reverse .o365-strip-visual { order: -1; }
      @media (max-width: 860px) {
        .o365-strip, .o365-strip.reverse { grid-template-columns: 1fr; }
        .o365-strip.reverse .o365-strip-visual { order: 0; }
        .o365-strip-visual { min-height: 200px; }
        .o365-strip-content { padding: 28px 28px; }
      }

      /* ── Problems We Solve — signature section ── */
      .o365-problems { background: var(--white); }
      .o365-problems-layout {
        display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
        margin-top: 56px;
      }
      .o365-problems-intro p {
        font-size: 16px; color: var(--gray-600); line-height: 1.7; margin: 0 0 36px;
      }
      .o365-problems-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
      }
      .o365-problem-pill {
        background: var(--bg-soft); border: 1px solid var(--border);
        border-radius: 12px; padding: 18px 20px;
        display: flex; gap: 12px; align-items: flex-start;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .o365-problem-pill:hover {
        border-color: rgba(25,187,233,.4); transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(16,10,58,.08);
      }
      .o365-problem-pill-ic {
        width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
        background: rgba(42,31,217,.06); color: var(--indigo-700);
        display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .o365-problem-pill:hover .o365-problem-pill-ic { background: var(--cyan-100); color: var(--cyan-500); }
      .o365-problem-pill-ic svg { width: 16px; height: 16px; }
      .o365-problem-pill p { font-size: 13px; color: var(--indigo-800); font-weight: 600; margin: 0; line-height: 1.4; }
      .o365-resolve-box {
        background: var(--indigo-800); border-radius: 20px; padding: 36px;
        display: flex; flex-direction: column; gap: 18px; height: 100%;
      }
      .o365-resolve-box h3 { font-size: 24px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.01em; }
      .o365-resolve-box p { font-size: 15px; color: rgba(255,255,255,.75); line-height: 1.65; margin: 0; }
      .o365-resolve-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
      .o365-resolve-list li {
        font-size: 13.5px; color: rgba(255,255,255,.88); font-weight: 500;
        padding-left: 22px; position: relative; line-height: 1.45;
      }
      .o365-resolve-list li::before {
        content: "→"; position: absolute; left: 0; top: 0;
        color: var(--cyan-400); font-weight: 700;
      }
      @media (max-width: 860px) { .o365-problems-layout { grid-template-columns: 1fr; gap: 40px; } }
      @media (max-width: 580px) { .o365-problems-grid { grid-template-columns: 1fr; } }

      /* ── 4-Step Process — signature ── */
      .o365-process { background: var(--bg-soft); }
      .o365-process-rail {
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: 0; margin-top: 56px; position: relative;
      }
      .o365-process-rail::before {
        content: ""; position: absolute;
        top: 34px; left: calc(12.5%); right: calc(12.5%);
        height: 2px;
        background: linear-gradient(90deg, var(--cyan-500) 0%, rgba(25,187,233,.15) 100%);
        z-index: 0;
      }
      .o365-proc-step {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        padding: 0 14px; position: relative; z-index: 1;
      }
      .o365-proc-badge {
        width: 68px; height: 68px; border-radius: 50%;
        background: var(--white); border: 2px solid var(--border);
        display: flex; align-items: center; justify-content: center; flex-direction: column;
        color: var(--indigo-700); font-size: 13px; font-weight: 800;
        box-shadow: 0 8px 20px rgba(16,10,58,.1);
        transition: background .35s var(--ease), border-color .35s var(--ease),
                    transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
      }
      .o365-proc-step:hover .o365-proc-badge {
        background: var(--indigo-800); color: var(--cyan-400);
        border-color: var(--indigo-800);
        transform: translateY(-4px) scale(1.06);
        box-shadow: 0 18px 40px rgba(42,31,217,.25);
      }
      .o365-proc-badge svg { width: 24px; height: 24px; margin-bottom: 2px; }
      .o365-proc-badge span { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-top: 2px; }
      .o365-proc-body { margin-top: 22px; }
      .o365-proc-title {
        font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px;
        transition: color .3s var(--ease);
      }
      .o365-proc-step:hover .o365-proc-title { color: var(--cyan-500); }
      .o365-proc-desc { font-size: 13.5px; color: var(--gray-600); line-height: 1.55; margin: 0; }
      @media (max-width: 860px) {
        .o365-process-rail { grid-template-columns: 1fr 1fr; gap: 40px; }
        .o365-process-rail::before { display: none; }
      }
      @media (max-width: 520px) { .o365-process-rail { grid-template-columns: 1fr; } }

      /* ── Why ParagonIT — feature split ── */
      .o365-why { background: var(--white); }
      .o365-why-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
        margin-top: 56px;
      }
      .o365-why-feature {
        background: var(--bg-soft); border: 1px solid var(--border);
        border-radius: 18px; padding: 30px 28px;
        display: flex; gap: 20px; align-items: flex-start;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .o365-why-feature:hover {
        border-color: rgba(25,187,233,.45); transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(16,10,58,.08);
      }
      .o365-why-ic {
        width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
        background: linear-gradient(135deg, var(--indigo-700) 0%, var(--indigo-500) 100%);
        color: #fff; display: flex; align-items: center; justify-content: center;
        transition: transform .3s var(--ease);
      }
      .o365-why-feature:hover .o365-why-ic { transform: rotate(-5deg) scale(1.08); }
      .o365-why-ic svg { width: 22px; height: 22px; }
      .o365-why-feature h3 { font-size: 17px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .o365-why-feature p { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 700px) { .o365-why-grid { grid-template-columns: 1fr; } }

            /* ── penetration-testing.html page-scoped styles (.pt- prefix) ── */

      /* ── What we test — 2-col checklist ── */
      .pt-delivers { background: var(--white); }
      .pt-delivers-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px;
      }
      .pt-del-item {
        display: flex; gap: 13px; align-items: flex-start;
        padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border);
        background: var(--bg-soft);
        transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
      }
      .pt-del-item:hover { border-color: rgba(25,187,233,.4); transform: translateX(4px); background: rgba(25,187,233,.03); }
      .pt-del-check {
        width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
        background: rgba(25,187,233,.1); color: var(--cyan-500);
        display: flex; align-items: center; justify-content: center; margin-top: 1px;
        transition: background .3s var(--ease), color .3s var(--ease);
      }
      .pt-del-item:hover .pt-del-check { background: var(--cyan-500); color: #fff; }
      .pt-del-check svg { width: 11px; height: 11px; }
      .pt-del-item p { font-size: 14px; font-weight: 600; color: var(--indigo-800); margin: 0; line-height: 1.4; }
      @media (max-width: 580px) { .pt-delivers-grid { grid-template-columns: 1fr; } }

      /* ── What is pen testing — narrative split ── */
      .pt-explainer { background: var(--bg-soft); }
      .pt-explainer-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 56px; align-items: center;
      }
      .pt-explainer-text h3 { font-size: 26px; font-weight: 700; color: var(--indigo-800); margin: 0 0 16px; }
      .pt-explainer-text p { font-size: 15px; color: var(--gray-600); line-height: 1.75; margin: 0 0 14px; }
      .pt-explainer-text p:last-child { margin: 0; }
      .pt-explainer-visual {
        border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg);
        position: relative;
      }
      .pt-explainer-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
      @media (max-width: 780px) {
        .pt-explainer-grid { grid-template-columns: 1fr; gap: 32px; }
        .pt-explainer-visual { order: -1; }
      }

      /* ── SIGNATURE: Testing types — dark card grid ── */
      .pt-types-section {
        background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .pt-types-section::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 20% 70%, rgba(25,187,233,.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(42,31,217,.18) 0%, transparent 45%);
        pointer-events: none;
      }
      .pt-types-section .container { position: relative; z-index: 1; }
      .pt-types-head { text-align: center; margin-bottom: 56px; }
      .pt-types-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
      .pt-types-head p { color: rgba(255,255,255,.65); font-size: 16px; max-width: 600px; margin: 0 auto; line-height: 1.7; }
      .pt-types-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
      .pt-type-card {
        background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
        border-radius: 18px; padding: 32px 26px;
        display: flex; flex-direction: column; gap: 14px;
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
        position: relative; overflow: hidden;
      }
      .pt-type-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--cyan-400), var(--indigo-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .pt-type-card:hover::before { transform: scaleX(1); }
      .pt-type-card:hover {
        background: rgba(25,187,233,.08); border-color: rgba(25,187,233,.35);
        transform: translateY(-5px); box-shadow: 0 24px 48px rgba(0,0,0,.4);
      }
      .pt-type-icon {
        width: 46px; height: 46px; border-radius: 12px;
        background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.25);
        display: flex; align-items: center; justify-content: center; color: var(--cyan-400);
        transition: background .3s var(--ease), border-color .3s var(--ease);
      }
      .pt-type-card:hover .pt-type-icon { background: rgba(25,187,233,.2); border-color: rgba(25,187,233,.5); }
      .pt-type-icon svg { width: 22px; height: 22px; }
      .pt-type-card h3 { font-size: 17px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0; }
      .pt-type-card p { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.65; margin: 0; flex: 1; }
      @media (max-width: 860px) { .pt-types-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .pt-types-grid { grid-template-columns: 1fr; } }

      /* ── Process — numbered grid ── */
      .pt-process { background: var(--white); }
      .pt-process-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 48px;
        border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
      }
      .pt-process-item {
        padding: 28px 32px; border-bottom: 1px solid var(--border);
        display: flex; gap: 20px; align-items: flex-start; background: var(--white);
        position: relative; overflow: hidden;
        transition: background .3s var(--ease);
      }
      .pt-process-item:nth-child(odd) { border-right: 1px solid var(--border); }
      .pt-process-item:nth-last-child(-n+2) { border-bottom: none; }
      .pt-process-item::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
        background: var(--cyan-500); transform: scaleY(0); transform-origin: bottom;
        transition: transform .35s var(--ease);
      }
      .pt-process-item:hover::before { transform: scaleY(1); }
      .pt-process-item:hover { background: rgba(25,187,233,.02); }
      .pt-process-num {
        font-size: 32px; font-weight: 900; color: rgba(42,31,217,.1); line-height: 1;
        flex-shrink: 0; padding-top: 2px; font-family: 'Plus Jakarta Sans', sans-serif;
        transition: color .35s var(--ease);
      }
      .pt-process-item:hover .pt-process-num { color: rgba(42,31,217,.2); }
      .pt-process-body h4 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 7px; }
      .pt-process-body p { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 720px) {
        .pt-process-grid { grid-template-columns: 1fr; }
        .pt-process-item:nth-child(odd) { border-right: none; }
        .pt-process-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
        .pt-process-item:last-child { border-bottom: none; }
      }

      /* ── Benefits strip ── */
      .pt-benefits { background: var(--bg-soft); }
      .pt-benefits-grid {
        display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 48px;
      }
      .pt-benefit-card {
        padding: 28px 24px; border-radius: 16px; border: 1px solid var(--border);
        background: var(--white); position: relative; overflow: hidden;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .pt-benefit-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
      }
      .pt-benefit-card:hover::before { transform: scaleX(1); }
      .pt-benefit-card:hover { border-color: rgba(25,187,233,.3); transform: translateY(-3px); box-shadow: var(--shadow-md); }
      .pt-benefit-icon {
        width: 40px; height: 40px; border-radius: 10px;
        background: rgba(25,187,233,.1); color: var(--cyan-500);
        display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
        transition: background .3s var(--ease);
      }
      .pt-benefit-card:hover .pt-benefit-icon { background: var(--cyan-500); color: #fff; }
      .pt-benefit-icon svg { width: 20px; height: 20px; }
      .pt-benefit-card h4 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .pt-benefit-card p { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 860px) { .pt-benefits-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .pt-benefits-grid { grid-template-columns: 1fr; } }

      /* ── Why + Who ── */
      .pt-why-who { background: var(--white); }
      .pt-why-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: start; }
      .pt-who-list { display: flex; flex-direction: column; gap: 10px; }
      .pt-who-item {
        display: flex; gap: 13px; align-items: flex-start;
        padding: 13px 18px; border-radius: 10px; border: 1px solid var(--border);
        background: var(--bg-soft); font-size: 14px; font-weight: 500; color: var(--indigo-800);
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .pt-who-item:hover { border-color: rgba(42,31,217,.22); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,10,58,.07); }
      .pt-who-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo-600); flex-shrink: 0; margin-top: 5px; }
      .pt-why-list { display: flex; flex-direction: column; gap: 0; }
      .pt-why-item {
        display: flex; gap: 18px; padding: 20px 0; align-items: flex-start;
        border-bottom: 1px solid var(--border);
      }
      .pt-why-item:last-child { border-bottom: none; }
      .pt-why-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: rgba(42,31,217,.08); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .pt-why-item:hover .pt-why-ic { background: var(--indigo-700); color: #fff; }
      .pt-why-ic svg { width: 18px; height: 18px; }
      .pt-why-body h4 { font-size: 15px; font-weight: 700; color: var(--indigo-800); margin: 0 0 5px; }
      .pt-why-body p { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 780px) { .pt-why-who-grid { grid-template-columns: 1fr; gap: 32px; } }

            /* ── retail.html scoped styles (.rtl- prefix) ── */

      /* SIGNATURE: Dark 2×4 capability checklist grid */
      .rtl-cap {
        background: linear-gradient(155deg, #0b0a2c 0%, #141069 55%, #09082e 100%);
        padding: 88px 0; position: relative; overflow: hidden;
      }
      .rtl-cap::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 20% 50%, rgba(25,187,233,.13) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(42,31,217,.18) 0%, transparent 45%);
        pointer-events: none;
      }
      .rtl-cap .container { position: relative; z-index: 1; }
      .rtl-cap-hd { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 48px; }
      .rtl-cap-hd h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin: 12px 0 0; }
      .rtl-cap-hd p { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.75; margin: 0; }
      .rtl-cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
      .rtl-cap-item {
        display: flex; align-items: center; gap: 16px; padding: 18px 22px;
        background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
        transition: background .3s var(--ease), border-color .3s var(--ease);
      }
      .rtl-cap-item:hover { background: rgba(25,187,233,.08); border-color: rgba(25,187,233,.2); }
      .rtl-cap-ic {
        width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
        background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.2);
        color: var(--cyan-400); display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease);
      }
      .rtl-cap-item:hover .rtl-cap-ic { background: rgba(25,187,233,.22); }
      .rtl-cap-ic svg { width: 18px; height: 18px; }
      .rtl-cap-text { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }
      @media (max-width: 760px) { .rtl-cap-hd { grid-template-columns: 1fr; gap: 16px; } .rtl-cap-grid { grid-template-columns: 1fr; } }

      /* Services — horizontal track rows */
      .rtl-services { background: var(--bg-soft); }
      .rtl-svc-list { display: flex; flex-direction: column; gap: 12px; margin-top: 52px; }
      .rtl-svc-track {
        display: grid; grid-template-columns: 64px 1fr auto; align-items: start; gap: 0;
        background: var(--white); border: 1px solid var(--border); border-radius: 18px;
        overflow: hidden; transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
      }
      .rtl-svc-track:hover { border-color: rgba(42,31,217,.2); box-shadow: 0 12px 36px rgba(16,10,58,.1); transform: translateX(4px); }
      .rtl-svc-num-col {
        background: linear-gradient(180deg, rgba(42,31,217,.08), rgba(25,187,233,.04));
        border-right: 1px solid var(--border);
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 900; color: var(--indigo-600); font-family: 'Plus Jakarta Sans', sans-serif;
        min-height: 100px; transition: background .3s var(--ease), color .3s var(--ease);
      }
      .rtl-svc-track:hover .rtl-svc-num-col { background: linear-gradient(180deg, rgba(42,31,217,.14), rgba(25,187,233,.08)); color: var(--indigo-700); }
      .rtl-svc-body { padding: 22px 28px; }
      .rtl-svc-body h3 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .rtl-svc-body p { font-size: 13.5px; color: var(--gray-600); line-height: 1.7; margin: 0; }
      .rtl-svc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
      .rtl-svc-tag { font-size: 11px; font-weight: 600; color: var(--indigo-700); padding: 3px 10px; border-radius: 100px; background: rgba(42,31,217,.07); border: 1px solid rgba(42,31,217,.14); }
      .rtl-svc-arrow {
        padding: 22px 20px; display: flex; align-items: center; justify-content: center;
        color: rgba(42,31,217,.15); transition: color .3s var(--ease);
      }
      .rtl-svc-track:hover .rtl-svc-arrow { color: var(--indigo-600); }
      .rtl-svc-arrow svg { width: 20px; height: 20px; }
      @media (max-width: 640px) { .rtl-svc-track { grid-template-columns: 50px 1fr; } .rtl-svc-arrow { display: none; } }

      /* Challenge→Solution 3-col flip cards */
      .rtl-flip { background: var(--white); }
      .rtl-flip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 52px; }
      .rtl-flip-card { perspective: 900px; height: 220px; cursor: pointer; }
      .rtl-flip-inner {
        position: relative; width: 100%; height: 100%;
        transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,0,.2,1);
        border-radius: 14px;
      }
      .rtl-flip-card:hover .rtl-flip-inner,
      .rtl-flip-card:focus-within .rtl-flip-inner { transform: rotateY(180deg); }
      .rtl-flip-front, .rtl-flip-back {
        position: absolute; inset: 0; backface-visibility: hidden;
        border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px;
      }
      .rtl-flip-front {
        background: var(--bg-soft); border: 1px solid var(--border);
      }
      .rtl-flip-back {
        background: linear-gradient(135deg, var(--indigo-700), var(--indigo-500));
        transform: rotateY(180deg);
      }
      .rtl-flip-label { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
      .rtl-flip-front .rtl-flip-label { color: var(--gray-400); }
      .rtl-flip-back .rtl-flip-label { color: rgba(255,255,255,.6); }
      .rtl-flip-front h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0; line-height: 1.35; }
      .rtl-flip-back h4 { font-size: 14px; font-weight: 700; color: #fff; margin: 0; line-height: 1.35; }
      .rtl-flip-front p { font-size: 12px; color: var(--gray-500); line-height: 1.6; margin: 0; }
      .rtl-flip-back p { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.6; margin: 0; }
      .rtl-flip-hint { margin-top: auto; font-size: 10px; font-weight: 600; color: var(--gray-400); display: flex; align-items: center; gap: 5px; }
      .rtl-flip-hint svg { width: 12px; height: 12px; }
      @media (max-width: 900px) { .rtl-flip-grid { grid-template-columns: 1fr 1fr; } .rtl-flip-card { height: 200px; } }
      @media (max-width: 480px) { .rtl-flip-grid { grid-template-columns: 1fr; } .rtl-flip-card { height: auto; } .rtl-flip-card .rtl-flip-inner { transform: none !important; } .rtl-flip-card .rtl-flip-back { position: relative; inset: auto; transform: none; backface-visibility: visible; margin-top: 8px; } .rtl-flip-card .rtl-flip-front { position: relative; inset: auto; backface-visibility: visible; } }

      /* Why ParagonIT — horizontal stat banner */
      .rtl-why { background: var(--bg-soft); }
      .rtl-why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 52px; align-items: center; }
      .rtl-why-text h3 { font-size: 21px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
      .rtl-why-text p { font-size: 14.5px; color: var(--gray-600); line-height: 1.75; margin: 0 0 20px; }
      .rtl-why-list { display: flex; flex-direction: column; gap: 10px; }
      .rtl-why-row {
        display: flex; align-items: center; gap: 12px; padding: 12px 16px;
        border-radius: 10px; border: 1px solid var(--border); background: var(--white);
        font-size: 13.5px; font-weight: 600; color: var(--indigo-800);
        transition: border-color .3s var(--ease), transform .25s var(--ease);
      }
      .rtl-why-row:hover { border-color: rgba(42,31,217,.2); transform: translateX(6px); }
      .rtl-why-dot { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; background: rgba(42,31,217,.08); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .rtl-why-row:hover .rtl-why-dot { background: var(--indigo-700); color: #fff; }
      .rtl-why-dot svg { width: 12px; height: 12px; }
      .rtl-why-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .rtl-stat-box {
        background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 28px 22px;
        text-align: center; position: relative; overflow: hidden;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .rtl-stat-box::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(42,31,217,.04), rgba(25,187,233,.03)); }
      .rtl-stat-box:hover { border-color: rgba(42,31,217,.2); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(16,10,58,.1); }
      .rtl-stat-num { font-size: 36px; font-weight: 900; color: var(--indigo-700); font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; position: relative; }
      .rtl-stat-lbl { font-size: 12px; font-weight: 600; color: var(--gray-500); margin-top: 6px; position: relative; }
      @media (max-width: 840px) { .rtl-why-inner { grid-template-columns: 1fr; gap: 36px; } }
      @media (max-width: 480px) { .rtl-why-stats { grid-template-columns: 1fr 1fr; } }

            /* ── workflow-automation.html page-scoped styles (.wfa- prefix) ── */

      /* ── Business problem "before" stat strip ── */
      .wfa-problem { background: var(--white); }
      .wfa-problem-grid {
        display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
        margin-top: 48px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
      }
      .wfa-stat {
        padding: 32px 24px; text-align: center; position: relative;
        background: var(--white); border-right: 1px solid var(--border);
        transition: background .3s var(--ease);
      }
      .wfa-stat:last-child { border-right: none; }
      .wfa-stat:hover { background: rgba(42,31,217,.02); }
      .wfa-stat::after {
        content: ""; position: absolute; bottom: 0; left: 16px; right: 16px; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transform-origin: center; transition: transform .4s var(--ease);
      }
      .wfa-stat:hover::after { transform: scaleX(1); }
      .wfa-stat-val {
        font-size: 38px; font-weight: 900; color: var(--indigo-700);
        font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; margin-bottom: 8px;
      }
      .wfa-stat-val span { font-size: 22px; }
      .wfa-stat-label { font-size: 13px; font-weight: 600; color: var(--gray-600); line-height: 1.4; }
      .wfa-stat-sub { font-size: 11px; font-weight: 500; color: var(--gray-400); margin-top: 4px; }
      @media (max-width: 760px) {
        .wfa-problem-grid { grid-template-columns: 1fr 1fr; }
        .wfa-stat:nth-child(2) { border-right: none; }
        .wfa-stat:nth-child(3) { border-top: 1px solid var(--border); }
        .wfa-stat:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
      }
      @media (max-width: 440px) { .wfa-problem-grid { grid-template-columns: 1fr; } .wfa-stat { border-right: none; border-bottom: 1px solid var(--border); } .wfa-stat:last-child { border-bottom: none; } }

      /* ── Use case category grid — 4×2 ── */
      .wfa-usecases { background: var(--bg-soft); }
      .wfa-uc-grid {
        display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 48px;
      }
      .wfa-uc-card {
        border-radius: 16px; padding: 24px 20px; border: 1px solid var(--border);
        background: var(--white); position: relative; overflow: hidden;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
      }
      .wfa-uc-card::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
        background: linear-gradient(180deg, var(--indigo-600), var(--cyan-400));
        transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
      }
      .wfa-uc-card:hover::before { transform: scaleY(1); }
      .wfa-uc-card:hover { border-color: rgba(42,31,217,.18); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(16,10,58,.09); background: rgba(42,31,217,.015); }
      .wfa-uc-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(42,31,217,.07); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background .3s var(--ease); }
      .wfa-uc-card:hover .wfa-uc-icon { background: var(--indigo-700); color: #fff; }
      .wfa-uc-icon svg { width: 18px; height: 18px; }
      .wfa-uc-card h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0 0 7px; }
      .wfa-uc-card p { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 900px) { .wfa-uc-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .wfa-uc-grid { grid-template-columns: 1fr; } }

      /* ── SIGNATURE: Power Platform — dark side-by-side deep dive ── */
      .wfa-platform-section {
        background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
        padding: 96px 0; position: relative; overflow: hidden;
      }
      .wfa-platform-section::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(ellipse at 15% 30%, rgba(25,187,233,.14) 0%, transparent 50%),
                    radial-gradient(ellipse at 85% 75%, rgba(42,31,217,.2) 0%, transparent 45%);
        pointer-events: none;
      }
      .wfa-platform-section .container { position: relative; z-index: 1; }
      .wfa-plat-head { text-align: center; margin-bottom: 56px; }
      .wfa-plat-head h2 { color: #fff; font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
      .wfa-plat-head p { color: rgba(255,255,255,.65); font-size: 16px; max-width: 620px; margin: 0 auto; line-height: 1.7; }
      .wfa-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
      .wfa-plat-card {
        border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
        padding: 40px 36px; position: relative; overflow: hidden;
        background: rgba(255,255,255,.05);
        transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      .wfa-plat-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      }
      .wfa-plat-card:first-child::before { background: linear-gradient(90deg, var(--cyan-400), #38bdf8); }
      .wfa-plat-card:last-child::before { background: linear-gradient(90deg, var(--indigo-400), #818cf8); }
      .wfa-plat-card:hover { background: rgba(25,187,233,.07); border-color: rgba(25,187,233,.3); transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0,0,0,.4); }
      .wfa-plat-badge {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
        border-radius: 100px; padding: 5px 14px; margin-bottom: 18px;
        border: 1px solid rgba(25,187,233,.3); background: rgba(25,187,233,.08); color: var(--cyan-400);
      }
      .wfa-plat-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-400); }
      .wfa-plat-card h3 { font-size: 24px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0 0 14px; }
      .wfa-plat-card > p { font-size: 14.5px; color: rgba(255,255,255,.62); line-height: 1.7; margin: 0 0 26px; }
      .wfa-plat-features { display: flex; flex-direction: column; gap: 10px; }
      .wfa-plat-feat {
        display: flex; gap: 12px; align-items: flex-start;
        font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); line-height: 1.5;
      }
      .wfa-plat-feat-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: rgba(25,187,233,.12); color: var(--cyan-400); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
      .wfa-plat-feat-dot svg { width: 9px; height: 9px; }
      @media (max-width: 720px) { .wfa-plat-grid { grid-template-columns: 1fr; } }

      /* ── Outcomes — large number reveal ── */
      .wfa-outcomes { background: var(--white); }
      .wfa-outcomes-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px;
      }
      .wfa-outcome-card {
        padding: 36px 28px; border-radius: 18px; border: 1px solid var(--border);
        background: var(--bg-soft); position: relative; overflow: hidden; text-align: center;
        transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
      }
      .wfa-outcome-card::after {
        content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
        transform: scaleX(0); transition: transform .45s var(--ease);
      }
      .wfa-outcome-card:hover::after { transform: scaleX(1); }
      .wfa-outcome-card:hover { border-color: rgba(42,31,217,.18); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16,10,58,.09); background: var(--white); }
      .wfa-outcome-bg-num {
        position: absolute; right: -10px; top: 0; font-size: 100px; font-weight: 900;
        color: rgba(42,31,217,.04); line-height: 1; font-family: 'Plus Jakarta Sans', sans-serif;
        pointer-events: none; user-select: none; transition: color .35s var(--ease);
      }
      .wfa-outcome-card:hover .wfa-outcome-bg-num { color: rgba(42,31,217,.07); }
      .wfa-outcome-icon {
        width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 16px;
        background: rgba(42,31,217,.07); color: var(--indigo-600);
        display: flex; align-items: center; justify-content: center;
        transition: background .3s var(--ease);
      }
      .wfa-outcome-card:hover .wfa-outcome-icon { background: var(--indigo-700); color: #fff; }
      .wfa-outcome-icon svg { width: 22px; height: 22px; }
      .wfa-outcome-card h4 { font-size: 16px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
      .wfa-outcome-card p { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 760px) { .wfa-outcomes-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 480px) { .wfa-outcomes-grid { grid-template-columns: 1fr; } }

      /* ── Services offered — alternating 2-col layout ── */
      .wfa-services { background: var(--bg-soft); }
      .wfa-svc-pairs { display: flex; flex-direction: column; gap: 0; margin-top: 48px; }
      .wfa-svc-pair {
        display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;
      }
      .wfa-svc-pair:last-child { margin-bottom: 0; }
      .wfa-svc-item {
        display: flex; gap: 18px; align-items: flex-start;
        padding: 22px 24px; border-radius: 14px; border: 1px solid var(--border);
        background: var(--white); position: relative; overflow: hidden;
        transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      }
      .wfa-svc-item::after {
        content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, var(--indigo-500), var(--cyan-400));
        transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
      }
      .wfa-svc-item:hover::after { transform: scaleX(1); }
      .wfa-svc-item:hover { border-color: rgba(25,187,233,.25); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,10,58,.08); }
      .wfa-svc-ic { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; background: rgba(42,31,217,.07); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease); }
      .wfa-svc-item:hover .wfa-svc-ic { background: var(--indigo-700); color: #fff; }
      .wfa-svc-ic svg { width: 20px; height: 20px; }
      .wfa-svc-text h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0 0 5px; }
      .wfa-svc-text p { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; margin: 0; }
      @media (max-width: 680px) { .wfa-svc-pair { grid-template-columns: 1fr; } }

/* =====================================================================
   capabilities.php — Page-specific styles
   ===================================================================== */

/* ── Capability Areas — Dark numbered card grid ── */
.capabilities .cap-areas-section {
  background: var(--indigo-900);
  padding: 96px 0;
}
.capabilities .cap-areas-head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}
.capabilities .cap-areas-head h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
}
.capabilities .cap-areas-head p {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin: 0;
}
.capabilities .cap-areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.capabilities .cap-area-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
}
.capabilities .cap-area-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(25,187,233,.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
}
.capabilities .cap-area-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(25,187,233,.25);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,.3);
}
.capabilities .cap-area-card:hover::before { opacity: 1; }
.capabilities .cap-area-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cyan-400);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.capabilities .cap-area-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(25,187,233,.1);
  color: var(--cyan-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.capabilities .cap-area-card:hover .cap-area-icon {
  background: rgba(25,187,233,.18);
}
.capabilities .cap-area-icon svg { width: 22px; height: 22px; }
.capabilities .cap-area-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.35;
}
.capabilities .cap-area-card p {
  font-size: 13px;
  color: rgba(255,255,255,.58);
  line-height: 1.65;
  margin: 0 0 16px;
  flex: 1;
}
.capabilities .cap-area-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cyan-400);
  text-decoration: none;
  letter-spacing: .02em;
  transition: gap var(--transition-fast), color var(--transition-fast);
  margin-top: auto;
}
.capabilities .cap-area-link svg { width: 10px; height: 10px; }
.capabilities .cap-area-link:hover { gap: 9px; color: var(--cyan-300); }

/* Responsive */
@media (max-width: 1100px) { .capabilities .cap-areas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .capabilities .cap-areas-grid { grid-template-columns: 1fr; } }

/* ── Cap Why section ── */
.capabilities .cap-why { background: var(--bg-soft); }
.capabilities .cap-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 48px;
}
@media (max-width: 760px) {
  .capabilities .cap-why-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* =====================================================================
   cybersecurity-detection-response.php — Page-specific styles
   ===================================================================== */

/* ── CDR services section — dark numbered card grid ── */
.cybersecurity-detection-response .cdr-services-section {
  background: var(--indigo-900);
  padding: 96px 0;
}
.cybersecurity-detection-response .cdr-svc-head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}
.cybersecurity-detection-response .cdr-svc-head h2 {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
}
.cybersecurity-detection-response .cdr-svc-head p {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin: 0;
}
.cybersecurity-detection-response .cdr-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cybersecurity-detection-response .cdr-svc-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cybersecurity-detection-response .cdr-svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(25,187,233,.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
}
.cybersecurity-detection-response .cdr-svc-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(25,187,233,.25);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,.3);
}
.cybersecurity-detection-response .cdr-svc-card:hover::before { opacity: 1; }
.cybersecurity-detection-response .cdr-svc-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cyan-400);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cybersecurity-detection-response .cdr-svc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(25,187,233,.1);
  color: var(--cyan-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.cybersecurity-detection-response .cdr-svc-card:hover .cdr-svc-icon {
  background: rgba(25,187,233,.18);
}
.cybersecurity-detection-response .cdr-svc-icon svg { width: 22px; height: 22px; }
.cybersecurity-detection-response .cdr-svc-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.35;
}
.cybersecurity-detection-response .cdr-svc-card p {
  font-size: 13px;
  color: rgba(255,255,255,.58);
  line-height: 1.65;
  margin: 0;
}

/* Responsive */
@media (max-width: 1100px) { .cybersecurity-detection-response .cdr-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cybersecurity-detection-response .cdr-svc-grid { grid-template-columns: 1fr; } }

/* ── CDR Why section ── */
.cybersecurity-detection-response .cdr-why { background: var(--bg-soft); }

/* ── CDR Ecosystem section ── */
.cybersecurity-detection-response .cdr-ecosystem { background: var(--white); }

/* ── CDR Outcomes section ── */
.cybersecurity-detection-response .cdr-outcomes { background: var(--bg-soft); }

/* =====================================================================
   application-modernisation.php — Page-specific styles
   ===================================================================== */

/* ── Hero: actions spacing ── */
.application-modernisation .hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 28px;
}

/* ── Intro narrative: reuses global .cat-narrative-grid ── */
.application-modernisation .am-intro { background: var(--white); }

/* ── Approach: 5-step horizontal path cards ── */
.application-modernisation .am-paths { background: var(--bg-soft); }
.application-modernisation .section-header { margin-bottom: 0; }

/* ── am-paths-grid: 5-col horizontal step cards ── */
.am-paths-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 52px;
}
.am-path-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.am-path-card::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--indigo-500), var(--cyan-400));
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.am-path-card:hover::after { transform: scaleX(1); }
.am-path-card:hover { border-color: rgba(42,31,217,.18); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(16,10,58,.08); }
.am-path-num {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan-500); margin-bottom: 4px;
}
.am-path-card h4 { font-size: 14px; font-weight: 700; color: var(--indigo-800); margin: 0; }
.am-path-card p { font-size: 13px; color: var(--gray-600); line-height: 1.65; margin: 0; flex: 1; }

@media (max-width: 1100px) { .am-paths-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .am-paths-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .am-paths-grid { grid-template-columns: 1fr; } }

/* ── Services: dark numbered grid ── */
.am-services-section {
  background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
  padding: 96px 0; position: relative; overflow: hidden;
}
.am-services-section::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 75% 30%, rgba(25,187,233,.12) 0%, transparent 50%),
              radial-gradient(ellipse at 15% 80%, rgba(42,31,217,.18) 0%, transparent 45%);
  pointer-events: none;
}
.am-services-section .container { position: relative; z-index: 1; }
.am-svc-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.am-svc-head h2 { color: #fff; font-size: clamp(26px,3.2vw,42px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
.am-svc-head p { color: rgba(255,255,255,.65); font-size: 16px; line-height: 1.7; margin: 0; }

.am-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.am-svc-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 28px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative; overflow: hidden;
}
.am-svc-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan-400), rgba(25,187,233,.3));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.am-svc-card:hover::before { transform: scaleX(1); }
.am-svc-card:hover {
  background: rgba(25,187,233,.08); border-color: rgba(25,187,233,.35);
  transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.4);
}
.am-svc-num {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  color: var(--cyan-400); text-transform: uppercase; margin-bottom: 2px;
}
.am-svc-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(25,187,233,.1); border: 1px solid rgba(25,187,233,.25);
  display: flex; align-items: center; justify-content: center; color: var(--cyan-400);
  transition: background var(--transition-fast);
}
.am-svc-card:hover .am-svc-icon { background: rgba(25,187,233,.2); }
.am-svc-icon svg { width: 20px; height: 20px; }
.am-svc-card h3 { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0; }
.am-svc-card p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.65; margin: 0; flex: 1; }

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

/* ── Outcomes: inherits global air-benefit-* styles (defined below as globals) ── */
.application-modernisation .am-outcomes { background: var(--bg-soft); }
.application-modernisation .am-outcomes .section-header { margin-bottom: 0; }

/* ── Why: inherits global cat-why-who-grid styles ── */
.application-modernisation .am-why { background: var(--white); }
.application-modernisation .am-why .section-header { margin-bottom: 0; }
.application-modernisation .am-why .cat-why-who-grid { margin-top: 48px; }

/* ── Problems: inherits global .feature-card styles ── */
.application-modernisation .am-problems { background: var(--bg-soft); }
.application-modernisation .am-problems .section-header { margin-bottom: 0; }
.application-modernisation .am-problems .svc-grid { margin-top: 52px; }

/* =====================================================================
   service-desk-user-support.php — Page-specific styles
   ===================================================================== */

/* ── Hero: actions spacing ── */
.service-desk-user-support .hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 28px;
}

/* ── Narrative: soft bg ── */
.service-desk-user-support .sd-narrative { background: var(--bg-soft); }

/* ── Support section: dark icon grid ── */
.service-desk-user-support .sd-support-section {
  background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
  padding: 96px 0; position: relative; overflow: hidden;
}
.service-desk-user-support .sd-support-section::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 25%, rgba(25,187,233,.12) 0%, transparent 50%),
              radial-gradient(ellipse at 10% 75%, rgba(42,31,217,.18) 0%, transparent 45%);
  pointer-events: none;
}
.service-desk-user-support .sd-support-section .container { position: relative; z-index: 1; }

.sd-sup-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.sd-sup-head h2 { color: #fff; font-size: clamp(26px,3.2vw,42px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 14px; }
.sd-sup-head p { color: rgba(255,255,255,.65); font-size: 16px; line-height: 1.7; margin: 0; }

.sd-sup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sd-sup-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 28px 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative; overflow: hidden;
}
.sd-sup-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan-400), rgba(25,187,233,.3));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.sd-sup-card:hover::before { transform: scaleX(1); }
.sd-sup-card:hover {
  background: rgba(25,187,233,.08); border-color: rgba(25,187,233,.35);
  transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.4);
}
.sd-sup-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(25,187,233,.1); border: 1px solid rgba(25,187,233,.25);
  display: flex; align-items: center; justify-content: center; color: var(--cyan-400);
  transition: background var(--transition-fast); flex-shrink: 0;
}
.sd-sup-card:hover .sd-sup-icon { background: rgba(25,187,233,.2); }
.sd-sup-icon svg { width: 20px; height: 20px; }
.sd-sup-card h3 { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0; }
.sd-sup-card p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.65; margin: 0; flex: 1; }

@media (max-width: 900px) { .sd-sup-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .sd-sup-grid { grid-template-columns: 1fr; } }

/* ── Process: inherits global .am-paths-grid for shared 5-step layout ── */
.service-desk-user-support .sd-process { background: var(--bg-soft); }
.service-desk-user-support .sd-process .section-header { margin-bottom: 0; }

/* ── Benefits: inherits global .feature-card styles ── */
.service-desk-user-support .sd-benefits { background: var(--white); }
.service-desk-user-support .sd-benefits .section-header { margin-bottom: 0; }
.service-desk-user-support .sd-benefits .svc-grid { margin-top: 52px; }

/* ── Why: inherits air-copilot-inner globals (defined below) ── */
.service-desk-user-support .sd-why { background: var(--bg-soft); }
.service-desk-user-support .sd-why .section-header { margin-bottom: 0; }

/* =====================================================================
   values.php — Page-specific styles
   ===================================================================== */

/* ── Values Hero: full-width dark indigo with network SVG backdrop ── */
.values-page .values-hero {
  background: linear-gradient(160deg, var(--indigo-900) 0%, var(--indigo-800) 60%, #0f0c40 100%);
  padding: calc(var(--header-h) + 80px) 0 96px;
  position: relative; overflow: hidden;
  color: #fff;
}
.values-page .values-hero .hero-network {
  mask-image: radial-gradient(ellipse at 70% 50%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 35%, transparent 75%);
}
.values-page .values-hero-content {
  max-width: 780px;
}
.values-page .values-hero h1 {
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.05; font-weight: 700; letter-spacing: -0.025em;
  color: #fff; margin: 22px 0;
}
.values-page .values-hero .accent { color: var(--cyan-400); font-style: italic; }
.values-page .values-hero-desc {
  font-size: 18px; color: rgba(255,255,255,.75);
  max-width: 660px; line-height: 1.7; margin: 0;
}

/* ── Values Grid: 4-column card grid ── */
.values-page .values-grid-section { background: var(--white); }
.values-page .values-grid-section .section-header { margin-bottom: 0; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 56px;
}
.values-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 26px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.values-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--indigo-600), var(--cyan-400));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.values-card:hover::before { transform: scaleX(1); }
.values-card:hover {
  border-color: rgba(42,31,217,.2);
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(16,10,58,.12);
}
.values-card-num {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan-500); margin-bottom: 16px;
}
.values-card-icon {
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--cyan-100); color: var(--indigo-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.values-card:hover .values-card-icon { background: var(--indigo-700); color: #fff; }
.values-card-icon svg { width: 22px; height: 22px; }
.values-card h3 {
  font-size: 17px; font-weight: 700; color: var(--indigo-800);
  margin: 0 0 12px; letter-spacing: -0.01em; line-height: 1.3;
}
.values-card p {
  font-size: 13.5px; color: var(--gray-600); line-height: 1.65; margin: 0;
  flex: 1;
}

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

/* ── Values Meaning: indigo band with 3 pillars ── */
.values-page .values-meaning-section {
  background: linear-gradient(155deg, #0c0b2e 0%, #141069 55%, #0a0830 100%);
  padding: 96px 0; color: #fff;
  position: relative; overflow: hidden;
}
.values-page .values-meaning-section::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(25,187,233,.12) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 80%, rgba(42,31,217,.2) 0%, transparent 50%);
  pointer-events: none;
}
.values-page .values-meaning-section .container { position: relative; z-index: 1; }

.values-meaning-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
  margin-top: 0;
}
.values-meaning-text h2 {
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.1; color: #fff; margin: 18px 0 24px;
}
.values-meaning-text .section-eyebrow--dark { display: inline-flex; }
.values-meaning-text p { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.75; margin: 0 0 14px; }
.values-meaning-text p:last-of-type { margin: 0; }

.values-meaning-pillars {
  display: flex; flex-direction: column; gap: 0;
  padding-top: 8px;
}
.values-pillar {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.values-pillar:first-child { padding-top: 0; }
.values-pillar:last-child { border-bottom: none; padding-bottom: 0; }
.values-pillar-ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: rgba(25,187,233,.12); border: 1px solid rgba(25,187,233,.2);
  color: var(--cyan-400); display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.values-pillar:hover .values-pillar-ic { background: rgba(25,187,233,.22); }
.values-pillar-ic svg { width: 18px; height: 18px; }
.values-pillar h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.values-pillar p { font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.65; margin: 0; }

@media (max-width: 900px) {
  .values-meaning-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* =====================================================================
   Global utility classes shared across am / sd / values pages
   These duplicate the .ai-readiness-scoped versions to allow reuse
   across other pages without the namespace requirement.
   ===================================================================== */

/* ── Air benefit blocks (also used in application-modernisation) ── */
.air-benefits-list { display: flex; flex-direction: column; gap: 0; margin-top: 48px; }
.air-benefit-block {
  display: grid; grid-template-columns: 80px 1fr; gap: 28px;
  align-items: flex-start; padding: 28px 0; border-bottom: 1px solid var(--border);
  transition: background .25s var(--ease);
}
.air-benefit-block:first-child { padding-top: 0; }
.air-benefit-block:last-child { border-bottom: none; padding-bottom: 0; }
.air-benefit-block:hover { background: rgba(42,31,217,.015); padding-left: 10px; padding-right: 10px; border-radius: 12px; }
.air-benefit-num-block {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px;
}
.air-benefit-num {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: rgba(42,31,217,.07); color: var(--indigo-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.air-benefit-block:hover .air-benefit-num { background: var(--indigo-700); color: #fff; }
.air-benefit-content h4 { font-size: 17px; font-weight: 700; color: var(--indigo-800); margin: 0 0 8px; }
.air-benefit-content p { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin: 0; }
@media (max-width: 580px) {
  .air-benefit-block { grid-template-columns: 52px 1fr; gap: 16px; }
}

/* ── Air copilot inner (also used in service-desk-user-support) ── */
.air-copilot-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  margin-top: 48px;
}
.air-copilot-text {
  padding: 48px 44px; background: var(--white);
  display: flex; flex-direction: column; justify-content: center;
}
.air-copilot-visual {
  padding: 48px 44px;
  background: linear-gradient(135deg, rgba(42,31,217,.06) 0%, rgba(25,187,233,.06) 100%);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
}
.air-copilot-text h3 { font-size: 24px; font-weight: 700; color: var(--indigo-800); margin: 0 0 14px; }
.air-copilot-text p { font-size: 15px; color: var(--gray-600); line-height: 1.75; margin: 0 0 14px; }
.air-copilot-text p:last-child { margin: 0; }
.air-copilot-check-list { display: flex; flex-direction: column; gap: 10px; }
.air-copilot-check {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; font-weight: 600; color: var(--indigo-800); line-height: 1.4;
}
.air-copilot-check-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: rgba(25,187,233,.1); color: var(--cyan-500);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
  transition: background .3s var(--ease);
}
.air-copilot-inner:hover .air-copilot-check-dot { background: rgba(25,187,233,.2); }
.air-copilot-check-dot svg { width: 11px; height: 11px; }
@media (max-width: 780px) {
  .air-copilot-inner { grid-template-columns: 1fr; }
  .air-copilot-visual { border-left: none; border-top: 1px solid var(--border); }
  .air-copilot-text, .air-copilot-visual { padding: 32px 28px; }
}

/* NOTE: These global .air-* rules will take lower specificity than the
   existing .ai-readiness .air-* rules, so the ai-readiness page behaviour
   is preserved. These rules only affect the new pages that lack that parent. */