*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; width: 100%; background: #f6f9ff; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text); }

:root {
  --bg:     #f6f9ff;
  --cyan:   #0ea5e9;
  --blue:   #1d4ed8;
  --text:   #0f172a;
  --muted:  rgba(15,23,42,0.62);
  --border: rgba(29,78,216,0.13);
  --surf:   rgba(255,255,255,0.78);
  --card-r: 20px;
}

a, button { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

/* ── SECTION ── */
.hero {
  background: var(--bg);
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex;
  flex-direction: column;
}

/* grid lines bg */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none; z-index: 0;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 75% 50%, rgba(0,212,255,0.05) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* blobs */
.blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.blob-1 { width: 480px; height: 480px; background: rgba(0,212,255,0.07);  top: -100px; right: -80px;  animation: blobMove 14s ease-in-out infinite alternate; }
.blob-2 { width: 340px; height: 340px; background: rgba(59,123,255,0.09); bottom: 60px; left: -60px;   animation: blobMove 18s ease-in-out infinite alternate-reverse; }
.blob-3 { width: 220px; height: 220px; background: rgba(124,58,237,0.08); top: 50%; left: 45%;         animation: blobMove 22s ease-in-out infinite alternate; }
@keyframes blobMove {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,-40px) scale(1.1); }
}

/* ══════════════════════
   HERO WRAP — default mobile
══════════════════════ */
.hero-wrap {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(100px,14vw,120px) clamp(22px,5vw,42px) clamp(36px,5vw,52px);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── EYEBROW ── */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 15px 6px 6px;
  background: rgba(0,212,255,0.07);
  border: 1px solid rgba(0,212,255,0.22);
  border-radius: 100px;
  font-size: 12px; font-weight: 600;
  color: var(--cyan);
  margin-bottom: 20px;
  width: fit-content;
  box-shadow: 0 0 20px rgba(0,212,255,0.08);
  letter-spacing: 0.3px;
}
.eyebrow-icon {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  box-shadow: 0 0 14px rgba(0,212,255,0.45);
}

/* ── HEADING ── */
.hero-heading {
  font-size: clamp(40px,9vw,64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -2px;
  color: var(--text);
  margin-bottom: clamp(16px,3vw,22px);
}
.hl-cyan {
  background: linear-gradient(90deg, var(--cyan) 0%, #60a5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  position: relative;
}
.hl-cyan::after {
  content: '';
  position: absolute; bottom: 3px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), #60a5ff);
  border-radius: 4px; opacity: 0.45;
}
.hl-outline {
  -webkit-text-stroke: 2px rgba(255,255,255,0.55);
  color: transparent;
  paint-order: stroke fill;
}

/* ── CARDS STRIP — mobile: 4 in a row ── */
.cards-strip {
  display: flex;
  gap: 10px;
  margin-bottom: clamp(18px,3vw,26px);
  width: 100%;
}
.card-item {
  flex: 1;
  border-radius: var(--card-r);
  overflow: hidden;
  aspect-ratio: 3/4;
  position: relative;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  cursor: pointer;
  border: 1px solid var(--border);
  min-width: 0; /* CRITICAL — prevents flex overflow */
}
.card-item:hover { transform: translateY(-10px) scale(1.04); z-index: 5; }

.card-item:nth-child(1) { background: linear-gradient(155deg,#0b2040,#133060); box-shadow: 0 6px 24px rgba(0,212,255,0.12); }
.card-item:nth-child(2) { background: linear-gradient(155deg,#1a0e32,#2d155a); box-shadow: 0 6px 24px rgba(124,58,237,0.12); }
.card-item:nth-child(3) { background: linear-gradient(155deg,#081a34,#0d2d56); box-shadow: 0 6px 24px rgba(59,123,255,0.12); }
.card-item:nth-child(4) { background: linear-gradient(155deg,#0b1e30,#152e48); box-shadow: 0 6px 24px rgba(0,212,255,0.08); }

.card-item::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 55%);
  pointer-events: none;
}
.card-shine {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
  border-radius: var(--card-r);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.card-item:hover .card-shine { opacity: 1; }

.card-emoji {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  z-index: 1;
}
.card-big-icon {
  font-size: clamp(28px,6vw,42px); line-height: 1;
  filter: drop-shadow(0 0 12px rgba(0,212,255,0.4));
}
.card-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted);
}

.card-badge {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border-radius: 8px; padding: 4px 8px;
  font-size: 9px; font-weight: 800;
  color: #050c1f; letter-spacing: .6px;
  box-shadow: 0 0 12px rgba(0,212,255,0.5);
  animation: badgeBounce 3s ease-in-out infinite;
}
@keyframes badgeBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* ── DESCRIPTION ── */
.hero-desc {
  font-size: clamp(14px,3.2vw,16px);
  line-height: 1.75; color: var(--muted);
  margin-bottom: clamp(22px,4vw,32px);
}
.hero-desc strong { color: var(--text); font-weight: 600; }

/* ── BUTTONS ── */
.hero-buttons {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: clamp(24px,4vw,36px);
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: clamp(13px,3vw,16px) clamp(22px,4vw,28px);
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #050c1f;
  border: none; border-radius: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(13px,3vw,15px); font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 28px rgba(0,212,255,0.35), 0 4px 14px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.18);
  transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.btn-primary span, .btn-primary svg { position: relative; z-index: 1; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 50px rgba(0,212,255,0.55), 0 8px 24px rgba(0,0,0,0.3); }
.btn-primary:hover::before { transform: translateX(0); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: clamp(13px,3vw,16px) clamp(22px,4vw,28px);
  background: var(--surf); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(13px,3vw,15px); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: rgba(0,212,255,0.35);
  box-shadow: 0 0 20px rgba(0,212,255,0.1);
  background: rgba(0,212,255,0.06);
}

/* ── STATS ── */
.hero-stats {
  display: flex; gap: 10px;
  padding-bottom: clamp(16px,3vw,28px);
}
.stat-pill {
  flex: 1;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 14px 18px;
  text-align: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.stat-pill::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent);
  opacity: 0; transition: opacity .3s;
}
.stat-pill:hover { transform: translateY(-4px); border-color: rgba(0,212,255,0.28); box-shadow: 0 12px 28px rgba(0,0,0,0.2); }
.stat-pill:hover::before { opacity: 1; }
.stat-num { font-size: clamp(22px,5vw,28px); font-weight: 800; color: var(--text); line-height: 1; display: block; letter-spacing: -0.5px; }
.stat-num span { color: var(--cyan); }
.stat-lbl { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 6px; display: block; }

/* ── MARQUEE ── */
.marque-wrap {
  position: relative; z-index: 2;
  background: rgba(0,212,255,0.05);
  border-top: 1px solid rgba(0,212,255,0.1);
  overflow: hidden; padding: 13px 0;
  margin-top: auto;
}
.marque-track { display: flex; white-space: nowrap; animation: marque 20s linear infinite; }
.marque-item {
  display: inline-flex; align-items: center; gap: 16px;
  padding-right: 32px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.marque-gem { color: var(--cyan); font-size: 10px; opacity: 0.6; }
@keyframes marque { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── MOBILE BOTTOM NAV ── */
.mobile-bottom-nav {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 50;
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  background: rgba(5,12,31,0.86);
  box-shadow: 0 18px 45px rgba(0,0,0,0.42), 0 0 34px rgba(0,212,255,0.12);
  backdrop-filter: blur(18px);
}
.mobile-nav-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 54px;
  border-radius: 14px;
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2px;
}
.mobile-nav-item svg {
  width: 18px; height: 18px;
  stroke-width: 2.2;
}
.mobile-nav-item.is-active {
  color: var(--text);
  background: rgba(255,255,255,0.07);
}
.mobile-nav-item.is-primary {
  color: #050c1f;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 0 22px rgba(0,212,255,0.38);
}
.mobile-nav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── PROFESSIONAL BLUE / WHITE THEME ── */
:root {
  --bg: #f6f9ff;
  --cyan: #0ea5e9;
  --blue: #1d4ed8;
  --text: #0f172a;
  --muted: rgba(15,23,42,0.62);
  --border: rgba(29,78,216,0.13);
  --surf: rgba(255,255,255,0.78);
}
html, body {
  background: #f6f9ff;
}
.hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(14,165,233,0.16), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 56%, #eef6ff 100%);
}
.hero::before {
  background-image:
    linear-gradient(rgba(15,23,42,0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.075) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 42px 42px;
}
.hero::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.78), rgba(255,255,255,0.18)),
    radial-gradient(ellipse 60% 70% at 75% 50%, rgba(14,165,233,0.12) 0%, transparent 66%);
}
.blob { filter: blur(95px); opacity: .85; }
.blob-1 { background: rgba(14,165,233,0.18); }
.blob-2 { background: rgba(29,78,216,0.12); }
.blob-3 { background: rgba(96,165,250,0.12); }
.hero-eyebrow {
  background: rgba(255,255,255,0.86);
  border-color: rgba(29,78,216,0.14);
  color: #1d4ed8;
  box-shadow: 0 12px 35px rgba(29,78,216,0.08);
}
.eyebrow-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  box-shadow: 0 10px 24px rgba(29,78,216,0.22);
}
.hero-heading {
  color: #0f172a;
  font-weight: 900;
  line-height: .94;
  letter-spacing: -2.2px;
  max-width: 680px;
}
.headline-line {
  display: block;
  width: fit-content;
  transform-origin: left bottom;
}
.headline-line::selection {
  background: rgba(14,165,233,0.18);
}
.hl-cyan {
  background: linear-gradient(90deg, #089bff 0%, #04c8d7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: .12em;
}
.hl-cyan::after {
  left: 7%;
  right: 6%;
  bottom: -.02em;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #097cff, #08bed5);
  opacity: .95;
  transform: scaleX(1) rotate(-2deg);
  transform-origin: left center;
}
.hl-outline {
  -webkit-text-stroke: 2px rgba(15,23,42,0.45);
}
.card-item {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(29,78,216,0.13);
  box-shadow: 0 18px 45px rgba(30,64,175,0.12);
}
.card-item::before {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.16), transparent 58%),
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}
.card-shine {
  background: linear-gradient(135deg, rgba(255,255,255,0.7), transparent 62%);
}
.card-big-icon {
  filter: drop-shadow(0 8px 16px rgba(29,78,216,0.2));
}
.card-label {
  color: rgba(15,23,42,0.52);
}
.card-badge {
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
  box-shadow: 0 10px 24px rgba(29,78,216,0.24);
}
.hero-desc {
  color: rgba(15,23,42,0.62);
  font-weight: 500;
  line-height: 1.75;
  max-width: 590px;
  animation-delay: .72s;
}
.hero-desc strong {
  color: #0f172a;
}
.btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
  box-shadow: 0 16px 34px rgba(29,78,216,0.24);
  font-weight: 900;
  isolation: isolate;
}
.btn-primary:hover {
  box-shadow: 0 22px 44px rgba(29,78,216,0.28);
}
.btn-ghost {
  color: #0f172a;
  background: rgba(255,255,255,0.82);
  border-color: rgba(29,78,216,0.13);
  box-shadow: 0 12px 28px rgba(30,64,175,0.08);
  font-weight: 900;
}
.btn-ghost:hover {
  background: #ffffff;
  border-color: rgba(29,78,216,0.24);
  box-shadow: 0 16px 35px rgba(30,64,175,0.12);
}
.stat-pill {
  background: rgba(255,255,255,0.78);
  border-color: rgba(29,78,216,0.13);
  box-shadow: 0 12px 30px rgba(30,64,175,0.08);
}
.stat-pill::before {
  background: linear-gradient(90deg, transparent, rgba(29,78,216,0.28), transparent);
}
.stat-pill:hover {
  border-color: rgba(29,78,216,0.24);
  box-shadow: 0 18px 42px rgba(30,64,175,0.12);
}
.stat-num {
  color: #0f172a;
}
.stat-num span {
  color: #1d4ed8;
}
.stat-lbl {
  color: rgba(15,23,42,0.5);
}
.marque-wrap {
  background: rgba(255,255,255,0.78);
  border-top-color: rgba(29,78,216,0.12);
}
.marque-item {
  color: rgba(15,23,42,0.42);
}
.marque-gem {
  color: #1d4ed8;
}
.mobile-bottom-nav {
  background: rgba(255,255,255,0.9);
  border-color: rgba(29,78,216,0.14);
  box-shadow: 0 20px 48px rgba(30,64,175,0.18);
  --active-index: 0;
  --from-index: 0;
  --nav-gap: 7px;
  position: fixed;
}
.mobile-bottom-nav::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 0;
  width: calc((100% - 16px - (var(--nav-gap) * 3)) / 4);
  border-radius: 14px;
  background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
  box-shadow: 0 12px 26px rgba(29,78,216,0.24);
  transform: translateX(calc(var(--active-index) * (100% + var(--nav-gap))));
  transition: transform .42s cubic-bezier(.16,1,.3,1);
}
.mobile-bottom-nav.nav-animate::before {
  animation: navSlide .54s cubic-bezier(.16,1,.3,1) both;
}
.mobile-nav-item {
  color: rgba(15,23,42,0.56);
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.mobile-nav-item.is-active {
  color: #1d4ed8;
  background: rgba(29,78,216,0.08);
}
.mobile-nav-item.is-primary {
  color: #ffffff;
  transform: translateY(-1px);
}

/* ── SCREENSHOT-INSPIRED LANDING POLISH ── */
.hero-topbar {
  position: relative;
  z-index: 4;
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px 14px 18px;
  border: 1px solid rgba(29,78,216,0.12);
  border-radius: 28px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 18px 48px rgba(30,64,175,0.12);
  backdrop-filter: blur(18px);
}
.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #0f172a;
  text-decoration: none;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.2px;
}
.hero-brand-mark {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
  box-shadow: 0 12px 26px rgba(29,78,216,0.24);
}
.hero-top-actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}
.btn-primary.top-start {
  min-height: 54px;
  padding: 16px 30px;
  border-radius: 17px;
  font-size: 18px;
}
.announcement-strip {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  background: #071327;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.announcement-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marque 22s linear infinite;
}
.announcement-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  font-weight: 800;
}
.announcement-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 12px rgba(14,165,233,0.8);
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  margin-bottom: 20px;
  padding: 9px 14px 9px 9px;
  border: 1px solid rgba(29,78,216,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 16px 34px rgba(30,64,175,0.1);
  animation: pillFloat 4.4s 1.1s ease-in-out infinite;
}
.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-dot {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -7px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  font-size: 10px;
  font-weight: 900;
  animation: avatarWiggle 3.6s ease-in-out infinite;
}
.avatar-dot:nth-child(2) { animation-delay: .15s; }
.avatar-dot:nth-child(3) { animation-delay: .3s; }
.avatar-dot:nth-child(4) { animation-delay: .45s; }
.avatar-dot:first-child { margin-left: 0; }
.trust-copy {
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.trust-stars {
  color: #f59e0b;
  letter-spacing: 1px;
}
.hero-offer-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-bottom: 22px;
  padding: 10px 14px;
  border: 1px solid rgba(29,78,216,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 12px 28px rgba(30,64,175,0.08);
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}
.hero-offer-pill span {
  padding: 5px 9px;
  border-radius: 999px;
  color: #047857;
  background: rgba(16,185,129,0.14);
  font-size: 11px;
}
.floating-whatsapp {
  position: fixed;
  right: 16px;
  bottom: 102px;
  z-index: 51;
  width: 58px;
  height: 58px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  box-shadow: 0 18px 36px rgba(6,182,212,0.24);
  animation: bubbleFloat 3.6s ease-in-out infinite;
}

/* Mature navy / white theme pass */
:root {
  --bg: #f8fbff;
  --cyan: #176ee8;
  --blue: #0f3f98;
  --text: #07142d;
  --muted: rgba(7,20,45,0.64);
  --border: rgba(8,30,66,0.12);
  --surf: rgba(255,255,255,0.96);
}
html, body { background: #f8fbff; }
.hero {
  background:
    radial-gradient(circle at 78% 12%, rgba(59,130,246,0.1), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 54%, #f4f8ff 100%);
}
.hero::before {
  background-image:
    linear-gradient(rgba(8,30,66,0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,30,66,0.052) 1px, transparent 1px);
}
.hero::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.88), rgba(255,255,255,0.34)),
    radial-gradient(ellipse 58% 68% at 78% 48%, rgba(37,99,235,0.075) 0%, transparent 66%);
}
.blob { opacity: .58; }
.hero-topbar,
.trust-pill,
.hero-offer-pill,
.stat-pill,
.btn-ghost {
  border-color: rgba(8,30,66,0.12);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 16px 38px rgba(8,30,66,0.08);
}
.hero-brand,
.hero-heading,
.hero-desc strong,
.stat-num {
  color: #07142d;
}
.hero-brand-mark,
.eyebrow-icon,
.card-badge,
.btn-primary,
.mobile-bottom-nav::before {
  background: linear-gradient(135deg, #176ee8, #0f3f98);
  box-shadow: 0 14px 30px rgba(15,63,152,0.24);
}
.btn-primary:hover {
  box-shadow: 0 20px 42px rgba(15,63,152,0.28);
}
.hl-cyan {
  background: linear-gradient(90deg, #176ee8 0%, #0f3f98 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hl-cyan::after {
  background: linear-gradient(90deg, #176ee8, #0f3f98);
}
.hero-desc,
.stat-lbl,
.card-label {
  color: rgba(7,20,45,0.58);
}
.announcement-strip {
  background: #06152f;
}
.announcement-dot {
  background: #176ee8;
  box-shadow: 0 0 12px rgba(23,110,232,0.7);
}
.marque-wrap {
  background: rgba(255,255,255,0.9);
  border-top-color: rgba(8,30,66,0.1);
}
.marque-item {
  color: rgba(7,20,45,0.42);
}
.marque-gem,
.stat-num span,
.mobile-nav-item.is-active {
  color: #1159c7;
}
.card-item {
  background: rgba(255,255,255,0.94) !important;
  border-color: rgba(8,30,66,0.12);
  box-shadow: 0 16px 38px rgba(8,30,66,0.08);
}
.card-item::before {
  background:
    linear-gradient(135deg, rgba(23,110,232,0.1), transparent 58%),
    linear-gradient(rgba(8,30,66,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,30,66,0.04) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}
.mobile-bottom-nav {
  border-color: rgba(8,30,66,0.12);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 20px 44px rgba(8,30,66,0.14);
}
.mobile-nav-item {
  color: rgba(7,20,45,0.56);
}
.mobile-nav-item.is-active {
  background: rgba(17,89,199,0.08);
}

@keyframes headlinePop {
  from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes underlineSweep {
  to { transform: scaleX(1) rotate(-2deg); }
}
@keyframes underlineWiggle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 2px; }
}
@keyframes pillFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes softFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes avatarWiggle {
  0%, 88%, 100% { transform: translateY(0) rotate(0); }
  92% { transform: translateY(-3px) rotate(-5deg); }
  96% { transform: translateY(-2px) rotate(5deg); }
}
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}
@keyframes navSlide {
  from { transform: translateX(calc(var(--from-index) * (100% + var(--nav-gap)))); }
  to { transform: translateX(calc(var(--active-index) * (100% + var(--nav-gap)))); }
}

/* ── KEYFRAMES ── */
@keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)}  to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════
   DESKTOP — proper 2 col grid
══════════════════════════════════════ */
@media (min-width: 860px) {

  .hero-wrap {
    max-width: 1240px;
    /* switch to grid */
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: clamp(36px,5vw,80px);
    align-items: center;
    padding-top:    clamp(110px,9vw,130px);
    padding-bottom: clamp(52px,6vw,84px);
    padding-left:   clamp(32px,4vw,64px);
    padding-right:  clamp(32px,4vw,64px);
    /* undo mobile flex settings */
    flex-direction: unset;
  }

  /* left column items — explicitly assign */
  .trust-pill { grid-column: 1; grid-row: 1; }
  .hero-eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 20px; }
  .hero-heading  { grid-column: 1; grid-row: 2; }
  .hero-desc     { grid-column: 1; grid-row: 3; }
  .hero-offer-pill { grid-column: 1; grid-row: 4; }
  .hero-buttons  { grid-column: 1; grid-row: 5; }
  .hero-stats    { grid-column: 1; grid-row: 6; padding-bottom: 0; gap: 12px; }

  /* RIGHT column — cards — spans all rows */
  .right-col {
    grid-column: 2 !important;
    grid-row: 1 / span 6 !important;
    display: flex !important;
    align-self: center;
    align-items: center;
    width: 100%;
  }

  .cards-strip {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px;
    width: 100%;
    margin-bottom: 0;
  }

  .card-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    aspect-ratio: 2.2/3 !important;
  }

  .stat-pill { padding: 18px 16px 20px; }
  .stat-num  { font-size: 30px; }
  .hero-heading { font-size: clamp(48px,5vw,68px); }
}

/* ── LARGE LAPTOP ── */
@media (min-width: 1200px) {
  .hero-heading { font-size: 72px; }
  .hero-desc    { font-size: 17px; }
  .stat-num     { font-size: 34px; }
  .cards-strip  { gap: 16px; }
  .card-big-icon { font-size: 46px; }
}

@media (max-width: 900px) {
  body { padding-bottom: 88px; }
  .mobile-bottom-nav { display: grid; }
  .hero-topbar {
    width: calc(100% - 28px);
    margin-top: 10px;
    border-radius: 22px;
  }
  .announcement-strip { margin-top: 10px; }
  .hero-wrap {
    padding-top: clamp(32px,9vw,56px);
  }
  .hero-heading {
    font-size: clamp(44px,12vw,58px);
    letter-spacing: -1.4px;
  }
  .hero-buttons {
    flex-direction: column;
  }
  .btn-primary,
  .btn-ghost {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }
  .floating-whatsapp { display: inline-flex; }
}

/* ── MOBILE ── */
@media (max-width: 420px) {
  .hero-topbar {
    width: calc(100% - 24px);
    padding: 8px 8px 8px 14px;
  }
  .hero-brand {
    gap: 10px;
    font-size: 14px;
  }
  .hero-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .btn-primary.top-start {
    min-height: 48px;
    padding: 13px 20px;
    border-radius: 15px;
    font-size: 15px;
  }
  .hero-heading { letter-spacing: -1px; }
  .trust-pill {
    gap: 8px;
    max-width: 100%;
  }
  .trust-copy {
    font-size: 11px;
  }
  .trust-stars {
    display: none;
  }
  .hero-stats { gap: 8px; }
  .stat-pill { padding: 14px 10px 16px; }
  .stat-lbl { font-size: 9px; }
  .mobile-bottom-nav {
    left: 8px; right: 8px; bottom: 8px;
    border-radius: 18px;
    gap: 5px;
    --nav-gap: 5px;
  }
  .mobile-nav-item {
    height: 52px;
    font-size: 9px;
  }
}

/* Professional refinement layer */
:root {
  --bg: #fbfdff;
  --cyan: #1f6fd7;
  --blue: #123f91;
  --border: rgba(8,30,66,0.105);
  --surf: rgba(255,255,255,0.97);
}
html, body { background: #fbfdff; }
.hero {
  background:
    radial-gradient(circle at 78% 12%, rgba(23,110,232,0.06), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 56%, #f7faff 100%);
}
.hero::before {
  opacity: .92;
  background-image:
    linear-gradient(rgba(8,30,66,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,30,66,0.035) 1px, transparent 1px);
}
.hero::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.46)),
    radial-gradient(ellipse 58% 68% at 78% 48%, rgba(15,63,152,0.045) 0%, transparent 66%);
}
.blob { opacity: .38; }
.hero-topbar,
.trust-pill,
.hero-offer-pill,
.stat-pill,
.btn-ghost {
  border-color: rgba(8,30,66,0.105);
  background: rgba(255,255,255,0.97);
  box-shadow: 0 10px 26px rgba(8,30,66,0.065);
}
.hero-topbar {
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(8,30,66,0.075);
}
.hero-brand-mark,
.eyebrow-icon,
.card-badge,
.btn-primary,
.mobile-bottom-nav::before {
  background: linear-gradient(135deg, #1f6fd7, #123f91);
  box-shadow: 0 10px 22px rgba(15,63,152,0.2);
}
.hero-brand-mark {
  border-radius: 13px;
}
.btn-primary.top-start {
  border-radius: 14px;
}
.btn-primary:hover {
  box-shadow: 0 14px 30px rgba(15,63,152,0.24);
}
.hl-cyan {
  background: linear-gradient(90deg, #1f6fd7 0%, #123f91 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hl-cyan::after {
  height: 3px;
  opacity: .86;
  background: linear-gradient(90deg, #1f6fd7, #123f91);
}
.hero-heading {
  letter-spacing: -1.6px;
}
.announcement-dot {
  background: #1f6fd7;
  box-shadow: 0 0 10px rgba(31,111,215,0.55);
}
.marque-gem,
.stat-num span,
.mobile-nav-item.is-active {
  color: #124fa8;
}
.card-item {
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(8,30,66,0.105);
  box-shadow: 0 10px 26px rgba(8,30,66,0.065);
}
.card-item::before {
  background:
    linear-gradient(135deg, rgba(31,111,215,0.07), transparent 58%),
    linear-gradient(rgba(8,30,66,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,30,66,0.03) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}
.trust-pill,
.hero-offer-pill,
.card-item {
  animation-duration: .74s;
  animation-iteration-count: 1;
}
.mobile-bottom-nav {
  border-radius: 16px;
  border-color: rgba(8,30,66,0.105);
  background: rgba(255,255,255,0.965);
  box-shadow: 0 14px 34px rgba(8,30,66,0.12);
}
.mobile-bottom-nav::before {
  border-radius: 11px;
}
.mobile-nav-item.is-active {
  background: rgba(18,79,168,0.07);
}

@media (max-width: 900px) {
  .hero-topbar { border-radius: 18px; }
}

@media (max-width: 420px) {
  .hero-topbar { padding: 8px 8px 8px 12px; }
  .hero-brand-mark { border-radius: 12px; }
  .btn-primary.top-start { border-radius: 12px; }
  .mobile-bottom-nav { border-radius: 16px; }
}

/* Subtle 3D depth */
.hero {
  perspective: 1200px;
}
.hero-topbar {
  transform: translateZ(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 12px 24px rgba(8,30,66,0.07),
    0 30px 70px rgba(18,79,168,0.06);
}
.hero-brand-mark,
.eyebrow-icon,
.card-badge,
.btn-primary,
.mobile-bottom-nav::before {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.34) inset,
    0 10px 20px rgba(15,63,152,0.2),
    0 18px 36px rgba(31,111,215,0.12);
}
.trust-pill,
.hero-offer-pill,
.stat-pill,
.btn-ghost,
.card-item {
  position: relative;
  transform-style: preserve-3d;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 12px 24px rgba(8,30,66,0.06),
    0 32px 70px rgba(18,79,168,0.055);
}
.card-item::after,
.trust-pill::after,
.hero-offer-pill::after,
.stat-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,0.56), transparent 34%, rgba(18,79,168,0.045) 100%);
}
.trust-pill > *,
.hero-offer-pill > *,
.stat-pill > *,
.card-item > * {
  position: relative;
  z-index: 2;
}
.mobile-bottom-nav {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 16px 32px rgba(8,30,66,0.12),
    0 32px 70px rgba(18,79,168,0.08);
}

@media (hover: hover) and (pointer: fine) {
  .card-item,
  .stat-pill,
  .trust-pill,
  .hero-offer-pill {
    transition: transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s ease, border-color .34s ease;
  }
  .card-item:hover,
  .stat-pill:hover {
    transform: translateY(-8px) rotateX(1.2deg) rotateY(-.8deg);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.96) inset,
      0 18px 34px rgba(8,30,66,0.09),
      0 44px 86px rgba(18,79,168,0.12);
  }
}

/* Emoji service card alignment */
.card-shine {
  position: absolute !important;
  inset: 0;
  z-index: 1;
}
.card-emoji {
  position: absolute !important;
  inset: 0;
  z-index: 3;
  display: flex;
  padding: 14px 8px 18px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  transform: translateZ(24px);
}
.card-big-icon {
  font-size: clamp(31px,5.8vw,45px);
  line-height: 1;
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.75))
    drop-shadow(0 9px 12px rgba(8,30,66,0.14));
}
.card-label {
  color: rgba(7,20,45,0.58);
  font-size: clamp(9px,1.1vw,11px);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}
.card-badge {
  top: auto;
  right: auto;
  bottom: 20px;
  left: 50%;
  z-index: 4;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 6px 9px;
  border-radius: 999px;
  transform: translateX(-50%) translateZ(28px);
  white-space: nowrap;
}
.card-item:nth-child(3) .card-emoji {
  padding-bottom: 42px;
}

@media (min-width: 860px) {
  .card-emoji {
    padding: 18px 10px 22px;
    gap: 11px;
  }
  .card-badge {
    bottom: 24px;
    padding: 7px 10px;
    font-size: 10px;
  }
  .card-item:nth-child(3) .card-emoji {
    padding-bottom: 50px;
  }
}

@media (max-width: 420px) {
  .card-emoji {
    padding: 12px 6px 16px;
    gap: 8px;
  }
  .card-big-icon {
    font-size: 31px;
  }
  .card-label {
    font-size: 9px;
    letter-spacing: 1.9px;
  }
  .card-badge {
    bottom: 18px;
    padding: 5px 7px;
    font-size: 8px;
  }
  .card-item:nth-child(3) .card-emoji {
    padding-bottom: 38px;
  }
}

/* Professional emoji service cards */
.cards-strip {
  gap: clamp(8px,1.4vw,14px);
}
.card-item {
  aspect-ratio: 1 / 1.24 !important;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(31,111,215,0.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.94)) !important;
  border-color: rgba(8,30,66,0.12);
}
.card-item::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), transparent 34%),
    linear-gradient(rgba(8,30,66,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,30,66,0.026) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}
.card-item::after {
  background: linear-gradient(145deg, rgba(255,255,255,0.68), transparent 42%, rgba(18,79,168,0.045));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(8,30,66,0.05) inset;
}
.card-shine {
  inset: auto 16px 13px !important;
  height: 3px;
  border-radius: 999px;
  opacity: 1;
  background: linear-gradient(90deg, rgba(31,111,215,0.18), rgba(18,63,145,0.52), rgba(31,111,215,0.18));
  box-shadow: 0 7px 15px rgba(31,111,215,0.14);
}
.card-emoji {
  padding: 13px 8px 25px;
  gap: 11px;
}
.card-big-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.95), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(238,246,255,0.72));
  border: 1px solid rgba(8,30,66,0.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 10px 18px rgba(8,30,66,0.09);
  font-size: 29px;
}
.card-label {
  color: rgba(7,20,45,0.66);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 2.35px;
}
.card-badge {
  bottom: 19px;
  padding: 6px 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #1f6fd7, #123f91);
  border: 1px solid rgba(255,255,255,0.32);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.24) inset,
    0 10px 20px rgba(18,63,145,0.22);
  font-size: 9px;
  letter-spacing: .15px;
}
.card-item:nth-child(3) .card-emoji {
  padding-bottom: 48px;
}
.card-item:nth-child(3) .card-badge {
  left: 12px;
  right: 12px;
  width: auto;
  max-width: none;
  transform: translateZ(28px);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-item:nth-child(3) .card-label {
  color: #123f91;
}

@media (hover: hover) and (pointer: fine) {
  .card-item:hover .card-big-icon {
    transform: translateY(-3px) scale(1.04);
  }
}

@media (min-width: 860px) {
  .card-item {
    aspect-ratio: 1 / 1.32 !important;
  }
  .card-big-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 34px;
  }
  .card-label {
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  .cards-strip {
    gap: 7px;
  }
  .card-item {
    border-radius: 20px;
  }
  .card-emoji {
    padding: 11px 5px 23px;
    gap: 9px;
  }
  .card-big-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 25px;
  }
  .card-label {
    font-size: 9px;
    letter-spacing: 1.9px;
  }
  .card-badge {
    bottom: 17px;
    padding: 5px 4px;
    font-size: 7px;
    letter-spacing: .1px;
  }
  .card-shine {
    left: 13px !important;
    right: 13px !important;
    bottom: 11px !important;
  }
  .card-item:nth-child(3) .card-emoji {
    padding-bottom: 39px;
  }
  .card-item:nth-child(3) .card-badge {
    left: 7px;
    right: 7px;
  }
}

/* Final clean capability tiles */
.card-item {
  aspect-ratio: 1 / 1.04 !important;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.92)) !important;
  border: 1px solid rgba(8,30,66,0.11);
}
.card-item::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), transparent 42%),
    linear-gradient(rgba(8,30,66,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,30,66,0.024) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}
.card-item::after {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.42), transparent 52%),
    radial-gradient(circle at 50% 100%, rgba(31,111,215,0.075), transparent 48%);
}
.card-emoji,
.card-item:nth-child(3) .card-emoji {
  padding: 13px 6px 23px;
  gap: 10px;
}
.card-big-icon {
  width: auto;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(31px,5.8vw,43px);
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.85))
    drop-shadow(0 8px 10px rgba(8,30,66,0.16));
}
.card-label {
  color: rgba(7,20,45,0.62);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 2.4px;
}
.card-shine {
  left: 18px !important;
  right: 18px !important;
  bottom: 14px !important;
  height: 3px;
  opacity: .82;
  background: linear-gradient(90deg, transparent, rgba(18,63,145,0.42), transparent);
  box-shadow: none;
}
.card-badge {
  display: none;
}

@media (min-width: 860px) {
  .card-item {
    aspect-ratio: 1 / 1.12 !important;
  }
  .card-big-icon {
    font-size: 42px;
  }
}

@media (max-width: 420px) {
  .card-item {
    border-radius: 20px;
  }
  .card-emoji,
  .card-item:nth-child(3) .card-emoji {
    padding: 12px 4px 21px;
    gap: 8px;
  }
  .card-big-icon {
    font-size: 30px;
  }
  .card-label {
    font-size: 8.5px;
    letter-spacing: 1.85px;
  }
  .card-shine {
    left: 14px !important;
    right: 14px !important;
    bottom: 11px !important;
  }
}

/* Premium bright SaaS theme */
:root {
  --bg: #f7fbff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --cyan: oklch(0.7 0.18 230);
  --blue: #2563eb;
  --brand: oklch(0.55 0.22 258);
  --brand-deep: oklch(0.38 0.19 262);
  --brand-glow: oklch(0.72 0.18 240);
  --brand-soft: oklch(0.96 0.04 250);
  --mint: oklch(0.72 0.17 165);
  --brand-gradient: linear-gradient(135deg, oklch(0.6 0.22 258) 0%, oklch(0.7 0.18 230) 55%, oklch(0.78 0.16 200) 100%);
}
html,
body {
  background: #f7fbff;
  color: #0f172a;
}
.hero {
  background:
    linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px),
    radial-gradient(circle at 86% 7%, oklch(0.88 0.09 238 / 0.34), transparent 30%),
    radial-gradient(circle at 8% 10%, oklch(0.9 0.07 215 / 0.22), transparent 30%),
    radial-gradient(circle at 50% 46%, oklch(0.94 0.035 240 / 0.18), transparent 36%),
    linear-gradient(180deg, #fbfdff 0%, #f7fbff 34%, #ffffff 68%, #f6f9ff 100%);
  background-size: 70px 70px, 70px 70px, auto, auto, auto, auto;
}
.hero::before,
.hero::after {
  opacity: 0;
}
.blob {
  opacity: .22;
  filter: blur(42px);
}
.hero-topbar,
.trust-pill,
.hero-offer-pill,
.stat-pill,
.btn-ghost,
.card-item,
.mobile-bottom-nav {
  border: 1px solid rgba(203,213,225,0.72);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(15,23,42,0.07);
}
.hero-topbar {
  position: sticky;
  top: 16px;
  z-index: 50;
  border-color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.88);
  border-radius: 26px;
  box-shadow: 0 22px 70px rgba(15,23,42,0.1);
}
.hero-brand,
.hero-heading,
.hero-desc strong,
.stat-num {
  color: #0f172a;
}
.hero-desc,
.stat-lbl,
.card-label,
.marque-item {
  color: #64748b;
}
.hero-brand-mark,
.eyebrow-icon,
.btn-primary,
.card-badge,
.mobile-bottom-nav::before {
  background: var(--brand-gradient);
  box-shadow: 0 20px 60px -20px oklch(0.55 0.22 258 / 0.45);
}
.btn-primary {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  color: #ffffff;
  font-weight: 950;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-120%) skewX(-20deg);
  animation: ctaShine 2.4s ease-in-out infinite;
}
.hero-buttons .btn-primary {
  animation: ctaWiggle 2.4s ease-in-out infinite;
}
.hero-buttons .btn-primary:hover {
  animation-play-state: paused;
}
.btn-primary span,
.btn-primary svg {
  position: relative;
  z-index: 1;
}
.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 24px 70px -20px oklch(0.55 0.22 258 / 0.55);
}
.btn-ghost {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 16px 42px rgba(15,23,42,0.06);
}
.btn-ghost:hover {
  border-color: oklch(0.55 0.22 258 / 0.4);
  box-shadow: 0 20px 55px rgba(15,23,42,0.09);
}
.hl-cyan {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hl-cyan::after {
  background: var(--brand-gradient);
  box-shadow: 0 8px 22px oklch(0.72 0.18 240 / 0.32);
}
.announcement-strip {
  background: #0f172a;
  box-shadow: 0 16px 44px rgba(15,23,42,0.1);
}
.announcement-dot {
  background: oklch(0.72 0.17 165);
  box-shadow: 0 0 16px oklch(0.72 0.17 165 / 0.65);
}
.marque-wrap {
  background: rgba(255,255,255,0.72);
  border-top-color: rgba(203,213,225,0.72);
}
.marque-gem,
.stat-num span,
.mobile-nav-item.is-active {
  color: #2563eb;
}
.card-item {
  aspect-ratio: 1 / 1.08 !important;
  border-radius: 24px;
  background: #ffffff !important;
  border-color: #e2e8f0;
}
.card-item::before {
  background:
    radial-gradient(circle at 50% 0%, oklch(0.96 0.04 250 / 0.95), transparent 43%),
    linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
  background-size: auto, 20px 20px, 20px 20px;
}
.card-big-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: oklch(0.96 0.04 250);
  border: 1px solid rgba(203,213,225,0.72);
  box-shadow: 0 14px 34px rgba(15,23,42,0.08);
}
.card-shine {
  background: var(--brand-gradient);
  opacity: .65;
}
.card-item:hover {
  border-color: oklch(0.55 0.22 258 / 0.35);
  box-shadow: 0 26px 70px -20px oklch(0.55 0.22 258 / 0.38);
}
.trust-pill,
.hero-offer-pill,
.stat-pill {
  border-radius: 24px;
}
.mobile-bottom-nav {
  background: rgba(255,255,255,0.9);
  border-color: rgba(203,213,225,0.78);
  border-radius: 24px;
  box-shadow: 0 22px 70px rgba(15,23,42,0.13);
}
.mobile-bottom-nav::before {
  border-radius: 17px;
}
.mobile-nav-item.is-active {
  color: #0f172a;
  background: oklch(0.96 0.04 250 / 0.72);
}
.floating-whatsapp {
  background: linear-gradient(135deg, oklch(0.72 0.17 165), oklch(0.78 0.16 200));
  box-shadow: 0 0 0 0 oklch(0.72 0.17 165 / 0.42), 0 18px 38px rgba(15,23,42,0.16);
  animation: bubbleFloat 3.6s ease-in-out infinite, mintPulse 2.2s ease-out infinite;
}

@keyframes ctaShine {
  0%, 42% { transform: translateX(-120%) skewX(-20deg); }
  72%, 100% { transform: translateX(220%) skewX(-20deg); }
}
@keyframes ctaWiggle {
  0%, 80%, 100% { transform: rotate(0) scale(1); }
  84% { transform: rotate(-4deg) scale(1.04); }
  88% { transform: rotate(4deg) scale(1.06); }
  92% { transform: rotate(-3deg) scale(1.04); }
  96% { transform: rotate(3deg) scale(1.03); }
}
@keyframes mintPulse {
  0% { box-shadow: 0 0 0 0 oklch(0.72 0.17 165 / 0.42), 0 18px 38px rgba(15,23,42,0.16); }
  70%, 100% { box-shadow: 0 0 0 14px oklch(0.72 0.17 165 / 0), 0 18px 38px rgba(15,23,42,0.16); }
}

@media (max-width: 420px) {
  .hero-topbar,
  .mobile-bottom-nav {
    border-radius: 24px;
  }
  .btn-primary.top-start {
    border-radius: 16px;
  }
  .card-item {
    aspect-ratio: 1 / 1.1 !important;
    border-radius: 22px;
  }
  .card-big-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
}

/* Homepage header refinement */
.hero-topbar {
  width: min(1120px, calc(100% - 32px));
  margin: 14px auto 0;
  padding: 10px 10px 10px 14px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,0.36);
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.92) inset,
    0 12px 34px rgba(15,23,42,0.08);
}
.hero-brand {
  gap: 11px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.12px;
}
.hero-brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.34) inset,
    0 10px 22px rgba(29,78,216,0.18);
}
.hero-brand-mark svg {
  width: 20px;
  height: 20px;
}
.btn-primary.top-start {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.08px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.34) inset,
    0 12px 28px rgba(29,78,216,0.2);
}
.btn-primary.top-start:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.38) inset,
    0 16px 34px rgba(29,78,216,0.24);
}

@media (max-width: 900px) {
  .hero-topbar {
    top: 10px;
    width: calc(100% - 28px);
    margin-top: 10px;
    padding: 8px 8px 8px 12px;
    border-radius: 20px;
  }
  .hero-brand {
    gap: 10px;
    font-size: 15px;
  }
  .hero-brand-mark {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 13px;
  }
  .btn-primary.top-start {
    min-height: 42px;
    padding-inline: 18px;
    border-radius: 13px;
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .hero-brand {
    font-size: 14px;
  }
  .hero-brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
  }
  .btn-primary.top-start {
    min-height: 40px;
    padding-inline: 16px;
  }
}

/* App-like mobile navigation transitions */
.mobile-bottom-nav {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  contain: layout paint;
}
.mobile-bottom-nav::before {
  transform: translate3d(calc((var(--active-index) * (100% + var(--nav-gap))) + var(--nav-drag, 0px)), 0, 0) !important;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .12s ease, width .12s ease;
  will-change: transform;
}
.mobile-bottom-nav.nav-animate::before {
  animation: none !important;
}
.mobile-bottom-nav.nav-dragging::before {
  transition: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.38) inset,
    0 18px 42px -16px oklch(0.55 0.22 258 / 0.58);
}
.mobile-bottom-nav.nav-transitioning {
  pointer-events: none;
}
.mobile-nav-item {
  transition: color .16s ease, transform .18s cubic-bezier(.22,1,.36,1), opacity .16s ease;
}
.mobile-nav-item.is-primary {
  transform: translateY(-1px) scale(1.01);
}
body.nav-leaving .hero {
  pointer-events: none;
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
body.nav-page-enter .hero {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

@keyframes navPageExit {
  to {
    opacity: .18;
    filter: blur(2px);
    transform: translateX(calc(var(--nav-direction, 1) * -18px)) scale(.992);
  }
}
@keyframes navPageEnter {
  from {
    opacity: .25;
    filter: blur(2px);
    transform: translateX(calc(var(--nav-direction, 1) * 18px)) scale(.992);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 900px) {
  html {
    scroll-behavior: auto;
  }

  .hero {
    background-size: 88px 88px, 88px 88px, auto, auto, auto, auto;
  }

  .hero-topbar,
  .mobile-bottom-nav,
  .trust-pill,
  .hero-offer-pill,
  .stat-pill,
  .btn-ghost,
  .card-item {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 12px 28px rgba(15,23,42,0.08) !important;
  }

  .blob,
  .marque-track,
  .card-item,
  .trust-pill,
  .hero-offer-pill,
  .avatar-dot,
  .headline-underline,
  .floating-whatsapp,
  .btn-primary::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hero-buttons .btn-primary,
  .floating-whatsapp {
    animation: none !important;
  }

  .mobile-bottom-nav::before {
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .14s ease !important;
  }

  .card-item:hover {
    transform: none;
  }
}

/* Refined trust proof chip */
.trust-pill {
  gap: 12px !important;
  min-height: 44px;
  padding: 6px 7px 6px 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(203,213,225,0.86) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(247,251,255,0.9)),
    #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 14px 34px rgba(15,23,42,0.08) !important;
}
.avatar-stack {
  padding-left: 0;
}
.avatar-dot {
  width: 26px !important;
  height: 26px !important;
  margin-left: -8px !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.38) inset,
    0 8px 18px rgba(37,99,235,0.2) !important;
  font-size: 9px !important;
  letter-spacing: -.2px;
}
.avatar-dot:first-child {
  margin-left: 0 !important;
}
.avatar-dot:nth-child(2) {
  background: linear-gradient(135deg, #60a5fa, #1d4ed8) !important;
}
.avatar-dot:nth-child(3) {
  background: linear-gradient(135deg, #22d3ee, #2563eb) !important;
}
.trust-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: #0f172a !important;
  font-size: 11px !important;
  line-height: 1.12;
  font-weight: 900 !important;
  white-space: normal !important;
}
.trust-copy strong {
  font-size: 11px;
  line-height: 1.1;
}
.trust-copy small {
  color: #64748b;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 800;
}
.trust-stars {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 999px;
  color: #f59e0b !important;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.18);
  font-size: 9px;
  letter-spacing: .2px !important;
  line-height: 1;
}
.trust-stars b {
  color: #0f172a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

@media (max-width: 520px) {
  .trust-pill {
    gap: 9px !important;
    max-width: min(100%, 340px);
  }
  .trust-stars span {
    display: none;
  }
}

/* Subtle gradient + depth polish */
.hero {
  background:
    radial-gradient(circle at 12% 10%, rgba(56,189,248,0.24), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(37,99,235,0.18), transparent 34%),
    radial-gradient(circle at 50% 88%, rgba(99,102,241,0.12), transparent 42%),
    linear-gradient(180deg, #f9fcff 0%, #eef7ff 48%, #f8fbff 100%) !important;
}
.hero::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.72)),
    radial-gradient(ellipse 60% 70% at 72% 42%, rgba(14,165,233,0.14) 0%, transparent 66%) !important;
}
.hero-topbar,
.trust-pill,
.hero-offer-pill,
.stat-pill,
.card-item,
.btn-ghost {
  position: relative;
  transform-style: preserve-3d;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 18px 42px rgba(8,30,66,0.08),
    0 38px 92px rgba(29,78,216,0.08) !important;
}
.hero-topbar {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(238,247,255,0.86)) !important;
}
.hero-brand-mark,
.btn-primary,
.mobile-bottom-nav::before {
  background: linear-gradient(135deg, #14c8ff 0%, #176ee8 52%, #6d5dfc 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.38) inset,
    0 14px 34px rgba(23,110,232,0.26),
    0 0 34px rgba(20,200,255,0.18) !important;
}
.hero-heading {
  text-shadow: 0 12px 34px rgba(15,23,42,0.08);
}
.hl-cyan {
  background: linear-gradient(90deg, #089ee8, #176ee8 55%, #6d5dfc) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.card-item {
  background:
    radial-gradient(circle at 50% 0%, rgba(56,189,248,0.12), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,248,255,0.92)) !important;
  border-color: rgba(29,78,216,0.13) !important;
}
.card-item::after {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.64), transparent 46%),
    radial-gradient(circle at 50% 100%, rgba(23,110,232,0.09), transparent 48%) !important;
}
.card-big-icon {
  filter: drop-shadow(0 12px 18px rgba(23,110,232,0.18));
  transform: translateZ(18px);
}
.stat-pill::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,0.70), transparent 52%);
}
.stat-pill > * {
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .card-item:hover,
  .stat-pill:hover,
  .trust-pill:hover {
    transform: translateY(-6px) rotateX(1.2deg);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.98) inset,
      0 24px 52px rgba(8,30,66,0.10),
      0 44px 100px rgba(23,110,232,0.13) !important;
  }
}

/* Professional header tuning */
.hero-topbar {
  width: min(1060px, calc(100% - 40px)) !important;
  min-height: 64px;
  margin-top: 18px !important;
  padding: 8px 9px 8px 12px !important;
  border-radius: 22px !important;
  border-color: rgba(148,163,184,0.26) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,250,255,0.92)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 -8px 24px rgba(255,255,255,0.7) inset,
    0 12px 28px rgba(15,23,42,0.06),
    0 24px 54px rgba(29,78,216,0.07) !important;
}
.hero-brand {
  gap: 11px !important;
  font-size: 17px !important;
  letter-spacing: 0 !important;
}
.hero-brand-mark {
  width: 44px !important;
  height: 44px !important;
  flex-basis: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #10c4f7 0%, #176ee8 78%, #4f46e5 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.36) inset,
    0 10px 20px rgba(23,110,232,0.18),
    0 0 0 1px rgba(255,255,255,0.22) inset !important;
}
.hero-brand-copy {
  display: grid;
  gap: 5px;
  line-height: 1;
}
.hero-brand-name {
  color: #0f172a;
}
.hero-brand-tagline {
  color: rgba(71,85,105,0.74);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
.btn-primary.top-start {
  min-height: 46px !important;
  padding: 0 22px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  background: linear-gradient(135deg, #10bdf2 0%, #176ee8 66%, #5b57f4 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.34) inset,
    0 12px 24px rgba(23,110,232,0.22),
    0 0 0 1px rgba(255,255,255,0.14) inset !important;
}
.btn-primary.top-start svg {
  width: 15px;
  height: 15px;
}
.btn-primary.top-start:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.38) inset,
    0 14px 30px rgba(23,110,232,0.24) !important;
}
@media (max-width: 900px) {
  .hero-topbar {
    width: calc(100% - 28px) !important;
    min-height: 60px;
    margin-top: 10px !important;
    padding: 7px 8px 7px 11px !important;
    border-radius: 20px !important;
  }
  .hero-brand {
    font-size: 16px !important;
  }
  .hero-brand-mark {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 13px !important;
  }
  .btn-primary.top-start {
    min-height: 42px !important;
    padding-inline: 19px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }
}

/* Static service proof strip */
.hero-topbar + .announcement-strip {
  width: min(1060px, calc(100% - 40px)) !important;
  margin: 12px auto 0 !important;
  padding: 6px 8px !important;
  overflow: visible !important;
  border: 1px solid rgba(148,163,184,0.20) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(241,248,255,0.76)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 12px 30px rgba(29,78,216,0.07) !important;
}
.announcement-track {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100% !important;
  gap: 0;
  white-space: normal !important;
  animation: none !important;
}
.announcement-item {
  position: relative;
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0f172a !important;
  background: transparent !important;
}
.announcement-item + .announcement-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(148,163,184,0.34), transparent);
}
.announcement-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #176ee8;
  background: linear-gradient(135deg, rgba(224,242,254,0.95), rgba(219,234,254,0.84));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 8px 16px rgba(29,78,216,0.10);
}
.announcement-item:nth-child(2) .announcement-icon {
  color: #7c3aed;
  background: linear-gradient(135deg, rgba(245,243,255,0.96), rgba(237,233,254,0.86));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 8px 16px rgba(124,58,237,0.10);
}
.announcement-item:nth-child(3) .announcement-icon {
  color: #0891b2;
  background: linear-gradient(135deg, rgba(236,254,255,0.96), rgba(219,234,254,0.84));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 8px 16px rgba(8,145,178,0.10);
}
.announcement-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.announcement-copy strong,
.announcement-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.announcement-copy strong {
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0 !important;
}
.announcement-copy small {
  color: rgba(71,85,105,0.76);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0 !important;
}
@media (max-width: 900px) {
  .hero-topbar + .announcement-strip {
    width: calc(100% - 28px) !important;
    margin-top: 11px !important;
    padding: 5px 6px !important;
    border-radius: 16px !important;
  }
  .hero-brand-tagline {
    font-size: 8px;
  }
  .announcement-track {
    gap: 0;
  }
  .announcement-item {
    gap: 7px !important;
    padding: 7px 7px !important;
  }
  .announcement-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 10px;
  }
  .announcement-icon svg {
    width: 16px;
    height: 16px;
  }
  .announcement-copy strong {
    font-size: 9.5px;
    line-height: 1.1;
    white-space: normal;
  }
  .announcement-copy small {
    display: none;
  }
}
@media (max-width: 390px) {
  .announcement-item {
    padding-inline: 5px !important;
  }
  .announcement-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
  .announcement-copy strong {
    font-size: 8.8px;
  }
}

/* Reference-style founder trust bar */
.trust-pill {
  width: min(390px, 100%) !important;
  min-height: 58px !important;
  gap: 12px !important;
  margin-bottom: 30px !important;
  padding: 7px 8px 7px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,0.26) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,252,255,0.86)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 12px 26px rgba(15,23,42,0.07),
    0 22px 54px rgba(23,110,232,0.05) !important;
}
.trust-pill::after {
  display: none !important;
}
.trust-pill .avatar-stack {
  flex: 0 0 auto;
}
.trust-pill .avatar-dot {
  width: 35px !important;
  height: 35px !important;
  margin-left: -9px !important;
  border-width: 2px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.36) inset,
    0 9px 18px rgba(23,110,232,0.18) !important;
}
.trust-pill .avatar-dot:first-child {
  margin-left: 0 !important;
}
.trust-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid !important;
  gap: 3px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}
.trust-copy strong {
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}
.trust-copy small {
  display: block !important;
  color: rgba(71,85,105,0.82) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}
.trust-stars {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px !important;
  flex: 0 0 auto;
  margin-left: 0 !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(148,163,184,0.24) !important;
  border-radius: 999px;
  color: #0f172a !important;
  background: rgba(255,255,255,0.86) !important;
  letter-spacing: 0 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 8px 18px rgba(15,23,42,0.055) !important;
}
.trust-stars span {
  display: none !important;
}
.trust-stars b {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.trust-stars svg {
  width: 17px;
  height: 17px;
  color: #f59e0b;
  fill: currentColor;
  stroke: currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .trust-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.95) inset,
      0 12px 24px rgba(15,23,42,0.065) !important;
  }
}
@media (max-width: 520px) {
  .trust-pill {
    width: min(100%, 390px) !important;
    gap: 10px !important;
    max-width: min(100%, 390px) !important;
    min-height: 56px !important;
    margin-bottom: 28px !important;
    padding: 7px 8px 7px 10px !important;
  }
  .trust-pill .avatar-dot {
    width: 34px !important;
    height: 34px !important;
    margin-left: -9px !important;
    font-size: 11px !important;
  }
  .trust-copy strong {
    font-size: 13px !important;
  }
  .trust-copy small {
    font-size: 10px !important;
  }
  .trust-stars {
    padding: 10px 12px !important;
  }
  .trust-stars b {
    font-size: 14px !important;
  }
  .trust-stars svg {
    width: 16px;
    height: 16px;
  }
}

/* Zero-delay Hero Rendering: Immediate LCP paint & perfect Core Web Vitals */
.hero,
.hero-topbar,
.hero-eyebrow,
.trust-pill,
.hero-heading,
.hero-heading--mobile,
.hero-heading--desktop,
.headline-line,
.hl-cyan::after,
.cards-strip,
.card-item,
.hero-desc,
.hero-desc--mobile,
.hero-desc--desktop,
.hero-offer-pill,
.hero-buttons,
.hero-stats,
.stat-pill,
html.kg-no-entry-motion .hero,
html.kg-no-entry-motion .hero-topbar,
html.kg-no-entry-motion .hero-eyebrow,
html.kg-no-entry-motion .trust-pill,
html.kg-no-entry-motion .hero-heading,
html.kg-no-entry-motion .headline-line,
html.kg-no-entry-motion .hl-cyan::after,
html.kg-no-entry-motion .cards-strip,
html.kg-no-entry-motion .card-item,
html.kg-no-entry-motion .hero-desc,
html.kg-no-entry-motion .hero-offer-pill,
html.kg-no-entry-motion .hero-buttons,
html.kg-no-entry-motion .hero-stats,
html.kg-no-entry-motion .stat-pill {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.hl-cyan::after,
html.kg-no-entry-motion .hl-cyan::after {
  transform: scaleX(1) rotate(-2deg) !important;
  opacity: 1 !important;
}

/* Solid mobile bottom navigation */
.mobile-bottom-nav {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: rgba(203,213,225,0.95) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 16px 36px rgba(15,23,42,0.16) !important;
}

/* Global mobile bottom navigation lock */
.mobile-bottom-nav {
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 80 !important;
  display: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  --nav-gap: 5px !important;
  padding: 7px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 36px rgba(15, 23, 42, 0.16) !important;
  contain: layout paint;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-bottom-nav::before {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  bottom: 7px !important;
  left: 7px !important;
  z-index: 0 !important;
  width: calc((100% - 14px - (var(--nav-gap) * 3)) / 4) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #14c8ff 0%, #176ee8 52%, #6d5dfc 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 14px 34px rgba(23, 110, 232, 0.26),
    0 0 34px rgba(20, 200, 255, 0.18) !important;
  transform: translate3d(calc((var(--active-index) * (100% + var(--nav-gap))) + var(--nav-drag, 0px)), 0, 0) !important;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .12s ease, width .12s ease !important;
  will-change: transform;
}

.mobile-bottom-nav.nav-animate::before {
  animation: none !important;
}

.mobile-nav-item {
  min-width: 0 !important;
  height: 52px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(15, 23, 42, 0.56) !important;
  text-decoration: none !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  transition: color .16s ease, transform .18s cubic-bezier(.22, 1, .36, 1), opacity .16s ease !important;
}

.mobile-nav-item svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-nav-label {
  white-space: nowrap;
}

.mobile-nav-item.is-active {
  color: #0f172a !important;
  background: transparent !important;
}

.mobile-nav-item.is-primary {
  color: #ffffff !important;
  background: transparent !important;
  transform: translateY(-1px) scale(1.01) !important;
}

@media (max-width: 900px) {
  .mobile-bottom-nav {
    display: grid !important;
  }
}

@media (max-width: 380px) {
  .mobile-bottom-nav {
    left: 6px !important;
    right: 6px !important;
    bottom: 7px !important;
    gap: 4px !important;
    --nav-gap: 4px !important;
    padding: 6px !important;
    border-radius: 16px !important;
  }

  .mobile-bottom-nav::before {
    top: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    width: calc((100% - 12px - (var(--nav-gap) * 3)) / 4) !important;
    border-radius: 11px !important;
  }

  .mobile-nav-item {
    height: 50px !important;
    border-radius: 12px !important;
    font-size: 9px !important;
  }

  .mobile-nav-item svg {
    width: 17px !important;
    height: 17px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Premium six-step process timeline */
.process-section {
  position: relative;
  overflow: hidden;
  padding: clamp(66px, 8vw, 118px) clamp(18px, 4vw, 64px) clamp(82px, 9vw, 132px);
  background:
    radial-gradient(circle at 8% 8%, rgba(14, 165, 255, 0.14), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(124, 58, 237, 0.12), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #eef7ff 100%);
  color: #071230;
}

.process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

.process-shell {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  margin: 0 auto;
}

.process-intro {
  width: min(760px, 100%);
  margin: 0 auto clamp(32px, 5vw, 58px);
  text-align: center;
}

.process-eyebrow {
  width: max-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 15px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #2563eb;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.process-eyebrow span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #2585f8;
  box-shadow: 0 0 0 4px rgba(37, 133, 248, 0.08);
}

.process-intro h2 {
  margin: 0;
  color: #071230;
  font-size: clamp(36px, 6.2vw, 68px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.02;
}

.process-intro h2 span {
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(95deg, #0ea5ff 0%, #2563ff 48%, #a43cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.process-intro p,
.why-kartavya-section .why-intro p {
  width: min(650px, 100%);
  margin: 16px auto 0;
  color: rgba(30, 53, 92, 0.78);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 650;
  line-height: 1.45;
}

.process-list {
  position: relative;
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 3vw, 28px);
}

.process-list::before {
  content: "";
  position: absolute;
  left: 37px;
  top: 38px;
  bottom: 38px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(14, 165, 255, 0.32), rgba(124, 58, 237, 0.36), rgba(14, 165, 255, 0.28));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

.process-list::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 38px;
  width: 8px;
  height: 86px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(14, 165, 255, 0.96), rgba(164, 60, 255, 0.88), transparent);
  filter: blur(0.3px);
  box-shadow: 0 0 20px rgba(37, 99, 255, 0.38), 0 0 34px rgba(164, 60, 255, 0.22);
}

.process-section.is-visible .process-list::after {
  animation: processLinePulse 9s cubic-bezier(0.72, 0, 0.28, 1) infinite;
}

.process-step {
  --step-delay: calc(var(--step-index) * 1.5s);
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 26px);
}

.process-number {
  position: relative;
  z-index: 2;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(189, 211, 241, 0.82);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 255, 0.9));
  color: #176ee8;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  font-size: 25px;
  font-weight: 950;
  letter-spacing: 0;
  transform: translateZ(0);
}

.process-card {
  position: relative;
  min-width: 0;
  padding: clamp(18px, 2.8vw, 30px);
  border: 1px solid rgba(190, 214, 244, 0.74);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 4%, rgba(14, 165, 255, 0.065), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(124, 58, 237, 0.06), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.74));
  box-shadow: 0 18px 48px rgba(15, 76, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease, background 260ms ease;
}

.process-card h3 {
  margin: 0;
  color: #071230;
  font-size: clamp(19px, 2.7vw, 28px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
}

.process-card p {
  margin: 10px 0 0;
  color: rgba(30, 53, 92, 0.78);
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 600;
  line-height: 1.48;
}

.process-section.is-visible .process-number {
  animation: processNumberGlow 9s linear infinite;
  animation-delay: var(--step-delay);
}

.process-section.is-visible .process-card {
  animation: processCardFocus 9s linear infinite;
  animation-delay: var(--step-delay);
}

@keyframes processNumberGlow {
  0%, 13% {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.78);
    background: linear-gradient(135deg, #0ea5ff 0%, #2563ff 54%, #8b5cf6 100%);
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.32), 0 0 34px rgba(124, 58, 237, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    transform: scale(1.055);
  }
  19%, 100% {
    color: #176ee8;
    border-color: rgba(189, 211, 241, 0.82);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 255, 0.9));
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.98);
    transform: scale(1);
  }
}

@keyframes processCardFocus {
  0%, 13% {
    border-color: rgba(90, 136, 255, 0.38);
    background:
      radial-gradient(circle at 12% 4%, rgba(14, 165, 255, 0.115), transparent 34%),
      radial-gradient(circle at 92% 0%, rgba(124, 58, 237, 0.095), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.84));
    box-shadow: 0 22px 58px rgba(15, 76, 129, 0.12), 0 0 36px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-2px);
  }
  19%, 100% {
    border-color: rgba(190, 214, 244, 0.74);
    background:
      radial-gradient(circle at 12% 4%, rgba(14, 165, 255, 0.065), transparent 34%),
      radial-gradient(circle at 92% 0%, rgba(124, 58, 237, 0.06), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.74));
    box-shadow: 0 18px 48px rgba(15, 76, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transform: translateY(0);
  }
}

@keyframes processLinePulse {
  0% {
    opacity: 0;
    transform: translateY(0) scaleY(0.7);
  }
  7%, 88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100% - 86px)) scaleY(0.7);
  }
}

@media (max-width: 760px) {
  .process-section {
    padding: 54px 14px 78px;
  }

  .process-intro {
    margin-bottom: 28px;
    text-align: left;
  }

  .process-eyebrow {
    min-height: 25px;
    gap: 8px;
    padding: 0 11px;
    margin-bottom: 11px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .process-eyebrow span {
    width: 8px;
    height: 8px;
  }

  .process-intro h2 {
    font-size: clamp(31px, 9vw, 40px);
    line-height: 1.04;
  }

  .process-intro p,
.why-kartavya-section .why-intro p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.45;
  }

  .process-list {
    gap: 14px;
  }

  .process-list::before {
    left: 24px;
    top: 26px;
    bottom: 26px;
    width: 3px;
  }

  .process-list::after {
    left: 22px;
    top: 26px;
    width: 7px;
    height: 68px;
  }

  .process-step {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
  }

  .process-number {
    width: 49px;
    height: 49px;
    font-size: 17px;
  }

  .process-card {
    padding: 15px 14px;
    border-radius: 18px;
  }

  .process-card h3 {
    font-size: clamp(16px, 4.3vw, 19px);
    line-height: 1.12;
  }

  .process-card p {
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.42;
  }

  @keyframes processLinePulse {
    0% {
      opacity: 0;
      transform: translateY(0) scaleY(0.7);
    }
    7%, 88% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(calc(100% - 68px)) scaleY(0.7);
    }
  }
}

@media (max-width: 370px) {
  .process-section {
    padding-inline: 10px;
  }

  .process-step {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
  }

  .process-number {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }

  .process-list::before {
    left: 22px;
  }

  .process-list::after {
    left: 20px;
  }

  .process-card {
    padding: 13px 12px;
  }

  .process-card p {
    font-size: 12px;
  }
}

/* Keep timeline pulse travelling cleanly from 01 to 06 */
.process-list {
  --pulse-start: 38px;
  --pulse-end: calc(100% - 124px);
  --pulse-height: 86px;
}

.process-list::after {
  top: var(--pulse-start);
  height: var(--pulse-height);
  transform: scaleY(0.72);
  transform-origin: center;
}

@keyframes processLinePulse {
  0% {
    opacity: 0;
    top: var(--pulse-start);
    transform: scaleY(0.72);
  }
  8%, 86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: var(--pulse-end);
    transform: scaleY(0.72);
  }
}

@media (max-width: 760px) {
  .process-list {
    --pulse-start: 26px;
    --pulse-end: calc(100% - 94px);
    --pulse-height: 68px;
  }
}

/* Clean service marquee list */
.marque-wrap {
  padding: 0 !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(203, 213, 225, 0.72) !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.52) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.marque-track {
  width: max-content !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  white-space: nowrap !important;
  animation: marqueList 26s linear infinite !important;
  will-change: transform;
}

.marque-list {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.marque-list li {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(18px, 3vw, 32px);
  color: rgba(51, 65, 85, 0.72);
  font-size: clamp(11px, 1.35vw, 13px);
  font-weight: 850;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.marque-list li::after {
  content: "◆";
  position: absolute;
  right: -4px;
  color: #2563eb;
  font-size: 8px;
  opacity: 0.58;
}

@keyframes marqueList {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 680px) {
  .marque-wrap {
    min-height: 46px !important;
  }

  .marque-list li {
    padding: 0 18px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marque-track {
    animation: none !important;
  }
}

/* Premium Why Kartavya comparison section */
.why-kartavya-section {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 118px) clamp(14px, 4vw, 64px) clamp(80px, 9vw, 130px);
  background:
    radial-gradient(circle at 10% 12%, rgba(14, 165, 255, 0.16), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(124, 58, 237, 0.12), transparent 31%),
    radial-gradient(circle at 50% 92%, rgba(34, 211, 238, 0.11), transparent 33%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 46%, #eef7ff 100%);
  color: #071230;
}

.why-kartavya-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.052) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 86%, transparent);
}

.why-kartavya-section::after {
  content: "";
  position: absolute;
  inset: 10% -12% auto auto;
  width: min(460px, 70vw);
  height: min(460px, 70vw);
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.13), transparent 68%);
  filter: blur(2px);
}

.why-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.why-intro {
  width: min(850px, 100%);
  margin: 0 auto clamp(30px, 5vw, 56px);
  text-align: center;
}

.why-eyebrow {
  width: max-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 15px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #2563eb;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.why-eyebrow span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5ff, #7c3aed);
  box-shadow: 0 0 0 4px rgba(37, 133, 248, 0.08);
}

.why-intro h2 {
  margin: 0;
  color: #071230;
  font-size: clamp(36px, 6vw, 66px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.02;
}

.why-intro h2 span {
  display: inline-block;
  background: linear-gradient(95deg, #0ea5ff 0%, #2563ff 48%, #a43cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.why-intro p {
  width: min(720px, 100%);
  margin: 16px auto 0;
  color: rgba(30, 53, 92, 0.78);
}

.comparison-wrap {
  position: relative;
  width: min(980px, 100%);
  margin: 0 auto;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 28px);
}

.comparison-card {
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(190, 214, 244, 0.76);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(14, 165, 255, 0.075), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(124, 58, 237, 0.065), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 255, 0.76));
  box-shadow: 0 18px 46px rgba(15, 76, 129, 0.085), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  opacity: 0;
  transform: translateY(18px);
}

.why-kartavya-section.is-visible .comparison-card {
  animation: whyFadeUp 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.why-kartavya-section.is-visible .comparison-card.kartavya {
  animation-delay: 120ms;
}

.comparison-label {
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(16px, 2.6vw, 24px);
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.comparison-label::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
}

.comparison-card.typical .comparison-label {
  background: rgba(226, 232, 240, 0.66);
  color: #536179;
}

.comparison-card.typical .comparison-label::before {
  border: 2px solid #94a3b8;
}

.comparison-card.kartavya .comparison-label {
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5ff, #2563eb 56%, #9b2cff);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.comparison-card.kartavya .comparison-label::before {
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}

.comparison-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(203, 218, 240, 0.58);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.56);
  color: #071230;
  font-size: clamp(14px, 1.55vw, 16px);
  font-weight: 780;
  line-height: 1.2;
}

.compare-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.compare-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.compare-icon.bad {
  color: #64748b;
  background: linear-gradient(145deg, rgba(226, 232, 240, 0.96), rgba(203, 213, 225, 0.72));
}

.compare-icon.good {
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5ff, #2563eb 62%, #7c3aed);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.vs-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: clamp(58px, 7vw, 74px);
  height: clamp(58px, 7vw, 74px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(190, 214, 244, 0.9);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 255, 0.9));
  color: #176ee8;
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 1);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 950;
  transform: translate(-50%, -50%);
}

.why-kartavya-section.is-visible .vs-circle {
  animation: vsGlow 3.2s ease-in-out infinite;
}

.impact-panel {
  position: relative;
  overflow: hidden;
  width: min(980px, 100%);
  margin: clamp(34px, 5vw, 64px) auto 0;
  padding: clamp(26px, 5vw, 58px) clamp(16px, 4vw, 40px) clamp(24px, 4vw, 38px);
  border: 1px solid rgba(190, 214, 244, 0.7);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 22%, rgba(14, 165, 255, 0.105), transparent 34%),
    radial-gradient(circle at 84% 26%, rgba(124, 58, 237, 0.09), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(248, 252, 255, 0.7));
  box-shadow: 0 22px 58px rgba(15, 76, 129, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  text-align: center;
}

.impact-graph {
  position: absolute;
  left: 50%;
  bottom: 31%;
  width: min(880px, 112%);
  height: auto;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0.86;
}

.impact-graph-soft,
.impact-graph-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact-graph-soft {
  stroke: rgba(124, 58, 237, 0.18);
  stroke-width: 18;
  filter: blur(3px);
}

.impact-graph-line {
  stroke: url(#whyGraphGradient);
  stroke-width: 7;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 10px 18px rgba(37, 99, 235, 0.18));
}

.why-kartavya-section.is-visible .impact-graph-line {
  animation: graphDraw 1.8s 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.impact-graph-dot {
  fill: #ffffff;
  stroke: #2563eb;
  stroke-width: 7;
  filter: drop-shadow(0 8px 16px rgba(37, 99, 235, 0.18));
  opacity: 0;
}

.why-kartavya-section.is-visible .impact-graph-dot {
  animation: dotPop 420ms ease forwards;
}

.why-kartavya-section.is-visible .impact-graph-dot:nth-of-type(1) { animation-delay: 620ms; }
.why-kartavya-section.is-visible .impact-graph-dot:nth-of-type(2) { animation-delay: 840ms; }
.why-kartavya-section.is-visible .impact-graph-dot:nth-of-type(3) { animation-delay: 1060ms; }
.why-kartavya-section.is-visible .impact-graph-dot:nth-of-type(4) { animation-delay: 1280ms; }

.impact-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #2563eb;
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.impact-up {
  position: relative;
  z-index: 1;
  width: max-content;
  margin: 0 auto 2px;
  padding: 7px 14px;
  border: 1px solid rgba(190, 214, 244, 0.84);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(30, 53, 92, 0.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.impact-number {
  position: relative;
  z-index: 1;
  margin: 0;
  background: linear-gradient(105deg, #0ea5ff 0%, #2563ff 44%, #9b2cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: clamp(86px, 17vw, 188px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.86;
  text-shadow: 0 18px 50px rgba(37, 99, 235, 0.12);
}

.why-kartavya-section.is-visible .impact-number {
  animation: impactGlow 3.4s ease-in-out infinite;
}

.impact-label {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  color: #071230;
  font-size: clamp(24px, 4.4vw, 42px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.impact-features {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: clamp(24px, 4vw, 38px) 0 0;
  padding: 0;
  list-style: none;
}

.impact-pill {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid rgba(190, 214, 244, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #071230;
  box-shadow: 0 10px 24px rgba(15, 76, 129, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.impact-pill svg {
  width: 18px;
  height: 18px;
  color: #1777ee;
  stroke-width: 2.4;
}

.why-cta {
  width: min(780px, 100%);
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: clamp(26px, 4vw, 42px) auto 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #0ea5ff 0%, #2563ff 48%, #a43cff 100%);
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.24), 0 0 34px rgba(164, 60, 255, 0.12);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.why-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(37, 99, 235, 0.28), 0 0 38px rgba(164, 60, 255, 0.16);
}

@keyframes whyFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vsGlow {
  0%, 100% {
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 1);
  }
  50% {
    box-shadow: 0 22px 54px rgba(37, 99, 235, 0.26), 0 0 30px rgba(124, 58, 237, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1);
  }
}

@keyframes graphDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dotPop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes impactGlow {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
  }
  50% {
    filter: drop-shadow(0 12px 28px rgba(37, 99, 235, 0.14));
  }
}

@media (max-width: 760px) {
  .why-kartavya-section {
    padding: 54px 14px 84px;
  }

  .why-intro {
    margin-bottom: 26px;
    text-align: left;
  }

  .why-eyebrow {
    min-height: 25px;
    gap: 8px;
    padding: 0 11px;
    margin-bottom: 11px;
    font-size: 9px;
    letter-spacing: 0.13em;
  }

  .why-eyebrow span {
    width: 8px;
    height: 8px;
  }

  .why-intro h2 {
    font-size: clamp(31px, 8.8vw, 41px);
    line-height: 1.04;
  }

  .why-intro p {
    margin-top: 12px;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .comparison-card {
    padding: 15px;
    border-radius: 21px;
  }

  .comparison-label {
    min-height: 30px;
    margin-bottom: 13px;
    padding: 0 12px;
    font-size: 10.5px;
  }

  .comparison-list {
    gap: 9px;
  }

  .compare-row {
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 14px;
    font-size: 13px;
  }

  .compare-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .compare-icon svg {
    width: 14px;
    height: 14px;
  }

  .vs-circle {
    position: relative;
    left: auto;
    top: auto;
    width: 54px;
    height: 54px;
    margin: 0 auto;
    font-size: 17px;
    transform: none;
  }

  .impact-panel {
    margin-top: 30px;
    padding: 24px 12px 18px;
    border-radius: 24px;
  }

  .impact-graph {
    bottom: 42%;
    width: 114%;
  }

  .impact-kicker {
    font-size: 11px;
  }

  .impact-up {
    padding: 6px 12px;
    font-size: 10.5px;
  }

  .impact-number {
    font-size: clamp(84px, 27vw, 128px);
  }

  .impact-label {
    font-size: clamp(22px, 6.2vw, 30px);
  }

  .impact-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 22px;
  }

  .impact-pill {
    min-height: 43px;
    justify-content: center;
    font-size: 13px;
  }

  .why-cta {
    min-height: 54px;
    margin-top: 22px;
    font-size: 15px;
  }
}

@media (max-width: 370px) {
  .why-kartavya-section {
    padding-inline: 10px;
  }

  .why-intro h2 {
    font-size: 29px;
  }

  .compare-row {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-kartavya-section .comparison-card,
  .why-kartavya-section .vs-circle,
  .why-kartavya-section .impact-graph-line,
  .why-kartavya-section .impact-graph-dot,
  .why-kartavya-section .impact-number {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Picture-perfect Why Kartavya refinement */
.why-kartavya-section {
  padding: clamp(24px, 3.5vw, 42px) clamp(14px, 3vw, 26px) clamp(42px, 5vw, 70px) !important;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 48%, #eef7ff 100%) !important;
}

.why-kartavya-section::before,
.why-kartavya-section::after {
  content: none !important;
}

.why-shell {
  width: min(1180px, 100%) !important;
  padding: clamp(44px, 6vw, 78px) clamp(18px, 4vw, 42px) clamp(34px, 5vw, 54px) !important;
  border: 1px solid rgba(178, 205, 239, 0.84) !important;
  border-radius: clamp(38px, 7vw, 92px) !important;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(137, 111, 255, 0.14), transparent 24%),
    radial-gradient(circle at 92% 5%, rgba(14, 165, 255, 0.12), transparent 32%),
    radial-gradient(circle at 4% 76%, rgba(37, 133, 248, 0.105), transparent 22%),
    linear-gradient(180deg, rgba(248, 252, 255, 0.94), rgba(255, 255, 255, 0.88) 52%, rgba(238, 247, 255, 0.9)) !important;
  box-shadow: 0 28px 80px rgba(15, 76, 129, 0.095), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  overflow: hidden !important;
}

.why-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 92%, transparent);
}

.why-shell::after {
  content: "";
  position: absolute;
  left: -12%;
  top: -10%;
  width: min(360px, 64vw);
  height: min(210px, 42vw);
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(127, 101, 255, 0.18), rgba(14, 165, 255, 0.04));
  transform: rotate(-22deg);
  filter: blur(1px);
}

.why-intro {
  position: relative;
  z-index: 1;
  width: min(920px, 100%) !important;
  margin-bottom: clamp(30px, 4vw, 46px) !important;
}

.why-eyebrow {
  min-height: 38px !important;
  padding: 0 22px !important;
  margin-bottom: 28px !important;
  border-color: rgba(197, 219, 245, 0.72) !important;
  background: rgba(232, 247, 255, 0.7) !important;
  color: #235ed7 !important;
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.why-eyebrow span {
  width: 12px !important;
  height: 12px !important;
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.34), 0 0 0 5px rgba(14, 165, 255, 0.12) !important;
}

.why-intro h2 {
  width: min(900px, 100%) !important;
  margin-inline: auto !important;
  font-size: clamp(46px, 6.2vw, 82px) !important;
  line-height: 0.98 !important;
}

.why-intro p {
  width: min(720px, 100%) !important;
  margin-top: 24px !important;
  color: rgba(45, 65, 101, 0.76) !important;
}

.comparison-wrap {
  width: min(1080px, 100%) !important;
}

.comparison-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 13%;
  bottom: 14%;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(14, 165, 255, 0), rgba(14, 165, 255, 0.88), rgba(124, 58, 237, 0.82), rgba(14, 165, 255, 0));
  box-shadow: 0 0 26px rgba(37, 99, 235, 0.34), 0 0 34px rgba(124, 58, 237, 0.18);
  transform: translateX(-50%);
  z-index: 2;
}

.comparison-grid {
  gap: clamp(34px, 5.4vw, 58px) !important;
}

.comparison-card {
  min-height: clamp(420px, 42vw, 500px) !important;
  padding: clamp(26px, 3.2vw, 36px) clamp(22px, 3vw, 34px) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.86), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(248, 252, 255, 0.52)) !important;
  box-shadow: 0 26px 68px rgba(15, 76, 129, 0.085), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

.comparison-card.typical {
  border-color: rgba(216, 226, 240, 0.72) !important;
}

.comparison-card.kartavya {
  border-color: rgba(83, 179, 255, 0.74) !important;
  box-shadow: 0 28px 76px rgba(37, 99, 235, 0.12), 0 0 0 1px rgba(124, 58, 237, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

.comparison-label {
  min-height: 56px !important;
  margin: 0 auto clamp(24px, 3vw, 34px) !important;
  padding: 0 clamp(22px, 3vw, 36px) !important;
  border-radius: 999px !important;
  font-size: clamp(12px, 1.35vw, 16px) !important;
  letter-spacing: 0.12em !important;
  justify-content: center !important;
}

.comparison-card.kartavya .comparison-label {
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24), 0 0 26px rgba(164, 60, 255, 0.12) !important;
}

.comparison-list {
  gap: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.compare-row {
  min-height: 70px !important;
  padding: 0 clamp(18px, 2.4vw, 30px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(202, 216, 235, 0.45) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.34) !important;
  color: rgba(17, 32, 60, 0.9) !important;
  font-size: clamp(17px, 1.75vw, 22px) !important;
  font-weight: 560 !important;
}

.compare-row:last-child {
  border-bottom: 0 !important;
}

.comparison-card.kartavya .compare-row:last-child {
  font-weight: 850 !important;
  color: #2563eb !important;
}

.compare-icon {
  width: 44px !important;
  height: 44px !important;
  flex-basis: 44px !important;
}

.compare-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 3.2 !important;
}

.compare-icon.bad {
  color: #ffffff !important;
  background: linear-gradient(145deg, #aab3c2, #7b879a) !important;
  box-shadow: 0 10px 22px rgba(71, 85, 105, 0.14) !important;
}

.compare-icon.good {
  background: linear-gradient(135deg, #16bdf4, #1677f2 62%, #4f46e5) !important;
  box-shadow: 0 12px 25px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.vs-circle {
  width: clamp(70px, 7.3vw, 92px) !important;
  height: clamp(70px, 7.3vw, 92px) !important;
  border-color: rgba(73, 172, 255, 0.78) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 1), rgba(247, 252, 255, 0.92) 64%, rgba(235, 246, 255, 0.9)) !important;
  color: #1777ee !important;
  font-size: clamp(25px, 3vw, 36px) !important;
  box-shadow: 0 20px 52px rgba(37, 99, 235, 0.22), 0 0 28px rgba(124, 58, 237, 0.13), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.impact-panel {
  width: min(900px, 100%) !important;
  margin-top: clamp(34px, 5vw, 58px) !important;
  padding: 0 clamp(8px, 2vw, 18px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.impact-graph {
  z-index: 0 !important;
  bottom: 34% !important;
  width: min(720px, 106%) !important;
  opacity: 0.92 !important;
}

.impact-graph-soft {
  stroke-width: 20 !important;
  stroke: rgba(124, 58, 237, 0.13) !important;
}

.impact-graph-line {
  stroke-width: 6 !important;
  stroke-dasharray: 620 !important;
  stroke-dashoffset: 620 !important;
}

.why-kartavya-section.is-visible .impact-graph-line {
  animation: graphTravel 3.8s cubic-bezier(0.5, 0, 0.2, 1) infinite !important;
}

.impact-graph-dot {
  opacity: 1 !important;
  stroke-width: 5 !important;
  animation: graphDotGlow 3.8s ease-in-out infinite !important;
}

.impact-graph-arrow {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.why-kartavya-section.is-visible .impact-graph-arrow {
  animation: arrowPulse 3.8s ease-in-out infinite !important;
}

.impact-kicker {
  width: max-content !important;
  margin: 0 auto 22px !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(190, 214, 244, 0.76) !important;
  border-radius: 999px !important;
  background: rgba(236, 248, 255, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  color: #2563eb !important;
  font-size: clamp(12px, 1.45vw, 16px) !important;
  letter-spacing: 0.18em !important;
}

.impact-up {
  margin-bottom: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #071230 !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  letter-spacing: 0 !important;
}

.impact-number {
  z-index: 1 !important;
  font-size: clamp(132px, 16vw, 220px) !important;
  line-height: 0.78 !important;
}

.impact-label {
  z-index: 2 !important;
  margin-top: 12px !important;
  font-size: clamp(32px, 4.2vw, 52px) !important;
}

.impact-copy {
  position: relative;
  z-index: 2;
  width: min(610px, 100%);
  margin: 18px auto 0;
  color: rgba(45, 65, 101, 0.76);
  font-size: clamp(15px, 1.75vw, 19px);
  font-weight: 570;
  line-height: 1.42;
}

.impact-features {
  margin-top: clamp(30px, 4.5vw, 50px) !important;
  gap: clamp(18px, 3vw, 34px) !important;
}

.impact-features .feature-plus {
  align-self: center;
  color: rgba(30, 53, 92, 0.62);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1;
}

.impact-pill {
  min-width: clamp(220px, 22vw, 300px) !important;
  min-height: 86px !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(248, 252, 255, 0.58)) !important;
  font-size: clamp(16px, 1.65vw, 20px) !important;
  font-weight: 720 !important;
  text-align: left !important;
}

.impact-pill svg {
  width: 33px !important;
  height: 33px !important;
  flex: 0 0 33px !important;
  stroke-width: 2.5 !important;
}

.impact-pill:nth-child(1) svg,
.impact-pill:nth-child(5) svg {
  color: #2563eb !important;
}

.why-cta {
  width: min(720px, 100%) !important;
  min-height: 76px !important;
  margin-top: clamp(28px, 4.5vw, 48px) !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 720 !important;
  box-shadow: 0 24px 52px rgba(37, 99, 235, 0.24), 0 0 36px rgba(164, 60, 255, 0.16) !important;
}

.why-cta-subtext {
  position: relative;
  z-index: 1;
  margin: 22px 0 0;
  color: rgba(45, 65, 101, 0.72);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 570;
  text-align: center;
}

.why-trust-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 34px);
  width: min(850px, 100%);
  margin: clamp(42px, 6vw, 70px) auto 0;
  padding-top: clamp(8px, 2vw, 16px);
  color: rgba(45, 65, 101, 0.76);
}

.why-trust-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 clamp(8px, 2vw, 22px);
  border-right: 1px solid rgba(151, 171, 207, 0.36);
  font-size: clamp(13px, 1.45vw, 18px);
  font-weight: 560;
  line-height: 1.18;
}

.why-trust-item:last-child {
  border-right: 0;
}

.why-trust-item svg {
  width: clamp(34px, 4vw, 48px);
  height: clamp(34px, 4vw, 48px);
  flex: 0 0 auto;
  color: rgba(71, 85, 105, 0.76);
  stroke-width: 2;
}

@keyframes graphTravel {
  0% {
    stroke-dashoffset: 620;
    opacity: 0;
  }
  12%, 72% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -620;
    opacity: 0;
  }
}

@keyframes graphDotGlow {
  0%, 100% {
    filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.12));
  }
  50% {
    filter: drop-shadow(0 8px 18px rgba(124, 58, 237, 0.22));
  }
}

@keyframes arrowPulse {
  0%, 62% {
    opacity: 0;
    transform: translate(-5px, 5px) scale(0.85);
  }
  78%, 92% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(4px, -4px) scale(1.06);
  }
}

@media (max-width: 860px) {
  .why-shell {
    border-radius: 38px !important;
    padding: 34px 14px 34px !important;
  }

  .why-intro {
    text-align: center !important;
    margin-bottom: 26px !important;
  }

  .why-eyebrow {
    min-height: 30px !important;
    margin-bottom: 18px !important;
    padding: 0 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.17em !important;
  }

  .why-eyebrow span {
    width: 10px !important;
    height: 10px !important;
  }

  .why-intro h2 {
    font-size: clamp(36px, 10.2vw, 54px) !important;
    line-height: 1.02 !important;
  }

  .why-intro p {
    margin-top: 16px !important;
  }

  .comparison-wrap::before {
    top: 47.5%;
    bottom: auto;
    width: 70%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(14, 165, 255, 0), rgba(14, 165, 255, 0.76), rgba(124, 58, 237, 0.74), rgba(14, 165, 255, 0));
  }

  .comparison-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .comparison-card {
    min-height: 0 !important;
    padding: 18px 14px !important;
    border-radius: 25px !important;
  }

  .comparison-label {
    min-height: 38px !important;
    margin-bottom: 14px !important;
    padding: 0 18px !important;
    font-size: 11px !important;
  }

  .compare-row {
    min-height: 54px !important;
    padding: 0 13px !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }

  .compare-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .compare-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .vs-circle {
    width: 58px !important;
    height: 58px !important;
    font-size: 20px !important;
  }

  .impact-panel {
    margin-top: 30px !important;
    padding-inline: 0 !important;
  }

  .impact-kicker {
    margin-bottom: 15px !important;
    padding: 9px 14px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
  }

  .impact-up {
    font-size: 24px !important;
  }

  .impact-number {
    font-size: clamp(104px, 30vw, 140px) !important;
  }

  .impact-label {
    margin-top: 8px !important;
    font-size: clamp(28px, 7.7vw, 36px) !important;
  }

  .impact-graph {
    bottom: 39% !important;
    width: 116% !important;
  }

  .impact-copy {
    margin-top: 14px;
    font-size: 14px;
  }

  .impact-features {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin-top: 28px !important;
  }

  .impact-features .feature-plus {
    flex: 0 0 auto;
    font-size: 22px;
  }

  .impact-pill {
    min-width: 0 !important;
    width: 31% !important;
    min-height: 62px !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px 5px !important;
    font-size: clamp(10.5px, 2.9vw, 12px) !important;
    line-height: 1.14 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .impact-pill svg {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }

  .why-cta {
    min-height: 60px !important;
    font-size: clamp(16px, 4.5vw, 19px) !important;
  }

  .why-cta-subtext {
    margin-top: 16px;
    font-size: 13px;
  }

  .why-trust-row {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 36px;
    width: min(360px, 100%);
  }

  .why-trust-item {
    justify-content: flex-start;
    border-right: 0;
    padding: 0;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .why-kartavya-section {
    padding-inline: 10px !important;
  }

  .why-shell {
    padding-inline: 10px !important;
  }

  .why-intro h2 {
    font-size: clamp(32px, 10vw, 39px) !important;
  }

  .why-intro p {
  }

  .compare-row {
    font-size: 13px !important;
  }

  .impact-features {
    gap: 5px !important;
  }

  .impact-features .feature-plus {
    font-size: 18px;
  }

  .impact-pill {
    min-height: 58px !important;
    font-size: 10.2px !important;
    border-radius: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-kartavya-section.is-visible .impact-graph-line,
  .why-kartavya-section.is-visible .impact-graph-arrow,
  .why-kartavya-section .impact-graph-dot,
  .why-kartavya-section.is-visible .impact-number,
  .why-kartavya-section.is-visible .vs-circle {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
}

/* Compact reference-matched Why Kartavya layout */
@media (max-width: 860px) {
  .why-kartavya-section {
    padding: 18px 9px 44px !important;
  }

  .why-shell {
    padding: 24px 10px 28px !important;
    border-radius: 30px !important;
  }

  .why-intro {
    margin-bottom: 20px !important;
  }

  .why-eyebrow {
    min-height: 28px !important;
    margin-bottom: 16px !important;
  }

  .why-intro h2 {
    font-size: clamp(31px, 9.4vw, 45px) !important;
  }

  .why-intro p {
    width: min(340px, 100%) !important;
    margin-top: 12px !important;
  }

  .comparison-wrap {
    width: 100% !important;
  }

  .comparison-wrap::before {
    top: 10px !important;
    bottom: 10px !important;
    width: 2px !important;
    height: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(180deg, rgba(14, 165, 255, 0), rgba(14, 165, 255, 0.82), rgba(124, 58, 237, 0.78), rgba(14, 165, 255, 0)) !important;
  }

  .comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .comparison-card {
    min-height: 210px !important;
    padding: 11px 8px 10px !important;
    border-radius: 11px !important;
    box-shadow: 0 16px 42px rgba(15, 76, 129, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  }

  .comparison-card.kartavya {
    box-shadow: 0 18px 50px rgba(37, 99, 235, 0.14), 0 0 0 1px rgba(124, 58, 237, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  }

  .comparison-label {
    min-height: 24px !important;
    margin-bottom: 10px !important;
    padding: 0 12px !important;
    font-size: 7.6px !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
  }

  .comparison-label::before {
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .comparison-list {
    border-radius: 12px !important;
  }

  .compare-row {
    min-height: 31px !important;
    gap: 8px !important;
    padding: 0 7px !important;
    font-size: clamp(7.8px, 2.18vw, 9.2px) !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  .compare-icon {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  .compare-icon svg {
    width: 9px !important;
    height: 9px !important;
    stroke-width: 3.4 !important;
  }

  .vs-circle {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    font-size: 18px !important;
    transform: translate(-50%, -50%) !important;
  }

  .impact-panel {
    width: min(360px, 100%) !important;
    margin-top: 18px !important;
  }

  .impact-kicker {
    margin-bottom: 8px !important;
    padding: 7px 11px !important;
    font-size: 8.8px !important;
    letter-spacing: 0.14em !important;
  }

  .impact-up {
    margin-bottom: 2px !important;
    font-size: 19px !important;
  }

  .impact-number {
    font-size: clamp(94px, 31vw, 130px) !important;
    line-height: 0.76 !important;
  }

  .impact-label {
    margin-top: 6px !important;
    font-size: clamp(24px, 7vw, 31px) !important;
  }

  .impact-copy {
    width: min(292px, 100%) !important;
    margin-top: 9px !important;
    font-size: 10.8px !important;
    line-height: 1.32 !important;
  }

  .impact-graph {
    bottom: 44% !important;
    width: 112% !important;
    opacity: 0.84 !important;
  }

  .impact-graph-soft {
    stroke-width: 16 !important;
  }

  .impact-graph-line {
    stroke-width: 5 !important;
  }

  .impact-features {
    margin-top: 26px !important;
    gap: 7px !important;
  }

  .impact-features .feature-plus {
    font-size: 21px !important;
  }

  .impact-pill {
    min-height: 47px !important;
    border-radius: 999px !important;
    padding: 5px 6px !important;
    font-size: clamp(8.8px, 2.38vw, 10px) !important;
    line-height: 1.12 !important;
  }

  .impact-pill svg {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  .why-cta {
    width: min(320px, 100%) !important;
    min-height: 54px !important;
    margin-top: 24px !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }

  .why-cta-subtext {
    margin-top: 14px !important;
    font-size: 12px !important;
  }

  .why-trust-row {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .comparison-grid {
    gap: 14px !important;
  }

  .comparison-card {
    min-height: 202px !important;
    padding-inline: 7px !important;
  }

  .comparison-label {
    padding-inline: 8px !important;
    font-size: 6.9px !important;
  }

  .compare-row {
    gap: 5px !important;
    padding-inline: 5px !important;
    font-size: 7.15px !important;
  }

  .compare-icon {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
  }

  .vs-circle {
    width: 44px !important;
    height: 44px !important;
    font-size: 17px !important;
  }
}

/* Professional impact block polish */
.why-kartavya-section .impact-panel {
  width: min(820px, 100%) !important;
  margin-top: clamp(30px, 4.4vw, 50px) !important;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 3.2vw, 34px) clamp(28px, 4vw, 38px) !important;
  border: 1px solid rgba(188, 212, 242, 0.72) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(14, 165, 255, 0.105), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(124, 58, 237, 0.09), transparent 36%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.86), rgba(247, 252, 255, 0.68)) !important;
  box-shadow: 0 22px 58px rgba(15, 76, 129, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  overflow: hidden !important;
  isolation: isolate;
}

.why-kartavya-section .impact-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.032) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 42%, #000 0 38%, transparent 72%);
}

.why-kartavya-section .impact-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 32%;
  z-index: 0;
  width: min(430px, 92%);
  height: 145px;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.22) 58%, transparent 72%);
  transform: translate(-50%, -50%);
}

.why-kartavya-section .impact-kicker,
.why-kartavya-section .impact-up,
.why-kartavya-section .impact-number,
.why-kartavya-section .impact-label,
.why-kartavya-section .impact-copy,
.why-kartavya-section .impact-features {
  position: relative;
  z-index: 2 !important;
}

.why-kartavya-section .impact-kicker {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  padding: 0 17px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #1d6ff2 !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.075), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.why-kartavya-section .impact-up {
  margin-bottom: 0 !important;
  color: #071230 !important;
  font-size: clamp(22px, 2.65vw, 31px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.why-kartavya-section .impact-number {
  margin-top: 2px !important;
  font-size: clamp(118px, 15vw, 188px) !important;
  line-height: 0.78 !important;
  filter: drop-shadow(0 16px 30px rgba(37, 99, 235, 0.1));
}

.why-kartavya-section .impact-label {
  margin-top: 8px !important;
  font-size: clamp(28px, 3.8vw, 44px) !important;
  line-height: 1 !important;
}

.why-kartavya-section .impact-copy {
  width: min(540px, 100%) !important;
  margin-top: 13px !important;
  color: rgba(45, 65, 101, 0.72) !important;
  font-size: clamp(14px, 1.45vw, 17px) !important;
  line-height: 1.44 !important;
}

.why-kartavya-section .impact-graph {
  z-index: 1 !important;
  left: 50% !important;
  bottom: auto !important;
  top: 43% !important;
  width: min(650px, 112%) !important;
  opacity: 0.62 !important;
  transform: translate(-50%, -50%) !important;
  mix-blend-mode: multiply;
}

.why-kartavya-section .impact-graph-soft {
  stroke-width: 16 !important;
  stroke: rgba(124, 58, 237, 0.095) !important;
  filter: blur(5px) !important;
}

.why-kartavya-section .impact-graph-line {
  stroke-width: 5 !important;
  stroke-dasharray: 560 !important;
  stroke-dashoffset: 560 !important;
  filter: drop-shadow(0 8px 16px rgba(37, 99, 235, 0.12)) !important;
}

.why-kartavya-section.is-visible .impact-graph-line {
  animation: graphTravelClean 4.6s cubic-bezier(0.45, 0, 0.22, 1) infinite !important;
}

.why-kartavya-section .impact-graph-dot {
  opacity: 0.72 !important;
  stroke-width: 5 !important;
  filter: drop-shadow(0 6px 12px rgba(37, 99, 235, 0.12)) !important;
}

.why-kartavya-section .impact-graph-arrow {
  opacity: 0.9 !important;
  stroke-width: 7 !important;
}

.why-kartavya-section .impact-features {
  width: min(670px, 100%) !important;
  margin: clamp(25px, 3.6vw, 38px) auto 0 !important;
  gap: clamp(10px, 2vw, 22px) !important;
  align-items: center !important;
}

.why-kartavya-section .impact-features .feature-plus {
  color: rgba(45, 65, 101, 0.56) !important;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  font-weight: 700 !important;
}

.why-kartavya-section .impact-pill {
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 0 20px !important;
  border-color: rgba(188, 212, 242, 0.78) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 14px 30px rgba(15, 76, 129, 0.07), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  font-weight: 820 !important;
}

.why-kartavya-section .impact-pill svg {
  width: 24px !important;
  height: 24px !important;
  flex-basis: 24px !important;
}

.why-kartavya-section .why-cta {
  width: min(640px, 100%) !important;
  min-height: 68px !important;
  margin-top: clamp(28px, 4vw, 40px) !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 840 !important;
  letter-spacing: 0 !important;
}

.why-kartavya-section .why-cta-subtext {
  margin-top: 18px !important;
  color: rgba(45, 65, 101, 0.7) !important;
  font-weight: 640 !important;
}

@keyframes graphTravelClean {
  0% {
    stroke-dashoffset: 560;
    opacity: 0;
  }
  14%, 76% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -560;
    opacity: 0;
  }
}

@media (max-width: 860px) {
  .why-kartavya-section .impact-panel {
    width: min(410px, 100%) !important;
    margin-top: 20px !important;
    padding: 18px 10px 22px !important;
    border-radius: 24px !important;
  }

  .why-kartavya-section .impact-panel::after {
    top: 31% !important;
    height: 112px !important;
  }

  .why-kartavya-section .impact-kicker {
    min-height: 30px !important;
    margin-bottom: 10px !important;
    padding: 0 13px !important;
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }

  .why-kartavya-section .impact-up {
    font-size: 18px !important;
  }

  .why-kartavya-section .impact-number {
    font-size: clamp(86px, 26vw, 116px) !important;
  }

  .why-kartavya-section .impact-label {
    margin-top: 5px !important;
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  .why-kartavya-section .impact-copy {
    width: min(310px, 100%) !important;
    margin-top: 10px !important;
    font-size: 11.5px !important;
    line-height: 1.38 !important;
  }

  .why-kartavya-section .impact-graph {
    top: 37% !important;
    width: 116% !important;
    opacity: 0.5 !important;
  }

  .why-kartavya-section .impact-graph-dot {
    opacity: 0.54 !important;
  }

  .why-kartavya-section .impact-graph-arrow {
    opacity: 0.72 !important;
  }

  .why-kartavya-section .impact-features {
    width: 100% !important;
    margin-top: 22px !important;
    gap: 6px !important;
  }

  .why-kartavya-section .impact-features .feature-plus {
    font-size: 18px !important;
  }

  .why-kartavya-section .impact-pill {
    min-height: 50px !important;
    padding: 6px 5px !important;
    font-size: clamp(8.5px, 2.35vw, 10px) !important;
    line-height: 1.12 !important;
  }

  .why-kartavya-section .impact-pill svg {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
  }

  .why-kartavya-section .why-cta {
    width: min(340px, 100%) !important;
    min-height: 58px !important;
    margin-top: 24px !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }

  .why-kartavya-section .why-cta-subtext {
    width: min(300px, 100%) !important;
    margin: 14px auto 0 !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

  .floating-whatsapp {
    width: 56px !important;
    height: 56px !important;
    right: 12px !important;
    bottom: 86px !important;
    z-index: 12 !important;
  }
}

@media (max-width: 380px) {
  .why-kartavya-section .impact-panel {
    padding-inline: 8px !important;
  }

  .why-kartavya-section .impact-pill {
    min-height: 48px !important;
    font-size: 8px !important;
  }

  .why-kartavya-section .impact-features .feature-plus {
    font-size: 16px !important;
  }
}

/* Final Why Kartavya polish: heading, impact boxes, graph motion */
.why-kartavya-section .impact-graph-line {
  stroke-dasharray: 96 520 !important;
  stroke-dashoffset: 0 !important;
}

.why-kartavya-section.is-visible .impact-graph-line {
  animation: graphLightSweep 3.4s linear infinite !important;
}

.why-kartavya-section .impact-graph-soft {
  opacity: 0.62 !important;
}

.why-kartavya-section .impact-graph-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: graphNodeBreathe 3.4s ease-in-out infinite !important;
}

.why-kartavya-section .impact-graph-dot:nth-of-type(2) {
  animation-delay: 0.35s !important;
}

.why-kartavya-section .impact-graph-dot:nth-of-type(3) {
  animation-delay: 0.7s !important;
}

.why-kartavya-section .impact-graph-arrow {
  transform-box: fill-box;
  transform-origin: center;
}

.why-kartavya-section.is-visible .impact-graph-arrow {
  animation: graphArrowBreathe 3.4s ease-in-out infinite !important;
}

@keyframes graphLightSweep {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -616;
  }
}

@keyframes graphNodeBreathe {
  0%, 100% {
    opacity: 0.48;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.04);
  }
}

@keyframes graphArrowBreathe {
  0%, 100% {
    opacity: 0.52;
    transform: translate(-2px, 2px) scale(0.96);
  }
  50% {
    opacity: 0.9;
    transform: translate(0, 0) scale(1.03);
  }
}

@media (max-width: 860px) {
  .why-kartavya-section .why-intro {
    width: min(430px, 100%) !important;
    margin-inline: auto !important;
    margin-bottom: 22px !important;
    text-align: left !important;
  }

  .why-kartavya-section .why-eyebrow {
    width: max-content !important;
    min-height: 28px !important;
    margin: 0 0 15px !important;
    padding: 0 13px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
  }

  .why-kartavya-section .why-eyebrow span {
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px !important;
  }

  .why-kartavya-section .why-intro h2 {
    width: min(420px, 100%) !important;
    margin: 0 !important;
    font-size: clamp(32px, 9.1vw, 43px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  .why-kartavya-section .why-intro h2 span {
    display: block !important;
  }

  .why-kartavya-section .why-intro p {
    width: min(420px, 100%) !important;
    margin: 13px 0 0 !important;
  }

  .why-kartavya-section .impact-panel {
    width: min(430px, 100%) !important;
    padding: 19px 12px 23px !important;
    border-radius: 25px !important;
    background:
      radial-gradient(circle at 20% 10%, rgba(14, 165, 255, 0.08), transparent 34%),
      radial-gradient(circle at 88% 14%, rgba(124, 58, 237, 0.07), transparent 34%),
      linear-gradient(150deg, rgba(255, 255, 255, 0.88), rgba(248, 252, 255, 0.76)) !important;
  }

  .why-kartavya-section .impact-graph {
    top: 35% !important;
    width: 106% !important;
    opacity: 0.44 !important;
  }

  .why-kartavya-section .impact-graph-soft {
    stroke-width: 13 !important;
    opacity: 0.48 !important;
  }

  .why-kartavya-section .impact-graph-line {
    stroke-width: 4.5 !important;
  }

  .why-kartavya-section .impact-graph-dot {
    opacity: 0.52 !important;
    stroke-width: 4.5 !important;
  }

  .why-kartavya-section .impact-kicker {
    min-height: 31px !important;
    margin-bottom: 12px !important;
    padding: 0 14px !important;
    font-size: 9.4px !important;
    letter-spacing: 0.13em !important;
  }

  .why-kartavya-section .impact-up {
    font-size: 18px !important;
  }

  .why-kartavya-section .impact-number {
    font-size: clamp(92px, 27vw, 118px) !important;
    line-height: 0.78 !important;
  }

  .why-kartavya-section .impact-label {
    margin-top: 5px !important;
    font-size: clamp(24px, 6.9vw, 32px) !important;
  }

  .why-kartavya-section .impact-copy {
    width: min(315px, 100%) !important;
    margin-top: 10px !important;
    font-size: 11.8px !important;
    line-height: 1.38 !important;
  }

  .why-kartavya-section .impact-features {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 23px !important;
  }

  .why-kartavya-section .impact-features .feature-plus {
    width: 18px !important;
    color: rgba(45, 65, 101, 0.58) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .why-kartavya-section .impact-pill {
    width: auto !important;
    min-width: 0 !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-rows: 21px auto !important;
    place-items: center !important;
    gap: 5px !important;
    padding: 9px 5px 8px !important;
    border: 1px solid rgba(190, 214, 244, 0.86) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 30% 8%, rgba(14, 165, 255, 0.07), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.78)) !important;
    box-shadow: 0 13px 28px rgba(15, 76, 129, 0.07), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    color: #071230 !important;
    font-size: clamp(8.7px, 2.32vw, 10px) !important;
    font-weight: 880 !important;
    line-height: 1.08 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .why-kartavya-section .impact-pill svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: #1d7ff2 !important;
  }
}

@media (max-width: 380px) {
  .why-kartavya-section .impact-panel {
    padding-inline: 9px !important;
  }

  .why-kartavya-section .impact-features {
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .why-kartavya-section .impact-features .feature-plus {
    width: 14px !important;
    font-size: 17px !important;
  }

  .why-kartavya-section .impact-pill {
    min-height: 55px !important;
    border-radius: 16px !important;
    font-size: 8px !important;
  }
}

/* Final premium heading and 7X graph animation */
.why-kartavya-section .why-intro {
  width: min(860px, 100%) !important;
}

.why-kartavya-section .why-intro h2 {
  width: min(820px, 100%) !important;
  font-size: clamp(42px, 5.45vw, 72px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.why-kartavya-section .why-intro h2 span {
  display: block !important;
  white-space: nowrap !important;
}

.why-kartavya-section .why-intro p {
  width: min(700px, 100%) !important;
  margin-top: 18px !important;
}

.why-kartavya-section .impact-graph {
  top: 38% !important;
  width: min(610px, 106%) !important;
  opacity: 0.58 !important;
}

.why-kartavya-section .impact-graph-soft {
  stroke: rgba(105, 92, 246, 0.13) !important;
  stroke-width: 13 !important;
  filter: blur(4px) !important;
  opacity: 0.7 !important;
}

.why-kartavya-section .impact-graph-line {
  stroke-width: 5.5 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 112 504 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0 !important;
  filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.18)) drop-shadow(0 0 18px rgba(154, 77, 255, 0.12)) !important;
}

.why-kartavya-section.is-visible .impact-graph-line {
  animation: premiumGraphSweep 3.15s linear infinite !important;
}

.why-kartavya-section .impact-graph-dot {
  fill: rgba(255, 255, 255, 0.86) !important;
  stroke: rgba(37, 117, 242, 0.7) !important;
  stroke-width: 4.5 !important;
  opacity: 0.38 !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: premiumGraphDot 3.15s ease-in-out infinite !important;
}

.why-kartavya-section .impact-graph-dot:nth-of-type(1) {
  animation-delay: 0.15s !important;
}

.why-kartavya-section .impact-graph-dot:nth-of-type(2) {
  animation-delay: 0.75s !important;
}

.why-kartavya-section .impact-graph-dot:nth-of-type(3) {
  animation-delay: 1.35s !important;
}

.why-kartavya-section .impact-graph-arrow {
  stroke-width: 7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0.46 !important;
  filter: drop-shadow(0 0 12px rgba(154, 77, 255, 0.16)) !important;
  transform-box: fill-box;
  transform-origin: center;
}

.why-kartavya-section.is-visible .impact-graph-arrow {
  animation: premiumArrowPulse 3.15s ease-in-out infinite !important;
}

@keyframes premiumGraphSweep {
  0% {
    stroke-dashoffset: 112;
    opacity: 0;
  }
  10%, 78% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -504;
    opacity: 0;
  }
}

@keyframes premiumGraphDot {
  0%, 100% {
    opacity: 0.28;
    transform: scale(0.92);
  }
  45%, 58% {
    opacity: 0.72;
    transform: scale(1.08);
  }
}

@keyframes premiumArrowPulse {
  0%, 100% {
    opacity: 0.34;
    transform: translate(-2px, 2px) scale(0.97);
  }
  50% {
    opacity: 0.78;
    transform: translate(0, 0) scale(1.04);
  }
}

@media (max-width: 860px) {
  .why-kartavya-section .why-intro {
    width: min(430px, 100%) !important;
    text-align: left !important;
  }

  .why-kartavya-section .why-intro h2 {
    width: min(420px, 100%) !important;
    font-size: clamp(31px, 8.35vw, 39px) !important;
    line-height: 1.07 !important;
    font-weight: 950 !important;
  }

  .why-kartavya-section .why-intro h2 span {
    display: block !important;
    white-space: nowrap !important;
  }

  .why-kartavya-section .why-intro p {
    width: min(410px, 100%) !important;
    margin-top: 13px !important;
  }

  .why-kartavya-section .impact-graph {
    top: 34% !important;
    width: 102% !important;
    opacity: 0.5 !important;
  }

  .why-kartavya-section .impact-graph-soft {
    stroke-width: 11 !important;
    opacity: 0.54 !important;
  }

  .why-kartavya-section .impact-graph-line {
    stroke-width: 4.5 !important;
    stroke-dasharray: 78 538 !important;
  }

  .why-kartavya-section.is-visible .impact-graph-line {
    animation: premiumGraphSweepMobile 3s linear infinite !important;
  }

  .why-kartavya-section .impact-graph-dot {
    stroke-width: 4 !important;
    opacity: 0.32 !important;
  }

  .why-kartavya-section .impact-graph-arrow {
    stroke-width: 6 !important;
    opacity: 0.44 !important;
  }
}

@keyframes premiumGraphSweepMobile {
  0% {
    stroke-dashoffset: 78;
    opacity: 0;
  }
  10%, 78% {
    opacity: 0.9;
  }
  100% {
    stroke-dashoffset: -538;
    opacity: 0;
  }
}

@media (max-width: 380px) {
  .why-kartavya-section .why-intro h2 {
    font-size: clamp(29px, 8.2vw, 33px) !important;
  }

  .why-kartavya-section .why-intro p {
  }
}

/* Final premium 7X curve line treatment */
.why-kartavya-section .impact-graph {
  top: 36.5% !important;
  width: min(590px, 106%) !important;
  opacity: 0.78 !important;
}

.why-kartavya-section .impact-graph-soft {
  stroke: url(#whyGraphGradient) !important;
  stroke-width: 7 !important;
  opacity: 0.28 !important;
  filter: drop-shadow(0 8px 18px rgba(37, 99, 235, 0.08)) !important;
}

.why-kartavya-section .impact-graph-line {
  stroke: url(#whyGraphGradient) !important;
  stroke-width: 6 !important;
  stroke-dasharray: 70 546 !important;
  stroke-dashoffset: 70 !important;
  opacity: 0 !important;
  filter: drop-shadow(0 0 8px rgba(14, 165, 255, 0.24)) drop-shadow(0 0 14px rgba(124, 58, 237, 0.18)) !important;
}

.why-kartavya-section.is-visible .impact-graph-line {
  animation: curveLightPass 2.85s linear infinite !important;
}

.why-kartavya-section .impact-graph-dot {
  fill: rgba(255, 255, 255, 0.94) !important;
  stroke: rgba(37, 117, 242, 0.46) !important;
  stroke-width: 4 !important;
  opacity: 0.44 !important;
  filter: drop-shadow(0 5px 10px rgba(37, 99, 235, 0.1)) !important;
}

.why-kartavya-section .impact-graph-arrow {
  opacity: 0.54 !important;
  stroke-width: 6.5 !important;
  filter: drop-shadow(0 0 10px rgba(154, 77, 255, 0.16)) !important;
}

@keyframes curveLightPass {
  0% {
    stroke-dashoffset: 70;
    opacity: 0;
  }
  10%, 72% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -546;
    opacity: 0;
  }
}

@media (max-width: 860px) {
  .why-kartavya-section .impact-graph {
    top: 35.5% !important;
    width: 104% !important;
    opacity: 0.74 !important;
  }

  .why-kartavya-section .impact-graph-soft {
    stroke-width: 6 !important;
    opacity: 0.26 !important;
  }

  .why-kartavya-section .impact-graph-line {
    stroke-width: 5 !important;
    stroke-dasharray: 54 562 !important;
    stroke-dashoffset: 54 !important;
  }

  .why-kartavya-section.is-visible .impact-graph-line {
    animation: curveLightPassMobile 2.75s linear infinite !important;
  }

  .why-kartavya-section .impact-graph-dot {
    stroke-width: 3.5 !important;
    opacity: 0.38 !important;
  }
}

@keyframes curveLightPassMobile {
  0% {
    stroke-dashoffset: 54;
    opacity: 0;
  }
  10%, 72% {
    opacity: 0.92;
  }
  100% {
    stroke-dashoffset: -562;
    opacity: 0;
  }
}

/* Responsive heading and synchronized left-to-right neon sweep. */
.why-kartavya-section .why-intro h2 {
  font-size: 64px !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.why-kartavya-section .why-intro h2 span {
  white-space: nowrap !important;
  overflow-wrap: normal;
}
.why-kartavya-section .impact-graph {
  top: 35.5% !important;
  opacity: 0.95 !important;
  overflow: visible;
}
.why-kartavya-section .impact-graph-soft {
  stroke: url(#whyGraphGradient) !important;
  stroke-width: 5.5 !important;
  opacity: 0.26 !important;
  filter: none !important;
}
.why-kartavya-section .impact-graph-line {
  display: none;
}
.why-kartavya-section .impact-graph-dot {
  animation: none !important;
  opacity: 0.34 !important;
}
.why-kartavya-section .impact-graph-arrow {
  animation: none !important;
  stroke-width: 7 !important;
  stroke-dasharray: none !important;
  opacity: 0.45 !important;
  filter: none !important;
  transform: none !important;
}
.impact-neon-halo,
.impact-neon-core {
  fill: none;
  stroke: url(#whyGraphGradient);
  stroke-linecap: round;
  stroke-dasharray: 16 116;
  stroke-dashoffset: 16;
  opacity: 0;
}
.impact-neon-halo {
  stroke-width: 14;
  filter: blur(4px);
}
.impact-neon-core {
  stroke-width: 5;
  filter: drop-shadow(0 0 5px #27a5ff) drop-shadow(0 0 12px #9145ff);
}
.impact-neon-tip {
  fill: none;
  stroke: #a04aff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 6px #a04aff) drop-shadow(0 0 15px #9747ff);
}
.why-kartavya-section.is-visible .impact-neon-halo,
.why-kartavya-section.is-visible .impact-neon-core {
  animation: impactNeonTravel 2.8s linear infinite;
}
.why-kartavya-section.is-visible .impact-neon-tip {
  animation: impactNeonArrival 2.8s linear infinite;
}
@keyframes impactNeonTravel {
  0% { stroke-dashoffset: 16; opacity: 0; }
  7% { opacity: 1; }
  80% { opacity: 1; }
  92%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes impactNeonArrival {
  0%, 73%, 100% { opacity: 0; }
  85%, 91% { opacity: 1; }
}
@media (max-width: 860px) {
  .why-kartavya-section .why-intro h2 {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }
  .why-kartavya-section .impact-graph {
    top: 35% !important;
    width: 105% !important;
  }
}
@media (max-width: 380px) {
  .why-kartavya-section .why-intro h2 {
    font-size: 27px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .why-kartavya-section.is-visible .impact-neon-halo,
  .why-kartavya-section.is-visible .impact-neon-core,
  .why-kartavya-section.is-visible .impact-neon-tip {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.5;
  }
}

/* Scroll-linked process timeline motion */
.process-section.is-visible .process-list::after,
.process-section.is-visible .process-number,
.process-section.is-visible .process-card {
  animation: none !important;
}
.process-list::after {
  top: var(--process-glow-top, var(--pulse-start));
  opacity: var(--process-glow-opacity, 0);
  transition: top 90ms linear, opacity 180ms ease;
  will-change: top, opacity;
}
.process-step .process-number,
.process-step .process-card {
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease, background 260ms ease, color 260ms ease;
}
.process-step.is-active .process-number {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.84);
  background: linear-gradient(135deg, #0ea5ff 0%, #2563ff 54%, #8b5cf6 100%);
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.34), 0 0 34px rgba(124, 58, 237, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: scale(1.06);
}
.process-step.is-active .process-card {
  border-color: rgba(90, 136, 255, 0.42);
  background:
    radial-gradient(circle at 12% 4%, rgba(14, 165, 255, 0.12), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(124, 58, 237, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.88));
  box-shadow: 0 22px 58px rgba(15, 76, 129, 0.13), 0 0 36px rgba(37, 99, 235, 0.09), inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-2px);
}
.process-step.is-near .process-number {
  box-shadow: 0 16px 38px rgba(37, 99, 235, 0.18), 0 0 24px rgba(124, 58, 237, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transform: scale(1.025);
}
@media (prefers-reduced-motion: reduce) {
  .process-list::after { transition: none; }
  .process-step .process-number,
  .process-step .process-card { transition: none; }
}


/* Desktop-only homepage reference redesign */
@media (min-width: 901px) {
  .hero {
    min-height: 760px;
    background:
      radial-gradient(circle at 94% 4%, rgba(147, 51, 234, 0.16), transparent 28%),
      radial-gradient(circle at 78% 84%, rgba(14, 165, 255, 0.16), transparent 32%),
      linear-gradient(135deg, #f7fbff 0%, #eff8ff 54%, #f8f4ff 100%) !important;
  }
  .hero::before {
    background-image:
      linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px) !important;
    background-size: 54px 54px !important;
  }
  .hero::after {
    background:
      radial-gradient(ellipse 50% 58% at 98% 52%, rgba(14, 165, 255, 0.18), transparent 70%),
      radial-gradient(ellipse 40% 48% at 101% 103%, rgba(124, 58, 237, 0.18), transparent 68%) !important;
  }
  .blob { display: none !important; }
  .hero-topbar {
    width: min(1200px, calc(100% - 32px)) !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 14px auto 0 !important;
    padding: 0 10px 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 12px 32px -4px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    position: sticky !important;
    top: 14px !important;
    z-index: 1000 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  body.kg-scrolled .hero-topbar {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px -2px rgba(15, 23, 42, 0.08), 0 16px 40px -4px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  }
  .hero-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }
  .hero-brand-mark {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 11px !important;
    background: #090d1a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 8px rgba(9, 13, 26, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
  }
  .hero-brand:hover .hero-brand-mark {
    transform: scale(1.04) translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }
  .hero-brand-mark svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
  }
  .hero-brand-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.1 !important;
  }
  .hero-brand-name {
    font-size: 16.5px !important;
    font-weight: 750 !important;
    color: #090d16 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
  }
  .hero-brand-tagline {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
    line-height: 1 !important;
    display: block !important;
  }
  .hero-brand-name::after,
  .hero-brand-tagline::after {
    content: none !important;
    display: none !important;
  }
  .hero-desktop-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 4px !important;
    background: rgba(241, 245, 249, 0.72) !important;
    border: 1px solid rgba(226, 232, 240, 0.75) !important;
    border-radius: 9999px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    margin: 0 !important;
  }
  .hero-desktop-menu a {
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important;
    border-radius: 9999px !important;
    color: #475569 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 550 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .hero-desktop-menu a:hover {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.65) !important;
    transform: none !important;
  }
  .hero-desktop-menu a[aria-current="page"] {
    color: #0f172a !important;
    font-weight: 650 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px -1px rgba(15, 23, 42, 0.04) !important;
    transform: none !important;
  }
  .hero-top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }
  .hero-top-actions .top-start {
    height: 42px !important;
    min-height: 42px !important;
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 20px !important;
    border-radius: 9999px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 52%, #4f46e5 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2), 0 6px 18px -2px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .hero-top-actions .top-start:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28), 0 10px 24px -2px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }
  .hero-top-actions .top-start:active {
    transform: translateY(0) scale(0.98) !important;
  }
  .hero-top-actions .top-start svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2.5 !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
  }
  .hero-top-actions .top-start:hover svg {
    transform: translateX(3px) !important;
  }
  .hero-top-actions .top-start span {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
  }
  .hero-top-actions .top-start span::before {
    content: none !important;
    display: none !important;
  }
  @media (max-width: 900px) {
    .hero-topbar {
      width: calc(100% - 24px) !important;
      height: 56px !important;
      min-height: 56px !important;
      margin: 8px auto 0 !important;
      padding: 0 10px 0 14px !important;
      border-radius: 9999px !important;
      top: 8px !important;
    }
    .hero-brand-mark {
      width: 34px !important;
      height: 34px !important;
      flex-basis: 34px !important;
      border-radius: 9px !important;
    }
    .hero-brand-mark svg {
      width: 22px !important;
      height: 22px !important;
    }
    .hero-brand-name {
      font-size: 15px !important;
    }
    .hero-brand-tagline {
      font-size: 9.5px !important;
    }
    .hero-desktop-menu {
      display: none !important;
    }
    .hero-top-actions .top-start {
      height: 36px !important;
      min-height: 36px !important;
      padding: 0 14px !important;
      font-size: 12.5px !important;
      gap: 6px !important;
    }
    .hero-top-actions .top-start span {
      font-size: 12.5px !important;
    }
  }
  .hero-wrap {
    max-width: 1280px !important;
    grid-template-columns: minmax(0, .92fr) minmax(530px, 1.08fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    column-gap: clamp(44px, 5vw, 76px) !important;
    align-items: center !important;
    padding: 52px 28px 34px !important;
  }
  .trust-pill {
    width: max-content !important; max-width: 100%; min-height: 38px; padding: 0 18px 0 12px !important;
    border-radius: 999px !important; border: 1px solid rgba(177, 203, 236, .62) !important;
    background: rgba(255,255,255,.74) !important; box-shadow: 0 12px 28px rgba(15, 76, 129, .08) !important;
  }
  .avatar-stack, .trust-stars { display: none !important; }
  .trust-copy strong { color: #314163 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .04em; }
  .trust-copy strong::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: #1978ff; box-shadow: 0 0 0 5px rgba(25,120,255,.1); vertical-align: -1px; }
  .trust-copy small { display: none !important; }
  .hero-heading {
    max-width: 560px !important; margin: 20px 0 18px !important; font-size: clamp(68px, 6vw, 88px) !important;
    line-height: .94 !important; letter-spacing: 0 !important; font-weight: 950 !important; color: #050d2d !important;
  }
  .headline-line { display: block; white-space: normal; text-wrap: balance; }
  .hl-cyan {
    background: linear-gradient(96deg, #0ea5ff 0%, #176ee8 48%, #9444ff 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
  }
  .hl-cyan::after {
    bottom: -9px !important; height: 5px !important; opacity: .9 !important;
    background: linear-gradient(90deg, transparent 0%, #0ea5ff 18%, #9444ff 80%, transparent 100%) !important;
    filter: blur(.2px);
  }
  .hero-desc {
    max-width: 560px !important; margin: 10px 0 26px !important; color: #52617e !important;
    font-size: 20px !important; line-height: 1.55 !important; font-weight: 600 !important;
  }
  .hero-desc strong { color: #061132 !important; font-weight: 950 !important; }
  .desktop-hero-benefits { grid-column: 1; grid-row: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 2px 0 30px; }
  .desktop-benefit { min-width: 0; }
  .desktop-benefit span { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid rgba(177,203,236,.68); border-radius: 16px; color: #126dff; background: rgba(255,255,255,.82); box-shadow: 0 14px 30px rgba(15,76,129,.1); }
  .desktop-benefit svg { width: 25px; height: 25px; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .desktop-benefit strong { display: block; color: #071230; font-size: 13px; line-height: 1.18; font-weight: 950; }
  .desktop-benefit small { display: block; margin-top: 4px; color: #60708d; font-size: 11px; line-height: 1.2; font-weight: 650; }
  .hero-buttons { grid-row: 5 !important; gap: 20px !important; margin: 0 !important; }
  .hero-buttons .btn-primary, .hero-buttons .btn-ghost { min-width: 245px; min-height: 58px; justify-content: center; border-radius: 17px !important; font-size: 17px !important; }
  .hero-buttons .btn-primary { color: #fff !important; background: linear-gradient(135deg, #08b7f4, #176ee8 54%, #9b3dff) !important; box-shadow: 0 18px 38px rgba(23, 110, 232, .26) !important; }
  .hero-buttons .btn-ghost { background: rgba(255,255,255,.82) !important; border-color: rgba(177,203,236,.66) !important; box-shadow: 0 14px 30px rgba(15,76,129,.08) !important; color: #071230 !important; }
  .hero-stats { display: none !important; }
  .desktop-hero-assurance { grid-column: 1; grid-row: 6; display: flex; gap: 22px; margin-top: 24px; color: #5d6d89; font-size: 13px; font-weight: 700; }
  .desktop-hero-assurance span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .desktop-hero-assurance svg { width: 18px; height: 18px; padding: 2px; border: 2px solid #0d8eff; border-radius: 50%; stroke-width: 3; color: #0d8eff; }
  .right-col { align-self: stretch !important; align-items: center !important; }
  .right-col .cards-strip { display: none !important; }
  .desktop-hero-visual { position: relative; display: grid; gap: 18px; width: 100%; }
  .desktop-growth-card, .desktop-proof, .desktop-impact-card {
    border: 1px solid rgba(177,203,236,.72); background: rgba(255,255,255,.72); box-shadow: 0 18px 44px rgba(15,76,129,.1), inset 0 1px 0 rgba(255,255,255,.96); backdrop-filter: blur(20px);
  }
  .desktop-growth-card { position: relative; overflow: hidden; min-height: 252px; border-radius: 22px; padding: 26px 30px; }
  .desktop-growth-copy { position: relative; z-index: 2; width: 48%; }
  .desktop-growth-copy span { display: block; color: #6c7b98; font-size: 20px; font-weight: 950; text-transform: uppercase; letter-spacing: .02em; }
  .desktop-growth-copy span::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 9px; border-radius: 50%; background: linear-gradient(135deg,#0ea5ff,#8b5cf6); vertical-align: -1px; }
  .desktop-growth-copy strong { display: block; margin-top: -6px; font-size: 100px; line-height: .88; font-weight: 950; letter-spacing: -2px; background: linear-gradient(100deg,#0ea5ff 0%,#176ee8 48%,#a43cff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .desktop-growth-copy b { display: block; margin-top: 8px; color: #071230; font-size: 23px; line-height: 1; font-weight: 950; text-transform: uppercase; }
  .desktop-growth-copy p { margin-top: 14px; color: #536484; font-size: 14px; line-height: 1.42; font-weight: 650; }
  .desktop-growth-chart { position: absolute; right: 22px; bottom: 16px; width: 56%; height: 75%; overflow: visible; }
  .desktop-growth-tag { position: absolute; right: 24px; top: 24px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid rgba(177,203,236,.66); border-radius: 16px; background: rgba(255,255,255,.78); box-shadow: 0 14px 30px rgba(15,76,129,.11); }
  .desktop-growth-tag svg { width: 24px; height: 24px; padding: 5px; border-radius: 9px; color: #8b3dff; background: rgba(139,61,255,.1); stroke-width: 3; }
  .desktop-growth-tag b { display: block; color: #071230; font-size: 12px; line-height: 1.1; }
  .desktop-growth-tag small { display: block; color: #536484; font-size: 10px; line-height: 1.1; font-weight: 700; }
  .desktop-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .desktop-proof { min-height: 108px; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: center; border-radius: 20px; padding: 18px; }
  .desktop-proof span, .desktop-impact-card span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #0d8eff; background: linear-gradient(145deg, rgba(14,165,255,.14), rgba(139,92,246,.12)); box-shadow: 0 13px 26px rgba(37,99,235,.12); }
  .desktop-proof svg, .desktop-impact-card svg { width: 27px; height: 27px; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .desktop-proof strong { display: block; color: #071230; font-size: 26px; line-height: 1; font-weight: 950; }
  .desktop-proof small { display: block; margin-top: 8px; color: #61718e; font-size: 12px; line-height: 1.2; font-weight: 700; }
  .desktop-impact-card { min-height: 138px; display: grid; grid-template-columns: 64px 1fr 1fr; gap: 20px; align-items: center; border-radius: 22px; padding: 24px; }
  .desktop-impact-card strong { color: #071230; font-size: 22px; line-height: 1.2; font-weight: 950; }
  .desktop-impact-card p { padding-left: 28px; border-left: 1px solid rgba(83,100,132,.28); color: #52617e; font-size: 17px; line-height: 1.45; font-weight: 700; }
  .desktop-hand-note { position: absolute; right: -58px; top: -28px; color: #3159a7; font: 20px/1.18 "Segoe Print", cursive; transform: rotate(-10deg); }
  .desktop-hand-note svg { display: block; width: 42px; height: 42px; margin: 6px auto 0; stroke-width: 2; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  .hero-topbar { grid-template-columns: 230px 1fr 190px !important; gap: 10px !important; }
  .hero-desktop-menu { gap: 2px; }
  .hero-desktop-menu a { padding: 0 8px; font-size: 11px; }
  .hero-wrap { grid-template-columns: minmax(0, .9fr) minmax(430px, 1fr) !important; column-gap: 30px !important; }
  .hero-heading { font-size: clamp(58px, 6.4vw, 72px) !important; }
  .hero-desc { font-size: 17px !important; }
  .desktop-hero-benefits { gap: 12px; }
  .desktop-benefit span { width: 48px; height: 48px; }
  .desktop-growth-copy strong { font-size: 82px; }
  .desktop-proof { grid-template-columns: 42px 1fr; padding: 14px; }
  .desktop-proof span, .desktop-impact-card span { width: 42px; height: 42px; }
  .desktop-impact-card strong { font-size: 18px; }
  .desktop-impact-card p { font-size: 14px; }
  .desktop-hand-note { display: none; }
}
@media (max-width: 900px) {
  .hero-desktop-menu, .desktop-hero-benefits, .desktop-hero-assurance, .desktop-hero-visual { display: none !important; }
}


/* Desktop-only homepage compact polish */
@media (min-width: 901px) {
  .hero { min-height: 100vh !important; }
  .hero-wrap {
    flex: 0 0 auto !important;
    align-content: start !important;
    padding-top: clamp(30px, 3.4vw, 42px) !important;
    padding-bottom: 30px !important;
    min-height: 0 !important;
  }
  .trust-pill { margin-bottom: 0 !important; }
  .hero-heading {
    margin-top: 16px !important;
    margin-bottom: 18px !important;
    font-size: clamp(64px, 5.45vw, 82px) !important;
  }
  .hero-desc { margin-bottom: 22px !important; }
  .desktop-hero-benefits { gap: 18px; margin-bottom: 24px; }
  .desktop-benefit span { width: 50px; height: 50px; margin-bottom: 10px; }
  .hero-buttons .btn-primary, .hero-buttons .btn-ghost { min-height: 54px; }
  .desktop-hero-assurance { margin-top: 18px; }
  .desktop-hero-visual { gap: 14px; align-content: start; }
  .desktop-growth-card { min-height: 226px; padding: 23px 28px; }
  .desktop-growth-copy strong { font-size: clamp(82px, 7vw, 96px); }
  .desktop-growth-copy b { font-size: 21px; }
  .desktop-growth-copy p { font-size: 13px; line-height: 1.38; }
  .desktop-growth-chart { right: 18px; bottom: 12px; width: 57%; height: 72%; }
  .desktop-growth-tag { top: 20px; right: 20px; padding: 10px 13px; }
  .desktop-proof { min-height: 92px; padding: 14px 16px; grid-template-columns: 46px 1fr; gap: 10px; }
  .desktop-proof span, .desktop-impact-card span { width: 46px; height: 46px; }
  .desktop-proof strong { font-size: 23px; }
  .desktop-proof small { margin-top: 6px; font-size: 11px; }
  .desktop-impact-card { min-height: 112px; grid-template-columns: 54px 1fr 1.05fr; gap: 16px; padding: 18px 22px; }
  .desktop-impact-card strong { font-size: 19px; }
  .desktop-impact-card p { font-size: 15px; padding-left: 22px; }
}
@media (min-width: 1280px) {
  .hero-wrap { padding-top: 38px !important; }
  .hero-heading { font-size: 84px !important; }
}

/* Desktop-only homepage fold optimization */
@media (min-width: 901px) {
  .hero {
    min-height: 100vh !important;
    padding-bottom: 20px !important;
  }

  .hero-bg {
    inset: 0 !important;
  }

  .hero-topbar {
    min-height: 78px !important;
  }

  .hero-wrap {
    min-height: 0 !important;
    padding-top: clamp(18px, 2.4vh, 30px) !important;
    padding-bottom: 18px !important;
    row-gap: clamp(16px, 2vh, 22px) !important;
    align-items: start !important;
  }

  .hero-badge {
    margin-bottom: 2px !important;
    min-height: 48px !important;
  }

  .hero-heading {
    font-size: clamp(58px, 5vw, 76px) !important;
    line-height: .94 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    max-width: 660px !important;
  }

  .hero-heading .highlight {
    padding-bottom: 10px !important;
  }

  .hero-heading .highlight::after {
    bottom: 2px !important;
    height: 6px !important;
  }

  .hero-desc {
    max-width: 640px !important;
    margin: 0 !important;
    font-size: clamp(17px, 1.28vw, 21px) !important;
    line-height: 1.44 !important;
  }

  .desktop-hero-benefits {
    gap: clamp(12px, 1.2vw, 18px) !important;
    margin: 0 0 18px !important;
  }

  .desktop-benefit > span {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 10px !important;
  }

  .desktop-benefit strong {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  .desktop-benefit small {
    font-size: 11px !important;
  }

  .hero-buttons {
    gap: 16px !important;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost {
    min-width: 220px !important;
    min-height: 52px !important;
    padding: 0 24px !important;
    font-size: 16px !important;
  }

  .desktop-hero-assurance {
    margin-top: 13px !important;
    gap: 18px !important;
    font-size: 12px !important;
  }

  .desktop-hero-assurance svg {
    width: 16px !important;
    height: 16px !important;
  }

  .desktop-hero-visual {
    gap: 12px !important;
    margin-top: 0 !important;
  }

  .desktop-growth-card {
    min-height: 204px !important;
    padding: 22px 26px !important;
    border-radius: 20px !important;
  }

  .desktop-growth-copy { width: 45% !important; }
  .desktop-growth-copy span { font-size: 17px !important; }
  .desktop-growth-copy span::before { width: 13px !important; height: 13px !important; margin-right: 8px !important; }
  .desktop-growth-copy strong { font-size: clamp(74px, 6vw, 88px) !important; line-height: .84 !important; margin-top: -3px !important; }
  .desktop-growth-copy b { font-size: 18px !important; margin-top: 7px !important; }
  .desktop-growth-copy p { margin-top: 12px !important; font-size: 12px !important; line-height: 1.36 !important; }
  .desktop-growth-chart { right: 18px !important; bottom: 10px !important; width: 58% !important; height: 68% !important; }
  .desktop-growth-tag { top: 22px !important; right: 22px !important; padding: 9px 12px !important; border-radius: 14px !important; }
  .desktop-growth-tag svg { width: 22px !important; height: 22px !important; }

  .desktop-proof-grid {
    gap: 12px !important;
  }

  .desktop-proof {
    min-height: 92px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
  }

  .desktop-proof i {
    width: 44px !important;
    height: 44px !important;
    margin-right: 14px !important;
  }

  .desktop-proof strong {
    font-size: 27px !important;
    line-height: 1 !important;
  }

  .desktop-proof span {
    margin-top: 7px !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  .desktop-impact-card {
    min-height: 104px !important;
    padding: 20px 26px !important;
    border-radius: 18px !important;
    grid-template-columns: auto minmax(250px, .92fr) 1px minmax(220px, 1fr) !important;
  }

  .desktop-impact-card i {
    width: 48px !important;
    height: 48px !important;
  }

  .desktop-impact-card h3 {
    font-size: 22px !important;
    line-height: 1.13 !important;
  }

  .desktop-impact-card p {
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  .desktop-hand-note {
    right: -34px !important;
    top: -18px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    opacity: .9 !important;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .hero-wrap {
    grid-template-columns: minmax(0, .86fr) minmax(400px, 1fr) !important;
    column-gap: 24px !important;
    padding-top: 16px !important;
    row-gap: 14px !important;
  }

  .hero-heading {
    font-size: clamp(48px, 5.25vw, 64px) !important;
    max-width: 540px !important;
  }

  .hero-desc {
    font-size: 16px !important;
    line-height: 1.4 !important;
    max-width: 560px !important;
  }

  .desktop-hero-benefits {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .desktop-benefit > span { width: 38px !important; height: 38px !important; margin-bottom: 8px !important; }
  .desktop-benefit strong { font-size: 12px !important; }
  .desktop-benefit small { font-size: 10px !important; }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost {
    min-width: 185px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    border-radius: 15px !important;
  }

  .desktop-hero-assurance {
    display: none !important;
  }

  .desktop-growth-card {
    min-height: 188px !important;
    padding: 18px 22px !important;
  }

  .desktop-growth-copy span { font-size: 15px !important; }
  .desktop-growth-copy strong { font-size: clamp(66px, 7vw, 78px) !important; }
  .desktop-growth-copy b { font-size: 16px !important; }
  .desktop-growth-copy p { font-size: 11px !important; }
  .desktop-growth-tag { top: 18px !important; right: 18px !important; transform: scale(.9); transform-origin: top right; }

  .desktop-proof {
    min-height: 78px !important;
    padding: 13px 14px !important;
  }

  .desktop-proof i {
    width: 38px !important;
    height: 38px !important;
    margin-right: 10px !important;
  }

  .desktop-proof strong { font-size: 23px !important; }
  .desktop-proof span { font-size: 10px !important; }

  .desktop-impact-card {
    min-height: 86px !important;
    padding: 15px 18px !important;
    grid-template-columns: 42px minmax(190px, .9fr) 1px minmax(160px, 1fr) !important;
    gap: 16px !important;
  }

  .desktop-impact-card i { width: 42px !important; height: 42px !important; }
  .desktop-impact-card h3 { font-size: 18px !important; }
  .desktop-impact-card p { font-size: 14px !important; }
  .desktop-hand-note { display: none !important; }
}

@media (min-width: 1500px) {
  .hero-wrap { padding-top: 22px !important; }
  .hero-heading { font-size: clamp(70px, 4.6vw, 80px) !important; }
}

/* Desktop-only homepage visual card fixes */
@media (min-width: 901px) {
  .desktop-hand-note {
    display: none !important;
  }

  .desktop-hero-benefits {
    align-items: start !important;
  }

  .desktop-benefit {
    min-width: 0 !important;
  }

  .desktop-benefit > span {
    display: grid !important;
    place-items: center !important;
  }

  .desktop-benefit strong,
  .desktop-benefit small {
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .desktop-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .desktop-proof {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: center !important;
    padding: 18px 20px !important;
  }

  .desktop-proof > span,
  .desktop-impact-card > span {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
  }

  .desktop-proof strong {
    font-size: 28px !important;
    white-space: nowrap !important;
  }

  .desktop-proof small {
    grid-column: 2 !important;
    margin-top: -12px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    max-width: 118px !important;
  }

  .desktop-impact-card {
    grid-template-columns: 54px minmax(250px, .95fr) minmax(260px, 1fr) !important;
    gap: 24px !important;
    align-items: center !important;
  }

  .desktop-impact-card strong {
    min-width: 0 !important;
    font-size: 22px !important;
    line-height: 1.13 !important;
  }

  .desktop-impact-card p {
    min-width: 0 !important;
    width: auto !important;
    padding-left: 26px !important;
    border-left: 1px solid rgba(83,100,132,.26) !important;
    font-size: 17px !important;
    line-height: 1.34 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .desktop-proof {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding: 14px 13px !important;
  }

  .desktop-proof > span,
  .desktop-impact-card > span {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .desktop-proof strong {
    font-size: 22px !important;
  }

  .desktop-proof small {
    grid-column: 2 !important;
    margin-top: -9px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    max-width: 95px !important;
  }

  .desktop-impact-card {
    grid-template-columns: 42px minmax(190px, .92fr) minmax(170px, 1fr) !important;
    gap: 16px !important;
    padding: 15px 18px !important;
  }

  .desktop-impact-card strong {
    font-size: 18px !important;
    line-height: 1.14 !important;
  }

  .desktop-impact-card p {
    padding-left: 18px !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
  }
}

/* Performance dashboard hero redesign */
@media (min-width: 768px) {
  .hero-heading--mobile,
  .hero-desc--mobile {
    display: none !important;
  }

  .hero-heading--desktop,
  .hero-desc--desktop {
    display: block !important;
  }

  .hero {
    min-height: 100vh !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 8% -8%, rgba(255,255,255,.96), transparent 24%),
      radial-gradient(circle at 96% 18%, rgba(147, 197, 253, .30), transparent 32%),
      radial-gradient(circle at 82% 92%, rgba(124, 58, 237, .09), transparent 28%),
      linear-gradient(135deg, #f8fcff 0%, #eff8ff 52%, #edf7ff 100%) !important;
  }

  .hero::before {
    opacity: .82 !important;
    background-size: 72px 72px !important;
    background-image:
      linear-gradient(rgba(37,99,235,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px) !important;
  }

  .hero::after,
  .blob,
  .desktop-hero-benefits {
    display: none !important;
  }

  .hero-wrap {
    width: min(1210px, calc(100% - 44px)) !important;
    max-width: 1210px !important;
    min-height: calc(100vh - 96px) !important;
    display: grid !important;
    grid-template-columns: minmax(390px, .82fr) minmax(560px, 1.18fr) !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: clamp(58px, 6vw, 96px) !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: clamp(42px, 7vh, 76px) 0 clamp(30px, 5vh, 58px) !important;
    margin: 0 auto !important;
  }

  .trust-pill {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: end !important;
    margin: 0 0 18px !important;
    min-height: 28px !important;
    padding: 0 14px 0 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.68) !important;
    border-color: rgba(189,211,241,.72) !important;
    box-shadow: 0 10px 24px rgba(15,76,129,.08), inset 0 1px 0 rgba(255,255,255,.95) !important;
  }

  .trust-copy strong {
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    color: #10172f !important;
  }

  .trust-copy strong::before {
    width: 10px !important;
    height: 10px !important;
    margin-right: 9px !important;
    background: #1278ff !important;
    box-shadow: 0 0 0 5px rgba(18,120,255,.10), 0 0 18px rgba(18,120,255,.32) !important;
  }

  .hero-heading {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: 590px !important;
    margin: 0 !important;
    color: #02091f !important;
    font-size: clamp(62px, 6.2vw, 82px) !important;
    line-height: .92 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
  }

  .headline-line {
    white-space: normal !important;
    text-wrap: balance !important;
  }

  .hl-cyan {
    position: relative !important;
    display: inline-block !important;
    background: linear-gradient(92deg, #0ea5ff 0%, #126bff 50%, #723eff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  .hl-cyan::after {
    content: "" !important;
    position: absolute !important;
    left: 9% !important;
    right: 4% !important;
    bottom: -10px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, #0ea5ff 18%, #126bff 52%, #7c3cff 86%, transparent) !important;
    filter: blur(.2px) !important;
    transform-origin: center !important;
    animation: heroUnderlineSweep 3.8s ease-in-out infinite !important;
  }

  .hero-desc {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-width: 520px !important;
    margin: 38px 0 26px !important;
    color: #465878 !important;
    font-size: clamp(16px, 1.55vw, 20px) !important;
    line-height: 1.48 !important;
    font-weight: 650 !important;
  }

  .hero-buttons {
    grid-column: 1 !important;
    grid-row: 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost {
    min-width: 205px !important;
    min-height: 54px !important;
    padding: 0 28px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    transform: translateZ(0) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  }

  .hero-buttons .btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, #10a9f6 0%, #0868f8 68%, #2557ff 100%) !important;
    box-shadow: 0 18px 34px rgba(8,104,248,.26), inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  .hero-buttons .btn-ghost {
    color: #050b1f !important;
    border: 1px solid rgba(191,211,239,.74) !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 15px 28px rgba(15,76,129,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  .hero-buttons .btn-ghost svg {
    width: 21px !important;
    height: 21px !important;
    margin-left: 8px !important;
    color: #0b65ff !important;
    stroke-width: 2.6 !important;
  }

  .hero-buttons a:hover {
    transform: translateY(-2px) !important;
  }

  .desktop-hero-assurance {
    grid-column: 1 !important;
    grid-row: 5 !important;
    display: flex !important;
    gap: clamp(18px, 2.4vw, 30px) !important;
    margin: 23px 0 0 !important;
    color: #536382 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .desktop-hero-assurance span {
    gap: 8px !important;
  }

  .desktop-hero-assurance svg {
    width: 17px !important;
    height: 17px !important;
    padding: 2px !important;
    color: #fff !important;
    background: #1278ff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 7px 14px rgba(18,120,255,.24) !important;
  }

  .right-col {
    grid-column: 2 !important;
    grid-row: 1 / span 5 !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  .right-col .cards-strip,
  .desktop-growth-card,
  .desktop-proof-grid,
  .desktop-impact-card {
    display: none !important;
  }

  .performance-hero-visual {
    position: relative !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(150px, 15vw, 178px) !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin: 0 !important;
    opacity: 0 !important;
    transform: translateY(18px) scale(.985) !important;
    animation: heroDashboardIn .8s cubic-bezier(.22, 1, .36, 1) .16s forwards !important;
  }

  .performance-card,
  .performance-metric {
    border: 1px solid rgba(190,213,243,.82) !important;
    background: rgba(255,255,255,.76) !important;
    box-shadow: 0 22px 50px rgba(15,76,129,.10), inset 0 1px 0 rgba(255,255,255,.96) !important;
    backdrop-filter: blur(22px) !important;
  }

  .performance-card {
    position: relative !important;
    min-height: 334px !important;
    padding: 28px 30px 22px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .performance-card::before {
    content: "" !important;
    position: absolute !important;
    inset: -40% auto auto -20% !important;
    width: 420px !important;
    height: 260px !important;
    background: radial-gradient(circle, rgba(14,165,255,.14), transparent 64%) !important;
    pointer-events: none !important;
  }

  .performance-card__top {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .performance-card__label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #12172c !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .performance-card__label span {
    width: 13px !important;
    height: 13px !important;
    border-radius: 999px !important;
    background: #22d394 !important;
    box-shadow: 0 0 0 9px rgba(34,211,148,.12), 0 0 22px rgba(34,211,148,.36) !important;
  }

  .performance-card__range {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(190,213,243,.92) !important;
    background: rgba(255,255,255,.68) !important;
    color: #17213a !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 20px rgba(15,76,129,.06) !important;
  }

  .performance-card__range svg {
    width: 13px !important;
    height: 13px !important;
    color: #0868f8 !important;
    stroke-width: 2.6 !important;
  }

  .performance-card__number {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 28px !important;
    color: #050914 !important;
    font-size: clamp(42px, 4.2vw, 48px) !important;
    line-height: .9 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
  }

  .performance-card__sub {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 12px !important;
    color: #61708e !important;
    font-size: 14px !important;
    font-weight: 760 !important;
  }

  .performance-card__trend {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 14px !important;
  }

  .performance-card__trend span {
    min-height: 27px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 11px !important;
    border-radius: 8px !important;
    color: #0cae73 !important;
    background: rgba(34,211,148,.18) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .performance-card__trend svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2.9 !important;
  }

  .performance-card__trend small {
    color: #61708e !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }

  .performance-card__bubble {
    position: absolute !important;
    z-index: 4 !important;
    right: 30px !important;
    top: 134px !important;
    min-width: 112px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(218,229,246,.88) !important;
    box-shadow: 0 16px 30px rgba(15,76,129,.12) !important;
  }

  .performance-card__bubble strong {
    display: block !important;
    color: #0868f8 !important;
    font-size: 12px !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
  }

  .performance-card__bubble small {
    display: block !important;
    margin-top: 4px !important;
    color: #61708e !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  .performance-chart {
    position: absolute !important;
    left: 30px !important;
    right: 24px !important;
    bottom: 20px !important;
    z-index: 1 !important;
    width: calc(100% - 54px) !important;
    height: 176px !important;
    overflow: visible !important;
  }

  .performance-chart__area {
    fill: url(#performanceArea) !important;
    opacity: .95 !important;
  }

  .performance-chart__line {
    fill: none !important;
    stroke: #096fff !important;
    stroke-width: 4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-dasharray: 100 !important;
    stroke-dashoffset: 100 !important;
    animation: performanceLineDraw 1.7s cubic-bezier(.22,1,.36,1) .58s forwards, performanceLinePulse 3s ease-in-out 2.4s infinite !important;
  }

  .performance-chart__shadow {
    stroke: rgba(9,111,255,.16) !important;
    stroke-width: 13 !important;
    filter: blur(8px) !important;
  }

  .performance-chart__dot {
    fill: #096fff !important;
    stroke: #ffffff !important;
    stroke-width: 5 !important;
    filter: drop-shadow(0 8px 12px rgba(9,111,255,.28)) !important;
    opacity: 0 !important;
    transform-origin: 504px 44px !important;
    animation: metricDotIn .45s ease .95s forwards, metricDotPulse 2.4s ease-in-out 1.45s infinite !important;
  }

  .performance-chart__dates text {
    fill: #64718c !important;
    font-size: 13px !important;
    font-weight: 760 !important;
  }

  .performance-metrics {
    display: grid !important;
    gap: 6px !important;
  }

  .performance-metric {
    position: relative !important;
    min-height: 81px !important;
    display: grid !important;
    grid-template-columns: 47px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    column-gap: 14px !important;
    padding: 13px 16px !important;
    border-radius: 14px !important;
    opacity: 0 !important;
    transform: translateX(18px) !important;
    animation: metricCardIn .56s cubic-bezier(.22,1,.36,1) forwards !important;
  }

  .performance-metric:nth-child(1) { animation-delay: .35s !important; }
  .performance-metric:nth-child(2) { animation-delay: .45s !important; }
  .performance-metric:nth-child(3) { animation-delay: .55s !important; }
  .performance-metric:nth-child(4) { animation-delay: .65s !important; }

  .performance-metric span {
    grid-row: 1 / span 2 !important;
    width: 47px !important;
    height: 47px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    color: #0868f8 !important;
    background: linear-gradient(145deg, rgba(14,165,255,.12), rgba(139,92,246,.08)) !important;
  }

  .performance-metric svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .performance-metric strong {
    color: #030817 !important;
    font-size: 24px !important;
    line-height: .96 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }

  .performance-metric small {
    margin-top: 6px !important;
    color: #50617f !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    font-weight: 760 !important;
  }

  .performance-metric i {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    color: #20c77d !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 900 !important;
  }

  .performance-metric em {
    grid-column: 2 !important;
    margin-top: 7px !important;
    color: #f8b400 !important;
    font-size: 13px !important;
    font-style: normal !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
  }
}

@media (min-width: 1280px) {
  .hero-wrap {
    padding-top: clamp(46px, 7vh, 78px) !important;
  }

  .hero-heading {
    font-size: clamp(72px, 5.15vw, 88px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .hero-topbar {
    grid-template-columns: 216px 1fr 178px !important;
    gap: 8px !important;
  }

  .hero-desktop-menu a {
    padding: 0 7px !important;
    font-size: 10.5px !important;
  }

  .hero-wrap {
    width: min(980px, calc(100% - 34px)) !important;
    grid-template-columns: minmax(330px, .78fr) minmax(490px, 1.22fr) !important;
    column-gap: 28px !important;
    padding-top: 28px !important;
  }

  .hero-heading {
    font-size: clamp(50px, 5.9vw, 62px) !important;
  }

  .hero-desc {
    max-width: 420px !important;
    margin-top: 30px !important;
    margin-bottom: 22px !important;
    font-size: 15px !important;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost {
    min-width: 168px !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    font-size: 13px !important;
  }

  .desktop-hero-assurance {
    display: none !important;
  }

  .performance-hero-visual {
    grid-template-columns: minmax(0, 1fr) 132px !important;
    gap: 12px !important;
  }

  .performance-card {
    min-height: 300px !important;
    padding: 22px 22px 18px !important;
  }

  .performance-card__number {
    margin-top: 22px !important;
    font-size: 40px !important;
  }

  .performance-card__bubble {
    right: 18px !important;
    top: 124px !important;
    transform: scale(.9) !important;
    transform-origin: top right !important;
  }

  .performance-chart {
    left: 22px !important;
    right: 18px !important;
    bottom: 18px !important;
    width: calc(100% - 40px) !important;
    height: 156px !important;
  }

  .performance-metric {
    min-height: 72px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding: 11px 12px !important;
  }

  .performance-metric span {
    width: 40px !important;
    height: 40px !important;
  }

  .performance-metric svg {
    width: 22px !important;
    height: 22px !important;
  }

  .performance-metric strong {
    font-size: 20px !important;
  }

  .performance-metric small {
    font-size: 10px !important;
  }

  .performance-metric em {
    font-size: 11px !important;
    letter-spacing: .4px !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .hero-topbar {
    width: min(720px, calc(100% - 28px)) !important;
    grid-template-columns: minmax(200px, 1fr) auto !important;
    min-height: 66px !important;
  }

  .hero-desktop-menu {
    display: none !important;
  }

  .hero-top-actions .top-start {
    width: auto !important;
    min-width: 176px !important;
  }

  .hero-wrap {
    width: min(720px, calc(100% - 34px)) !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    row-gap: 22px !important;
    padding: 44px 0 56px !important;
  }

  .trust-pill,
  .hero-heading,
  .hero-desc,
  .hero-buttons,
  .desktop-hero-assurance,
  .right-col {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .hero-heading {
    max-width: 650px !important;
    font-size: clamp(54px, 8.4vw, 68px) !important;
  }

  .hero-desc {
    max-width: 600px !important;
    margin: 8px 0 0 !important;
    font-size: 17px !important;
  }

  .hero-buttons {
    margin-top: 2px !important;
  }

  .desktop-hero-assurance {
    display: flex !important;
    margin-top: -2px !important;
  }

  .performance-hero-visual {
    grid-template-columns: minmax(0, 1fr) 150px !important;
    gap: 14px !important;
    max-width: 700px !important;
    margin-top: 4px !important;
  }

  .performance-card {
    min-height: 304px !important;
  }
}

@media (max-width: 767px) {
  .hero-heading--desktop,
  .hero-desc--desktop,
  .performance-hero-visual {
    display: none !important;
  }

  .hero-heading--mobile,
  .hero-desc--mobile {
    display: block !important;
  }
}

@keyframes heroDashboardIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes metricCardIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes performanceLineDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes performanceLinePulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(9,111,255,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(9,111,255,.34)); }
}

@keyframes metricDotIn {
  to { opacity: 1; }
}

@keyframes metricDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes heroUnderlineSweep {
  0%, 100% { transform: scaleX(.84); opacity: .72; }
  50% { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .performance-hero-visual,
  .performance-metric,
  .performance-chart__line,
  .performance-chart__dot,
  .hl-cyan::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Performance hero QA fixes */
@media (min-width: 768px) {
  .performance-hero-visual {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .performance-card {
    animation: performanceCardFloat 5.5s ease-in-out infinite !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .hero-topbar {
    display: grid !important;
  }

  .hero-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost {
    width: auto !important;
    min-width: 210px !important;
  }
}

@media (max-width: 767px) {
  .hero-buttons {
    min-height: 0 !important;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost {
    min-height: 54px !important;
  }

  .hero-buttons .btn-ghost svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin-left: 8px !important;
  }
}

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

/* Hero work button responsive visibility */
@media (min-width: 768px) {
  .hero-work-link--mobile { display: none !important; }
  .hero-work-link--desktop { display: inline-flex !important; }
}

@media (max-width: 767px) {
  .hero-work-link--desktop { display: none !important; }
  .hero-work-link--mobile { display: inline-flex !important; }
}

/* Performance hero visibility lock */
@media (min-width: 768px) {
  .hero-heading--desktop,
  .hero-desc--desktop,
  .hero-buttons,
  .desktop-hero-assurance,
  .trust-pill {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Performance metric column lock */
@media (min-width: 901px) {
  .performance-hero-visual {
    grid-template-columns: minmax(0, 1fr) 178px !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .performance-metrics {
    display: grid !important;
    grid-template-rows: repeat(4, minmax(82px, 1fr)) !important;
    gap: 7px !important;
    min-width: 178px !important;
    align-self: stretch !important;
  }

  .performance-metric {
    min-width: 0 !important;
    min-height: 82px !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    column-gap: 14px !important;
    padding: 13px 15px !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(190, 213, 243, .86) !important;
    box-shadow: 0 18px 34px rgba(15, 76, 129, .10), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .performance-metric span {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 50px !important;
    height: 50px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    color: #0876ff !important;
    background: linear-gradient(145deg, rgba(14, 165, 255, .12), rgba(139, 92, 246, .08)) !important;
  }

  .performance-metric svg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 2.7 !important;
  }

  .performance-metric strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    color: #030817 !important;
    font-size: 24px !important;
    line-height: .96 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .performance-metric small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    margin-top: 6px !important;
    color: #475a78 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 750 !important;
    white-space: normal !important;
  }

  .performance-metric i {
    display: block !important;
    position: absolute !important;
    top: 17px !important;
    right: 17px !important;
    color: #22c879 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 950 !important;
  }

  .performance-metric em {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: block !important;
    margin-top: 8px !important;
    color: #f8b400 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-style: normal !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .performance-hero-visual {
    grid-template-columns: minmax(0, 1fr) 148px !important;
    gap: 12px !important;
  }

  .performance-metrics {
    min-width: 148px !important;
    grid-template-rows: repeat(4, minmax(72px, 1fr)) !important;
    gap: 6px !important;
  }

  .performance-metric {
    min-height: 72px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding: 10px 11px !important;
    border-radius: 13px !important;
  }

  .performance-metric span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
  }

  .performance-metric svg {
    width: 23px !important;
    height: 23px !important;
  }

  .performance-metric strong {
    font-size: 20px !important;
  }

  .performance-metric small {
    margin-top: 5px !important;
    font-size: 10.5px !important;
  }

  .performance-metric i {
    top: 14px !important;
    right: 12px !important;
    font-size: 15px !important;
  }

  .performance-metric em {
    margin-top: 6px !important;
    font-size: 10.5px !important;
    letter-spacing: .5px !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .performance-hero-visual {
    grid-template-columns: minmax(0, 1fr) 156px !important;
    gap: 12px !important;
  }

  .performance-metrics {
    display: grid !important;
    min-width: 156px !important;
    gap: 7px !important;
  }

  .performance-metric {
    min-height: 78px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding: 12px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .performance-metric span {
    width: 44px !important;
    height: 44px !important;
  }

  .performance-metric strong {
    font-size: 21px !important;
  }

  .performance-metric small {
    font-size: 10.8px !important;
  }

  .performance-metric em {
    font-size: 11px !important;
    letter-spacing: .55px !important;
  }
}

/* Adaptive performance hero columns */
@media (min-width: 901px) {
  .hero-wrap {
    width: min(1210px, calc(100% - clamp(34px, 5vw, 96px))) !important;
    grid-template-columns: minmax(0, clamp(360px, 38vw, 520px)) minmax(0, 1fr) !important;
    column-gap: clamp(30px, 5.4vw, 86px) !important;
  }

  .right-col,
  .performance-hero-visual,
  .performance-card,
  .performance-metrics,
  .performance-metric {
    min-width: 0 !important;
  }

  .performance-hero-visual {
    grid-template-columns: minmax(0, 1fr) clamp(148px, 13.6vw, 188px) !important;
    gap: clamp(12px, 1.25vw, 18px) !important;
    align-items: stretch !important;
  }

  .performance-card {
    min-height: clamp(318px, 27vw, 372px) !important;
    padding: clamp(22px, 2vw, 30px) clamp(22px, 2.2vw, 30px) 20px !important;
  }

  .performance-chart {
    height: clamp(150px, 13.2vw, 176px) !important;
  }

  .performance-metrics {
    min-width: clamp(148px, 13.6vw, 188px) !important;
    grid-template-rows: repeat(4, minmax(clamp(82px, 7.5vw, 106px), 1fr)) !important;
    gap: clamp(6px, .65vw, 8px) !important;
  }

  .performance-metric {
    grid-template-columns: clamp(40px, 3.8vw, 52px) minmax(0, 1fr) !important;
    column-gap: clamp(10px, 1vw, 14px) !important;
    padding: clamp(10px, 1.15vw, 15px) !important;
  }

  .performance-metric span {
    width: clamp(40px, 3.8vw, 52px) !important;
    height: clamp(40px, 3.8vw, 52px) !important;
  }

  .performance-metric strong {
    font-size: clamp(20px, 1.9vw, 26px) !important;
  }

  .performance-metric small {
    font-size: clamp(10.5px, .92vw, 12px) !important;
  }

  .performance-metric em {
    font-size: clamp(10.5px, .95vw, 13px) !important;
    letter-spacing: clamp(.45px, .07vw, 1px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .hero-wrap {
    width: min(1000px, calc(100% - 34px)) !important;
    grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr) !important;
    column-gap: clamp(20px, 3vw, 30px) !important;
    padding-top: clamp(24px, 4vh, 34px) !important;
  }

  .hero-heading {
    font-size: clamp(46px, 5.35vw, 58px) !important;
    max-width: 390px !important;
  }

  .hero-desc {
    max-width: 390px !important;
    margin-top: 28px !important;
    margin-bottom: 20px !important;
    font-size: clamp(14px, 1.42vw, 15px) !important;
    line-height: 1.42 !important;
  }

  .hero-buttons {
    gap: 12px !important;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost {
    min-width: clamp(150px, 17vw, 172px) !important;
    min-height: 48px !important;
    padding-inline: 18px !important;
    font-size: 13px !important;
  }

  .performance-hero-visual {
    grid-template-columns: minmax(0, 1fr) clamp(136px, 14vw, 150px) !important;
  }

  .performance-card {
    min-height: clamp(292px, 31vw, 326px) !important;
  }

  .performance-card__number {
    font-size: clamp(34px, 4vw, 40px) !important;
  }

  .performance-card__bubble {
    right: 16px !important;
    top: 122px !important;
    transform: scale(.88) !important;
    transform-origin: top right !important;
  }
}

@media (min-width: 901px) and (max-width: 960px) {
  .hero-wrap {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    row-gap: 22px !important;
    padding-top: 34px !important;
    padding-bottom: 56px !important;
  }

  .trust-pill,
  .hero-heading,
  .hero-desc,
  .hero-buttons,
  .desktop-hero-assurance,
  .right-col {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .hero-heading {
    max-width: 680px !important;
    font-size: clamp(54px, 7vw, 66px) !important;
  }

  .hero-desc {
    max-width: 610px !important;
    margin: 6px 0 0 !important;
    font-size: 17px !important;
  }

  .hero-buttons {
    margin-top: 0 !important;
  }

  .desktop-hero-assurance {
    display: flex !important;
    margin-top: -2px !important;
  }

  .right-col {
    margin-top: 8px !important;
  }

  .performance-hero-visual {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    grid-template-columns: minmax(0, 1fr) clamp(148px, 18vw, 170px) !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .performance-hero-visual {
    width: min(720px, 100%) !important;
    grid-template-columns: minmax(0, 1fr) clamp(146px, 20vw, 158px) !important;
    gap: clamp(10px, 1.7vw, 14px) !important;
  }

  .performance-card {
    min-height: clamp(292px, 39vw, 326px) !important;
    padding: 20px !important;
  }

  .performance-metrics {
    min-width: clamp(146px, 20vw, 158px) !important;
    gap: 7px !important;
  }
}

@media (min-width: 768px) and (max-width: 790px) {
  .performance-hero-visual {
    grid-template-columns: 1fr !important;
  }

  .performance-metrics {
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }
}

/* Executive performance hero polish */
@media (min-width: 768px) {
  .hero { isolation: isolate !important; }
  .hero-topbar {
    border-color: rgba(178, 204, 236, .82) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)) !important;
    box-shadow: 0 18px 42px rgba(15,76,129,.095), inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
  .hero-brand-mark { box-shadow: 0 16px 30px rgba(23, 110, 232, .24), inset 0 1px 0 rgba(255,255,255,.28) !important; }
  .hero-desktop-menu a { border: 1px solid transparent !important; }
  .hero-desktop-menu a[aria-current="page"] {
    border-color: rgba(14, 133, 255, .12) !important;
    background: linear-gradient(180deg, rgba(14,133,255,.12), rgba(14,133,255,.06)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  }
  .hero-heading { text-wrap: balance !important; text-shadow: 0 16px 34px rgba(5, 13, 45, .08) !important; }
  .hero-desc { text-wrap: pretty !important; }
  .hero-buttons .btn-primary { position: relative !important; overflow: hidden !important; }
  .hero-buttons .btn-primary::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.26) 42%, transparent 64%) !important;
    transform: translateX(-125%) !important;
    animation: ctaSheen 4.6s ease-in-out infinite !important;
  }
  .hero-buttons .btn-ghost { gap: 8px !important; }
  .desktop-hero-assurance { align-items: center !important; }
  .performance-hero-visual { filter: drop-shadow(0 28px 50px rgba(15, 76, 129, .08)) !important; }
  .performance-card, .performance-metric {
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(247,251,255,.72)) !important;
    border-color: rgba(178, 204, 236, .82) !important;
  }
  .performance-card { box-shadow: 0 24px 56px rgba(15,76,129,.105), inset 0 1px 0 rgba(255,255,255,.98) !important; }
  .performance-card__top, .performance-card__number, .performance-card__sub, .performance-card__trend, .performance-card__bubble { position: relative !important; z-index: 3 !important; }
  .performance-card__range { cursor: default !important; }
  .performance-card__sub, .performance-card__trend small, .performance-card__bubble small, .performance-metric small { color: #51617f !important; }
  .performance-card__bubble { background: rgba(255,255,255,.94) !important; box-shadow: 0 18px 34px rgba(15,76,129,.13), inset 0 1px 0 rgba(255,255,255,.98) !important; }
  .performance-chart__line { stroke-width: 4.2 !important; }
  .performance-chart__shadow { opacity: .85 !important; }
  .performance-chart__dates text { font-size: 12px !important; fill: #687894 !important; }
  .performance-metric { overflow: hidden !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; }
  .performance-metric::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #0ea5ff, #2563ff, #7c3cff) !important;
    opacity: .45 !important;
  }
  .performance-metric:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(37, 99, 235, .30) !important;
    box-shadow: 0 22px 42px rgba(15,76,129,.13), inset 0 1px 0 rgba(255,255,255,1) !important;
  }
  .performance-metric span { box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 12px 22px rgba(37,99,235,.10) !important; }
}
@media (min-width: 1180px) { .hero-wrap { transform: translateY(-6px) !important; } }
@media (min-width: 901px) and (max-width: 1179px) {
  .hero-wrap { transform: none !important; }
  .performance-card__label { font-size: 12px !important; }
  .performance-card__range { font-size: 11px !important; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .hero-wrap { transform: none !important; }
  .performance-metric:hover { transform: none !important; }
}
@keyframes ctaSheen { 0%, 42% { transform: translateX(-125%); } 62%, 100% { transform: translateX(125%); } }

/* Final hero composition */
@media (min-width: 901px) {
  .performance-hero-visual {
    grid-template-columns: minmax(0, 1fr) clamp(154px, 13vw, 188px) !important;
    gap: clamp(14px, 1.35vw, 18px) !important;
    align-items: center !important;
  }

  .performance-card {
    min-height: clamp(322px, 27vw, 370px) !important;
    height: clamp(322px, 27vw, 370px) !important;
    padding: clamp(22px, 2vw, 30px) clamp(24px, 2.3vw, 32px) 20px !important;
  }

  .performance-metrics {
    height: clamp(322px, 27vw, 370px) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .performance-metric {
    min-height: 0 !important;
    height: auto !important;
  }

  .performance-card__bubble {
    position: absolute !important;
    top: 124px !important;
    right: 26px !important;
    transform: none !important;
  }

  .performance-chart {
    left: 30px !important;
    right: 26px !important;
    bottom: 16px !important;
    width: calc(100% - 56px) !important;
    height: clamp(148px, 12.2vw, 166px) !important;
    padding-top: 8px !important;
    border-radius: 14px !important;
    background-image:
      linear-gradient(rgba(37,99,235,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37,99,235,.055) 1px, transparent 1px) !important;
    background-size: 100% 33.333%, 25% 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .performance-card {
    min-height: 316px !important;
    height: 316px !important;
  }

  .performance-metrics {
    height: 316px !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .performance-metric {
    min-height: 0 !important;
    height: auto !important;
  }

  .performance-card__bubble {
    position: absolute !important;
    top: 116px !important;
    right: 18px !important;
    transform: none !important;
  }

  .performance-chart {
    bottom: 14px !important;
    height: 142px !important;
  }
}

@media (min-width: 768px) and (max-width: 790px) {
  .performance-card {
    height: 304px !important;
  }

  .performance-metrics {
    height: auto !important;
    grid-template-rows: none !important;
  }
}
/* Customer photo avatars in the trust proof chip */
.trust-pill .avatar-dot {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #dbeafe !important;
  color: transparent !important;
}
/* Executive metric cards */
@media (min-width: 768px) {
  .performance-metrics {
    isolation: isolate !important;
  }

  .performance-metric {
    --metric-accent: #1677ff;
    --metric-soft: rgba(22, 119, 255, .12);
    position: relative !important;
    isolation: isolate !important;
    align-items: center !important;
    border-radius: 18px !important;
    border-color: rgba(175, 202, 235, .74) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(245, 250, 255, .78)) !important;
    box-shadow:
      0 14px 28px rgba(15, 76, 129, .075),
      inset 0 1px 0 rgba(255, 255, 255, .98) !important;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s ease, border-color .24s ease !important;
  }

  .performance-metric:nth-child(2) { --metric-accent: #11b981; --metric-soft: rgba(17, 185, 129, .12); }
  .performance-metric:nth-child(3) { --metric-accent: #f5a800; --metric-soft: rgba(245, 168, 0, .13); }
  .performance-metric:nth-child(4) { --metric-accent: #0ea5e9; --metric-soft: rgba(14, 165, 233, .12); }

  .performance-metric::after {
    top: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--metric-accent), color-mix(in srgb, var(--metric-accent) 18%, transparent)) !important;
    opacity: .72 !important;
  }

  .performance-metric::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 18% !important;
    bottom: 18% !important;
    width: 3px !important;
    border-radius: 0 999px 999px 0 !important;
    background: linear-gradient(180deg, transparent, var(--metric-accent), transparent) !important;
    opacity: .58 !important;
    pointer-events: none !important;
  }

  .performance-metric span {
    border: 1px solid color-mix(in srgb, var(--metric-accent) 10%, white) !important;
    background:
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .98), transparent 42%),
      linear-gradient(145deg, var(--metric-soft), rgba(139, 92, 246, .06)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .96),
      0 10px 20px color-mix(in srgb, var(--metric-accent) 11%, transparent) !important;
  }

  .performance-metric span svg {
    color: var(--metric-accent) !important;
    filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--metric-accent) 18%, transparent)) !important;
  }

  .performance-metric strong {
    letter-spacing: 0 !important;
    text-shadow: 0 4px 12px rgba(15, 23, 42, .08) !important;
  }

  .performance-metric small {
    color: #52627e !important;
    font-weight: 780 !important;
    letter-spacing: 0 !important;
  }

  .performance-metric em {
    text-shadow: 0 3px 8px rgba(245, 168, 0, .2) !important;
  }

  .performance-metric i {
    color: #18b875 !important;
    text-shadow: 0 4px 10px rgba(24, 184, 117, .2) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .performance-metric:hover {
      transform: translateY(-3px) !important;
      border-color: color-mix(in srgb, var(--metric-accent) 30%, rgba(175, 202, 235, .74)) !important;
      box-shadow:
        0 20px 34px color-mix(in srgb, var(--metric-accent) 13%, rgba(15, 76, 129, .1)),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    }
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .performance-metric {
    border-radius: 16px !important;
  }
}
/* Refined metric icon system */
@media (min-width: 768px) {
  .performance-metrics {
    gap: 10px !important;
  }

  .performance-metric {
    border-radius: 20px !important;
    padding: 12px 14px 12px 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(246, 250, 255, .82)) !important;
    box-shadow:
      0 14px 30px rgba(15, 76, 129, .08),
      inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  }

  .performance-metric::before,
  .performance-metric::after {
    display: none !important;
  }

  .performance-metric__icon::before,
  .performance-metric__icon::after {
    content: none !important;
    display: none !important;
  }

  .performance-metric__icon {
    border: 1px solid color-mix(in srgb, var(--metric-accent, #1677ff) 13%, white) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .98), transparent 43%),
      linear-gradient(145deg, var(--metric-soft, rgba(22, 119, 255, .12)), rgba(139, 92, 246, .055)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .98),
      0 10px 20px color-mix(in srgb, var(--metric-accent, #1677ff) 10%, transparent) !important;
  }

  .performance-metric__icon svg {
    width: 25px !important;
    height: 25px !important;
    color: var(--metric-accent, #1677ff) !important;
    stroke-width: 2.15 !important;
    filter: none !important;
  }

  .performance-metric strong {
    font-size: clamp(21px, 1.85vw, 26px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  .performance-metric small {
    margin-top: 5px !important;
    color: #52627e !important;
    font-size: clamp(10.5px, .88vw, 12px) !important;
    line-height: 1.13 !important;
    font-weight: 780 !important;
  }

  .performance-metric i {
    top: 15px !important;
    right: 15px !important;
    font-size: 16px !important;
  }

  .performance-metric em {
    margin-top: 5px !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .performance-metric {
    border-radius: 17px !important;
    padding: 11px !important;
  }

  .performance-metric__icon svg {
    width: 23px !important;
    height: 23px !important;
  }
}


/* Clean four-page desktop header */
@media (min-width: 901px) {
  .hero-topbar {
    grid-template-columns: minmax(230px, 1fr) auto minmax(210px, 245px) !important;
    gap: clamp(16px, 2vw, 30px) !important;
    min-height: 70px !important;
    padding: 10px 14px 10px 18px !important;
    border-radius: 26px !important;
  }

  .hero-brand { min-width: 0; }

  .hero-desktop-menu {
    justify-content: center !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  .hero-desktop-menu a {
    min-height: 40px !important;
    padding: 0 15px !important;
    color: #263452 !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
  }

  .hero-desktop-menu a:hover,
  .hero-desktop-menu a[aria-current="page"] {
    color: #126dff !important;
    background: rgba(14, 133, 255, .1) !important;
    box-shadow: inset 0 0 0 1px rgba(91, 156, 255, .12) !important;
    transform: none !important;
  }

  .hero-top-actions .top-start {
    min-width: 210px !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .hero-topbar {
    grid-template-columns: minmax(200px, 1fr) auto minmax(180px, 205px) !important;
    gap: 12px !important;
    padding-left: 14px !important;
  }

  .hero-desktop-menu { gap: 0 !important; }
  .hero-desktop-menu a { padding: 0 10px !important; font-size: 11px !important; }
  .hero-top-actions .top-start { min-width: 180px !important; font-size: 13px !important; }
}

/* Picture-perfect laptop process section */
.process-stats,
.process-handnote,
.process-note-card,
.process-icon,
.process-card-number,
.process-arrow,
.process-footer-line {
  display: none;
}

@media (min-width: 901px) {
  .process-showcase {
    min-height: 930px;
    padding: 76px clamp(38px, 5vw, 92px) 70px !important;
    overflow: hidden;
    background:
      radial-gradient(ellipse 74% 52% at 74% 45%, rgba(210, 228, 255, .82), transparent 68%),
      radial-gradient(ellipse 38% 30% at 23% 92%, rgba(198, 215, 255, .68), transparent 70%),
      linear-gradient(135deg, #fbfdff 0%, #f6faff 42%, #edf5ff 100%) !important;
    isolation: isolate;
  }

  .process-showcase::before {
    content: "";
    position: absolute;
    inset: -18% -13% -12% -10%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 42% 31% at 86% 36%, transparent 60%, rgba(154, 192, 255, .4) 61%, rgba(154, 192, 255, .32) 68%, transparent 69%),
      radial-gradient(ellipse 40% 24% at 24% 101%, transparent 55%, rgba(166, 193, 255, .42) 56%, rgba(166, 193, 255, .27) 65%, transparent 66%);
    mask-image: none !important;
  }

  .process-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(132deg, transparent 0 61%, rgba(255,255,255,.52) 61.2%, transparent 62.2%),
      linear-gradient(28deg, transparent 0 59%, rgba(255,255,255,.5) 59.2%, transparent 60.2%);
    opacity: .76;
  }

  .process-showcase .process-shell {
    width: min(1320px, 100%);
    min-height: 780px;
    display: grid;
    grid-template-columns: minmax(360px, .9fr) 86px minmax(520px, 1.16fr);
    column-gap: clamp(24px, 3.4vw, 58px);
    align-items: center;
  }

  .process-showcase .process-intro {
    width: 100%;
    margin: 0;
    text-align: left;
    align-self: center;
    padding: 10px 0 74px;
  }

  .process-showcase .process-eyebrow {
    height: 29px;
    min-height: 29px;
    margin-bottom: 18px;
    padding: 0 17px 0 13px;
    gap: 12px;
    border-color: rgba(94, 159, 255, .33);
    background: rgba(255,255,255,.74);
    color: #0b6fff;
    box-shadow: 0 10px 24px rgba(31, 98, 214, .08), inset 0 1px 0 rgba(255,255,255,.95);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
  }

  .process-showcase .process-eyebrow span {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 7px rgba(37, 133, 248, .08);
  }

  .process-showcase .process-intro h2 {
    max-width: 470px;
    font-size: clamp(66px, 5.35vw, 82px);
    line-height: .94;
    letter-spacing: 0;
    text-wrap: balance;
  }

  .process-showcase .process-intro h2 span {
    display: block;
    background: linear-gradient(95deg, #0b7cff 0%, #176ee8 52%, #5f35ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .process-showcase .process-intro p {
    width: min(420px, 100%);
    margin: 28px 0 0;
    color: #516498;
    font-size: 20px;
    line-height: 1.36;
    font-weight: 650;
  }

  .process-showcase .process-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    align-items: start;
    gap: 0;
    margin-top: 36px;
    padding-top: 31px;
  }

  .process-showcase .process-stats::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: #8ab6ff;
  }

  .process-showcase .process-stat {
    min-width: 124px;
    padding-right: 25px;
  }

  .process-showcase .process-stat + .process-stat {
    padding-left: 24px;
    border-left: 1px solid rgba(57, 120, 235, .28);
  }

  .process-showcase .process-stat strong {
    display: block;
    color: #070b1e;
    font-size: 18px;
    line-height: 1;
    font-weight: 950;
  }

  .process-showcase .process-stat span {
    display: block;
    margin-top: 6px;
    color: #485a8d;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 650;
  }

  .process-showcase .process-list {
    grid-column: 2 / 4;
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 16px clamp(24px, 3vw, 38px);
    align-items: center;
  }

  .process-showcase .process-list::before {
    left: 42px;
    top: 0;
    bottom: 0;
    width: 1px;
    border-radius: 0;
    background: repeating-linear-gradient(180deg, rgba(116, 166, 255, .62) 0 9px, transparent 9px 18px);
    box-shadow: none;
  }

  .process-showcase .process-list::after,
  .process-showcase.is-visible .process-list::after {
    display: none !important;
    animation: none !important;
  }

  .process-showcase .process-step {
    display: contents;
  }

  .process-showcase .process-number {
    grid-column: 1;
    width: 56px;
    height: 56px;
    justify-self: center;
    border: 1px solid rgba(106, 163, 255, .4);
    background: rgba(255,255,255,.82);
    color: #1479ff;
    box-shadow: 0 12px 28px rgba(31, 111, 240, .12), inset 0 1px 0 rgba(255,255,255,.98);
    font-size: 19px;
    font-weight: 950;
  }

  .process-showcase .process-card {
    grid-column: 2;
    min-height: 112px;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 24px;
    padding: 17px 22px 17px 20px;
    border: 1px solid rgba(207, 219, 241, .68);
    border-radius: 17px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 18px 44px rgba(43, 89, 150, .07), inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
  }

  .process-showcase .process-icon,
  .process-showcase .process-arrow,
  .process-showcase .process-card-number {
    display: grid;
  }

  .process-showcase .process-icon {
    width: 60px;
    height: 60px;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(145deg, #eef6ff, #e7f0ff);
    color: #126dff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 10px 22px rgba(33, 116, 240, .08);
  }

  .process-showcase .process-icon svg {
    width: 31px;
    height: 31px;
  }

  .process-showcase .process-copy {
    min-width: 0;
  }

  .process-showcase .process-card h3 {
    margin: 0;
    color: #080d22;
    font-size: 18px;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: 0;
  }

  .process-showcase .process-card p {
    max-width: 470px;
    margin: 7px 0 0;
    color: #40568d;
    font-size: 15px;
    line-height: 1.28;
    font-weight: 600;
  }

  .process-showcase .process-card-number {
    position: absolute;
    top: 18px;
    right: 26px;
    place-items: center;
    color: rgba(83, 111, 171, .36);
    font-size: 19px;
    line-height: 1;
    font-weight: 950;
  }

  .process-showcase .process-arrow {
    width: 38px;
    height: 38px;
    grid-column: 3;
    place-items: center;
    justify-self: end;
    align-self: end;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #0c54bb;
    box-shadow: 0 9px 20px rgba(40, 91, 165, .12), inset 0 1px 0 rgba(255,255,255,.96);
  }

  .process-showcase .process-arrow svg {
    width: 17px;
    height: 17px;
  }

  .process-showcase .process-step.is-active:not(:nth-child(3)) .process-number,
  .process-showcase .process-step.is-near .process-number {
    color: #1479ff !important;
    border-color: rgba(106, 163, 255, .4) !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 12px 28px rgba(31, 111, 240, .12), inset 0 1px 0 rgba(255,255,255,.98) !important;
    transform: none !important;
  }

  .process-showcase .process-step.is-active:not(:nth-child(3)) .process-card {
    border-color: rgba(207, 219, 241, .68) !important;
    background: rgba(255,255,255,.74) !important;
    box-shadow: 0 18px 44px rgba(43, 89, 150, .07), inset 0 1px 0 rgba(255,255,255,.92) !important;
    transform: none !important;
  }

  .process-showcase .process-step:nth-child(3) .process-number {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.86) !important;
    background: linear-gradient(135deg, #1392ff 0%, #176ee8 56%, #3d45ff 100%) !important;
    box-shadow: 0 18px 34px rgba(27, 101, 230, .32), 0 0 28px rgba(52, 103, 255, .28), inset 0 1px 0 rgba(255,255,255,.4) !important;
    transform: scale(1.03) !important;
  }

  .process-showcase .process-step:nth-child(3) .process-card {
    border-color: rgba(18, 109, 255, .95) !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 22px 48px rgba(31, 103, 225, .12), inset 0 1px 0 rgba(255,255,255,.96) !important;
    transform: none !important;
  }

  .process-showcase .process-step:nth-child(3) .process-card-number {
    color: rgba(18, 109, 255, .66);
  }

  .process-showcase .process-step:nth-child(3) .process-arrow {
    background: linear-gradient(135deg, #1090ff, #176ee8 62%, #2644ff);
    color: #ffffff;
    box-shadow: 0 13px 24px rgba(23, 110, 232, .32), inset 0 1px 0 rgba(255,255,255,.32);
  }

  .process-showcase.is-visible .process-number,
  .process-showcase.is-visible .process-card {
    animation: none !important;
  }

  .process-showcase .process-handnote {
    position: absolute;
    z-index: 2;
    display: block;
    color: #243c7c;
    font-family: "Comic Sans MS", "Segoe Print", cursive;
    font-size: 17px;
    line-height: 1.05;
    font-weight: 650;
    letter-spacing: 0;
    opacity: .9;
    transform: rotate(-16deg);
  }

  .process-showcase .process-handnote::after {
    content: "";
    position: absolute;
    width: 78px;
    height: 58px;
    border: 1.5px solid rgba(36, 60, 124, .78);
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 58px 0 0;
  }

  .process-showcase .process-handnote-left {
    left: 86px;
    bottom: 164px;
  }

  .process-showcase .process-handnote-left::after {
    left: 122px;
    top: 34px;
    transform: rotate(20deg);
  }

  .process-showcase .process-handnote-top {
    right: -6px;
    top: 56px;
    transform: rotate(-22deg);
  }

  .process-showcase .process-handnote-top::after {
    right: 8px;
    top: 94px;
    transform: rotate(86deg);
  }

  .process-showcase .process-handnote-bottom {
    right: -28px;
    bottom: 120px;
    transform: rotate(-15deg);
  }

  .process-showcase .process-handnote-bottom::after {
    right: 34px;
    top: 76px;
    transform: rotate(98deg);
  }

  .process-showcase .process-note-card {
    position: absolute;
    left: 60px;
    bottom: 44px;
    z-index: 2;
    width: 305px;
    min-height: 94px;
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 16px;
    padding: 15px 20px;
    border: 1px solid rgba(196, 214, 244, .82);
    border-radius: 24px;
    background: rgba(255,255,255,.68);
    box-shadow: 0 24px 48px rgba(70, 111, 224, .2), inset 0 1px 0 rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
    transform: rotate(-2deg);
  }

  .process-showcase .process-note-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #12a5ff, #176ee8 62%, #3252ff);
    color: #ffffff;
    box-shadow: 0 13px 28px rgba(23, 110, 232, .3), inset 0 1px 0 rgba(255,255,255,.32);
  }

  .process-showcase .process-note-icon svg {
    width: 28px;
    height: 28px;
  }

  .process-showcase .process-note-card p {
    margin: 0;
    color: #42568b;
    font-size: 14px;
    line-height: 1.34;
    font-weight: 650;
  }

  .process-showcase .process-note-card strong {
    color: #096ee9;
    font-weight: 950;
  }

  .process-showcase .process-footer-line {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 2;
    width: min(780px, 60vw);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 26px;
    transform: translateX(-50%);
    color: rgba(43, 61, 120, .52);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .22em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .process-showcase .process-footer-line::before,
  .process-showcase .process-footer-line::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(93, 151, 255, .58));
  }

  .process-showcase .process-footer-line::after {
    background: linear-gradient(90deg, rgba(93, 151, 255, .58), transparent);
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .process-showcase {
    padding-inline: 32px !important;
  }

  .process-showcase .process-shell {
    grid-template-columns: minmax(310px, .82fr) 72px minmax(460px, 1fr);
    column-gap: 22px;
  }

  .process-showcase .process-intro h2 {
    font-size: clamp(55px, 5.1vw, 66px);
  }

  .process-showcase .process-intro p {
    font-size: 18px;
  }

  .process-showcase .process-stat {
    min-width: 104px;
    padding-right: 18px;
  }

  .process-showcase .process-stat + .process-stat {
    padding-left: 18px;
  }

  .process-showcase .process-list {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 24px;
  }

  .process-showcase .process-list::before {
    left: 36px;
  }

  .process-showcase .process-card {
    grid-template-columns: 52px minmax(0, 1fr) 38px;
    min-height: 102px;
    gap: 18px;
    padding: 15px 18px;
  }

  .process-showcase .process-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .process-showcase .process-icon svg {
    width: 27px;
    height: 27px;
  }

  .process-showcase .process-card h3 {
    font-size: 17px;
  }

  .process-showcase .process-card p {
    font-size: 13.5px;
  }

  .process-showcase .process-handnote-top,
  .process-showcase .process-handnote-bottom {
    right: -20px;
    font-size: 15px;
  }
}

/* Process section cleanup: remove selected notes and restore scroll-based number focus */
@media (min-width: 901px) {
  .process-showcase .process-handnote-left,
  .process-showcase .process-handnote-bottom {
    display: none !important;
  }

  .process-showcase .process-step .process-number {
    color: #1479ff !important;
    border-color: rgba(106, 163, 255, .4) !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 12px 28px rgba(31, 111, 240, .12), inset 0 1px 0 rgba(255,255,255,.98) !important;
    transform: none !important;
    transition: color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
  }

  .process-showcase .process-step .process-card {
    border-color: rgba(207, 219, 241, .68) !important;
    background: rgba(255,255,255,.74) !important;
    box-shadow: 0 18px 44px rgba(43, 89, 150, .07), inset 0 1px 0 rgba(255,255,255,.92) !important;
    transform: none !important;
    transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
  }

  .process-showcase .process-step .process-card-number {
    color: rgba(83, 111, 171, .36) !important;
    transition: color 220ms ease !important;
  }

  .process-showcase .process-step .process-arrow {
    background: rgba(255,255,255,.82) !important;
    color: #0c54bb !important;
    box-shadow: 0 9px 20px rgba(40, 91, 165, .12), inset 0 1px 0 rgba(255,255,255,.96) !important;
    transition: color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
  }

  .process-showcase .process-step.is-active .process-number {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.86) !important;
    background: linear-gradient(135deg, #1392ff 0%, #176ee8 56%, #3d45ff 100%) !important;
    box-shadow: 0 18px 34px rgba(27, 101, 230, .32), 0 0 28px rgba(52, 103, 255, .28), inset 0 1px 0 rgba(255,255,255,.4) !important;
    transform: scale(1.03) !important;
  }

  .process-showcase .process-step.is-active .process-card {
    border-color: rgba(18, 109, 255, .95) !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 22px 48px rgba(31, 103, 225, .12), inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  .process-showcase .process-step.is-active .process-card-number {
    color: rgba(18, 109, 255, .66) !important;
  }

  .process-showcase .process-step.is-active .process-arrow {
    background: linear-gradient(135deg, #1090ff, #176ee8 62%, #2644ff) !important;
    color: #ffffff !important;
    box-shadow: 0 13px 24px rgba(23, 110, 232, .32), inset 0 1px 0 rgba(255,255,255,.32) !important;
    transform: translateX(1px) !important;
  }
}

/* Process numbering: make the highlight follow scroll instead of staying on 03 */
@media (min-width: 901px) {
  .process-showcase .process-step:nth-child(3):not(.is-active) .process-number {
    color: #1479ff !important;
    border-color: rgba(106, 163, 255, .4) !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 12px 28px rgba(31, 111, 240, .12), inset 0 1px 0 rgba(255,255,255,.98) !important;
    transform: none !important;
  }

  .process-showcase .process-step:nth-child(3):not(.is-active) .process-card {
    border-color: rgba(207, 219, 241, .68) !important;
    background: rgba(255,255,255,.74) !important;
    box-shadow: 0 18px 44px rgba(43, 89, 150, .07), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  .process-showcase .process-step:nth-child(3):not(.is-active) .process-card-number {
    color: rgba(83, 111, 171, .36) !important;
  }

  .process-showcase .process-step:nth-child(3):not(.is-active) .process-arrow {
    background: rgba(255,255,255,.82) !important;
    color: #0c54bb !important;
    box-shadow: 0 9px 20px rgba(40, 91, 165, .12), inset 0 1px 0 rgba(255,255,255,.96) !important;
    transform: none !important;
  }

  .process-showcase .process-step.is-active:not(:nth-child(3)) .process-number,
  .process-showcase .process-step:nth-child(3).is-active .process-number {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.86) !important;
    background: linear-gradient(135deg, #1392ff 0%, #176ee8 56%, #3d45ff 100%) !important;
    box-shadow: 0 18px 34px rgba(27, 101, 230, .32), 0 0 28px rgba(52, 103, 255, .28), inset 0 1px 0 rgba(255,255,255,.4) !important;
    transform: scale(1.03) !important;
  }

  .process-showcase .process-step.is-active:not(:nth-child(3)) .process-card,
  .process-showcase .process-step:nth-child(3).is-active .process-card {
    border-color: rgba(18, 109, 255, .95) !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 22px 48px rgba(31, 103, 225, .12), inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  .process-showcase .process-step.is-active:not(:nth-child(3)) .process-card-number,
  .process-showcase .process-step:nth-child(3).is-active .process-card-number {
    color: rgba(18, 109, 255, .66) !important;
  }

  .process-showcase .process-step.is-active:not(:nth-child(3)) .process-arrow,
  .process-showcase .process-step:nth-child(3).is-active .process-arrow {
    background: linear-gradient(135deg, #1090ff, #176ee8 62%, #2644ff) !important;
    color: #ffffff !important;
    box-shadow: 0 13px 24px rgba(23, 110, 232, .32), inset 0 1px 0 rgba(255,255,255,.32) !important;
    transform: translateX(1px) !important;
  }
}

/* Mobile process section polish */
.stat-mobile,
.process-stat-icon {
  display: none;
}

@media (max-width: 760px) {
  .process-showcase {
    padding-top: 58px !important;
    background:
      radial-gradient(circle at 85% 12%, rgba(14, 133, 255, .13), transparent 30%),
      radial-gradient(circle at 10% 88%, rgba(91, 87, 244, .12), transparent 35%),
      linear-gradient(180deg, #ffffff 0%, #f5f9ff 52%, #eef6ff 100%) !important;
  }

  .process-showcase .process-shell {
    width: min(100%, 430px);
  }

  .process-showcase .process-intro {
    margin-bottom: 22px;
  }

  .process-showcase .process-intro p {
    margin-bottom: 18px;
  }

  .process-showcase .process-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 19px 0 24px;
    padding: 0;
    border: 1px solid rgba(204, 220, 247, .86);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 34px rgba(24, 77, 154, .075), inset 0 1px 0 rgba(255,255,255,.96);
    overflow: hidden;
    backdrop-filter: blur(16px);
  }

  .process-showcase .process-stats::before {
    display: none !important;
  }

  .process-showcase .process-stat {
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    min-height: 112px;
    padding: 13px 8px 14px;
    text-align: center;
  }

  .process-showcase .process-stat + .process-stat {
    border-left: 1px solid rgba(92, 144, 235, .18);
  }

  .process-showcase .process-stat-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 12px;
    color: #0b7cff;
    background: linear-gradient(145deg, rgba(237, 246, 255, .9), rgba(248, 251, 255, .62));
    box-shadow: 0 10px 22px rgba(23, 110, 232, .09), inset 0 1px 0 rgba(255,255,255,.94);
  }

  .process-showcase .process-stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .process-showcase .process-stat strong {
    display: block;
    color: #081126;
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
  }

  .process-showcase .process-stat small {
    display: block;
    color: #65759f;
    font-size: clamp(9.5px, 2.8vw, 11px);
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: 0;
  }

  .process-showcase .stat-desktop {
    display: none !important;
  }

  .process-showcase .stat-mobile {
    display: inline !important;
  }

  .process-showcase .process-list {
    width: 100%;
    gap: 13px;
  }

  .process-showcase .process-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
  }

  .process-showcase .process-number {
    width: 48px;
    height: 48px;
    font-size: 16px;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .1), inset 0 1px 0 rgba(255,255,255,.98);
  }

  .process-showcase .process-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 13px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 30px rgba(24, 77, 154, .07), inset 0 1px 0 rgba(255,255,255,.94);
  }

  .process-showcase .process-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #126dff;
    background: linear-gradient(145deg, #eef6ff, #f8fbff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 9px 18px rgba(33, 116, 240, .08);
  }

  .process-showcase .process-icon svg {
    width: 21px;
    height: 21px;
  }

  .process-showcase .process-card h3 {
    font-size: clamp(15.5px, 4vw, 18px);
  }

  .process-showcase .process-card p {
    margin-top: 5px;
    color: rgba(42, 62, 105, .78);
    font-size: 12px;
    line-height: 1.36;
  }

  .process-showcase .process-card-number,
  .process-showcase .process-arrow,
  .process-showcase .process-footer-line,
  .process-showcase .process-note-card,
  .process-showcase .process-handnote {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .process-showcase .process-stat {
    min-height: 104px;
    padding-inline: 5px;
  }

  .process-showcase .process-stat-icon {
    width: 29px;
    height: 29px;
  }

  .process-showcase .process-stat strong {
    font-size: 16.5px;
  }

  .process-showcase .process-stat small {
    font-size: 9px;
  }
}

/* Process stat text normalization after mobile markup upgrade */
.process-showcase .process-stat strong .stat-desktop,
.process-showcase .process-stat small .stat-desktop {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.process-showcase .process-stat small {
  display: block;
  margin-top: 6px;
  color: #485a8d;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0;
}

/* Premium mobile testimonial proof cards */
@media (max-width: 760px) {
  .client-stories__stats {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 18px 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .client-stories__stats::before {
    content: "";
    position: absolute;
    inset: 13px 10px auto;
    height: 64px;
    z-index: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(14, 133, 255, .16), rgba(91, 87, 244, .13), rgba(14, 183, 244, .12));
    filter: blur(18px);
    pointer-events: none;
  }

  .client-stories__stat {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    min-height: 124px !important;
    display: grid !important;
    grid-template-rows: 42px auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    padding: 13px 5px 12px !important;
    border: 1px solid rgba(196, 216, 247, .86) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.95), transparent 52%),
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,255,.83)) !important;
    box-shadow:
      0 14px 28px rgba(23, 76, 149, .085),
      0 1px 0 rgba(255,255,255,.96) inset !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .client-stories__stat::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(11, 124, 255, .16), transparent 35%, rgba(91, 87, 244, .12));
    opacity: .42;
  }

  .client-stories__stat::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(14, 133, 255, .12), rgba(14, 133, 255, .74), rgba(91, 87, 244, .2));
  }

  .client-stories__stat:nth-child(2) {
    transform: translateY(-5px) !important;
    border-color: rgba(102, 157, 255, .96) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(228, 241, 255, .96), transparent 58%),
      linear-gradient(180deg, #ffffff, #f2f7ff) !important;
    box-shadow:
      0 20px 36px rgba(23, 110, 232, .15),
      0 0 0 1px rgba(255,255,255,.72) inset !important;
  }

  .client-stories__stat-icon {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 15px !important;
    color: #ffffff !important;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 36%),
      linear-gradient(135deg, #0bb7ff 0%, #176ee8 58%, #4d45ff 100%) !important;
    box-shadow:
      0 12px 24px rgba(23, 110, 232, .22),
      0 1px 0 rgba(255,255,255,.36) inset !important;
  }

  .client-stories__stat:nth-child(2) .client-stories__stat-icon {
    color: #0b6fff !important;
    background:
      radial-gradient(circle at 50% 35%, rgba(255,255,255,.98), rgba(255,255,255,.72) 46%, transparent 47%),
      linear-gradient(135deg, #eaf4ff, #ffffff) !important;
    box-shadow:
      0 12px 24px rgba(23, 110, 232, .15),
      0 0 0 1px rgba(121, 174, 255, .26) inset !important;
  }

  .client-stories__stat-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.3 !important;
  }

  .client-stories__stat strong {
    position: relative !important;
    z-index: 1 !important;
    color: #081126 !important;
    font-size: clamp(18px, 5.4vw, 22px) !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    letter-spacing: -0.01em !important;
  }

  .client-stories__stat small {
    position: relative !important;
    z-index: 1 !important;
    max-width: 86px !important;
    color: #60719b !important;
    font-size: clamp(9px, 2.7vw, 10.5px) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  .client-stories__disclosure {
    width: max-content !important;
    max-width: 100% !important;
    margin: 12px auto 0 !important;
    padding: 7px 13px !important;
    border: 1px solid rgba(188, 211, 244, .72) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.66) !important;
    color: #63749f !important;
    box-shadow: 0 8px 18px rgba(23, 76, 149, .055), inset 0 1px 0 rgba(255,255,255,.9) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 380px) {
  .client-stories__stats {
    gap: 6px !important;
  }

  .client-stories__stat {
    min-height: 116px !important;
    border-radius: 17px !important;
    padding-inline: 4px !important;
  }

  .client-stories__stat-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }

  .client-stories__stat strong {
    font-size: 17px !important;
  }

  .client-stories__stat small {
    font-size: 8.8px !important;
  }
}

/* Final refined mobile testimonial stats */
@media (max-width: 760px) {
  .client-stories__stats {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 18px 0 8px !important;
    padding: 8px !important;
    border: 1px solid rgba(185, 210, 246, .76) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .95), transparent 54%),
      linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(243, 248, 255, .82)) !important;
    box-shadow:
      0 18px 42px rgba(24, 77, 154, .10),
      0 1px 0 rgba(255,255,255,.96) inset !important;
    overflow: visible !important;
    backdrop-filter: blur(18px) !important;
  }

  .client-stories__stats::before {
    content: "" !important;
    position: absolute !important;
    inset: auto 28px -7px !important;
    height: 14px !important;
    z-index: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(14, 133, 255, .18), rgba(91, 87, 244, .2), rgba(14, 183, 244, .16)) !important;
    filter: blur(16px) !important;
    pointer-events: none !important;
  }

  .client-stories__stats::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 133, 248, .28), transparent);
    pointer-events: none;
  }

  .client-stories__stat {
    position: relative !important;
    z-index: 1 !important;
    min-height: 112px !important;
    display: grid !important;
    grid-template-rows: 38px auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 12px 5px 11px !important;
    border: 1px solid rgba(207, 223, 247, .72) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .66) !important;
    box-shadow: 0 10px 22px rgba(17, 67, 133, .055), inset 0 1px 0 rgba(255,255,255,.9) !important;
    text-align: center !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .client-stories__stat::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: radial-gradient(circle at 50% 0%, rgba(37, 133, 248, .10), transparent 56%) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .client-stories__stat::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 7px !important;
    width: 28px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: rgba(23, 110, 232, .22) !important;
    transform: translateX(-50%) !important;
  }

  .client-stories__stat:nth-child(2) {
    transform: translateY(-3px) !important;
    border-color: rgba(124, 171, 255, .82) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(239, 246, 255, .86)) !important;
    box-shadow: 0 14px 30px rgba(23, 110, 232, .13), inset 0 1px 0 rgba(255,255,255,.95) !important;
  }

  .client-stories__stat:nth-child(2)::after {
    width: 36px !important;
    background: linear-gradient(90deg, #12a5ff, #176ee8 62%, #5b57f4) !important;
  }

  .client-stories__stat-icon {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border: 1px solid rgba(124, 171, 255, .32) !important;
    border-radius: 14px !important;
    color: #126dff !important;
    background: linear-gradient(145deg, rgba(239,247,255,.96), rgba(255,255,255,.72)) !important;
    box-shadow: 0 9px 18px rgba(23, 110, 232, .08), inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  .client-stories__stat:nth-child(2) .client-stories__stat-icon {
    color: #ffffff !important;
    border-color: transparent !important;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 38%),
      linear-gradient(135deg, #0bb7ff 0%, #176ee8 58%, #4d45ff 100%) !important;
    box-shadow: 0 12px 24px rgba(23, 110, 232, .24), inset 0 1px 0 rgba(255,255,255,.34) !important;
  }

  .client-stories__stat-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.35 !important;
  }

  .client-stories__stat strong {
    position: relative !important;
    z-index: 1 !important;
    color: #071230 !important;
    font-size: clamp(17px, 5vw, 21px) !important;
    line-height: .98 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
  }

  .client-stories__stat small {
    position: relative !important;
    z-index: 1 !important;
    max-width: 88px !important;
    color: #627398 !important;
    font-size: clamp(8.8px, 2.65vw, 10px) !important;
    line-height: 1.12 !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
  }

  .client-stories__disclosure {
    margin-top: 11px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #7482a0 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
  }
}

@media (max-width: 380px) {
  .client-stories__stats {
    gap: 6px !important;
    padding: 7px !important;
    border-radius: 21px !important;
  }

  .client-stories__stat {
    min-height: 106px !important;
    border-radius: 16px !important;
    padding: 10px 4px !important;
  }

  .client-stories__stat-icon {
    width: 35px !important;
    height: 35px !important;
    border-radius: 13px !important;
  }

  .client-stories__stat strong {
    font-size: 16.5px !important;
  }

  .client-stories__stat small {
    font-size: 8.4px !important;
  }
}


/* Cleaner pass for mobile testimonial stats */
@media (max-width: 760px) {
  .client-stories__stats {
    gap: 7px !important;
    margin: 16px 0 8px !important;
    padding: 7px !important;
    border: 1px solid rgba(195, 216, 247, .76) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 14px 32px rgba(24, 77, 154, .075), inset 0 1px 0 rgba(255,255,255,.94) !important;
  }

  .client-stories__stats::before,
  .client-stories__stats::after {
    display: none !important;
  }

  .client-stories__stat {
    min-height: 108px !important;
    grid-template-rows: 35px auto auto !important;
    gap: 6px !important;
    padding: 11px 5px 12px !important;
    border-color: rgba(211, 226, 248, .78) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
  }

  .client-stories__stat::before {
    opacity: .34 !important;
  }

  .client-stories__stat::after {
    bottom: 7px !important;
    width: 24px !important;
    height: 2px !important;
    background: rgba(23, 110, 232, .18) !important;
  }

  .client-stories__stat:nth-child(2) {
    transform: translateY(-2px) !important;
    border-color: rgba(137, 181, 255, .72) !important;
    box-shadow: 0 10px 22px rgba(23, 110, 232, .095), inset 0 1px 0 rgba(255,255,255,.94) !important;
  }

  .client-stories__stat:nth-child(2)::after {
    width: 30px !important;
  }

  .client-stories__stat-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    box-shadow: 0 7px 14px rgba(23, 110, 232, .065), inset 0 1px 0 rgba(255,255,255,.94) !important;
  }

  .client-stories__stat:nth-child(2) .client-stories__stat-icon {
    box-shadow: 0 9px 18px rgba(23, 110, 232, .18), inset 0 1px 0 rgba(255,255,255,.3) !important;
  }

  .client-stories__stat-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .client-stories__stat strong {
    font-size: clamp(17px, 5vw, 20px) !important;
    letter-spacing: 0 !important;
  }

  .client-stories__stat small {
    color: #677795 !important;
    font-size: clamp(8.8px, 2.55vw, 10px) !important;
    font-weight: 680 !important;
  }

  .client-stories__disclosure {
    margin-top: 9px !important;
    color: #8290a8 !important;
    font-size: 9.8px !important;
    font-weight: 620 !important;
  }
}

@media (max-width: 380px) {
  .client-stories__stats {
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 20px !important;
  }

  .client-stories__stat {
    min-height: 102px !important;
    padding-inline: 4px !important;
  }
}

/* Ultra clean mobile testimonial stats */
@media (max-width: 760px) {
  .client-stories__stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 14px 0 6px !important;
    padding: 15px 4px 14px !important;
    border: 1px solid rgba(211, 225, 246, .82) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 10px 24px rgba(24, 77, 154, .055) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
  }

  .client-stories__stats::before,
  .client-stories__stats::after {
    display: none !important;
    content: none !important;
  }

  .client-stories__stat {
    min-height: 92px !important;
    display: grid !important;
    grid-template-rows: 28px auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  .client-stories__stat + .client-stories__stat {
    border-left: 1px solid rgba(129, 157, 202, .2) !important;
  }

  .client-stories__stat::before,
  .client-stories__stat::after {
    display: none !important;
    content: none !important;
  }

  .client-stories__stat:nth-child(2) {
    transform: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .client-stories__stat-icon,
  .client-stories__stat:nth-child(2) .client-stories__stat-icon {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border: 1px solid rgba(178, 207, 248, .65) !important;
    border-radius: 999px !important;
    color: #1479ff !important;
    background: rgba(239, 247, 255, .82) !important;
    box-shadow: none !important;
  }

  .client-stories__stat-icon svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.25 !important;
    filter: none !important;
  }

  .client-stories__stat strong {
    color: #081126 !important;
    font-size: clamp(16px, 4.8vw, 19px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
  }

  .client-stories__stat small {
    max-width: 82px !important;
    color: #74819a !important;
    font-size: clamp(8.5px, 2.5vw, 9.8px) !important;
    line-height: 1.12 !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
  }

  .client-stories__disclosure {
    margin-top: 8px !important;
    color: #8a96aa !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 380px) {
  .client-stories__stats {
    padding: 13px 3px !important;
    border-radius: 16px !important;
  }

  .client-stories__stat {
    min-height: 86px !important;
    padding-inline: 4px !important;
  }

  .client-stories__stat-icon,
  .client-stories__stat:nth-child(2) .client-stories__stat-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .client-stories__stat-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Final spacing and visible testimonial stat dividers */
@media (max-width: 760px) {
  .client-stories__stats {
    padding: 16px 4px 15px !important;
  }

  .client-stories__stat {
    position: relative !important;
    min-height: 94px !important;
    padding: 0 7px !important;
  }

  .client-stories__stat + .client-stories__stat {
    border-left: 0 !important;
  }

  .client-stories__stat:not(:first-child)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 1px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, transparent, rgba(112, 151, 213, .34), transparent) !important;
    opacity: 1 !important;
  }

  .client-stories__disclosure {
    margin-top: 7px !important;
    color: #8f9ab0 !important;
    font-size: 9.4px !important;
  }
}

@media (max-width: 380px) {
  .client-stories__stats {
    padding: 14px 3px !important;
  }

  .client-stories__stat:not(:first-child)::before {
    top: 10px !important;
    bottom: 10px !important;
  }
}

/* Global laptop polish: sticky header, progress bar, cursor animation */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147482000;
  height: 4px;
  pointer-events: none;
  background: rgba(226, 242, 255, 0.56);
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #10c4f7 0%, #176ee8 52%, #9c27ef 100%);
  box-shadow: 0 0 16px rgba(23, 110, 232, 0.42);
  will-change: transform;
}

@media (min-width: 901px) {
  .top-nav,
  .hero-topbar {
    position: sticky !important;
    top: 12px !important;
    z-index: 1000 !important;
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease !important;
  }

  body.kg-scrolled .top-nav,
  body.kg-scrolled .hero-topbar {
    box-shadow: 0 18px 46px rgba(15, 76, 129, 0.13), inset 0 1px 0 rgba(255,255,255,.96) !important;
    border-color: rgba(149, 190, 244, 0.76) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(24px) !important;
  }

  .kg-cursor-dot,
  .kg-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147481999;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 180ms ease, width 180ms ease, height 180ms ease, background 180ms ease, border-color 180ms ease;
    will-change: transform, opacity;
  }

  .kg-cursor-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #176ee8;
    box-shadow: 0 0 18px rgba(23, 110, 232, .42);
  }

  .kg-cursor-ring {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(23, 110, 232, .34);
    border-radius: 999px;
    background: rgba(23, 110, 232, .045);
    box-shadow: 0 10px 26px rgba(23, 110, 232, .08);
  }

  body.kg-cursor-visible .kg-cursor-dot,
  body.kg-cursor-visible .kg-cursor-ring {
    opacity: 1;
  }

  body.kg-cursor-hover .kg-cursor-dot {
    width: 5px;
    height: 5px;
    background: #ffffff;
  }

  body.kg-cursor-hover .kg-cursor-ring {
    width: 50px;
    height: 50px;
    border-color: rgba(23, 110, 232, .46);
    background: rgba(23, 110, 232, .13);
  }
}

@media (max-width: 900px) {
  .scroll-progress { height: 3px; }
  .kg-cursor-dot,
  .kg-cursor-ring { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .kg-cursor-dot,
  .kg-cursor-ring { display: none !important; }
}

/* Homepage laptop header stays sticky across the full page */
@media (min-width: 901px) {
  .hero {
    padding-top: 86px !important;
  }

  .hero-topbar {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
  }
}

/* Final homepage sticky header and shared WhatsApp polish */
@media (min-width: 901px) {
  html {
    scroll-padding-top: 118px;
  }

  .hero {
    padding-top: 114px !important;
  }

  .hero-topbar {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    width: min(1340px, calc(100% - 28px)) !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 !important;
    z-index: 2147481500 !important;
    transform: translateX(-50%) !important;
    isolation: isolate !important;
    backdrop-filter: blur(24px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
    transition: box-shadow 220ms ease, background 220ms ease, border-color 220ms ease !important;
  }

  body.kg-scrolled .hero-topbar {
    border-color: rgba(105, 169, 255, 0.72) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 250, 255, 0.88)) !important;
    box-shadow:
      0 22px 52px rgba(9, 36, 84, 0.16),
      0 1px 0 rgba(255, 255, 255, 0.96) inset !important;
  }
}

.floating-whatsapp {
  position: fixed !important;
  right: clamp(16px, 2vw, 28px) !important;
  bottom: clamp(18px, 2.2vw, 30px) !important;
  z-index: 2147481501 !important;
  width: 68px !important;
  height: 68px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.46), transparent 30%),
    linear-gradient(145deg, #25d366 0%, #12b981 45%, #0ea5ff 100%) !important;
  box-shadow:
    0 20px 42px rgba(15, 118, 110, 0.26),
    0 10px 22px rgba(14, 165, 255, 0.17),
    0 1px 0 rgba(255, 255, 255, 0.58) inset !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  animation: none !important;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease !important;
}

.floating-whatsapp::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.34), transparent 68%);
  animation: kgWhatsappPulse 2.8s ease-in-out infinite;
}

.floating-whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 8%, rgba(255,255,255,.34) 36%, transparent 58%);
  transform: translateX(-120%);
  animation: kgWhatsappShine 4.5s ease-in-out infinite;
}

.floating-whatsapp svg {
  position: relative;
  z-index: 1;
  width: 32px !important;
  height: 32px !important;
  stroke-width: 2.45 !important;
  filter: drop-shadow(0 4px 8px rgba(5, 46, 22, 0.16));
}

.floating-whatsapp:hover {
  transform: translateY(-4px) scale(1.035) !important;
  filter: saturate(1.08) !important;
  box-shadow:
    0 26px 54px rgba(15, 118, 110, 0.32),
    0 14px 30px rgba(14, 165, 255, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.62) inset !important;
}

@keyframes kgWhatsappPulse {
  0%, 100% { transform: scale(0.88); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 0.9; }
}

@keyframes kgWhatsappShine {
  0%, 58% { transform: translateX(-125%); }
  78%, 100% { transform: translateX(135%); }
}

@media (max-width: 900px) {
  .floating-whatsapp {
    right: 16px !important;
    bottom: 92px !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
  }

  .floating-whatsapp svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* One-pass final homepage header, mobile progress, and process polish */
:root {
  --kg-header-gutter: max(14px, calc((100vw - 1280px) / 2));
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147483000 !important;
  height: 5px !important;
  display: block !important;
  pointer-events: none !important;
  background: rgba(213, 232, 255, 0.84) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.84), 0 8px 22px rgba(23,110,232,.12) !important;
}

.scroll-progress span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: scaleX(0);
  transform-origin: left center !important;
  background: linear-gradient(90deg, #08b7f4 0%, #176ee8 52%, #7138ff 100%) !important;
  box-shadow: 0 0 18px rgba(23, 110, 232, .48) !important;
  will-change: transform !important;
}

.hero-topbar {
  contain: layout paint;
}

@media (min-width: 901px) {
  .hero {
    padding-top: 112px !important;
  }

  .hero-topbar {
    position: fixed !important;
    top: 14px !important;
    left: var(--kg-header-gutter) !important;
    right: var(--kg-header-gutter) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 76px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) auto minmax(205px, 240px) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: clamp(14px, 2vw, 28px) !important;
    padding: 10px 14px 10px 18px !important;
    border: 1px solid rgba(166, 199, 244, .72) !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,250,255,.9)) !important;
    box-shadow: 0 22px 58px rgba(12, 54, 116, .14), inset 0 1px 0 rgba(255,255,255,.96) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
    transform: none !important;
    translate: none !important;
    z-index: 2147482500 !important;
    overflow: hidden !important;
    transition: box-shadow .22s ease, border-color .22s ease, background .22s ease, min-height .22s ease, padding .22s ease !important;
  }

  .hero-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(14,165,255,.08), transparent 32%, rgba(37,99,235,.08));
  }

  body.kg-scrolled .hero-topbar {
    top: 10px !important;
    min-height: 66px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-color: rgba(83, 157, 255, .78) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,248,255,.92)) !important;
    box-shadow: 0 18px 48px rgba(9, 36, 84, .18), inset 0 1px 0 rgba(255,255,255,1) !important;
    transform: none !important;
  }

  .hero-brand {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;
  }

  .hero-brand-mark {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border-radius: 16px !important;
  }

  body.kg-scrolled .hero-brand-mark {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  .hero-brand-copy {
    min-width: 0 !important;
  }

  .hero-brand-name {
    font-size: clamp(21px, 1.7vw, 28px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .hero-brand-tagline {
    margin-top: 5px !important;
    display: block !important;
    color: #52617e !important;
    font-size: clamp(10px, .78vw, 12px) !important;
    font-weight: 780 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .hero-desktop-menu {
    display: inline-flex !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    background: rgba(240, 247, 255, .64) !important;
  }

  .hero-desktop-menu a {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: #24334f !important;
    font-size: 12px !important;
    font-weight: 840 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .hero-desktop-menu a:hover,
  .hero-desktop-menu a[aria-current="page"] {
    color: #096fff !important;
    background: rgba(14, 133, 255, .12) !important;
    box-shadow: inset 0 0 0 1px rgba(91, 156, 255, .16) !important;
  }

  .hero-top-actions {
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
  }

  .hero-top-actions .top-start {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 18px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
  }
}

@media (min-width: 901px) and (max-width: 1110px) {
  :root { --kg-header-gutter: 12px; }

  .hero-topbar {
    grid-template-columns: minmax(210px, 1fr) auto minmax(168px, 190px) !important;
    gap: 9px !important;
    padding-left: 13px !important;
    padding-right: 10px !important;
  }

  .hero-brand-name { font-size: 20px !important; }
  .hero-brand-tagline { font-size: 9.5px !important; }
  .hero-brand-mark { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
  .hero-desktop-menu a { padding: 0 9px !important; font-size: 11px !important; }
  .hero-top-actions .top-start { min-height: 48px !important; font-size: 13px !important; border-radius: 18px !important; }
}

@media (max-width: 900px) {
  .scroll-progress {
    height: 5px !important;
    background: rgba(214, 234, 255, .96) !important;
  }

  .hero-topbar {
    position: sticky !important;
    top: 8px !important;
    z-index: 2147481000 !important;
    transform: none !important;
    max-width: calc(100% - 20px) !important;
    margin: 8px auto 0 !important;
    box-shadow: 0 14px 34px rgba(12, 54, 116, .12), inset 0 1px 0 rgba(255,255,255,.96) !important;
  }
}

/* Professional process section reset */
.process-showcase {
  background:
    radial-gradient(circle at 10% 10%, rgba(14, 165, 255, .15), transparent 28%),
    radial-gradient(circle at 92% 14%, rgba(83, 92, 255, .12), transparent 30%),
    linear-gradient(rgba(37, 99, 235, .042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .042) 1px, transparent 1px),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 46%, #f1f7ff 100%) !important;
  background-size: auto, auto, 72px 72px, 72px 72px, auto !important;
}

.process-showcase .stat-mobile {
  display: none !important;
}

.process-showcase .stat-desktop {
  display: inline !important;
}

@media (min-width: 901px) {
  .process-showcase {
    padding: clamp(84px, 8vw, 120px) clamp(24px, 5vw, 72px) clamp(92px, 8vw, 126px) !important;
  }

  .process-showcase .process-shell {
    width: min(1230px, 100%) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(350px, .88fr) minmax(560px, 1.12fr) !important;
    gap: clamp(44px, 5vw, 74px) !important;
    align-items: start !important;
  }

  .process-showcase .process-intro {
    position: sticky !important;
    top: 128px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .process-showcase .process-eyebrow {
    min-height: 34px !important;
    margin: 0 0 20px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: #096fff !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(157, 195, 246, .76) !important;
    box-shadow: 0 14px 32px rgba(29,78,216,.08) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
  }

  .process-showcase .process-intro h2 {
    max-width: 470px !important;
    font-size: clamp(58px, 5.5vw, 82px) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
    color: #071126 !important;
  }

  .process-showcase .process-intro p {
    max-width: 440px !important;
    margin: 22px 0 0 !important;
    color: #536487 !important;
    font-size: clamp(17px, 1.38vw, 20px) !important;
    line-height: 1.5 !important;
    font-weight: 690 !important;
  }

  .process-showcase .process-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: min(520px, 100%) !important;
    margin: 34px 0 0 !important;
    padding: 16px 8px !important;
    border: 1px solid rgba(174, 204, 243, .76) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 24px 58px rgba(12, 54, 116, .09), inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter: blur(18px) !important;
  }

  .process-showcase .process-stats::before {
    display: none !important;
  }

  .process-showcase .process-stat {
    min-width: 0 !important;
    min-height: 116px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    padding: 0 12px !important;
    text-align: center !important;
    position: relative !important;
    border: 0 !important;
    background: transparent !important;
  }

  .process-showcase .process-stat + .process-stat {
    border-left: 1px solid rgba(126, 164, 219, .28) !important;
  }

  .process-showcase .process-stat-icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 15px !important;
    color: #0b78ff !important;
    background: linear-gradient(145deg, rgba(14, 133, 255, .13), rgba(103, 90, 255, .08)) !important;
    box-shadow: none !important;
  }

  .process-showcase .process-stat-icon svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 2.35 !important;
  }

  .process-showcase .process-stat strong {
    color: #071126 !important;
    font-size: clamp(22px, 1.9vw, 30px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
  }

  .process-showcase .process-stat small {
    max-width: 110px !important;
    color: #667592 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
  }

  .process-showcase .process-note-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(430px, 100%) !important;
    min-height: 74px !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 20px 0 0 !important;
    padding: 14px 18px !important;
    border: 1px solid rgba(174, 204, 243, .72) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(240,247,255,.82)) !important;
    box-shadow: 0 18px 42px rgba(12, 54, 116, .1), inset 0 1px 0 rgba(255,255,255,.94) !important;
  }

  .process-showcase .process-note-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 17px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #08b7f4, #176ee8 62%, #6d4cff) !important;
    box-shadow: 0 14px 28px rgba(23,110,232,.24) !important;
  }

  .process-showcase .process-note-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .process-showcase .process-note-card p {
    margin: 0 !important;
    color: #344668 !important;
    font-size: 14px !important;
    line-height: 1.32 !important;
    font-weight: 760 !important;
  }

  .process-showcase .process-list {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    gap: 14px !important;
    position: relative !important;
  }

  .process-showcase .process-list::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 28px !important;
    top: 30px !important;
    bottom: 30px !important;
    width: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(23,110,232,.16), rgba(23,110,232,.34), rgba(109,76,255,.18)) !important;
    box-shadow: none !important;
  }

  .process-showcase .process-list::after {
    display: none !important;
  }

  .process-showcase .process-step {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 102px !important;
    position: relative !important;
  }

  .process-showcase .process-number {
    width: 58px !important;
    height: 58px !important;
    z-index: 2 !important;
    color: #0b78ff !important;
    border: 1px solid rgba(164, 197, 244, .9) !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, #ffffff, #f0f7ff) !important;
    box-shadow: 0 14px 32px rgba(23,110,232,.12), inset 0 1px 0 rgba(255,255,255,.98) !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    transform: none !important;
    animation: none !important;
  }

  .process-showcase .process-card {
    min-height: 102px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 20px 18px 18px !important;
    border: 1px solid rgba(180, 207, 243, .78) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.93), rgba(246,250,255,.78)) !important;
    box-shadow: 0 16px 42px rgba(12, 54, 116, .08), inset 0 1px 0 rgba(255,255,255,.96) !important;
    transform: none !important;
    animation: none !important;
  }

  .process-showcase .process-icon {
    width: 52px !important;
    height: 52px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 17px !important;
    color: #0b78ff !important;
    background: linear-gradient(145deg, rgba(14,133,255,.12), rgba(109,76,255,.08)) !important;
  }

  .process-showcase .process-icon svg {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 2.3 !important;
  }

  .process-showcase .process-card h3 {
    margin: 0 0 6px !important;
    color: #071126 !important;
    font-size: clamp(17px, 1.45vw, 21px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    font-weight: 950 !important;
  }

  .process-showcase .process-card p {
    margin: 0 !important;
    color: #42557b !important;
    font-size: clamp(13px, 1.05vw, 15px) !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
  }

  .process-showcase .process-card-number {
    position: absolute !important;
    top: 14px !important;
    right: 20px !important;
    display: block !important;
    color: rgba(92, 114, 153, .28) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
  }

  .process-showcase .process-arrow {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    border-radius: 999px !important;
    color: #0b78ff !important;
    border: 1px solid rgba(173, 204, 245, .72) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 22px rgba(23,110,232,.1) !important;
    transform: none !important;
  }

  .process-showcase .process-arrow svg {
    width: 17px !important;
    height: 17px !important;
  }

  .process-showcase .process-step:nth-child(3):not(.is-active) .process-number,
  .process-showcase .process-step:nth-child(3):not(.is-active) .process-card,
  .process-showcase .process-step:nth-child(3):not(.is-active) .process-card-number,
  .process-showcase .process-step:nth-child(3):not(.is-active) .process-arrow {
    filter: none !important;
  }

  .process-showcase .process-step.is-active .process-number {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.82) !important;
    background: linear-gradient(135deg, #08b7f4 0%, #176ee8 56%, #6d4cff 100%) !important;
    box-shadow: 0 16px 36px rgba(23,110,232,.31), 0 0 26px rgba(109,76,255,.16) !important;
    transform: scale(1.045) !important;
  }

  .process-showcase .process-step.is-active .process-card {
    border-color: rgba(47, 125, 255, .54) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,247,255,.88)) !important;
    box-shadow: 0 22px 58px rgba(23,110,232,.14), 0 0 0 1px rgba(23,110,232,.08), inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .process-showcase .process-step.is-active .process-icon,
  .process-showcase .process-step.is-active .process-arrow {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #08b7f4 0%, #176ee8 64%, #6d4cff 100%) !important;
    box-shadow: 0 14px 28px rgba(23,110,232,.2) !important;
  }

  .process-showcase .process-step.is-active .process-card-number {
    color: rgba(23,110,232,.65) !important;
  }

  .process-showcase .process-footer-line {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    margin-top: 8px !important;
    color: #7a89a4 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .28em !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 900px) {
  .process-showcase .stat-desktop { display: none !important; }
  .process-showcase .stat-mobile { display: inline !important; }

  .process-showcase .process-stat strong,
  .process-showcase .process-stat small {
    line-height: 1.1 !important;
  }
}

/* Final mobile homepage fixed header guarantee */
@media (max-width: 900px) {
  .hero {
    padding-top: 86px !important;
  }

  .hero-topbar {
    position: fixed !important;
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 2147482500 !important;
    transform: none !important;
    translate: none !important;
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(166, 199, 244, .78) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
  }

  body.kg-scrolled .hero-topbar {
    box-shadow: 0 14px 36px rgba(9, 36, 84, .18), inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
}

/* Final process timeline repair: no collapsed/alternating cards */
@media (min-width: 901px) {
  .process-showcase .process-list {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .process-showcase .process-step,
  .process-showcase .process-step:nth-child(odd),
  .process-showcase .process-step:nth-child(even),
  .process-showcase .process-step.is-active,
  .process-showcase .process-step.is-near {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    min-height: 112px !important;
    transform: none !important;
  }

  .process-showcase .process-number {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
  }

  .process-showcase .process-card,
  .process-showcase .process-step:nth-child(odd) .process-card,
  .process-showcase .process-step:nth-child(even) .process-card,
  .process-showcase .process-step.is-active .process-card,
  .process-showcase .process-step.is-near .process-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 112px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 42px !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 18px 20px 18px 18px !important;
    border-radius: 24px !important;
    transform: none !important;
  }

  .process-showcase .process-copy,
  .process-showcase .process-step:nth-child(odd) .process-copy,
  .process-showcase .process-step:nth-child(even) .process-copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: 2 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .process-showcase .process-card h3,
  .process-showcase .process-card p {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .process-showcase .process-icon {
    grid-column: 1 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .process-showcase .process-arrow {
    grid-column: 3 !important;
    margin: 0 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .process-showcase .process-card-number {
    position: absolute !important;
    top: 14px !important;
    right: 20px !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  .process-showcase .process-list::before {
    left: 30px !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .process-showcase .process-shell {
    width: min(980px, calc(100% - 28px)) !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .process-showcase .process-intro {
    position: relative !important;
    top: auto !important;
    max-width: 720px !important;
  }
}

/* Final WhatsApp floating action button polish */
.floating-whatsapp {
  position: fixed !important;
  right: clamp(18px, 2.2vw, 32px) !important;
  bottom: clamp(22px, 2.4vw, 34px) !important;
  z-index: 2147481501 !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.62), transparent 27%),
    linear-gradient(145deg, #25d366 0%, #16c784 42%, #10b4ea 100%) !important;
  box-shadow:
    0 18px 38px rgba(20, 184, 166, 0.34),
    0 10px 24px rgba(37, 211, 102, 0.26),
    0 0 0 8px rgba(14, 165, 233, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -10px 18px rgba(0, 96, 72, 0.14) !important;
  overflow: visible !important;
  isolation: isolate !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.floating-whatsapp::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.34), rgba(255,255,255,0)) !important;
  animation: none !important;
  pointer-events: none !important;
}

.floating-whatsapp::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.34) 42%, transparent 62%) !important;
  opacity: 0.42 !important;
  transform: translateX(-42%) rotate(10deg) !important;
  animation: none !important;
  pointer-events: none !important;
}

.floating-whatsapp svg {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 31px !important;
  height: 31px !important;
  flex: 0 0 auto !important;
  fill: currentColor !important;
  stroke: none !important;
  overflow: visible !important;
  filter: drop-shadow(0 4px 8px rgba(0, 86, 56, 0.2)) !important;
}

.floating-whatsapp:hover {
  transform: translate3d(0, -3px, 0) scale(1.035) !important;
  filter: saturate(1.06) !important;
  box-shadow:
    0 22px 46px rgba(20, 184, 166, 0.4),
    0 12px 28px rgba(37, 211, 102, 0.3),
    0 0 0 9px rgba(14, 165, 233, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -10px 18px rgba(0, 96, 72, 0.16) !important;
}

.floating-whatsapp:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.42) !important;
  outline-offset: 4px !important;
}

@media (max-width: 900px) {
  .floating-whatsapp {
    right: 16px !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    box-shadow:
      0 14px 30px rgba(20, 184, 166, 0.32),
      0 8px 20px rgba(37, 211, 102, 0.24),
      0 0 0 7px rgba(14, 165, 233, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -8px 14px rgba(0, 96, 72, 0.13) !important;
  }

  .floating-whatsapp svg {
    width: 27px !important;
    height: 27px !important;
  }
}

/* Final process proof stats: match bottom-home professional strip */
.process-showcase .process-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: min(560px, 100%) !important;
  margin: 30px 0 0 !important;
  padding: 16px 6px !important;
  border: 1px solid rgba(211, 225, 246, .84) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 16px 36px rgba(24, 77, 154, .08), inset 0 1px 0 rgba(255,255,255,.96) !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

.process-showcase .process-stats::before,
.process-showcase .process-stats::after {
  display: none !important;
  content: none !important;
}

.process-showcase .process-stat {
  position: relative !important;
  min-width: 0 !important;
  min-height: 104px !important;
  display: grid !important;
  grid-template-rows: 34px auto auto !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 7px !important;
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

.process-showcase .process-stat + .process-stat {
  border-left: 0 !important;
}

.process-showcase .process-stat:not(:first-child)::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 13px !important;
  bottom: 13px !important;
  width: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, transparent, rgba(112, 151, 213, .36), transparent) !important;
}

.process-showcase .process-stat-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border-radius: 13px !important;
  color: #0b72ff !important;
  background: linear-gradient(145deg, rgba(234, 244, 255, .98), rgba(255, 255, 255, .82)) !important;
  box-shadow: 0 9px 18px rgba(23, 110, 232, .1), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.process-showcase .process-stat-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.35 !important;
}

.process-showcase .process-stat strong {
  color: #071126 !important;
  font-size: clamp(21px, 5.5vw, 27px) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.process-showcase .process-stat small {
  max-width: 96px !important;
  color: #667592 !important;
  font-size: clamp(9.5px, 2.65vw, 11px) !important;
  line-height: 1.13 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 760px) {
  .process-showcase .process-stats {
    width: 100% !important;
    margin: 18px 0 24px !important;
    padding: 15px 4px !important;
    border-radius: 18px !important;
  }

  .process-showcase .process-stat {
    min-height: 98px !important;
    padding: 0 7px !important;
  }
}

@media (max-width: 380px) {
  .process-showcase .process-stats {
    padding: 13px 3px !important;
  }

  .process-showcase .process-stat {
    min-height: 92px !important;
    padding-inline: 4px !important;
  }

  .process-showcase .process-stat-icon {
    width: 31px !important;
    height: 31px !important;
  }

  .process-showcase .process-stat strong {
    font-size: 20px !important;
  }

  .process-showcase .process-stat small {
    font-size: 9px !important;
  }
}

/* Final impact feature strip: clean professional equation */
.why-kartavya-section .impact-features {
  position: relative !important;
  z-index: 3 !important;
  width: min(720px, 100%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  margin: clamp(28px, 4vw, 42px) auto 0 !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(174, 205, 241, .72) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(248, 252, 255, .78)),
    linear-gradient(90deg, rgba(22, 135, 255, .08), transparent 28%, transparent 72%, rgba(79, 70, 229, .06)) !important;
  box-shadow:
    0 18px 46px rgba(15, 65, 136, .08),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.06) !important;
}

.why-kartavya-section .impact-features::before {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  top: 50% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(132, 171, 225, .2), transparent) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.why-kartavya-section .impact-pill {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 82px !important;
  display: grid !important;
  grid-template-rows: 36px auto !important;
  place-items: center !important;
  gap: 8px !important;
  padding: 10px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #071126 !important;
  font-size: clamp(13px, 1.16vw, 15px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  transition: color .2s ease, transform .2s ease !important;
}

.why-kartavya-section .impact-pill svg {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  padding: 9px !important;
  border: 1px solid rgba(210, 228, 250, .86) !important;
  border-radius: 50% !important;
  color: #0b78ff !important;
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0 32%, rgba(238, 247, 255, .95) 72%),
    #eef6ff !important;
  box-shadow:
    0 9px 20px rgba(22, 135, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
  stroke-width: 2.45 !important;
}

.why-kartavya-section .impact-features .feature-plus {
  position: relative !important;
  z-index: 2 !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 82px !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.why-kartavya-section .impact-features .feature-plus::before,
.why-kartavya-section .impact-features .feature-plus::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 14px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #7a8faa !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 0 8px rgba(244, 249, 255, .82) !important;
}

.why-kartavya-section .impact-features .feature-plus::after {
  transform: translate(-50%, -50%) rotate(90deg) !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .why-kartavya-section .impact-pill:hover {
    transform: translateY(-2px) !important;
    color: #075ec7 !important;
  }
}

@media (max-width: 760px) {
  .why-kartavya-section .impact-features {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) !important;
    padding: 10px 8px !important;
    border-radius: 22px !important;
  }

  .why-kartavya-section .impact-pill {
    min-height: 76px !important;
    grid-template-rows: 30px auto !important;
    gap: 7px !important;
    padding: 9px 3px !important;
    font-size: clamp(10px, 2.55vw, 12px) !important;
    line-height: 1.08 !important;
  }

  .why-kartavya-section .impact-pill svg {
    width: 30px !important;
    height: 30px !important;
    padding: 7px !important;
  }

  .why-kartavya-section .impact-features .feature-plus {
    width: 20px !important;
    min-width: 20px !important;
    height: 76px !important;
  }

  .why-kartavya-section .impact-features .feature-plus::before,
  .why-kartavya-section .impact-features .feature-plus::after {
    width: 11px !important;
    height: 2px !important;
    box-shadow: 0 0 0 6px rgba(244, 249, 255, .84) !important;
  }

  .why-kartavya-section .impact-features .feature-plus::after {
    box-shadow: none !important;
  }
}

@media (max-width: 380px) {
  .why-kartavya-section .impact-features {
    grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr) !important;
    padding: 9px 6px !important;
  }

  .why-kartavya-section .impact-pill {
    min-height: 70px !important;
    font-size: 9.5px !important;
  }

  .why-kartavya-section .impact-pill svg {
    width: 28px !important;
    height: 28px !important;
  }

  .why-kartavya-section .impact-features .feature-plus {
    width: 16px !important;
    min-width: 16px !important;
  }
}

/* ========================================================
   MOBILE FLOATING HEADER PERFECTION (<= 900px)
   ======================================================== */
@media (max-width: 900px) {
  .hero {
    padding-top: 74px !important;
  }

  .hero-topbar {
    position: fixed !important;
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 8px 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    z-index: 2147482500 !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.kg-scrolled .hero-topbar {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
  }

  .hero-topbar::before {
    display: none !important;
  }

  .hero-brand {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    text-decoration: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-brand-mark {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 10px !important;
    background: #090d1a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 6px rgba(9, 13, 26, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero-brand-mark svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }

  .hero-brand-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    line-height: 1.15 !important;
  }

  .hero-brand-name {
    font-size: 14.5px !important;
    font-weight: 750 !important;
    color: #090d16 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .hero-brand-tagline {
    font-size: 8.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 1.5px !important;
    line-height: 1 !important;
    display: block !important;
  }

  .hero-brand-name::after,
  .hero-brand-tagline::after {
    content: none !important;
    display: none !important;
  }

  .hero-desktop-menu {
    display: none !important;
  }

  .hero-top-actions {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-top-actions .top-start,
  .btn-primary.top-start {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 13px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #7c3aed 100%) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  .hero-top-actions .top-start span,
  .btn-primary.top-start span {
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    display: inline !important;
  }

  .hero-top-actions .top-start svg,
  .btn-primary.top-start svg {
    width: 13px !important;
    height: 13px !important;
    stroke-width: 2.6 !important;
    display: block !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 380px) {
  .hero-topbar {
    left: 6px !important;
    right: 6px !important;
    padding: 0 6px 0 8px !important;
    gap: 6px !important;
  }

  .hero-brand {
    gap: 7px !important;
  }

  .hero-brand-mark {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 9px !important;
  }

  .hero-brand-mark svg {
    width: 20px !important;
    height: 20px !important;
  }

  .hero-brand-name {
    font-size: 13.5px !important;
  }

  .hero-brand-tagline {
    font-size: 8px !important;
  }

  .hero-top-actions .top-start,
  .btn-primary.top-start {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
  }

  .hero-top-actions .top-start span,
  .btn-primary.top-start span {
    font-size: 11.5px !important;
  }

  .hero-top-actions .top-start svg,
  .btn-primary.top-start svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Mobile Hero Primary Heading, Desc & CTAs (Exact match to reference) */
@media (max-width: 767px) {
  .hero-heading--mobile {
    display: block !important;
    font-size: clamp(38px, 10.5vw, 52px) !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: -1.6px !important;
    color: #0a1629 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }

  .hero-heading--mobile .headline-line {
    display: block !important;
    color: #0a1629 !important;
    margin: 0 !important;
    line-height: 1.05 !important;
  }

  .hero-heading--mobile .headline-line.hl-cyan {
    display: inline-block !important;
    position: relative !important;
    padding-bottom: 6px !important;
    background: linear-gradient(92deg, #00b4d8 0%, #0084ff 42%, #5b57f4 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  .hero-heading--mobile .headline-line.hl-cyan::after {
    content: '' !important;
    position: absolute !important;
    left: 2px !important;
    width: calc(100% - 18px) !important;
    bottom: 0px !important;
    height: 3.5px !important;
    border-radius: 999px !important;
    background: #0084ff !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .hero-desc--mobile {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    color: #475569 !important;
    margin: 18px 0 26px !important;
    max-width: 480px !important;
    text-align: left !important;
  }

  .hero-desc--mobile strong {
    color: #0f172a !important;
    font-weight: 750 !important;
  }

  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 0 0 28px !important;
  }

  .hero-buttons .btn-primary {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border-radius: 16px !important;
    background: linear-gradient(90deg, #00b4d8 0%, #0084ff 42%, #5b57f4 100%) !important;
    box-shadow: 0 10px 24px rgba(0, 132, 255, 0.28) !important;
    border: none !important;
    text-decoration: none !important;
    padding: 0 20px !important;
  }

  .hero-buttons .btn-primary span {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  .hero-buttons .btn-primary svg {
    color: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
    stroke: #ffffff !important;
    stroke-width: 2.6 !important;
  }

  .hero-buttons .btn-ghost.hero-work-link--mobile {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    text-decoration: none !important;
    padding: 0 20px !important;
  }
}

/* ==========================================================================
   100% REMOVE ALL BACKGROUND CHECKS & GRID LINES (HERO & CARDS)
   ========================================================================== */
.hero::before,
.hero::after,
.card-item::before,
.card-item::after,
.cards-strip::before,
.cards-strip::after {
  background-image: none !important;
  background: none !important;
  display: none !important;
  opacity: 0 !important;
}

.hero {
  background:
    radial-gradient(ellipse 85% 60% at 50% -10%, rgba(56, 189, 248, 0.14), transparent 70%),
    radial-gradient(ellipse 55% 50% at 96% 24%, rgba(124, 58, 237, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 50% at 4% 52%, rgba(14, 165, 233, 0.09), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #f2f7fe 50%, #edf5fd 100%) !important;
}

@media (min-width: 901px) {
  .hero::before,
  .hero::after {
    display: none !important;
    background: none !important;
    background-image: none !important;
  }
  .right-col .cards-strip {
    display: none !important;
  }
}

/* ==========================================================================
   SUPER PROFESSIONAL 4-CAPABILITY STRIP (WEB, DESIGN, SEO, SPEED)
   ========================================================================== */
.cards-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 16px 0 28px !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

.card-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 4px 13px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 18px rgba(15, 76, 148, 0.05), 0 1px 3px rgba(15, 76, 148, 0.03), inset 0 1px 0 #ffffff !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
  aspect-ratio: auto !important;
  min-height: 104px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.card-item:hover,
.card-item:active {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 14px 28px rgba(15, 76, 148, 0.11), inset 0 1px 0 #ffffff !important;
  z-index: 5 !important;
}

.card-item:hover .card-icon-badge {
  transform: scale(1.08) !important;
}

.card-item:hover .card-bar {
  width: 28px !important;
}

.card-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.card-icon-badge {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-icon-badge svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
}

/* Individual modern badge themes */
.card-item--web .card-icon-badge {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(37, 99, 235, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.22), 0 2px 6px rgba(14, 165, 233, 0.08) !important;
}
.card-item--design .card-icon-badge {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(217, 70, 239, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.22), 0 2px 6px rgba(139, 92, 246, 0.08) !important;
}
.card-item--seo .card-icon-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(2, 132, 199, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.22), 0 2px 6px rgba(16, 185, 129, 0.08) !important;
}
.card-item--speed .card-icon-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(234, 88, 12, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25), 0 2px 6px rgba(245, 158, 11, 0.08) !important;
}

.card-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.card-bar {
  width: 20px !important;
  height: 2.5px !important;
  border-radius: 999px !important;
  margin-top: 1px !important;
  transition: width 0.25s ease !important;
}

.card-item--web .card-bar {
  background: linear-gradient(90deg, #0284c7, #2563eb) !important;
}
.card-item--design .card-bar {
  background: linear-gradient(90deg, #8b5cf6, #d946ef) !important;
}
.card-item--seo .card-bar {
  background: linear-gradient(90deg, #0284c7, #10b981) !important;
}
.card-item--speed .card-bar {
  background: linear-gradient(90deg, #f59e0b, #ea580c) !important;
}

.card-shine,
.card-badge {
  display: none !important;
}

@media (max-width: 420px) {
  .cards-strip {
    gap: 7px !important;
    margin: 14px 0 24px !important;
  }
  .card-item {
    padding: 12px 3px 10px !important;
    min-height: 94px !important;
    border-radius: 15px !important;
  }
  .card-content {
    gap: 6px !important;
  }
  .card-icon-badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  .card-icon-badge svg {
    width: 22px !important;
    height: 22px !important;
  }
  .card-label {
    font-size: 9.5px !important;
    letter-spacing: 0.5px !important;
  }
  .card-bar {
    width: 16px !important;
    height: 2px !important;
  }
  .card-item:hover .card-bar {
    width: 22px !important;
  }
}

/* ==========================================================================
   LAPTOP & DESKTOP HERO PERFECTION (ZERO COLLISION, HIGH-END EXECUTIVE DESIGN)
   ========================================================================== */
@media (min-width: 901px) {
  .hero {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 86px !important;
    padding-bottom: 24px !important;
    overflow: hidden !important;
    position: relative !important;
    background:
      radial-gradient(ellipse 65% 55% at 5% 15%, rgba(219, 234, 254, 0.45), transparent 60%),
      radial-gradient(ellipse 60% 50% at 95% 45%, rgba(224, 231, 255, 0.4), transparent 60%),
      radial-gradient(circle at 50% 90%, rgba(240, 249, 255, 0.6), transparent 50%),
      #f8faff !important;
  }

  .hero-wrap {
    width: min(1280px, calc(100% - 64px)) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: clamp(24px, 3.5vh, 44px) 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important;
    column-gap: clamp(36px, 4vw, 64px) !important;
    row-gap: 0 !important;
    align-items: center !important;
    min-height: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Left Column Grid Items */
  .trust-pill {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 6px 14px 6px 10px !important;
    margin: 0 0 16px 0 !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(219, 234, 254, 0.9) !important;
    box-shadow: 0 4px 14px rgba(15, 76, 129, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .trust-pill .avatar-stack {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 4px !important;
  }

  .trust-pill .avatar-dot {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    margin-left: -7px !important;
    display: inline-block !important;
  }
  .trust-pill .avatar-dot:first-child {
    margin-left: 0 !important;
  }

  .trust-copy {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .trust-copy strong {
    color: #0f172a !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .trust-copy strong::before {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18) !important;
    margin-right: 8px !important;
    animation: trustPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  }

  .trust-copy small {
    display: inline !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  .trust-copy small::before {
    content: "•" !important;
    margin: 0 6px !important;
    color: #cbd5e1 !important;
  }

  .trust-stars {
    display: none !important;
  }

  /* Headline: bold, proportional, zero collision */
  .hero-heading--desktop {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: block !important;
    margin: 0 0 16px 0 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    color: #090d1a !important;
    max-width: 100% !important;
    text-wrap: balance !important;
    text-shadow: none !important;
  }

  .hero-heading--mobile {
    display: none !important;
  }

  .headline-line {
    display: block !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    transform: none !important;
    animation: none !important;
  }

  .hl-cyan {
    position: relative !important;
    display: inline !important;
    background: linear-gradient(92deg, #0ea5ff 0%, #2563eb 50%, #6366f1 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
  }

  .hl-cyan::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -4px !important;
    height: 4px !important;
    border-radius: 9999px !important;
    background: linear-gradient(90deg, #0ea5ff 0%, #2563eb 50%, #6366f1 100%) !important;
    opacity: 0.9 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    max-width: 100% !important;
  }

  /* Subtitle */
  .hero-desc--desktop {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: block !important;
    margin: 0 0 24px 0 !important;
    max-width: 530px !important;
    color: #475569 !important;
    font-size: clamp(15px, 1.22vw, 17px) !important;
    line-height: 1.62 !important;
    font-weight: 500 !important;
    text-wrap: pretty !important;
  }

  .hero-desc--mobile {
    display: none !important;
  }

  /* Buttons */
  .hero-buttons {
    grid-column: 1 !important;
    grid-row: 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  .hero-buttons .btn-primary {
    min-width: 184px !important;
    min-height: 52px !important;
    padding: 0 24px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 55%, #4f46e5 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .hero-buttons .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }

  .hero-buttons .btn-ghost.hero-work-link--desktop {
    min-width: 168px !important;
    min-height: 52px !important;
    padding: 0 22px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(219, 234, 254, 0.95) !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    backdrop-filter: blur(10px) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  }

  .hero-buttons .btn-ghost.hero-work-link--desktop:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(147, 197, 253, 1) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    color: #1d4ed8 !important;
  }

  .hero-buttons .btn-ghost.hero-work-link--desktop svg {
    width: 15px !important;
    height: 15px !important;
    fill: #2563eb !important;
    color: #2563eb !important;
  }

  .hero-work-link--mobile {
    display: none !important;
  }

  /* Assurances */
  .desktop-hero-assurance {
    grid-column: 1 !important;
    grid-row: 5 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: clamp(14px, 2vw, 24px) !important;
    margin: 22px 0 0 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  .desktop-hero-assurance span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
  }

  .desktop-hero-assurance svg {
    width: 16px !important;
    height: 16px !important;
    padding: 2.5px !important;
    color: #ffffff !important;
    background: #10b981 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    stroke-width: 3.2 !important;
  }

  /* Right Column Visual */
  .right-col {
    grid-column: 2 !important;
    grid-row: 1 / span 5 !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
  }

  .right-col .cards-strip {
    display: none !important;
  }

  .performance-hero-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.62fr) minmax(145px, 1fr) !important;
    align-items: stretch !important;
    gap: clamp(12px, 1.4vw, 18px) !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    filter: drop-shadow(0 20px 40px rgba(15, 76, 129, 0.08)) !important;
    animation: none !important;
  }

  .performance-card {
    position: relative !important;
    border-radius: 22px !important;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.88)) !important;
    border: 1px solid rgba(219, 234, 254, 0.85) !important;
    box-shadow: 0 16px 36px rgba(15, 76, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px) 18px !important;
    min-height: 310px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .performance-card__top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .performance-card__label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .performance-card__label span {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16) !important;
  }

  .performance-card__range {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 11px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: default !important;
  }

  .performance-card__number {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 20px !important;
    color: #090d1a !important;
    font-size: clamp(34px, 3.2vw, 44px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
  }

  .performance-card__sub {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 6px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .performance-card__trend {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .performance-card__trend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    color: #047857 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .performance-card__trend span svg {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 2.8 !important;
  }

  .performance-card__trend small {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  .performance-card__bubble {
    position: absolute !important;
    z-index: 3 !important;
    right: 22px !important;
    top: 96px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(219, 234, 254, 0.9) !important;
    box-shadow: 0 10px 24px rgba(15, 76, 129, 0.1) !important;
    pointer-events: none !important;
  }

  .performance-card__bubble strong {
    display: block !important;
    color: #2563eb !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
  }

  .performance-card__bubble small {
    display: block !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  .performance-chart {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 12px !important;
    width: calc(100% - 40px) !important;
    height: 140px !important;
    z-index: 1 !important;
  }

  /* Metric Stack */
  .performance-metrics {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 8px !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .performance-metric {
    flex: 1 1 0 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(219, 234, 254, 0.8) !important;
    box-shadow: 0 6px 18px rgba(15, 76, 129, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  }

  .performance-metric:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(15, 76, 129, 0.1) !important;
    border-color: rgba(147, 197, 253, 0.9) !important;
  }

  .performance-metric__icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(240, 249, 255, 0.9) !important;
    border: 1px solid rgba(219, 234, 254, 0.7) !important;
  }

  .performance-metric--clients .performance-metric__icon {
    background: rgba(239, 246, 255, 0.9) !important;
    color: #2563eb !important;
  }
  .performance-metric--conversion .performance-metric__icon {
    background: rgba(236, 253, 245, 0.9) !important;
    color: #059669 !important;
  }
  .performance-metric--rating .performance-metric__icon {
    background: rgba(254, 252, 232, 0.9) !important;
    color: #d97706 !important;
  }
  .performance-metric--satisfaction .performance-metric__icon {
    background: rgba(240, 249, 255, 0.9) !important;
    color: #0284c7 !important;
  }

  .performance-metric svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.4 !important;
  }

  .performance-metric strong {
    color: #090d1a !important;
    font-size: clamp(18px, 1.5vw, 22px) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
  }

  .performance-metric small {
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .performance-metric i {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    color: #059669 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    font-style: normal !important;
  }

  .performance-metric em {
    display: block !important;
    color: #f59e0b !important;
    font-size: 10px !important;
    font-style: normal !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
  }
}

/* Laptop Screens (901px to 1200px) */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero-wrap {
    width: calc(100% - 40px) !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    column-gap: 28px !important;
    padding: 24px 0 !important;
  }

  .hero-heading--desktop {
    font-size: clamp(34px, 3.2vw, 42px) !important;
    margin-bottom: 12px !important;
  }

  .hero-desc--desktop {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost.hero-work-link--desktop {
    min-width: 156px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
  }

  .performance-hero-visual {
    grid-template-columns: minmax(0, 1.55fr) minmax(136px, 1fr) !important;
    gap: 10px !important;
  }

  .performance-card {
    min-height: 290px !important;
    padding: 18px !important;
  }

  .performance-card__number {
    font-size: 34px !important;
    margin-top: 14px !important;
  }

  .performance-card__bubble {
    top: 86px !important;
    right: 14px !important;
    padding: 6px 10px !important;
  }

  .performance-metric {
    padding: 8px 10px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  .performance-metric__icon {
    width: 36px !important;
    height: 36px !important;
  }

  .performance-metric strong {
    font-size: 18px !important;
  }

  .performance-metric small {
    font-size: 10.5px !important;
  }
}

/* Large Screens (1201px+) */
@media (min-width: 1201px) {
  .hero-heading--desktop {
    font-size: clamp(44px, 3.5vw, 54px) !important;
    margin-bottom: 16px !important;
  }

  .performance-hero-visual {
    grid-template-columns: minmax(0, 1.6fr) minmax(160px, 1fr) !important;
    gap: 16px !important;
  }

  .performance-card {
    min-height: 330px !important;
    padding: 26px !important;
  }

  .performance-card__number {
    font-size: 44px !important;
    margin-top: 22px !important;
  }

  .performance-card__bubble {
    top: 106px !important;
    right: 26px !important;
  }
}

@keyframes trustPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

.top-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.16);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(15, 76, 148, 0.05);
}
.top-call-btn svg {
  color: #1d4ed8;
  flex-shrink: 0;
}
.top-call-btn:hover {
  background: #ffffff;
  border-color: #1d4ed8;
  color: #1d4ed8;
  box-shadow: 0 4px 16px rgba(29, 78, 216, 0.12);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .top-call-btn span {
    display: none;
  }
  .top-call-btn {
    padding: 0 10px;
    min-height: 38px;
  }
}
@media (max-width: 600px) {
  .top-call-btn {
    display: none !important;
  }
}